/* ============================================================================
   QSCOPE - WZORNIK (N3, 06.10.2026, punkt 15). JEDEN ARKUSZ, JEDNA KLASA NA ELEMENT.
   Wzor pokazuje tests/wzornik.html (zrzuty DOWODY\WZORNIK-1440.png, -390.png).
   Kolory i rozmiary TYLKO tutaj, jako zmienne - ekrany nie maja wlasnych kolorow ani rozmiarow.
   Znaczenia kolorow (docs/KOLORY-ZNACZENIA.md, N4 6b 07.10.2026 - PALETA QSCOPE, wartosci TYLKO w --q-* nizej):
     marka wypelniona (pomarancz) = JEDNA glowna czynnosc ekranu albo ramki (--wz-glowna-akcja),
     granatowy obrys     = zwykla czynnosc,
     czerwony obrys      = usun / wycofaj,
     szary               = nieaktywne (zawsze z powodem w podpowiedzi),
     Amber (--wz-pomarancz, nazwa historyczna) = TYLKO gdy cos czeka na reakcje patrzacego,
     zielony i czerwony  = TYLKO statusy.
   Karta = wzor A z Dashboard / Tender comparison: naglowek karty i tabeli na szarym panelu (--q-panel-szary), tytul zwyklymi literami.
   N4 6b: kazda zmienna --wz-* wskazuje zmienna palety --q-* wg ZNACZENIA (nie wg barwy); zadnej wartosci koloru w tej czesci arkusza.
   ============================================================================ */
:root{
  --wz-granat:var(--q-granat);
  --wz-napis:var(--q-napis);
  --wz-przygaszony:var(--q-podpis-napis);
  --wz-linia:var(--q-linia-siatki);
  --wz-linia-mocna:var(--q-ramka);
  --wz-tlo:var(--q-bialy);
  --wz-tlo-strony:var(--q-tlo-strony);
  --wz-naglowek-tlo:var(--q-naglowek-tlo);   /* G (09.10): naglowek karty i tabeli wzoru A = jasny chlodny granat naglowkow */
  --wz-glowna-akcja:var(--q-glowna-akcja);
  --wz-glowna-akcja-najechanie:var(--q-glowna-akcja-najechanie);
  --wz-na-ciemnym:var(--q-na-ciemnym);
  --wz-najechanie:var(--q-najechanie);
  --wz-zielony:var(--q-status-dobrze);
  --wz-zielony-tlo:var(--q-bialy);
  --wz-czerwony:var(--q-status-zle);
  --wz-czerwony-tlo:var(--q-bialy);
  --wz-pomarancz:var(--q-status-czeka);
  --wz-pomarancz-tlo:var(--q-bialy);
  --wz-szary:var(--q-nieaktywny);
  --wz-szary-tlo:var(--q-nieaktywny-tlo);
  --wz-promien:10px;
  --wz-promien-maly:7px;
  --wz-pismo:13px;
  --wz-pismo-male:11.5px;
  --wz-wys-przycisku:34px;
  --wz-wys-pola:34px;
  --wz-odstep:12px;
}

/* ── KARTA ─────────────────────────────────────────────────────────────── */
.wz-karta{background:var(--wz-tlo);border:1px solid var(--wz-linia);border-radius:var(--wz-promien);overflow:hidden;
  display:flex;flex-direction:column;min-width:0}
.wz-karta-glowa{display:flex;align-items:center;justify-content:space-between;gap:var(--wz-odstep);min-height:46px;
  padding:0 18px;background:var(--wz-naglowek-tlo);border-bottom:1px solid var(--wz-linia)}
.wz-karta-tytul{margin:0;font-size:15px;font-weight:700;color:var(--wz-granat);letter-spacing:-.1px;
  text-transform:none;overflow-wrap:anywhere}
.wz-karta-podpis{font-size:var(--wz-pismo-male);font-weight:400;color:var(--wz-przygaszony)}
/* U16 (N3): naglowek, w ktorym tytul stoi wprost (bez .wz-karta-tytul) - ekrany trackera i umowy: te same litery co tytul wzoru A,
   zwykle (nie kapitaliki), bez kreski po lewej */
.wz-karta-glowa{font-size:15px;font-weight:700;color:var(--wz-granat);text-transform:none;letter-spacing:-.1px;border-left:0}
.wz-karta-tresc{padding:14px 18px;font-size:var(--wz-pismo);color:var(--wz-napis)}
.wz-karta-stopka{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--wz-linia)}
/* "?" w naglowku karty - objasnienie w dymku zamiast akapitu w tresci (U32) */
.wz-pomoc{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--wz-linia-mocna);background:var(--wz-tlo);color:var(--wz-granat);font-size:12px;font-weight:700;cursor:help}

/* ── PRZYCISKI (bez ikon i emoji, napis w calosci) ─────────────────────── */
.wz-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--wz-wys-przycisku);padding:0 14px;
  border-radius:var(--wz-promien-maly);font:inherit;font-size:var(--wz-pismo);font-weight:600;white-space:nowrap;cursor:pointer;
  background:var(--wz-tlo);color:var(--wz-granat);border:1.5px solid var(--wz-granat)}
.wz-btn:hover{background:var(--q-panel-szary)}   /* G (09.10): najechanie zostaje szare (nie kolor naglowka) */
.wz-btn-glowny{background:var(--wz-glowna-akcja);border-color:var(--wz-glowna-akcja);color:var(--wz-na-ciemnym)}
.wz-btn-glowny:hover{background:var(--wz-glowna-akcja-najechanie);border-color:var(--wz-glowna-akcja-najechanie)}
.wz-btn-usun{color:var(--wz-czerwony);border-color:var(--wz-czerwony)}
.wz-btn-usun:hover{background:var(--wz-czerwony-tlo)}
/* U15 (N3): JEDNA klasa dla KAZDEGO przycisku, ktory usuwa, wycofuje albo kasuje (Delete, Delete draft, Remove, Withdraw, Withdraw link,
   Revoke, Cancel invitation) na kazdym ekranie. Mocniejsza niz ogolne reguly przyciskow ekranow (np. body .main button.btn w trackerze).
   :not(#qs-u15-a):not(#qs-u15-b) (takich id nie ma) podnosi wage selektora do dwoch id: regula ekranu z jednym id i !important
   (zmierzone w Chrome: #boq-wysylka .bw-akcje button.bw-cofnij - rozowa ramka #d99b9b) juz jej nie przebija. Stan nieaktywny ma te sama wage
   i stoi pozniej, wiec wygrywa (zmierzone: bez tego nieaktywny "Delete" w .main zostawal czerwony). */
html body .btn-usun,html body button.btn.btn-usun,html body .main button.btn.btn-usun,html body button.btn-usun:not(#qs-u15-a):not(#qs-u15-b){color:var(--wz-czerwony)!important;border:1.5px solid var(--wz-czerwony)!important;
  background:var(--wz-tlo)!important;box-shadow:none!important}
html body .btn-usun:hover,html body button.btn.btn-usun:hover,html body button.btn-usun:not(#qs-u15-a):not(#qs-u15-b):hover{background:var(--wz-czerwony-tlo)!important}
html body .btn-usun:disabled,html body button.btn-usun:not(#qs-u15-a):not(#qs-u15-b):disabled{color:var(--wz-szary)!important;border-color:var(--wz-linia-mocna)!important;background:var(--wz-szary-tlo)!important}
.wz-btn:disabled,.wz-btn[aria-disabled="true"]{background:var(--wz-szary-tlo);border-color:var(--wz-linia-mocna);color:var(--wz-szary);cursor:not-allowed}
.wz-powod{display:block;margin-top:4px;font-size:var(--wz-pismo-male);color:var(--wz-przygaszony)}

/* ── POLA (U31: jeden wzor) ─────────────────────────────────────────────── */
.wz-etykieta{display:block;margin:0 0 4px;font-size:var(--wz-pismo-male);font-weight:600;color:var(--wz-przygaszony)}
.wz-pole{box-sizing:border-box;width:100%;min-height:var(--wz-wys-pola);padding:6px 10px;border:1px solid var(--wz-linia-mocna);
  border-radius:var(--wz-promien-maly);background:var(--wz-tlo);color:var(--wz-napis);font:inherit;font-size:var(--wz-pismo)}
.wz-pole:focus{outline:2px solid var(--q-panel-szary);border-color:var(--wz-granat)}
.wz-pole.wz-liczba{text-align:right;font-variant-numeric:tabular-nums}
/* lista z WLASNA strzalka (przegladarka nie rysuje swojej) */
.wz-pole.wz-lista{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--wz-granat) 50%),linear-gradient(135deg,var(--wz-granat) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.wz-pole[readonly],.wz-pole.wz-odczyt{background:var(--wz-szary-tlo);color:var(--wz-przygaszony);border-style:dashed}
.wz-pole.wz-blad{border-color:var(--wz-czerwony);background:var(--wz-czerwony-tlo)}
.wz-blad-tekst{display:block;margin-top:4px;font-size:var(--wz-pismo-male);color:var(--wz-czerwony)}
/* plik: natywne "Choose file" schowane, przycisk w stylu programu + nazwa pliku */
.wz-plik{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wz-plik input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.wz-plik-nazwa{font-size:var(--wz-pismo-male);color:var(--wz-przygaszony);overflow-wrap:anywhere}
.wz-wybor{display:inline-flex;align-items:center;gap:8px;font-size:var(--wz-pismo);cursor:pointer}
.wz-wybor input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--wz-granat)}

/* ── PASTYLKI STANU ─────────────────────────────────────────────────────── */
.wz-pastylka{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:11px;font-size:var(--wz-pismo-male);
  font-weight:700;white-space:nowrap;border:1px solid var(--wz-linia-mocna);background:var(--wz-szary-tlo);color:var(--wz-napis)}
.wz-pastylka-ok{background:var(--wz-zielony-tlo);border-color:var(--wz-zielony);color:var(--q-status-dobrze-napis)}
.wz-pastylka-blad{background:var(--wz-czerwony-tlo);border-color:var(--wz-czerwony);color:var(--wz-czerwony)}
.wz-pastylka-czeka{background:var(--wz-pomarancz-tlo);border-color:var(--wz-pomarancz);color:var(--q-status-czeka-napis)}

/* ── OSTRZEZENIE (Amber tylko, gdy czeka reakcja) i INFORMACJA ───────── */
.wz-uwaga{border:1px solid var(--wz-linia-mocna);border-left:4px solid var(--wz-pomarancz);background:var(--wz-pomarancz-tlo);border-radius:var(--wz-promien-maly);
  padding:10px 12px;font-size:var(--wz-pismo);color:var(--wz-napis)}
.wz-info{border:1px solid var(--wz-linia);border-left:4px solid var(--wz-granat);background:var(--wz-tlo);border-radius:var(--wz-promien-maly);
  padding:10px 12px;font-size:var(--wz-pismo);color:var(--wz-napis)}
/* U16 (N3): czerwien TYLKO przy bledzie pieniedzy albo blokadzie (wyplata ponad robote, ryzyko nadplaty) */
.wz-alarm{border:1px solid var(--wz-linia-mocna);border-left:4px solid var(--wz-czerwony);background:var(--wz-czerwony-tlo);border-radius:var(--wz-promien-maly);
  padding:10px 12px;font-size:var(--wz-pismo);color:var(--wz-czerwony);font-weight:700}
.wz-uwaga + .wz-uwaga,.wz-uwaga + .wz-alarm,.wz-alarm + .wz-uwaga,.wz-alarm + .wz-alarm,.wz-alarm + .wz-powod,.wz-uwaga + .wz-powod{margin-top:9px}

/* ── TABELA (naglowek wzoru A, nie granatowy pasek) ─────────────────────── */
.wz-tabela{width:100%;border-collapse:collapse;font-size:var(--wz-pismo);color:var(--wz-napis)}
.wz-tabela th{background:var(--wz-naglowek-tlo);color:var(--wz-granat);font-weight:700;font-size:var(--wz-pismo-male);text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--wz-linia)}
.wz-tabela td{padding:8px 10px;border-bottom:1px solid var(--wz-linia);vertical-align:top;overflow-wrap:anywhere}
.wz-tabela .wz-kw{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.wz-tabela tbody tr:hover{background:var(--wz-najechanie)}

/* ── PASEK SUMY ─────────────────────────────────────────────────────────── */
.wz-suma{display:flex;justify-content:space-between;align-items:baseline;gap:var(--wz-odstep);padding:10px 14px;border-radius:var(--wz-promien-maly);
  background:var(--wz-granat);color:var(--wz-na-ciemnym);font-weight:700}
.wz-suma .wz-kw{font-variant-numeric:tabular-nums;white-space:nowrap}
.wz-rzad > .wz-suma,.wz-rzad > .wz-uwaga,.wz-rzad > .wz-info{flex:1 1 100%}

/* ── WIERSZ REJESTRU ─────────────────────────────────────────────────────── */
.wz-wiersz{display:flex;align-items:center;gap:var(--wz-odstep);padding:10px 14px;border:1px solid var(--wz-linia);border-radius:var(--wz-promien-maly);
  background:var(--wz-tlo);font-size:var(--wz-pismo)}
.wz-wiersz-nr{font-weight:700;color:var(--wz-granat);white-space:nowrap}
.wz-wiersz-opis{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.wz-wiersz .wz-kw{white-space:nowrap;font-variant-numeric:tabular-nums}
/* U16 (N3): wiersz rejestru z polami pod spodem (EOT-01, defekt 001, ryzyko CR1, polisa) - ta sama karta-wiersz, tresc w blokach */
.wz-wiersz.wz-wiersz-blok{display:block;padding:14px 16px;margin-bottom:12px}

/* ── LICZNIK MENU (U22) ──────────────────────────────────────────────────── */
.wz-licznik{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:18px;padding:0 6px;border-radius:9px;
  font-size:11px;font-weight:700;color:var(--wz-na-ciemnym)}
.wz-licznik-czeka{background:var(--wz-pomarancz)}
.wz-licznik-nowe{background:var(--q-licznik-nowe)}

/* ── UKLAD STRONY I SIATKA KART (bez rozciagania: karta ma wysokosc tresci) ── */
.wz-strona{box-sizing:border-box;max-width:1240px;margin:0 auto;padding:24px 22px 40px;background:var(--wz-tlo-strony);
  font-family:Lato,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--wz-napis)}
.wz-tytul-strony{margin:0 0 16px;font-size:22px;font-weight:900;color:var(--wz-granat)}
.wz-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-items:start}
.wz-rzad{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wz-rzad + .wz-rzad,.wz-pole-blok + .wz-pole-blok{margin-top:10px}

/* ── TELEFON ─────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .wz-karta-glowa{padding:0 12px}
  .wz-karta-tresc{padding:12px}
  .wz-karta-stopka{padding:10px 12px;justify-content:stretch}
  .wz-karta-stopka .wz-btn{flex:1 1 auto}
  .wz-wiersz{flex-wrap:wrap}
}

/* ============================================================================
   N4 (07.10.2026) - NOWY WYGLAD CALEJ APLIKACJI
   Uklad wg wzory\QScope Construction Dashboard (2).png (rama: pasek, dzialy, wstazka, lewy pasek, karty, tabele, pasek stanu).
   KOLORY = PALETA QSCOPE (decyzja wlasciciela 07.10, zastepuje kolory z PNG i wszystkie wczesniejsze). Zero niebieskiego.
   Znaczenia: pomarancz = marka (glowny przycisk, aktywna pozycja, wyroznienie na wykresie), NIGDY blad ani "czeka";
   Amber = wymaga reakcji; zielony i czerwony TYLKO statusy (czerwony obrys = usun, U15); kwoty neutralne.
   Warstwa .q-* i zmienne --q-* (nazwy wg ZNACZENIA). Wzornik: tests/wzornik-n4.html.
   ============================================================================ */
:root{
  /* PALETA QSCOPE (jedyne miejsce, gdzie stoja wartosci) */
  --q-granat:#17354d;             /* Navy: pasek gorny, przyciski formalne, linki */
  --q-granat-najechanie:#102a3d;  /* Deep Navy */
  --q-marka:#f47721;              /* Orange: glowny przycisk, aktywna zakladka/pozycja, wyroznienie wykresu */
  --q-marka-najechanie:#dc6518;
  --q-marka-blada:#fff2e8;        /* aktywna pozycja menu, zaznaczony wiersz, najechanie */
  --q-napis:#17283a;              /* Dark Text */
  --q-podpis:#607487;             /* Secondary Text */
  --q-szary-wykres:#858e94;       /* Mid Grey */
  --q-ramka:#c9d2da;              /* Border */
  --q-panel-szary:#edf2f5;        /* zakladki, lewy pasek, pasek stanu, wiersz sumy (G 09.10: naglowki maja wlasny kolor nizej) */
  --q-naglowek-tlo:#e6eef5;       /* G (09.10, wlasciciel: kolor wraca): tlo naglowkow kart i tabel oraz grup - jasny chlodny granat, BEZ znaczenia (CLAUDE.md) */
  --q-panel-glowa-tlo:#d3dde6;    /* R13 (R12-U1, decyzja wlasciciela 19.10 09:35): WRACA wariant C (R10 R9-U6); cieply kamien B #efece6 (R12) odrzucony: tlo NAGLOWKA PANELU (karty) w calej aplikacji - stalowy, bez znaczenia; regula R10 na koncu pliku */
  --q-panel-glowa-ramka:#b9c6d2;  /* R13 (R12-U1): linia pod naglowkiem panelu - wariant C (R12 B #dcd7cd odrzucony) */
  --q-panel-glowa-napis:#17283a;  /* R13 (R12-U1): tytul i napisy NAGLOWKA PANELU - wariant C (= --q-napis, 10,9:1 na #d3dde6); token zostaje z R12 */
  --q-naglowek-tlo-estimate:#d3e0ec; /* P12 (10.10, wlasciciel): wiersz kolumn tabeli Estimate - wyraznie ciemniejszy od pasa sekcji; tylko ekran (regula na koncu) */
  --q-sekcja-tlo-estimate:#e6eef5;   /* R13 (R12-U3, wlasciciel 19.10 09:43): WIERSZ SEKCJI na ekranie blekitny z palety C (= --q-naglowek-tlo), nie szary; bylo F10 (12.10) #E6E6EA, P12 (10.10) #F3F6F9. Estimate, karta wyceny, wycena i Cost plan podwykonawcy - regula R13 na koncu pliku; tylko ekran */
  --q-estimate-qty-tlo:#f9f9ff;      /* F9 (wlasciciel 12.10: "to nie sa oryginalne kolory"): komorka Qty pozycji Estimate - jasna lawenda sprzed N4 6b; WYJATEK wlasciciela - staly kolor siatki, nie status; tylko ekran */
  --q-estimate-rate-tlo:#f0fdf4;     /* F9: komorka Rate (build-up rate) pozycji Estimate - jasna zielen sprzed N4 6b; ten sam wyjatek; tylko ekran */
  --q-ramka-akcji-tlo:#fff5f2;       /* G14 (wlasciciel 12.10, decyzja A5 z 05.10): tlo ramek akcji i wysylki (.qs-ramka-akcji, pudelko "Send ... by link") - obrys pomarancz bez zmian */
  --q-tlo-strony:#e9eef2;         /* Workspace BG - R22A (wlasciciel 24.10, makieta R22 pytanie 4): #E9EEF2, biala karta odcina sie 1,17:1 (bylo N8-A 08.10 #f7f9fb, 1,06:1); caly program */
  --q-bialy:#ffffff;              /* karty, kafelki, wstazka */
  --q-status-dobrze:#23884b;      /* tylko statusy */
  --q-status-czeka:#b36d12;       /* Amber: wymaga reakcji */
  --q-status-zle:#c9362c;
  /* R22A (wlasciciel 24.10 13:00, makieta makiety/R22-KOLORY-CALA-APLIKACJA.html "podobaja mi sie"): RODZINY SEKCJI - kolor sekcji mowi, CZYM
     jest sekcja (tlo naglowka / sekcji + kreska 4 px po lewej). Czerwony napis tylko na bialym, Panel Grey i tlach terminow (na pieniadzach 4,43,
     na pismach 4,46 - ponizej AA). Tylko ekran; wydruki, PDF i dokument z linku bez zmian. Regula: blok R22A na koncu arkusza. */
  --q-pieniadze-tlo:var(--q-naglowek-tlo);      /* #E6EEF5 pieniadze: kwoty, platnosci, sumy (napis 12,79:1) */
  --q-pieniadze-kreska:#4f7396;                 /* R23-U19 (26.10): stalowy niebieski - jedyny nosnik rodziny pieniedzy na naglowku karty (bez tla), inny niz granat
                                                   paska karty bez rodziny; bylo var(--q-granat) #17354D; 3,6:1 na #D3DDE6, nasycenie 0,31 (pod progiem K-1 "zero niebieskiego") */
  --q-pisma-tlo:#f3ebf9;                        /* pisma: notices, applications, certyfikaty (napis 12,89:1) */
  --q-pisma-kreska:#7a5a99;                     /* 4,82:1 na #F3EBF9 */
  --q-wysylka-tlo:var(--q-ramka-akcji-tlo);     /* #FFF5F2 wysylka / Twoj ruch (A5, G14) */
  --q-wysylka-ramka:var(--q-marka);             /* #F47721, ramka 1,5 px (bez tekstu) */
  --q-terminy-tlo:#fbf1e3;                      /* zegar biegnie (blady bursztyn K-R71; napis 13,41:1) */
  --q-terminy-kreska:var(--q-status-czeka);     /* #B36D12 */
  --q-terminy-po-tlo:#fbeceb;                   /* termin minal (blada czerwien K-R71; czerwony napis 4,52:1) */
  --q-terminy-po-kreska:var(--q-status-zle);    /* #C9362C */
  --q-rodzina-kreska:4px;
  /* R22A: STAN NA LEWEJ KRAWEDZI KARTY / WIERSZA LISTY (kafel: dolna kreska 3 px, bez zmian) - kolor kropki statusu */
  --q-akcent-statusu:4px;
  --q-akcent-dobrze:var(--q-status-dobrze);     /* zalatwione: zaplacone, zgoda, approved */
  --q-akcent-czeka:var(--q-status-czeka);       /* czeka: zegar biegnie albo rzecz do zrobienia */
  --q-akcent-zle:var(--q-status-zle);           /* po terminie, Missed */
  --q-akcent-szkic:var(--q-szary-wykres);       /* szkic / nie wyslane (#858E94, 3,34:1) */
  /* NAPISY (decyzja wlasciciela 07.10, wariant A): te same barwy, ciemniej - TYLKO dla liter (prog WCAG 4,5:1 na bialym i na Panel Grey).
     Kropki, kreski, tla, liczniki i paski zostaja w kolorach palety 1:1 (#607487, #B36D12, #23884B). */
  --q-podpis-napis:#566a7c;        /* Secondary Text - napis */
  --q-status-czeka-napis:#94590e;  /* Amber - napis */
  --q-status-dobrze-napis:#1e7a43; /* Green - napis */
  --q-wykres-ciemny:#5f6a72;
  --q-wykres-jasny:#a3abb1;
  --q-linia-siatki:#dde3e8;
  --q-szary-zakladek:#dde3e8;     /* N4b-B (08.10): pasek zakladek jak w Excelu - ciemniejszy szary */
  --q-cien-menu:rgba(23,40,58,.25);
  /* role (zawsze przez palete powyzej) */
  --q-pasek-gorny:var(--q-granat);
  --q-na-ciemnym:var(--q-bialy);
  /* N4b-B: aktywna zakladka = kolor wstazki (jasny szary), zakladka i wstazka wygladaja jak jedna karta; najechanie rozjasnia */
  --q-zakladki:var(--q-szary-zakladek);
  --q-zakladka-aktywna:var(--q-panel-szary);
  --q-zakladka-najechanie:var(--q-tlo-strony);
  --q-wstazka:var(--q-panel-szary);
  --q-pasek-boczny:var(--q-panel-szary);
  --q-pasek-stanu:var(--q-panel-szary);
  --q-panel:var(--q-bialy);
  --q-kafel:var(--q-bialy);
  --q-naglowek-tabeli:var(--q-naglowek-tlo);
  --q-naglowek-napis:var(--q-granat);   /* G (09.10): napis na tle naglowka - #17354D na #E6EEF5 = 10,8:1 (AA wymaga 4,5:1) */
  /* K-R76 (wlasciciel 13.10, regula calej aplikacji): WIERSZ NAGLOWKA KAZDEJ TABELI DANYCH - granat marki, bialy napis (12,7:1),
     pomaranczowa kreska 3 px pod spodem. Jeden zestaw zmiennych, regula na koncu pliku (blok K-R76). Naglowki KART bez zmian (--q-naglowek-tlo). */
  --q-th-tlo:var(--q-granat);
  --q-th-napis:var(--q-na-ciemnym);
  /* N-28 (wlasciciel 15.10 wieczor, zmienia N-2): zmienne --q-th-kreska / --q-th-kreska-grubosc USUNIETE - pod naglowkami nie ma zadnej kreski marki */
  /* K-R61 (wlasciciel 13.10): strzalka KAZDEJ listy rozwijanej - granat (nieaktywna lista: szary nieaktywny) */
  --q-strzalka-listy:var(--q-granat);
  /* K-R48 (wlasciciel 13.10): ikona "i" przy polu (dluga notatka w dymku). KOLOR "i" = DECYZJA WLASCICIELA W TOKU (proponowal zielen;
     zielen = dobry stan wg KOLORY-ZNACZENIA) - do decyzji Secondary #566A7C. Zmiana koloru = TA JEDNA LINIA. */
  --q-info-kolor:var(--q-podpis-napis);
  --q-wiersz-sumy:var(--q-panel-szary);
  --q-komorka:var(--q-bialy);
  --q-najechanie:var(--q-marka-blada);
  --q-separator:var(--q-ramka);
  --q-tytul:var(--q-napis);
  --q-przygaszony:var(--q-podpis-napis);
  --q-ikona:var(--q-granat);
  --q-ikona-wstazki:var(--q-marka-najechanie);   /* F7 (12.10, wlasciciel 11.10): ikony paskow narzedzi #DC6518 - pomarancz = marka, nie ostrzezenie */
  --q-logo:var(--q-marka);
  --q-glowna-akcja:var(--q-marka);
  --q-glowna-akcja-najechanie:var(--q-marka-najechanie);
  --q-formalna:var(--q-granat);
  --q-formalna-najechanie:var(--q-granat-najechanie);
  --q-usun:var(--q-status-zle);
  --q-link:var(--q-granat);
  --q-fokus:var(--q-marka-blada);
  --q-nieaktywny:var(--q-szary-wykres);
  --q-nieaktywny-tlo:var(--q-panel-szary);
  --q-wykres-1:var(--q-wykres-ciemny);
  --q-wykres-2:var(--q-wykres-jasny);
  --q-wykres-wyroznienie:var(--q-marka);
  --q-licznik-czeka:var(--q-status-czeka);
  --q-licznik-nowe:var(--q-granat);
  /* geometria i pismo */
  --q-odstep:10px;                /* JEDEN odstep miedzy kartami w pionie i poziomie */
  --q-promien:2px;
  --q-pismo:13px;
  --q-pismo-tabeli:12px;
  --q-pismo-male:11.5px;
  --q-wys-paska:48px;
  --q-wys-zakladek:34px;
  --q-wys-wstazki:68px;           /* N8-C (08.10): wstazka lzejsza - ikona 20 px i napis pod spodem, bez podpisow grup (bylo 92 px) */
  --q-szer-paska:180px;
  --q-szer-paska-zwinietego:48px;
  --q-wys-glowy-panelu:38px;
  --q-wys-pola:32px;
  --q-kreska:3px;                 /* pomaranczowa kreska aktywnej pozycji lewego paska / kafelka "uwaga" (zakladki bez kreski od N4b-B) */
  --q-kroj:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;   /* N4b-E (08.10): Roboto 400/500/700 */
}

/* RAMA APLIKACJI: pasek gorny / dzialy (zakladki) / wstazka / lewy pasek + tresc / pasek stanu */
.q-app{display:grid;grid-template-columns:var(--q-szer-paska) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"gora gora" "dzialy dzialy" "wstazka wstazka" "bok tresc" "stan stan";height:100vh;overflow:hidden;margin:0;
  background:var(--q-tlo-strony);color:var(--q-napis);font-family:var(--q-kroj);font-size:var(--q-pismo);line-height:1.35}
.q-app *,.q-app *::before,.q-app *::after{box-sizing:border-box}
.q-ikony{position:absolute;width:0;height:0;overflow:hidden}
.q-ik{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.q-gora{grid-area:gora;display:flex;align-items:center;gap:22px;height:var(--q-wys-paska);padding:0 18px 0 22px;
  background:var(--q-pasek-gorny);color:var(--q-na-ciemnym)}
.q-logo{font-size:31px;font-weight:700;letter-spacing:-.5px;line-height:1;color:var(--q-na-ciemnym);text-decoration:none;white-space:nowrap}
.q-logo b{color:var(--q-logo);font-weight:800}
/* N8 LOGO (08.10, decyzja wlasciciela V3c): ZNAK logo.svg + NAPIS "QScope" (Roboto 700, bialy na granacie) - pasek gorny kazdej strony
   i ekrany logowania. Znak rosnie z napisem (1.2em), wiec dawne rozmiary napisu na komputerze i telefonie dalej rzadza calym logo.
   Test: tests/qs-n8-logo.js. Wydruki nie maja logo QScope (bez zmian). */
.q-logo{display:inline-flex;align-items:center;gap:.3em;font-family:var(--q-kroj);font-weight:700;color:var(--q-na-ciemnym)}
.q-logo-znak{display:block;flex:none;width:1.2em;height:1.2em;border-radius:.28em}
/* N8-M (08.10, wlasciciel): odmowa jednego wiersza zaproszenia (osoba z domeny firmy) - czerwona uwaga POD polem e-mail i przycisk
   "Add to my team instead" (Project team w trackerze, Project access w people.html). Kolor tylko tu, w arkuszu (obszar DOK trackera bez kolorow). */
.tm-odmowa,.acc-odmowa{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:6px;padding:7px 10px;border:1px solid var(--q-status-zle);border-radius:var(--q-promien);background:var(--q-bialy);font-size:12.5px}
.tm-odmowa-t,.acc-odmowa-t{color:var(--q-status-zle);font-weight:700}
.tm-odmowa .q-btn,.acc-odmowa .q-btn{text-decoration:none}
.q-logo.q-logo-maly,header a.q-logo.q-logo-maly{font-size:20px;letter-spacing:0;margin:0 10px 0 0;color:var(--q-na-ciemnym);font-weight:700;text-decoration:none}   /* naglowek strony otwartej osobno (tender.html, facility.html) */
.q-haslo{font-size:13px;white-space:nowrap}
.q-gora-prawa{margin-left:auto;display:flex;align-items:center;gap:20px;white-space:nowrap}
.q-szukaj{display:flex;align-items:center;gap:8px;width:290px;height:26px;padding:0 9px;border-radius:var(--q-promien);
  background:var(--q-bialy);color:var(--q-przygaszony);font-size:12px}
.q-szukaj input{border:0;outline:0;flex:1;min-width:0;font:inherit;color:var(--q-napis);background:transparent}
.q-gora-link{display:inline-flex;align-items:center;gap:7px;color:var(--q-na-ciemnym);font-size:13px;text-decoration:none;
  background:none;border:0;cursor:pointer;font-family:inherit;padding:0}

.q-dzialy{grid-area:dzialy;display:flex;height:var(--q-wys-zakladek);background:var(--q-zakladki);box-shadow:inset 0 -1px 0 var(--q-separator);padding:0 6px;
  overflow-x:auto;scrollbar-width:none}
/* N4b-B (08.10, wlasciciel): ZAKLADKI JAK W EXCELU - pasek ciemniejszy szary; nieaktywne w kolorze paska, najechanie rozjasnia; aktywna w kolorze
   wstazki, ramka z lewej / gory / prawej, BEZ dolnej krawedzi (zachodzi 1 px na linie paska) - zakladka i wstazka to jedna karta. Bez kreski marki. */
.q-dzial{position:relative;display:flex;align-items:center;padding:0 22px;margin:4px 0 0;border:1px solid transparent;border-bottom:0;background:transparent;
  color:var(--q-napis);font:inherit;font-size:13.5px;white-space:nowrap;cursor:pointer;text-decoration:none;border-radius:var(--q-promien) var(--q-promien) 0 0}
.q-dzial:hover{background:var(--q-zakladka-najechanie)}
.q-dzial[aria-current="page"]{background:var(--q-zakladka-aktywna);font-weight:700;border-color:var(--q-separator);z-index:1}

.q-wstazka{grid-area:wstazka;display:flex;align-items:stretch;min-height:var(--q-wys-wstazki);padding:6px 4px 2px;background:var(--q-wstazka);
  border-bottom:1px solid var(--q-separator);overflow:hidden}
.q-grupa{display:flex;align-items:stretch;padding:0 2px;margin-right:10px}   /* N8-C (08.10): grupy oddziela sam odstep - bez pionowych kresek */
/* N4b-C: grupa = rzad akcji + podpis grupy pod spodem (jak w Excelu) */
.q-grupa:has(> .q-grupa-akcje){flex-direction:column;align-items:center;gap:2px}
.q-grupa-akcje{display:flex;align-items:stretch;flex:1 1 auto}
.q-grupa-podpis{display:none}   /* N8-C (08.10): bez podpisow grup pod spodem (nazwa grupy zostaje dla czytnika: aria-label) */
.q-akcja.q-akcja-glowna{background:var(--q-glowna-akcja);border-color:var(--q-glowna-akcja);color:var(--q-na-ciemnym)}
.q-akcja.q-akcja-glowna .q-ik{color:var(--q-na-ciemnym)}
.q-akcja.q-akcja-glowna:hover{background:var(--q-glowna-akcja-najechanie);border-color:var(--q-glowna-akcja-najechanie)}
.q-akcja{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:62px;padding:4px 8px;border:1px solid transparent;
  border-radius:var(--q-promien);background:transparent;color:var(--q-napis);font:inherit;font-size:11.5px;white-space:nowrap;cursor:pointer;text-decoration:none}
.q-akcja .q-ik{width:20px;height:20px;stroke-width:1.5;color:var(--q-ikona-wstazki)}   /* N8-C: ikony 20 px; F7 (12.10): kolor marki #DC6518, napis pod ikona bez zmian, nieaktywne szare (regula nizej) */
.q-akcja:hover{background:var(--q-panel-szary);border-color:var(--q-ramka)}
.q-akcja:disabled,.q-akcja[aria-disabled="true"]{color:var(--q-podpis-napis);cursor:not-allowed}   /* N4b-C: napis nieaktywnej akcji czytelny (WCAG 4,5:1 na wstazce), ikona szara */
.q-akcja:disabled .q-ik,.q-akcja[aria-disabled="true"] .q-ik{color:var(--q-nieaktywny)}
.q-akcja.q-akcja-usun .q-ik{color:var(--q-usun)}
.q-wiecej{display:none}
/* N4b-C: szeroki ekran - grupy, ktore nie mieszcza sie w rzedzie, ida do More (navWstazkaMiesc); tworzenie i Output zostaja w rzedzie */
.q-grupa.q-w-wiecej{display:none}
.q-wiecej.q-wiecej-szeroki{display:flex;flex:none}
.q-akcja.q-akcja-schowana{display:none}
#qwo-link{flex:1 1 240px;min-width:0}   /* N8-G: pole linku w oknie Send by link (bylo w linii - U31-3) */   /* N8-N: telefon - akcja pierwszej grupy, ktora nie miesci sie przed More, stoi w liscie More */

/* LEWY PASEK: ekrany dzialu; zwijany jak w Outlooku (rozwiniety ~180 px / zwiniety ~48 px, przelacznik na dole i Ctrl+\) */
.q-bok{grid-area:bok;display:flex;flex-direction:column;background:var(--q-pasek-boczny);border-right:1px solid var(--q-separator);padding:10px 0 10px;overflow-y:auto;overflow-x:hidden}
.q-bok-grupa{padding:4px 0 8px;border-bottom:1px solid var(--q-separator)}
.q-bok-tytul{margin:12px 14px 4px;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--q-granat)}   /* D5 (11.10): granat, 700, wiecej odstepu nad naglowkiem */
.q-bok-ekran{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:28px;padding:3px 10px 3px 16px;
  border:0;background:transparent;color:var(--q-napis);font:inherit;font-size:13px;text-align:left;text-decoration:none;cursor:pointer}
.q-bok-ekran .q-ik{color:var(--q-ikona)}
.q-bok-ekran:hover{background:var(--q-marka-blada)}
/* aktywna pozycja: ciemny tekst + 3 px marki po lewej + tlo blade, ikona w kolorze marki (takze w stanie zwinietym) */
.q-bok-ekran[aria-current="page"]{background:var(--q-marka-blada);color:var(--q-napis);font-weight:600;box-shadow:inset var(--q-kreska) 0 0 var(--q-marka)}
.q-bok-ekran[aria-current="page"] .q-ik{color:var(--q-marka)}
.q-bok-ekran .q-licznik{margin-left:auto}
.q-bok-zwin{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding:10px 16px 4px;border:0;border-top:1px solid var(--q-separator);background:none;
  color:var(--q-podpis-napis);font:inherit;font-size:12px;cursor:pointer;width:100%;text-align:left}
.q-bok-zwin:hover{color:var(--q-napis)}
.q-bok-zwin kbd{margin-left:auto;font-family:inherit;font-size:11px;color:var(--q-podpis-napis)}
.q-zwin-przelacznik{position:absolute;opacity:0;pointer-events:none}
/* stan zwiniety: w aplikacji klasa q-zwiniety (zapamietana per uzytkownik i per ekran), we wzorniku przelacznik */
.q-app.q-zwiniety,.q-app:has(.q-zwin-przelacznik:checked){grid-template-columns:var(--q-szer-paska-zwinietego) minmax(0,1fr)}
/* N4b-D (08.10): PO ZWINIECIU / ROZWINIECIU POZYCJE NIE PRZESUWAJA SIE W PIONIE - tytul sekcji zostaje (ta sama wysokosc, napis niewidoczny,
   w jego miejscu cienka kreska), odstepy grup bez zmian; zmienia sie tylko szerokosc paska. */
.q-zwiniety .q-bok-tytul,.q-app:has(.q-zwin-przelacznik:checked) .q-bok-tytul{color:transparent;white-space:nowrap;overflow:hidden;
  background:linear-gradient(var(--q-separator),var(--q-separator)) center/70% 1px no-repeat}
.q-zwiniety .q-bok-tytul *,.q-app:has(.q-zwin-przelacznik:checked) .q-bok-tytul *{visibility:hidden}
/* napis zostaje dla czytnika ekranu; nazwa w dymku z atrybutu title */
.q-zwiniety .q-bok-napis,.q-app:has(.q-zwin-przelacznik:checked) .q-bok-napis,
.q-zwiniety .q-bok-zwin kbd,.q-app:has(.q-zwin-przelacznik:checked) .q-bok-zwin kbd{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.q-zwiniety .q-bok-ekran,.q-app:has(.q-zwin-przelacznik:checked) .q-bok-ekran,
.q-zwiniety .q-bok-zwin,.q-app:has(.q-zwin-przelacznik:checked) .q-bok-zwin{justify-content:center;padding-left:0;padding-right:0;gap:0}
/* licznik na ikonie: cyfra w kolku przy prawym gornym rogu ikony */
.q-zwiniety .q-bok-ekran .q-licznik,.q-app:has(.q-zwin-przelacznik:checked) .q-bok-ekran .q-licznik{position:absolute;top:1px;left:26px;margin:0;min-width:15px;height:14px;padding:0 3px;font-size:9.5px}
.q-zwiniety .q-ik-rozwin,.q-app:has(.q-zwin-przelacznik:checked) .q-ik-rozwin{transform:scaleX(-1)}

.q-tresc{grid-area:tresc;min-width:0;min-height:0;overflow-y:auto;padding:12px 14px 20px}
.q-stan{grid-area:stan;display:flex;align-items:center;gap:14px;min-height:30px;padding:0 18px;background:var(--q-pasek-stanu);
  border-top:1px solid var(--q-ramka);font-size:12px;color:var(--q-napis)}
.q-stan-prawa{margin-left:auto;display:flex;gap:14px;white-space:nowrap}
.q-stan-prawa span + span::before{content:"|";margin-right:14px;color:var(--q-podpis-napis)}

/* NAGLOWEK EKRANU */
.q-ekran-glowa{display:flex;align-items:flex-start;gap:16px;margin:0 2px var(--q-odstep)}
.q-ekran-tytul{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:var(--q-tytul)}
.q-ekran-podpis{margin:2px 0 0;font-size:15px;color:var(--q-podpis-napis)}
.q-ekran-prawa{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:13px;white-space:nowrap}

/* KAFELKI KPI: rzad na cala szerokosc, rowne szerokosci i wysokosci, krawedzie = krawedzie siatki ponizej */
.q-kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--q-odstep);margin-bottom:var(--q-odstep);align-items:stretch}
.q-kafel{padding:10px 14px 9px;background:var(--q-kafel);border:1px solid var(--q-ramka);border-radius:var(--q-promien);min-width:0}
/* kafelek "uwaga": wg reguly z danych (nie recznie) - biale tlo, dolna kreska 3 px marki */
.q-kafel-uwaga{box-shadow:inset 0 calc(-1 * var(--q-kreska)) 0 var(--q-marka)}
.q-kafel-etykieta{font-size:13px;color:var(--q-podpis-napis)}
.q-kafel-wartosc{margin-top:2px;font-size:22px;font-weight:700;color:var(--q-napis);font-variant-numeric:tabular-nums;white-space:nowrap}
.q-kafel-podpis{margin-top:1px;font-size:13px;color:var(--q-podpis-napis)}

