/* ============================================================================ 16-dashboard.css — widok „Wyniki" (Dashboard) ---------------------------------------------------------------------------- Układ = trzy warstwy jedna pod drugą: .dash-cards kafle KPI — siatka STAŁA, max 5 w rzędzie (10 kafli = dwa równe rzędy). Wcześniejsze auto-fit wypychało ostatni kafel poza ekran, a jedenasty spadał samotnie niżej. .dash-panels panele — siatka 12-kolumnowa, panel = span 4 (1/3 szerokości), .dash-span-6 = połowa; panel podsumowania i tabela klientów (.dash-panel-top) na całą szerokość. Stałe kolumny zamiast auto-fit = koniec dziur w układzie. tabele mieszczą się w panelu, nie przewijają się w poziomie. Panele NIE korzystają z .panel, bo markup ma

zamiast
; poza tym mówią tym samym językiem (ramka, promień, cień — wszystko z tokenów). ============================================================================ */ /* === 1. SIATKA WIDOKU ===================================================== */ /* Pojemnik z WYŚCIÓŁKĄ — bo niesie klasę `.main-grid`, czyli jest KARTĄ (białe tło, ramka, cień z arkusza 28), a miał `padding: 0`. Przez to zakładki, kafle KPI i tabele dotykały krawędzi karty — w każdym innym oknie wyściółkę niosą elementy w środku (pasek 12/14, stopka 12/14), a Dashboard nie ma ani paska, ani stopki, więc nie miał jej wcale. 12/14 to ta sama wartość co w pasku i stopce całej aplikacji, dzięki czemu treść Dashboardu stoi w tej samej osi co treść kartotek. align-content:start, żeby przy krótkiej treści nie rozciągały się w pionie. */ .dash-grid { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-3) 14px; } /* Zakładki Przegląd/Prezentacje — aktywna oznaczona kreską, nie tłem. */ .dash-tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); } .dash-tab { padding: var(--s-2) var(--s-3); margin-bottom: -1px; /* kreska nachodzi na linię paska */ border-bottom: calc(var(--s-1) / 2) solid transparent; color: var(--text-muted); font-weight: var(--w-bold); } .dash-tab:hover { color: var(--text); } .dash-tab.active { border-bottom-color: var(--accent-strong); color: var(--accent-strong); } /* === 2. KAFLE KPI ========================================================= */ .dash-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); } /* Ton = mała kropka przed podpisem kafla (W2, 27.09.2026 — był gruby pasek po lewej, szablonowy „side-stripe”). Jedna reguła, wartość wstrzykiwana zmienną --ton, dokładnie jak w pigułkach statusu (05-komponenty.css). Kafel bez tonu ma kropkę szarą, więc podpisy wszystkich kafli zaczynają się w jednej linii. Ta sama kropka na komputerze i telefonie (na telefonie pasek i tak znikał pod przezroczystą ramką grupy). */ /* Ujednolicenie 11.08.2026 — kafel i panel Wyników to ten sam materiał: promień --r-lg i cień --cien-1 jak w .dash-panel niżej (kafel miał --r i zero cienia). */ .dash-card { --ton: var(--line-strong); container-type: inline-size; display: grid; gap: var(--s-1); align-content: start; /* treść pod etykietą, nie rozciągana */ min-height: calc(var(--s-7) * 2); /* równa wysokość obu rzędów */ padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-1); } .dash-tone-inprogress { --ton: var(--status-wtoku); } .dash-tone-pending { --ton: var(--status-oczekuje); } .dash-tone-done { --ton: var(--status-gotowy); } .dash-tone-plans { --ton: var(--etap-plany); } .dash-tone-warranty { --ton: var(--etap-gwarancja); } .dash-tone-consulting { --ton: var(--etap-konsultacje); } /* Etykieta wersalikami, ale czytelna — 11px/800 było zbyt drobne. tabular-nums w wartości: kwoty w sąsiednich kaflach stają w kolumnie. */ /* 11,5px / 700 — dokładnie jak monolit (linia 30442). Nasze --t-xs (11px) i --w-bold (600) dawały etykietę cieńszą i niższą od oryginału. */ /* Ujednolicenie 11.08.2026 — rozstrzelenie wersalików .03em → kanon .04em (w aplikacji było .02/.03/.04/.05/.08; .04em ma 19 miejsc, w tym `.dash-table th` w tym samym widoku — etykieta kafla i nagłówek tabeli stały obok siebie z inną gęstością liter). */ .dash-card-label { color: var(--text-muted); font-size: var(--t-kafel); font-weight: var(--w-strong); } .dash-card-label::before { content: ""; display: inline-block; width: var(--s-2); height: var(--s-2); margin-right: var(--s-2); border-radius: var(--r-pill); background: var(--ton); vertical-align: .08em; } /* Kwota w jednym wierszu: w wąskim kaflu (5 kafli przy 1280 px) „344 516,82 EUR” łamało się i „EUR” spadało do drugiej linii. Kafel jest kontenerem, a wielkość kwoty to najwyżej --t-xl i nie więcej niż 12 % szerokości kafla — tyle, żeby zmieściło się „9 999 999,99 EUR”. Telefon ma własną wielkość (9-telefon/6). Przegląd E1, 27.09. */ .dash-card-value { font-size: min(var(--t-xl), 12cqi); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; white-space: nowrap; } /* `text-wrap: pretty` — podpis nie zostawia jednego słowa („EUR”) samotnie w ostatniej linii. */ .dash-card-sub { color: var(--text-muted); font-size: var(--t-xs); text-wrap: pretty; } /* === 3. PANELE ============================================================ */ /* Panele w jednym rzędzie mają równą wysokość (`stretch`): przy `start` Lejek, Trend i „Po terminie” kończyły się na trzech różnych wysokościach (u Handlowca 468 / 543 / 493 px). Przegląd E1, 27.09. */ .dash-panels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-3); align-items: stretch; } .dash-panels > .dash-panel { grid-column: span 4; } /* Pół szerokości (Wyceny, Obciążenie zespołu) — w 1/3 ucinały się nazwiska („Aleksandra …”). */ .dash-panels > .dash-span-6 { grid-column: span 6; } .dash-panels > .dash-panel-top { grid-column: 1 / -1; } /* min-width:0 — bez tego szeroka tabela w środku rozpycha kolumnę siatki. */ .dash-panel { min-width: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-1); } .dash-panel h3 { margin-bottom: var(--s-3); font-size: var(--t-md); font-weight: var(--w-bold); } /* Drugi nagłówek w panelu („Najbliższe 7 dni") potrzebuje odstępu od listy nad nim. */ .dash-subhead { margin-top: var(--s-4); } /* Podpowiedź przy tytule — osobna, przygaszona informacja, nie część zdania. */ .dash-hint { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-medium); } /* „Po terminie" to jedyny panel wymagający reakcji — czerwona kropka przed tytułem, ta sama co w kaflach (W2, 27.09.2026: był czerwony pasek po lewej, widoczny tylko na komputerze). */ .dash-panel-urgent > h3:first-of-type::before { content: ""; display: inline-block; width: var(--s-2); height: var(--s-2); margin-right: var(--s-2); border-radius: var(--r-pill); background: var(--danger); vertical-align: .12em; } /* Puste stany: informacja pomocnicza, nie dane — szare i mniejsze. */ .dash-panel .compact-empty-text, .dash-empty { display: block; color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-regular); } /* === 4. LEJEK KONWERSJI =================================================== */ /* Kolumny: etykieta etapu | pasek | liczba. Pasek dostaje resztę miejsca. Każdy wiersz ma WŁASNĄ siatkę — jak w v13. BŁĄD (27.09.2026, sędzia zrzutów v13↔v14): wspólna siatka (subgrid, K11) wyrównywała koniec paska do najszerszej liczby, więc paski w wierszach z „1” kończyły się o ok. 3 px wcześniej niż w v13 (1024: 579,5 zamiast 582,3 px). Etykiety etapów mieszczą się w minimum 96 px, więc paski i tak zaczynają się w jednej linii (jak w v13). */ .dash-funnel { display: grid; gap: var(--s-1); } .dash-funnel-row { display: grid; grid-template-columns: minmax(calc(var(--s-7) * 2), auto) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-1) var(--s-2); border: 1px solid transparent; border-radius: var(--r-sm); text-align: left; } .dash-funnel-row:hover { border-color: var(--line); background: var(--surface-2); } .dash-funnel-row b { text-align: right; font-variant-numeric: tabular-nums; } .dash-funnel-bar { height: var(--s-3); border-radius: var(--r-sm); background: var(--surface-3); overflow: hidden; } /* Szerokość i kolor wypełnienia wstawia JS (ton etapu) — tu tylko kształt. */ .dash-funnel-bar i { display: block; height: 100%; min-width: var(--s-1); border-radius: var(--r-sm); } /* === 5. WYKRES TRENDU (12 miesięcy) ======================================= */ /* Wysokość z tokenów (4 × 32px); align-items:end — miesiące bez danych nie rozpychają osi, słupki rosną od dołu. */ .dash-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-1); align-items: end; height: calc(var(--s-6) * 4); } .dash-chart-col { display: grid; grid-template-rows: 1fr auto; gap: var(--s-1); height: 100%; } .dash-chart-bars { display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--s-1) / 2); height: 100%; } /* Wysokość słupka podaje JS w procentach; szerokość i kolor są tutaj. */ .dash-bar { width: var(--s-2); border-radius: var(--r-sm) var(--r-sm) 0 0; } .dash-bar-offers, .dash-dot-offers { background: var(--status-wtoku); } .dash-bar-sold, .dash-dot-sold { background: var(--status-gotowy); } .dash-chart-label { color: var(--text-muted); font-size: var(--t-xs); text-align: center; } /* Kropka legendy przy tytule wykresu. */ .dash-dot { display: inline-block; width: var(--s-2); height: var(--s-2); margin: 0 var(--s-1); border-radius: var(--r-pill); vertical-align: middle; } /* === 6. LISTY ALERTÓW (terminy, jakość wycen) ============================= */ /* JEDNA siatka listy (K11, v14): wiersze dziedziczą kolumny listy (subgrid), więc projekt zaczyna się w tym samym miejscu w każdym wierszu, choć typ zdarzenia ma różną długość („Design”, „Produkcja”). Terminy: typ | projekt, data pod spodem przy prawej krawędzi (w wąskim panelu i tak schodziła do drugiej linii — teraz zawsze tam samo); jakość wycen: projekt | braki. „+ N więcej” i pusty stan zajmują całą szerokość. */ .dash-alert-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-2); } .dash-alert-list:has(> .dash-alert-row > .dash-flags) { grid-template-columns: minmax(0, 1fr) auto; } .dash-alert-list > * { grid-column: 1 / -1; } .dash-alert-row { display: grid; grid-template-columns: subgrid; align-items: center; row-gap: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); } .dash-alert-row > .dash-date { grid-column: 2; justify-self: end; } .dash-alert-row:hover { background: var(--surface-2); } /* Chip typu zdarzenia — ten sam mechanizm --ton co pigułki statusu. */ /* NAPRAWA 11.08.2026 — napis przez `--ton-tekst`, dokładnie jak `.status-pill`. Chip powtarza wzór pigułki (napis PEŁNYM tonem na 10-procentowym odcieniu tego samego tonu), więc odziedziczył i ten sam defekt kontrastu. Wartość przychodzi z klasy `.tone-*` (05-komponenty); chipy z własnym tonem dostają ją niżej, a gdy tonu nie ma — działa zapas `--ton`, czyli stan sprzed zmiany. */ .dash-chip { --ton: var(--text-muted); flex: none; padding: 0 var(--s-2); border: 1px solid color-mix(in srgb, var(--ton) 45%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--ton) 10%, transparent); color: var(--ton-tekst, var(--ton)); font-size: var(--t-xs); font-weight: var(--w-bold); } .dash-chip-late { --ton: var(--danger); --ton-tekst: var(--danger); } .dash-chip-soon, .dash-chip-warn { --ton: var(--status-oczekuje); --ton-tekst: color-mix(in srgb, var(--status-oczekuje) 70%, var(--text)); } /* Data odepchnięta do prawej krawędzi wiersza; po terminie na czerwono. */ .dash-date { color: var(--text-muted); font-size: var(--t-xs); white-space: nowrap; } .dash-late { color: var(--danger); font-weight: var(--w-bold); } .dash-flags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); } .dash-more { padding: var(--s-1) var(--s-2); color: var(--text-muted); font-size: var(--t-xs); } /* Link do projektu: numer akcentem (.linklike z 06-elementy), nazwa tekstem. */ .dash-project-link { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; text-align: left; } /* Numer projektu nie łamie się („P001-” / „2026” w wąskim panelu Po terminie) — łamie się nazwa obok. */ .dash-project-link > .linklike { flex: none; white-space: nowrap; } .dash-project-name { font-weight: var(--w-bold); } .dash-project-link:hover .dash-project-name { text-decoration: underline; } /* === 7. OBCIĄŻENIE ZESPOŁU ================================================ */ /* Kolumny: nazwisko elastyczne, trzy statystyki po swojej szerokości (inaczej ostatnia ucinała się w połowie daty, „wolny od 31.07.202"). JEDNA siatka całej listy (K11, v14): dotąd każdy wiersz liczył kolumny statystyk ze swojej treści, więc „1 aktywne · średnio 7 dni” i „0 aktywne · —” stały w różnych miejscach. Teraz wiersze dziedziczą kolumny listy (subgrid) — statystyki stoją w równych kolumnach. Na telefonie wiersz ma własny układ (niżej). */ .dash-team-list { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--s-1) var(--s-3); } .dash-team-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: var(--s-3); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); } .dash-team-row:hover { background: var(--surface-2); } .dash-team-name { display: grid; min-width: 0; line-height: var(--lh-tight); } .dash-team-name b, .dash-team-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-team-name small { color: var(--text-muted); font-size: var(--t-xs); } .dash-team-stat { font-size: var(--t-sm); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Ostatnia kolumna = najbliższy wolny termin: dobra wiadomość, więc na zielono. */ .dash-team-stat:last-child { color: var(--ok-strong); font-weight: var(--w-medium); text-align: right; } /* === 8. TABELE ============================================================ */ /* Wrap bez własnej ramki — panel już ją ma, druga robiłaby podwójną kreskę. */ .dash-table-wrap { max-height: none; border: 0; background: transparent; } .dash-table { width: 100%; border-collapse: collapse; } /* Ujednolicenie 11.08.2026 — jedna rodzina tabel: wcięcie 8/12 i wersaliki .04em jak w kartotece (12-kartoteki.css:49). Nagłówek miał 4/8, czyli był o 8 px niższy niż w całej aplikacji. Poziome 12 px MUSI być takie samo w th i td, inaczej etykieta kolumny stoi 4 px na lewo od danych pod nią. */ .dash-table th { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); text-align: left; } .dash-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); font-size: var(--t-sm); vertical-align: middle; } /* Ostatni wiersz bez kreski — panel rysuje własną krawędź, druga robi podwójną. */ .dash-table tbody tr:last-child td { border-bottom: 0; } .dash-table tbody tr:hover { background: var(--surface-2); } /* Nazwa (1. kolumna) może się łamać, liczby nigdy — tabela mieści się bez poziomego przewijania. Kolumny liczbowe do prawej i z tabular-nums. */ .dash-table th, .dash-table td { white-space: nowrap; } .dash-table th:first-child, .dash-table td:first-child { white-space: normal; } .dash-table .dash-num, .dash-table .dash-money { text-align: right; font-variant-numeric: tabular-nums; } .dash-rank { width: var(--s-6); color: var(--text-muted); font-weight: var(--w-bold); } /* === 9. WĘŻSZE EKRANY ===================================================== */ /* 1180: panel na 1/2 szerokości, kafle po 2 jak na telefonie — 5 kolumn robi się za ciasne, a przy 3 kolumnach z 10 kafli administratora i Handlowca ostatni stał sam w rzędzie (tablet 1024, przegląd E1, 27.09). */ @media (max-width: 1180px) { .dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-panels > .dash-panel { grid-column: auto; } .dash-panels > .dash-panel-top { grid-column: 1 / -1; } } /* 980: jedna kolumna paneli — dwie dają panele węższe niż ich własne tabele. */ @media (max-width: 980px) { .dash-panels { grid-template-columns: minmax(0, 1fr); } } /* Telefon: dwa kafle w rzędzie, wiersz zespołu zawijany (4 kolumny się nie mieszczą). */ :where(:root[data-ui="mobile"]) .dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } :where(:root[data-ui="mobile"]) .dash-card { padding: var(--s-2) var(--s-3); } :where(:root[data-ui="mobile"]) .dash-team-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-1); } :where(:root[data-ui="mobile"]) .dash-team-name { grid-column: 1 / -1; } :where(:root[data-ui="mobile"]) .dash-team-stat:last-child { text-align: left; } /* === 10. KAFLE PULPITU BEZ KWOT (Design, Produkcja — „Mój dział”, B8b) =================== Dawna lista „Moje zadania” pulpitu działu (.my-todo, .dash-moje-*) zeszła do „Mojego pulpitu” (27-powiadomienia.css). */ .dash-cards-bez-kwot { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 1180: cztery kafle 2 × 2 (nie 3 + 1). */ @media (max-width: 1180px) { .dash-cards-bez-kwot { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Wyciete 11.08.2026 — martwe reguly, zero wystapien w public/js. Szczegoly: AUDYT-CSS-2026-08-11.md B9. */ .ords2-allclear { padding: var(--s-3); text-align: center; } /* Wyciete 11.08.2026 — martwe reguly, zero wystapien w public/js. Szczegoly: AUDYT-CSS-2026-08-11.md B9. */ .has-reminder { color: var(--warn-strong); } /* Pulpit: klikalny wiersz etapu i przewijalna tabela prezentacji ze stałą głową. */ .dash-phase-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) var(--s-2); border: 1px solid transparent; border-radius: var(--r-sm); background: none; text-align: left; cursor: pointer; } .dash-phase-row:hover { border-color: var(--line); background: var(--surface-2); } .dash-presentations-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); } .dash-presentations-search { flex: 1; min-width: 220px; max-width: 460px; } .dash-presentations-table-wrap { max-height: min(64vh / var(--skala-ui), 720px); overflow: auto; } /* --- Pulpit: zakładka prezentacji, lista etapów (z dawnego 28, K17) --- */ .dash-presentations-head h3 { margin: 0; } .dash-presentations-table-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); } .dash-presentations-table th { text-align: left; } .dash-presentations-table th:nth-child(n+5) { text-align: right; } .dash-pres-sessions { min-width: 0; } /* POPR-n38: stałe szerokości kolumn — długa nazwa projektu zawija się w swojej kolumnie, a nie wypycha reszty poza ramkę. */ :root:not([data-ui="mobile"]) .dash-presentations-table { table-layout: fixed; min-width: 900px; } .dash-pres-k-caret { width: 36px; } .dash-pres-k-projekt { width: 25%; } .dash-pres-k-klient { width: 16%; } .dash-pres-k-wersja { width: 11%; } .dash-pres-k-liczba { width: 8%; } .dash-pres-k-data { width: 9%; } .dash-pres-k-mala { width: 5%; } .dash-pres-k-czas { width: 9%; } .dash-presentations-table td.dash-pres-projekt { white-space: normal; } .dash-presentations-table td.dash-pres-projekt .dash-project-link { display: block; text-align: left; } .dash-presentations-table td.dash-pres-projekt .dash-project-link > * { display: inline; margin-right: var(--s-1); } .dash-presentations-table th { white-space: normal; } .dash-presentations-table td.dash-pres-tekst { overflow: hidden; text-overflow: ellipsis; } .dash-pres-akceptacja { color: var(--ok-strong, var(--ok)); font-weight: var(--w-bold); } :root[data-ui="tablet"] .dash-presentations-table td.dash-pres-tekst { white-space: normal; } .dash-phase-row b { font-size: var(--t-md); }