/* ========================================================================= Centrum M5 — WYGLĄD 2.0. Warstwa kładziona NA `styl.css`, wczytywana tylko przy włączonym nowym wyglądzie (/wyglad/nowy). Stary arkusz zostaje nietknięty, więc nic, co działa dziś, nie może się przez to zepsuć. Na czym to stoi (materiał zebrany 12.09.2026): • NN/g „8 Design Guidelines for Complex Applications" — w programie używanym codziennie wygrywa USUWANIE ozdobników i gęstość, nie efekty. • NN/g „Data Tables" — przyklejony nagłówek, czytelna pierwsza kolumna, podświetlenie całego wiersza, liczby do prawej. • NN/g „Dashboards" — położenie i długość niosą informację lepiej niż kolor; kolor tylko WZMACNIA to, co już widać z układu (8% mężczyzn nie rozróżnia barw). Stąd: jeden akcent, trzy kolory stanu, reszta szarości, a udziały pokazujemy długością paska, nie samą barwą. ========================================================================= */ /* ============================== 1. Kolory ============================== */ :root { --tlo: #f2f5f9; --powierzchnia: #ffffff; --powierzchnia-2: #eef1f6; --powierzchnia-3: #e5eaf1; --obrys: #e1e7ef; --obrys-mocny: #c5cede; --tekst: #0e1622; --tekst-2: #51607a; --tekst-3: #8492a9; --akcent: #0a6ca6; --akcent-mocny: #08587f; --akcent-tlo: #e6f1f9; --akcent-obrys: #b6d8ef; --zysk: #0a7a54; --zysk-tlo: #e2f4ed; --zysk-obrys: #b2dfce; --uwaga: #96570a; --uwaga-tlo: #fdf2e1; --uwaga-obrys: #efd4a8; --blad: #b42f1d; --blad-tlo: #fdeceb; --blad-obrys: #f2c2bb; /* Pasek boczny jest ciemny w OBU motywach — to jedyna stała część ekranu, więc daje oku punkt zaczepienia i oddziela „gdzie jestem" od „co robię". */ --bok-tlo: #141a24; --bok-tlo-2: #1d2531; --bok-obrys: #26303f; --bok-tekst: #97a5ba; --bok-tekst-mocny: #f1f5fa; --bok-akcent: #58b0e6; --r-mala: 5px; --r-srednia: 7px; --r-duza: 9px; --wys-kontrolki: 32px; --nawigacja-wys: 56px; --bok-szer: 218px; --cien-1: 0 1px 1px rgba(14, 22, 34, .04); --cien-2: 0 6px 18px -6px rgba(14, 22, 34, .16), 0 2px 5px -2px rgba(14, 22, 34, .08); --pierscien: 0 0 0 3px rgba(10, 108, 166, .25); --szs: #6f63e4; --ld: #0d8578; --mb: #c2538b; --m5: #0a6ca6; } @media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) { --tlo: #0a0e15; --powierzchnia: #121821; --powierzchnia-2: #19212c; --powierzchnia-3: #212a37; --obrys: #232d3b; --obrys-mocny: #374354; --tekst: #e9eef5; --tekst-2: #9dabbf; --tekst-3: #6d7b91; --akcent: #5cb3e8; --akcent-mocny: #86c9f2; --akcent-tlo: #0d2a3d; --akcent-obrys: #1b4763; --zysk: #46cf9c; --zysk-tlo: #0d2720; --zysk-obrys: #1b4838; --uwaga: #e8b46a; --uwaga-tlo: #291f12; --uwaga-obrys: #47381f; --blad: #f0877a; --blad-tlo: #2b1513; --blad-obrys: #4c2722; --bok-tlo: #0e131b; --bok-tlo-2: #161d27; --bok-obrys: #1e2633; --cien-1: 0 1px 1px rgba(0, 0, 0, .3); --cien-2: 0 6px 18px -6px rgba(0, 0, 0, .6), 0 2px 5px -2px rgba(0, 0, 0, .4); --pierscien: 0 0 0 3px rgba(92, 179, 232, .28); --szs: #9a90ff; --ld: #3fc4b6; --mb: #ec8cba; --m5: #5cb3e8; } } /* Motyw wybrany ręcznie. Reguła wyżej działa tylko wtedy, gdy ciemny motyw ma system — a klient może chcieć ciemnego przy jasnym systemie i odwrotnie (13.09.2026). Te same tokeny, wymuszone atrybutem na . */ :root[data-motyw="ciemny"] { --tlo: #0a0e15; --powierzchnia: #121821; --powierzchnia-2: #19212c; --powierzchnia-3: #212a37; --obrys: #232d3b; --obrys-mocny: #374354; --tekst: #e9eef5; --tekst-2: #9dabbf; --tekst-3: #6d7b91; --akcent: #5cb3e8; --akcent-mocny: #86c9f2; --akcent-tlo: #0d2a3d; --akcent-obrys: #1b4763; --zysk: #46cf9c; --zysk-tlo: #0d2720; --zysk-obrys: #1b4838; --uwaga: #e8b46a; --uwaga-tlo: #291f12; --uwaga-obrys: #47381f; --blad: #f0877a; --blad-tlo: #2b1513; --blad-obrys: #4c2722; --bok-tlo: #0e131b; --bok-tlo-2: #161d27; --bok-obrys: #1e2633; --cien-1: 0 1px 1px rgba(0, 0, 0, .3); --cien-2: 0 6px 18px -6px rgba(0, 0, 0, .6), 0 2px 5px -2px rgba(0, 0, 0, .4); --pierscien: 0 0 0 3px rgba(92, 179, 232, .28); --szs: #9a90ff; --ld: #3fc4b6; --mb: #ec8cba; --m5: #5cb3e8; } /* ============================ 2. Typografia ============================ */ html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13.5px; line-height: 1.45; letter-spacing: -.006em; /* Cyfry równej szerokości w CAŁEJ aplikacji — kolumny kwot przestają drgać. */ font-variant-numeric: tabular-nums; } h1, h2, h3 { letter-spacing: -.02em; text-wrap: balance; } /* ====================== 3. Szkielet strony (układ) ===================== */ .aplikacja { background: var(--tlo); } /* Pasek tytułu i zakładki tworzą JEDEN biały blok nad szarą treścią — widać wtedy od razu, gdzie kończy się „gdzie jestem", a zaczyna „co mam". */ .pasek-gorny { position: relative; padding: calc(var(--bezpieczna-gora) + 12px) 14px 10px; background: var(--powierzchnia); border-bottom: 0; } .pasek-gorny h1 { font-size: 19px; font-weight: 650; } .pasek-gorny .podtytul { margin-top: 2px; font-size: 12.5px; color: var(--tekst-2); } .tresc { padding: 14px; } @media (min-width: 900px) { .aplikacja { grid-template-columns: var(--bok-szer) minmax(0, 1fr); } .pasek-gorny { position: sticky; top: 0; z-index: 21; padding: 16px 26px 10px; } .tresc { padding: 16px 26px 40px; } .zakladki { position: sticky; top: 0; z-index: 20; background: var(--powierzchnia); } } .logo-tytul { height: 34px; } @media (min-width: 900px) { .logo-tytul { height: 38px; } } /* Działanie ekranu po prawej w pasku tytułu — tak jak w programach, w których pracuje się codziennie. */ .akcja-naglowka { position: absolute; right: 14px; top: calc(var(--bezpieczna-gora) + 12px); } @media (min-width: 900px) { .akcja-naglowka { right: 26px; top: 16px; } } /* ========================= 4. Nawigacja boczna ========================= */ @media (min-width: 900px) { .nawigacja { background: var(--bok-tlo); border-right: 0; padding: 10px 8px 14px; gap: 0; overflow-y: auto; } .nawigacja a { position: relative; min-height: 31px; padding: 0 9px; gap: 9px; border-radius: var(--r-srednia); font-size: 13px; font-weight: 500; color: var(--bok-tekst); transition: background .12s, color .12s; } .nawigacja a:hover { background: var(--bok-tlo-2); color: var(--bok-tekst-mocny); } .nawigacja a.aktywna { background: var(--bok-tlo-2); color: var(--bok-tekst-mocny); font-weight: 600; } /* Kreska przy aktywnej pozycji: druga wskazówka obok tła, dla osoby nierozróżniającej barw i przy mocnym świetle. */ .nawigacja a.aktywna::before { content: ""; position: absolute; left: -8px; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bok-akcent); } .nawigacja a svg { width: 17px; height: 17px; stroke-width: 1.8; } .menu-grupa { margin: 12px 0 3px; padding: 0 9px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5b6a80; } .menu-marka { display: flex; align-items: center; gap: 9px; padding: 4px 9px 11px; margin-bottom: 4px; border-bottom: 1px solid var(--bok-obrys); } .menu-marka img { height: 20px; width: auto; display: block; } .menu-marka b { font-size: 13px; font-weight: 650; color: var(--bok-tekst-mocny); } .menu-marka b span { display: block; font-size: 10.5px; font-weight: 400; color: #5b6a80; } .menu-stopka { margin-top: auto; padding: 10px 9px 0; border-top: 1px solid var(--bok-obrys); font-size: 11px; color: #5b6a80; } .menu-stopka a { color: var(--bok-tekst); text-decoration: none; } .menu-stopka a:hover { color: var(--bok-akcent); text-decoration: underline; } } /* Znak sklepu zamiast logotypu: logotypy w skali 20 px były nieczytelnymi plamami, a na ciemnym pasku znikały zupełnie. Skrót w kolorze sklepu czyta się z każdej odległości. */ .znak-sklepu { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 20px; border-radius: var(--r-mala); background: var(--obrys); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; } .znak-szs { background: var(--szs); } .znak-ld { background: var(--ld); } .znak-mb { background: var(--mb); } .znak-m5 { background: var(--m5); } .znak-sklepu.z-kropka { position: relative; } .znak-sklepu.z-kropka::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--blad); box-shadow: 0 0 0 2px var(--bok-tlo); } @media (max-width: 899px) { .nawigacja { background: var(--powierzchnia); border-top: 1px solid var(--obrys); overflow-x: auto; } .nawigacja a { font-size: 10px; font-weight: 500; color: var(--tekst-3); } .nawigacja a.aktywna { color: var(--akcent); } .nawigacja a svg { width: 19px; height: 19px; } .znak-sklepu.z-kropka::after { box-shadow: 0 0 0 2px var(--powierzchnia); } .menu-grupa, .menu-marka, .menu-stopka { display: none; } } /* ====================== 5. Zakładki wewnątrz sklepu ==================== */ .zakladki { gap: 0; padding: 0 14px; margin-bottom: 0; border-bottom: 1px solid var(--obrys); background: var(--powierzchnia); } .zakladki a { padding: 7px 11px 8px; font-size: 13px; font-weight: 500; color: var(--tekst-2); border-bottom: 2px solid transparent; border-radius: 0; } .zakladki a:hover { color: var(--tekst); background: var(--powierzchnia-2); } .zakladki a.aktywna { color: var(--akcent); border-bottom-color: var(--akcent); font-weight: 600; } .zakladki .licznik-maly { height: 16px; min-width: 16px; padding: 0 4px; background: var(--akcent-tlo); color: var(--akcent); font-size: 10.5px; font-weight: 700; border-radius: 999px; } .zakladki a.aktywna .licznik-maly { background: var(--akcent); color: #fff; } @media (min-width: 900px) { .zakladki { padding: 0 26px; } } /* ===================== 6. Pasek modułu (miesiąc, dane) ================= */ /* Jeden pasek sterowania na górze modułu: okres po lewej, świeżość danych i odświeżanie po prawej. Wcześniej były to dwa osobne rzędy, każdy wyśrodkowany inaczej. */ .pasek-modulu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; padding: 8px 10px; background: var(--powierzchnia); border: 1px solid var(--obrys); border-radius: var(--r-duza); box-shadow: var(--cien-1); } .pasek-modulu .rozpychacz { flex: 1 1 auto; } .pasek-modulu .stan-danych { font-size: 11.5px; color: var(--tekst-3); } .pasek-modulu form { display: flex; } /* Przełącznik miesiąca jako jeden zrośnięty element. */ .przelacznik-okresu { display: flex; align-items: stretch; } .przelacznik-okresu > * { margin: 0; } .przelacznik-okresu .krok { display: grid; place-items: center; width: 30px; min-height: var(--wys-kontrolki); border: 1px solid var(--obrys-mocny); background: var(--powierzchnia); color: var(--tekst-2); text-decoration: none; font-size: 14px; } .przelacznik-okresu .krok:first-child { border-radius: var(--r-srednia) 0 0 var(--r-srednia); } .przelacznik-okresu .krok:last-child { border-radius: 0 var(--r-srednia) var(--r-srednia) 0; } .przelacznik-okresu .krok:hover { background: var(--powierzchnia-2); color: var(--tekst); } .przelacznik-okresu .krok.wylaczony { opacity: .35; pointer-events: none; } .przelacznik-okresu select { min-height: var(--wys-kontrolki); border-radius: 0; border-left: 0; border-right: 0; padding: 0 10px; font-size: 13px; font-weight: 600; min-width: 148px; background: var(--powierzchnia); } /* ============================== 7. Karty =============================== */ .karta { border-radius: var(--r-duza); border: 1px solid var(--obrys); box-shadow: var(--cien-1); padding: 13px 14px; margin-bottom: 12px; } .karta-naglowek { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .karta-tytul { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--tekst-3); } .karta-naglowek > .znacznik:first-of-type { margin-left: auto; } .karta.bez-marginesu { padding: 0 0 2px; } .karta.bez-marginesu .karta-naglowek { padding: 10px 14px; margin-bottom: 0; border-bottom: 1px solid var(--obrys); } .karta.bez-marginesu .tabela-otoczka { border-top: 0; } /* ====================== 8. Pasek liczb (kafle) ======================== */ /* Kafle zrastają się w jeden pasek rozdzielony kreskami. Kafel z prognozą i VAT-em jest wyższy od reszty — osobne pudełka zostawiały pod spodem pustkę, którą oko czytało jako „czegoś tu brakuje". */ .kafle { gap: 0; margin-bottom: 12px; overflow: hidden; background: var(--powierzchnia); border: 1px solid var(--obrys); border-radius: var(--r-duza); box-shadow: var(--cien-1); } .kafel { border: 0; border-radius: 0; background: transparent; box-shadow: -1px 0 0 var(--obrys), 0 -1px 0 var(--obrys); padding: 12px 14px; } .kafel .etykieta { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 5px; } .kafel .liczba { font-size: 23px; font-weight: 650; line-height: 1.15; } .kafel .zmiana { font-size: 11.5px; color: var(--tekst-2); margin-top: 3px; } .kafel.wyroznik { background: var(--powierzchnia-2); box-shadow: -1px 0 0 var(--obrys), 0 -1px 0 var(--obrys), inset 3px 0 0 var(--akcent); } a.kafel:hover { background: var(--akcent-tlo); } .kafel .prognoza { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--obrys-mocny); font-size: 12px; } .kafel .etykieta-prognozy { font-size: 9.5px; letter-spacing: .07em; } @media (min-width: 900px) { .kafel .liczba { font-size: 24px; } } /* Pasek postępu miesiąca w kaflu prognozy — długość mówi więcej niż liczba. */ .postep { height: 4px; border-radius: 999px; background: var(--powierzchnia-3); margin-top: 7px; overflow: hidden; } .postep span { display: block; height: 100%; border-radius: 999px; background: var(--akcent); } /* ============================= 9. Tabele =============================== */ .tabela { font-size: 12.5px; } .tabela th { padding: 7px 8px; font-size: 10px; font-weight: 700; letter-spacing: .07em; color: var(--tekst-3); background: var(--powierzchnia-2); border-bottom: 1px solid var(--obrys); } .tabela td { padding: 7px 8px; border-bottom: 1px solid var(--obrys); } .tabela tbody tr:hover td { background: var(--akcent-tlo); } .tabela tbody tr:hover .przyklejona { background: var(--akcent-tlo); } .tabela thead .przyklejona { background: var(--powierzchnia-2); } .tabela .przyklejona { box-shadow: 1px 0 0 var(--obrys); } .tabela .mocna { font-weight: 650; } .tabela .dodatnia, .tabela .ujemna { font-weight: 650; } @media (max-width: 1500px) { .tabela { font-size: 12px; } .tabela th { padding: 6px 6px; font-size: 9.5px; } .tabela td { padding: 6px 6px; } } /* ============================ 10. Przyciski ============================ */ .przycisk { min-height: var(--wys-kontrolki); padding: 0 12px; border-radius: var(--r-srednia); font-size: 12.5px; font-weight: 600; background: var(--akcent); border: 1px solid var(--akcent); color: #fff; box-shadow: var(--cien-1); transition: background .12s, border-color .12s, box-shadow .12s; } .przycisk:hover { background: var(--akcent-mocny); border-color: var(--akcent-mocny); } .przycisk:active { box-shadow: none; } .przycisk.drugi { background: var(--powierzchnia); border-color: var(--obrys-mocny); color: var(--tekst); } .przycisk.drugi:hover { background: var(--powierzchnia-2); border-color: var(--tekst-3); } .przycisk.maly { min-height: 26px; padding: 0 9px; font-size: 12px; } .przycisk-tekstowy { font-size: 12.5px; font-weight: 600; color: var(--akcent); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .przycisk:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: var(--r-mala); } /* ============================ 11. Znaczniki =========================== */ .znacznik { padding: 1px 6px; border-radius: var(--r-mala); font-size: 11px; font-weight: 650; border: 1px solid transparent; } .znacznik.nowe { background: var(--powierzchnia-2); color: var(--tekst-2); border-color: var(--obrys); } .znacznik.realizacja { background: var(--akcent-tlo); color: var(--akcent); border-color: var(--akcent-obrys); } .znacznik.oczekuje { background: var(--uwaga-tlo); color: var(--uwaga); border-color: var(--uwaga-obrys); } .znacznik.wyslane { background: var(--zysk-tlo); color: var(--zysk); border-color: var(--zysk-obrys); } .znacznik.uwaga { background: var(--blad-tlo); color: var(--blad); border-color: var(--blad-obrys); } .znacznik.pilne { background: var(--blad-tlo); color: var(--blad); border-color: var(--blad-obrys); } /* ============================ 12. Formularze ========================== */ input[type="text"], input[type="date"], input[type="number"], input[type="password"], input[type="search"], input[type="email"], select, textarea { font-family: inherit; font-size: 12.5px; min-height: var(--wys-kontrolki); border-radius: var(--r-srednia); border: 1px solid var(--obrys-mocny); background: var(--powierzchnia); color: var(--tekst); } input:focus, select:focus, textarea:focus { border-color: var(--akcent); box-shadow: var(--pierscien); outline: none; } .pole-panelu { font-size: 11.5px; color: var(--tekst-2); } /* ============================ 13. Komunikaty ========================== */ .komunikat { border-radius: var(--r-srednia); border: 1px solid var(--blad-obrys); background: var(--blad-tlo); color: var(--blad); font-size: 12.5px; padding: 9px 12px; margin-bottom: 12px; } .komunikat.sukces { background: var(--zysk-tlo); color: var(--zysk); border-color: var(--zysk-obrys); } .komunikat.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); border-color: var(--uwaga-obrys); } /* Pusty ekran: znak, nagłówek, jedno zdanie — bez wielkiej dziury. */ .pusto { padding: 40px 16px; text-align: center; color: var(--tekst-2); } .pusto svg { width: 34px; height: 34px; color: var(--tekst-3); } .pusto h2 { font-size: 15px; margin: 10px 0 4px; } .pusto p { font-size: 12.5px; max-width: 46ch; margin: 0 auto; } /* ======================= 14. Drobiazgi wykończenia ==================== */ .drobne { font-size: 11.5px; } .przygaszona { color: var(--tekst-3); } ::selection { background: var(--akcent-tlo); color: var(--akcent-mocny); } @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ============================ 15. Pulpit =============================== */ .pulpit-siatka { display: grid; gap: 12px; align-items: start; } @media (min-width: 1250px) { .pulpit-siatka { grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; } } .pulpit-glowna, .pulpit-bok { min-width: 0; } /* --- Zestawienie sklepów: równe kolumny, żeby dało się porównać wzrokiem --- */ .lista-sklepow { display: flex; flex-direction: column; } .wiersz-sklepu { display: grid; /* Kolumny liczone tak, żeby przy najwęższej karcie (ok. 780 px) zmieściła się jeszcze kolumna zysku — wcześniej ostatnia liczba uciekała poza kartę. */ grid-template-columns: 24px minmax(112px, 1fr) 306px 96px 100px 100px; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--obrys); text-decoration: none; color: inherit; } .lista-sklepow > a:last-child { border-bottom: 0; } .wiersz-sklepu:hover { background: var(--akcent-tlo); } .wiersz-sklepu .kto b { display: block; font-size: 13.5px; font-weight: 650; } .wiersz-sklepu .kwota { font-size: 14px; font-weight: 650; white-space: nowrap; } .wiersz-sklepu.wiersz-spolki { border-top: 2px solid var(--obrys-mocny); } .naglowek-listy { padding: 6px 14px; background: var(--powierzchnia-2); border-bottom: 1px solid var(--obrys); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-3); } .naglowek-listy:hover { background: var(--powierzchnia-2); } .naglowek-listy .liczniki-zamowien span, .naglowek-listy > span { font-size: 9px; letter-spacing: .04em; line-height: 1.15; white-space: normal; } /* Stany zamówień: cztery stałe szufladki w każdym wierszu, więc „1 do wysłania" u jednego sklepu jest dokładnie nad „0 do wysłania" u drugiego. Zero nie ma kropki ani koloru — przestaje krzyczeć tak samo jak jedynka. */ .liczniki-zamowien { display: grid; grid-template-columns: repeat(4, 72px); gap: 0 6px; } /* Liczba nad podpisem: cztery stany zajmują wtedy 256 px zamiast 386 px i każdy stoi dokładnie pod swoim nagłówkiem kolumny. */ .licznik { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; gap: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: 11px; color: var(--tekst-3); white-space: nowrap; } .licznik b { font-size: 13px; font-weight: 700; color: var(--tekst); } @media (min-width: 1101px) { .lista-sklepow .licznik .podpis { display: none; } } .licznik .podpis { font-size: 9.5px; color: var(--tekst-3); } .licznik, .licznik.pilny, .licznik.ostrzega, .licznik.zerowy { background: none; border: 0; opacity: 1; } .licznik.zerowy b { color: var(--tekst-3); font-weight: 500; } .licznik.pilny b { color: var(--akcent); } .licznik.ostrzega b { color: var(--uwaga); } .licznik.pilny::before, .licznik.ostrzega::before { content: ""; position: absolute; left: -7px; top: 6px; width: 5px; height: 5px; border-radius: 50%; } .licznik { position: relative; } .licznik.pilny::before { background: var(--akcent); } .licznik.ostrzega::before { background: var(--uwaga); } .udzial { display: flex; align-items: center; gap: 7px; } .udzial-pasek { flex: 1; height: 5px; border-radius: 999px; background: var(--powierzchnia-3); overflow: hidden; } .udzial-pasek span { display: block; height: 100%; border-radius: 999px; background: var(--akcent); } .udzial-liczba { font-size: 11px; color: var(--tekst-2); min-width: 26px; text-align: right; } .alerty-sklepu { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0 14px 9px 52px; border-top: 0; } .alert-sklepu { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--r-mala); border: 1px solid var(--blad-obrys); background: var(--blad-tlo); color: var(--blad); } @media (max-width: 1100px) { .wiersz-sklepu { grid-template-columns: 24px minmax(0, 1fr) 100px 100px; } .wiersz-sklepu .liczniki-zamowien { grid-column: 2 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); } .wiersz-sklepu .udzial { display: none; } .naglowek-listy { display: none; } } /* --- Wymaga uwagi --- */ .uwaga-wiersz { padding: 8px 0; border-bottom: 1px solid var(--obrys); } .uwaga-wiersz:last-child { border-bottom: 0; } .uwaga-tresc { display: flex; gap: 9px; text-decoration: none; color: inherit; } .uwaga-tresc b { font-size: 13px; font-weight: 650; } .uwaga-opis { display: block; font-size: 12px; color: var(--tekst-2); margin-top: 2px; } .doplata-formularz { display: flex; gap: 6px; margin: 7px 0 0 35px; } .doplata-formularz input[type="text"] { flex: 1; max-width: 280px; } /* --- Kolumna boczna --- */ .sprawa { padding: 7px 0; gap: 8px; } .sprawa-tresc { padding-left: 9px; } .sprawa-tytul { font-size: 12.5px; } .sprawa-opis { font-size: 12px; } @media (min-width: 1250px) { .pulpit-bok .sprawa { align-items: flex-start; } .pulpit-bok .sprawa-tresc { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; gap: 1px 7px; } .pulpit-bok .sprawa-tytul { white-space: normal; } .pulpit-bok .sprawa-opis { grid-column: 2; } .pulpit-bok .sprawa-dni { grid-column: 2; font-size: 11px; } } .karta.skrzynka.pusta { background: var(--zysk-tlo); border-color: var(--zysk-obrys); } .karta.skrzynka.pusta .karta-tytul { color: var(--zysk); } .karta.pasek-newsow { display: block; padding: 12px 14px; border-radius: var(--r-duza); } .karta.pasek-newsow:hover { border-color: var(--akcent-obrys); box-shadow: var(--cien-2); } .karta.pasek-newsow .newsy-dzien { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--tekst-3); margin-bottom: 9px; } .karta.pasek-newsow .newsy-lista { grid-template-columns: 1fr; gap: 8px; } .karta.pasek-newsow .newsy-wpis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: start; font-size: 12px; line-height: 1.4; color: var(--tekst); } .chip-news { border-radius: 4px; border-left: 3px solid var(--obrys-mocny); background: var(--powierzchnia-2); color: var(--tekst-2); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; } /* ===================== 16. Zagęszczenie paska tytułu =================== */ /* Tytuł i podtytuł w jednej linii. Wcześniej nagłówek sklepu zajmował 80 px na logo wielkości znaczka pocztowego i adres pod spodem — czyli pół ekranu telefonu na rzecz, która nic nie mówi poza „gdzie jestem". */ @media (min-width: 900px) { .pasek-gorny { display: flex; align-items: baseline; gap: 12px; padding: 12px 26px 9px; } .pasek-gorny h1 { flex: 0 0 auto; } .pasek-gorny .podtytul { margin: 0; } .logo-tytul { height: 30px; align-self: center; } } /* ================= 17. Pasek liczb: mniej pustego miejsca ============== */ /* Kafel z prognozą i VAT-em ma dwa dopiski więcej niż pozostałe i to on wyznaczał wysokość całego paska — trzy sąsiednie kafle stały wtedy nad pustką. Dopiski w jednej linii (podpis z lewej, kwota z prawej) skracają różnicę do jednego wiersza. */ .kafel .prognoza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 5px; font-size: 11.5px; } .kafel .etykieta-prognozy { margin: 0; } .kafel .prognoza + .prognoza { margin-top: 3px; padding-top: 4px; } /* ==================== 18. Okienko „Co się dzieje" ====================== */ /* Klient 15.09.2026: okienko zajmowało pół ekranu, a rodzaj zmiany trzeba było wyczytać ze środka zdania. Teraz jeden wpis to jedna linijka złożona z trzech stałych kolumn — godzina, METKA rodzaju, treść — a wpisy idą w kolumnach, czytane z góry na dół jak lista, nie jak akapity. 7 wpisów mieści się w trzech linijkach zamiast siedmiu. Kolor metki tylko WZMACNIA jej nazwę; sam nigdy nie jest jedyną różnicą między „przyszła fakturą" a „zapłacona". */ .okienko-zdarzen { padding-bottom: 10px; } .okienko-zdarzen .karta-naglowek { margin-bottom: 7px; } .okienko-zdarzen .zdarzenia-sekcja { margin: 0; } .okienko-zdarzen .etykieta-mala { font-size: 9.5px; letter-spacing: .08em; } /* Kolumny: multicol, więc kolejność czyta się z góry na dół, a nie zygzakiem. `max-height` ze starego arkusza kasujemy — przy kolumnach zrobiłby poziomy pasek przewijania. Długi dzień przycina za nas szablon (18 wpisów). */ .okienko-zdarzen .lista-zdarzen { margin: 0; padding: 0; list-style: none; max-height: none; overflow: visible; display: block; columns: 1; } @media (min-width: 1250px) { .okienko-zdarzen .lista-zdarzen { columns: 2; column-gap: 26px; } } @media (min-width: 1700px) { .okienko-zdarzen .lista-zdarzen { columns: 3; column-gap: 26px; } } .okienko-zdarzen .zdarzenie { display: block; padding: 0; border: 0; border-radius: var(--r-mala); break-inside: avoid; font-size: 12.5px; } .okienko-zdarzen .zdarzenie > a, .okienko-zdarzen .zdarzenie:not(:has(> a)) { display: grid; grid-template-columns: 33px 78px minmax(0, 1fr); align-items: baseline; gap: 0 8px; padding: 2px 5px; border-radius: var(--r-mala); color: inherit; text-decoration: none; } .okienko-zdarzen .zdarzenie > a:hover, .okienko-zdarzen .zdarzenie > a:focus-visible { background: var(--powierzchnia-2); } .okienko-zdarzen .zdarzenie > a:hover .tekst { text-decoration: none; } .okienko-zdarzen .godzina { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--tekst-3); } /* Metka = nazwa rodzaju zmiany. Stała szerokość, żeby treści wszystkich wpisów startowały z tej samej pionowej linii — oko skacze po jednej krawędzi. KOLOR bierze się z klasy znacznika (`.znacznik.oczekuje` i spółka wyżej w tym arkuszu), więc metka „F. dostawcy" ma dokładnie ten sam kolor co znacznik „niezapłacona" w Rozliczeniach. Tu ustawiamy TYLKO rozmiar i krój — ani jednego tła czy koloru tekstu, inaczej zdusiłyby warianty. */ .okienko-zdarzen .metka { display: block; overflow: hidden; padding: 0 4px; border-radius: 3px; border-width: 1px; border-style: solid; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; line-height: 15px; text-align: center; text-transform: uppercase; white-space: nowrap; } /* Znacznik „nowe" (szary) ma obrys z tokena; pozostałe warianty w nowym arkuszu też podają `border-color`, więc obwódka zawsze pasuje do tła. */ .okienko-zdarzen .tekst { color: var(--tekst); } @media (min-width: 1250px) { .okienko-zdarzen .tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .okienko-zdarzen .zdarzenia-pusto { margin: 2px 0 0; } /* „Wcześniej dziś" i „Wczoraj" — jednolinijkowe rozwijaki, nie osobne sekcje. */ .okienko-zdarzen .zdarzenia-wiecej, .okienko-zdarzen .wczoraj { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--obrys); } .okienko-zdarzen .zdarzenia-wiecej summary, .okienko-zdarzen .wczoraj summary { display: flex; align-items: baseline; gap: 6px; cursor: pointer; list-style: none; } .okienko-zdarzen summary::-webkit-details-marker { display: none; } .okienko-zdarzen .zdarzenia-wiecej[open] .lista-zdarzen, .okienko-zdarzen .wczoraj[open] .lista-zdarzen { margin-top: 4px; } .okienko-zdarzen .wczoraj .zdarzenie { opacity: .8; } /* Dopiski na DOLE kafla: pasek liczb ma wtedy jedną linię kontekstu u dołu zamiast trzech kafli wiszących nad pustką obok czwartego, wyższego. */ .kafel { display: flex; flex-direction: column; } .kafel .zmiana:last-child, .kafel .prognoza:last-child { margin-top: auto; } .kafel .liczba + .zmiana { margin-top: 3px; } /* ================= 19. Poprawki po przeglądzie wszystkich ekranów ====== */ /* Reguła `.kafel .liczba + .zmiana` stała PO regule dociskającej dopisek do dołu i ją kasowała — stąd trzy kafle wiszące nad pustką. Kolejność ma znaczenie, więc docisk powtarzamy na końcu. */ .kafel .liczba + .zmiana { margin-top: 3px; } .kafel > .zmiana:last-child, .kafel > .prognoza:last-child { margin-top: auto; } /* Pasek dwóch albo trzech liczb nie ma się rozciągać na całą szerokość monitora — kwoty rozjeżdżały się wtedy na metr od swoich podpisów. */ .kafle:has(> .kafel:nth-child(2):last-child) { max-width: 700px; } .kafle:has(> .kafel:nth-child(3):last-child) { max-width: 940px; } /* ---- Rzędy przełączników: filtr sklepów w SEO, miesiące w Fakturach ---- */ .miesiace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; } .miesiace .przycisk { min-height: 30px; } .miesiace .wybor-miesiaca { margin: 0; } /* Pasek informacji o danych wygląda jak pasek modułu i skleja się z rzędem miesięcy w jeden blok sterowania. */ .pasek-danych { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding: 8px 10px; background: var(--powierzchnia); border: 1px solid var(--obrys); border-radius: var(--r-duza); box-shadow: var(--cien-1); } .pasek-danych .stan-danych { flex: 1 1 240px; font-size: 11.5px; color: var(--tekst-3); } .pasek-danych form { display: flex; margin: 0; } /* ---------------------------- Narzędzia -------------------------------- */ /* Pola wyboru rozciągnięte na pół ekranu wyglądały jak formularz urzędowy. */ .formularz-kosztu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .formularz-kosztu .pole { display: flex; flex-direction: column; gap: 3px; } .formularz-kosztu .pole select, .formularz-kosztu .pole input { min-width: 190px; max-width: 260px; } .pole { font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--tekst-3); } .lista-plikow { display: flex; flex-direction: column; } .plik { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--obrys); } .plik:last-child { border-bottom: 0; } .plik-nazwa { font-size: 12.5px; font-weight: 600; } .plik-opis { font-size: 11.5px; color: var(--tekst-3); margin: 0; } /* ---------------------- Wgrywanie pliku (wyciąg) ----------------------- */ input[type="file"] { font-size: 12px; color: var(--tekst-2); max-width: 260px; } input[type="file"]::file-selector-button { min-height: 26px; margin-right: 8px; padding: 0 10px; border: 1px solid var(--obrys-mocny); border-radius: var(--r-srednia); background: var(--powierzchnia); color: var(--tekst); font: inherit; font-weight: 600; cursor: pointer; } input[type="file"]::file-selector-button:hover { background: var(--powierzchnia-2); } /* Nazwa miesiąca w rzędzie przełączników stała wyśrodkowana na całej szerokości, daleko od strzałki, którą się ją zmienia. */ .miesiace .biezacy { flex: 0 0 auto; text-align: left; font-size: 14px; font-weight: 650; padding: 0 4px; } /* Główne działanie ekranu nie musi ciągnąć się przez cały monitor — przycisk na całą szerokość ma sens na telefonie, nie na 27 calach. */ @media (min-width: 900px) { .przycisk.pelny { width: auto; max-width: 420px; } } /* ========================= 20. Telefon i wąskie okno =================== */ /* Ekran ma być tak samo używalny na telefonie jak na monitorze — nic nie wolno urwać w bok. Kolejność reguł: ta sekcja jest OSTATNIA w pliku, więc wygrywa z wcześniejszymi ustawieniami siatek na duże ekrany. */ @media (max-width: 1100px) { /* Wiersz sklepu: nazwa i pieniądze w pierwszej linii, stany w drugiej. Każdy element dostaje własne miejsce w siatce — bez tego kwoty wskakiwały jedna na drugą. */ .wiersz-sklepu { grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 6px 10px; padding: 9px 12px; } .wiersz-sklepu > .znak-sklepu { grid-column: 1; grid-row: 1; } .wiersz-sklepu > .kto { grid-column: 2; grid-row: 1; } .wiersz-sklepu > .kwota:nth-last-child(2) { grid-column: 3; grid-row: 1; } .wiersz-sklepu > .kwota:last-child { grid-column: 4; grid-row: 1; } .wiersz-sklepu > .udzial { display: none; } .wiersz-sklepu > .liczniki-zamowien { grid-column: 2 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 4px; } .wiersz-sklepu .kwota { font-size: 13px; } .lista-sklepow .licznik .podpis { display: block; } .naglowek-listy { display: none; } .alerty-sklepu { padding-left: 46px; } } @media (max-width: 899px) { /* Pasek liczb: po dwie na rząd. Trzy kwoty obok siebie na telefonie nie mieszczą się w jednej linii i urywały się w połowie. */ .kafle, .kafle.trzy, .kafle.cztery { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } .kafel { padding: 11px 12px; } .kafel .liczba { font-size: 19px; } .pasek-gorny h1 { font-size: 18px; } .tresc { padding: 12px; } .zakladki { padding: 0 12px; } .pasek-modulu, .pasek-danych { padding: 7px 8px; } .przelacznik-okresu select { min-width: 116px; } /* Dolne menu: przy dziesięciu pozycjach liczy się skrót, nie pełna nazwa. */ .nawigacja a { padding: 0 8px; } .menu-nazwa { display: none; } .menu-skrot { display: inline; } .karta { padding: 11px 12px; } .karta.bez-marginesu .karta-naglowek { padding: 9px 12px; } .wiersz-sklepu { padding: 9px 12px; } .doplata-formularz { margin-left: 0; flex-wrap: wrap; } } @media (max-width: 460px) { .kafle, .kafle.trzy, .kafle.cztery { grid-template-columns: minmax(0, 1fr); } .wiersz-sklepu { grid-template-columns: 24px minmax(0, 1fr) auto; } .wiersz-sklepu > .kwota:nth-last-child(2) { grid-column: 2; grid-row: 2; } .wiersz-sklepu > .kwota:last-child { grid-column: 3; grid-row: 2; } .wiersz-sklepu > .liczniki-zamowien { grid-row: 3; } } @media (min-width: 900px) { .menu-skrot { display: none; } .menu-nazwa { display: inline; } } /* ==================== 21. Pełna szerokość okna (monitor) =============== */ /* Stary wygląd trzymał całą aplikację w ramce 1400 px wyśrodkowanej na ekranie. Przy jasnym tle to nie raziło, ale ciemny pasek boczny odklejony od krawędzi wygląda jak błąd, a tabela zamówień MB (15 kolumn) traciła prawą stronę mimo pustego miejsca obok. Pasek ma dotykać lewej krawędzi, a treść zajmować to, co zostaje (uwaga klienta 12.09.2026). */ @media (min-width: 900px) { .aplikacja { max-width: none; margin: 0; } } @media (min-width: 1600px) { .aplikacja { max-width: none; } } /* Na bardzo szerokim monitorze sam TEKST nie ma się rozjeżdżać przez metr — ograniczamy akapity objaśnień, ale nie tabele i nie paski liczb. */ @media (min-width: 1700px) { .tresc > p, .tresc > .komunikat, .karta > p.drobne { max-width: 110ch; } } /* ================= 22. Okno zamówienia i inne okna szczegółów ========== */ .tlo-okna { background: rgba(8, 12, 18, .5); padding: 24px 16px; } .okno { width: min(780px, 100%); border: 1px solid var(--obrys); border-radius: var(--r-duza); box-shadow: 0 24px 60px -12px rgba(8, 12, 18, .45); } .okno-naglowek { padding: 14px 18px 12px; align-items: center; } .okno-tytul { font-size: 16px; font-weight: 650; } .okno-podtytul { font-size: 12px; margin-top: 1px; } .okno-zamknij { width: 28px; height: 28px; border-radius: var(--r-srednia); font-size: 15px; } .okno-tresc { padding: 14px 18px 16px; } /* Cztery liczby na wierzchu czytają się tak samo jak pasek liczb na ekranie modułu — ta sama zasada w dwóch miejscach zamiast dwóch różnych pudełek. */ .okno-liczby { gap: 0; padding: 0; overflow: hidden; background: var(--powierzchnia); border: 1px solid var(--obrys); border-radius: var(--r-srednia); margin-bottom: 0; } .okno-liczby > div { padding: 9px 12px; box-shadow: -1px 0 0 var(--obrys); } .okno-liczby .etykieta-mala { font-size: 9.5px; letter-spacing: .07em; } .okno-liczby strong { font-size: 15px; font-weight: 650; } /* Sekcje rozdzielone kreską zamiast samym odstępem — przy ośmiu sekcjach pod rząd odstęp przestaje wystarczać i wszystko zlewa się w jedno. */ .okno-sekcja { margin: 0; padding: 13px 0 0; border-top: 1px solid var(--obrys); } .okno-tresc > .okno-sekcja:first-child, .okno-tresc > .okno-liczby + .okno-sekcja { border-top: 0; } .okno-sekcja + .okno-sekcja { margin-top: 13px; } .okno-sekcja h3 { font-size: 10px; letter-spacing: .08em; margin-bottom: 6px; } .okno-kolumny { gap: 0 24px; margin-top: 13px; } .okno-kolumny .okno-sekcja { margin-top: 0; } .okno-tresc > .okno-pasek { margin: 13px 0 0; } .okno-pasek { border: 1px solid transparent; border-radius: var(--r-srednia); font-size: 12.5px; } .okno-pasek.pasek-ok { border-color: var(--zysk-obrys); } .okno-pasek.pasek-blad { border-color: var(--blad-obrys); } .okno-pasek.pasek-uwaga { border-color: var(--uwaga-obrys); } .okno-produkt { font-size: 13.5px; } .okno-pary { font-size: 12.5px; gap: 3px 14px; } .okno-cytat { font-size: 12.5px; border-radius: var(--r-srednia); } .okno-tabelka { font-size: 12.5px; } /* „Co się działo" jako oś z kropkami — widać ciąg zdarzeń, nie listę zdań. */ .okno-os { position: relative; padding-left: 14px; } .okno-os::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--obrys); } .okno-os li { position: relative; padding: 4px 0; border-top: 0; } .okno-os li::before { content: ""; position: absolute; left: -14px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--powierzchnia); border: 2px solid var(--obrys-mocny); } .okno-os li:first-child::before { border-color: var(--akcent); } .okno-stopka { padding: 11px 18px; background: var(--powierzchnia-2); } /* Szybkie terminy przypomnień: prostokąty jak reszta znaczników. */ .znacznik-termin { border-radius: var(--r-mala); padding: 4px 9px; font-size: 12px; font-weight: 600; } .nowe-przypomnienie > input[name="tresc"] { border-radius: var(--r-srednia); font-size: 12.5px; min-height: var(--wys-kontrolki); padding: 0 11px; } .lista-przypomnien li { padding: 6px 0; font-size: 12.5px; } /* ============== 23. Przygotowanie zamówienia i formularze ============== */ /* Podtytuł ucinał się w połowie słowa („…wyso"), bo nazwa produktu bywa długa. Teraz kończy się wielokropkiem i widać, że to skrót. */ @media (min-width: 900px) { .pasek-gorny .podtytul { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Pole z podpisem: podpis małą wersalikową etykietą NAD kontrolką — ten sam wzór w całej aplikacji, zamiast zdania przyklejonego z lewej. */ .pole-panelu { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-3); } .pole-panelu input, .pole-panelu select, .pole-panelu textarea { font-size: 12.5px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--tekst); } /* Rząd „dodaj modyfikację": pola w jednej linii, przycisk na końcu. */ .dodaj-modyfikacje { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(200px, 2fr) 110px 110px auto; align-items: end; gap: 10px; } .dodaj-modyfikacje .przycisk { min-height: var(--wys-kontrolki); } @media (max-width: 1000px) { .dodaj-modyfikacje { grid-template-columns: 1fr 1fr; } .dodaj-modyfikacje .szeroka { grid-column: 1 / -1; } } .tabela-modyfikacji { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tabela-modyfikacji th { text-align: left; padding: 0 8px 5px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-3); } .tabela-modyfikacji td { padding: 5px 8px; border-top: 1px solid var(--obrys); } .pole-opisu { width: 100%; } .pole-kwoty { width: 82px; text-align: right; } /* Zdjęcie i uwaga: dwie kolumny o stałej proporcji zamiast pionowej kolumny tekstu obok obrazka. */ .zdjecie-i-uwaga { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 760px) { .zdjecie-i-uwaga { grid-template-columns: 1fr; } } .zdjecia-panel { display: flex; flex-direction: column; gap: 8px; } .pasek-zdjec { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .zdjecie-podglad { margin: 0; } .zdjecie-podglad img { display: block; border-radius: var(--r-srednia); border: 1px solid var(--obrys); } .zdjecia-panel .drobne { color: var(--tekst-3); line-height: 1.45; margin: 0; } .brak-zdjecia { padding: 14px; border: 1px dashed var(--obrys-mocny); border-radius: var(--r-srednia); font-size: 12px; color: var(--tekst-3); text-align: center; } /* Ścieżka materaca: kroki jako pasek postępu, a nie lista słów. */ .sciezka-materaca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 10px; background: var(--powierzchnia-2); border-radius: var(--r-srednia); } .sciezka-materaca .krok { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-mala); background: var(--powierzchnia); border: 1px solid var(--obrys); font-size: 11.5px; font-weight: 600; color: var(--tekst-3); } .sciezka-materaca .krok.zrobiony { background: var(--zysk-tlo); border-color: var(--zysk-obrys); color: var(--zysk); } /* Podgląd maila: blok tekstu maszynowego, przewijany, nie rozpychający karty. */ .podglad-maila { margin: 0; padding: 12px 14px; max-height: 340px; overflow: auto; background: var(--powierzchnia-2); border: 1px solid var(--obrys); border-radius: var(--r-srednia); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; color: var(--tekst); } .akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .pod-akcja { font-size: 11.5px; color: var(--tekst-3); line-height: 1.45; margin: 8px 0 0; } .pozycja-materaca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--obrys); } .pozycja-materaca:last-of-type { border-bottom: 0; } .poprawka, .podpowiedz { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--obrys); font-size: 12.5px; } .poprawka:last-child, .podpowiedz:last-child { border-bottom: 0; } .podpowiedz-tekst { font-weight: 600; } /* Objaśnienia pod przyciskami czytają się jak podpis do działania, więc trzymają lewą krawędź razem z nim, a nie środek karty. */ .pod-akcja { text-align: left; } /* ============================ 24. Logowanie =========================== */ .logowanie { background: var(--tlo); } .logowanie-karta { width: min(360px, 100%); } .logowanie-marka { margin-bottom: 18px; text-align: center; } .logowanie-marka .logo-m5 { height: 46px; margin-bottom: 12px; } .logowanie-marka h1 { font-size: 18px; font-weight: 650; margin: 0; } .logowanie-marka p { margin: 4px 0 0; font-size: 12px; color: var(--tekst-3); } .logowanie .karta { padding: 18px; margin: 0; box-shadow: var(--cien-2); } .logowanie .pole { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .logowanie .pole label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-3); } .logowanie .pole input { width: 100%; min-height: 36px; padding: 0 11px; font-size: 13.5px; } .logowanie .przycisk.pelny { width: 100%; max-width: none; min-height: 36px; margin-top: 4px; } /* ============= 25. Rząd miesięcy / filtrów jako pasek sterowania ======= */ /* Stara reguła rozrzucała elementy na całą szerokość (`space-between`), więc nazwa miesiąca lądowała przy prawej krawędzi ekranu, metr od strzałki, którą się ją przestawia. */ .miesiace { justify-content: flex-start; padding: 7px 9px; background: var(--powierzchnia); border: 1px solid var(--obrys); border-radius: var(--r-duza); box-shadow: var(--cien-1); } /* Gdy pasek danych stoi tuż nad rzędem miesięcy, oba zrastają się w jeden blok sterowania zamiast dwóch osobnych ramek. */ .pasek-danych:has(+ .miesiace) { margin-bottom: 0; border-radius: var(--r-duza) var(--r-duza) 0 0; border-bottom: 0; } .pasek-danych + .miesiace { border-radius: 0 0 var(--r-duza) var(--r-duza); } /* ========== 26. Panele decyzji: wyciąg, niezgodne, dział kosztu ======== */ /* Karta, która CZEKA NA DECYZJĘ, ma się odróżniać od kart, które tylko pokazują liczby — stąd kolorowa krawędź z lewej i cieplejsze tło. */ .karta.wyroznik-akcji { border-color: var(--akcent-obrys); box-shadow: inset 3px 0 0 var(--akcent), var(--cien-1); } .karta.wymaga-uwagi { border-color: var(--uwaga-obrys); box-shadow: inset 3px 0 0 var(--uwaga), var(--cien-1); } .karta.wymaga-uwagi .karta-tytul { color: var(--uwaga); } .propozycja { padding: 10px 0; border-bottom: 1px solid var(--obrys); } .propozycja:last-of-type { border-bottom: 0; } .propozycja-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; } .propozycja-data { font-size: 11.5px; color: var(--tekst-3); min-width: 42px; } .propozycja-opis { font-size: 13px; font-weight: 600; flex: 1 1 220px; min-width: 0; } .propozycja-kwota { font-size: 14px; font-weight: 650; white-space: nowrap; } .propozycja-szczegoly { margin-top: 7px; font-size: 12px; color: var(--tekst-2); } .propozycja-akcje { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 9px; } .uwaga-wyceny { font-size: 11.5px; color: var(--uwaga); } .pola-operacji { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin-top: 8px; } /* Wybór jednej z kilku dróg — etykiety zachowują się jak przyciski wyboru. */ .wybor { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--obrys-mocny); border-radius: var(--r-mala); background: var(--powierzchnia); font-size: 12px; cursor: pointer; } .wybor:hover { border-color: var(--akcent); color: var(--akcent); } .wybor.mocny { border-color: var(--akcent); background: var(--akcent-tlo); color: var(--akcent); font-weight: 600; } .wiersz-porownania { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 3px 0; font-size: 12px; } .pozycja-szczegoly { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--obrys); } /* Wybór działu przy fakturze kosztowej: rząd małych przycisków. */ .pozycja-akcje.decyzja-kosztu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .przelacznik-decyzji { display: flex; flex-wrap: wrap; gap: 5px; } .przycisk-dzialu { padding: 3px 9px; border: 1px solid var(--obrys-mocny); border-radius: var(--r-mala); background: var(--powierzchnia); color: var(--tekst-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .przycisk-dzialu:hover { border-color: var(--akcent); color: var(--akcent); } .przycisk-dzialu.wybrany, .przycisk-dzialu[aria-pressed="true"] { background: var(--akcent-tlo); border-color: var(--akcent); color: var(--akcent); } .zmien-dzial { font-size: 11.5px; color: var(--tekst-3); } /* ======================== 27. Zwroty i zwrot =========================== */ .wiersz-alarm td { background: var(--blad-tlo); } .znacznik.czerwony { background: var(--blad-tlo); color: var(--blad); border-color: var(--blad-obrys); } .znacznik.zielony { background: var(--zysk-tlo); color: var(--zysk); border-color: var(--zysk-obrys); } .przycisk.zielony { background: var(--zysk); border-color: var(--zysk); color: #fff; } .przycisk.zielony:hover { filter: brightness(.94); } .przycisk.czerwony { background: var(--blad); border-color: var(--blad); color: #fff; } .przyciski-rzad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .paski-wyboru { display: flex; flex-direction: column; gap: 6px; } .paski-wyboru .pasek { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--obrys); border-radius: var(--r-srednia); background: var(--powierzchnia); font-size: 12.5px; cursor: pointer; } .paski-wyboru .pasek:hover { border-color: var(--akcent-obrys); background: var(--akcent-tlo); } .liczba.maly { font-size: 17px; } .liczbowa { text-align: right; font-variant-numeric: tabular-nums; } /* Nagłówki wewnątrz kart, które nie są małą etykietą sekcji, mają jeden rozmiar w całej aplikacji — inaczej „Zgłoś zwrot" krzyczy jak tytuł strony. */ .karta h2:not(.karta-tytul), .karta h3:not(.karta-tytul) { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 8px; } .karta > p:last-child { margin-bottom: 0; } /* ============ 28. Pasek filtrów nad listą zamówień ==================== */ /* Wzór: lista zamówień w BaseLinkerze (klient 12.09.2026) — statusy z licznikami nad tabelą i szukanie po prawej. Filtrowanie dzieje się w przeglądarce: chowa wiersze, nie zmienia żadnej liczby w kaflach. */ .pasek-filtrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px; border-bottom: 1px solid var(--obrys); background: var(--powierzchnia); } .filtry-statusow { display: flex; flex-wrap: wrap; gap: 5px; } .filtr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; border: 1px solid var(--obrys); border-radius: var(--r-mala); background: var(--powierzchnia); color: var(--tekst-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .filtr-chip b { min-width: 17px; padding: 0 4px; border-radius: 999px; background: var(--powierzchnia-2); color: var(--tekst-2); font-size: 11px; text-align: center; } .filtr-chip:hover { border-color: var(--obrys-mocny); color: var(--tekst); } /* Kolor licznika bierze się ze statusu — ten sam język, co znaczniki w kolumnie „Status", więc nie trzeba go uczyć drugi raz. */ .filtr-chip.realizacja b { background: var(--akcent-tlo); color: var(--akcent); } .filtr-chip.oczekuje b { background: var(--uwaga-tlo); color: var(--uwaga); } .filtr-chip.wyslane b { background: var(--zysk-tlo); color: var(--zysk); } .filtr-chip.uwaga b { background: var(--blad-tlo); color: var(--blad); } .filtr-chip.wybrany { background: var(--akcent); border-color: var(--akcent); color: #fff; } .filtr-chip.wybrany b { background: rgba(255, 255, 255, .22); color: #fff; } .szukajka { margin-left: auto; display: flex; } .szukajka input { width: 240px; max-width: 42vw; min-height: 28px; padding: 0 10px; font-size: 12.5px; } .wynik-filtra { flex: 0 1 auto; font-size: 11.5px; color: var(--tekst-3); } .wizualnie-ukryte { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 899px) { .pasek-filtrow { padding: 8px 12px; } .szukajka { margin-left: 0; width: 100%; } .szukajka input { width: 100%; max-width: none; } } /* ============ 29. Wiersz listy zamówień w dwóch liniach ================ */ /* Wzór: lista zamówień w BaseLinkerze (klient 12.09.2026). Na górze komórki to, czego szuka się wzrokiem, pod spodem szczegół drobnym drukiem. Piętnaście wąskich kolumn schodzi do dziewięciu i całość mieści się na ekranie bez przewijania w bok — a żadna dana nie znika. */ .tabela tbody td, .tabela tfoot td { vertical-align: top; } .tabela tbody td { padding: 7px 9px; } .kom-gora { display: block; line-height: 1.3; white-space: nowrap; } .kom-dol { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.3; color: var(--tekst-3); white-space: nowrap; min-height: 13px; } .kom-gora.mocna { font-weight: 650; } .tabela .prawo .kom-dol { text-align: right; } /* Atrybuty produktu jako podświetlony chip — w BaseLinkerze to właśnie one niosą rozmiar i wysokość, więc mają się rzucać w oczy bardziej niż nazwa. */ .chip-atrybut { display: inline-block; padding: 1px 6px; border-radius: var(--r-mala); background: var(--akcent-tlo); color: var(--akcent); font-size: 10.5px; font-weight: 600; letter-spacing: .01em; } /* Nagłówek kolumny też mówi o obu liniach: „Nr zam." nad, „data" pod. */ .th-pod { display: block; margin-top: 1px; font-size: 9px; font-weight: 600; letter-spacing: .05em; color: var(--tekst-3); opacity: .8; text-transform: none; } /* Nazwa produktu bywa długa — jedyna kolumna, która może się zawijać i zwężać, żeby reszta trzymała stałe miejsca. */ .tabela tbody td:nth-child(3) .kom-gora { white-space: normal; max-width: 340px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .doplacono, .bez-wplaty, .niedoplata { font-size: 10.5px; cursor: pointer; } .doplacono { color: var(--zysk); } .bez-wplaty { color: var(--uwaga); } .niedoplata { color: var(--blad); font-weight: 600; } .tabela tfoot .kom-dol { color: var(--tekst-3); } /* ============= 30. Domknięcia po przeglądzie wszystkich ekranów ======== */ /* Tabela POZA ramką przewijaną (ekran zwrotu, korekta) ma zawijać tekst, a nie uciekać poza kartę. `white-space: nowrap` ma sens tylko tam, gdzie tabela przewija się w bok we własnej ramce. */ .tabela:not(.tabela-otoczka *) { white-space: normal; } .tabela:not(.tabela-otoczka *) td, .tabela:not(.tabela-otoczka *) th { vertical-align: top; } /* Pasek wyboru to etykieta z kropką radiową — kropka i tekst stoją razem po lewej. Rozsunięte na krawędzie wyglądały jak dwie osobne rzeczy. */ .paski-wyboru .pasek { justify-content: flex-start; gap: 10px; text-align: left; } .paski-wyboru .pasek input[type="radio"], .paski-wyboru .pasek input[type="checkbox"] { flex: 0 0 auto; width: 15px; height: 15px; min-height: 0; margin: 0; accent-color: var(--akcent); } .paski-wyboru .pasek > span { flex: 1; min-width: 0; } .paski-wyboru .pasek.zablokowany { opacity: .55; cursor: not-allowed; } .paski-wyboru .pasek:has(input:checked) { border-color: var(--akcent); background: var(--akcent-tlo); } /* Pola formularzy w kartach: etykieta nad kontrolką, kontrolka na szerokość. */ .karta form > label { display: block; margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-3); } .karta form > label > input, .karta form > label > textarea, .karta form > label > select { display: block; width: 100%; margin-top: 4px; font-size: 12.5px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--tekst); } textarea { padding: 9px 11px; line-height: 1.5; resize: vertical; min-height: 90px; } /* Tabela bez własnej ramki przewijanej (lista zwrotów) na telefonie i tak bywa szersza niż ekran — wtedy ma się przewijać sama, a nie rozpychać całej strony w bok. */ @media (max-width: 899px) { .tabela:not(.tabela-otoczka *) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* =============== 31. Kafel prowadzi do swojego rozbicia =============== */ /* Kafel z liczbą, która ma swoją listę, zachowuje się jak łącze: strzałka pojawia się pod kursorem, a cała płytka reaguje. */ .kafel[data-cel], a.kafel { cursor: pointer; position: relative; } .kafel[data-cel] .etykieta::after, a.kafel .etykieta::after { content: " →"; opacity: 0; transition: opacity .12s; } .kafel[data-cel]:hover .etykieta::after, a.kafel:hover .etykieta::after { opacity: .75; } .kafel[data-cel]:hover, a.kafel:hover { background: var(--akcent-tlo); } .kafel.wyroznik[data-cel]:hover { background: var(--akcent-tlo); box-shadow: -1px 0 0 var(--obrys), 0 -1px 0 var(--obrys), inset 3px 0 0 var(--akcent); } /* Błysk sekcji, do której skoczyliśmy — bez niego nie widać, że coś się stało. */ @keyframes blysk-sekcji { 0% { box-shadow: 0 0 0 3px var(--akcent); } 100% { box-shadow: 0 0 0 3px transparent; } } .blysk { animation: blysk-sekcji 1.4s ease-out; border-radius: var(--r-duza); scroll-margin-top: 96px; /* żeby przyklejony pasek tytułu nie zasłonił */ } @media (prefers-reduced-motion: reduce) { .blysk { animation: none; box-shadow: 0 0 0 3px var(--akcent); } } /* =============== 32. Faktury kosztowe: proporcje kolumn =============== */ /* Bez narzuconych szerokości przeglądarka ściskała „Przedmiot" do sześciu linijek, a podpowiedź przy wyborze działu uciekała poza ekran. Ustalamy podział: data i numer wąsko, wystawca i przedmiot dostają miejsce, kwota do prawej, a wybór działu tyle, ile trzeba na cztery skróty i zdanie podpowiedzi pod nimi (uwaga klienta 12.09.2026). */ .tabela:has(.wybor-dzialu) { table-layout: fixed; width: 100%; } .tabela:has(.wybor-dzialu) th:nth-child(1), .tabela:has(.wybor-dzialu) td:nth-child(1) { width: 52px; } .tabela:has(.wybor-dzialu) th:nth-child(2), .tabela:has(.wybor-dzialu) td:nth-child(2) { width: 148px; } .tabela:has(.wybor-dzialu) th:nth-child(3), .tabela:has(.wybor-dzialu) td:nth-child(3) { width: 24%; } .tabela:has(.wybor-dzialu) th:nth-child(4), .tabela:has(.wybor-dzialu) td:nth-child(4) { width: 26%; } .tabela:has(.wybor-dzialu) th:nth-child(5), .tabela:has(.wybor-dzialu) td:nth-child(5) { width: 116px; } /* Tekst w tej tabeli ma się ZAWIJAĆ — nazwy wystawców i przedmiotów bywają długie, a kolumna z działem musi zmieścić zdanie podpowiedzi. */ .tabela:has(.wybor-dzialu) td { white-space: normal; vertical-align: top; } .tabela:has(.wybor-dzialu) td.prawo { white-space: nowrap; } .podpowiedz-dzialu { display: block; margin-top: 4px; line-height: 1.4; color: var(--tekst-2); } .przedmiot { line-height: 1.35; } /* Wybór działu: cztery skróty jako jeden zrośnięty przełącznik. */ .wybor-dzialu { display: inline-flex; flex-wrap: wrap; gap: 3px; } .wybor-dzialu label { display: inline-flex; cursor: pointer; } .wybor-dzialu label input { position: absolute; opacity: 0; width: 0; height: 0; } .wybor-dzialu label span { display: inline-block; min-width: 34px; padding: 2px 7px; border: 1px solid var(--obrys); border-radius: var(--r-mala); background: var(--powierzchnia-2); color: var(--tekst-3); font-size: 11px; font-weight: 700; text-align: center; transition: background .12s, color .12s, border-color .12s; } .wybor-dzialu label:hover span { border-color: var(--obrys-mocny); color: var(--tekst); } .wybor-dzialu label input:checked + span { background: var(--akcent); border-color: var(--akcent); color: #fff; } .wybor-dzialu label input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 2px; } /* Numery faktur bywają dłuższe niż kolumna („PAYNOW/2026/08/002599") — mają się łamać, a nie wchodzić na nazwę wystawcy. */ .tabela:has(.wybor-dzialu) td:nth-child(2) { overflow-wrap: anywhere; } /* Przyciski „zielone" i „czerwone": w trybie ciemnym kolor stanu jest jasny, więc biały napis na nim ginie. Tekst bierze się z osobnego tokenu, który w ciemnym motywie jest ciemny. */ :root { --na-kolorze: #ffffff; } @media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) { --na-kolorze: #07231b; } } .przycisk.zielony { background: var(--zysk); border-color: var(--zysk); color: var(--na-kolorze); } .przycisk.czerwony { background: var(--blad); border-color: var(--blad); color: var(--na-kolorze); } .przycisk.zielony:hover, .przycisk.czerwony:hover { filter: brightness(1.06); } /* ===================== 33. Kilometrówka: edycja miesiąca ============== */ /* Stan licznika wpisuje się wprost w kaflu — to ta sama liczba, na którą się patrzy, więc nie ma powodu chować jej w osobnym formularzu. */ .pole-licznika { width: 100%; border: 1px solid transparent; background: transparent; font: inherit; font-size: 22px; font-weight: 650; color: inherit; padding: 0 4px; border-radius: var(--r-mala); } .pole-licznika:hover { border-color: var(--obrys); } .pole-licznika:focus { border-color: var(--akcent); background: var(--powierzchnia); } .tabela-kilometrowki input { width: 100%; min-height: 26px; font-size: 12.5px; } .tabela-kilometrowki .pole-km { width: 74px; text-align: right; } .tabela-kilometrowki td { vertical-align: middle; } .tabela-kilometrowki .wiersz-nowy td { background: var(--powierzchnia-2); } .tabela-kilometrowki .do-sumy { font-size: 11.5px; color: var(--tekst-3); } /* ================ 34. Finanse osobiste: budżet domowy ================= */ /* Wszystko w jednej karcie: wydatki po lewej, przychody po prawej (ustalone z klientem 12.09.2026). Na telefonie jedna kolumna pod drugą. */ .budzet-siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 26px; } @media (max-width: 900px) { .budzet-siatka { grid-template-columns: minmax(0, 1fr); gap: 18px; } } .budzet-tytul { display: flex; align-items: baseline; gap: 7px; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); } .budzet-tytul span { padding: 0 6px; border-radius: 999px; background: var(--powierzchnia-2); font-size: 10.5px; color: var(--tekst-2); } .budzet-tytul.stany { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--obrys); } .budzet-lista { display: flex; flex-direction: column; } .budzet-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--obrys); } .budzet-wiersz:last-child { border-bottom: 0; } .budzet-wiersz input { width: 100%; min-height: 28px; border-color: transparent; background: transparent; font-size: 12.5px; } .budzet-wiersz input:hover { border-color: var(--obrys); } .budzet-wiersz input:focus { border-color: var(--akcent); background: var(--powierzchnia); } .budzet-wiersz .pole-kwoty { text-align: right; width: 100%; font-variant-numeric: tabular-nums; } .budzet-wiersz.nowy input { border-style: dashed; border-color: var(--obrys-mocny); } .budzet-wiersz.nowy input::placeholder { color: var(--tekst-3); } .budzet-etykieta { display: flex; align-items: center; font-size: 12.5px; color: var(--tekst-2); } .budzet-suma { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 9px; padding-top: 9px; border-top: 2px solid var(--obrys-mocny); font-size: 12px; color: var(--tekst-2); } .budzet-suma strong { font-size: 15px; font-weight: 650; color: var(--tekst); } .budzet-notatka { margin-top: 16px; } .budzet-notatka input { width: 100%; } /* ============ 35. Trend przy kaflach: iskra i zmiana m/m ============== */ /* Liczba bez porównania niewiele mówi. Iskra pokazuje przebieg sześciu miesięcy, a strzałka — o ile zmieniło się wobec poprzedniego (13.09.2026). Kolor jest tylko wzmocnieniem: kierunek niesie strzałka i kształt linii. */ .stopka-kafla { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; flex-wrap: nowrap; } .stopka-kafla > :first-child { min-width: 0; } .zmiana-mm { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; /* strzałka i procent zawsze w jednej linii */ } .stopka-kafla .drobne { white-space: nowrap; } .stopka-kafla .zmiana-mm + .drobne { margin-left: 5px; } .zmiana-mm.w-gore { color: var(--zysk); } .zmiana-mm.w-dol { color: var(--blad); } .iskra { width: 96px; height: 26px; flex: 0 0 auto; overflow: visible; } .iskra polyline { fill: none; stroke: var(--akcent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .iskra circle { fill: var(--akcent); } .kafel.wyroznik .iskra polyline, .kafel.wyroznik .iskra circle { stroke: var(--akcent); fill: var(--akcent); } @media (max-width: 899px) { .iskra { width: 64px; } } /* ===================== 36. Wybór motywu w stopce menu ================= */ .menu-stopka p { margin: 8px 0 0; } .wybor-motywu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: var(--r-srednia); background: var(--bok-tlo-2); } .wybor-motywu button { padding: 4px 0; border: 0; border-radius: var(--r-mala); background: none; color: #6d7c92; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; } .wybor-motywu button:hover { color: var(--bok-tekst-mocny); } .wybor-motywu button.wybrany { background: var(--bok-tlo); color: var(--bok-akcent); } @media (max-width: 899px) { .wybor-motywu { display: none; } } /* ============ 37. Komunikat o sukcesie: znika sam po chwili =========== */ .komunikat.sukces { position: relative; padding-right: 34px; transition: opacity .4s, transform .4s; } .komunikat.sukces.znika { opacity: 0; transform: translateY(-4px); } .komunikat-zamknij { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 22px; height: 22px; border: 0; border-radius: var(--r-mala); background: none; color: inherit; font-size: 12px; line-height: 1; opacity: .6; cursor: pointer; } .komunikat-zamknij:hover { opacity: 1; background: rgba(0, 0, 0, .06); } /* Krzyżyk usuwania pozycji budżetu — widoczny dopiero pod kursorem wiersza, żeby lista nie wyglądała jak pole minowe. */ .budzet-wiersz { grid-template-columns: minmax(0, 1fr) 116px 24px; align-items: center; } .usun-wiersz { width: 22px; height: 22px; border: 0; border-radius: var(--r-mala); background: none; color: var(--tekst-3); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s; } .budzet-wiersz:hover .usun-wiersz, .usun-wiersz:focus-visible { opacity: 1; } .usun-wiersz:hover { background: var(--blad-tlo); color: var(--blad); } .budzet-wiersz.nowy { grid-template-columns: minmax(0, 1fr) 116px 24px; } /* ============ 38. Kilometrówka: wysyłka do biura księgowego =========== */ /* Wysyłka jest NIEODWRACALNA, więc stoi w osobnym pasku, nie obok przycisków edycji — i wprost mówi, co i dokąd poleci (13.09.2026). */ .pasek-wysylki-km { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 12px 14px; background: var(--powierzchnia); border: 1px solid var(--akcent-obrys); border-radius: var(--r-duza); box-shadow: inset 3px 0 0 var(--akcent), var(--cien-1); font-size: 12.5px; } .pasek-wysylki-km strong { font-weight: 650; } .akcje-kilometrowki { white-space: nowrap; } .akcje-kilometrowki .przycisk, .akcje-kilometrowki .znacznik { margin-right: 4px; } .w-linii { display: inline-flex; } /* ====== 39. Finanse osobiste: plan obok tego, co naprawdę wyszło ====== */ /* Budżet wyżej jest prognozą. Ta część pokazuje wyciąg — a porównanie ma działać na rzut oka, dlatego przy każdej kategorii stoi słupek wykonania planu: krótki = zmieściliśmy się, pełny w kolorze ostrzeżenia = przekroczone. Kolor jest tylko wzmocnieniem — liczba i długość słupka niosą to samo. */ /* Stała szerokość kolumn: bez niej najdłuższa nazwa kategorii rozpychała tabelę poza kartę i urywała kwoty w rozwiniętej liście operacji. */ .tabela.porownanie { table-layout: fixed; width: 100%; } .tabela.porownanie td { vertical-align: middle; } .tabela.porownanie th:first-child, .tabela.porownanie td:first-child { width: auto; } .tabela.porownanie tfoot td { border-top: 2px solid var(--obrys-mocny); font-weight: 650; color: var(--tekst); } .tabela.porownanie tr.poza-planem td:first-child { color: var(--tekst-2); } /* Nazwa kategorii ma się ZAWIJAĆ — „Sklepy internetowe" z odznaką nie mieściły się w 200 px i wychodziły poza kartę (zmierzone w przeglądarce 13.09.2026). */ .tabela.porownanie td:first-child, .tabela.porownanie th:first-child { white-space: normal; } .tabela.porownanie th.prawo, .tabela.porownanie td.prawo { width: 92px; } /* Słupek wykonania planu stoi POD kwotą, której dotyczy — osobna kolumna zabierała 104 px nazwie kategorii i sama się nie mieściła. */ /* Wykonanie planu pod kwotą: procent po lewej, słupek wypełniający resztę. */ .wykonanie { display: flex; align-items: center; gap: 6px; margin-top: 3px; } .wykonanie > em { flex: 0 0 auto; font-size: 10px; font-style: normal; font-weight: 400; color: var(--tekst-3); font-variant-numeric: tabular-nums; } .slupek { flex: 1; height: 3px; overflow: hidden; background: var(--powierzchnia-2); border-radius: 999px; } .slupek > span { display: block; height: 100%; background: var(--akcent); border-radius: 999px; } .slupek.ponad > span { background: var(--blad); } .procent { font-size: 11.5px; color: var(--tekst-2); font-variant-numeric: tabular-nums; } /* Zaznaczenie przy polu wyboru w pasku narzędzi — kropka i tekst razem. */ .pole-wyboru { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-transform: none; /* w pasku wyciągu etykiety są WERSALIKAMI — tu nie */ letter-spacing: normal; color: var(--tekst-2); white-space: nowrap; cursor: pointer; } .pole-wyboru input[type="checkbox"] { width: 14px; height: 14px; min-height: 0; margin: 0; accent-color: var(--akcent); } /* Pełna lista operacji bywa długa — domyślnie zwinięta, żeby nie przykrywała porównania, po które się tu przychodzi. */ .rozwijane { margin-top: 16px; border-top: 1px solid var(--obrys); padding-top: 12px; } .rozwijane > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--tekst-2); list-style: none; } .rozwijane > summary::-webkit-details-marker { display: none; } .rozwijane > summary::before { content: "▸"; display: inline-block; margin-right: 7px; color: var(--tekst-3); transition: transform .15s ease; } .rozwijane[open] > summary::before { transform: rotate(90deg); } .rozwijane > summary:hover { color: var(--tekst); } .rozwijane .tabela-otoczka { margin-top: 10px; } .przypisania { margin-top: 22px; } .przypisania select { min-width: 170px; font-size: 12px; } .przypisania .tabela td { vertical-align: middle; } .tabela tr.wplyw td { background: var(--powierzchnia-2); } @media (max-width: 760px) { .udzial-kolumna { width: auto; } .slupek { width: 56px; } .pasek-wyciagu form { flex-wrap: wrap; } } /* ===== 40. Finanse osobiste: plan i rzeczywistość obok siebie ========= */ /* Klient 13.09.2026: „daj dwa duże kafle — po lewej wydatki i przychody prognozowane, po prawej realne z wyciągu". Jedno pod drugim znaczyło kilka ekranów przewijania, żeby porównać dwie liczby. Prawa kolumna jest szersza, bo mieści tabelę z pięcioma kolumnami. */ .finanse-siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 14px; align-items: start; } .kolumna-finansow { margin-bottom: 0; } /* Pasek liczb WEWNĄTRZ karty nie może udawać osobnego pudełka — gubi ramkę i cień, zostawia same kreski między kaflami. */ .kafle.w-karcie { margin: 0 0 14px; border-radius: var(--r-mala); box-shadow: none; background: var(--powierzchnia-2); } .kafle.w-karcie .kafel { padding: 9px 12px; } .kafle.w-karcie .liczba { font-size: 19px; } /* Wąska kolumna: kwota nie potrzebuje 116 px, a nazwa pozycji tak. TRZECIA kolumna (24 px) musi zostać — to miejsce na krzyżyk usuwania. Bez niej krzyżyk zawijał się do nowego wiersza i lista robiła się dwa razy wyższa. */ .kolumna-finansow .budzet-wiersz { grid-template-columns: minmax(0, 1fr) 96px 24px; } @media (max-width: 1180px) { .finanse-siatka { grid-template-columns: minmax(0, 1fr); } .kolumna-finansow { margin-bottom: 0; } } /* ============ 41. Majątek osobisty: cztery sekcje w siatce ============ */ /* Konta i nieruchomości mają po trzy kolumny, kruszce i papiery po sześć — dlatego dwie pierwsze sekcje stoją obok siebie, a dwie pozostałe dostają całą szerokość. Inaczej tabela inwestycji przewijałaby się w kółko. */ .majatek-siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; } .majatek-siatka > form:nth-child(n+3) { grid-column: 1 / -1; } @media (max-width: 1000px) { .majatek-siatka { grid-template-columns: minmax(0, 1fr); } } /* Pola wpisywane wprost w tabeli: bez ramki, dopóki nie dotkniesz — tabela ma się czytać jak zestawienie, a nie jak formularz. */ .majatek-tabela input, .majatek-tabela select { /* BLOCK, nie inline — dwa pola w jednej komórce (nazwa i notatka) stawały obok siebie, każde na 100% szerokości, i notatka wychodziła na sąsiednią kolumnę (zgłoszenie klienta 13.09.2026: „coś tu się sypie"). */ display: block; width: 100%; min-height: 28px; border-color: transparent; background: transparent; font-size: 12.5px; } .majatek-tabela input:hover, .majatek-tabela select:hover { border-color: var(--obrys); } .majatek-tabela input:focus, .majatek-tabela select:focus { border-color: var(--akcent); background: var(--powierzchnia); } .majatek-tabela .pole-kwoty { text-align: right; font-variant-numeric: tabular-nums; } .majatek-tabela .pole-tickera { text-transform: uppercase; letter-spacing: .04em; } .majatek-tabela td { vertical-align: middle; } /* Nazwa to najdłuższy tekst w tabeli — bez tego przeglądarka dzieliła szerokość po równo i „Konto oszczędnościowe długoterminowe" nie mieściło się w polu. */ .majatek-tabela th:first-child, .majatek-tabela td:first-child { width: 42%; min-width: 170px; } .majatek-tabela th.prawo, .majatek-tabela td.prawo { width: 96px; } .majatek-tabela tr.wiersz-nowy input::placeholder { color: var(--tekst-3); } .majatek-tabela tr.wiersz-nowy input, .majatek-tabela tr.wiersz-nowy select { border-style: dashed; border-color: var(--obrys-mocny); } /* Ceny kruszców pod paskiem liczb — trzy fakty w jednej linii. */ .ceny-kruszcow { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; margin: -4px 0 14px; text-align: left; } /* ===== 42. Finanse: kategoria rozwija się w listę swoich operacji ===== */ /* Kwota bez pozycji, z których się składa, każe wierzyć na słowo. Kliknięcie w wiersz odsłania operacje tej kategorii (klient 13.09.2026). */ .tabela.porownanie tr.rozwijalny { cursor: pointer; } .tabela.porownanie tr.rozwijalny:hover td { background: var(--powierzchnia-2); } .tabela.porownanie tr.rozwijalny:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; } .tabela.porownanie .strzalka { display: inline-block; width: 11px; margin-right: 3px; color: var(--tekst-3); font-size: 10px; transition: transform .15s ease; } .tabela.porownanie tr.otwarty .strzalka { transform: rotate(90deg); } .szczegoly-kategorii > td { padding: 0 0 0 22px; background: var(--powierzchnia-2); } /* Lista operacji ma się ZMIEŚCIĆ w szerokości karty — długi opis z banku inaczej rozpycha tabelę i ucina kwotę po prawej. */ .tabela.wewnetrzna { margin: 0; background: transparent; box-shadow: none; table-layout: fixed; width: 100%; } .tabela.wewnetrzna td { border-color: var(--obrys); font-size: 12px; padding: 5px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabela.wewnetrzna td.prawo { width: 96px; } .tabela.wewnetrzna tr:last-child td { border-bottom: 0; } .data-operacji { width: 52px; white-space: nowrap; } /* Wydatki obok przychodów w wąskiej kolumnie planu — mniejszy odstęp i węższe pole kwoty, żeby na nazwę pozycji zostało tyle, ile trzeba. */ .kolumna-finansow .budzet-siatka { gap: 6px 18px; } .kolumna-finansow .budzet-wiersz { grid-template-columns: minmax(0, 1fr) 84px 20px; } .kolumna-finansow .budzet-wiersz input { font-size: 12px; } @media (max-width: 620px) { .kolumna-finansow .budzet-siatka { grid-template-columns: minmax(0, 1fr); gap: 18px; } } /* Notatka pod nazwą pozycji majątku — drobniejsza i przygaszona, bo to przypis do liczby, a nie druga nazwa. */ .majatek-tabela .pole-notatki { margin-top: 2px; font-size: 11px; color: var(--tekst-2); } .majatek-tabela .pole-notatki::placeholder { color: var(--tekst-3); } /* Liczba jednostkowa pod kwotą: „524,19 zł/g" przy wartości, „+55,5%" przy zysku. Sama kwota nie mówi, czy kupowaliśmy drogo — dopiero zestawienie za gram. */ .majatek-tabela .jednostkowa { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 400; color: var(--tekst-3); font-variant-numeric: tabular-nums; } .majatek-tabela tfoot td { border-top: 2px solid var(--obrys-mocny); font-weight: 650; color: var(--tekst); } /* ====== 44. Majątek: układ dwóch kolumn i kwota z walutą razem ======= */ /* Konta bywają wysokie (kilka rachunków + gotówka), nieruchomości zawsze mają dwa wiersze. Kolumny są osobnymi pudełkami, więc pod nieruchomościami da się dołożyć kartę zamiast zostawiać pół ekranu pustki. */ .majatek-gora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; } .majatek-kolumna { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .majatek-kolumna > .karta { margin-bottom: 0; } @media (max-width: 1000px) { .majatek-gora { grid-template-columns: minmax(0, 1fr); } } /* Kwota i waluta w jednej komórce: pole liczbowe rozciąga się, lista walut ma swoje 60 px i nie da się jej ścisnąć do trzech pikseli. */ .komorka-kwoty { white-space: nowrap; } .kwota-z-waluta { display: flex; align-items: center; gap: 5px; } .kwota-z-waluta input { flex: 1; min-width: 0; } .kwota-z-waluta select { flex: 0 0 62px; width: 62px; font-size: 11.5px; padding-right: 2px; } /* Struktura majątku: nazwa, słupek, kwota, procent — cztery kolumny w rzędzie. */ .struktura-majatku .udzial { display: grid; grid-template-columns: minmax(0, 1fr) 78px auto 46px; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--obrys); font-size: 12.5px; } .struktura-majatku .udzial:last-of-type { border-bottom: 0; } .udzial-nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .udzial-slupek { height: 6px; background: var(--powierzchnia-2); border-radius: 999px; overflow: hidden; } .udzial-slupek > span { display: block; height: 100%; background: var(--akcent); border-radius: 999px; } .udzial-kwota { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .udzial-procent { text-align: right; color: var(--tekst-2); font-variant-numeric: tabular-nums; } .udzial.kredyt { border-top: 1px solid var(--obrys); margin-top: 4px; padding-top: 10px; } .udzial.kredyt .udzial-slupek > span { background: var(--blad); } .udzial.kredyt .udzial-kwota { color: var(--blad); } /* Wgrywanie wyciągu w listwie narzędziowej: pole pliku jest z natury szerokie, więc trzymamy je krótko, żeby zmieściło się obok przycisków miesiąca. */ .pasek-modulu .wgrywanie { display: flex; align-items: center; gap: 8px; } .pasek-modulu .wgrywanie input[type="file"] { max-width: 186px; font-size: 11.5px; } @media (max-width: 1100px) { .pasek-modulu .wgrywanie { order: 3; width: 100%; justify-content: flex-end; } } /* Ticker i notatka pod nazwą pozycji — dwie drobne rzeczy w jednej linii, żeby tabela inwestycji zmieściła się w połowie szerokości ekranu. */ .majatek-tabela .pod-nazwa { display: flex; gap: 6px; margin-top: 2px; } .majatek-tabela .pod-nazwa .pole-tickera { flex: 0 0 78px; width: 78px; font-size: 11px; } .majatek-tabela .pod-nazwa .pole-notatki { flex: 1; min-width: 0; margin-top: 0; } .majatek-tabela .pole-kwoty.drobne { font-size: 11px; color: var(--tekst-2); margin-top: 1px; } .majatek-tabela .pod-nazwa .pole-kruszcu { flex: 0 0 82px; width: 82px; font-size: 11px; } /* ============== 45. Newsy: czytanie wiadomości w aplikacji ============ */ /* Trzy kategorie obok siebie zamiast jedna pod drugą — przegląd ma się czytać jednym spojrzeniem, bez przewijania przez piętnaście pozycji. */ .newsy-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; } @media (max-width: 1200px) { .newsy-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .newsy-siatka { grid-template-columns: minmax(0, 1fr); } } /* Ekran jednej wiadomości: tekst po lewej, wnioski i fakty po prawej. Wnioski „co to znaczy dla nas" są tu najważniejsze, więc stoją na górze boku. */ .news-siatka { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; } .news-bok { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .news-bok > .karta { margin-bottom: 0; } @media (max-width: 980px) { .news-siatka { grid-template-columns: minmax(0, 1fr); } } .karta.artykul { margin-bottom: 0; } .karta.artykul p { margin: 0 0 12px; font-size: 14px; line-height: 1.62; max-width: 68ch; /* dłuższe wiersze męczą przy czytaniu ciągiem */ color: var(--tekst); } .karta.artykul p:last-of-type { margin-bottom: 0; } .karta.dla-nas { border-left: 3px solid var(--akcent); } .karta.dla-nas p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--tekst); } .punkty-newsa { margin: 0; padding-left: 18px; } .punkty-newsa li { margin-bottom: 8px; font-size: 12.5px; line-height: 1.55; color: var(--tekst-2); } .punkty-newsa li:last-child { margin-bottom: 0; } .zrodlo-oryginalu { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--obrys); font-size: 11.5px; color: var(--tekst-2); } .gotowe-po-polsku { color: var(--akcent); } /* Pasek „opracowuję" na ekranie wiadomości: kręciołek i jedno zdanie wyjaśnienia. Bez tego pierwsze otwarcie wyglądało jak zawieszona aplikacja (klient 13.09.2026). */ .karta.opracowywanie { display: flex; align-items: flex-start; gap: 12px; border-left: 3px solid var(--akcent); } .karta.opracowywanie strong { font-size: 13px; } .kreciolek { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--obrys-mocny); border-top-color: var(--akcent); border-radius: 50%; animation: kreci 0.9s linear infinite; } @keyframes kreci { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .kreciolek { animation: none; } } /* Wybór kuriera przy ręcznym dopisaniu przesyłki — stoi przy przycisku, żeby było widać, co się zapisze (klient 13.09.2026: MB dostało DHL zamiast Ambro). */ .wybor-kuriera { font-size: 11.5px; min-width: 88px; margin-right: 6px; } /* Przyciski pod komunikatem „Wymaga uwagi" — rząd, nie kolumna, żeby wiersz nie urósł dwukrotnie (14.09.2026). */ .uwaga-akcje { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 2px 31px; } .uwaga-akcje form { margin: 0; } /* ─────────────────────────────────────────────────────────────────────────── Klasy używane w ekranach, które nigdy nie dostały stylu (16.09.2026). Siedziały w HTML od dawna, ale nie było ich w ŻADNYM arkuszu — przez to liczby na ekranie SEO wychodziły wielkością zwykłego tekstu, a kafle będące odnośnikami niczym nie zdradzały, że można w nie kliknąć. ─────────────────────────────────────────────────────────────────────────── */ /* Wyróżniona liczba w kaflu (ekran SEO: wejścia, przychód, żywe linki). */ .duza { font-size: 21px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; /* cyfry równej szerokości — kolumny nie drgają */ } @media (min-width: 900px) { .duza { font-size: 25px; } } /* Kafel, który jest odnośnikiem: ma wyglądać na klikalny, zanim się go kliknie. */ .klikalny { cursor: pointer; text-decoration: none; color: inherit; transition: border-color .12s ease, box-shadow .12s ease; } .klikalny:hover { border-color: var(--akcent); box-shadow: var(--cien-2); } .klikalny:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .klikalny { transition: none; } } /* Pozioma kreska rozdzielająca sekcje (ekran Przygotowanie). */ hr.rozdzielacz { border: 0; border-top: 1px solid var(--obrys); margin: 22px 0; } /* Komunikat „trwa pobieranie faktur" — ma zwracać uwagę mniej niż ostrzeżenie. */ .komunikat.ladowanie-faktur { font-size: 13px; }