/* KARTY (panele): jedna ramka, jeden naglowek, jeden rog; karty w rzedzie maja wspolna gore i dol (tlo dociagniete, tresc nie) */
.q-siatka{display:grid;gap:var(--q-odstep);align-items:stretch}
.q-siatka-glowna{grid-template-columns:minmax(0,1fr) minmax(300px,29%)}
.q-siatka-pol{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.q-kolumna{display:flex;flex-direction:column;gap:var(--q-odstep);min-width:0}
/* ostatnia karta kolumny dociaga tlo do dolu rzedu - obie kolumny koncza sie na jednej linii */
.q-kolumna > :last-child{flex:1 1 auto}
.q-panel{display:flex;flex-direction:column;background:var(--q-panel);border:1px solid var(--q-ramka);border-radius:var(--q-promien);min-width:0;overflow:hidden}
.q-panel-glowa{display:flex;align-items:center;gap:12px;min-height:var(--q-wys-glowy-panelu);padding:6px 12px;border-bottom:1px solid var(--q-linia-siatki)}
.q-panel-tytul{margin:0;font-size:15px;font-weight:700;color:var(--q-tytul)}
.q-panel-prawa{margin-left:auto;display:flex;align-items:center;gap:10px}
.q-panel-tresc{min-width:0;overflow-x:auto}
.q-panel-tresc.q-z-oddechem{padding:10px 12px 12px}
/* tabela szersza niz karta przewija sie W KARCIE (kazda .q-panel-tresc), strona nie */
.q-przewijana{overflow-x:auto}
/* ponizej 1280 px prawa kolumna schodzi pod lewa: pierwsza karta na cala szerokosc, dwie kolejne w jednym rzedzie (wspolna gora i dol) - bez rozciagania kart ponad tresc */
@media (max-width:1279px){
  .q-siatka-glowna{grid-template-columns:minmax(0,1fr)}
  .q-siatka-glowna > .q-kolumna + .q-kolumna{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .q-siatka-glowna > .q-kolumna + .q-kolumna > :first-child{grid-column:1 / -1}
}
.q-link{color:var(--q-link);font-size:12px;text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.q-link:hover{color:var(--q-formalna-najechanie)}
.q-pomoc{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border-radius:50%;border:1px solid var(--q-ramka);
  background:var(--q-bialy);color:var(--q-podpis-napis);font-size:11px;font-weight:700;cursor:help}
.q-wybor-maly{height:28px;font-size:12px;width:auto;min-width:130px}

/* TABELA Z LINIAMI SIATKI I WIERSZEM TOTAL */
.q-tabela{width:100%;border-collapse:collapse;font-size:var(--q-pismo-tabeli);color:var(--q-napis);font-variant-numeric:tabular-nums}
.q-tabela th{background:var(--q-naglowek-tabeli);font-weight:600;color:var(--q-napis);text-align:left;padding:6px 7px;white-space:nowrap;
  border:1px solid var(--q-linia-siatki);border-top:0}
.q-tabela td{padding:4px 7px;height:26px;border-left:1px solid var(--q-linia-siatki);border-right:1px solid var(--q-linia-siatki);
  border-bottom:1px solid var(--q-linia-siatki);background:var(--q-komorka);white-space:nowrap}
.q-tabela td.q-zawijaj{white-space:normal;overflow-wrap:anywhere}
.q-tabela th:first-child,.q-tabela td:first-child{border-left:0}
.q-tabela th:last-child,.q-tabela td:last-child{border-right:0}
.q-tabela tbody tr:hover td,.q-tabela tbody tr[aria-selected="true"] td{background:var(--q-marka-blada)}
.q-tabela .q-kw{text-align:right;white-space:nowrap}
/* R16-U2 (22.10, wlasciciel): PRZYCISKI W WIERSZU TABELI - KAZDY W SWOJEJ KOLUMNIE O STALEJ SZEROKOSCI. Do 22.10 przyciski stawal flex:
   "Send invite" i "Resend" maja rozna szerokosc, wiec "Copy link" skakal miedzy wierszami. Teraz siatka: szerokosci kolumn podaje tabela
   (--q-akcje-kolumny), miejsce przycisku jego klasa q-slot-N (--q-slot-N = wiersz / kolumna siatki), wiec brak przycisku w wierszu
   nie przesuwa pozostalych. Przycisk wypelnia kolumne; kolor tylko z klas przycisku (q-btn ...), tu zadnego koloru. */
.q-akcje-wiersza{display:grid;grid-template-columns:var(--q-akcje-kolumny,repeat(4,8.75rem));gap:6px;justify-content:end;align-items:center}
.q-akcje-wiersza > *{min-width:0;width:100%;box-sizing:border-box;justify-content:center;text-align:center;white-space:nowrap;margin:0}
.q-akcje-wiersza > .q-slot-1{grid-area:var(--q-slot-1,1 / 1)}
.q-akcje-wiersza > .q-slot-2{grid-area:var(--q-slot-2,1 / 2)}
.q-akcje-wiersza > .q-slot-3{grid-area:var(--q-slot-3,1 / 3)}
.q-akcje-wiersza > .q-slot-4{grid-area:var(--q-slot-4,1 / 4)}
.q-akcje-wiersza > .q-slot-caly{grid-column:1 / -1}
.q-tabela tfoot td{background:var(--q-wiersz-sumy);font-weight:700;font-size:13.5px;height:30px;border-top:1px solid var(--q-ramka);color:var(--q-napis)}
/* liczby w tabelach alertow neutralne */
.q-tabela .q-nr{font-weight:700;text-align:center}

/* STATUS Z KROPKA - jedyne miejsce zieleni i czerwieni poza usuwaniem; regula kazdego statusu liczona z danych */
.q-status{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.q-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--q-nieaktywny);flex:none}
.q-status-dobrze::before{background:var(--q-status-dobrze)}
.q-status-czeka::before{background:var(--q-status-czeka)}
.q-status-zle::before{background:var(--q-status-zle)}
/* kwota kolorem tylko jako status (zaleglosc / zaplacone) */
.q-kwota-zle{color:var(--q-status-zle);font-weight:600}
.q-kwota-dobrze{color:var(--q-status-dobrze-napis);font-weight:600}

/* PLIK W LISCIE: ikonka typu szara */
.q-plik{display:inline-flex;align-items:center;gap:7px;min-width:0}
.q-plik .q-ik{color:var(--q-szary-wykres)}

/* WYKRES: szarosci + JEDEN wyrozniony element w kolorze marki */
.q-wykres{display:flex;gap:18px;align-items:center;padding:10px 14px}
.q-wykres svg{flex:1;min-width:0;height:auto;max-height:200px}
.q-wykres-os{fill:var(--q-podpis-napis);font-size:11px;font-family:var(--q-kroj)}
.q-wykres-linia{stroke:var(--q-linia-siatki);stroke-width:1}
.q-s1{fill:var(--q-wykres-1)}
.q-s2{fill:var(--q-wykres-2)}
.q-s-wyroznienie{fill:var(--q-wykres-wyroznienie)}
.q-legenda{display:grid;gap:14px;font-size:13px;white-space:nowrap}
.q-legenda span{display:flex;align-items:center;gap:10px}
.q-legenda i{width:16px;height:16px;border-radius:1px;display:inline-block}
.q-legenda .q-l1{background:var(--q-wykres-1)}
.q-legenda .q-l2{background:var(--q-wykres-2)}
.q-legenda .q-l-wyroznienie{background:var(--q-wykres-wyroznienie)}

/* PRZYCISKI (bez ikon i emoji): glowny = marka (dokladnie jeden na ekran); formalny = granat (Approve, Issue, Certify, Submit);
   narzedzie = bialy z ramka (Export, Print, Refresh, + Add Row, Copy link); usun = czerwony obrys; zablokowany = szary + powod obok */
.q-btn{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 13px;border:1px solid var(--q-ramka);
  border-radius:var(--q-promien);background:var(--q-bialy);color:var(--q-granat);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;
  cursor:pointer;text-decoration:none}
.q-btn:hover{background:var(--q-panel-szary)}
.q-btn-glowny{background:var(--q-glowna-akcja);border-color:var(--q-glowna-akcja);color:var(--q-na-ciemnym)}
.q-btn-glowny:hover{background:var(--q-glowna-akcja-najechanie);border-color:var(--q-glowna-akcja-najechanie)}
.q-btn-formalny{background:var(--q-formalna);border-color:var(--q-formalna);color:var(--q-na-ciemnym)}
.q-btn-formalny:hover{background:var(--q-formalna-najechanie);border-color:var(--q-formalna-najechanie)}
.q-btn-usun{border-color:var(--q-usun);color:var(--q-usun)}
.q-btn-usun:hover{background:var(--q-bialy);box-shadow:inset 0 0 0 1px var(--q-usun)}
.q-btn:disabled,.q-btn[aria-disabled="true"]{background:var(--q-nieaktywny-tlo);border-color:var(--q-ramka);color:var(--q-nieaktywny);cursor:not-allowed;box-shadow:none}
.q-powod{font-size:var(--q-pismo-male);color:var(--q-podpis-napis)}
.q-rzad{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.q-rzad + .q-rzad{margin-top:10px}
.q-opis-rzedu{min-width:150px;font-size:12px;color:var(--q-podpis-napis)}

/* POLA FORMULARZA (U31): jedna wysokosc, jeden promien, etykieta nad polem zwyklymi literami */
.q-formularz{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 14px}
.q-pole-blok{display:flex;flex-direction:column;gap:4px;min-width:0}
.q-etykieta{font-size:12px;font-weight:600;color:var(--q-napis)}
.q-pole{width:100%;height:var(--q-wys-pola);padding:0 9px;border:1px solid var(--q-ramka);border-radius:var(--q-promien);background:var(--q-bialy);
  color:var(--q-napis);font:inherit;font-size:13px}
textarea.q-pole{height:auto;min-height:68px;padding:6px 9px;resize:vertical}
.q-pole:hover{border-color:var(--q-szary-wykres)}
.q-pole:focus{outline:2px solid var(--q-fokus);outline-offset:0;border-color:var(--q-marka)}
.q-pole.q-liczba{text-align:right;font-variant-numeric:tabular-nums}
select.q-pole{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--q-granat) 50%),linear-gradient(135deg,var(--q-granat) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.q-pole.q-zacheta{color:var(--q-nieaktywny)}
.q-pole[readonly]{background:var(--q-panel-szary);color:var(--q-podpis-napis)}
.q-pole:disabled{background:var(--q-panel-szary);color:var(--q-nieaktywny);cursor:not-allowed}
/* R19-U10 (23.10): karta zatwierdzonej wariacji tylko do odczytu - zablokowane pola wygladaja na zablokowane (jak .zablokowane statusu) */
.ci.vo-zamrozona .ci-body .inp:disabled,.ci.vo-zamrozona .ci-body .ti:disabled,.ci .ci-body input[data-vo-nr]:disabled{background:var(--grey);color:var(--mid);cursor:not-allowed;opacity:1}
.q-pole.q-blad{border-color:var(--q-status-zle)}
.q-blad-tekst{font-size:var(--q-pismo-male);color:var(--q-status-zle)}
.q-data{position:relative}
.q-data .q-pole{padding-right:32px}
.q-data .q-ik{position:absolute;right:9px;bottom:8px;color:var(--q-granat);pointer-events:none}
.q-data input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;width:32px;height:100%;cursor:pointer}
.q-plik-wybor{display:flex;align-items:center;gap:10px;min-height:var(--q-wys-pola);flex-wrap:wrap;position:relative}
.q-plik-wybor input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.q-plik-nazwa{font-size:12px;color:var(--q-podpis-napis);overflow-wrap:anywhere}
.q-wybor{display:inline-flex;align-items:center;gap:8px;min-height:24px;font-size:13px;cursor:pointer}
.q-wybor input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;flex:none;border:1px solid var(--q-szary-wykres);
  border-radius:var(--q-promien);background:var(--q-bialy);cursor:pointer;display:grid;place-content:center}
.q-wybor input[type=radio]{border-radius:50%}
.q-wybor input:checked{background:var(--q-granat);border-color:var(--q-granat)}
.q-wybor input[type=checkbox]:checked::after{content:"";width:8px;height:4px;border:2px solid var(--q-na-ciemnym);border-top:0;border-right:0;
  transform:translateY(-1px) rotate(-45deg)}
.q-wybor input[type=radio]:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--q-na-ciemnym)}
.q-wybor input:focus-visible{outline:2px solid var(--q-fokus)}

/* PUSTY STAN: jedno zdanie, co zrobic */
.q-pusto{display:flex;align-items:center;gap:14px;padding:14px;color:var(--q-podpis-napis);font-size:13px}
.q-pusto .q-ik{width:22px;height:22px;color:var(--q-szary-wykres)}
.q-pusto .q-btn{margin-left:auto}

/* LICZNIK W PASKU (U22): Amber = czeka na Ciebie, granat = nowe od ostatniej wizyty, brak gdy nic */
.q-licznik{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:17px;padding:0 5px;border-radius:9px;
  font-size:10.5px;font-weight:700;color:var(--q-na-ciemnym)}
.q-licznik-czeka{background:var(--q-licznik-czeka)}
.q-licznik-nowe{background:var(--q-licznik-nowe)}

/* TELEFON 390: lewy pasek schowany calkiem, otwiera sie przyciskiem Menu; zakladki przewijane w poziomie; wstazka w jednym rzedzie z More */
.q-menu{display:none}
.q-menu-przelacznik{position:absolute;opacity:0;pointer-events:none}
@media (max-width:760px){
  .q-app,.q-app.q-zwiniety,.q-app:has(.q-zwin-przelacznik:checked){grid-template-columns:minmax(0,1fr);grid-template-areas:"gora" "dzialy" "wstazka" "tresc" "stan"}
  .q-gora{gap:10px;padding:0 10px;height:46px}
  .q-logo{font-size:24px}
  .q-haslo,.q-szukaj,.q-gora-napis{display:none}
  .q-gora-prawa{gap:12px}
  .q-menu{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--q-na-ciemnym);border-radius:var(--q-promien);
    color:var(--q-na-ciemnym);font-size:12px;cursor:pointer;background:var(--q-granat)}   /* I1 (12.10): przycisk ma tlo paska (granat) - domyslne szare tlo przegladarki dawalo bialy napis na jasnoszarym */
  .q-dzial{padding:0 14px}
  /* N4b-N (08.10): zakladki przewijane w poziomie z cieniem na krawedzi, gdy cos jest jeszcze za krawedzia (cien przewija sie z trescia) */
  .q-dzialy{background:linear-gradient(to right,var(--q-zakladki) 30%,transparent) 0 0/36px 100% no-repeat local,
    linear-gradient(to left,var(--q-zakladki) 30%,transparent) 100% 0/36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--q-cien-menu),transparent) 0 0/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--q-cien-menu),transparent) 100% 0/12px 100% no-repeat scroll,var(--q-zakladki)}
  .q-kafle{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}   /* N4b-N: kafle KPI po 2 w rzedzie, rzedy rownej wysokosci */
  .q-wstazka{min-height:62px;padding:4px 2px;flex-wrap:nowrap}
  .q-wstazka .q-grupa{border-right:0;padding:0}
  .q-wstazka .q-grupa:nth-child(n+2){display:none}
  .q-wstazka .q-akcja{min-width:56px;padding:2px 4px;font-size:11px}
  .q-wiecej{display:flex;margin-left:auto}
  .q-bok{display:none;position:fixed;z-index:20;top:46px;left:0;bottom:0;width:min(280px,86vw);box-shadow:0 8px 24px var(--q-cien-menu)}
  .q-menu-przelacznik:checked ~ .q-bok{display:flex}
  .q-bok-zwin{display:none}
  .q-tresc{padding:10px 10px 16px}
  .q-ekran-glowa{flex-wrap:wrap}
  .q-ekran-prawa{margin-left:0;gap:12px;flex-wrap:wrap}
  .q-siatka-glowna,.q-siatka-pol{grid-template-columns:minmax(0,1fr)}
  .q-wykres{flex-direction:column;align-items:stretch}
  .q-legenda{grid-auto-flow:column;justify-content:start;gap:16px}
  .q-stan{flex-wrap:wrap;gap:6px;padding:4px 10px}
  .q-stan-prawa{margin-left:0;flex-wrap:wrap}
}

/* ============================================================================
   N4 6b (07.10, RAMA) - RAMA TRACKERA (body.q-rama). Ta sama rama co .q-app wyzej, ale strona przewija sie CALA (tracker ma druk,
   elementy sticky i przewijanie okna): pasek gorny + dzialy + wstazka przyklejone u gory, lewy pasek przyklejony z lewej, pasek stanu
   na dole. Tylko @media screen - wydruki trackera zostaja bez zmian (jego reguly @media print, obszar DOK nietkniety).
   ============================================================================ */
/* R11 (R10-U2): + pasek podgladu "See what they see" nad naglowkiem (--q-wys-podgladu mierzy pasekPodgladu; bez podgladu 0) - bez niego lewy pasek
   stal pod wstazka i Dashboard (z kreska aktywnej pozycji) chowal sie za naglowkiem, zostawal 7-pikselowy skrawek kreski nad Inbox */
:root{--q-rama-gora:calc(var(--q-wys-paska) + var(--q-wys-zakladek) + var(--q-wys-wstazki) + var(--q-wys-podgladu, 0px));--q-wys-stanu:30px}
/* N4b-E (08.10, wlasciciel): ROBOTO W CALYM INTERFEJSIE (tylko ekran). WYDRUKI ZOSTAJA NA LATO: regula tylko @media screen (druk strony
   bierze @media print), okna wydrukow maja wlasny arkusz bez qs-wzor.css, strona dokumentu dla drugiej strony (viewdoc.php) ma klase
   q-dokument. Pismo stale (link w umowach, kod) bez zmian; ikony SVG bez kroju. */
@media screen{
  body:not(.q-dokument),body:not(.q-dokument) *:not(code):not(pre):not(kbd):not(samp):not(.link):not(svg):not(svg *){font-family:var(--q-kroj)!important}
}
/* przycisk ekranu schowany, bo jego akcja stoi na wstazce (navWstazka) - jedna droga do jednej rzeczy */
.q-w-wstazce{display:none!important}
/* N4 U31 -> 6b (RAMA): WARIANTY POL ekranow (przeniesione z bloku <style> trackera, wyglad bez zmian; skan tests/qs-n4-u31-pola.js):
   .q-pole-komorka (pole w komorce tabeli), .q-wybor-pole (checkbox/radio: wlasne, granatowe zaznaczenie), .q-plik-pole (plik: przycisk
   w stylu narzedzia, bez systemowego "No file chosen"). */
