/* ===================================================================
   KURO NEW — WSPÓLNA WARSTWA UI

   DLACZEGO POWSTAŁA (pomiar prototypu, 04.08.2026):
   · 22 pliki HTML, 694 kB, z czego 197 kB (28%) to CSS
   · paleta `:root` wklejona 17 razy — zmiana jednego koloru firmowego
     wymagała edycji siedemnastu miejsc
   · ten sam przycisk: `.btn` w 14 plikach, `.b` w 4
   · cztery różne implementacje okna modalnego
   · 93 reguły CSS identyczne w więcej niż jednym pliku

   ZASADA WDROŻENIA: ten plik wchodzi <link>-iem PRZED własnym <style>
   modułu, więc lokalne reguły nadal wygrywają. Dzięki temu podpięcie
   biblioteki niczego nie psuje, a nadmiarowe reguły usuwa się z modułów
   stopniowo, plik po pliku.

   Definicje wzięte z modułów, które już działają — to nie jest nowy styl,
   tylko ten sam, sprowadzony do jednego miejsca.
   =================================================================== */

/* ---------- 1. RESET I PALETA ---------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0}
:root{
  --bg:#F5F3F0; --surface:#fff; --s2:#FAF8F6; --s3:#F1EDE9;
  --ink:#1A1613; --soft:#655D57; --faint:#9C938C;
  --line:#E8E2DC; --line2:#D9D1CA;
  --brand:#E23B32; --brandS:#FBEBEA;
  --pos:#1F8A5B; --warn:#C07A12; --info:#2F8FBF;
  --head:#16130F;
  --disp:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --r-sm:8px; --r-md:11px; --r-lg:14px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1c1916; --surface:#252119; --s2:#211d16; --s3:#2b261f;
  --ink:#F0EBE5; --soft:#B7AEA6; --faint:#8a8078;
  --line:#332e28; --line2:#403a33; --brandS:#3a1f1c; --head:#100d0a;
}}
body{background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px}
a{color:inherit}

/* ---------- 2. UKŁAD STRONY ------------------------------------------ */
.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 50px}
.hd{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.hd h1{font-family:var(--disp);font-size:24px;font-weight:800;margin:0}
.hd .sub{font-size:12.5px;color:var(--soft);margin-top:3px}
.hd .sp{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ---------- 3. PASEK NAWIGACJI (wstrzykiwany przez kuro-nav.js) ------ */
/* Przypięte do #kuroNav, a nie do samej klasy `.top` — Pulpit i Moje zarobki
   mają własny nagłówek pod tą samą nazwą i biblioteka nie może im narzucać
   swojej wysokości ani układu. */
#kuroNav.top{background:var(--head);color:#C9C2BB;display:flex;align-items:center;gap:6px;padding:0 16px;height:48px}
#kuroNav .brand{display:flex;align-items:center;gap:9px;margin-right:12px;text-decoration:none}
#kuroNav .mark{width:28px;height:28px;border-radius:7px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px}
#kuroNav .brand b{color:#fff;font-family:var(--disp);letter-spacing:.14em;font-size:14px}
#kuroNav .tabs{display:flex;gap:2px;overflow-x:auto}
#kuroNav .tab{border:0;background:none;color:#B7AEA6;font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:var(--r-sm);text-decoration:none;white-space:nowrap;cursor:pointer}
#kuroNav .tab:hover{background:#211C16;color:#eee}
#kuroNav .tab.on{background:var(--brand);color:#fff}

/* ---------- 4. PRZYCISKI --------------------------------------------
   Jedna definicja, cztery odmiany. `.b` to alias dla modułów, które
   historycznie używały krótszej nazwy — dzięki niemu nie trzeba dotykać
   markupu, żeby ujednolicić wygląd. */
.btn,.b{border:1px solid var(--line2);background:var(--surface);color:var(--ink);
  padding:8px 13px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover,.b:hover{border-color:var(--brand);color:var(--brand)}
.btn.pri,.b.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pri:hover,.b.pri:hover{color:#fff;opacity:.92}
.btn.ok,.b.ok{background:var(--pos);border-color:var(--pos);color:#fff}
.btn.ok:hover,.b.ok:hover{color:#fff;opacity:.92}
.btn.ghost,.b.ghost{border-color:transparent;background:none;color:var(--soft)}
.btn.del,.b.del{color:var(--brand);border-color:transparent;background:none}
.btn:disabled,.b:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover,.b:disabled:hover{border-color:var(--line2);color:var(--ink)}

/* ---------- 5. ZAKŁADKI SEKCJI --------------------------------------- */
.seg{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:14px;flex-wrap:wrap}
.seg button{border:0;background:none;color:var(--soft);font:inherit;font-size:13px;font-weight:700;padding:7px 13px;border-radius:var(--r-sm);cursor:pointer}
.seg button.on{background:var(--ink);color:var(--surface)}

/* ---------- 6. KARTY I KAFELKI --------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:14px}
.card h3{margin:0;padding:12px 15px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:700;border-bottom:1px solid var(--line);background:var(--s2);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3 .hint{margin-left:auto;font-size:10.5px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--faint)}
.cnt{background:var(--brand);color:#fff;border-radius:9px;padding:1px 7px;font-size:11px}

.kpi{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 15px;border-left:3px solid var(--line2)}
.kpi .l{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:700}
.kpi .v{font-size:22px;font-weight:800;margin:3px 0 1px}
.kpi .m{font-size:11px;color:var(--soft);line-height:1.45}
.kpi.grn{border-left-color:var(--pos)}
.kpi.amb{border-left-color:var(--warn)}
.kpi.red{border-left-color:var(--brand)}
.kpi.blu{border-left-color:var(--info)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px}

/* ---------- 7. TABELE ------------------------------------------------ */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  font-weight:700;padding:7px 10px;border-bottom:1px solid var(--line2)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 8. ZNACZNIKI I CHIPY ------------------------------------- */
.tag{font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:4px;white-space:nowrap;display:inline-block}
.tag.grn{background:#E7F5EC;color:var(--pos)}
.tag.amb{background:#FBF1DF;color:var(--warn)}
/* OSTRZEZENIE PRZY LICZBIE — zolty trojkat obok wartosci, ktora jest
   PRZENIESIONA, a nie zmierzona (wlasciciel, 25.08: „PRZEBIEG NIE
   ZMIENIONY"). Krotkie, w jednej linii z liczba, zeby nie rozbijalo
   tabeli — czytelnik ma zobaczyc liczbe i od razu wiedziec, ile jest
   warta. */
.ost{display:inline-flex;align-items:center;gap:3px;background:#FBF1DF;color:var(--warn);
  border:1px solid #EBD9AE;border-radius:5px;padding:0 5px;margin-left:6px;
  font-size:9.5px;font-weight:800;letter-spacing:.03em;white-space:nowrap;vertical-align:middle}
.tag.red{background:var(--brandS);color:var(--brand)}
@media (prefers-color-scheme:dark){
  .tag.grn{background:#16342a}.tag.amb{background:#3a2f14}
}
.chip{border:1px solid var(--line2);background:var(--surface);color:var(--soft);font-size:11.5px;
  font-weight:700;padding:5px 10px;border-radius:999px;cursor:pointer;font-family:inherit}
.chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* ---------- 9. OKNO MODALNE ------------------------------------------
   Jedna implementacja zamiast czterech (.scrim/.ov/.pz-ov/.modal). */
.scrim{position:fixed;inset:0;background:rgba(10,8,6,.5);display:none;align-items:center;
  justify-content:center;z-index:60;padding:20px}
.scrim.open{display:flex}
.modal{background:var(--surface);border-radius:15px;width:600px;max-width:100%;max-height:90vh;
  overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.mh{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--s2)}
.mh h3{margin:0;font-size:14px;font-weight:800}
.mh .x{margin-left:auto;border:0;background:none;font-size:18px;color:var(--faint);cursor:pointer;line-height:1}
.mb{padding:14px 16px}
.mfo{display:flex;gap:10px;align-items:center;padding:13px 18px;border-top:1px solid var(--line)}

/* ---------- 10. POLA FORMULARZA -------------------------------------- */
.mf label{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);
  font-weight:700;display:block;margin-bottom:4px}
.mf input,.mf select,.mf textarea{width:100%;border:1px solid var(--line2);background:var(--surface);
  color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;font:inherit;font-size:13px}
.mf input:focus,.mf select:focus,.mf textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.mf.full{grid-column:1/-1}

/* ---------- 11. DROBIAZGI -------------------------------------------- */
.soft{color:var(--faint)}
.empty{padding:38px 16px;text-align:center;color:var(--soft)}
.note{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:10px;padding:11px 13px;font-size:12.5px;
  color:var(--soft);line-height:1.6}
.note b{color:var(--ink)}
/* Wariant z ikoną obok tekstu — TYLKO na życzenie. Gdyby `display:flex` siedziało
   w samym `.note`, każdy moduł używający tej klasy do zwykłego akapitu dostawałby
   tekst rozbity na kolumny (tak właśnie rozjechało się „Jak liczymy" w Moich zarobkach). */
.note.zikona{display:flex;gap:9px}

/* ---------- 12. DRUK ------------------------------------------------- */
@media print{
  .top,.seg,.btn,.b,#uwBtn{display:none !important}
  .wrap{max-width:none;padding:0}
  .card{break-inside:avoid;border-color:#ccc}
}