/* === Architektura warstw: vendor < components < utilities (bez !important) === */ @layer tokens, vendor, components, utilities; /* Tokeny (marka, kolory, skale) - jedyne źródło; patrz app/static/css/tokens.css */ @import url("/static/css/tokens.css?v=25") layer(tokens); /* Material Symbols (Google) — self-hostowane (K4: offline w Capacitor). Warstwa vendor -> komponenty nadpisuja rozmiar/centrowanie ikon bez !important */ @import url("/static/vendor/material-symbols.css?v=21") layer(vendor); @layer components { /* ============================================================ Solve — style aplikacji. Sekcje: 1. Tokeny 2. Reset + typografia 3. Layout (app shell, sidebar, topbar, page) 4. Komponenty (buttons, stats, filters, table, modal, drawer, tags, timeline) 5. Login 6. Responsywność ============================================================ */ /* ============================================================ SKALA BREAKPOINTÓW (konwencja projektu — używaj tych wartości) ------------------------------------------------------------ CSS nie pozwala na zmienne w @media, więc to umowa, nie kod. Przy NOWYCH regułach @media trzymaj się tej skali: ≤ 360px — bardzo małe telefony (drobne korekty, np. pill/font) ≤ 600px — telefon (układ 1-kolumnowy, większe tap-targety) ≤ 700px — duży telefon / mały tablet (siatki 2→1, formularze) ≤ 900px — tablet / przełącznik desktop↔mobile (sidebar → dolna nawigacja, większość siatek się składa) ≤ 1100px — wąski desktop (siatki 4→2/1) ≥ 901px — desktop (gdy potrzebny min-width) Dominujące w kodzie: 900px (główny przełącznik) i 700px. Nie wymyślaj nowych progów (768/1024 itp.) — rozjeżdża spójność. ============================================================ */ /* ---------- 1. Tokeny — Material 3 / Google style ---------- * * Hierarchia kolorów inspirowana Material You: * primary — kobalt marki (--brand-blue w tokens.css) * primary-cont. — jasny tint, używamy do aktywnych stanów (nav, chip, button-tonal) * surface-N — warstwowe powierzchnie (im wyższy numer, tym wyższa elewacja) * outline — borderry; outline-variant — subtelniejsze * state-* — overlay state layers (hover/focus/pressed) na powierzchni */ /* ---------- Dark mode tokens (M3 dark surface palette) ---------- Włączamy klasą .dark na (toggleTheme() w mobile-tools.js). Domyślnie respektuje prefers-color-scheme przy pierwszym ładowaniu. */ /* ---------- 2. Reset + typografia ---------- */ /* Jedna rodzina pisma w całym UI (zgodnie z decyzją projektową): • wszystko → Montserrat (--font-sans, KV-APP 08.10); liczby wyrównane przez tabular-nums • monospace zostaje WYŁĄCZNIE dla kodu/skrótów (code, kbd, snippet) Wcześniej app.css wskazywał "Geist"/"Geist Mono", których nie ładujemy — stąd losowe systemowe fallbacki. Teraz nazwy = realnie załadowane fonty. */ /* .mono — utility historycznie monospace; w systemie jednego kroju = --font-sans z tabular-nums (dziedziczone z body). Realny monospace tylko dla kodu poniżej. */ /* ============================================================ RESET box-sizing (2026-09-11) ============================================================ Do tej pory repo NIE miało tego resetu, a pięć miejsc ustawiało go punktowo - czyli ktoś za każdym razem odkrywał problem od nowa. Bez niego `width`/`left+right` ustawia szerokość TREŚCI, a padding i obramowanie DOKŁADAJĄ się na wierzch. Prawie nikt tak nie liczy, pisząc CSS. Kosztowało to konkretny błąd: dolny pasek nawigacji z `left:0; right:0; padding: 0 4px` miał 398px na ekranie 390px i rozpychał stronę w poziomie na 37 stronach (skan mobile 11.09). Maskował to `overflow-x: clip`, dopóki go stamtąd nie zdjęliśmy. Reset jest świadomie na samej górze warstwy komponentów, żeby każda reguła niżej mogła go nadpisać, gdyby kiedyś naprawdę potrzebowała content-box (dziś nie potrzebuje go nic - w pliku nie ma ani jednego `content-box`). Siatka bezpieczeństwa przy tej zmianie: reguła `rozjazd` w a11y/mobile_scan.py jest blokująca, więc gdyby reset rozjechał którąkolwiek z 51 skanowanych stron, CI stanie na czerwono. */ *, *::before, *::after { box-sizing: border-box; } .mono { font-family: inherit; } .dim { color: var(--text-3); font-size: var(--fs-sm); } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } input[type="range"], progress { accent-color: var(--primary); } /* KV-APP-CHECKBOX (20.10, plan działań C7, spec. strony 5.6): własne pole wyboru i radio 24 px zamiast natywnych. `:where` = specyficzność 0, więc każda klasa komponentu wygrywa - także ukryte wejścia kafelków / gwiazdek / przełączników (opacity 0, 1 px). Ptaszek rysuje ::before (clip-path) kolorem --on-primary - działa w obu motywach. */ :where(input[type="checkbox"], input[type="radio"]) { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 24px; height: 24px; display: inline-grid; place-content: center; vertical-align: middle; border: 2px solid var(--field-border); border-radius: var(--shape-xs); background: var(--surface); color: var(--primary); cursor: pointer; transition: background-color var(--motion-fast), border-color var(--motion-fast); } :where(input[type="radio"]) { border-radius: var(--shape-full); } :where(input[type="checkbox"], input[type="radio"])::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform var(--motion-fast) var(--ease-std); } :where(input[type="checkbox"])::before { background: var(--on-primary); clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 22%, 84% 6%, 39% 66%); } :where(input[type="radio"])::before { width: 10px; height: 10px; border-radius: var(--shape-full); background: var(--primary); } :where(input[type="checkbox"]):checked { background: var(--primary); border-color: var(--primary); } :where(input[type="radio"]):checked { border-color: var(--primary); } :where(input[type="checkbox"], input[type="radio"]):checked::before { transform: scale(1); } :where(input[type="checkbox"]):indeterminate { background: var(--primary); border-color: var(--primary); } :where(input[type="checkbox"]):indeterminate::before { clip-path: inset(40% 10%); transform: scale(1); } :where(input[type="checkbox"], input[type="radio"]):hover:not(:disabled) { border-color: var(--primary); } :where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 3px solid var(--primary-ring); outline-offset: 2px; } :where(input[type="checkbox"], input[type="radio"]):disabled { opacity: 0.5; cursor: not-allowed; } /* Cały wiersz klikalny: etykieta z polem wyboru w środku ma kursor ręki (klik i tak zaznacza - to natywne zachowanie