.q-pole-komorka{border:1px solid var(--q-ramka);border-radius:var(--q-promien);background:var(--q-bialy);color:var(--q-napis)}
.q-pole-komorka:focus{outline:2px solid var(--q-fokus);outline-offset:0;border-color:var(--q-marka);background:var(--q-bialy)}
input.q-wybor-pole{appearance:none;-webkit-appearance:none;width:16px!important;min-width:16px;height:16px;margin:0 2px 0 0;padding:0;flex:none;border:1px solid var(--q-szary-wykres);
  border-radius:var(--q-promien);background:var(--q-bialy);cursor:pointer;display:inline-grid;place-content:center;vertical-align:middle}
input.q-wybor-pole[type=radio]{border-radius:50%}
input.q-wybor-pole:checked{background:var(--q-granat);border-color:var(--q-granat)}
input.q-wybor-pole[type=checkbox]:checked::after{content:"";width:8px;height:4px;border:2px solid var(--q-na-ciemnym);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
input.q-wybor-pole[type=radio]:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--q-na-ciemnym)}
/* G10 (runda G 12.10): stan posredni (indeterminate, np. czesc pozycji sekcji przydzielona podwykonawcy) - ramka granat i granatowa kreska */
input.q-wybor-pole[type=checkbox]:indeterminate:not(:checked){border-color:var(--q-granat)}
input.q-wybor-pole[type=checkbox]:indeterminate:not(:checked)::after{content:"";width:8px;height:2px;background:var(--q-granat)}
input.q-wybor-pole:focus-visible{outline:2px solid var(--q-fokus)}
input.q-wybor-pole:disabled{background:var(--q-panel-szary);border-color:var(--q-ramka);cursor:not-allowed}
input.q-plik-pole{font:inherit;font-size:12px;color:var(--q-podpis-napis);max-width:100%}
input.q-plik-pole::file-selector-button{margin-right:10px;min-height:30px;padding:0 13px;border:1px solid var(--q-ramka);border-radius:var(--q-promien);background:var(--q-bialy);
  color:var(--q-granat);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
input.q-plik-pole::file-selector-button:hover{background:var(--q-panel-szary)}
input.q-plik-pole:not(.q-plik-wybrany){color:transparent}   /* bez systemowego "No file chosen"; po wyborze nazwa pliku wraca (klasa q-plik-wybrany) */
@media screen{
  body.q-rama{padding-left:0!important;padding-bottom:var(--q-wys-stanu)!important;background:var(--q-tlo-strony)}
  /* PASEK GORNY */
  .q-rama .topbar{position:sticky;top:0;z-index:200;display:block;padding:0;margin:0;background:var(--q-bialy);border:0;box-shadow:none}
  .q-rama .tb-konto{box-sizing:border-box;height:var(--q-wys-paska);display:flex;align-items:center;gap:22px;padding:0 18px 0 22px;
    background:var(--q-pasek-gorny);color:var(--q-na-ciemnym);border:0;font-family:var(--q-kroj)}
  .q-rama .tb-konto .q-logo{font-size:28px}
  .q-rama .tb-sciezka{flex:0 1 auto;min-width:0;color:var(--q-na-ciemnym);font-size:13px}
  .q-rama .tb-sciezka .tb-sep,.q-rama .tb-sciezka .tb-crumb,.q-rama .tb-sciezka .tb-ekran{color:var(--q-na-ciemnym)}
  .q-rama .tb-sciezka .tb-sep{opacity:.6}
  .q-rama .tb-sciezka .ps-btn,.q-rama .tb-sciezka .ps-btn span{color:var(--q-na-ciemnym);font-size:13px}
  .q-rama .tb-sciezka .ps-btn:hover{background:var(--q-granat-najechanie);color:var(--q-na-ciemnym)}
  .q-rama .tb-konto .topbar-right{margin-left:auto;display:flex;align-items:center;gap:18px}
  .q-rama .tb-konto .tr-btn{display:inline-flex;flex-direction:row;align-items:center;width:auto;height:auto;padding:0;gap:7px;color:var(--q-na-ciemnym);background:none;border-radius:0;font-family:inherit}
  .q-rama .tb-konto .tr-btn span{display:inline;font-size:13px}
  .q-rama .tb-konto .tr-btn:hover{background:none;color:var(--q-na-ciemnym);text-decoration:underline;text-underline-offset:3px}
  /* pasek gorny jest granatowy na KAZDYM typie projektu - dawna szarosc ikon typu c (body.typ-c .topbar .tr-btn) nie wchodzi na granat */
  body.q-rama .topbar .tb-konto .tr-btn:not(.tr-btn-asyst){color:var(--q-na-ciemnym)}
  /* DZIALY I WSTAZKA (wysokosci stale - od nich liczy sie gora lewego paska) */
  .q-rama .q-dzialy{box-sizing:border-box;height:var(--q-wys-zakladek);font-family:var(--q-kroj)}
  .q-rama .q-dzial{gap:8px}
  .q-rama .q-wstazka{box-sizing:border-box;height:var(--q-wys-wstazki);min-height:0;position:relative;overflow-x:clip;overflow-y:visible;font-family:var(--q-kroj)}
  .q-wstazka-pusto{align-self:center;padding:0 14px;font-size:12px;color:var(--q-podpis-napis)}
  .q-wiecej-lista{position:absolute;right:6px;top:100%;z-index:210;display:flex;flex-direction:column;min-width:210px;padding:6px;background:var(--q-bialy);
    border:1px solid var(--q-ramka);border-radius:var(--q-promien);box-shadow:0 8px 24px var(--q-cien-menu)}
  .q-wiecej-lista[hidden]{display:none}
  .q-wiecej-lista .q-akcja{flex-direction:row;justify-content:flex-start;gap:10px;min-width:0;padding:6px 8px;font-size:12.5px}
  .q-wiecej-lista .q-akcja .q-ik{width:18px;height:18px}
  /* LEWY PASEK: ekrany biezacego dzialu */
  .q-rama .rail{position:fixed;top:var(--q-rama-gora);left:0;bottom:var(--q-wys-stanu);width:var(--q-szer-paska);z-index:190;display:flex;flex-direction:column;
    padding:6px 0 0;gap:0;background:var(--q-pasek-boczny);border-right:1px solid var(--q-separator);overflow:hidden;transition:none;box-shadow:none;font-family:var(--q-kroj)}
  .q-rama .rail-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:block;scrollbar-width:thin}
  .q-rama .rail .q-bok-grupa{border-bottom:0;padding:2px 0 8px}
  .q-rama .rail .q-bok-grupa:not(.in-dzial){display:none}
  .q-rama .rail .q-bok-tytul{margin:8px 14px 4px;font-size:11px}
  .q-rama .rail .tab-item.q-bok-ekran,.q-rama .rail .nav-gosc.q-bok-ekran{display:none;position:relative;align-items:center;gap:12px;width:100%;height:auto;min-height:30px;margin:0;
    padding:3px 10px 3px 16px;border:0;border-radius:0;background:transparent;color:var(--q-napis);font:inherit;font-size:13px;font-weight:400;text-align:left;white-space:nowrap;cursor:pointer}
  .q-rama .rail .tab-item.q-bok-ekran.in-dzial,.q-rama .rail .nav-gosc.q-bok-ekran.in-dzial{display:flex}
  .q-rama .rail .q-bok-ekran:hover{background:var(--q-marka-blada);color:var(--q-napis)}
  /* aktywna pozycja: ciemny tekst + 3 px marki po lewej + tlo blade, ikona w kolorze marki (takze zwinieta) */
  .q-rama .rail .q-bok-ekran[aria-current="page"]{background:var(--q-marka-blada);color:var(--q-napis);font-weight:600;box-shadow:inset var(--q-kreska) 0 0 var(--q-marka)}
  .q-rama .rail .q-bok-ekran .q-ik{width:16px;height:16px;min-width:16px;stroke-width:1.6;color:var(--q-ikona)}
  .q-rama .rail .q-bok-ekran[aria-current="page"] .q-ik{color:var(--q-marka)}
  .q-rama .rail .q-bok-napis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .q-rama .rail .q-bok-zwin{font-family:inherit}
  /* LICZNIKI (U22): neutralny szary, Amber = czeka na Ciebie, granat = nowe od ostatniej wizyty; zero sie nie pokazuje; jeden na ekran */
  .q-rama .rail .nav-count,.q-rama .rail .tab-count,.q-rama .q-dzial .nav-count{display:none;margin:0 0 0 auto;min-width:18px;height:17px;padding:0 5px;border-radius:9px;
    font-size:10.5px;font-weight:700;line-height:17px;text-align:center;background:var(--q-panel-szary);color:var(--q-napis);box-shadow:inset 0 0 0 1px var(--q-ramka)}
  .q-rama .rail .nav-count.on,.q-rama .rail .tab-count.on,.q-rama .q-dzial .nav-count.on{display:inline-flex;align-items:center;justify-content:center}
  .q-rama .q-dzial .nav-count{margin-left:8px}
  .q-rama .rail .q-licznik-drugi{display:none!important}
  .q-rama .nav-count.act,.q-rama .tab-count.act{background:var(--q-licznik-czeka);color:var(--q-na-ciemnym);box-shadow:none}   /* N4b-N: Tasks / RFIs (licznik ekranu) tak samo jak licznik grupy */
  .q-rama .nav-count.nowe,.q-rama .tab-count.nowe{background:var(--q-licznik-nowe);color:var(--q-na-ciemnym);box-shadow:none}
  /* ZWINIETY (48 px): ikony, nazwa w dymku (title), licznik na ikonie, aktywna pozycja zostaje widoczna */
  body.q-rama.q-zwiniety .rail{width:var(--q-szer-paska-zwinietego)}
  .q-zwiniety .rail .tab-item.q-bok-ekran,.q-zwiniety .rail .nav-gosc.q-bok-ekran{justify-content:center;padding-left:0;padding-right:0;gap:0}
  .q-zwiniety .rail .nav-count,.q-zwiniety .rail .tab-count{position:absolute;top:1px;left:26px;margin:0;min-width:15px;height:14px;padding:0 3px;font-size:9.5px;line-height:14px}
  .q-zwiniety .rail .nav-gosc-lista{display:none!important}
  /* TRESC obok paska; naglowek ekranu (projekt + fakty) jak .q-ekran-glowa */
  body.q-rama .main{margin:var(--q-odstep) 0 40px var(--q-szer-paska);padding:0 14px 20px;max-width:none}
  body.q-rama.q-zwiniety .main{margin-left:var(--q-szer-paska-zwinietego)}
  .q-rama .main > .tb-projekt{background:transparent;border:0;padding:2px 2px 0;margin:0 0 var(--q-odstep)}
  .q-rama .main > .tb-projekt h1.page{font-size:24px;font-weight:700;color:var(--q-tytul);letter-spacing:0}
  /* PASEK STANU */
  .q-rama .q-stan{position:fixed;left:0;right:0;bottom:0;z-index:180;box-sizing:border-box;height:var(--q-wys-stanu);min-height:0;font-family:var(--q-kroj)}
  .q-stan-projekt #ps-name{font-weight:600;color:var(--q-napis)}
  .q-stan-projekt #ps-name.ps-pusty{font-weight:400;font-style:italic;color:var(--q-podpis-napis)}
  .q-stan-projekt #ps-ref{color:var(--q-podpis-napis)}
  .q-stan-prawa .q-stan-projekt span + span::before{content:none}   /* nazwa i numer projektu to jedna pozycja paska stanu */
  .q-stan-projekt{white-space:nowrap}
  .q-rama #srv-pill{bottom:calc(var(--q-wys-stanu) + 10px)!important}
  /* N4b-L: pasek stanu w JEDNEJ linii - nazwa i kod projektu sie nie zawijaja, nadmiar skracany od lewej strony paska */
  .q-rama .q-stan{white-space:nowrap;overflow:hidden}
  .q-rama .q-stan-prawa{min-width:0;flex-wrap:nowrap}
  .q-rama .q-stan #ps-name,.q-rama .q-stan #ps-ref:not([style*="none"]){display:inline!important;white-space:nowrap}   /* psSetName wpisuje numerowi display:block (dawny lewy pasek) */
  /* N4b-D: SKROTY (Workspace, Reports) i Activity wygladaja jak ekrany paska */
  .q-rama .rail .q-skrot.q-bok-ekran,.q-rama .rail .q-bok-akcja.q-bok-ekran{display:none;position:relative;align-items:center;gap:12px;width:100%;height:auto;min-height:30px;margin:0;
    padding:3px 10px 3px 16px;border:0;border-radius:0;background:transparent;color:var(--q-napis);font:inherit;font-size:13px;font-weight:400;text-align:left;white-space:nowrap;cursor:pointer}
  .q-rama .rail .q-skrot.q-bok-ekran.in-dzial,.q-rama .rail .q-bok-akcja.q-bok-ekran.in-dzial{display:flex}
  .q-zwiniety .rail .q-skrot.q-bok-ekran,.q-zwiniety .rail .q-bok-akcja.q-bok-ekran{justify-content:center;padding-left:0;padding-right:0;gap:0}
  /* WORKSPACE: tytul z przyciskiem Edit, w edycji wybor ekranu i powrot do domyslnych; krzyzyk przy skrocie */
  .q-rama .rail .q-bok-workspace{border-bottom:1px solid var(--q-separator)}
  .q-rama .rail .q-bok-tytul-ws{display:flex;align-items:center;gap:6px;min-height:18px}
  .q-rama .rail .q-bok-tytul-napis{flex:1 1 auto}
  .q-bok-edytuj{border:0;background:none;padding:0 2px;font:inherit;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--q-link);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .q-ws-edycja{display:flex;flex-direction:column;gap:6px;padding:6px 14px 8px}
  .q-ws-etykieta{font-size:11px;color:var(--q-podpis-napis)}
  .q-ws-edycja select{width:100%;height:28px;font:inherit;font-size:12px}
  .q-ws-domyslne{align-self:flex-start;border:1px solid var(--q-ramka);border-radius:var(--q-promien);background:var(--q-bialy);color:var(--q-granat);font:inherit;font-size:12px;padding:3px 8px;cursor:pointer}
  .q-ws-usun{margin-left:6px;font-size:15px;line-height:1;color:var(--q-podpis-napis)}
  .q-ws-edytowany .q-skrot:hover .q-ws-usun{color:var(--q-usun)}
  .q-zwiniety .rail .q-ws-edycja{display:none}
  /* N4c-A (08.10): INBOX - pozycja na gorze Workspace, panel jak poczta obok lewego paska; nieprzeczytane pogrubione; "Waiting for you" = Amber */
  .q-rama .rail .q-inbox-poz[aria-expanded="true"]{background:var(--q-marka-blada);font-weight:600;box-shadow:inset var(--q-kreska) 0 0 var(--q-marka)}
  .q-rama .rail .q-inbox-poz[aria-expanded="true"] .q-ik{color:var(--q-marka)}
  .q-inbox-panel{position:fixed;left:calc(var(--q-szer-paska) + 6px);top:calc(var(--q-rama-gora) + 6px);width:440px;max-width:calc(100vw - 16px);max-height:calc(100vh - var(--q-rama-gora) - var(--q-wys-stanu) - 16px);
    overflow:auto;background:var(--q-bialy);border:1px solid var(--q-ramka);border-radius:var(--q-promien);box-shadow:0 12px 32px var(--q-cien-menu);z-index:400;font-family:var(--q-kroj)}
  .q-inbox-panel[hidden]{display:none}
  body.q-zwiniety .q-inbox-panel{left:calc(var(--q-szer-paska-zwinietego) + 6px)}
  .q-inbox-glowa{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--q-ramka);position:sticky;top:0;background:var(--q-bialy);color:var(--q-napis);font-size:14px}
  .q-inbox-wszystkie{margin-left:auto;border:1px solid var(--q-ramka);border-radius:var(--q-promien);background:var(--q-bialy);color:var(--q-granat);font:inherit;font-size:12px;padding:3px 9px;cursor:pointer}
  .q-inbox-wszystkie:hover{background:var(--q-panel-szary)}
  .q-inbox-wszystkie:disabled{color:var(--q-podpis-napis);cursor:default;background:var(--q-bialy)}
  .q-inbox-zamknij{border:0;background:none;font:inherit;font-size:20px;line-height:1;color:var(--q-podpis-napis);cursor:pointer;padding:0 2px}
  .q-inbox-wiersz{display:grid;grid-template-columns:1fr auto;gap:2px 10px;width:100%;text-align:left;padding:9px 14px;border:0;border-bottom:1px solid var(--q-panel-szary);
    background:none;font:inherit;color:var(--q-napis);cursor:pointer}
  .q-inbox-wiersz:hover{background:var(--q-marka-blada)}
  .q-inbox-kto{font-size:12.5px;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .q-inbox-kiedy{font-size:11px;color:var(--q-podpis-napis);white-space:nowrap}
  .q-inbox-co{grid-column:1/-1;font-size:12.5px;line-height:1.35;color:var(--q-podpis-napis);word-break:break-word}
  .q-inbox-nowy .q-inbox-kto,.q-inbox-nowy .q-inbox-co{font-weight:700;color:var(--q-napis)}
  .q-inbox-czeka{grid-column:1/-1;justify-self:start;font-size:10.5px;font-weight:700;color:var(--q-na-ciemnym);background:var(--q-licznik-czeka);border-radius:9px;padding:1px 8px}
  .q-inbox-pusto{margin:0;padding:16px 14px;color:var(--q-podpis-napis);font-size:12.5px}
  .q-inbox-wskaz{box-shadow:0 0 0 3px var(--q-marka)!important}
  @media (max-width:767px){ .q-inbox-panel,body.q-zwiniety .q-inbox-panel{left:8px;right:8px;width:auto;top:calc(var(--q-rama-gora) + 6px)} }
  /* NAGLOWEK DZIALU: zwiniety dzial = jedna linia z nazwa, licznikiem i strzalka; aktywny dzial - naglowek bez strzalki. Ta sama wysokosc
     w pasku rozwinietym i zwinietym (ikona dzialu zamiast napisu) - pozycje nie przesuwaja sie w pionie. */
  .q-rama .rail .q-bok-dzial{border-bottom:1px solid var(--q-separator)}
  .q-bok-dzial-glowa{display:flex;align-items:center;gap:12px;width:100%;min-height:30px;margin:0;padding:3px 10px 3px 16px;border:0;background:none;cursor:pointer;
    font:inherit;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--q-podpis-napis);text-align:left;white-space:nowrap}
  .q-bok-dzial-glowa:hover{background:var(--q-marka-blada);color:var(--q-napis)}
  .q-bok-dzial-glowa .q-ik{width:16px;height:16px;min-width:16px;color:var(--q-ikona)}
  .q-bok-strzalka{width:7px;height:7px;margin-left:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);flex:none}
  .q-bok-dzial.q-otwarty .q-bok-strzalka{transform:rotate(45deg)}
  .q-bok-dzial.q-aktywny .q-bok-dzial-glowa{cursor:default;color:var(--q-napis)}
  .q-bok-dzial.q-aktywny .q-bok-dzial-glowa:hover{background:none}
  .q-bok-dzial.q-aktywny .q-bok-strzalka{visibility:hidden}
  .q-bok-dzial-glowa .nav-count{margin-left:auto}
  .q-rama .rail .q-bok-dzial.q-otwarty .q-bok-dzial-glowa .nav-count{display:none!important}   /* otwarty dzial: liczniki stoja na jego ekranach, nie drugi raz na naglowku */
  .q-bok-dzial-glowa .nav-count.on + .q-bok-strzalka{margin-left:8px}
  .q-zwiniety .rail .q-bok-dzial-glowa{justify-content:center;padding-left:0;padding-right:0;gap:0}
  .q-zwiniety .rail .q-bok-strzalka{display:none}
  .q-zwiniety .rail .q-bok-dzial-glowa .nav-count{position:absolute;margin:0 0 0 26px;min-width:15px;height:14px;padding:0 3px;font-size:9.5px;line-height:14px}
  /* GWIAZDKA przy nazwie ekranu w sciezce (Workspace) */
  .q-gwiazdka{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:6px;padding:0;border:0;background:none;color:var(--q-na-ciemnym);cursor:pointer;opacity:.8}
  .q-gwiazdka:hover{opacity:1}
  .q-gwiazdka .q-ik{width:16px;height:16px}
  .q-gwiazdka[aria-pressed="true"]{color:var(--q-marka);opacity:1}
  .q-gwiazdka[aria-pressed="true"] .q-ik{fill:currentColor}
  /* ESTIMATE (N4b-C): pasek narzedzi przeszedl na wstazke - w tresci zostaje Go to row (i pasek ostrzezen pod nim) */
  body.q-rama #panel-boq #boq-narzedzia.qe-toolbar > .qe-sep,body.q-rama #panel-boq #boq-narzedzia.qe-toolbar [data-qe-layout="more"],
  body.q-rama #panel-boq #boq-narzedzia.qe-toolbar [data-qe-layout="print"],body.q-rama #panel-boq #boq-narzedzia.qe-toolbar [data-qe-layout="send"]{display:none!important}   /* dwa id: wygrywa z regula ikon paska w qs-estimate-grid.css */
  body.q-rama #panel-boq .qe-toolbar .qe-gr:not(:has(> :not(.q-w-wstazce))){display:none}
  /* N8-B (08.10.2026, wlasciciel, wzor QScope Construction Dashboard (2).png): LEWY PANEL - wszystkie sekcje naraz, bez zwijania i strzalek.
     Jeden styl naglowka sekcji: male szare wersaliki 11 px / 600 / #566A7C (wlasciciel 08.10; bylo #607487 - kontrast), cienka kreska #C9D2DA nad sekcja, bez ikony. Pozycje: ikona + nazwa,
     wiersz ~28 px, nazwa bez obcinania. Aktywna pozycja: 3 px pomaranczowej kreski z lewej + #FFF2E8 (jedna naraz, takze w Workspace).
     Zakladka u gory podswietla swoja sekcje (naglowek ciemny). Na dole panelu nazwa wersji. */
  .q-rama .rail .q-bok-workspace{border-bottom:0}
  .q-rama .rail .q-bok-dzial{border-bottom:0;border-top:1px solid var(--q-ramka);padding:2px 0 4px}
  .q-rama .rail .q-bok-dzial > .q-bok-grupa{padding:0 0 2px}
  /* D5 (runda D 11.10, wlasciciel): nazwy sekcji zlewaly sie z pozycjami (male szare wersaliki #566A7C) - teraz granat #17354D (najciemniejszy
     tekst aplikacji, nie czysta czern), 700, rozmiar i wersaliki bez zmian; wiecej odstepu NAD naglowkiem (12 px) niz pod nim (4 px). Pozycje bez zmian. */
  .q-rama .rail .q-bok-dzial-glowa,.q-rama .rail .q-bok-tytul-ws{display:flex;align-items:center;gap:6px;min-height:30px;box-sizing:border-box;margin:0;padding:12px 14px 4px;border:0;background:none;cursor:default;
    font-size:11px;font-weight:700;letter-spacing:.5px;line-height:14px;text-transform:uppercase;color:var(--q-granat)}
  .q-rama .rail .q-bok-dzial-glowa:hover{background:none;color:var(--q-granat)}
  .q-rama .rail .q-bok-tytul{color:var(--q-granat);font-weight:700}   /* N8-B + D5: jeden kolor naglowkow w panelu (Workspace, sekcje, Do goscia) - granat #17354D, 700 (wlasciciel 11.10) */
  .q-rama .rail .q-bok-dzial-glowa .q-ik,.q-rama .rail .q-bok-dzial-glowa .q-bok-strzalka,.q-rama .rail .q-bok-dzial-glowa .nav-count{display:none!important}
  .q-rama .rail .q-bok-dzial-glowa .q-bok-napis{overflow:visible}
  .q-rama .rail .q-bok-dzial.q-aktywny .q-bok-dzial-glowa,.q-rama .rail .q-bok-dzial.q-aktywny .q-bok-dzial-glowa:hover{color:var(--q-napis);font-weight:700}
  .q-rama .rail .tab-item.q-bok-ekran,.q-rama .rail .nav-gosc.q-bok-ekran,.q-rama .rail .q-skrot.q-bok-ekran,.q-rama .rail .q-bok-akcja.q-bok-ekran{min-height:28px;padding:3px 8px 3px 14px;gap:10px}
  .q-rama .rail .q-bok-napis{overflow:visible;text-overflow:clip;white-space:nowrap}
  /* N8-Q1: aktywny skrot (Workspace, Reports) wyglada jak aktywny ekran - tlo #FFF2E8 + 3 px kreski (regula skrotu wyzej zerowala tlo i wage) */
  .q-rama .rail .q-skrot.q-bok-ekran[aria-current="page"]{background:var(--q-marka-blada);font-weight:600;box-shadow:inset var(--q-kreska) 0 0 var(--q-marka)}
  .q-rama .rail .q-skrot.q-bok-ekran[aria-current="page"] .q-ik{color:var(--q-marka)}
  /* N8-Q1: Inbox i Approvals to okna, nie ekrany - nie zostaja podswietlone (aktywny jest otwarty ekran) */
  .q-rama .rail .q-inbox-poz[aria-expanded="true"]{background:transparent;font-weight:inherit;box-shadow:none}
  .q-rama .rail .q-inbox-poz[aria-expanded="true"] .q-ik{color:var(--q-ikona)}
  .q-bok-wersja{flex:none;padding:2px 16px 8px;font-size:11px;line-height:14px;color:var(--q-podpis-napis);white-space:nowrap}
  .q-zwiniety .rail .q-bok-dzial-glowa,.q-zwiniety .rail .q-bok-tytul-ws{color:transparent;overflow:hidden;white-space:nowrap}   /* zwiniety: naglowek zostaje (ta sama wysokosc - pozycje nie skacza, N4b-D), napis niewidoczny */
  .q-zwiniety .rail .q-bok-tytul-ws *,.q-zwiniety .rail .q-bok-dzial-glowa *{visibility:hidden}   /* napis niewidoczny tez dla pomiaru kontrastu */
  .q-zwiniety .rail .q-bok-wersja{visibility:hidden}
}
/* OKNO 761-1100 px: pasek gorny miesci sie - ikony bez podpisow (nazwa w dymku title), szukajka wezsza, sciezka skracana */
@media screen and (max-width:1100px){
  .q-rama .tb-konto{gap:14px}
  .q-rama .tb-konto .tr-btn span,.q-rama .tb-konto .topbar-right .q-gora-napis{display:none}
  .q-rama .tb-konto .topbar-right{gap:12px;flex:none}
  .q-rama .tb-sciezka{flex:1 1 auto;min-width:0;overflow:hidden}
  .q-rama .q-szukaj{width:170px}
}
/* TELEFON 390: lewy pasek schowany calkiem (otwiera go Menu), dzialy przewijane w poziomie, wstazka w jednym rzedzie z More */
@media screen and (max-width:760px){
  :root{--q-rama-gora:calc(46px + var(--q-wys-zakladek) + 62px + var(--q-wys-podgladu, 0px))}
  body.q-rama{padding-bottom:56px!important}
  /* pasek gorny MIESCI SIE w 390 (jak we wzorniku): logo, nazwa projektu skracana, ikony bez napisow, Menu */
  .q-rama .tb-konto{height:46px;gap:8px;padding:0 8px;max-width:100vw;overflow:hidden}
  .q-rama .tb-konto .q-logo{font-size:22px;flex:none}
  .q-rama .tb-sciezka{flex:1 1 auto;min-width:0;overflow:hidden}
  .q-rama .tb-sciezka .tb-crumb,.q-rama .tb-sciezka .tb-sep,.q-rama .tb-sciezka .tb-ekran{display:none}
  .q-rama .tb-sciezka .ps-btn{max-width:100%}
  .q-rama .tb-konto .topbar-right{gap:10px;flex:none;min-width:0}
  .q-rama .tb-konto .tr-btn span,.q-rama .tb-konto .topbar-right .q-gora-napis{display:none}
  .q-rama .tb-konto .tr-btn{padding:0;margin:0}
  .q-rama .q-wstazka{height:62px;overflow-x:clip}
  .q-rama .q-grupa-podpis{display:none}   /* N4b-C: telefon - jeden rzad akcji z More, bez podpisow grup */
  .q-rama .q-dzialy{max-width:100vw}
  .q-rama .rail{display:none;bottom:0;width:min(280px,86vw);z-index:330;box-shadow:0 8px 24px var(--q-cien-menu)}
  body.q-rama.q-menu-otwarte .rail,body.q-rama.q-menu-otwarte.q-zwiniety .rail{display:flex;width:min(280px,86vw)}
  .q-rama.q-zwiniety .rail .q-bok-napis{position:static;width:auto;height:auto;overflow:hidden;clip:auto}
  .q-rama.q-zwiniety .rail .q-bok-tytul{display:block}
  .q-rama.q-zwiniety .rail .q-bok-dzial-glowa,.q-rama.q-zwiniety .rail .q-bok-tytul-ws{display:flex;color:var(--q-granat)}   /* N8-B: menu telefonu zawsze pelne - naglowki sekcji widac */
  .q-rama.q-zwiniety .rail .q-bok-dzial-glowa *,.q-rama.q-zwiniety .rail .q-bok-tytul-ws *{visibility:visible}
  .q-rama.q-zwiniety .rail .q-bok-wersja{visibility:visible}
  .q-rama.q-zwiniety .rail .tab-item.q-bok-ekran,.q-rama.q-zwiniety .rail .nav-gosc.q-bok-ekran{justify-content:flex-start;padding:3px 10px 3px 16px;gap:12px}
  .q-rama.q-zwiniety .rail .nav-count,.q-rama.q-zwiniety .rail .tab-count{position:static;margin-left:auto;min-width:18px;height:17px;font-size:10.5px;line-height:17px}
  body.q-rama .main,body.q-rama.q-zwiniety .main{margin-left:0;padding:0 10px 16px}
  .q-rama .q-stan{height:var(--q-wys-stanu);min-height:0;flex-wrap:nowrap;gap:8px}   /* N4b-L: jedna linia takze na telefonie - projekt i stan zapisu */
  .q-rama .q-stan #q-stan-gotowe,.q-rama .q-stan #q-stan-uzytkownik{display:none}
  .q-rama .q-stan .q-stan-prawa{margin-left:0;flex-wrap:nowrap;overflow:hidden}
}

/* N4b-J/L/M (08.10.2026) */
/* N4b-J: DOSTEPNY DYMEK przy "?" (pulpit a/b: zastrzezenie terminow) - jedno zdanie na ekranie, pelny tekst w dymku po najechaniu,
   ognisku klawiatury i kliknieciu; Escape chowa (q-dymek-schowany). Dymek stoi pod cala nota (rodzic z position:relative), nie wychodzi za karte. */
.q-dymek-pud{display:inline}
.q-dymek-pud .q-dymek-przycisk{vertical-align:1px;margin-left:2px}
.q-dymek{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;padding:9px 12px;background:var(--q-bialy);color:var(--q-napis);
  border:1px solid var(--q-ramka);border-radius:var(--q-promien);box-shadow:0 8px 24px var(--q-cien-menu);font-size:12.5px;line-height:1.45;font-weight:400;text-align:left}
.q-dymek-pud:hover .q-dymek,.q-dymek-pud:focus-within .q-dymek,.q-dymek-pud.q-dymek-otwarty .q-dymek{display:block}
.q-dymek-pud.q-dymek-schowany .q-dymek{display:none}
#kok-host.kok-d .kok-d-termin-nota{position:relative}
/* N4b-L -> N8-S (08.10, wlasciciel): na waskim ekranie etykiety osi tez w JEDNYM rzedzie pod kropkami (kokpit.css); kropki blizej ~120 px
   = tabela czterech kolumn (kokpit.js). Schodki (kazda etykieta w swoim rzedzie, --i) zdjete. */
/* N4b-G/H/K (08.10.2026) */
/* N4b-G: OKNO ZGLOSZENIA (Contact support) I PANEL POMOCY (Help) z header-topright.js. Do 08.10 wyglad okna stal w zmiennych --hdr-*,
   ktore definiuje tylko ZAMONTOWANY naglowek - w trackerze (naglowka nie montuje) okno bylo przezroczyste, bez ramki i przyciemnienia.
   Teraz: biale okno z ramka na przyciemnionym tle; Send = glowny (q-btn-glowny), Cancel i Contact support = narzedzie (q-btn). */
:root{
  --q-przyciemnienie:rgba(23,40,58,.5);
  --q-cien-okna:rgba(23,40,58,.28);
}
.qs-okno-tlo{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;background:var(--q-przyciemnienie)}
.qs-okno-pomocy{background:var(--q-bialy);border:1px solid var(--q-ramka);border-radius:var(--q-promien);box-shadow:0 24px 60px var(--q-cien-okna);width:100%;max-width:480px;max-height:calc(100vh - 40px);overflow:auto;padding:20px 22px;box-sizing:border-box;font-family:inherit;font-size:var(--q-pismo);color:var(--q-napis);text-align:left}
.qs-op-glowa{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.qs-op-tyt{font-size:16px;font-weight:700;color:var(--q-tytul)}
.qs-op-pod{font-size:12.5px;color:var(--q-podpis-napis);margin-top:2px}
.qs-op-pod b{color:var(--q-napis)}
.qs-op-x{background:none;border:0;font-size:22px;line-height:1;color:var(--q-podpis-napis);cursor:pointer;padding:0 2px;flex:none}
.qs-op-x:hover{color:var(--q-napis)}
.qs-op-adres{margin-top:14px;font-size:12.5px;color:var(--q-podpis-napis)}
.qs-op-adres b{color:var(--q-napis)}
.qs-op-adres b.qs-op-uwaga{color:var(--q-status-czeka-napis)}
textarea.q-pole.qs-op-pole{display:block;margin-top:8px;min-height:120px;font:inherit;font-size:13px;line-height:1.5}
.qs-op-przyciski{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.qs-op-msg{margin-top:14px;padding:10px 12px;font-size:13px;line-height:1.55;background:var(--q-bialy);border:1px solid var(--q-ramka);border-left-width:3px;color:var(--q-napis)}
.qs-op-msg-zle{border-left-color:var(--q-status-zle)}
.qs-op-msg-dobrze{border-left-color:var(--q-status-dobrze)}
.qs-op-mail{color:var(--q-link);font-weight:700}
.qs-pomoc-panel{position:fixed;z-index:9000;background:var(--q-bialy);border:1px solid var(--q-ramka);border-radius:var(--q-promien);box-shadow:0 12px 32px var(--q-cien-menu);max-height:calc(100vh - 80px);overflow:auto;padding:16px 18px;box-sizing:border-box;font-size:var(--q-pismo);color:var(--q-napis);text-align:left}
.qs-pp-tresc{margin-top:10px;border-top:1px solid var(--q-linia-siatki)}
.qs-pp-tab{width:100%;border-collapse:collapse}
.qs-pp-tab td{vertical-align:top;padding:7px 0;font-size:12.5px;line-height:1.5;border-bottom:1px solid var(--q-linia-siatki)}
.qs-pp-tab td.k{width:34%;padding-right:10px;font-weight:700;color:var(--q-napis)}
.qs-pp-tab td.v{color:var(--q-podpis-napis)}
.qs-pp-kontakt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.qs-pp-kontakt-tyt{font-weight:700;color:var(--q-napis)}
/* N4b-G, przeglad wszystkich okien: kazde okno aplikacji z ramka Border. Do 08.10 bez ramki (biale pole bez krawedzi na przyciemnieniu):
   wysylka pliku i nowe pytanie goscia (.wys-okno), "Directed to" (#rcp-ov), okresy platnosci (.okr-card), zdjecie z projektu (#pp-ov),
   proba i warunek transzy w facility (.proba-karta, .dw-karta). */
.wys-okno,#rcp-ov>div,.okr-card,#pp-ov>div,.proba-karta,.dw-karta{border:1px solid var(--q-ramka)}
/* N8-E (08.10.2026, wlasciciel): WSZYSTKIE OKNA NA SRODKU - jedno okno aplikacji. .q-okno-tlo = nakladka (przyciemnienie), .q-okno = okno na
   srodku widoku (styl jak Contact support N4b-G: biale, ramka Border, cien okna). Zachowanie stawia window.qOkno (header-topright.js):
   Escape i klik w nakladke zamykaja (okno z niezapisanymi danymi najpierw pyta), fokus w oknie, Tab nie ucieka. Nakladka moze byc rodzicem
   okna albo jego sasiadem (okna zastane w swoim miejscu drzewa, np. #boq-wysylka w #panel-boq). Telefon: okno na cala szerokosc, 12 px marginesu. */
.q-okno-tlo{position:fixed;inset:0;z-index:940;background:var(--q-przyciemnienie)}
.q-okno-tlo[hidden],.q-okno[hidden]{display:none!important}
.q-okno{position:fixed;inset:0;z-index:950;margin:auto;height:fit-content;max-height:calc(100vh - 40px);width:min(var(--q-okno-szer,560px),calc(100vw - 40px));
  overflow:auto;box-sizing:border-box;background:var(--q-bialy);border:1px solid var(--q-ramka);border-radius:var(--q-promien);box-shadow:0 24px 60px var(--q-cien-okna);
  padding:18px 20px 20px;font-size:var(--q-pismo);color:var(--q-napis);text-align:left}
.q-okno-szerokie{--q-okno-szer:880px}
.q-okno:focus{outline:none}
#rap-okno.q-okno #rap-okno-x{border:0;background:none;font-weight:400}
.q-okno-glowa{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.q-okno-tyt{margin:0;font-size:16px;font-weight:700;color:var(--q-tytul)}
.q-okno-pod{font-size:12.5px;color:var(--q-podpis-napis);margin-top:2px}
.q-okno-x{background:none;border:0;font-size:22px;line-height:1;color:var(--q-podpis-napis);cursor:pointer;padding:0 2px;flex:none}
.q-okno-x:hover{color:var(--q-napis)}
.q-okno-krok{margin:14px 0 6px;font-size:13px;font-weight:700;color:var(--q-tytul)}
.q-okno-przyciski{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:14px}
.q-okno-powod{align-self:center;margin-right:auto;font-size:12px;font-weight:700;color:var(--q-napis)}
.q-okno-powod[hidden]{display:none}
/* okna zastane: szuflady z prawej (Estimate - arkusz estimate-*, raport - N4c-B), panel pomocy, Inbox i lista projektow przechodza na srodek
   (waga id wygrywa z ich dawnymi regulami polozenia) */
#panel-boq #boq-wysylka.q-okno,#rap-okno.q-okno,#qs-pomoc-panel.q-okno,#q-inbox-panel.q-okno,#ps-dd.q-okno{position:fixed;inset:0;margin:auto;height:fit-content;
  max-height:calc(100vh - 40px);width:min(var(--q-okno-szer,560px),calc(100vw - 40px));max-width:none;border:1px solid var(--q-ramka);border-radius:var(--q-promien);
  box-shadow:0 24px 60px var(--q-cien-okna);z-index:950}
#panel-boq #boq-wysylka.q-okno{--q-okno-szer:820px;padding:18px 20px 20px}
#rap-okno.q-okno{--q-okno-szer:640px;padding:18px 20px 20px}
#q-inbox-panel.q-okno{--q-okno-szer:960px;padding:0;display:flex;flex-direction:column;height:min(640px,calc(100vh - 40px))}
#ps-dd.q-okno{--q-okno-szer:560px;padding:16px 18px 14px}
@media (max-width:767px){
  .q-okno,#panel-boq #boq-wysylka.q-okno,#rap-okno.q-okno,#qs-pomoc-panel.q-okno,#q-inbox-panel.q-okno,#ps-dd.q-okno{width:calc(100vw - 24px);max-height:calc(100vh - 24px)}
  #q-inbox-panel.q-okno{height:calc(100vh - 24px)}
  .q-osoba{grid-template-columns:auto minmax(0,1fr)} .q-osoba-stan{grid-column:2;text-align:left}   /* N8-G: telefon - stan / powod pod nazwiskiem, nazwisko w jednej linii */
  body #qs-modal .qm-box,body #qs-okno .qo-box{width:calc(100% - 24px)}   /* potwierdzenia: ten sam margines 12 px co kazde okno */
}
/* N8-F: WYBOR PROJEKTU - wyszukiwarka u gory, lista: numer, nazwa, typ (Contractor / QS / IMS); aktywny zaznaczony; wskazany klawiatura */
#ps-dd.q-okno .ps-top{display:none}
#ps-dd.q-okno .ps-search{height:36px;font-size:13.5px;margin:0 0 8px}
#ps-dd.q-okno .ps-list{max-height:min(420px,calc(100vh - 220px))}
#ps-dd .ps-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--q-promien);text-decoration:none;color:var(--q-napis)}
#ps-dd .ps-item .ps-nr{flex:0 0 72px;font-size:12px;color:var(--q-podpis-napis);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ps-dd .ps-item .s{flex:1 1 auto;min-width:0}   /* dlugi adres lamie sie, nie ucina (runda 28.09, punkt 28c-d) */
#ps-dd .ps-item .ps-typ{flex:none;font-size:11px;font-weight:700;color:var(--q-napis);background:var(--q-panel-szary);border:1px solid var(--q-ramka);border-radius:9px;padding:1px 8px;white-space:nowrap}
#ps-dd .ps-item.cur{background:var(--q-marka-blada);box-shadow:inset 3px 0 0 var(--q-marka)}
#ps-dd .ps-item:hover{background:var(--q-panel-szary)}
#ps-dd .ps-item.ps-wskaz{outline:2px solid var(--q-marka);outline-offset:-2px}
#ps-dd .ps-stopka{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:11.5px;color:var(--q-podpis-napis)}
/* N8-G: KROK PEOPLE w oknie Send by link - lista osob Project team z polami do zaznaczenia, osoba bez prawa = szara z powodem */
.q-osoby{border:1px solid var(--q-ramka);border-radius:var(--q-promien);max-height:260px;overflow:auto}
.q-osoba{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:8px 10px;border-top:1px solid var(--q-linia-siatki);cursor:pointer}
.q-osoba:first-child{border-top:0}
.q-osoba input{margin:0;width:16px;height:16px}
.q-osoba-kto{font-weight:700;color:var(--q-napis);overflow-wrap:anywhere}
.q-osoba-rola{display:block;font-size:11.5px;font-weight:400;color:var(--q-podpis-napis)}
.q-osoba-stan{font-size:11px;color:var(--q-podpis-napis);text-align:right}
.q-osoba.q-osoba-bez{cursor:default}
.q-osoba.q-osoba-bez .q-osoba-kto{color:var(--q-podpis-napis);font-weight:400}
.q-osoba-inny{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.q-osoba-inny input[type=email]{flex:1 1 220px;min-width:0;height:32px;box-sizing:border-box}
.q-osoba-inny input[type=email][hidden]{display:none}
.q-wyslij-wynik{margin-top:10px;font-size:12.5px;line-height:1.5}
.q-wyslij-wynik .ok{color:var(--q-status-dobrze-napis);font-weight:700}
.q-wyslij-wynik .zle{color:var(--q-status-zle);font-weight:700}
.q-wyslij-link{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--q-linia-siatki);font-size:12px;color:var(--q-podpis-napis)}
.q-wyslij-link .q-pole{height:32px;box-sizing:border-box}
#boq-wysylka .bw-osoba .bw-zazn{width:16px;height:16px;margin:0 6px 0 0;vertical-align:-3px}
#boq-wysylka .bw-zapisz-wyslij{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px}
/* N8-J: INBOX JAK POCZTA (Outlook) - lista z lewej, podglad wybranej pozycji z prawej, przycisk Open; telefon: lista, pod nia podglad */
#q-inbox-panel.q-okno .q-inbox-glowa{position:static;padding:12px 16px}
#q-inbox-panel.q-okno .q-inbox-glowa b{font-size:16px;color:var(--q-tytul)}
.q-inbox-cialo{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);flex:1 1 auto;min-height:0}
.q-inbox-cialo .q-inbox-lista{overflow:auto;border-right:1px solid var(--q-ramka)}
.q-inbox-podglad{overflow:auto;padding:16px 18px;min-width:0}
.q-inbox-podglad h3{margin:0 0 2px;font-size:15px;color:var(--q-tytul)}
.q-inbox-pp-kto{font-size:12.5px;color:var(--q-podpis-napis)}
.q-inbox-pp-tresc{margin:14px 0;font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.q-inbox-wiersz.q-inbox-wybrany{background:var(--q-marka-blada);box-shadow:inset 3px 0 0 var(--q-marka)}
.q-inbox-firma{font-weight:400;color:var(--q-podpis-napis)}
@media (max-width:767px){ .q-inbox-cialo{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto} .q-inbox-cialo .q-inbox-lista{border-right:0;border-bottom:1px solid var(--q-ramka)} .q-inbox-podglad{max-height:38vh} }
/* N4b-H: NAGLOWKI TABEL NA EKRANACH - tlo Panel Grey (--q-naglowek-tabeli), napis Dark Text (nie granat). TYLKO ekran (@media screen):
   wydruki i okna dokumentow maja wlasne arkusze i nie zmieniaja sie. Dokument z linku (#dokument w viewdoc.php) rysuje sie jak wydruk
   (U26i) i zostaje. :not(#dokument *) daje selektorowi wage id - wygrywa z regulami ekranow (np. granat naglowka Estimate). */
@media screen{
  /* :not(#n4b-h#n4b-h) - takiego elementu nie ma, warunek zawsze prawdziwy; doklada wage dwoch id, bo reguly ekranow z id i klasami
     (np. #panel-certs .ci[id^="ci-"] table.wyc thead th{color:granat!important}) wygrywaly z waga jednego id */
  th:not(#dokument *):not(#n4b-h#n4b-h){background-color:var(--q-naglowek-tabeli)!important;color:var(--q-naglowek-napis)!important}   /* G (09.10): napis granatowy naglowka */
}
/* N4b-K: KWOTY NEUTRALNE (Dark Text): naglowek wyceny "net", wariacji, pigulka "certified so far", "Advance taken" w Estimate.
   Kolor przy kwocie tylko jako status (ujemna - .qs-k-ujemna). STATUS Z KROPKA: kropka w kolorze statusu (Green zatwierdzone /
   zaplacone, Amber czeka na reakcje, Red odrzucone), napis ciemny. */
.qs-k-kwota{color:var(--q-napis)}
.adv-notka{display:inline-block;font-size:9px;font-weight:400;margin-top:2px;padding:1px 7px;border-radius:8px;background:var(--q-marka-blada);color:var(--q-napis)}   /* R7 (R6-U6): jeden znacznik jasnopomaranczowy, bez pogrubienia; tylko ekran (druki bez zmian, D1) */
/* H Q1 (12.10): linia po omission w wycenie roboczej - "Omitted by VO-NN - capped at N%" (stan dokumentu, czerwien statusu jak omisja w Estimate) */
.omit-cap-nota{font-size:9px;font-weight:700;margin-top:2px;white-space:normal;max-width:150px;color:var(--q-status-zle)}
.omit-cap-nota .omit-cap-nr{white-space:nowrap}
/* I0b (runda I 12.10): poprzednia wycena ponad blokada - ostrzezenie bursztynowe (status: czeka na reakcje), pod napisem blokady */
.omit-cap-nota .omit-cap-ostrz{display:block;margin-top:2px;color:var(--q-status-czeka-napis)}
/* I0: w oknie "Add approved variations" omission z blokada linii - wiersz informacyjny, bez pola wyboru */
.qm-vo-poza-cap{cursor:default}
/* J (runda J 13.10): okno pisma platniczego (pay less / payment notice / default notice) - noticeFormularz / noticePokaz. Kolory tylko z palety:
   czerwien = termin minal (status zle), bursztyn = uwaga / czeka, granat i szarosci = neutralne. */
.nt-tlo{position:fixed;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;background:var(--q-przyciemnienie)}
.nt-pudlo{background:var(--q-bialy);border:1px solid var(--q-ramka);border-radius:12px;width:min(780px,92vw);padding:18px 20px;box-sizing:border-box}
.nt-glowa{margin-bottom:8px}
.nt-tytul{font-size:16px;font-weight:900;color:var(--q-tytul)}
.nt-pod{font-size:12px;color:var(--q-podpis-napis);margin-top:2px}
.nt-srodek{display:flex;flex-direction:column;gap:10px;padding:4px 2px}
.nt-terminy{font-size:12px;color:var(--q-napis)}
.nt-po-terminie{font-size:12px;font-weight:700;color:var(--q-status-zle)}
.nt-uwaga{font-size:12px;color:var(--q-status-czeka-napis)}
.nt-siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.nt-pole{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--q-napis)}
.nt-pole-szer{grid-column:1/-1}
.nt-etyk{font-weight:700;color:var(--q-podpis-napis)}
/* K (13.10): zrodlo kwoty notified (K-R14) i podstawa VAT przy kwocie (K-R10) - drobny opis pod / obok kwoty, bez nowych kolorow */
.nt-zrodlo{font-size:11px;font-weight:400;color:var(--q-podpis-napis)}
.nt-vat{font-size:11px;font-weight:400;color:var(--q-podpis-napis)}
.nt-sek{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--q-podpis-napis)}
.nt-potr-wiersz{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,1fr);gap:6px;margin-bottom:6px;align-items:end}   /* R21-B (T15): opis - powod - kwota, etykieta nad kazdym polem */
.nt-potr-pole .nt-etyk{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-maly{align-self:flex-start;font-size:11px}
.nt-suma{font-size:12px;color:var(--q-napis)}
/* L A5 (14.10): linia VAT (informacyjna) pod kwota pisma bez VAT - okno formularza i okno wystawionego pisma */
.nt-vat-info{font-size:12px;color:var(--q-podpis-napis)}
.nt-odczyt-vat span,.nt-odczyt-vat b{font-weight:400;color:var(--q-podpis-napis)}
.nt-stopka{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.nt-blad{flex:1;font-size:12px;font-weight:700;color:var(--q-status-zle)}
.nt-odczyt{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--q-napis)}
.nt-odczyt-w{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--q-linia-siatki);padding:4px 0}
.nt-odczyt-potr span{color:var(--q-podpis-napis)}
.nt-odczyt-tekst{white-space:pre-wrap;overflow-wrap:anywhere;padding-top:4px}
@media (max-width:767px){ .nt-potr-wiersz{grid-template-columns:minmax(0,1fr)} }
.adv-pigulka{background:transparent;color:inherit;border:0;padding:0;border-radius:0}   /* R7 (R6-U6): czesc jednego znacznika .adv-notka, bez osobnej szarej pigulki */
.badge.bg,.badge.bo,.badge.br{color:var(--q-napis)}
.badge.bg::before,.badge.bo::before,.badge.br::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px}
.badge.bg::before{background:var(--q-status-dobrze)}
.badge.bo::before{background:var(--q-status-czeka)}
.badge.br::before{background:var(--q-status-zle)}
/* R16 (R15-13): karta wyceny po terminie - "(passed)" z czerwona kropka w linii "Statutory dates" i termin obok statusu w naglowku karty */
.cert-termin-minal{color:var(--q-status-zle);font-weight:700;white-space:nowrap}
.cert-termin-kropka{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--q-status-zle);margin:0 4px 0 2px;vertical-align:1px}
.ci-po-terminie{font-size:11px;font-weight:700;color:var(--q-status-zle)}
.ci-po-terminie[hidden]{display:none}
/* R21b-Q (R21-T3): pod polem Status karty wyceny - "Status of the document: Submitted · Payment: Paid" (plakietka z wplat, zapisany status bez zmian) */
.cert-status-dok{font-size:11px;line-height:1.35;margin-top:4px;color:var(--q-podpis-napis)}
.cert-status-dok[hidden]{display:none}
/* R21b-Q: Settings przy formie RIBA - podpowiedz "Item K of your Contract Particulars" nad ostrzezeniem okresow */
.riba-item-k{font-size:11.5px;line-height:1.45;color:var(--q-podpis-napis);margin:0 0 10px}
.riba-item-k[hidden]{display:none}
/* R16-U4 (wlasciciel 22.10): LISTA POL WYBORU W OKNIE (qsConfirm "Add approved variations" klienta i suba; klasa q-okno-wybor dla kazdej takiej listy).
   Lista stala od krawedzi okna (margines 0, okno ma padding 22 px tylko w tekscie) - pole wyboru siedzialo na ramce. Teraz lista w paddingu okna,
   pole wyboru na lewej krawedzi tekstu okna, w pionie srodkiem do etykiety, klik w cala etykiete zaznacza (label). */
#qs-modal .qm-vo-wybor{margin:10px 22px 4px}
.q-okno-wybor:not(#r16-u4){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;padding:4px 0;cursor:pointer;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.q-okno-wybor > input[type="checkbox"]:not(#r16-u4){margin:0;width:16px;height:16px;justify-self:start}
#qs-modal .qm-vo-pozycja.qm-vo-poza-cap{display:block;padding:4px 0 4px 26px;cursor:default}
/* N4c-B (08.10.2026): okno "Send by link" raportu (rapOkno w tracker.html) - ta sama szuflada z prawej co wysylka kosztorysu (#boq-wysylka) */
#rap-okno{position:fixed;top:0;right:0;bottom:0;z-index:950;width:min(640px,100vw);margin:0;overflow-y:auto;box-sizing:border-box;
  padding:16px 18px 24px;background:var(--q-bialy);border:0;border-left:1px solid var(--q-ramka);box-shadow:-8px 0 24px var(--q-cien-menu)}
#rap-okno[hidden]{display:none}
#rap-okno .rap-okno-glowa{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
#rap-okno .rap-okno-glowa h3{margin:0;font-size:16px;color:var(--q-tytul)}
#rap-okno #rap-okno-x{background:var(--q-bialy);color:var(--q-napis);border:1px solid var(--q-ramka);font-weight:700;flex:none}
#rap-okno .rap-okno-opis{font-size:13px;color:var(--q-podpis-napis);margin:0 0 10px}
/* N8-P (08.10.2026, wlasciciel): DUZE OKNA MIESZCZA SIE NA EKRANIE - "Contract settings" i kazde okno z formularzem albo zakladkami.
   JEDNA REGULA: okno najwyzej 90vh, szerokosc do min(1200 px, 92vw), kolumna: glowa (z zakladkami) i stopka z przyciskami stoja,
   przewija sie TYLKO srodek (.q-okno-srodek, przewijanie nie przechodzi na strone). Zachowanie (tlo nie przewija sie, Escape zamyka,
   przy niezapisanych zmianach najpierw pyta) - header-topright.js (qOkno.duze); strony w ramce bez tego pliku (umowy.html,
   facility.html) - ta sama regula u siebie. Telefon: szerokosc jak kazde okno (12 px marginesu, N8-E). Zakladki w srodku okna
   (kosztorys: Build up rate, Project resources) przyklejone u gory srodka. Aktywna zakladka = zakladka aplikacji (N4b-B): jasne tlo,
   ciemna ramka 1 px, pogrubiony ciemny napis - bez granatowego bloku. */
.q-okno-duze{max-height:90vh!important;max-width:min(1200px,92vw)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;box-sizing:border-box}
.q-okno-duze[hidden]{display:none!important}
.q-okno-duze>*{flex:none}
.q-okno-duze>.q-okno-srodek{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain}
.q-okno-duze .q-okno-srodek>[role=tablist]{position:sticky;top:0;z-index:2;background:var(--q-bialy);box-shadow:0 -12px 0 var(--q-bialy)}
.q-okno-duze [role=tab]{background:var(--q-bialy);color:var(--q-napis);border:1px solid var(--q-ramka);font-weight:400}
.q-okno-duze [role=tab]:hover{background:var(--q-zakladka-najechanie)}
.q-okno-duze [role=tab][aria-selected=true]{background:var(--q-zakladka-aktywna);color:var(--q-napis);border-color:var(--q-napis);font-weight:700}
.q-okno-duze [role=tab] *{color:inherit}
@media (max-width:767px){ .q-okno-duze{max-width:calc(100vw - 24px)!important} }
/* N8-S (08.10.2026, wlasciciel): "Open ..." (pulpit, Inbox, What needs you, kalendarz) - qsDoRzeczy w tracker.html.
   Karta rzeczy: naglowek tuz pod paskami ramy (scroll-margin-top), podswietlenie ~2 s do bladej marki i z powrotem (kreska marki wokol karty);
   czwarty czlon sciezki (#tb-rzecz, styl tb-ekran) i link powrotu nad naglowkiem ekranu. */
.q-rzecz-wskaz{scroll-margin-top:calc(var(--q-rama-gora, 0px) + 12px);animation:q-rzecz-blysk 2s ease-out}
.q-rzecz-wskaz > .ci-head{animation:q-rzecz-blysk-tlo 2s ease-out}
@keyframes q-rzecz-blysk{0%,70%{box-shadow:0 0 0 2px var(--q-marka);background-color:var(--q-marka-blada)}}
@keyframes q-rzecz-blysk-tlo{0%,70%{background-color:var(--q-marka-blada)}}
.tb-sciezka .tb-rzecz{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
/* link powrotu: pasek przyklejony tuz pod rama (widac go po skoku do rzeczy, na kazdej szerokosci); naglowek rzeczy staje pod nim */
.q-powrot-pas{position:sticky;top:var(--q-rama-gora, 0px);z-index:150;height:34px;box-sizing:border-box;display:flex;align-items:center;margin:0 0 6px;background:var(--q-tlo-strony);border-bottom:1px solid var(--q-ramka)}
body:has(#q-powrot-pas:not([hidden])) .q-rzecz-wskaz{scroll-margin-top:calc(var(--q-rama-gora, 0px) + 34px + 12px)}
.q-powrot{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--q-link);text-decoration:none}
.q-powrot::before{content:"\2190";speak:never}   /* strzalka powrotu w arkuszu, nie w napisie (A16d) */
.q-powrot:hover,.q-powrot:focus-visible{text-decoration:underline;text-underline-offset:2px}

/* N10-E (08.10.2026, wlasciciel: "Mniej objasnien na ekranach"): POMOC EKRANU "?" - zdanie-instrukcja schodzi z ekranu do dymku
   przy naglowku (qs-pomoc.js). Przycisk = wzor .wz-pomoc (kolko "?"); znak rysuje arkusz, wiec tekst naglowka sie nie zmienia.
   Wieksze pole dotyku na telefonie (::after), bez nowych kolorow - tokeny palety. Gosc (body.readonly chowa przyciski tresci) "?" widzi. */
.q-pomoc-ekranu{position:relative;margin-left:8px;padding:0;vertical-align:1px;font-family:inherit;line-height:1;text-transform:none;letter-spacing:0}
.q-pomoc-ekranu::before{content:"?"}
.q-pomoc-ekranu::after{content:"";position:absolute;inset:-9px}
.q-pomoc-ekranu[aria-expanded="true"]{background:var(--wz-naglowek-tlo)}
.q-pomoc-ekranu:focus-visible{outline:2px solid var(--q-fokus);outline-offset:2px}
.q-pomoc-tresc[hidden]{display:none!important}
.q-pomoc-dymek{position:absolute;z-index:10050;box-sizing:border-box;width:max-content;max-width:min(380px,calc(100vw - 16px));padding:10px 12px;
  background:var(--q-bialy);color:var(--q-napis);border:1px solid var(--q-ramka);border-radius:var(--q-promien);box-shadow:0 8px 24px var(--q-cien-menu);
  font-size:12.5px;line-height:1.45;font-weight:400;text-align:left;text-transform:none;letter-spacing:0;white-space:normal}
.q-pomoc-dymek[hidden]{display:none}
.q-pomoc-dymek p{margin:0}
body.readonly .main button.wz-pomoc.q-pomoc-ekranu{display:inline-flex!important}
.wz-karta-glowa > .q-pomoc-ekranu,h2 > .q-pomoc-ekranu,h3 > .q-pomoc-ekranu{margin-right:auto}

/* ══ R1 (09.10.2026): ZGODY OSOBY - formularz w oknie zaproszenia i Permissions (qs-zgody.js), powod przy szarym wystawieniu ══════ */
.zg-lista{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.zg-wiersz{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;font-size:var(--q-pismo);color:var(--q-napis);cursor:pointer;line-height:1.4}
.zg-wiersz input{margin-top:2px}
.zg-szare{color:var(--q-nieaktywny);cursor:default}
.zg-powod{font-size:var(--q-pismo-male);color:var(--q-podpis-napis);flex-basis:100%;padding-left:24px}
.zg-limit{display:flex;flex-direction:column;gap:3px;padding:0 0 4px 24px;max-width:320px}
.zg-limit label{font-size:var(--q-pismo-male);color:var(--q-podpis-napis);font-weight:700}
.zg-limit .zg-powod{padding-left:0}
.zg-stala{margin:0;font-size:var(--q-pismo);color:var(--q-podpis-napis)}
.zg-blad{margin:4px 0 0;font-size:var(--q-pismo);font-weight:700;color:var(--q-status-zle);min-height:0}
.zg-blad:empty{display:none}
.zg-opis{font-size:var(--q-pismo-male);color:var(--q-podpis-napis);display:block;margin-top:2px}
.qs-zgoda-powod{font-size:var(--q-pismo-male);color:var(--q-status-czeka-napis);margin-top:3px;line-height:1.35}
/* R2 (09.10): Approvals - pasek oczekiwania na karcie i przycisk zgloszenia (tokeny palety, bez nowych kolorow) */
.qs-zatw{margin-top:6px;padding:6px 8px;border:1px solid var(--q-ramka);border-left:3px solid var(--q-status-czeka-napis);border-radius:var(--q-promien);font-size:var(--q-pismo-male);color:var(--q-napis);line-height:1.4}
.qs-zatw-przyc{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.qs-zatw-zglos{margin-top:4px}
.ppl-zgody-btn{margin-left:6px;padding:2px 9px;min-height:0;font-size:var(--q-pismo-male);vertical-align:middle}
/* ══ G (09.10.2026, wlasciciel 08.10 21:42: "KOLOR WRACA") - NAGLOWKI KART I TABEL W CALEJ APLIKACJI: tlo --q-naglowek-tlo #E6EEF5,
   napis --q-naglowek-napis #17354D (10,8:1, AA). Jeden token - kazdy ekran na nim (tracker: .wz-karta-glowa, .ci-head, tabele; Dashboard:
   kokpit.css --kok-naglowek-tlo; portfel i People: .q-panel-glowa; Tender, IMS, model revisions - wlasne naglowki wskazuja token).
   TYLKO EKRAN: w druku token wraca do Panel Grey, a napisy zmieniaja sie wylacznie w regulach @media screen - wydruki bez zmian
   (dokumenty wystawione maja wlasne arkusze bez zmiennych, obszar DOK w tracker.html nietkniety). Kolory znaczeniowe bez zmian. */
@media print{ :root{--q-naglowek-tlo:var(--q-panel-szary)} }
@media screen{
  .q-panel-glowa{background:var(--q-naglowek-tlo)}
  .q-panel-glowa .q-panel-tytul{color:var(--q-naglowek-napis)}
  .ci-head{background:var(--q-naglowek-tlo)}
}
/* ══ PRZEGLAD 09.10 (noc 10.10, polecenie wlasciciela A): pkt 7 LOGO, pkt 8 + 6 KAFLE RAPORTOW, pkt 4 PRZYCISKI DOCUMENTS ══════════════
   7: logo w pasku aplikacji ok. 22 px na kazdej szerokosci (znak skaluje sie w em); wysokosc paska bez zmian; strona www bez zmian.
   8 + 6: kafel Reports - Generate obrys i napis granatu, pogrubiony (glowna akcja kafla; wypelnienie zostaje dla JEDNEGO przycisku ekranu -
   KOLORY-ZNACZENIA i test P-1), Send by link szara ramka i zwykly napis (drugorzedny), tytul kafla
   na tle naglowkow G (#E6EEF5 / #17354D). 4: przyciski Documents / Plans / Photos (New folder, Standard categories) obrysem granatu -
   wspolna regula trackera dawala im szara ramke, nie wygladaly jak przyciski. Tylko ekran. */
.q-gora .q-logo:not(.q-logo-maly),.q-rama .tb-konto .q-logo{font-size:22px}
@media screen{
  #panel-docs .rap-kafel button.btn-blue:not(#prz-8#prz-8){background:var(--q-bialy)!important;color:var(--q-granat)!important;border:1.5px solid var(--q-granat)!important;font-weight:700!important}
  #panel-docs .rap-kafel button.btn-soft:not(#prz-8#prz-8){background:var(--q-bialy)!important;color:var(--q-granat)!important;border:1px solid var(--q-ramka)!important;font-weight:400!important}
  #panel-docs .rap-kafel > div:first-child{margin:-14px -14px 0;padding:8px 14px;border-radius:6px 6px 0 0;background:var(--q-naglowek-tlo);color:var(--q-naglowek-napis)!important}
  :is(#files-tools,#plans-tools,#photos-tools) button.btn-soft:not(#prz-4#prz-4){color:var(--q-granat)!important;border:1.5px solid var(--q-granat)!important}
}
/* ══ P12 (przeglad 09.10 pkt 12, wlasciciel 10.10): TABELA ESTIMATE - TRZY WYRAZNE POZIOMY NA EKRANIE. Wiersz kolumn (#E6EEF5) i pas sekcji
   (#EDF2F5) wygladaly prawie tak samo. Teraz: wiersz kolumn wyraznie ciemniejszy (--q-naglowek-tlo-estimate #D3E0EC, napis granat #17354D,
   pogrubiony - regula N8-D w estimate-2026-10-09a/qs-estimate-grid.css bierze tlo z --q-naglowek-tlo), pas sekcji jasny (--q-sekcja-tlo-estimate
   #F3F6F9 przez --grey, ktore bierze regula sekcji E10; granatowa kreska z lewej, nazwa i suma pogrubione bez zmian), pozycje biale.
   Zmienne nadpisane TYLKO w siatce Estimate (inne ekrany i token globalny bez zmian) i TYLKO na ekranie - wydruk ekranu, printBOQ
   i dokumenty maja dawne kolory. Zamrozony katalog estimate-2026-10-09a nietkniety. */
@media screen{
  #panel-boq .qe-grid-scroll .boq-dt{--q-naglowek-tlo:var(--q-naglowek-tlo-estimate)}
  #panel-boq .qe-grid-scroll .boq-dt tr.qe-section{--grey:var(--q-sekcja-tlo-estimate)}
}
/* ══ C12 (noc 10/11.10, wlasciciel: "niech wroca te kolory do qty i build rate"): komorki Qty i Rate POZYCJI Estimate znow kolorowe.
   Przed N4 6b: Qty #F9F9FF (lawenda), Rate #F0FDF4 (jasna zielen) - dzis oba zakazane (zero niebieskiego, zielen tylko status; KOLORY-ZNACZENIA).
   Teraz WLASNE zmienne siatki; F9 (wlasciciel 12.10): z powrotem oryginal - Qty #F9F9FF (lawenda), Rate #F0FDF4 (jasna zielen), wyjatek w KOLORY-ZNACZENIA.
   Napis #17283A na obu > 12:1. Sekcje, naglowki, Total i trafienia wyszukiwania bez zmian; kolumna kwoty biala. TYLKO ekran - wydruk
   ekranu i printBOQ bez zmian. Zamrozony katalog estimate-2026-10-09a nietkniety. Cofniecie: usunac ten blok i dwie zmienne. */
@media screen{
  #panel-boq .qe-grid-scroll .boq-dt tbody tr:not(.qe-heading):not(.qe-found):not(.qe-section):not(.qe-total):not(.qe-element-heading) td[data-qe-col="qty"]{background:var(--q-estimate-qty-tlo)!important}
  #panel-boq .qe-grid-scroll .boq-dt tbody tr:not(.qe-heading):not(.qe-found):not(.qe-section):not(.qe-total):not(.qe-element-heading) td[data-qe-col="rate"]{background:var(--q-estimate-rate-tlo)!important}
}
/* ══ F8 (wlasciciel 12.10): KARTA "OMITTED (CLIENT REMOVED)" W ESTIMATE > TOTALS - pelna karta w rzedzie Cost per m² / Estimate items /
   Items without a rate (ten sam wzor i odstepy, #qe-client-metrics), nie goly napis przyklejony pod Project total. Kolumny rzedu rosna z liczba
   widocznych kart (karta schowana display:none nie zostawia dziury). Wycieta praca to informacja, nie blad: etykieta jak sasiednie, kwota granat
   (bez #b91c1c - czerwien = zaleglosc / termin / kasowanie, KOLORY-ZNACZENIA). Zamrozony katalog estimate-2026-10-09a nietkniety. */
#panel-boq #qe-client-metrics{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
#panel-boq #qe-client-metrics #boq-c-omitd{color:var(--q-granat)}
/* ══ F10 (wlasciciel 12.10: "tak samo tutaj i + - byly kolory"): LEWA KOLUMNA ESTIMATE - ORYGINALNE KOLORY SPRZED N4 (d336647).
   "+" przy wierszu (.boq-ins): ramka 1px i znak w kolorze marki (pomarancz = marka, nie ostrzezenie), 900, tlo przezroczyste, WIDOCZNY ZAWSZE -
   zdjete ukrywanie opacity:0 przy (hover:hover) z reguly "g" N4 w zamrozonym katalogu estimate-2026-10-09a (nadpisanie tutaj, :not(#id) = waga).
   Najechanie: jasne tlo marki, znak w kolorze marki. Pasek sekcji: tlo #E6E6EA (--q-sekcja-tlo-estimate wyzej), bez granatowej kreski z lewej
   (w oryginale jej nie bylo; dodal ja N8-D). Przycisku "-" w tej kolumnie w oryginale nie bylo. Kropki uchwytu bez zmian. Tylko ekran. */
@media screen{
  #panel-boq .qe-grid-scroll .boq-uchwyt .boq-ins:not(#qs-plus-f10){opacity:1;border:1px solid var(--q-marka);color:var(--q-marka);background:none;font-weight:900}
  #panel-boq .qe-grid-scroll .boq-uchwyt .boq-ins:not(#qs-plus-f10):hover,#panel-boq .qe-grid-scroll .boq-uchwyt .boq-ins:not(#qs-plus-f10):focus{background:var(--q-marka-blada);color:var(--q-marka);opacity:1}
  #panel-boq .qe-grid-scroll .boq-dt tr.qe-section > td:first-child:not(#qs-sekcja-f10){border-left:0}
}
/* ══ F6 (12.10.2026, decyzja wlasciciela 11.10): PRZYCISKI NAWIGACJI W CALYM PROGRAMIE. Do dzis Back / Next kreatora Settings byly oba
   biale z cienka szara ramka i zlewaly sie z tlem. Teraz:
   - krok naprzod (Next, Done, Save, Insert, Apply, OK / Continue / Close w oknie pytania) = GLOWNY przycisk: marka #F47721, bialy napis,
     najazd #DC6518 - wyjatek kontrastu z 07.10, TE SAME klasy glownego przycisku (qs-glowny-zielony, q-btn-glowny);
   - krok wstecz / anuluj (Back, Previous, Cancel, Keep it, Keep editing, Close okna wysylki) = obrys granat #17354D 1,5 px, napis granat,
     tlo biale (klasa qs-obrys-granat; w oknach qsConfirm / qsAlert przycisk .cichy; Back kreatora Settings po id #wiz-back, zeby odcisk
     tresci kreatora z testu TR-2 zostal bez zmian; Cancel / Close okien wysylki .dw-anuluj i .wys-anuluj po klasie);
   - przyciski kasowania (btn-usun: czerwony napis i obrys) i przycisk Delete / Remove / Withdraw w potwierdzeniu kasowania (okno z klasa
     qm-kasuj / qo-kasuj) BEZ ZMIAN; formalne Send / Issue zostaja granatem. Tylko ekran - wydruki bez zmian.
   :not(#f6-*) podnosi specyficznosc ponad reguly stron (body .main button.btn ... !important, #qs-modal.qm-pytanie .qm-btn.cichy). */
@media screen{
  html body button.btn.qs-glowny-zielony:not(#f6-g):not(:disabled){background:var(--q-glowna-akcja)!important;color:var(--q-na-ciemnym)!important;border:1.5px solid var(--q-glowna-akcja)!important;font-weight:700!important}
  html body button.btn.qs-glowny-zielony:not(#f6-g):not(:disabled):hover{background:var(--q-glowna-akcja-najechanie)!important;border-color:var(--q-glowna-akcja-najechanie)!important}
  html body :is(button.btn,button.q-btn).qs-obrys-granat:not(#f6-w):not(:disabled),html body button:is(.dw-anuluj,.wys-anuluj,#wiz-back):not(#f6-w):not(:disabled){background:var(--q-bialy)!important;color:var(--q-granat)!important;border:1.5px solid var(--q-granat)!important;font-weight:700!important}
  html body :is(button.btn,button.q-btn).qs-obrys-granat:not(#f6-w):not(:disabled):hover,html body button:is(.dw-anuluj,.wys-anuluj,#wiz-back):not(#f6-w):not(:disabled):hover{background:var(--q-panel-szary)!important}
  html body #qs-modal .qm-btn.cta.q-btn-glowny:not(#f6-g),html body #qs-okno .qo-btn.cta.q-btn-glowny:not(#f6-g){background:var(--q-glowna-akcja);color:var(--q-na-ciemnym)}
  html body #qs-modal .qm-btn.cta.q-btn-glowny:not(#f6-g):hover,html body #qs-okno .qo-btn.cta.q-btn-glowny:not(#f6-g):hover{background:var(--q-glowna-akcja-najechanie)}
  html body #qs-modal .qm-btn.cichy:not(#f6-w),html body #qs-okno .qo-btn.cichy:not(#f6-w){background:var(--q-bialy);color:var(--q-granat);border:1.5px solid var(--q-granat)}
  html body #qs-modal .qm-btn.cichy:not(#f6-w):hover,html body #qs-okno .qo-btn.cichy:not(#f6-w):hover{background:var(--q-panel-szary)}
}
/* ══ R15-U12 (21.10.2026, decyzja wlasciciela 18:02): PRZYCISK USUWAJACY W OKNIE POTWIERDZENIA JEST CZERWONY ══════════════════════════════
   "Remove <imie>" w oknie wygladal na glowny przycisk (granat), a "Keep <imie>" na drugorzedny. Ostatni krok nieodwracalny = CZERWONE tlo
   (status zly palety, --q-usun #C9362C, bialy napis 5,2:1), Keep / Cancel bialy z ramka granat (blok F6). Jedna klasa q-usun-potw - nadaje ja
   okno (tracker _qmOpen i qs-okno.js) kazdemu potwierdzeniu usuwania (opcja {usun:true}, przycisk Delete / Remove / Withdraw / Discard albo
   pytanie "Delete ..."). W tabelach przycisk kasowania zostaje czerwonym obrysem (q-btn-usun). Tylko ekran. */
@media screen{
  html body :is(#qs-modal .qm-btn,#qs-okno .qo-btn).q-usun-potw:not(#r15u12):not(#r15u12b){background:var(--q-usun);color:var(--q-na-ciemnym);border:1.5px solid var(--q-usun)}
  html body :is(#qs-modal .qm-btn,#qs-okno .qo-btn).q-usun-potw:not(#r15u12):not(#r15u12b):hover{background:var(--q-usun);filter:brightness(.88)}
  html body :is(#qs-modal .qm-btn,#qs-okno .qo-btn).q-usun-potw:not(#r15u12):not(#r15u12b):focus-visible{outline:2px solid var(--q-granat);outline-offset:2px}
}
/* ══ U5 (wlasciciel 10.10): KARTA TOTALS W ESTIMATE - "Cost plan summary by section". Wiersze "Overheads & profit" i "TOTAL all sections
   (exc VAT)" mialy ten sam szary pasek co wiersze sekcji (regula tfoot w estimate-2026-10-09a/qs-estimate-grid.css: --q-wiersz-sumy).
   Teraz: O&P jasnoniebieski #E6EEF5 (--q-naglowek-tlo) z granatowym napisem #17354D; TOTAL granatowy pasek #17354D z bialym pogrubionym
   napisem, jak ciemne paski sum na stronach raportow. Wiersz TOTAL jest zawsze ostatni w tfoot, O&P (gdy jest) przed nim. Wyzsza
   specyficznosc (pseudoklasa) wygrywa z regula katalogu (tez !important). TYLKO ekran - wydruk ekranu i printBOQ bez zmian.
   Zamrozony katalog estimate-2026-10-09a nietkniety. */
@media screen{
  #panel-boq .qe-totals .boq-podsum tfoot tr:not(:last-child),#panel-boq .qe-totals .boq-podsum tfoot tr:not(:last-child)>td{background:var(--q-naglowek-tlo-estimate)!important;color:var(--q-granat)!important}   /* Adrian 10.10 runda B: #D3E0EC - #E6EEF5 prawie jak pas zebry #EDF2F5 */
  #panel-boq .qe-totals .boq-podsum tfoot tr:not(:last-child)>td *{color:var(--q-granat)!important}   /* szary opis "- N% of ..." na #D3E0EC mial 4,17 < 4,5 */
  #panel-boq .qe-totals .boq-podsum tfoot tr:last-child,#panel-boq .qe-totals .boq-podsum tfoot tr:last-child>td{background:var(--q-granat)!important;color:var(--q-na-ciemnym)!important;font-weight:700!important}
}
/* G15 (wlasciciel 12.10): dopisek "(omitted)" pod opisem linii w wycenie klienta (span .qv-omitted, stawia go zamrozony katalog
   valuation-2026-10-04a) znika z EKRANU - linia zostaje przekreslona, a "omitted" stoi w kolumnie This Val. Wydruk wyceny (printCert)
   takiego dopisku nie ma (zmierzone 12.10), wiec nic tam nie zmieniam. Wycena podwykonawcy dopisku pod opisem nie ma. */
@media screen{
  .qv-omitted{display:none}
}
/* I9 (wlasciciel 12.10): pozycje wariacji - Qty / Unit / Rate pokazuja cala liczbe (co najmniej 99999.99) przy 1280 i 390 px.
   Kolumny w tracker.html (renderVOs, colgroup 92/64/112/112); pole Qty bez strzalek przegladarki (zjadaly miejsce: "28.8" widoczne jako "28.") */
tbody[id^="vr-"] input[type="number"],tbody[id^="ar-"] input[type="number"]{-moz-appearance:textfield;appearance:textfield}
tbody[id^="vr-"] input[type="number"]::-webkit-inner-spin-button,tbody[id^="vr-"] input[type="number"]::-webkit-outer-spin-button,tbody[id^="ar-"] input[type="number"]::-webkit-inner-spin-button,tbody[id^="ar-"] input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* I10 (wlasciciel 12.10): Description i Reason wariacji jako pole wielolinijkowe z wysokoscia za trescia - rozbicie omission nie jest uciete */
textarea.q-pole-wys{field-sizing:content;min-height:2.6em;resize:vertical;width:100%;box-sizing:border-box;font:inherit;line-height:1.4;white-space:pre-wrap}
/* ══ K-R76 (wlasciciel 13.10, REGULA CALEJ APLIKACJI): WIERSZ NAGLOWKA KAZDEJ TABELI DANYCH - tlo granat marki (--q-th-tlo #17354D), napis
   bialy (--q-th-napis, 12,7:1). N-28 (15.10): BEZ kreski marki pod spodem (byla 3 px, potem 2 px - wlasciciel: "usun ja ze wszystkich
   naglowkow"). Wiersz naglowka = th w thead albo wiersz z samych th (np. tabele Dashboardu
   bez thead); th jako etykieta wiersza obok td i wiersze sum (tfoot) bez zmian. Ikony i dopiski w naglowku (span, svg...) bialym napisem.
   TYLKO EKRAN: wydruki, wydruk ekranu i dokument z linku (#dokument, rysuje sie jak wydruk) bez zmian. Zastepuje dla wiersza naglowka
   jasny naglowek G / N4b-H i P12 (wiersz kolumn Estimate #D3E0EC) - waga pieciu id wygrywa z regula siatki zamrozonego katalogu
   estimate-2026-10-09a (nietkniety, jak P12 / U5 / F10). */
@media screen{
  :is(thead th,tr:not(:has(> td)) > th):not(#dokument *):not(tfoot *):not(#k-r76#k-r76#k-r76#k-r76){background-color:var(--q-th-tlo)!important;color:var(--q-th-napis)!important;
    border-bottom-color:var(--q-th-tlo)!important}   /* dolna ramka komorki w kolorze tla - pod granatowym naglowkiem tabeli zadnej linii (N-28) */
  :is(thead th,tr:not(:has(> td)) > th):not(#dokument *):not(tfoot *) :is(span,b,strong,em,small,abbr,a,i,label,svg):not(#k-r76#k-r76#k-r76#k-r76){color:inherit!important}
}
/* ══ K-R61 (wlasciciel 13.10): KAZDA LISTA ROZWIJANA MA STRZALKE. Wiele list mialo appearance:none (wlasna strzalka wzoru), ale regula
   ekranu z `background:` (np. .cp-wiersz select{background:#fff}, select.bw-poziom-wyb, pola Settings) zdejmowala obrazek strzalki -
   lista wygladala jak pole tekstowe. Teraz jedna strzalka (ta sama co select.q-pole: dwa trojkaty gradientu, kolor --q-strzalka-listy =
   granat) na kazdej liscie bez multiple, w trackerze, ramkach (facility, tender, umowy), People, portfelu, stronach z linku i na telefonie.
   Tylko obrazek, pozycja i miejsce z prawej - tlo, ramka i wysokosc list bez zmian. Lista nieaktywna: strzalka szara (--q-nieaktywny). */
@media screen{
  html body select:not([multiple]):not(#k-r61#k-r61){-webkit-appearance:none!important;appearance:none!important;padding-right:26px!important;
    background-image:linear-gradient(45deg,transparent 50%,var(--q-strzalka-listy) 50%),linear-gradient(135deg,var(--q-strzalka-listy) 50%,transparent 50%)!important;
    background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important}
  html body select:not([multiple]):disabled:not(#k-r61#k-r61){--q-strzalka-listy:var(--q-nieaktywny)}
}
/* ══ K-R48 (wlasciciel 13.10): DLUGA NOTATKA POD POLEM -> MALA OKRAGLA IKONA PRZY ETYKIECIE. Mechanizm dymku = pomoc ekranu N10-E
   (qs-pomoc.js: klik, Enter / spacja, Escape, klik poza dymkiem; aria-expanded): przycisk .wz-pomoc.q-pomoc-ekranu.q-info z data-pomoc =
   id notatki; notatka zostaje w swoim miejscu z atrybutem hidden i klasa q-pomoc-tresc (kod, ktory ja pisze, pisze dalej tam samo).
   Rodzaj (data-rodzaj): "info" = "i" w kolorze --q-info-kolor (DECYZJA WLASCICIELA W TOKU, do niej Secondary #566A7C), "uwaga" = Amber "!"
   (do spojrzenia, bez terminu), "blad" = czerwony "!" (blokuje, brak, termin). Krotkie jednolinijkowe notatki zostaja jak byly. */
.q-pomoc-ekranu.q-info{width:18px;height:18px;margin-left:6px;vertical-align:0;font-size:11px;font-weight:900;background:var(--q-bialy);
  color:var(--q-info-kolor);border:1.5px solid var(--q-info-kolor)}
.q-pomoc-ekranu.q-info::before{content:"i";font-family:Georgia,"Times New Roman",serif;font-style:italic}
.q-pomoc-ekranu.q-info[data-rodzaj="uwaga"]{color:var(--q-status-czeka-napis);border-color:var(--q-status-czeka)}
.q-pomoc-ekranu.q-info[data-rodzaj="blad"]{color:var(--q-status-zle);border-color:var(--q-status-zle)}
.q-pomoc-ekranu.q-info:is([data-rodzaj="uwaga"],[data-rodzaj="blad"])::before{content:"!";font-family:inherit;font-style:normal}
.q-pomoc-ekranu.q-info[aria-expanded="true"]{background:var(--q-panel-szary)}
html body button.q-pomoc-ekranu.q-info[hidden]:not(#k-r48){display:none!important}   /* pusta albo schowana notatka = bez ikony (takze u goscia) */

/* ══ RUNDA N (15.10.2026, wlasciciel 07:34-12:41, decyzja 07:39): JEDEN SYSTEM NAGLOWKOW NA EKRANIE (N-1, N-4, N-2, N-3, N-11) ══════════
   N-1/N-4: naglowek karty, sekcji, kafla i okna BEZ tabeli w srodku = granat #17354D, bialy napis; karta Z TABELA w srodku zachowuje jasny
   naglowek (#E6EEF5, granatowy napis), a granat ma naglowek tabeli (K-R76) - wzor: karta "Register" w Value engineering. Rozroznienie
   :has(th) - jedna regula, bez listy ekranow. N-28 (zmienia N-2): pod granatowym naglowkiem karty ZADNEJ kreski; jasny naglowek karty
   z tabela - cienka szara linia jak w VE.
   N-3: jedna zmienna promienia karty (--q-promien-karty), karta przycina naglowek (overflow:hidden) - gorne rogi naglowka jak karta,
   bez schodka. N-11: pulpit monitoringu - podnaglowki w karcie (FACILITY / PROGRAMME) maly granat wersalikami z cienka szara linia,
   "Needs your decision" zwykla karta, pomaranczowy obrys tylko "NEXT ACTION"; odcinek "Cost to complete" na pasku bez brzoskwini.
   TYLKO EKRAN: wydruki, dokument z linku (#dokument) i obszar DOK (szablony wystawionych dokumentow) maja wlasne arkusze - bez zmian (D1).
   Wpis w docs/KOLORY-ZNACZENIA.md (UZUPELNIENIE 15.10). */
/* R5 (wlasciciel 16.10, odpowiedz 2 na meldunek R4 - WARIANT B): NAGLOWEK KAZDEJ KARTY JASNY - tlo Panel Grey #EDF2F5 (--q-panel-szary),
   napis granat #17354D (--q-granat; 10,6:1, AA >= 4,5). Granat TLA zostaje tylko w wierszu naglowka TABEL (K-R76). Jedna zmienna dla N-1 i N-4
   (karta z tabela i bez - ten sam naglowek), bez kreski marki (N-28). Zastepuje granatowe tlo N-1 (15.10). docs/KOLORY-ZNACZENIA.md (16.10). */
:root{--q-promien-karty:10px;--q-naglowek-karty-tlo:var(--q-panel-glowa-tlo);--q-naglowek-karty-napis:var(--q-panel-glowa-napis)}   /* R10 (R9-U6 C, 18.10): bylo --q-panel-szary / --q-granat */
@media screen{
  /* strony z linku (viewdoc, body.q-dokument; bez :has na body - ciezkie przeliczanie stylu w trackerze) maja karty w promieniu stron dokumentu (A4) - poza N-3 */
  :is(.card,.wz-karta,.q-panel,.ci,#kok-host .kok-karta,#kok-host .kok-brakikarta,#dk-e .dk-e-karta,#dk-e .dk-wykres,#dk-e .dk-decyzje,#panel-docs .rap-kafel):not(#dokument *):not(.q-dokument *):not(#n3#n3){border-radius:var(--q-promien-karty)!important;overflow:hidden}
  /* N-1: naglowek bez tabeli w karcie - granat, bialy napis, bez kreski (N-28) */
  :is(.card>.wz-karta-glowa:not(.boq-pasek),.wz-karta>.wz-karta-glowa,.q-panel>.q-panel-glowa,.ci>.ci-head,#kok-host .kok-karta>h2,#kok-host .kok-brakikarta>h2,
      #dk-e .dk-e-karta>h2,#dk-e .dk-wykres>h3,#dk-e .dk-decyzje>h2.dk-sekcja,.ims-panel .card>h2:not(.dk-sekcja),#panel-docs .rap-kafel>div:first-child):not(#dokument *):not(#n1#n1#n1#n1){
    background:var(--q-naglowek-karty-tlo)!important;color:var(--q-naglowek-karty-napis)!important;border-bottom:0!important;border-radius:0!important}
  :is(.card>.wz-karta-glowa:not(.boq-pasek),.wz-karta>.wz-karta-glowa,.q-panel>.q-panel-glowa,.ci>.ci-head,#kok-host .kok-karta>h2,#kok-host .kok-brakikarta>h2,
      #dk-e .dk-e-karta>h2,#dk-e .dk-wykres>h3,#dk-e .dk-decyzje>h2.dk-sekcja,.ims-panel .card>h2:not(.dk-sekcja),#panel-docs .rap-kafel>div:first-child):not(#dokument *)
    :is(h1,h2,h3,h4,.wz-karta-tytul,.q-panel-tytul,b,strong,em,small,.mut,.wz-karta-podpis,.q-pomoc-ekranu,.wz-pomoc):not(button:not(.q-pomoc-ekranu):not(.wz-pomoc)):not(#n1#n1#n1#n1){color:inherit!important}
  :is(.card>.wz-karta-glowa:not(.boq-pasek),.wz-karta>.wz-karta-glowa,.q-panel>.q-panel-glowa,.ci>.ci-head,#kok-host .kok-karta>h2,
      #dk-e .dk-e-karta>h2,#dk-e .dk-wykres>h3,.ims-panel .card>h2:not(.dk-sekcja)):not(#dokument *) :is(small,.mut,.wz-karta-podpis):not(#n1#n1#n1#n1){opacity:.85}
  :is(.card>.wz-karta-glowa,.wz-karta>.wz-karta-glowa,.q-panel>.q-panel-glowa,.ci>.ci-head,.ims-panel .card>h2) :is(.q-pomoc-ekranu,.wz-pomoc):not(#n1#n1#n1#n1){background:transparent!important;border-color:currentColor!important}
  /* N-4: karta Z TABELA w srodku - jasny naglowek karty (jak "Register" w VE), granat ma naglowek tabeli */
  :is(.card:has(th)>.wz-karta-glowa:not(.boq-pasek),.wz-karta:has(th)>.wz-karta-glowa,.q-panel:has(th)>.q-panel-glowa,.ci:has(th)>.ci-head,
      #kok-host .kok-karta:has(th)>h2,#dk-e .dk-e-karta:has(th)>h2,.ims-panel .card:has(th)>h2:not(.dk-sekcja)):not(#dokument *):not(#n4#n4#n4#n4#n4){
    background:var(--q-naglowek-karty-tlo)!important;color:var(--q-naglowek-karty-napis)!important;box-shadow:inset 0 -1px 0 var(--q-linia-siatki)!important}   /* R5 (16.10, wariant B): ta sama zmienna co N-1 */
  /* N-11: podnaglowki w karcie pulpitu monitoringu - maly granat wersalikami, cienka szara linia, bez pomaranczu */
  #dk-e .dk-e-fp-kol>h3:not(#n11#n11){color:var(--q-granat)!important;border-bottom:1px solid var(--q-ramka)!important}
  #dk-e .dk-decyzje:not(#n11#n11){border:1px solid var(--e-linia,var(--q-ramka))!important;background:var(--q-bialy)!important}
  #dk-e .dk-e-s3:not(#n11#n11){background:var(--q-naglowek-tlo)!important;color:var(--q-granat)!important}
}
/* ══ R2 (N-21, wlasciciel 15.10 21:29): JEDEN WIERSZ SEKCJI - ESTIMATE I KARTA WYCENY. Wiersz sekcji wyceny (siatka valuation-2026-10-16a)
   ma TE SAME klasy co wiersz sekcji Estimate (sep-row qe-heading qe-section, nazwa + "N items" w .qe-heading-content); regula nizej daje mu
   wyglad wiersza sekcji Estimate (Estimate zostaje na regulach zamrozonego katalogu - kontrole i mutacje Estimate dalej dzialaja; ze oba wiersze
   wygladaja tak samo, pilnuje porownanie wyliczonego stylu w tests/qs-r2-wycena-chrome.js N21-1..N21-3): szary pas #E6E6EA na cala szerokosc, nazwa 12 px / 700 wersalikami w granacie, pod nia "N items" 10 px szarym,
   sumy sekcji 12 px pogrubione w swoich kolumnach. Wartosci = to, co Estimate mial do dzis (zmierzone 15.10 22:10, 1366 px), wiec Estimate
   wyglada jak dotad. Waga :is(...) wyzsza niz regul zamrozonego katalogu estimate-2026-10-09a. Tylko ekran - wydruki bez zmian (D1).
   Pilnuje tests/qs-r2-wycena-chrome.js (N21-*): wyliczony styl obu wierszy rowny. */
@media screen{
  #panel-certs .dt.wyc.qv-table tbody tr.qe-section > td{background:var(--q-sekcja-tlo-estimate)!important;
    color:var(--q-granat)!important;font-size:12px!important;font-weight:700!important;padding-top:10px!important;padding-bottom:10px!important;
    height:59px;vertical-align:middle!important;border-top:0!important;border-bottom:1px solid var(--q-linia-siatki)!important}
  #panel-certs .dt.wyc.qv-table tr.qe-section :is(input.boq-sek-nazwa,.qv-fold strong){font-size:12px!important;
    font-weight:700!important;text-transform:uppercase!important;letter-spacing:.04em!important;color:var(--q-granat)!important}
  #panel-certs .dt.wyc.qv-table tr.qe-section .qe-heading-content small{display:block;font-size:10px!important;
    font-weight:400!important;color:var(--q-podpis-napis)!important;margin-top:3px!important;padding-left:0!important;text-transform:none!important;letter-spacing:normal!important}
  #panel-certs .dt.wyc.qv-table tr.qe-section .qe-heading-amount{font-size:12px!important;font-weight:900!important;color:var(--q-granat)!important}
  #panel-certs .dt.wyc.qv-table tr.qe-section > td:not(.qe-desc-cell){font-weight:900!important}
  #panel-certs .dt.wyc.qv-table tr.qe-section .qv-fold{color:var(--q-granat);font-weight:700;padding:0}
}
/* ══ R3 (N-24, wlasciciel 15.10 21:40 - "powtarzam kolejny raz"): POLA W JEDNYM RZEDZIE ROWNE W CALEJ APLIKACJI. Gora i dol kazdego pola
   w rzedzie formularza na tej samej wysokosci, ta sama wysokosc pola. Trzy przyczyny znalezione pomiarem (tests/qs-n24-pola-rowne.js):
   1) przycisk "i" (q-info / wz-pomoc, 18 px) w etykiecie podnosil etykiete z 14 do 18 px i pole pod nia stalo 4 px nizej - przycisk nie
      zmienia juz wysokosci wiersza etykiety (ujemny margines pionowy, srodek linii);
   2) pole daty Chrome mialo 26 px przy 24 px pola tekstowego tej samej klasy (wewnetrzne odstepy pola daty i ikony kalendarza);
   3) jednolinijkowy opis wariacji (textarea q-pole-wys, min. 2,6 em = 31 px) obok pol 24 px - minimum = jedna linia pola; dluzszy tekst
      dalej rosnie z trescia (I10). */
:is(.lbl,label) > :is(.q-info,.wz-pomoc){margin-top:-3px;margin-bottom:-3px;vertical-align:middle}
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit{padding-block:0}
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-fields-wrapper{padding-block:0}
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-calendar-picker-indicator{padding-block:0;margin-block:0}
textarea.q-pole-wys.inp.sm{min-height:24px;line-height:14px}
/* R2 (N-21) telefon: Estimate ma ponizej 701 px wlasny wariant wiersza sekcji (zamrozony katalog - bez odstepow pionowych, 58 px, bez dolnej linii);
   wiersz sekcji wyceny dostaje ten sam - porownanie N21-3 (390 px) w tests/qs-r2-wycena-chrome.js */
@media screen and (max-width:700px){
  #panel-certs .dt.wyc.qv-table tbody tr.qe-section > td{padding-top:0!important;padding-bottom:0!important;border-bottom:0!important;height:58px}
}
/* ══ R4 (R3-U2, wlasciciel 16.10 09:33): IKONA "i" W ETYKIECIE POLA NIE WIEKSZA NIZ LITERY ETYKIETY - 14 px, cienka obwodka, "i" proporcjonalne,
   na linii tekstu. Jedna regula dla kazdej q-info / wz-pomoc w etykiecie w calej aplikacji (bylo 18 / 22 px - kolko wyzsze od tekstu).
   Ikony w naglowkach kart zostaja (to nie etykiety pol). Pilnuje tests/qs-r4-wycena-chrome.js (U2-*) i dalej N-24 (n24pola). */
:is(.lbl,label) > :is(.q-info,.wz-pomoc):not(#r4-i){width:14px;height:14px;min-width:14px;min-height:0;border-width:1px;font-size:10px;line-height:1;padding:0}
/* R5 (R4-U1, wlasciciel 16.10 17:26): "i" lekko za nisko - srodek kolka na srodku WIELKICH liter etykiety (zmierzone w Chrome: 1 px nizej).
   Przesuniecie wzgledne - wiersz etykiety i pole pod nia bez zmian (N-24). */
:is(.lbl,label) > :is(.q-info,.wz-pomoc):not(#r5-i){position:relative;top:-1px}
/* ══ R4 (R3-U7, wlasciciel 16.10 09:45): OSTRZEZENIE PRZY LINII WYCENY = IKONA w lewym odstepie komorki (12 px, czerwona - slowo wlasciciela,
   kolor do potwierdzenia), pelne zdanie i przycisk w MALYM OKNIE przy linii (wycDymek w tracker.html). Wiersz zostaje normalnej wysokosci
   (zmierzone w Chrome: zdanie "Estimate now ..." w kolumnie Contract Value robilo wiersz 174 px). Ten sam wzor dla "Omitted by VO-NN - capped at N%". */
table.wyc td.wyc-td-ikona{position:relative}
table.wyc td.wyc-td-ikona > .wyc-ikona-ostrz:not(#r4-i),table.wyc td.wyc-td-ikona > .omit-cap-nota:not(#r4-i){position:absolute;left:0;top:50%;transform:translateY(-50%);
  display:grid;place-content:center;width:12px;height:12px;min-width:0;min-height:0;max-width:none;margin:0;padding:0;border:0;border-radius:50%;
  background:var(--q-status-zle);color:var(--q-bialy);font-size:0;line-height:0;overflow:hidden;cursor:pointer;box-shadow:none}
table.wyc td.wyc-td-ikona > .wyc-ikona-ostrz .wyc-ikona-znak{font-size:9px;font-weight:900;line-height:12px;color:var(--q-bialy)}
/* R18 (R17-U20, wlasciciel 22.10): roznica Estimate / contract value to nie blad - znak bursztynowy (czeka na decyzje), czerwien tylko blad / zaleglosc */
table.wyc td.wyc-td-ikona > .wyc-ikona-ostrz:not(#r4-i):not(#r18-i){background:var(--q-status-czeka)}
table.wyc td.wyc-td-ikona > .omit-cap-nota:not(#r4-i)::before{content:"!";font-size:9px;font-weight:900;line-height:12px;color:var(--q-bialy)}
/* ══ R5 (wlasciciel 16.10, odpowiedz 1 = B do R3-U1): linia w 100% certyfikowana wczesniej - pole This Val ZABLOKOWANE: szare tlo, klodka, "fully certified";
   Prev % pogrubiony neutralnie; czerwien (status zle) dopiero ponad 100%. Pilnuje tests/qs-r5-wycena-chrome.js. */
table.wyc .wyc-pelna{display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;min-height:24px;padding:2px 8px 2px 22px;border:1px solid var(--q-ramka);border-radius:var(--q-promien);
  background:var(--q-panel-szary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566a7c' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") no-repeat 6px 50%/12px 12px;
  color:var(--q-podpis-napis);font-size:11px;font-weight:600;white-space:nowrap;cursor:not-allowed}
#panel-certs table.wyc td.wyc-prev-pct.wyc-prev-pelna:not(#r5-p){font-weight:700!important}
#panel-certs table.wyc td.wyc-prev-pct.wyc-prev-ponad:not(#r5-p){color:var(--q-status-zle)!important;font-weight:700!important}
table.wyc td.wyc-td-ikona > .omit-cap-nota.omit-cap-pending:not(#r4-i){background:var(--q-status-czeka)}   /* R5 (odpowiedz 3 = B): omission Pending - znak bursztynowy, linia nie jest cieta */
table.wyc td.wyc-td-ikona > :is(.wyc-ikona-ostrz,.omit-cap-nota):focus-visible{outline:2px solid var(--q-granat);outline-offset:1px}
body.readonly .main table.wyc td.wyc-td-ikona > .wyc-ikona-ostrz{display:none!important}
.wyc-dymek{position:absolute;z-index:650;width:max-content;max-width:min(340px,calc(100vw - 16px));box-sizing:border-box;padding:10px 12px;
  background:var(--q-bialy);border:1px solid var(--q-ramka);border-radius:8px;box-shadow:0 6px 18px var(--q-cien-menu);font-size:12px;line-height:1.45;color:var(--q-napis);text-align:left;white-space:normal}
.wyc-dymek p{margin:0 0 8px}
.wyc-dymek .wyc-dymek-zle{color:var(--q-status-zle);font-weight:700}
.wyc-dymek .wyc-dymek-czeka{color:var(--q-status-czeka-napis)}
.wyc-dymek .wyc-dymek-udane{color:var(--q-status-dobrze-napis)}
.wyc-dymek-akcje{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.wyc-dymek-akcje .btn{font-size:11px;padding:4px 10px;margin:0}
/* R7 a11 (N-20d, wlasciciel): Contract value linii z Estimate na karcie wyceny = zwykly tekst (pole readonly bez ramki, ta sama szerokosc
   komorki - tabszer); zmienia ja wariacja albo Estimate. Linia dopisana recznie (bez linii w Estimate) zostaje polem. */
#panel-certs table.wyc input.wyc-cv-staly:not(#r7-cv){border-color:transparent!important;background:transparent!important;box-shadow:none!important;cursor:default;color:inherit}
/* R7 (R6-5, wlasciciel): etykiety wierszy nad Total ("Lines on this valuation", "Materials on site", ...) do lewej jak "Total" - siatka
   wyceny centruje kazda komorke (#panel-certs .qv-table td{text-align:center!important}), wiec regula musi byc mocniejsza */
#panel-certs .qv-table tr.qv-doDzis-skl td.qv-skl-et:not(#r7-et){text-align:left!important}
/* R16-U9 (wlasciciel 22.10): kwoty wierszy nad Total ("Lines on this valuation", "Certified earlier, not on this valuation", ...) do PRAWEJ krawedzi
   kolumny, jak wiersze pozycji i Total (ten sam padding 12 px). Wiersz skladnika ma etykiete z colspan 2, wiec reguly kolumn po nth-child siatki
   trafialy w nim o kolumne dalej - kwota Value to Date dostawala wyrownanie srodka kolumny "This Val" (zmierzone w Chrome: 17 px w lewo). */
.qv-table tr.q-suma-skl > td[data-qv-skl]:not(#r16-u9):not(#r16-u9b){text-align:right!important}
/* R15-U1 (wlasciciel 21.10 17:46 "te podkreslenia mi sie nie podobaja"): SUMY POD TABELA - JEDNA KLASA. Wiersze skladnikow ("Lines on this valuation",
   "Certified earlier, not on this valuation", ...) bez wlasnych linii, tlo jak wiersz sumy, zwykla waga; JEDNA cienka linia 1px #B9C6D2 (linia palety C)
   nad "Total", Total pogrubiony. Bez granatowych kresek (siatka wyceny klienta i podwykonawcy: .qv-summary td{border-top:2px solid granat}).
   q-suma-skl / q-suma-razem - ta sama para w karcie wyceny klienta i suba, druku wyceny (od R15) i podsumowaniach Final Account. */
.qv-summary tr td:not(#r15-u1), tr.q-suma-razem > td:not(#r15-u1), .q-suma-razem:not(tr):not(#r15-u1){border-top:1px solid var(--q-panel-glowa-ramka)!important;font-weight:700!important}
.qv-summary tr.q-suma-skl td:not(#r15-u1), tr.q-suma-skl > td:not(#r15-u1), .q-suma-skl:not(tr):not(#r15-u1){border-top:0!important;font-weight:400!important}
/* ══ R10 (R9-U6, wlasciciel 18.10 08:42, kolor C 08:47): JEDEN NAGLOWEK PANELU W CALEJ APLIKACJI. Dotad kazdy ekran mial wlasny: Client Valuations
   (#EDF2F5, rogi karty), Model revisions (#E6EEF5, inny odstep i napis), Dashboard projektu (52 px, 16 px), Tender, Facility, Reports (13 px), portfel
   (Payment deadlines bialy, wersaliki). Teraz JEDNA regula: tlo --q-panel-glowa-tlo #D3DDE6, linia pod spodem --q-panel-glowa-ramka #B9C6D2 (cien
   wewnetrzny, bez ramki - wysokosc nie skacze), tytul --q-napis #17283A 15 px / 700 (kontrast 10,9:1), wysokosc co najmniej 46 px, odstep 6 px 18 px,
   rogi = rogi karty (karta przycina naglowek, promien --q-promien-karty), tytul + opcjonalne "?" + dopisek po prawej, bez ikon. Naglowki TABEL (granat,
   K-R76), pasek nawigacji i pas zakladek pulpitu (.kok-zak-pas) bez zmian. Naglowek karty pozycji listy (.ci-head: wycena, wariacja, zaliczka,
   RFI) bierze to samo tlo, linie i napis, ale zachowuje swoj uklad wiersza (numer, data, status, kwota). TYLKO EKRAN; dokument z linku (#dokument,
   .q-dokument) i wydruki maja wlasne arkusze (D1). Pilnuje tests/qs-r10-ekrany-chrome.js (R10-U6*), mutacje SW5000-SW5029. */
@media screen{
  :is(.card,.wz-karta,.q-panel,.ci,.dl-panel,#kok-host .kok-karta:not(.kok-zak-tresc>.kok-karta),#kok-host .kok-brakikarta,#dk-e .dk-e-karta,#dk-e .dk-wykres,#dk-e .dk-decyzje,#panel-docs .rap-kafel):not(#dokument *):not(.q-dokument *):not(#r10#r10#r10#r10#r10){border-radius:var(--q-promien-karty)!important;overflow:hidden}
  :is(.card>.wz-karta-glowa:not(.boq-pasek),.wz-karta>.wz-karta-glowa,.q-panel>.q-panel-glowa,.dl-panel>.dl-head,#kok-host .kok-karta>h2,#kok-host .kok-brakikarta>h2,
      #dk-e .dk-e-karta>h2,#dk-e .dk-wykres>h3,#dk-e .dk-decyzje>h2.dk-sekcja,.ims-panel .card>h2:not(.dk-sekcja),#panel-docs .rap-kafel>div:first-child,.card>.ch,.card.zk-tender>h2:first-child):not(#dokument *):not(.q-dokument *):not(#r10#r10#r10#r10#r10#r10#r10){
    display:flex!important;align-items:center!important;column-gap:12px!important;box-sizing:border-box!important;flex:0 0 auto!important;
    height:auto!important;min-height:var(--q-panel-glowa-wys)!important;max-height:none!important;padding:var(--q-panel-glowa-odstep)!important;
    background:var(--q-panel-glowa-tlo)!important;color:var(--q-panel-glowa-napis)!important;border:0!important;border-radius:0!important;box-shadow:inset 0 -1px 0 var(--q-panel-glowa-ramka)!important;
    font-family:var(--q-kroj)!important;font-size:15px!important;font-weight:700!important;line-height:1.3!important;letter-spacing:normal!important;text-transform:none!important}
  /* tytul jako osobny element (h3 / .q-panel-tytul / b w Payment deadlines) - te same litery co naglowek */
  :is(.q-panel>.q-panel-glowa,.dl-panel>.dl-head,.card>.ch,.wz-karta>.wz-karta-glowa,.card>.wz-karta-glowa) > :is(h1,h2,h3,h4,.q-panel-tytul,.wz-karta-tytul,b):first-child:not(#r10#r10#r10#r10#r10){
    margin:0!important;font-family:var(--q-kroj)!important;font-size:15px!important;font-weight:700!important;color:var(--q-panel-glowa-napis)!important;letter-spacing:normal!important;text-transform:none!important}
  /* karta pozycji listy: to samo tlo, linia i napis; uklad wiersza wlasny */
  :is(.ci>.ci-head):not(#dokument *):not(.q-dokument *):not(#r10#r10#r10#r10#r10#r10#r10#r10){background:var(--q-panel-glowa-tlo)!important;color:var(--q-panel-glowa-napis)!important;border:0!important;
    box-shadow:inset 0 -1px 0 var(--q-panel-glowa-ramka)!important}
  /* dopisek po prawej (podpis naglowka) zwyklym pismem, nie pogrubiony jak tytul */
  :is(.card>.wz-karta-glowa,.wz-karta>.wz-karta-glowa,.q-panel>.q-panel-glowa,.dl-panel>.dl-head,.card>.ch,.card.zk-tender>h2:first-child,.ims-panel .card>h2,#dk-e .dk-e-karta>h2,#dk-e .dk-wykres>h3)
    :is(small,em,.hint,.mut,.wz-karta-podpis):not(#r10#r10#r10#r10#r10#r10#r10){font-weight:400!important}
  .dl-panel>.dl-head>span:not(#r10#r10#r10#r10#r10#r10#r10){font-weight:400!important;font-size:12px!important}
  /* napisy przygaszone (#566A7C) na tle #D3DDE6 maja kontrast 4,07:1 (ponizej AA 4,5) - w naglowku panelu, w naglowku karty pozycji i w pasie
     zakladek pulpitu biora kolor tytulu #17283A (10,9:1); dopisek odroznia zwykla grubosc pisma. Przyciski, linki i statusy - bez zmian. */
  :is(.card>.wz-karta-glowa:not(.boq-pasek),.wz-karta>.wz-karta-glowa,.q-panel>.q-panel-glowa,.dl-panel>.dl-head,#kok-host .kok-karta>h2,#kok-host .kok-brakikarta>h2,
      #dk-e .dk-e-karta>h2,#dk-e .dk-wykres>h3,#dk-e .dk-decyzje>h2.dk-sekcja,.ims-panel .card>h2:not(.dk-sekcja),#panel-docs .rap-kafel>div:first-child,.card>.ch,.card.zk-tender>h2:first-child)
    :is(small,em,.hint,.mut,.wz-karta-podpis,span,div,b,strong,p):not(button *):not(a *):not(.badge):not(.badge *):not(.krok-nr):not([class*="status"]):not(#r10#r10#r10#r10#r10#r10#r10){color:var(--q-panel-glowa-napis)!important}
  /* kwota zielonym napisem w naglowku karty pozycji (zaliczka, #aph-*) ma na #D3DDE6 kontrast 3,89:1 - bierze kolor tytulu, jak kwoty naglowka wyceny (KT-1/KT-2; R13 przywrocone z R10) */
  /* kwota OD WYKONAWCY (.qs-k-od-wykonawcy, R14) zostaje czerwona: #C9362C na #D3DDE6 = 5,3:1 (R14-2) */
  .ci>.ci-head [style*="color:var(--muted)"]:not(.qs-k-od-wykonawcy):not(#r10#r10#r10#r10#r10#r10#r10),.ci>.ci-head [style*="color:var(--green)"]:not(#r10#r10#r10#r10#r10#r10#r10),#kok-host .kok-zak-pas .kok-zak:not(#r10#r10#r10#r10#r10#r10#r10){color:var(--q-panel-glowa-napis)!important}
}
:root{--q-panel-glowa-wys:46px;--q-panel-glowa-odstep:6px 18px}
/* ══ R10 (R9-U4, wlasciciel 18.10): "Pending omissions (not deducted - no approved variation)" i wiersze "Pending omission: ..." na ekranie Final Account
   BURSZTYNOWE (Amber napis --q-status-czeka-napis, KOLORY-ZNACZENIA: czeka na decyzje - nie blad i nie pieniadze wychodzace); bylo czerwone (#b91c1c
   w znaczniku wiersza). TYLKO EKRAN regula arkusza (znacznik #fa-printable idzie do druku FA - druk robi osobno printFA / faExtraCSS, D1).
   Stary uklad (FA wystawiony przed R9: "Less Omissions (client removed)", odjete) zostaje czerwony - linia .qs-fa-omit-pending powstaje tylko w ukladzie R9. */
@media screen{
  #fa-omit-block:has(> #fa-omit-rows > .qs-fa-omit-pending) > .fr.ded > span:not(#r10-u4#r10-u4),
  #fa-omit-rows > .fr.qs-fa-omit-pending > span:not(#r10-u4#r10-u4){color:var(--q-status-czeka-napis)!important}
}
/* ══ R11 (R10-U6a, test wlasciciela 18.10): JEDEN STYL POLA WYBORU I OPISU POLA W CALEJ APLIKACJI (tracker, facility.html i ramki IMS, strony).
   Do dzis Import ("Import a cost plan") mial liste "ask me on the review screen" i zdanie "Some rows got their element..." 10 px (styl w znaczniku),
   facility.html etykiety 11-11.5 px przy 12 px w Settings trackera, listy z wysokoscia linii 1.5 strony obok "normal" w trackerze, .q-etykieta 600
   (K-2: tylko 400/700/900). Wzorzec = tracker Settings (zmierzone w Chrome 18.10): lista 13 px / 400 / normal, etykieta 12 px / 700 / normal, Roboto.
   Teraz JEDNA regula, same tokeny:
   - pole wyboru (select poza komorka tabeli danych; listy w kartach transz tez): --q-kroj, --q-pismo (13 px), wysokosc linii normal (grubosc ekranu -
     zwykle 400; status warunku pogrubiony znaczeniem);
     komorki tabel danych (Estimate, zasoby, wyceny) zostaja w pismie tabeli - to siatka, nie formularz;
   - etykieta pola (nazwa nad polem / przy polu): --q-kroj, --q-pismo-tabeli (12 px), 700, normal, zwyklymi literami (Site visits i edytor Initial
     appraisal mialy 10 / 10.5 px wersalikami); pole wewnatrz etykiety nie dziedziczy 700;
   - opis pola (zdanie przy polu / pod polem): ten sam rozmiar i krój co etykieta (12 px), zwykla grubosc 400, wysokosc linii 1.4.
   Kolory bez zmian. TYLKO EKRAN; dokument z linku i wydruki maja wlasne arkusze (D1). Pilnuje tests/qs-r11-ims-chrome.js (R11-U6a*), mutacje SW5170-SW5199. */
@media screen{
  /* bez ustawien planu Estimate (.qe-plan-settings: pola 14 px / 42 px w zamrozonym estimate-*, EC-26) - lista i pole tekstowe w jednym rzedzie jednym pismem */
  html body :is(select:not(td *):not(th *),#tr-tab select):not([multiple]):not(#dokument *):not(.q-dokument *):not(.qe-plan-settings *):not(#r11#r11#r11){font-family:var(--q-kroj)!important;
    font-size:var(--q-pismo)!important;line-height:normal!important}   /* grubosc zostaje ekranu: status warunku (.cp-stan met) jest pogrubiony znaczeniem (K-R50) */
  :is(.main .field > .lbl,.ims-panel .field > .lbl,.q-etykieta,.pole > label,label.tr-pole,.dec-grid label,.ln-zatw-form label,.ln-pyt-form label,.ia-pole > .ia-et,#imp2-box > span:first-child,#panel-import span[data-tip="boq-import"]):not(#dokument *):not(.q-dokument *):not(#r11#r11#r11){
    font-family:var(--q-kroj)!important;font-size:var(--q-pismo-tabeli)!important;font-weight:700!important;line-height:normal!important;text-transform:none!important;letter-spacing:normal!important}
  :is(label.tr-pole,.dec-grid label,.ln-zatw-form label,.ln-pyt-form label) :is(input,textarea):not(#r11#r11#r11){font-weight:400!important}
  :is(.pod-pole,#imp2-box > label,#imp2-box > label > span,#imp2-status,#boq-status-client):not(#dokument *):not(.q-dokument *):not(#r11#r11#r11){font-family:var(--q-kroj)!important;
    font-size:var(--q-pismo-tabeli)!important;font-weight:400!important;line-height:1.4!important}
}
/* ══ R11 (R10-U6b, test wlasciciela 18.10): TABELA NA PELNA SZEROKOSC KARTY W IMS (facility.html i jej ramki w trackerze). Granatowy naglowek tabeli
   stal wciety 12-21 px z lewej i prawej (Tranches na pulpicie, Drawdown schedule w Drawdowns, Borrower's costs, tabele edytora Initial appraisal) -
   karta ma odstep 18 / 20 px, a tabela lezala w nim. Teraz jak karty pulpitu trackera: tabela (i jej wiersz naglowka) od krawedzi do krawedzi
   wnetrza karty; tekst nad tabela zostaje w swoim odstepie, a pierwsza i ostatnia kolumna maja odstep karty, wiec litery stoja w linii z tekstem
   karty. Opakowanie przewijane (.tabwrap) ma szerokosc karty - na telefonie przewija sie tylko tabela, strona nie. Lista kart transz (#tr-tab w
   .tr-lista, bez wiersza naglowka) to karty w karcie, nie tabela - bez zmian. Pilnuje tests/qs-r11-ims-chrome.js (R11-U6b*), mutacje SW5170-SW5199. */
@media screen{
  .ims-panel .card > .tabwrap:not(.tr-lista):not(#r11#r11){margin-left:-20px;margin-right:-20px;border-left:0;border-right:0;border-top:0;border-radius:0}
  .ims-panel .card > .tabwrap:not(.tr-lista) > table tr > :is(th,td):first-child:not(#r11#r11){padding-left:20px}
  .ims-panel .card > .tabwrap:not(.tr-lista) > table tr > :is(th,td):last-child:not(#r11#r11){padding-right:20px}
  /* Borrower's costs: kolumna przycisku usuniecia (przycisk 45 px + odstep komorki 9 px + odstep karty 20 px); 48 px z colgroup przycinalo przycisk
     i opakowanie przewijalo sie o 6 px takze na komputerze */
  .ims-panel .card > .tabwrap > #mc-tab > colgroup > col:last-child:not(#r11#r11){width:76px!important}
  #dk-e .dk-e-karta > table.dk-e-tab:not(#r11#r11#r11){width:100%;margin-left:0;margin-right:0}
  #dk-e .dk-e-karta > table.dk-e-tab tr > :is(th,td):first-child:not(#r11#r11#r11){padding-left:18px}
  #dk-e .dk-e-karta > table.dk-e-tab tr > :is(th,td):last-child:not(#r11#r11#r11){padding-right:18px}
  #ia-edytor .ia-ramka:not(#r11#r11){overflow-x:auto}   /* telefon: tabela szersza niz ramka edytora przewija sie w ramce (karta przycina - bylo uciete) */
  #ia-edytor .ia-ramka table.ia-edtab:not(#r11#r11){width:calc(100% + 36px);margin-left:-18px;margin-right:-18px}
  #ia-edytor .ia-ramka table.ia-edtab tr > :is(th,td):first-child:not(#r11#r11){padding-left:18px!important}
  #ia-edytor .ia-ramka table.ia-edtab tr > :is(th,td):last-child:not(#r11#r11){padding-right:18px!important}
}
/* ══ R12 (R11-U1, test wlasciciela 18.10): KARTA U GOSCIA (TYLKO ODCZYT) TO TEKST, NIE ZABLOKOWANY FORMULARZ. Gosc (body.readonly) i gosc z "Can edit"
   na ekranach, ktorych nie zmienia (body.gosc-n6, N6-B), widzial na kartach wycen, wariacji, zaliczek i pakietow podwykonawcow szare pola z ramka
   (Date, Due Date, Week, Prepared By, Notes, opis linii, Contract value, This Val %). Teraz zwykly tekst: bez ramki, bez tla, bez strzalki listy,
   bez ikony kalendarza i bez napisu-podpowiedzi w pustym polu - te same liczby w tym samym miejscu i wyrownaniu (jak R7-9 Contract value
   u wlasciciela, .wyc-cv-staly). Kolor napisu bez !important: kolor znaczenia z atrybutu style (pominiecie, kwota od wykonawcy) wygrywa.
   Pola zywe u goscia (decyzja o wariacji .vo-decyzja, formularze wnioskow i pism) - bez zmian. Klasa body, nie body:has() (TEST STARTU). TYLKO EKRAN.
   Pilnuje tests/qs-r12-ekran-chrome.js (R12-U1*), mutacje SW5260-SW5299. */
@media screen{
  :is(body.readonly,body.gosc-n6) :is(#panel-certs,#panel-subcerts,#panel-vos,#panel-adv) .ci :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]),select,textarea):not(.vo-decyzja):not(#msub-wniosek-gosc *):not(#msub-df-gosc *):not(#r12#r12#r12){
    border-color:transparent!important;background:transparent!important;box-shadow:none!important;-webkit-appearance:none!important;appearance:none!important;resize:none!important;cursor:default!important;color:var(--q-napis)}
  :is(body.readonly,body.gosc-n6) :is(#panel-certs,#panel-subcerts,#panel-vos,#panel-adv) .ci :is(input,textarea):not(#msub-wniosek-gosc *):not(#msub-df-gosc *):not(#r12#r12#r12)::placeholder{color:transparent!important}
  :is(body.readonly,body.gosc-n6) :is(#panel-certs,#panel-subcerts,#panel-vos,#panel-adv) .ci input[type=date]:not(#r12#r12#r12)::-webkit-calendar-picker-indicator{display:none!important}
}
/* ══ R12 (R11 pytanie I1, odpowiedz wlasciciela "tak"): JEDNO PISMO W RZEDZIE. R11 dal listom (select) 13 px; pola tekstowe obok nich (.inp.sm: Date,
   Due Date, Week, Prepared By na karcie wyceny, pola wariacji i zaliczki) zostaly 12 px. Teraz pole tekstowe .inp.sm poza komorka tabeli danych =
   --q-pismo (13 px) jak lista; komorki tabel (siatka) i ustawienia planu Estimate (.qe-plan-settings, zamrozony estimate-*) bez zmian. TYLKO EKRAN.
   Pilnuje tests/qs-r12-ekran-chrome.js (R12-I1*). */
@media screen{
  html body :is(input.inp.sm:not([type=checkbox]):not([type=radio]),textarea.inp.sm):not(td *):not(th *):not(#dokument *):not(.q-dokument *):not(.qe-plan-settings *):not(#r12#r12#r12){font-size:var(--q-pismo)!important}
}
/* ══ R12 (R11 pytanie I3, odpowiedz "tak"): TABELA NA PELNA SZEROKOSC KARTY W TRACKERZE - jak IMS w R11 (R10-U6b). Granatowy naglowek tabeli na kartach
   Valuations, Variations, Advance payments i wycen podwykonawcow stal wciety o odstep wnetrza karty (16 px + ramka) z obu stron; Cash flow
   i Completion (karta .card) o 21 px. Teraz tabela (opakowanie przewijane albo sama tabela) od krawedzi do krawedzi wnetrza karty; tekst nad
   i pod tabela zostaje w swoim odstepie. Estimate (zamrozony estimate-2026-10-09a) bez zmian. TYLKO EKRAN. Pilnuje tests/qs-r12-ekran-chrome.js (R12-I3*). */
@media screen{
  :is(#panel-certs,#panel-subcerts) .ci > .ci-body > .dt-przewin:not(#r12#r12){margin-left:-16px;margin-right:-16px;width:calc(100% + 32px);max-width:none;box-sizing:border-box}
  :is(#panel-vos,#panel-adv) .ci > .ci-body > table.dt:not(#r12#r12){margin-left:-16px;margin-right:-16px;width:calc(100% + 32px);max-width:none}
  :is(#panel-vos,#panel-adv) .ci > .ci-body > table.dt tr > :is(th,td):first-child:not(#r12#r12){padding-left:16px}
  :is(#panel-vos,#panel-adv) .ci > .ci-body > table.dt tr > :is(th,td):last-child:not(#r12#r12){padding-right:16px}
}
/* R12 (F6, wlasciciel 18.10): podpowiedz pod pustym polem Contractor w Settings (Acting as Main contractor) - Amber napis z palety
   (--q-status-czeka-napis, KOLORY-ZNACZENIA: wymaga uwagi), rozmiar i krój opisu pola (.pod-pole, R11). Pilnuje R12-F6*. */
#s-cont-uwaga.s-cont-uwaga:not(#r12){color:var(--q-status-czeka-napis);margin-top:4px}
/* ══ R12 D (R11-U5, test wlasciciela 18.10): ROZWINIETY WIERSZ PLIKU - LISTY NA SZEROKOSC WYBRANEJ OPCJI. Documents IMS (typ c: Visibility, Tranche,
   Visit, Element, Folder) i Documents trackera (typ a/b: Visibility, Folder) to jeden wiersz (plikWiersz) i jeden wzor. Do dzis lista miala szerokosc
   NAJDLUZSZEJ pozycji: Element z dluga nazwa elementu robot rozciagal sie na cala reszte rzedu przy wybranym "no element", a Folder spadal nizej.
   Teraz lista = wybrana opcja + strzalka (field-sizing: content, jak listy Role / Side w Project team), nigdy nie ucieta na komputerze; Folder zostaje
   w tym samym rzedzie, gdy sie miesci (zawijanie dopiero przy braku miejsca); na telefonie pole nie wychodzi poza wiersz. Przegladarka bez field-sizing:
   najwyzej 320 px. TYLKO EKRAN. Pilnuje tests/qs-r12-ims-dok-chrome.js (R12D-U5*), mutacje SW5340-SW5349. */
@media screen{
  .plik-wiersz .pw-pola > .pw-pole:not(#r12d#r12d){max-width:100%;min-width:0}
  .plik-wiersz .pw-pola > .pw-pole > select:not(#r12d#r12d){field-sizing:content;width:auto!important;min-width:0;max-width:100%;flex:0 1 auto}
}
@supports not (field-sizing:content){ @media screen{ .plik-wiersz .pw-pola > .pw-pole > select:not(#r12d#r12d){max-width:min(100%,320px)} } }
/* ══ R13 B (R12-U2, test wlasciciela 19.10 09:35): PODSEKCJA WEWNATRZ PANELU TO INNY POZIOM NIZ NAGLOWEK PANELU. Panel z zakladkami na pulpicie
   ("Cash & recovery / Variations / Programme") mial pod naglowkiem panelu podsekcje "Cash", "The account", "Retention" z TYM SAMYM tlem #D3DDE6
   (regula R10 lapala #kok-host .kok-karta>h2 takze w .kok-zak-tresc) - dwa jednakowe paski jeden pod drugim. To samo "Saved documents" w karcie
   Reports IMS (drugi h2 w karcie, .ims-panel .card>h2). Teraz JEDNA regula podsekcji: biale tlo, tytul pogrubiony 14 px w kolorze napisu,
   cienka linia pod spodem (--q-ramka, cien wewnetrzny - wysokosc nie skacze), dopisek po prawej zostaje (zwykle pismo, napis drugorzedny).
   Nowa podsekcja w panelu: klasa .q-podsekcja. Naglowek panelu (R10) i granatowy naglowek tabeli bez zmian. Waga wyzsza niz R10. TYLKO EKRAN.
   Pilnuje tests/qs-r13-ekran-chrome.js (R13-U2*), mutacje SW5520-SW5539. */
@media screen{
  :is(#kok-host .kok-zak-tresc>.kok-karta>h2,.ims-panel .card>h2:not(.dk-sekcja):not(:first-child),.q-podsekcja):not(#dokument *):not(.q-dokument *):not(#r13b#r13b#r13b#r13b#r13b#r13b#r13b#r13b#r13b#r13b){
    background:var(--q-bialy)!important;color:var(--q-napis)!important;box-shadow:inset 0 -1px 0 var(--q-ramka)!important;border:0!important;
    min-height:40px!important;padding:6px 18px!important;font-family:var(--q-kroj)!important;font-size:14px!important;font-weight:700!important}
  :is(#kok-host .kok-zak-tresc>.kok-karta>h2,.ims-panel .card>h2:not(.dk-sekcja):not(:first-child),.q-podsekcja) :is(small,em,.hint,.mut,span):not(button *):not(.badge):not(.badge *):not(#r13b#r13b#r13b#r13b#r13b#r13b#r13b#r13b#r13b#r13b){
    color:var(--q-podpis-napis)!important;font-weight:400!important}
}
/* ══ R13 B (R12-U3, test wlasciciela 19.10 09:43 i 09:48): JEDEN WIERSZ SEKCJI NA EKRANIE. Wiersz sekcji (PRELIMINARIES ... "N items") mial
   w Estimate wlasciciela 59 px (odstep 10 px), u goscia 58 px (7 px), w karcie wyceny 59 px, w wycenie podwykonawcy 36 px bez "N items",
   w Cost planie podwykonawcy 58 px innym tlem (#C9D2DA) - i szary #E6E6EA. Teraz jeden wiersz w Estimate wlasciciela i goscia (wydana wersja,
   #bgw-tabela), karcie wyceny (wlasciciel i gosc), wycenie podwykonawcy i Cost planie podwykonawcy: tlo --q-sekcja-tlo-estimate (blekitny
   #E6EEF5 z palety C - token wyzej; Estimate i karta wyceny biora go swoimi regulami P12 / R2, podwykonawca przez --grey / --sekcja-tlo tutaj),
   wysokosc 44 px (odstep 5 px gora / dol), nazwa 12 px / 700 wersalikami w granacie, "N items" 10 px pod nazwa, Roboto. Zamrozone katalogi
   estimate-2026-10-09a i valuation-2026-10-16b nietkniete (waga tej reguly wyzsza). TYLKO EKRAN - wydruki i dokument z linku bez zmian (D1).
   Pilnuje tests/qs-r13-ekran-chrome.js (R13-U3*), mutacje SW5540-SW5559. */
@media screen{
  :is(#boq-sub-body > tr.qe-section,#panel-subcerts tr.sep-row[id^="scrow-"]):not(#r13w#r13w#r13w){--grey:var(--q-sekcja-tlo-estimate);--sekcja-tlo:var(--q-sekcja-tlo-estimate)}
  :is(#panel-boq .qe-grid-scroll .boq-dt tr.qe-section,#panel-certs .dt.wyc.qv-table tr.qe-section,#boq-sub-body > tr.qe-section,#panel-subcerts tr.sep-row[id^="scrow-"]):not(#r13w#r13w#r13w#r13w#r13w#r13w){
    background:var(--q-sekcja-tlo-estimate)!important;height:44px!important}
  :is(#panel-boq .qe-grid-scroll .boq-dt tr.qe-section,#panel-certs .dt.wyc.qv-table tr.qe-section,#boq-sub-body > tr.qe-section,#panel-subcerts tr.sep-row[id^="scrow-"]) > td:not(#r13w#r13w#r13w#r13w#r13w#r13w){
    padding-top:5px!important;padding-bottom:5px!important;height:44px!important;box-sizing:border-box!important;vertical-align:middle!important;font-family:var(--q-kroj)!important;line-height:18px!important}
  :is(#panel-boq .qe-grid-scroll .boq-dt tr.qe-section,#panel-certs .dt.wyc.qv-table tr.qe-section,#boq-sub-body > tr.qe-section) :is(input.boq-sek-nazwa,.qe-heading-content > strong,.qv-fold strong):not(#r13w#r13w#r13w#r13w#r13w#r13w),
  #panel-subcerts tr.sep-row[id^="scrow-"] > td:nth-child(2):not(#r13w#r13w#r13w#r13w#r13w#r13w){
    font-family:var(--q-kroj)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.04em!important;color:var(--q-granat)!important;line-height:18px!important}
  :is(#panel-boq .qe-grid-scroll .boq-dt tr.qe-section,#boq-sub-body > tr.qe-section) input.boq-sek-nazwa:not(#r13w#r13w#r13w#r13w#r13w#r13w){height:18px!important;box-sizing:border-box!important;flex:0 0 auto!important}
  :is(#panel-boq .qe-grid-scroll .boq-dt tr.qe-section,#panel-certs .dt.wyc.qv-table tr.qe-section,#boq-sub-body > tr.qe-section) .qe-heading-content small:not(#r13w#r13w#r13w#r13w#r13w#r13w){
    display:block!important;font-family:var(--q-kroj)!important;font-size:10px!important;font-weight:400!important;line-height:13px!important;margin-top:1px!important;
    color:var(--q-podpis-napis)!important;text-transform:none!important;letter-spacing:normal!important;padding-left:0!important}
}
/* ══ R15-U4 (wlasciciel 21.10 17:48, Client Valuations): WIERSZ KARTY LISTY INNY NIZ NAGLOWEK PANELU. Naglowek panelu "Client Valuations" i kazdy
   wiersz VAL-01..VAL-05 mialy to samo tlo C #D3DDE6 (regula R10 .ci>.ci-head). Teraz JEDNA klasa listy kart q-lista-kart (wyceny klienta, wyceny
   podwykonawcow, Variations, Advance payments): wiersz BIALY z cienka ramka 1px #B9C6D2 (--q-panel-glowa-ramka), najechanie jasnoblekitne #E6EEF5
   (--q-sekcja-tlo-estimate, jak wiersz sekcji); karta otwarta zachowuje swoj kolor ramki (znacznik otwarcia). Notices (tabela listy) - te same
   wiersze: biale, linia #B9C6D2, najechanie #E6EEF5. Naglowek panelu bez zmian (R10). Kolory znaczenia w wierszu (status, kwota od wykonawcy)
   bez zmian - regula zmienia tylko tlo i ramke. TYLKO EKRAN; dokument z linku i wydruki maja wlasne arkusze. Pilnuje tests/qs-r15-wyglad-chrome.js
   (R15U4-*), mutacje SW5800-SW5839. */
@media screen{
  .q-lista-kart > .ci:not(#dokument *):not(.q-dokument *):not(#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k){background:var(--q-bialy)!important;border-width:1px!important;border-style:solid!important}
  .q-lista-kart > .ci:not(.open):not(#dokument *):not(.q-dokument *):not(#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k){border-color:var(--q-panel-glowa-ramka)!important}
  .q-lista-kart > .ci > .ci-head:not(#dokument *):not(.q-dokument *):not(#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k){background:var(--q-bialy)!important;box-shadow:none!important}
  .q-lista-kart > .ci > .ci-head:hover:not(#dokument *):not(.q-dokument *):not(#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k){background:var(--q-sekcja-tlo-estimate)!important}
  .q-lista-kart > .ci.open > .ci-head:not(#dokument *):not(.q-dokument *):not(#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k#r15k){box-shadow:inset 0 -1px 0 var(--q-panel-glowa-ramka)!important}
  .ntj-tab tr.ntj-wiersz > td:not(#r15k#r15k){background:var(--q-bialy);border-bottom:1px solid var(--q-panel-glowa-ramka)}
  .ntj-tab tr.ntj-wiersz:hover > td:not(#r15k#r15k){background:var(--q-sekcja-tlo-estimate)}
}
/* ══ R15-U13 (wlasciciel 21.10 18:06, Photos / RFIs): JEDNA SZEROKOSC KAFLA WSTAZKI. Pomaranczowy przycisk glowny ("Take photo", "New RFI") i pozostale
   mialy szerokosc z dlugosci napisu (min. 62 px, telefon 56 px), odstepy nierowne. Teraz KAZDY przycisk wstazki (.q-wstazka: tracker - takze ekrany
   IMS - portfel, People; wlasciciel i gosc; glowny, zwykly, nieaktywny i More) to kafel --q-kafel-wstazki 80 px (wlasciciel: "np. 84 px"; 80 px,
   zeby Estimate przy 1440 dalej miescil wszystkie 16 akcji bez More - N4b-C E3-5): ikona u gory w jednym rzedzie, napis pod nia do 2 linii,
   odstep miedzy kaflami grupy 4 px, miedzy grupami 12 px. Wysokosc kafla = wysokosc pasa (napis w 2 liniach miesci sie w 68 px, telefon 62 px).
   Lista More (.q-wiecej-lista) zostaje wierszami. Telefon 390: ten sam kafel; co sie nie miesci, idzie do More (navWstazkaMiesc). Tylko ekran. */
:root{--q-kafel-wstazki:80px}
@media screen{
  .q-wstazka .q-grupa:not(#r15w#r15w){margin-right:12px;padding:0}
  .q-wstazka .q-grupa-akcje:not(#r15w#r15w){gap:4px}
  :is(.q-wstazka > .q-grupa .q-akcja,.q-wstazka > .q-akcja):not(#r15w#r15w#r15w){box-sizing:border-box;flex:0 0 var(--q-kafel-wstazki);width:var(--q-kafel-wstazki);min-width:0;max-width:var(--q-kafel-wstazki);
    justify-content:flex-start;gap:3px;padding:4px 4px 3px;white-space:normal;text-align:center}
  :is(.q-wstazka > .q-grupa .q-akcja,.q-wstazka > .q-akcja) .q-akcja-napis:not(#r15w#r15w#r15w){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
    max-width:100%;line-height:1.12}
  :is(.q-wstazka > .q-grupa .q-akcja,.q-wstazka > .q-akcja) .q-ik:not(#r15w#r15w#r15w){flex:none}
}
@media screen and (max-width:760px){
  :is(.q-wstazka > .q-grupa .q-akcja,.q-wstazka > .q-akcja):not(#r15w#r15w#r15w){padding:2px 4px 1px;font-size:11px}
  :is(.q-wstazka > .q-grupa .q-akcja,.q-wstazka > .q-akcja) .q-akcja-napis:not(#r15w#r15w#r15w){line-height:1.1}
}
/* R17 (22.10.2026, wlasciciel R16-U20): EKRAN REPORTS JAKO PULPIT (#panel-docs) i OKNO RAPORTU (#rp-okno). Kolory tylko zmiennymi palety:
   kafle = komponent kafla kokpitu (.q-kafle / .q-kafel), ikony Quick actions jednej szerokosci (siatka), tabela = .q-tabela, wykresy Chart.js
   (kolory z --q-wykres-* i --q-status-*). Telefon (do 767 px): kafle 2 w rzedzie, ikony 3 w rzedzie, tabela przewija sie w swojej ramce. */
.rp-glowa{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 6px;font-size:13px;color:var(--q-podpis-napis)}
.rp-glowa .rp-projekt{font-size:17px;font-weight:700;color:var(--q-tytul)}
.rp-glowa .rp-termin{color:var(--q-napis);font-weight:600}
.rp-glowa .rp-termin-wiecej{color:var(--q-podpis-napis);font-weight:400}
.rp-sekcja{margin:16px 0 8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--q-podpis-napis)}
.rp-sekcja[hidden],.rp-kafle[hidden],#rp-dziennik-karta[hidden]{display:none}
#rp-kafle.q-kafle{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:4px}
.rp-kafel .q-kafel-wartosc{overflow:hidden;text-overflow:ellipsis}
.rp-pasek{height:6px;border-radius:3px;background:var(--q-panel-szary);margin:7px 0 3px;overflow:hidden}
.rp-pasek>span{display:block;height:100%;max-width:100%;background:var(--q-wykres-wyroznienie)}
.rp-ikony{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.rp-ikona{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-width:0;min-height:92px;padding:14px 8px 10px;
  background:var(--q-bialy);border:1px solid var(--q-ramka);border-radius:var(--q-promien);color:var(--q-napis);font:inherit;font-size:12.5px;font-weight:600;
  line-height:1.25;text-align:center;cursor:pointer;overflow-wrap:anywhere}
.rp-ikona:hover{background:var(--q-zakladka-najechanie);border-color:var(--q-granat)}
.rp-ikona:focus-visible{outline:2px solid var(--q-granat);outline-offset:2px}
.rp-ikona .q-ik{width:26px;height:26px;color:var(--q-granat)}
.rp-pusto{margin:0;font-size:13px;color:var(--q-podpis-napis)}
/* R18 (R18-U2, wlasciciel 22.10): Quick actions w DWOCH PELNYCH RZEDACH z podpisem - kafle rowne w rzedzie (kazdy rzad na cala szerokosc,
   krawedzie obu rzedow w jednej linii, nigdy dziura po prawej), rowna wysokosc, nazwa wysrodkowana; telefon: 2 w rzedzie, ostatni sam - wysrodkowany */
#rp-ikony.rp-ikony-rzedy{display:flex;flex-direction:column;gap:14px}
.rp-rzad-tyt{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--q-podpis-napis)}
.rp-rzad-ikony{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.rp-ikony-rzedy .rp-ikona{min-height:96px;height:100%;justify-content:center;box-sizing:border-box}
.rp-ikony-rzedy .rp-ikona-napis{display:flex;align-items:center;justify-content:center;min-height:2.5em}
.rp-tabela-ramka{overflow-x:auto;max-width:100%}
.rp-tabela td{vertical-align:top;padding-top:6px;padding-bottom:6px}
.rp-tabela .rp-t-co{display:block;font-size:12px;color:var(--q-podpis-napis);white-space:normal}
.rp-tabela .rp-t-kiedy{white-space:nowrap}
.rp-tabela .rp-t-akcje{white-space:nowrap}
.rp-tabela .rp-t-akcje .q-btn+.q-btn{margin-left:6px}
.rp-wiecej{margin-top:10px}
.rp-wykresy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--q-odstep)}
.rp-wykresy>.card{margin:0;min-width:0}
.rp-wykres{position:relative;height:240px}
.rp-wykres-pod{margin:8px 0 0;font-size:12.5px;color:var(--q-podpis-napis)}
#rp-okno{--q-okno-szer:880px}
#rp-okno .rp-okno-srodek{display:flex;flex-direction:column;gap:8px}
.rp-okno-uwaga{margin:0;padding:8px 12px;border:1px solid var(--q-ramka);border-radius:var(--q-promien);background:var(--q-panel-szary);font-size:13px;color:var(--q-napis)}
.rp-okno-uwaga[hidden],.rp-podglad[hidden],.rp-podglad-pusty[hidden],.rp-opcja[hidden],#rp-bez-opcji[hidden]{display:none}
.rp-opcja{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end}
.rp-opcja-pion{flex-direction:column;align-items:stretch}
.rp-opcja .field{display:flex;flex-direction:column;gap:3px;min-width:150px}
.rp-opcja .rp-opcja-szer{flex:1 1 260px}
.rp-opcja-pod{margin:0;font-size:12.5px;color:var(--q-podpis-napis)}
.rp-wybor-wycen{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px}
.rp-podglad{display:block;width:100%;height:440px;border:1px solid var(--q-ramka);border-radius:var(--q-promien);background:var(--q-bialy)}
.rp-podglad-pusty{margin:0;padding:14px;border:1px dashed var(--q-ramka);border-radius:var(--q-promien);font-size:13px;color:var(--q-napis)}
/* R19 (R18-U5): ramka podgladu nie kurczy sie w kolumnie okna (zdanie View + opcje na niskim ekranie) - srodek okna przewija sie, ramka ma swoja wysokosc */
#rp-okno .rp-podglad{flex:none;min-height:240px}
/* R19 (R18-12 drobne): w opcjach w kolumnie (Pay Less, Detailed Valuation) pole nie rosnie na 260 px wysokosci (flex-basis z ukladu wierszowego) - bez pustej przestrzeni pod wyborem */
.rp-opcja-pion>.rp-opcja-szer{flex:none}
/* R19 (R19-U2, wlasciciel 23.10): ramka "SEND TO THE CLIENT BY LINK" na karcie wyceny (i wariacji) ma sie wyrozniac, ale nie czerwonym - naglowek ramki
   w stylu naglowka panelu (paleta C: tlo --q-panel-glowa-tlo, kreska --q-panel-glowa-ramka, tytul --q-panel-glowa-napis), tresc biala. Odcien tresci
   (biala albo jasnoniebieska --q-naglowek-tlo) - decyzja wlasciciela. Kolory tylko ze zmiennych; obszar DOK w tracker.html bez zmian (regula arkusza).
   R22A (wlasciciel 24.10, makieta R22 kolumna PO): ramka wysylki w RODZINIE WYSYLKI - wraca wyglad sprzed R18 (A5 / G14): tlo --q-wysylka-tlo
   #FFF5F2, ramka 1,5 px --q-wysylka-ramka #F47721, tytul granatowy wersalikami bez szarego paska (bylo R19-U2: pasek #D3DDE6, tresc biala). */
.vsh-box{background:var(--q-wysylka-tlo)!important;border:1.5px solid var(--q-wysylka-ramka)!important;overflow:hidden}
.vsh-box>div:first-child{margin:-12px -14px 10px!important;padding:9px 14px 0;background:transparent;color:var(--q-granat)!important}
@media (max-width:767px){
  #rp-kafle.q-kafle{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rp-kafel .q-kafel-wartosc{font-size:17px}
  .rp-ikony{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .rp-rzad-ikony{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rp-rzad-ikony>.rp-ikona:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 4px)}
  .rp-ikona{min-height:84px;padding:10px 4px 8px;font-size:11.5px}
  .rp-wykresy{grid-template-columns:minmax(0,1fr)}
  .rp-podglad{height:360px}
  .rp-tabela thead{display:none}
  .rp-tabela,.rp-tabela tbody,.rp-tabela tr,.rp-tabela td{display:block;width:auto}
  .rp-tabela tr{padding:8px 0;border-bottom:1px solid var(--q-linia-siatki)}
  .rp-tabela td{height:auto;padding:1px 0;border:0}
  .rp-tabela .rp-t-akcje{padding-top:6px}
  .rp-okno-przyciski .q-btn{flex:1 1 40%}
}
/* ══ R21-C (24.10.2026, wlasciciel T13 / T8 / T10: "pisalem wielokrotnie", "juz tyle razy powtarzam") - ZASADY STALE WYGLADU W CALEJ APLIKACJI ══
   Pilnuje tests/qs-r21-wyglad-chrome.js (r21wyglad) w prawdziwym Chrome na danych demo, 1366 i 390.
   T13: JEDNA wysokosc kontrolki: --q-wys-kontrolki = 36 px = wysokosc przycisku z bloku "JEDEN ROZMIAR PRZYCISKU" (27.09, kazda strona).
   Pole tekstowe, liczba, data, e-mail, lista (select) i maly przycisk q-btn poza tabela maja te wysokosc, wiec pola i przyciski w jednym
   rzedzie stoja na wspolnej linii (np. "Link valid until" obok "Copy link"). Wyjatki: komorki tabel (siatki edycji zostaja zwarte, przycisk
   wiersza tabeli 30 px), pasek gorny (szukaj), pole z klasa r21-wys-wlasna. */
:root{--q-wys-kontrolki:36px}
html body :is(input:is(:not([type]),[type=text],[type=date],[type=number],[type=email],[type=search],[type=tel],[type=url],[type=password],[type=month],[type=week],[type=time],[type=datetime-local]),select:not([multiple]):not([size])):not(td *):not(th *):not(.tb-konto *):not(.q-gora *):not(.q-szukaj *):not(.r21-wys-wlasna){height:var(--q-wys-kontrolki);box-sizing:border-box}
html body .q-btn:not(td *):not(th *){min-height:var(--q-wys-kontrolki)}
/* jednolinijkowe pole rosnace z trescia (opis i powod wariacji, I10) obok pol 36 px: minimum = wysokosc kontrolki (N-24 #3 - bylo 24 px) */
html body textarea.q-pole-wys:not(td *):not(th *):not(#r21c-t){min-height:var(--q-wys-kontrolki);padding-top:9px;padding-bottom:9px}
/* T8: przyciski w jednej kolumnie / rzedzie tej samej szerokosci i wyrownane (jak R18-U2 Quick actions).
   Notices, kolumna Actions (kazda rola, zakladka Subcontractors, gosc): przyciski wiersza jeden pod drugim na pelna szerokosc kolumny - kazdy
   przycisk kolumny tej samej szerokosci, te same krawedzie (dwa przyciski obok siebie po ~220 px nie mieszcza tabeli w 1366 px; wiersz i tak
   ma kilka linii tekstu w kolumnach pism, wiec rosnie malo). Zmienia N-30 (15.10, "obok siebie") - wpis w docs/ZMIANY-TESTOW.md.
   Karta wyceny / wariacji / wyceny podwykonawcy: przyciski czynnosci w rzedzie jednej szerokosci (--q-szer-przycisku-karty, najdluzszy
   napis rzedu "Remove £0 rows" miesci sie). */
:root{--q-szer-przycisku-karty:150px}
html body td > .ntj-akcje{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
html body .ci :is(button.btn,a.btn):not(td *):not(th *):not(.vsh-box *){min-width:var(--q-szer-przycisku-karty)}
/* R21b-P (R21-T7 = T8 na karcie SVAL-02, wlasciciel 24.10): przyciski pism na karcie wyceny (klienta i podwykonawcy: "Issue payment notice",
   "Replace pay less notice", "Issue pay less notice") jednej szerokosci - najdluzszy napis rzedu sie miesci; wyszarzony tez (ta sama szerokosc). */
:root{--q-szer-przycisku-pisma:190px}
html body .cert-platnik-akcje .ntj-akcje > .q-btn{min-width:var(--q-szer-przycisku-pisma);justify-content:center;text-align:center}
/* powod wyszarzenia "Issue payment notice" po terminie (R21-T6) jest zdaniem - pod rzedem przyciskow na cala szerokosc, przyciski zostaja w jednym rzedzie */
html body .cert-platnik-akcje .ntj-akcje > .cpa-pn-po{flex-basis:100%;order:9;max-width:none}
/* T10: odstep przycisk - tabela w Notices jednolicie 10 px (8-12 px): "Record a document you received" nad Applications for payment nie
   przykleja sie do tabeli ani do zdania "No applications yet." */
html body .ntj-wnioski > .ntj-akcje{margin-bottom:10px}
/* ══ R22A (24.10.2026, wlasciciel 13:00 "podobaja mi sie" - makiety/R22-KOLORY-CALA-APLIKACJA.html, kolumna PO): KOLORY WG ZNACZENIA, PACZKA A =
   karta wyceny (klienta i podwykonawcy), karta wariacji, Notices, kokpit projektu. Dwie zasady (docs/KOLORY-ZNACZENIA.md, rozdzial R22):
   1. RODZINA SEKCJI mowi, CZYM jest sekcja: pieniadze (--q-pieniadze-*), pisma (--q-pisma-*), wysylka / Twoj ruch (--q-wysylka-*, regula R19-U2
      wyzej), terminy (--q-terminy-*, po terminie --q-terminy-po-*). Sekcja z paskiem tytulu: pasek w tle rodziny + kreska 4 px po lewej, tresc
      biala; sekcja bez paska tytulu: cala w tle rodziny z kreska. Terminy karty: zegar biegnie (Submitted, Draft) bursztyn, po terminie (kropka
      czerwona .badge.br) czerwien, zalatwione (.badge.bg) bez rodziny.
   2. STAN na lewej krawedzi karty i wiersza listy = kolor kropki statusu (.badge zaraz po dacie w naglowku karty; wiersz Notices z komorek pism;
      wiersz Valuations na kokpicie - klasa q-st-* z kokpit.js wg certBadgeKlasa): zielony zalatwione, bursztyn czeka, czerwony po terminie,
      szary szkic. Kafle bez zmian (dolna kreska 3 px).
   Obszar DOK trackera (szablony kart) nietkniety - kolor nadaje ta regula po istniejacych id i klasach. TYLKO EKRAN (@media screen, bez #dokument
   i .q-dokument): wydruki, PDF i dokument z linku bez zmian. Pilnuje tests/qs-r22a-kolory-chrome.js (r22akolory), mutacje SW6720-SW6779. */
@media screen{
  /* 1. STAN KARTY (wycena klienta, wycena podwykonawcy, wariacja) - obramowanie, bo tresc karty ma wlasne tla */
  :is(#panel-certs,#panel-subcerts,#panel-vos) .q-lista-kart > .ci:has(> .ci-head > div:first-child > strong + span + .badge.bg):not(#dokument *):not(.q-dokument *):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){border-left:var(--q-akcent-statusu) solid var(--q-akcent-dobrze)!important}
  :is(#panel-certs,#panel-subcerts,#panel-vos) .q-lista-kart > .ci:has(> .ci-head > div:first-child > strong + span + .badge.bo):not(#dokument *):not(.q-dokument *):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){border-left:var(--q-akcent-statusu) solid var(--q-akcent-czeka)!important}
  :is(#panel-certs,#panel-subcerts,#panel-vos) .q-lista-kart > .ci:has(> .ci-head > div:first-child > strong + span + .badge.br):not(#dokument *):not(.q-dokument *):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){border-left:var(--q-akcent-statusu) solid var(--q-akcent-zle)!important}
  :is(#panel-certs,#panel-subcerts,#panel-vos) .q-lista-kart > .ci:has(> .ci-head > div:first-child > strong + span + .badge.bm):not(#dokument *):not(.q-dokument *):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){border-left:var(--q-akcent-statusu) solid var(--q-akcent-szkic)!important}
  /* 2. TERMINY NA KARCIE: "Contract payment dates" / "Statutory dates" (#pd-) i "Payment dates to this subcontractor" - cala sekcja w rodzinie terminow */
  :is(#panel-certs,#panel-subcerts) .q-lista-kart > .ci:not(:has(> .ci-head > div:first-child > strong + span + .badge.bg)) > .ci-body :is(div[id^="pd-"],div[id^="scterm-"] > .sub-pay-line):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    background:var(--q-terminy-tlo)!important;box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-terminy-kreska)!important;padding:8px 12px 8px 16px!important;border-radius:8px!important;margin:0 0 12px!important}
  :is(#panel-certs,#panel-subcerts) .q-lista-kart > .ci:has(> .ci-head > div:first-child > strong + span + .badge.br) > .ci-body :is(div[id^="pd-"],div[id^="scterm-"] > .sub-pay-line):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    background:var(--q-terminy-po-tlo)!important;box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-terminy-po-kreska)!important}
  /* 3. PIENIADZE NA KARCIE: "Payment received from client" / "Paid by the Client" / "Payment made to subcontractor" - pasek tytulu; wariacja: "Subtotal" (wycena zmiany) */
  :is(#panel-certs,#panel-subcerts) .ci-body > .cert-sumy-siatka > div:last-child > div:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){border-color:var(--q-ramka)!important;overflow:hidden}
  :is(#panel-certs,#panel-subcerts) .ci-body > .cert-sumy-siatka > div:last-child > div:first-child > div:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    margin:-10px -12px 8px!important;padding:7px 12px 7px 16px!important;background:var(--q-pieniadze-tlo)!important;color:var(--q-napis)!important;
    box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-pieniadze-kreska),inset 0 -1px 0 var(--q-ramka)!important}
  :is(#panel-certs,#panel-subcerts) .ci-body > .cert-sumy-siatka > div:last-child > div:first-child > div:first-child > div:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){color:var(--q-napis)!important}
  #panel-vos .ci-body div:has(> .fr > span[id^="vs-"]):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    background:var(--q-pieniadze-tlo)!important;box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-pieniadze-kreska)!important;padding-left:var(--q-rodzina-kreska)!important}
  /* 4. PISMA: Notices na karcie (.ntj-karta), "Notices from the client by post or email" (.ntc-box) - pasek tytulu; "In response to application" (.cert-wniosek)
     i payment notice / pay less strony placacej (.cert-platnik-akcje) - cala sekcja */
  .ntj-karta:not(#dokument *):not(.q-dokument *):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a),
  .ntc-box:not(#dokument *):not(.q-dokument *):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){border-color:var(--q-ramka)!important;overflow:hidden}
  .ntj-karta > .ntj-karta-tytul:not(#dokument *):not(.q-dokument *):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    margin:-10px -14px 8px!important;padding:7px 14px 7px 18px!important;background:var(--q-pisma-tlo)!important;color:var(--q-napis)!important;
    box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-pisma-kreska),inset 0 -1px 0 var(--q-ramka)!important}
  .ntc-box > .ntc-glowa:not(#dokument *):not(.q-dokument *):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    margin:-12px -14px 8px!important;padding:7px 14px 7px 18px!important;background:var(--q-pisma-tlo)!important;color:var(--q-napis)!important;
    box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-pisma-kreska),inset 0 -1px 0 var(--q-ramka)!important}
  :is(#panel-certs,#panel-subcerts) :is(.cert-wniosek,.cert-platnik-akcje):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    background:var(--q-pisma-tlo)!important;border-color:var(--q-ramka)!important;box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-pisma-kreska)!important;padding-left:18px!important}
  /* 5. NOTICES: "Next date" w rodzinie terminow, "Applications for payment" (wnioski drugiej strony i podwykonawcow) w rodzinie pism */
  #panel-notices #ntj-najblizszy:has(b):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    background:var(--q-terminy-tlo)!important;border-color:var(--q-ramka)!important;box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-terminy-kreska)!important;padding-left:16px!important}
  #panel-notices .ntj-wnioski:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    background:var(--q-bialy);border:1px solid var(--q-ramka);border-radius:8px;padding:0 14px 12px;overflow:hidden}
  #panel-notices .ntj-wnioski > .ntj-karta-tytul:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    margin:0 -14px 10px!important;padding:8px 14px 8px 18px!important;background:var(--q-pisma-tlo)!important;color:var(--q-napis)!important;
    box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-pisma-kreska),inset 0 -1px 0 var(--q-ramka)!important}
  /* 6. NOTICES, wiersz wyceny: stan z komorek pism - Missed (ntj-k-zle) czerwony, pismo do dania (ntj-k-czeka) bursztyn, szkic szary, pisma dane zielony */
  #panel-notices tr.ntj-wiersz:has(> td.ntj-k-zle) > td:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-zle);padding-left:12px}
  #panel-notices tr.ntj-wiersz:has(> td.ntj-k-czeka):not(:has(> td.ntj-k-zle)) > td:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-czeka);padding-left:12px}
  #panel-notices tr.ntj-wiersz:has(> td:first-child > .ntj-k-neutral):not(:has(> td:is(.ntj-k-zle,.ntj-k-czeka))) > td:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-szkic);padding-left:12px}
  #panel-notices tr.ntj-wiersz:has(> td.ntj-k-ok):not(:has(> td:is(.ntj-k-zle,.ntj-k-czeka))):not(:has(> td:first-child > .ntj-k-neutral)) > td:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-dobrze);padding-left:12px}
  /* 7. KOKPIT: "Money left" i "Valuations" - pasek naglowka w rodzinie pieniedzy (wyzej niz R10); "Next deadline" i "What needs you" - terminy
        (czerwien: termin minal / cos po terminie, przycisk licznika .hot); wiersze Valuations - kreska stanu (q-st-* z kokpit.js) */
  #kok-host :is(.kok-d-pieniadze,.kok-d-wyceny) > h2:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){--q-pasek-karty:var(--q-pieniadze-kreska)}   /* R23-U19: tylko kolor paska */
  #kok-host.kok-d .kok-d-termin:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    background:var(--q-terminy-tlo)!important;border:1px solid var(--q-ramka)!important;box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-terminy-kreska)!important}
  #kok-host.kok-d .kok-d-termin.kok-d-termin-minal:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){
    background:var(--q-terminy-po-tlo)!important;box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-terminy-po-kreska)!important}
  #kok-host.kok-d .kok-d-potrzeby:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){border:1px solid var(--q-ramka)!important}
  #kok-host.kok-d .kok-d-potrzeby > .kok-karta > h2:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){--q-pasek-karty:var(--q-terminy-kreska)}
  #kok-host.kok-d .kok-d-potrzeby:has(.kok-seg button.hot) > .kok-karta > h2:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){--q-pasek-karty:var(--q-terminy-po-kreska)}
  /* znacznik daty osi Next deadline w ukladzie tabeli (390 px) siedzi w th: regula K-R76 (napis th dziedziczy biel) dawala biala cyfre na bialym
     kolku (kontrast 1:1, zmierzone w R22A) - cyfra pustego znacznika w kolorze napisu, jak w ukladzie szerokim */
  #kok-host.kok-d .kok-d-os-zn:not(.kok-d-os-zn-minal):not(.kok-d-os-zn-po):not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){color:var(--q-napis)!important}
  #kok-host .kok-d-tab tr.q-st-dobrze > td:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-dobrze);padding-left:12px}
  #kok-host .kok-d-tab tr.q-st-czeka > td:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-czeka);padding-left:12px}
  #kok-host .kok-d-tab tr.q-st-zle > td:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-zle);padding-left:12px}
  #kok-host .kok-d-tab tr.q-st-szkic > td:first-child:not(#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a#r22a){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-szkic);padding-left:12px}
}
/* ══ R22B (25.10.2026, wlasciciel 22:10 "kolory maja byc skonczone na calym programie"): POZOSTALE EKRANY wg R22A i makiety R22 (kolumna PO).
   Ta sama zasada co R22A, rozdzial 1: naglowek panelu w RODZINIE tego, czym panel jest - tlo rodziny + kreska 4 px po lewej + linia pod spodem,
   napis granatowy. Rodzina wynika z ZAKLADKI (id panelu), a gdzie panel jednej zakladki niesie rozne rzeczy (Settings) - z klasy q-rodzina-*
   (legenda makiety R22) dopisanej do naglowka w markupie. TYLKO ZMIENNE (--q-pieniadze-*, --q-pisma-*, --q-terminy-*, --q-wysylka-*, --q-ramka,
   --q-napis): zadnego koloru na sztywno w tym bloku - pilnuje tests/qs-r22b-kolory-chrome.js (krok r22bkolory, R22B-S1). TYLKO EKRAN
   (@media screen; bez #dokument, bez .q-dokument poza karta odpowiedzi goscia): druki, PDF i sam dokument z linku bez zmian (D1).
     pieniadze: Cash flow, Cost report (CVR), Final account, Advance payments, Dayworks, Loss & expense, Estimate "Totals", Tender krok 3 (Compare),
                Settings: Deposit & discount, Final account & cost report
     pisma:     Instructions, Reports & Certificates, Contracts (zakladka i umowy.html), rejestr umow, Tender krok 1 (dokument), Settings: Document numbering
     terminy:   Extensions of Time, Completion, Defects, Settings: Valuation cycle
     wysylka:   formularz "+ Invite a person" (Project team), Tender krok 2 (Bidders), karta "Your answer" na stronie dokumentu z linku
   Odpowiedzi na 5 pytan R22B przyjete domyslnie (meldunek Etapu 1d): bez zmian w tej regule - kazda zmienia sie jedna zmienna albo jedna linia R22A. */
@media screen{
  :is(#panel-cash,#panel-cvr,#panel-fa,#panel-adv,#panel-daywork,#panel-le) .wz-karta-glowa:not(#dokument *):not(.q-dokument *):not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b),
  #panel-boq #qe-totals > .q-panel-glowa:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b),
  #krok-3.zk-tender > h2:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b),
  .wz-karta-glowa.q-rodzina-pieniadze:not(#dokument *):not(.q-dokument *):not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){
    --q-pasek-karty:var(--q-pieniadze-kreska)}   /* R23-U19: rodzina = tylko kolor paska; tlo, linia i ksztalt naglowka - blok R23-U19 na koncu */
  :is(#panel-instr,#panel-docs,#panel-umowy,#panel-register,#panel-notices) .wz-karta-glowa:not(#dokument *):not(.q-dokument *):not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b),
  body > .main h2.wz-karta-glowa:not(#dokument *):not(.q-dokument *):not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b),
  #krok-1.zk-tender > h2:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b),
  .wz-karta-glowa.q-rodzina-pisma:not(#dokument *):not(.q-dokument *):not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){
    --q-pasek-karty:var(--q-pisma-kreska)}
  :is(#panel-eot,#panel-completion,#panel-defects) .wz-karta-glowa:not(#dokument *):not(.q-dokument *):not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b),
  .wz-karta-glowa.q-rodzina-terminy:not(#dokument *):not(.q-dokument *):not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){
    --q-pasek-karty:var(--q-terminy-kreska)}
  #krok-2.zk-tender > h2:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b),
  .wz-karta-glowa.q-rodzina-wysylka:not(#dokument *):not(.q-dokument *):not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){
    --q-pasek-karty:var(--q-wysylka-ramka)}
  /* naglowek karty odpowiedzi goscia na stronie z linku - czesc ramki wysylki (tlo calej karty), nie naglowek karty aplikacji: zostaje */
  body.q-dokument #formularz.sk-odp > h2:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){
    background:var(--q-wysylka-tlo)!important;color:var(--q-napis)!important;
    box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-wysylka-ramka),inset 0 -1px 0 var(--q-ramka)!important}
  /* karta odpowiedzi goscia i formularz zaproszenia: cala ramka w rodzinie wysylki (jak .vsh-box, R19-U2) */
  body.q-dokument #formularz.sk-odp:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b),
  #panel-team #tm-formularz:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){
    background:var(--q-wysylka-tlo)!important;border:1.5px solid var(--q-wysylka-ramka)!important}
  /* R24-U9 (wlasciciel 26.10 "ramka nachodzi"): karta ma padding-top 0 (viewdoc.php), wiec margines -16px wypychal naglowek i jego pasek 16 px
     NAD ramke karty - na karte wyceny nad nia, a prawa krawedz ramki zaczynala sie dopiero pod naglowkiem. Naglowek od gornej krawedzi ramki,
     rogi gorne jak ramka (promien minus grubosc ramki). */
  body.q-dokument #formularz.sk-odp > h2:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){margin:0 -16px 12px!important;padding:10px 16px 10px 20px!important;
    border-radius:max(0px, calc(var(--q-promien) - 1.5px)) max(0px, calc(var(--q-promien) - 1.5px)) 0 0}
  /* Totals w Estimate i kroki Tender to juz naglowki panelu (wzor R10: odstep 6/18, 46 px) - R22B zmienia tylko kolor, nie ksztalt.
     R23-U1 (26.10, wlasciciel): Totals - kolor rodziny na CALYM pasku (#qe-totals > .q-panel-glowa), nie na samym napisie h3 (bylo: stalowy pasek
     z jasnoniebieskim prostokatem wokol slowa "Totals" i kreska rodziny przy napisie, nie przy krawedzi). */
  /* R22B reszta (26.10.2026, A6, makieta R22 ekrany 1 i 11): FACILITY - "Works facility" pieniadze; "Tranches" (najblizsza transza i harmonogram)
     terminy, czerwien gdy transza po dacie (pastylka Late); belka "Next action" w rodzinie wysylki (Twoj ruch); wiersz transzy - kreska stanu
     (Late czerwona, Drawn zielona, Scheduled szara, Requested / Assessed bursztyn). Klasy z facility.html bez zmian. */
  #dk-e .dk-e-karta.dk-e-works > h2:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){--q-pasek-karty:var(--q-pieniadze-kreska)}
  #dk-e .dk-e-karta:has(> table.dk-e-tab td.dk-e-tab-l) > h2:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){--q-pasek-karty:var(--q-terminy-kreska)}
  #dk-e .dk-e-karta:has(> table.dk-e-tab .dk-e-pig.dk-e-spozniona) > h2:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){--q-pasek-karty:var(--q-terminy-po-kreska)}
  #dk-e .dk-e-nast:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){background:var(--q-wysylka-tlo)!important;border:1.5px solid var(--q-wysylka-ramka)!important}
  #dk-e table.dk-e-tab tr:has(.dk-e-pig.dk-e-spozniona) > td:first-child:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-zle)}
  #dk-e table.dk-e-tab tr:has(.dk-e-pig.zielony) > td:first-child:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-dobrze)}
  #dk-e table.dk-e-tab tr:has(.dk-e-pig.szary):not(:has(.dk-e-spozniona)) > td:first-child:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-szkic)}
  #dk-e table.dk-e-tab tr:has(.dk-e-pig):not(:has(.dk-e-pig:is(.szary,.zielony,.czerwony))) > td:first-child:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-czeka)}
  /* LISTA PROJEKTOW (dashboard.html): wiersz - kreska stanu 4 px na lewej krawedzi (czerwien zaleglosc, bursztyn czeka, szary bez zegara; bylo 3 px
     tylko przy zaleglosci i czeka); kolumna "Next date" - bursztyn w oknie ostrzezenia, czerwien po terminie (klasa pl-data z wierszHtml);
     panel "Payment deadlines" w rodzinie terminow */
  body.q-app .plist td.pl-edge:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){border-left:0!important;padding-left:10px!important;box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-szkic)}
  body.q-app .plist td.pl-edge.warn:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-czeka)}
  body.q-app .plist td.pl-edge.bad:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){box-shadow:inset var(--q-akcent-statusu) 0 0 var(--q-akcent-zle)}
  body.q-app .plist td.pl-data.czeka > b:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){color:var(--q-status-czeka-napis)!important}
  body.q-app .plist td.pl-data.zle > b:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){color:var(--q-status-zle)!important}
  body.q-app .dl-panel > .dl-head:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){--q-pasek-karty:var(--q-terminy-kreska)}
  /* IMPORT (Estimate > Import): ramka "Import from spreadsheet" = Twoj ruch - rodzina wysylki (bylo pomarancz z ramka #FFD9C2 wpisana w kod) */
  #panel-import #imp2-box:not(#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b#r22b){background:var(--q-wysylka-tlo)!important;border:1.5px solid var(--q-wysylka-ramka)!important}
}
/* ══ TELEFON 390 px (Etap 1d, 25.10.2026, wlasciciel: makiety/ZRZUTY-390/LISTA-390.md, najpierw Notices i tabela pozycji na karcie wyceny) ══
   1. NOTICES (pkt 1-5): na waskim ekranie kazdy wiersz tabel .ntj-tab jest KARTA "podpis kolumny: wartosc" (podpis z data-l, ktory dopisuje
      renderNotices w qs-notices.js) - zadna kolumna (Actions, Notified sum, terminy) nie chowa sie za krawedzia, wiersz nie ma pustych 180 px,
      naglowki kolumn nie sa ucinane. Zdanie pod wierszem (komorka na kilka kolumn) - pelna szerokosc, z zawijaniem.
   2. TABELA POZYCJI NA KARCIE WYCENY (pkt 6): opis zwezony do 150 px z zawijaniem, wiec obok Ref widac pierwsza kolumne kwot; nad tabela
      podpowiedz, ze tabela przewija sie w bok. Szeroki ekran bez zmian. Pilnuje tests/qs-telefon-390-chrome.js (krok telefon390). */
@media screen and (max-width:600px){
  .ntj-przewin{overflow-x:visible}
  .ntj-przewin > table.ntj-tab,.ntj-przewin > table.ntj-tab > tbody,.ntj-przewin > table.ntj-tab > tbody > tr{display:block;width:auto}
  .ntj-przewin > table.ntj-tab > thead{display:none}
  .ntj-przewin > table.ntj-tab > tbody > tr{background:var(--q-bialy);border:1px solid var(--q-ramka);border-radius:8px;margin:0 0 10px;padding:6px 10px}
  .ntj-przewin > table.ntj-tab > tbody > tr > td{display:block;border:0;padding:4px 0;white-space:normal;overflow-wrap:anywhere}
  .ntj-przewin > table.ntj-tab > tbody > tr > td[data-l]{display:grid;grid-template-columns:42% minmax(0,1fr);gap:8px;align-items:start}
  .ntj-przewin > table.ntj-tab > tbody > tr > td[data-l]::before{content:attr(data-l);font-size:11px;font-weight:700;color:var(--q-podpis-napis)}
  .ntj-przewin > table.ntj-tab > tbody > tr > td[data-l] > *{min-width:0}
  .ci-body > .qv-scroll::before{content:"Swipe the table sideways for all columns";display:block;font-size:12px;color:var(--q-podpis-napis);margin:0 0 6px}
  .ci-body > .qv-scroll > table.qv-table > thead > tr > th:nth-child(2),
  .ci-body > .qv-scroll > table.qv-table > tbody > tr > td:nth-child(2){width:150px!important;min-width:150px!important;max-width:150px!important}
  /* zawija sie tylko tresc wierszy - naglowek "Description" zostaje w jednej linii (VC-19) */
  .ci-body > .qv-scroll > table.qv-table > tbody > tr > td:nth-child(2){white-space:normal!important;overflow-wrap:anywhere}
  /* zmierzone: kolumna ma 186 px (150 + odstep komorki; tabela auto nie liczy border-box) - bylo 364 px, kolumna kwot wchodzi na ekran */
}
/* ══ R23 (26.10.2026, wlasciciel test paczki 0103 - docs-adrian/DLA-AGENTA-RUNDA-R23-ZBIERANE.md) i TELEFON 390 pkt 7, 9, 10 (LISTA-390.md) ══
   U1 VALUE ENGINEERING, karta "Estimate lines": pola Proposed (Qty, Rate, Cost) i pola w siatce karty (Lump sum to client / on your cost / Why a
      lump sum) maja wysokosc kontrolki programu --q-wys-kontrolki (T13, 36 px) i stoja w JEDNEJ linii z reszta rzedu: wiersz "Now" ma te sama
      wysokosc co "Proposed" (tekst na srodku pola), a etykieta w dwoch liniach ("Lump sum saving on your cost (optional)" przy 1536 px) nie
      przesuwa swojego pola 14 px nizej od sasiednich - pola rzedu wyrownane do dolu.
   Tylko ekran, tylko zmienne (bez kolorow). Pilnuje tests/qs-r23-ekrany-chrome.js (krok r23ekrany) i qs-telefon-390-chrome.js (telefon390). */
@media screen{
  #ve-body .ve-siatka:not(#r23#r23){align-items:end}
  #ve-body .ve-linia-tab .ve-liczba:not(#r23#r23),#ve-body .ve-pole > input.q-pole:not(#r23#r23),#ve-body .ve-pole > select.q-pole:not(#r23#r23){height:var(--q-wys-kontrolki);box-sizing:border-box}
  #ve-body .ve-linia-tab .ve-linia-rzad:not(.ve-linia-naglowek):not(#r23#r23){min-height:var(--q-wys-kontrolki)}
}
/* TELEFON 390 (do 600 px): 7. przyciski pod tabela karty wyceny / wariacji ("+ Add Row", "+ Add Variations", "Restore Items", "Remove £0 rows")
   jeden pod drugim na cala szerokosc - te same krawedzie (bylo: lewa krawedz 45 / 53 px, marginesy w linii 8px 0 i 8px 8px);
   9. nazwa projektu w pasku gornym do trzech linii pismem 11 px zamiast uciecia ("DEMO JCT..."), tytul strony zawija sie (bez wielokropka);
   10. pasek dzialow przewija sie w bok - na prawej krawedzi strzalka na wygaszeniu (przyklejona), znika po dojechaniu do ostatniej zakladki. */
@media screen and (max-width:600px){
  :is(#panel-certs,#panel-subcerts,#panel-vos) .ci-body > button.btn:not(#r23#r23){display:block;width:100%;margin:8px 0 0!important}
  /* miejsce na nazwe (zmierzone 390: sciezka 59 px): przycisk Menu sama ikona (napis "Menu" zostaje w drzewie dostepnosci), mniejsze odstepy ikon,
     przelacznik projektu bez ikony domu i strzalki - sama nazwa jest przyciskiem; logo 22 px i pasek 46 px bez zmian (P7-3) */
  .q-rama .tb-konto #navMobBtn:not(#r23#r23){font-size:0;gap:0;padding:4px 6px}
  .q-rama .tb-konto .topbar-right:not(#r23#r23){gap:7px}
  .q-rama .tb-sciezka > .proj-switch:not(#r23#r23){min-width:0;width:100%;max-width:100%;flex:1 1 auto}
  .q-rama .tb-sciezka .ps-btn:not(#r23#r23){width:100%;min-width:0;height:auto;white-space:normal}
  .q-rama .tb-sciezka .ps-btn > svg:not(#r23#r23){display:none}
  .q-rama .tb-sciezka #tb-projekt-nazwa:not(#r23#r23){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;min-width:0;
    white-space:normal;text-overflow:clip;overflow-wrap:break-word;font-size:11px;line-height:12px;text-align:left}
  .q-rama .main > .tb-projekt h1.page:not(#r23#r23),.q-rama #page-title:not(#r23#r23){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-size:20px;line-height:1.25}
  .q-rama .q-dzialy:not(#r23#r23)::after{content:"\203A";position:sticky;right:0;flex:none;display:flex;align-items:center;justify-content:flex-end;
    width:34px;margin-left:-6px;padding-right:6px;box-sizing:border-box;font-size:22px;font-weight:700;color:var(--q-granat);pointer-events:none;
    background:linear-gradient(to right,transparent,var(--q-zakladki) 60%)}
}
/* wygaszenie strzalki na koncu przewijania tylko tam, gdzie przegladarka zna os przewijania (bez niej strzalka po prostu zostaje) */
@supports (animation-timeline:scroll()){
  @media screen and (max-width:600px){ .q-rama .q-dzialy:not(#r23#r23)::after{animation:q-dzialy-koniec linear both;animation-timeline:scroll(nearest inline)} }
}
@keyframes q-dzialy-koniec{0%,92%{opacity:1}100%{opacity:0}}
/* ══ R23-U19 (26.10.2026, wlasciciel 16:37 "wciaz sa rozne naglowki", 7 zrzutow kreatora Settings): JEDEN WYGLAD NAGLOWKA KARTY W CALEJ APLIKACJI ══
   Kazdy naglowek karty / panelu (lista R10: .wz-karta-glowa, .q-panel-glowa, Payment deadlines, kokpit, Facility, IMS, Reports, Model revisions,
   Tender) ma TO SAMO tlo --q-panel-glowa-tlo (#D3DDE6), te sama linie pod spodem, napis, wysokosc i kroj (R10) oraz TEN SAM pasek po lewej
   (--q-rodzina-kreska, 4 px). Zmienia sie TYLKO kolor paska: zmienna --q-pasek-karty, ktora ustawiaja reguly rodzin (R22A rozdz. 7, R22B - po
   id zakladki albo klasie q-rodzina-* w markupie): pieniadze --q-pieniadze-kreska (stalowy niebieski), pisma --q-pisma-kreska (liliowy), terminy
   --q-terminy-kreska (bursztyn; po terminie --q-terminy-po-kreska), wysylka --q-wysylka-ramka (brzoskwinia / marka); bez rodziny granat --q-granat.
   Tla rodzin na NAGLOWKACH (R22B: #E6EEF5, #F3EBF9, #FBF1E3) zdjete - zostaja na sekcjach wewnatrz kart (R22A rozdz. 2-5) i na ramkach (wysylka,
   Next action, Import, karta odpowiedzi goscia). Poza regula: naglowek karty pozycji listy (.ci-head - stan niesie lewa krawedz karty, R22A),
   podsekcje (R13: biale z linia), pasek narzedzi Estimate (.boq-pasek). TYLKO EKRAN, tylko zmienne; druk i dokument z linku bez zmian (D1).
   Pilnuje tests/qs-r23-naglowki-chrome.js (krok r23naglowki), mutacje SW7550-SW7569. */
@media screen{
  :is(.wz-karta-glowa:not(.boq-pasek),.q-panel>.q-panel-glowa,.dl-panel>.dl-head,#kok-host .kok-karta>h2,#kok-host .kok-brakikarta>h2,#dk-e .dk-e-karta>h2,
      #dk-e .dk-wykres>h3,#dk-e .dk-decyzje>h2.dk-sekcja,.ims-panel .card>h2:first-child:not(.dk-sekcja),#panel-docs .rap-kafel>div:first-child,.card>.ch,
      .card.zk-tender>h2:first-child):not(#dokument *):not(.q-dokument *):not(.q-podsekcja):not(#kok-host .kok-zak-tresc>.kok-karta>h2):not(#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19){
    background:var(--q-panel-glowa-tlo)!important;color:var(--q-panel-glowa-napis)!important;
    box-shadow:inset var(--q-rodzina-kreska) 0 0 var(--q-pasek-karty,var(--q-granat)),inset 0 -1px 0 var(--q-panel-glowa-ramka)!important}
  /* naglowek .wz-karta-glowa poza karta (np. "Pay less notices on earlier valuations" w sekcji karty wyceny, odstep 0 18 px) - ksztalt R10 jak w karcie */
  .wz-karta-glowa:not(.boq-pasek):not(#dokument *):not(.q-dokument *):not(#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19#u19){
    box-sizing:border-box!important;min-height:var(--q-panel-glowa-wys)!important;padding:var(--q-panel-glowa-odstep)!important;
    font-family:var(--q-kroj)!important;font-size:15px!important;font-weight:700!important;border:0!important}
}