/* ============ TOKENS — marka HS Budownictwo, kierunek B "Warsztat" ============ */
:root{
  /* neutralne: zimne (zinc) — czerwień czyta się na nich czyściej niż na ciepłych */
  --paper:#F4F4F5; --surface:#FFFFFF; --surface-2:#FAFAFA; --surface-3:#F1F1F3;
  --ink:#18181B; --ink-muted:#3F3F46; --ink-faint:#52525B;
  --ink-hint:#71717A;        /* najjaśniejszy dopuszczalny TEKST na bieli — 4,8:1 */
  --ink-placeholder:#A1A1AA; /* tylko placeholder (tekst zastępczy), nigdy treść */
  --line:#E4E4E7; --line-strong:#A1A1AA; --line-soft:#F1F1F3;
  /* czerwień z logo — jedyny nasycony akcent, NIE zmieniać wartości */
  --accent:#ED1C24; --accent-hover:#DC141C; --accent-press:#C21017; --accent-ink:#FFFFFF;
  --accent-soft:#FEF3F2;
  /* ciemna chroma: sidebar + header jedną bryłą, rejon #0B0B0B ekranu logowania */
  --chrome:#0F0F10; --chrome-ink:#FAFAFA; --chrome-ink-muted:#A1A1AA;
  --chrome-line:rgba(255,255,255,.09); --chrome-hover:rgba(255,255,255,.07);
  /* status — ciemny tekst na jasnym tle */
  --ok:#17552B; --ok-soft:#ECFDF3; --ok-line:#A9D4B6;
  --warn:#7A4E00; --warn-soft:#FEF6E7; --warn-line:#E8C77A; --warn-accent:#D97706;
  --danger:#B42318; --danger-soft:#FEF3F2; --danger-line:#F0C2BF;
  --info:#3F3F46; --info-soft:#F4F4F5; --info-line:#D4D4D8;
  /* awatar wykonawcy „inny” na liście zadań (przegląd 2026-09-19, W2): jedyne
     miejsce z niebieskim — celowo NIE `--info` (ten token jest tu szarym
     neutralem, używanym gdzie indziej jako chip/panel „info”; przemalowanie
     --info na niebiesko zmieniłoby też te miejsca). */
  --avatar-inny:#1E40AF; --avatar-inny-soft:#EFF6FF;
  /* fiolet roli "kierownik" — JEDYNY ocalały token z rodziny --tag-*.
     Zostaje, bo .chip--accent jest żywa: web/app/routers/brygadzisci.py:21
     (TYP_INFO) buduje tę nazwę klasy w Pythonie, więc nie ma jej w żadnym
     class="..." i grep po szablonach jej nie widzi. Nie usuwać. */
  --tag-violet:#3D1E7A; --tag-violet-soft:#EBE3FA;
  /* ostre kąty zostają */
  --radius-s:0px; --radius-m:0px; --radius-l:0px; --radius-float:0px; --radius-pill:0px; --radius-feature:0px;
  /* skala głębi — pięć szczebli, każdy z przypisanym zastosowaniem */
  --elev-1:0 1px 2px rgba(24,24,27,.05);              /* karta w spoczynku */
  --elev-2:0 6px 14px -6px rgba(24,24,27,.28);        /* pod kursorem */
  --elev-3:0 12px 28px -14px rgba(24,24,27,.35);      /* karta podniesiona */
  --elev-4:0 16px 34px -16px rgba(15,15,16,.70);      /* pasek przyklejony */
  --elev-in:0 1px 2px rgba(24,24,27,.40) inset;       /* wciśnięty */
  /* typografia: waga robi hierarchię, mono niesie DANE (kanały, liczby, daty) */
  --font-body:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-display:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --maxw:680px;
  --sidebar-w:240px;
  --sidebar-bg:var(--chrome); --sidebar-ink:var(--chrome-ink); --sidebar-ink-muted:var(--chrome-ink-muted);
  color-scheme: light;
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5; font-weight:400; letter-spacing:-.16px;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; margin:0; text-wrap:balance;}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:16px;}
a{color:inherit; text-decoration:none;}
.tabular{font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:0;}
[hidden]{display:none!important;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms!important; transition-duration:.001ms!important;} }

/* ============ APP SHELL ============ */
.app{max-width:var(--maxw); margin:0 auto; min-height:100vh; background:var(--paper); position:relative; display:flex; flex-direction:column;}
/* Ekran logowania zostaje wąski (typowa karta logowania) — reszta appki
   (po zalogowaniu) ma wypełniać całe okno przeglądarki, nie tylko środkowe
   ~50% na szerokim monitorze (zgłoszone 2026-09-15: "+/-25% szerokości
   monitora" pustego marginesu po obu stronach). base.html dokłada tę klasę
   tylko, gdy `uzytkownik` jest zalogowany. */
.app.app--wide{max-width:none;}
/* ============ CIEMNA CHROMA — sidebar i header jedną bryłą ============ */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--chrome); color:var(--chrome-ink);
  border-bottom:none;
  display:flex; align-items:center; gap:14px; padding:0 24px; min-height:58px;
}
.topbar__back{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  background:transparent; border:1px solid var(--chrome-line); color:var(--chrome-ink);
  flex:0 0 auto; cursor:pointer; transition:background .18s ease, border-color .18s ease;
}
.topbar__back:hover{background:var(--chrome-hover); border-color:rgba(255,255,255,.28);}
.topbar__titles{flex:1 1 auto; min-width:0;}
.topbar__eyebrow{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--chrome-ink-muted); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* na telefonie sidebar (z logo) jest schowany — logo wraca w topbarze;
   od 960px logo jest już w sidebarze, więc tu zostaje sam tekst */
.topbar__logo{display:none;}
.topbar__title{
  font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--chrome-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar__crumb-parent{color:var(--chrome-ink-muted); font-weight:400;}
.topbar__crumb-sep{color:#3F3F46; padding:0 4px;}
.topbar__user{flex:0 0 auto; display:flex; align-items:center; gap:10px;}
.iconbtn{
  width:44px; height:44px; border:none; background:transparent; color:var(--chrome-ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .18s ease;
}
.iconbtn:hover{background:var(--chrome-hover);}

.view{flex:1 1 auto; padding:16px; overflow-x:hidden;}
.view > .stack{display:flex; flex-direction:column; gap:14px;}

.topnav{
  /* Celowo NIE sticky: razem z .topbar (też sticky top:0, wyższy z-index)
     przy przewijaniu nachodziły na siebie i topnav znikał pod topbarem
     (znalezione 2026-09-15 przy okazji anchor-linków do budów). */
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; gap:8px; padding:8px 16px;
  /* 8 pozycji + IBM Plex Sans (szerszy od Intera) nie mieszczą się na 390px
     nawet ucięte do kilku liter — pasek przewija się w poziomie zamiast
     obcinać etykiety (Task 12, 2026-09-18). */
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.topnav::-webkit-scrollbar{display:none;}
.topnav__item{
  flex:0 0 auto; min-width:0; min-height:44px; padding:9px 14px; background:var(--surface-2); border:none; color:var(--ink-muted);
  border-radius:var(--radius-m); font-size:12px; font-weight:500; text-align:center; line-height:1.3;
  white-space:nowrap; overflow:visible; text-overflow:clip;
  display:inline-flex; align-items:center;
}
.topnav__item.active{color:var(--accent-ink); background:var(--ink);}

/* ============ PASEK KONTEKSTU — tylko ekrany z zakresem czasu/akcjami ============ */
.ctxbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 24px; background:var(--surface); border-bottom:1px solid var(--line);
}
.ctxbar__spacer{flex:1 1 auto;}
.ctxbar__date{font-size:13px; color:var(--ink-faint); font-variant-numeric:tabular-nums;}

/* ============ TYPO HELPERS ============ */
.eyebrow{font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted);}
.h1{font-size:21px; font-weight:500; letter-spacing:-.21px;}
.h2{font-size:18px; font-weight:500; letter-spacing:-.18px;}
.h3{font-size:16px; font-weight:500; letter-spacing:-.16px;}
.muted{color:var(--ink-muted);}
.faint{color:var(--ink-faint); font-size:13px;}
.small{font-size:13px;}

/* ============ CARD / SURFACES ============ */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:16px; box-shadow:var(--elev-1);
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.card--tap{display:block; width:100%; text-align:left; cursor:pointer;}
.card--tap:hover{box-shadow:var(--elev-3); border-color:var(--line-strong);}
.card--tap:active{transform:scale(.995); box-shadow:var(--elev-in);}

/* Karta „Wczoraj na budowie” (Punkty dnia, właściciel 2026-09-22) — ciemna,
   celowo odróżniona od reszty ekranu (notatka z makiety: „ma być wizualnie
   wiadomo, że to z wczoraj”), żeby nie dało się jej pomylić z polami do
   wypełnienia. Ta sama chroma co sidebar/topbar (--chrome). */
.wczoraj{background:var(--chrome); color:var(--chrome-ink); border:0; padding:0; overflow:hidden;}
.wczoraj__pasek{height:3px; background:var(--accent);}
.wczoraj__glowka{padding:14px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--chrome-line);}
.wczoraj__kwadrat{width:9px; height:9px; background:var(--accent); flex-shrink:0;}
.wczoraj__etykieta{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;}
.wczoraj__meta{font-size:13px; color:var(--chrome-ink-muted);}
.wczoraj__tresc{padding:16px 18px 18px; display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap;}
.wczoraj__pola{display:flex; gap:28px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--chrome-line);}
.wczoraj__pole-etykieta{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--chrome-ink-muted);}
.wczoraj__pole-wartosc{font-size:13.5px;}
.wczoraj__punkt{display:flex; gap:12px; align-items:flex-start; padding:5px 0;}
.wczoraj__punkt-numer{font-family:var(--font-mono); font-size:12.5px; color:var(--chrome-ink-muted); width:20px; flex-shrink:0; padding-top:2px;}
.wczoraj__punkt-opis{font-family:var(--font-mono); font-size:13px; font-weight:500;}
.wczoraj__punkt-odp{font-size:13.5px; color:#D4D4D8;}
.wczoraj__zdjecia{width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:8px;}
.wczoraj__zdjecia-siatka{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px;}
.wczoraj__foto{
  height:88px; padding:0; border:1px solid var(--chrome-line); background:#1C1C1F; color:var(--chrome-ink-muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:zoom-in;
  transition:transform .18s ease, box-shadow .18s ease;
}
.wczoraj__foto{overflow:hidden;}
.wczoraj__foto img{width:100%; height:100%; object-fit:cover; display:block;}
.wczoraj__foto:hover{transform:scale(1.06) translateY(-2px); box-shadow:0 14px 30px -14px rgba(0,0,0,.75);}
.wczoraj__foto--ukryte{display:none;}
.wczoraj__wiecej{font-size:12.5px; font-weight:600; cursor:pointer; color:var(--chrome-ink);}
.wczoraj__zwin{margin-left:auto; min-height:34px; padding:0 12px; background:transparent; border:1px solid rgba(255,255,255,.22); color:var(--chrome-ink); font-size:13px; font-weight:600; cursor:pointer;}
.wczoraj__zwin:hover{background:var(--chrome-hover); border-color:rgba(255,255,255,.4);}
.wczoraj__link{font-size:13px; color:var(--chrome-ink-muted); text-decoration:none;}
.wczoraj__link:hover{color:var(--chrome-ink);}
.wczoraj__brak{padding:16px 18px 18px; color:var(--chrome-ink-muted); font-size:13.5px;}

.panel{border-radius:var(--radius-l); padding:16px; border:1px solid var(--line); background:var(--surface);}
.panel--warn{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn);}
.panel--ok{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok);}
.panel--danger{background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger);}
.panel--info{background:var(--info-soft); border-color:var(--info-line); color:var(--info);}
.panel--accent{background:var(--accent-soft); border-color:var(--accent); color:var(--danger);}

/* karta liczbowa — lewy pasek ciemnieje pod kursorem, wariant "hot" jest czerwony */
.kpi{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-1);
  padding:16px 18px; display:flex; flex-direction:column; gap:3px;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--line-strong); transition:background .2s ease;}
.kpi:hover{box-shadow:var(--elev-3); border-color:var(--line-strong);}
.kpi:hover::before{background:var(--ink);}
/* CZEKA NA KONSUMENTA: prawdziwe zaległości (po terminie / błąd publikacji) */
.kpi--hot::before{background:var(--accent);}
.kpi__num{font-family:var(--font-mono); font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1.2;}
.kpi--hot .kpi__num{color:var(--accent);}
/* bursztyn: "trzeba dziś coś zrobić" — nie po terminie, nie błąd, tylko uwaga */
.kpi--uwaga::before{background:var(--warn-accent);}
.kpi--uwaga .kpi__num{color:var(--warn);}

/* ============ CHIPS / BADGES ============ */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:var(--radius-m);
  white-space:nowrap;
}
.chip--ok{background:var(--ok-soft); color:var(--ok);}
.chip--warn{background:var(--warn-soft); color:var(--warn);}
.chip--danger{background:var(--danger-soft); color:var(--danger);}
.chip--info{background:var(--info-soft); color:var(--info);}
.chip--draft{background:var(--surface-3); color:var(--ink-faint);}
/* fiolet roli "kierownik" — .chip--accent jest żywa: web/app/routers/brygadzisci.py
   (TYP_INFO) buduje tę nazwę klasy w Pythonie, więc grep po szablonach jej nie widzi. */
.chip--accent{background:var(--tag-violet-soft); color:var(--tag-violet);}

/* ============ TABELA — wiersz to grid, nie <table> ============ */
/* Wiersz NIE może być <a>: każda lista ma w wierszu formularz POST, a
   <button> w <a> przechwytuje kliknięcie. Klikalność całego wiersza daje
   nakładka ::after na linku pierwszej komórki; kontrolki wychodzą nad nią
   przez z-index. */
/* Kolumny liczy TABELA (--tory w style="" szablonu), a nagłówek i wiersze
   dziedziczą je przez subgrid. Wcześniej każdy wiersz był osobną siatką i
   liczył szerokości sam: dłuższe nazwisko czy przycisk w kolumnie „auto”
   przesuwały kolumny tylko w tym wierszu, a nagłówek z pustą ostatnią
   kolumną nie trafiał w nic (zgłoszone 2026-09-18). */
.table{
  display:grid; grid-template-columns:var(--tory, 1fr); column-gap:16px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-1);
}
.table__head, .tr{grid-column:1 / -1; grid-template-columns:subgrid;}
/* komórka może być węższa niż jej treść: słowo dłuższe niż kolumna łamie
   się, zamiast rozpychać tabelę poza ekran. Kolumny z nazwami (imię,
   kanał) szablony dają jako "auto" — mają szerokość najdłuższej nazwy i
   nie łamią się w środku słowa; zawija się kolumna treści. */
.table__head > *, .tr > *{min-width:0; overflow-wrap:break-word;}
.table__head{
  display:grid; gap:16px; padding:11px 18px 8px;
  border-bottom:1px solid var(--line);
}
/* data w jednej linii — "2026-09-" / "17" czytało się fatalnie */
.td-data{white-space:nowrap; overflow-wrap:normal;}
.th{
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-hint);
}
.tr{
  position:relative; display:grid; gap:16px; align-items:center;
  padding:12px 18px; border-top:1px solid var(--line-soft);
  transition:background .14s ease, box-shadow .14s ease;
}
.table__head + .tr{border-top:none;}
.tr:hover{background:var(--surface-2); box-shadow:inset 3px 0 0 var(--accent);}
/* link rozciągnięty na cały wiersz */
.tr__target{font-weight:500;}
.tr__target::after{content:""; position:absolute; inset:0; z-index:0;}
.tr:has(.tr__target:focus-visible){outline:2px solid var(--accent); outline-offset:-2px;}
/* wszystko, co samo jest klikalne, musi wyjść NAD nakładkę */
.tr__action{position:relative; z-index:1; justify-self:start;}
/* prefiks czytany przez czytnik ekranu — nagłówków kolumn nie ma jak powiązać */
.td-label{color:var(--ink-hint);}
/* prefiks widoczny TYLKO w trybie kafla (poniżej 960px) — na szerokim ekranie
   jest nagłówek kolumny, powtórzenie w każdej komórce byłoby szumem */
.td-label--kafel{display:none;}

@media (max-width:959px){
  /* poniżej progu wraca kafel: jedna kolumna, nagłówek kolumn schowany */
  .table{display:block;}
  .table__head{display:none;}
  .tr{grid-template-columns:1fr; gap:8px; padding:14px 16px;}
  .tr__action{justify-self:stretch;}
}

@media (max-width:959px){
  /* sidebar (i jego logo) jest schowany poniżej 960px — właściciel wymaga
     prawdziwego logo na telefonie, więc wraca w ciemnym pasku topbara
     zamiast samego tekstu "HS Raport". */
  .topbar__logo{display:block; width:112px; height:auto;}
  .topbar__marka-tekst{display:none;}
}

@media (max-width:959px){
  /* w trybie kafla nagłówek kolumny (.table__head) jest schowany, więc
     samotna data jest niejednoznaczna — prefiks wraca tylko tutaj */
  .td-label--kafel{display:inline;}
}

/* ============ BUTTONS ============ */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 20px; width:100%;
  border:1px solid transparent; border-radius:var(--radius-m);
  font-family:var(--font-body); font-weight:600; font-size:15px; letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, background .18s ease,
             border-color .18s ease, color .18s ease;
}
/* przetarcie światła — skośny pasek przechodzi przez przycisk pod kursorem */
.btn::after{
  content:""; position:absolute; top:-60%; bottom:-60%; left:-80px; width:46px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
  transform:skewX(-18deg);
  transition:left .55s cubic-bezier(.22,.7,.28,1);
  pointer-events:none;
}
.btn:hover::after{left:115%;}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.btn--sm{min-height:38px; font-size:13px; padding:0 14px; width:auto;}
.btn--auto{width:auto;}

.btn-primary{background:var(--ink); color:var(--surface); box-shadow:var(--elev-1);}
.btn-primary:hover{background:#27272A; box-shadow:var(--elev-2);}
.btn-primary:active{transform:scale(.975); box-shadow:var(--elev-in);}

/* jedyne nasycone wypełnienie — jedna "uruchamiająca" akcja na ekran */
.btn-accent{background:var(--accent); color:var(--accent-ink); box-shadow:0 1px 2px rgba(237,28,36,.35);}
.btn-accent:hover{background:var(--accent-hover); box-shadow:0 10px 24px -8px rgba(237,28,36,.75);}
.btn-accent:active{transform:scale(.975); background:var(--accent-press); box-shadow:0 1px 3px rgba(120,8,12,.5) inset;}

.btn-secondary{background:var(--surface); color:var(--ink-muted); border-color:var(--line); box-shadow:var(--elev-1);}
.btn-secondary:hover{border-color:var(--line-strong); color:var(--ink); box-shadow:var(--elev-2);}
.btn-secondary:active{transform:scale(.975); background:var(--surface-3); box-shadow:var(--elev-in);}

/* na przezroczystym tle przetarcie wygląda jak artefakt — wyłączone */
.btn-ghost{background:transparent; color:var(--ink-faint); border-color:transparent;}
.btn-ghost:hover{background:var(--surface-3); color:var(--ink);}
.btn-ghost::after{display:none;}

.btn:disabled, .btn[disabled], .btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed;
  transform:none!important; box-shadow:none!important;
}
.btn:disabled::after, .btn[disabled]::after{display:none;}

/* stan "w toku": spinner inline, przycisk NIE zmienia szerokości */
/* CZEKA NA KONSUMENTA: stan "w toku" przycisku wymaga JS albo przeładowania
   z flagą w kontekście, oba poza zakresem tego planu.
   Nie usuwać jako "martwe" — patrz docs/superpowers/plans/2026-09-17-szata-graficzna-b.md, Task 13. */
.btn__spin{flex:0 0 auto; animation:btn-spin 1s linear infinite;}
@keyframes btn-spin{to{transform:rotate(360deg);}}

/* ============ FORMS ============ */
.field{display:flex; flex-direction:column; gap:6px;}
.label{font-size:12px; font-weight:600; color:var(--ink-muted);}
.hint{font-size:12px; color:var(--ink-hint);}

/* font-size:16px tutaj (mobile) jest CELOWY i zostaje — iOS Safari
   automatycznie powiększa (zooms) stronę po dotknięciu pola z fontem
   mniejszym niż 16px; mniejszy rozmiar wchodzi dopiero od 960px (patrz
   media query niżej). */
.input,.select,.textarea{
  width:100%; box-sizing:border-box;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  border-radius:var(--radius-m); padding:13px 16px; min-height:48px;
  font-family:var(--font-body); font-size:16px;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder,.textarea::placeholder{color:var(--ink-placeholder);}
.input:hover,.select:hover,.textarea:hover{border-color:#C9C9CF; background:var(--surface);}
.input:focus,.select:focus,.textarea:focus{
  outline:none; background:var(--surface); border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(237,28,36,.16), var(--elev-1);
}
.textarea{min-height:84px; resize:vertical; line-height:1.5;}
.input[readonly], .input:disabled, .select:disabled, .textarea:disabled{
  background:var(--surface-3); color:var(--ink-faint); border-color:var(--surface-3); cursor:not-allowed;
}
/* dane (kanały Discorda, daty, ID): zwykły font, ale cyfry o równej
   szerokości, żeby daty i liczby równały się w kolumnach. Wcześniej był tu
   IBM Plex Mono — właściciel: „źle się na to patrzy" (2026-09-18). Mono
   zostaje tylko w dużych liczbach KPI i w znaczniku wersji pod logo. */
.input.tabular, .tabular{font-variant-numeric:tabular-nums;}

/* stan błędu — ZAWSZE przy polu, nigdy tylko panel na górze strony */
/* CZEKA NA KONSUMENTA: podłączenie walidacji per pole w routerach.
   Nie usuwać jako "martwe" — patrz docs/superpowers/plans/2026-09-17-szata-graficzna-b.md, Task 13. */
.input--err, .select--err, .textarea--err{
  border-color:var(--danger); background:#FFFBFA;
  box-shadow:0 0 0 3px rgba(180,35,24,.10);
}
.input--err:focus{border-color:var(--danger); box-shadow:0 0 0 3px rgba(180,35,24,.20), var(--elev-1);}
.err-msg{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; color:var(--danger);
}
.err-msg svg{flex:0 0 auto;}

.checkline{display:flex; align-items:center; gap:10px; padding:10px 2px; min-height:44px; cursor:pointer;}
.checkline input[type=checkbox]{width:20px; height:20px; accent-color:var(--accent); flex:0 0 auto;}

/* ============ SEGMENTOWANY PRZEŁĄCZNIK — zamknięte zbiory 2-3 opcji ============ */
.seg{display:flex; background:var(--surface-3); padding:3px; gap:3px;}
.seg__opt{
  flex:1 1 0; position:relative; text-align:center; min-height:44px;
  display:flex; align-items:center; justify-content:center; padding:8px;
  font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--ink-faint);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.seg__opt:hover{color:var(--ink);}
.seg__opt input{position:absolute; opacity:0; pointer-events:none;}
.seg__opt:has(input:checked){background:var(--surface); color:var(--ink); box-shadow:var(--elev-1);}
.seg__opt:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px;}


/* ============ TASK ROWS ============ */
.taskrow{border-radius:var(--radius-m); padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--surface-2);}
.taskrow__head{display:flex; gap:8px; align-items:flex-start;}
.taskrow__num{width:24px; height:24px; border-radius:var(--radius-pill); background:var(--surface); color:var(--ink-muted); font-weight:500; font-size:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:12px;}
.taskrow__grid{flex:1; display:flex; flex-direction:column; gap:8px;}
.taskrow__cols{display:grid; grid-template-columns:1.15fr 0.9fr 0.95fr; gap:6px;}
.taskrow__cols .input, .taskrow__cols .select{padding:10px 6px; font-size:13px; min-width:0;}
.taskrow__remove{flex:0 0 auto; width:36px; height:36px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--ink-faint); margin-top:6px;}
.taskrow__remove:hover{background:var(--danger-soft); color:var(--danger);}

/* ============ MISC ============ */
.list{display:flex; flex-direction:column; gap:10px;}
.entry-title{display:flex; justify-content:space-between; align-items:center; gap:10px;}

/* ============ SIDEBAR (desktop, w stylu Gentelella) ============ */
/* Sidebar i topnav są w DOM dla zalogowanych; który jest widoczny, decyduje
   wyłącznie media query 960px — zero JS. */
.shell{display:flex; align-items:stretch; min-height:100vh;}
.sidebar{
  display:none; flex-direction:column; width:var(--sidebar-w); flex:0 0 auto;
  background:var(--chrome); color:var(--chrome-ink); padding:0 10px;
}
.sidebar__brand{display:flex; flex-direction:column; gap:11px; padding:20px 8px 18px; position:relative; isolation:isolate;}
.sidebar__logo{width:182px; height:auto; display:block;}
/* Pulsująca poświata za logo — ta sama animacja co na ekranie logowania
   (keyframes logowanie-poswiata: 7s, skala 1→1,18, krycie ,30→,52), żeby oba
   miejsca oddychały w tym samym rytmie. Środek na środku logo: 8px paddingu
   + połowa 182px = 99px w poziomie; 20px paddingu + połowa ~36px wysokości ≈
   38px w pionie. isolation na .sidebar__brand trzyma z-index:-1 nad tłem
   sidebara, a pod samym logo. */
.sidebar__brand::before{
  content:""; position:absolute; top:38px; left:99px; width:230px; height:150px;
  border-radius:50%; filter:blur(10px); pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(237,28,36,.85) 0%, rgba(237,28,36,.34) 36%, rgba(237,28,36,0) 66%);
  animation:logowanie-poswiata 7s ease-in-out infinite;
}
/* Kratka jak na ekranie logowania — te same linie (1px, biel ,055) i ten sam
   dryf (keyframes logowanie-siatka, 14s). Oczko 32px zamiast 64px: blok marki
   ma ~220×99px, przy 64px zmieściłyby się ledwie trzy linie. 64 jest
   wielokrotnością 32, więc przesunięcie o 64px w keyframes nadal zapętla się
   bez szwu. Maska wygasza kratkę ku dołowi, żeby nie kończyła się ostrą
   krawędzią nad menu. z-index:-2 — pod poświatą, jak na ekranie logowania. */
.sidebar__brand::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px;
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent);
          mask-image:linear-gradient(to bottom, #000 55%, transparent);
  animation:logowanie-siatka 14s linear infinite;
}
/* Globalna reguła prefers-reduced-motion skraca animacje do .001ms, ale
   zostawia je w pętli bez końca — pętla trwa i przeskakuje między klatkami,
   co może migać. Tu wyłączamy ją jawnie i zostawiamy spokojny stan pośredni. */
@media (prefers-reduced-motion: reduce){
  .sidebar__brand::before,
  .logowanie__poswiata{animation:none; transform:translate(-50%,-50%); opacity:.4;}
  .logowanie__siatka, .sidebar__brand::after{animation:none;}
  .logowanie__smuga{display:none;} /* zamrożona byłaby stałym pasem światła */
}
.sidebar__ver{display:flex; align-items:center; gap:8px;}
.sidebar__ver-mark{width:16px; height:2px; background:var(--accent); flex:0 0 auto;}
.sidebar__ver-txt{
  font-family:var(--font-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--chrome-ink-muted);
}
.sidebar__nav{display:flex; flex-direction:column; gap:2px;}
/* zwijana grupa "Zasoby ludzkie" — <details>/<summary>, istnieje w base.html */
.sidebar__grupa{display:flex; flex-direction:column; gap:2px;}
.sidebar__naglowek{cursor:pointer; list-style:none; user-select:none;}
.sidebar__naglowek::-webkit-details-marker{display:none;}
.sidebar__naglowek span{flex:1 1 auto;}
.sidebar__strzalka{flex:0 0 auto; opacity:.6; transition:transform .18s ease, opacity .18s ease;}
.sidebar__naglowek:hover .sidebar__strzalka{opacity:1;}
.sidebar__grupa[open] .sidebar__strzalka{transform:rotate(180deg);}
/* podpozycje: bez ikon, wcięte pod nagłówek grupy — wcięcie zostaje przy
   hoverze, więc przesuwa się o 4 px tak samo jak pozycje najwyższego poziomu */
.sidebar__podpozycja{padding-left:44px; font-size:13px; font-weight:500;}
.sidebar__podpozycja:hover{padding-left:48px;}
.sidebar__item{
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  color:var(--chrome-ink-muted); font-size:13.5px; font-weight:500;
  transition:background .18s ease, color .18s ease, padding-left .18s ease;
}
.sidebar__item svg{flex:0 0 auto;}
.sidebar__item:hover{background:var(--chrome-hover); color:var(--chrome-ink); padding-left:16px;}
.sidebar__item.active{
  background:var(--accent); color:var(--accent-ink); font-weight:600;
  box-shadow:0 6px 16px -6px rgba(237,28,36,.75);
}
/* boczny padding 12px (nie 16px): „PREZES ZARZĄDU" potrzebuje ok. 99px w
   jednej linii, a przy 16px na .sidebar__who zostawało 94px (pomiar
   2026-09-18) */
.sidebar__foot{
  margin-top:auto; padding:14px 12px 16px;
  border-top:1px solid var(--chrome-line);
  display:flex; align-items:center; gap:10px;
}
.sidebar__avatar{
  width:32px; height:32px; flex:0 0 auto;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:600;
}
.sidebar__who{min-width:0; flex:1 1 auto;}
.sidebar__name{
  display:block; font-size:12.5px; font-weight:600; color:var(--chrome-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar__role{
  display:block; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* jedna linia — prośba właściciela */
  /* Świadomie var(--accent) mimo ~4,37:1 — decyzja właściciela (kolor marki
     ważniejszy niż +0,13 kontrastu). */
  color:var(--accent);
}
.main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column;}

@media (min-width:960px){
  .sidebar{display:flex;}
  .topnav{display:none;}
  /* na desktopie użytkownik i wylogowanie są w stopce sidebara */
  .topbar__user{display:none;}
  /* na komputerze pola/listy rozwijane nie muszą mieć 16px (to wymóg
     tylko iOS Safari, patrz komentarz przy bazowej regule .input) —
     mniejsza czcionka, 44px min-height zostaje jako cel dotykowy */
  .input,.select,.textarea{font-size:14px; padding:10px 12px; min-height:44px;}
  .textarea{min-height:84px;}
}

/* ============ EKRAN LOGOWANIA (ciemny hero) ============ */
/* Pełnoekranowa nakładka: przykrywa też topbar, żeby logowanie było
   jednym kadrem. Animacje wyłącza globalna reguła prefers-reduced-motion. */
.logowanie{
  position:fixed; inset:0; z-index:40; overflow:auto;
  display:flex; align-items:center; justify-content:center;
  padding:48px 24px; background:#0B0B0B;
  font-family:'Archivo',var(--font-body);
}
.logowanie__tlo{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.logowanie__siatka{
  position:absolute; inset:-64px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  animation:logowanie-siatka 14s linear infinite;
}
.logowanie__poswiata{
  position:absolute; top:38%; left:50%; width:1100px; height:1100px; border-radius:50%;
  filter:blur(10px);
  background:radial-gradient(circle, rgba(237,28,36,.85) 0%, rgba(237,28,36,.34) 36%, rgba(237,28,36,0) 66%);
  animation:logowanie-poswiata 7s ease-in-out infinite;
}
.logowanie__smuga{
  position:absolute; top:-20%; left:30%; width:220px; height:140%;
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  mix-blend-mode:soft-light;
  animation:logowanie-smuga 9s ease-in-out infinite;
}
@keyframes logowanie-siatka{ from{background-position:0 0, 0 0;} to{background-position:64px 64px, 64px 64px;} }
@keyframes logowanie-poswiata{
  0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.30;}
  50%{transform:translate(-50%,-50%) scale(1.18); opacity:.52;}
}
@keyframes logowanie-smuga{
  0%{transform:translateX(-60%) rotate(8deg); opacity:0;}
  15%,50%{opacity:.35;}
  85%,100%{transform:translateX(60%) rotate(8deg); opacity:0;}
}

.logowanie__tresc{position:relative; width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; gap:18px;}
/* margin-bottom przejmuje odstęp po usuniętych kresce akcentu i podtytule —
   bez niego karta logowania siedziałaby 18 px pod logo */
.logowanie__lockup{display:flex; align-items:center; justify-content:center; gap:22px; margin-bottom:20px;}
.logowanie__logo{height:56px; width:auto; display:block;}
.logowanie__kreska{width:2px; height:48px; background:rgba(255,255,255,.35);}
.logowanie__nazwa{
  font-family:'Archivo',var(--font-display); font-weight:900; font-size:46px; line-height:1;
  letter-spacing:-.01em; text-transform:uppercase; color:#FFFFFF;
}

.logowanie__karta{
  width:100%; display:flex; flex-direction:column; gap:14px; padding:28px 24px;
  background:rgba(8,8,8,.86); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px); box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.logowanie__etykieta{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55);}
.logowanie__pole{
  width:100%; min-height:48px; padding:13px 16px; font-size:16px; font-family:inherit;
  color:#FFFFFF; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-m);
}
.logowanie__pole::placeholder{color:rgba(255,255,255,.32);}
.logowanie__pole:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(237,28,36,.28); background:rgba(255,255,255,.09);}
.logowanie__blad{font-size:13px; font-weight:500; color:#FF6B6B;}
.logowanie__karta .btn{font-family:inherit; font-weight:600; letter-spacing:.01em;}
.logowanie__wstep{font-family:var(--font-body); font-size:17px; line-height:1.45; color:#FAFAFA;}
.logowanie__google{
  display:flex; align-items:center; justify-content:center; gap:12px; min-height:52px;
  background:#FFFFFF; color:#1F1F1F; border:1px solid #DADCE0;
  font-family:var(--font-body); font-size:16px; font-weight:600;
}
.logowanie__google:hover{background:#F1F1F3;}
.logowanie__domena{display:flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.62);}
.logowanie__znacznik{padding:3px 8px; border:1px solid rgba(255,255,255,.28); font-weight:600; color:#FAFAFA;}
.logowanie__odmowa{font-family:var(--font-body); font-size:15px; font-weight:600; color:#FF6B6B;}
.logowanie__nota{font-size:12.5px; line-height:1.5; text-align:center; color:rgba(255,255,255,.45);}
.logowanie__nota--lewo{text-align:left;}

@media (max-width:560px){
  .logowanie{padding:32px 20px;}
  .logowanie__lockup{flex-direction:column; gap:14px;}
  .logowanie__kreska{width:48px; height:2px;}
  .logowanie__logo{height:38px;}
  .logowanie__nazwa{font-size:38px;}
  .logowanie__karta{padding:24px 18px;}
}

/* ============ PODZIAŁ DZIENNY ============ */
/* Treść nie rozciąga się na całą szerokość monitora (dłuższe linie = gorsza
   czytelność), a karty budów układają się w siatkę. Formularze przypisania
   siedzą w <details> — widać je dopiero, gdy są potrzebne. */
.dzien{max-width:1180px; width:100%;}
/* Wypłaty: tabela bilansu premii ma 15 kolumn i przy zwykłym .dzien (1180px)
   dostaje poziomy scrollbar nawet gdy ekran ma mnóstwo wolnego miejsca po
   prawej (sidebar zostawia sporo szerokości). Szerszy limit tylko dla tej
   strony — inne ekrany na .dzien (Grafik, Podział dzienny...) zostają wąskie
   celowo (czytelność siatki kart). */
.dzien--szeroki{max-width:1500px;}
.dzien__budowy{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr)); gap:12px; align-items:stretch;}
/* siedziba firmy nad resztą: cała szerokość siatki, budowy dopiero pod nią */
.dzien__budowa--baza{grid-column:1 / -1;}
.dzien__budowa{display:flex; flex-direction:column; gap:12px; padding:14px 16px;}
.dzien__budowa-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.dzien__punkty-info{display:flex; gap:6px; flex-wrap:wrap; margin-top:-6px;}
.dzien__brygady{display:flex; flex-direction:column; gap:6px; flex:1 1 auto;}
.dzien__brygada{display:flex; gap:8px; align-items:flex-start; background:var(--surface-2); padding:10px 12px;}
.dzien__brygada-dane{flex:1 1 auto; min-width:0;}
.dzien__brygada-nazwa{font-weight:600; font-size:14.5px; line-height:1.35;}
.dzien__brygada-sklad{font-size:12.5px; color:var(--ink-faint); line-height:1.45;}
.dzien__edycja > summary{margin-top:4px; font-size:12px; font-weight:500; color:var(--ink-muted); cursor:pointer;}
.dzien__pusto{font-size:13px; color:var(--ink-faint); padding:8px 0;}
.dzien__dodaj{border:1px dashed var(--line);}
.dzien__dodaj-head{display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer; list-style:none; font-size:13px; font-weight:600; color:var(--ink-muted);}
.dzien__dodaj-head::-webkit-details-marker{display:none;}
.dzien__dodaj-head:hover{color:var(--ink); background:var(--surface-2);}
.dzien__dodaj[open] .dzien__dodaj-head{border-bottom:1px solid var(--line); color:var(--ink);}
.dzien__dodaj-tresc{display:flex; flex-direction:column; gap:12px; padding:12px;}
.dzien__forma{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;}
.dzien__niedostepny{flex:1 1 100%; padding:0; min-height:0;}
.dzien__albo{display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.dzien__albo::before,.dzien__albo::after{content:""; flex:1; height:1px; background:var(--line);}
.dzien__kolumny{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:12px; align-items:start; margin-top:4px;}
.dzien__panel{display:flex; flex-direction:column; gap:10px; padding:14px 16px;}
.dzien__wiersz{background:var(--surface-2); padding:8px 10px;}
.dzien__wstrzymana{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--surface-2); padding:8px 12px; opacity:.8;
}
.czas__grupa{display:flex; flex-direction:column; gap:6px; padding-top:4px;}
.czas__naglowek{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); list-style:none;}
.czas__naglowek::-webkit-details-marker{display:none;}
.datanav{display:flex; align-items:center; gap:6px;}
.datanav__btn{display:flex; align-items:center; justify-content:center; width:44px; min-height:48px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); flex:0 0 auto;}
.datanav__pole{width:160px;}
/* dzień tygodnia słownie przy wyborze daty (właściciel, 2026-09-18) */
.datanav__dzien{min-width:92px; text-align:right; font-size:14px; font-weight:600; color:var(--ink);}

/* karta budowy i wiersz brygady reagują tak samo jak .card i .tr */
.dzien__budowa{transition:box-shadow .2s ease, border-color .2s ease;}
.dzien__budowa:hover{box-shadow:var(--elev-3); border-color:var(--line-strong);}
.dzien__brygada{transition:background .14s ease, box-shadow .14s ease;}
.dzien__brygada:hover{background:var(--surface-3); box-shadow:inset 3px 0 0 var(--accent);}
.dzien__dodaj{transition:border-color .18s ease, background .18s ease;}
.dzien__dodaj:hover{border-color:var(--line-strong);}
.dzien__dodaj-head{transition:background .16s ease, color .16s ease;}
.dzien__edycja > summary{transition:color .16s ease;}
.dzien__edycja > summary:hover{color:var(--ink);}
.dzien__edycja > summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.dzien__dodaj-head:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}

.datanav__btn{transition:transform .12s ease, box-shadow .2s ease, background .18s ease, border-color .18s ease;}
.datanav__btn:hover{background:var(--surface-2); border-color:var(--ink); box-shadow:var(--elev-2);}
.datanav__btn:active{transform:scale(.975); box-shadow:var(--elev-in);}
.datanav__btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

summary.czas__naglowek{cursor:pointer; transition:color .16s ease;}
summary.czas__naglowek:hover{color:var(--ink);}
summary.czas__naglowek:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ============ LISTA BUDÓW — logo inwestora i opady ============ */
/* Ikona w pierwszej komórce: u właściciela to przycisk (otwiera okienko
   edycji), więc wychodzi nad nakładkę .tr__target::after; u kierownika to
   zwykły znak, pod nakładką — klik w nią otwiera budowę jak reszta wiersza. */
/* kolumny listy budów (subgrid, patrz .table wyżej); na węższym ekranie
   (ale jeszcze nie kafel) duża ikona inwestora zjadłaby miejsce na nazwę
   kanału — znika techniczna data synchronizacji */
/* stałe szerokości (poza kanałem) — każdy etap to osobna tabela, a kolumny
   mają się równać między nimi */
.table--budowy{--tory:minmax(0,1fr) 150px 170px 130px 150px;}
.grupa-budow{display:flex; flex-direction:column; gap:8px;}
.grupa-budow + .grupa-budow{margin-top:10px;}
.grupa-budow__tytul{display:flex; align-items:center; gap:10px; margin:0; font-size:15px; font-weight:600;}
.grupa-budow__znak{width:10px; height:10px; padding:0; flex:0 0 auto;}
.pzt-ramka{display:block; width:100%; height:calc(100vh - 230px); min-height:480px; border:1px solid var(--line); border-radius:12px; background:#fff;}
.grupa-budow--zwijana > summary{cursor:pointer; list-style:none; padding:4px 2px; user-select:none;}
.grupa-budow--zwijana > summary::-webkit-details-marker{display:none;}
.grupa-budow--zwijana > summary::after{content:"▾"; margin-left:auto; color:var(--muted,#71717a); transition:transform .15s;}
.grupa-budow--zwijana:not([open]) > summary::after{transform:rotate(-90deg);}
.grupa-budow--zwijana[open] > summary{margin-bottom:8px;}
.grupa-budow__znak.chip--ok{background:var(--ok);}
.grupa-budow__znak.chip--info{background:var(--info);}
.grupa-budow__znak.chip--accent{background:var(--tag-violet);}
.grupa-budow__znak.chip--warn{background:var(--warn-accent);}
.grupa-budow__znak.chip--danger{background:var(--danger);}
@media (min-width:960px) and (max-width:1279px){
  .table--budowy{--tory:minmax(0,1fr) 130px 150px 150px;}
  .budowy-synchro{display:none;}
  .table--budowy .inwestor{width:64px; height:64px;}
  .table--budowy .inwestor__domyslna{width:32px; height:32px;}
}
.budowa-kanal{display:flex; align-items:center; gap:16px; min-width:0;}
.budowa-kanal .tr__target{min-width:0; overflow-wrap:anywhere;}
.inwestor{
  flex:0 0 auto; width:96px; height:96px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-hint);
}
.inwestor__img{width:100%; height:100%; object-fit:contain; padding:8px; box-sizing:border-box;}
.inwestor__domyslna{fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;}
.inwestor--edycja{
  position:relative; z-index:1; padding:0; cursor:pointer; font:inherit;
  transition:border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.inwestor--edycja:hover{border-color:var(--ink); color:var(--ink); box-shadow:var(--elev-2);}
.inwestor--edycja:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.inwestor--duza{width:120px; height:120px;}
.inwestor--duza .inwestor__img{padding:10px;}

.opady{display:flex; flex-direction:column; gap:2px;}
.opady__dzis{display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:13px; font-weight:500; color:var(--ink-muted);}
.opady__dzis svg{fill:var(--line-strong);}
/* deszcz, który może przeszkodzić w robocie (≥1 mm albo ≥50%) — bursztyn "uwaga" */
.opady__dzis--pada{color:var(--warn);}
.opady__dzis--pada svg{fill:var(--warn-accent);}
.opady__szansa{font-size:12px; color:var(--ink-muted); line-height:1.35;}
.opady__szansa b{font-weight:600; color:var(--ink);}
.opady__szansa--pada, .opady__szansa--pada b{color:var(--warn);}

.wyroznienia{
  width:min(520px, calc(100vw - 32px)); box-sizing:border-box;
  padding:22px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  box-shadow:var(--elev-3);
}
.wyroznienia > form{display:flex; flex-direction:column; gap:18px;}
.wyroznienia::backdrop{background:rgba(15,15,16,.55);}
.wyroznienia__logo{display:flex; gap:14px; align-items:flex-start;}
.wyroznienia input[type=file].input{padding:10px 12px; min-height:44px;}
.wyroznienia [hidden], .inwestor [hidden]{display:none!important;}

/* Podgląd zdjęć (karta „Wczoraj na budowie”, Dziennik Discord) — jedno
   wspólne okno, obsługiwane natywnym <dialog> (jak .wyroznienia wyżej). */
.lightbox{
  width:min(880px, calc(100vw - 32px)); max-height:calc(100vh - 32px);
  padding:0; border:0; background:transparent; overflow:visible;
}
.lightbox::backdrop{background:rgba(11,11,12,.86);}
.lightbox img{display:block; width:100%; max-height:calc(100vh - 32px); object-fit:contain; background:#000;}
.lightbox__zamknij{
  position:absolute; top:-40px; right:0; width:32px; height:32px; border:0;
  background:transparent; color:#FAFAFA; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox__zamknij:hover{opacity:.7;}

/* ============ ETAPY BUDOWY — zakładki filtra i komórka etapu ============ */
.zakladki{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; overflow-y:hidden; scrollbar-width:none;}
.zakladki::-webkit-scrollbar{display:none;}
.zakladka{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:10px 14px 9px; margin-bottom:-1px; border-bottom:2px solid transparent;
  font-size:13px; font-weight:600; color:var(--ink-faint);
  transition:color .16s ease, border-color .16s ease;
}
.zakladka:hover{color:var(--ink); border-bottom-color:var(--line-strong);}
.zakladka:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.zakladka--aktywna, .zakladka--aktywna:hover{color:var(--ink); border-bottom-color:var(--ink);}
.zakladka__licznik{font-size:11.5px; padding:1px 7px; background:var(--surface-3); color:var(--ink-faint);}
.zakladka--aktywna .zakladka__licznik{background:var(--ink); color:var(--surface);}
.zakladka__znacznik{display:inline-block; min-width:16px; padding:0 5px; margin-left:4px; font-size:11px; font-weight:700; line-height:16px; text-align:center; border-radius:99px; background:var(--accent); color:#fff;}
.zakladki--pod{border-bottom:none; margin-top:-6px;}
.zakladki--pod .zakladka{padding:6px 12px; font-size:12.5px;}

.etap-komorka{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.etap-komorka form{margin:0;}
.etap-komorka form:has(.select--etap){width:100%;}
.select.select--etap{
  width:100%; min-height:34px; padding:5px 10px; border-color:transparent;
  font-size:12.5px; font-weight:600; cursor:pointer;
}
.select.select--etap:hover{border-color:var(--line-strong);}
/* .select (niżej w arkuszu niż .chip--*) nadpisuje tło — kolory etapu jeszcze raz, mocniej */
.select--etap.chip--info{background-color:var(--info-soft); color:var(--info);}
.select--etap.chip--accent{background-color:var(--tag-violet-soft); color:var(--tag-violet);}
.select--etap.chip--ok{background-color:var(--ok-soft); color:var(--ok);}
.select--etap.chip--warn{background-color:var(--warn-soft); color:var(--warn);}
.wyroznienia__archiwum{
  display:flex; flex-direction:column; gap:8px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}

/* kanał Discord — opcjonalny do czasu produkcji (core/migracje/0008) */
.budowa-kanal__tekst{display:flex; flex-direction:column; gap:2px; min-width:0;}
.wyroznienia__kanal{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){ .wyroznienia__kanal{grid-template-columns:1fr;} }

/* ============ KONTA ============ */
.tr--nieaktywne{opacity:.55;}
.pole-email{display:flex;}
.pole-email .input{border-right:none;}
.pole-email__domena{display:flex; align-items:center; padding:0 12px; background:var(--surface-2); border:1px solid var(--line); font-size:14px; color:var(--ink-muted);}

/* ============ DZIEŃ WOLNY — weekend / święto w podziale dziennym ============ */
.dzien-wolny{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:22px 24px; margin-bottom:14px;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--ink);
  box-shadow:var(--elev-1);
}
.dzien-wolny__ikona{flex:0 0 auto; fill:none; stroke:var(--ink-faint); stroke-width:1.6;}
.dzien-wolny__tekst{flex:1 1 260px; display:flex; flex-direction:column; gap:4px;}
.dzien-wolny__tytul{font-size:18px; font-weight:600;}
.dzien-wolny__przycisk{min-height:56px; padding:0 28px; font-size:16px;}
.dzien-wolny--odblokowany{border-left-color:var(--warn-accent); padding:14px 20px;}
.dzien-wolny--odblokowany .dzien-wolny__tytul{font-size:15px;}
@media (max-width:640px){ .dzien-wolny form, .dzien-wolny__przycisk{width:100%;} }

/* ============ ROLE: podgląd widoku (właściciel) i biuro (tylko odczyt) ============ */
/* przełącznik stoi tuż nad stopką (stopka ma margin-top:auto — tu przejmuje go przełącznik) */
.widok-roli{display:flex; flex-direction:column; gap:6px; margin-top:auto; padding:12px 12px 10px; border-top:1px solid var(--chrome-line);}
.widok-roli + .sidebar__foot{margin-top:0;}
.widok-roli__etykieta{font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sidebar-ink-muted);}
.widok-roli__opcje{display:flex; gap:2px; background:rgba(255,255,255,.06); padding:2px;}
.widok-roli__opcja{
  flex:1 1 0; min-height:30px; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:600; color:var(--sidebar-ink-muted);
  transition:background .15s ease, color .15s ease;
}
.widok-roli__opcja:hover{color:var(--sidebar-ink); background:var(--chrome-hover);}
.widok-roli__opcja:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.widok-roli__opcja--wybrana{background:var(--sidebar-ink); color:var(--chrome);}
.widok-roli__opcja--wybrana:hover{background:var(--sidebar-ink); color:var(--chrome);}

.pasek-podgladu{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 20px; background:var(--warn-soft); border-bottom:1px solid var(--warn-line); color:var(--warn);
  font-size:13.5px;
}
.pasek-podgladu form{margin:0;}

/* biuro: bez formularzy zapisu (i tak odrzucane na serwerze); formularze
   GET (np. wybór daty) zostają. Wyjątek: formularze, których zapis serwer
   biuru dopuszcza (auth._zapis_biura) — zadania, rozmowa zespołu na ekranie
   budowy i generator pism/zleceń wraz ze skrzynką — zostają widoczne. */
body[data-rola="biuro"]:not(.nw-biuro-akcje) form[method="post" i]:not(.widok-roli):not([action^="/zadania"]):not([action^="/budowy/"][action*="/rozmowa"]):not([action^="/budowy/"][action*="/generatory/dokument"]),
body[data-rola="biuro"]:not(.nw-biuro-akcje) .inwestor--edycja{pointer-events:none;}
body[data-rola="biuro"]:not(.nw-biuro-akcje) form[method="post" i]:not(.widok-roli):not(.pasek-podgladu form):not([action^="/zadania"]):not([action^="/budowy/"][action*="/rozmowa"]):not([action^="/budowy/"][action*="/generatory/dokument"]){display:none !important;}
/* rozwijane sekcje z formularzem zapisu (np. „+ Przypisz brygadę”, „Edytuj skład”) — bez nich */
body[data-rola="biuro"]:not(.nw-biuro-akcje) details:has(form[method="post" i]:not([action^="/zadania"]):not([action^="/budowy/"][action*="/rozmowa"]):not([action^="/budowy/"][action*="/generatory/dokument"])){display:none !important;}

/* ============ OSTRZEŻENIE O DESZCZU — wariant B (właściciel, 2026-09-18) ============ */
/* pasek nad wierszem budowy (lista budów: cała szerokość siatki) albo nad
   treścią karty (podział dzienny); próg w app/pogoda.py */
.ostrzezenie-deszcz{
  grid-column:1 / -1; display:flex; align-items:center; gap:8px;
  padding:7px 18px; background:var(--warn-accent); color:#1B1203;
  font-size:12.5px; font-weight:600;
}
.ostrzezenie-deszcz svg{flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.ostrzezenie-deszcz + .tr{border-top:none; box-shadow:inset 3px 0 0 var(--warn-accent);}
.ostrzezenie-deszcz--karta{margin:-14px -16px 0; padding:7px 16px;}
.opady__dzis b{font-weight:700;}

/* ============ STRONA BUDOWY — nagłówek harmonogramu (H3) ============ */
.harmonogram-naglowek{
  display:flex; flex-direction:column; gap:12px; padding:16px 18px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-1);
  color:var(--ink); transition:box-shadow .2s ease, border-color .2s ease;
}
.harmonogram-naglowek:hover{box-shadow:var(--elev-3); border-color:var(--line-strong);}
.harmonogram-naglowek:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.harmonogram-naglowek__gora{display:flex; align-items:center; gap:12px;}
.harmonogram-naglowek__ikona{flex:0 0 auto; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round;}
.harmonogram-naglowek__tekst{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0;}
.harmonogram-naglowek__tytul{font-size:16px; font-weight:600;}
.harmonogram-naglowek__cta{gap:6px; pointer-events:none;}
.harmonogram-naglowek__cta svg{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.harmonogram-naglowek__tygodnie{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:3px;}
.harmonogram-naglowek__tydzien{display:flex; flex-direction:column; gap:5px;}
.harmonogram-naglowek__pasek{height:10px; background:var(--surface-3);}
.harmonogram-naglowek__tydzien--zajety .harmonogram-naglowek__pasek{background:var(--ink-faint);}
.harmonogram-naglowek__tydzien--minal.harmonogram-naglowek__tydzien--zajety .harmonogram-naglowek__pasek{background:var(--line-strong);}
.harmonogram-naglowek__tydzien--teraz .harmonogram-naglowek__pasek{background:var(--accent);}
.harmonogram-naglowek__etykieta{font-size:11.5px; color:var(--ink-hint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.harmonogram-naglowek__tydzien--teraz .harmonogram-naglowek__etykieta{color:var(--accent); font-weight:600;}

/* ============ STRONA BUDOWY — oś czasu planów (A) ============ */
.os{list-style:none; margin:0; padding:0 0 0 30px; display:flex; flex-direction:column; gap:10px;}
.os__tydzien{position:relative;}
/* odcinek linii: od węzła tego tygodnia do węzła następnego */
.os__linia{
  position:absolute; left:-21px; top:20px; bottom:-30px; width:0;
  border-left:2px solid var(--ink); transform-origin:top;
}
.os__tydzien:last-child .os__linia{display:none;}
.os__tydzien--teraz .os__linia, .os__tydzien--przyszly .os__linia{border-left:2px dashed var(--line-strong);}
.os__wezel{
  position:absolute; left:-27px; top:14px; width:14px; height:14px;
  background:var(--surface); border:2px solid var(--ink); box-sizing:border-box;
}
.os__tydzien--przyszly .os__wezel{border-color:var(--line-strong);}
.os__tydzien--teraz .os__wezel{background:var(--ink); box-shadow:0 0 0 4px var(--paper);}
.os__karta{
  display:flex; flex-direction:column; gap:4px; padding:11px 14px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-1); color:var(--ink);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.os__karta:hover{box-shadow:var(--elev-3); border-color:var(--line-strong);}
.os__karta:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.os__tydzien--teraz .os__karta{border-left:3px solid var(--ink); background:var(--surface-2);}
.os__tydzien--minal .os__karta{box-shadow:none; background:transparent;}
.os__naglowek{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.os__tydzien-nazwa{font-size:14.5px; font-weight:600;}
.os__tydzien--minal .os__tydzien-nazwa{color:var(--ink-muted);}
.os__cel{font-size:13px; color:var(--ink-muted);}
.os__tydzien--teraz .os__cel{color:var(--ink);}
.os__starsze > summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-faint); padding:4px 0;}
.os__starsze > summary:hover{color:var(--ink);}
.os__starsze[open] > .os{margin:8px 0 4px;}

/* ============ ZGŁOSZENIA — cofnięcie „załatwione” i archiwum ============ */
.zgloszenie--zalatwione > :not(.zgloszenie__akcje){opacity:.55;}
.zgloszenie__akcje{display:flex; align-items:center; gap:6px; justify-self:end;}
.zgloszenie__akcje form{margin:0;}
.zgloszenie__archiwizuj{padding:0 8px; min-width:34px;}
.zgloszenie__archiwizuj svg, .zgloszenia__archiwum svg{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round;}
.zgloszenia__archiwum{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--ink-faint); padding:6px 2px;
}
.zgloszenia__archiwum:hover{color:var(--ink);}
.zgloszenia__archiwum:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* logo inwestora w nagłówku karty budowy — podział dzienny (mniejsze niż na liście budów) */
.dzien__budowa-nazwa{display:flex; align-items:center; gap:10px; min-width:0;}
.dzien__budowa-nazwa .h3{min-width:0; overflow-wrap:anywhere;}
.inwestor.inwestor--mala{width:40px; height:40px;}
.inwestor--mala .inwestor__img{padding:3px;}
.inwestor--mala .inwestor__domyslna{width:22px; height:22px;}

/* ============ ZADANIA — drzewo budów, styl ClickUp (makieta zaakceptowana 2026-09-19) ============ */
.section-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap;}
.zadania{max-width:1140px; width:100%;}
/* pasek nad drzewem: przełącznik widoku, filtr kierownika, „pokaż zrobione”, „+ Nowe zadanie” */
.zad-toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.seg a.seg__opt{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  font-family:var(--font-body); font-weight:600; font-size:13px; line-height:normal; padding:8px 14px;
  white-space:nowrap; color:var(--ink-muted);
}
.seg a.seg__opt:not(.seg__opt--on):hover{color:var(--ink);}
.zad-filtr-kto .select{width:auto; min-height:38px; padding:6px 12px; font-size:13px;}
.zad-pokaz-zrobione{font-size:13px; font-weight:500; color:var(--ink-muted); padding:6px 4px; white-space:nowrap;}
.zad-pokaz-zrobione:hover{color:var(--ink);}
.zad-nowe{flex-basis:100%; order:5;}
.zad-nowe > summary{list-style:none; width:fit-content;}
.zad-nowe > summary::-webkit-details-marker{display:none;}
.zad-nowe[open] > summary{margin-bottom:10px;}
/* Lista dnia: zadania z terminem na ten dzień pod punktami (2026-10-07) */
.zad-dnia{border-top:1px dashed var(--line);}
.zad-dnia__status{width:16px; height:16px; flex:0 0 16px;}
.zad-dnia__link{color:inherit; text-decoration:none;}
.zad-dnia__link:hover{text-decoration:underline;}
/* formularz „+ Nowe zadanie” (dawny formularz górny listy) i inline na dole grupy */
.zad-dodaj{display:grid; grid-template-columns:minmax(0,2.4fr) repeat(4, minmax(0,1fr)) auto; gap:8px; align-items:start;}
.zad-dodaj__punkty{grid-column:1 / -1; font-size:13px; color:var(--ink-muted);}
.zad-dodaj__punkty summary{cursor:pointer; font-weight:500; padding:4px 0;}
.zad-dodaj__punkty .textarea{margin-top:6px;}
/* „+ Dodaj zadanie(na tej budowie)” — ostatni, drobny wiersz tej samej
   tabeli (W1, poprawki 2026-09-19), wyrównany pod tytułami wierszy wyżej
   (20px strzałka + 24px status + odstępy = 62px), nie osobna karta. */
.zad-dodaj-budowa{font-size:13px;}
.zad-dodaj-budowa > summary{cursor:pointer; color:var(--ink-muted); font-weight:500; padding:9px 12px 9px 62px;}
.zad-dodaj-budowa > summary:hover{color:var(--ink);}
.zad-dodaj-budowa__formularz{display:flex; flex-wrap:wrap; gap:8px; align-items:start; padding:6px 12px 12px 62px;}
.zad-dodaj-budowa__formularz .zad-dodaj__punkty{flex-basis:100%; grid-column:auto;}
/* grupa budowy — jedna zwarta tabela (poprawki 2026-09-19, W1): ramka
   wspólna dla całej grupy, nagłówek oddzielony linią, wiersze bez własnych
   ramek/cieni, oddzielone tylko cienką linią --line-soft. <details> zwijane,
   zapamiętane w localStorage (klucz zad-grupa-<id>). */
.zad-grupa{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;}
.zad-grupa__glowka{display:flex; align-items:center; gap:8px; cursor:pointer; padding:10px 12px; list-style:none;}
.zad-grupa__glowka::-webkit-details-marker{display:none;}
.zad-grupa[open] > .zad-grupa__glowka{border-bottom:1px solid var(--line);}
.zad-grupa__ikona{display:flex; flex:0 0 auto; color:var(--ink-faint);}
.zad-grupa__ikona svg{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.zad-grupa__strzalka{flex:0 0 auto; color:var(--ink-faint); transition:transform .15s ease;}
.zad-grupa:not([open]) > .zad-grupa__glowka .zad-grupa__strzalka{transform:rotate(-90deg);}
.zad-grupa__nazwa{font-weight:600; font-size:14.5px;}
.zad-grupa__zadania{display:flex; flex-direction:column;}
/* linia dzieląca MIĘDZY wierszami (zadania, drzewo punktów, „+ Dodaj zadanie”)
   — nie na pierwszym, bo tam już jest ramka nagłówka. */
.zad-grupa__zadania > * + *{border-top:1px solid var(--line-soft);}
/* wiersz zadania — siatka jednoliniowa: strzałka / status / tytuł / (awatar, termin, wiadomości, ostrzeżenie) */
.zad-wiersz{
  display:grid; grid-template-columns:20px 24px minmax(0,1fr) auto;
  align-items:center; gap:6px 12px; min-height:40px; padding:8px 12px;
  background:var(--surface);
}
.zad-wiersz:hover{background:var(--surface-2);}
.zad-wiersz--zrobione{opacity:.6;}
.zad-wiersz--zrobione .zad-wiersz__tytul{text-decoration:line-through; color:var(--ink-faint);}
.zad-wiersz__strzalka{display:flex; align-items:center; justify-content:center; width:20px; height:20px; color:var(--ink-faint); transition:transform .15s ease;}
.zad-drzewo[open] > summary .zad-wiersz__strzalka{transform:rotate(90deg);}
.zad-wiersz__glowna{display:flex; align-items:baseline; gap:6px; min-width:0; overflow:hidden;}
.zad-wiersz__tytul{font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.zad-wiersz__licznik{flex:0 0 auto;}
.zad-wiersz__dodatkowe{display:flex; align-items:center; gap:14px; flex:0 0 auto;}
.zad-avatar{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700;
}
.zad-avatar--ja{background:var(--ok-soft); color:var(--ok);}
.zad-avatar--inny{background:var(--avatar-inny-soft); color:var(--avatar-inny);}
.zad-wiersz__termin{color:var(--ink-muted); width:64px; flex:0 0 auto;}
.zad-wiersz__termin--po-terminie{color:var(--danger); font-weight:600;}
.zad-wiersz__wiadomosci{display:inline-flex; align-items:center; gap:4px; color:var(--ink-faint); flex:0 0 auto;}
.zad-wiersz__ostrzezenie{display:flex; color:var(--warn-accent); flex:0 0 auto;}
/* nowe wiadomości w wątku (etap 2 zadań na forum) — czerwona kropka przy liczniku */
.zad-wiersz__wiadomosci--nowe{color:var(--ink); font-weight:700;}
.zad-wiersz__wiadomosci--nowe::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);}
/* wiersz-link zakładki „Zadania” na budowie — bez kolumny strzałki */
.zad-wiersz--link{grid-template-columns:24px minmax(0,1fr) auto; color:inherit; text-decoration:none;}
/* okrągły przycisk statusu — wizualnie 24px (jak awatar), niewidoczny cel
   dotyku 44px przez ::before wystający poza wiersz (ten sam trik co
   .zad-punkt__pole niżej), żeby wiersz mógł być niski (W1: 40–44px). */
/* Kółko statusu: mniejsze (16px) — właściciel 2026-09-20: przy dużych kółkach lista
   robiła się nieczytelna; cel dotyku zostaje 44px przez ::before. */
.zad-status{width:16px; height:16px; flex:0 0 auto; border:none; background:transparent; padding:0; position:relative;}
.zad-status::before{content:""; position:absolute; inset:-14px;} /* cel dotyku 44px */
.zad-status::after{content:""; position:absolute; inset:0; border:1.5px solid var(--ink-muted); border-radius:50%;}
.zad-status:hover::after{border-color:var(--ink);}
.zad-status--w_toku::after{background:linear-gradient(90deg, transparent 50%, var(--warn) 50%);}
.zad-status--zrobione::after{background:var(--ink); border-color:var(--ink);}
/* drzewo punktów — <details> zwinięte pod wierszem zadania, summary = cały wiersz */
.zad-drzewo > summary{list-style:none; cursor:pointer;}
.zad-drzewo > summary::-webkit-details-marker{display:none;}
.zad-drzewo__punkty{display:flex; flex-direction:column; padding:2px 12px 4px 34px; background:var(--surface-2);}
.zad-punkt{display:flex; align-items:center; gap:10px; min-height:34px; padding:2px 4px;}
.zad-punkt__pole{width:18px; height:18px; flex:0 0 auto; border:1.5px solid var(--line-strong); background:var(--surface); position:relative;}
.zad-punkt__pole::after{content:""; position:absolute; inset:-13px;} /* cel dotyku 44px */
.zad-punkt--zrobiony .zad-punkt__pole{background:var(--ink); border-color:var(--ink);}
.zad-punkt--zrobiony .zad-punkt__pole::before{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--surface); font-size:11px;}
.zad-punkt__pole--tylko-podglad{opacity:.6;}
.zad-punkt__tresc{font-size:13.5px;}
.zad-punkt--zrobiony .zad-punkt__tresc{color:var(--ink-muted); text-decoration:line-through;}
/* Rozmowa z wątku zadania pod punktami rozwiniętego wiersza (prośba właściciela
   2026-09-20) — dymki z .rozmowa__* (patrz sekcja „Rozmowa o zadaniu” niżej),
   tylko węższe niż na szczegółach, bo drzewo ma mniej miejsca. */
.zad-drzewo__rozmowa{display:flex; flex-direction:column; gap:8px; padding:10px 12px 12px 34px; background:var(--surface-2); border-top:1px solid var(--line-soft);}
.zad-drzewo__rozmowa-naglowek{font-weight:600;}
.zad-drzewo__rozmowa .rozmowa__tresc{max-width:70%;}
.zad-drzewo__rozmowa .rozmowa__dymek{font-size:13px;}
.zad-drzewo__rozmowa-linki{display:flex; gap:14px; flex-wrap:wrap;}
.zad-drzewo__rozmowa-linki a{color:var(--ink-muted); text-decoration:none;}
.zad-drzewo__rozmowa-linki a:hover{color:var(--ink); text-decoration:underline;}
@media (max-width:959px){
  .zad-dodaj{grid-template-columns:1fr 1fr;}
  .zad-dodaj__tresc, .zad-dodaj .btn{grid-column:1 / -1;}
}
@media (max-width:559px){
  .zad-wiersz{grid-template-columns:20px 24px 1fr; row-gap:6px;}
  .zad-wiersz__dodatkowe{grid-column:1 / -1; padding-left:56px; flex-wrap:wrap;}
  /* telefon: tytuł zadania w dwóch liniach zamiast ucinania (makieta B5) */
  .zad-wiersz__glowna{flex-wrap:wrap;}
  .zad-wiersz__tytul{white-space:normal;}
  .zad-wiersz--link{grid-template-columns:24px 1fr;}
  .zad-wiersz--link .zad-wiersz__dodatkowe{padding-left:36px;}
  .zad-drzewo__punkty, .zad-dodaj-budowa > summary, .zad-dodaj-budowa__formularz{padding-left:16px;}
  .zad-drzewo__rozmowa{padding-left:16px;}
  .zad-drzewo__rozmowa .rozmowa__tresc{max-width:85%;}
}

/* Ekran szczegółów zadania */
.zadanie{max-width:760px; width:100%; display:flex; flex-direction:column; gap:16px;}
.zadanie__karta{display:flex; flex-direction:column; gap:16px; padding:22px 24px;}
.zadanie__gora{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.zadanie__tytul{font-size:24px; font-weight:600; line-height:1.25;}
.zadanie__opis{font-size:15px; line-height:1.55; color:var(--ink-muted); white-space:pre-line;}
.zadanie__osoby{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; padding:14px 0; border-top:1px solid var(--line-soft);}
.kv-pion{display:flex; flex-direction:column; gap:4px; font-size:14px;}
.zadanie__osoba{display:flex; align-items:center; gap:8px; font-weight:500;}
.kwadrat{width:28px; height:28px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; background:var(--ink); color:var(--chrome-ink);}
.kwadrat--kierownik{background:var(--tag-violet-soft); color:var(--tag-violet);}
.zadanie__status{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line-soft);}
/* S3: przełącznik statusu na .seg/.seg__opt istniejące z konto_form.html, tu jako formularze zamiast radio */
.seg form{display:contents;}
.seg button.seg__opt{
  border:none; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:13px; line-height:normal; padding:8px;
  white-space:nowrap;
}
.seg button.seg__opt:not(.seg__opt--on){background:transparent;}
.seg__opt--on{background:var(--surface); color:var(--ink); box-shadow:var(--elev-1);}
.zadanie__punkty{display:flex; flex-direction:column; gap:4px;}
.punkt{display:flex; align-items:center; gap:12px; min-height:48px; padding:4px 6px; border-bottom:1px solid var(--line-soft);}
.punkt__pole{width:22px; height:22px; flex:0 0 auto; border:1.5px solid var(--line-strong); background:var(--surface); position:relative;}
.punkt__pole::after{content:""; position:absolute; inset:-11px;} /* cel dotyku 44px */
.punkt--zrobiony .punkt__pole{background:var(--ink); border-color:var(--ink);}
.punkt--zrobiony .punkt__pole::before{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--surface); font-size:14px;}
.punkt__pole--tylko-podglad{opacity:.6;}
.punkt__tresc{flex:1 1 auto; font-size:14.5px;}
.punkt--zrobiony .punkt__tresc{color:var(--ink-muted); text-decoration:line-through;}
.punkt-nowy{display:flex; gap:8px; padding-top:8px;}
/* Edycja: otwierana przyciskiem „Edytuj” w nagłówku; w trybie edycji formularz zastępuje tytuł i opis */
.zadanie__edycja > summary{display:none;}
.zadanie__edycja .stack{gap:10px;}
.zadanie__edycja[open] ~ .zadanie__tytul, .zadanie__edycja[open] ~ .zadanie__opis{display:none;}
.field-row{display:flex; gap:8px;}
.field-row .input, .field-row .select{flex:1 1 0;}
.spacer{flex:1 1 auto;}
.btn-danger{background:var(--danger-soft); color:var(--danger); border-color:var(--danger-line);}
.btn-danger:hover{background:var(--danger); color:var(--surface); border-color:var(--danger);}
.btn-danger:active{transform:scale(.975);}
/* D: linijka powiązań na dole karty głównej (nie osobna karta) */
.zadanie__powiazania{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0;}
.zadanie__historia{display:flex; flex-direction:column; gap:10px;}
.zadanie__historia > summary, .zadanie__rozmowa > summary{cursor:pointer;}
.historia__wiersz{display:flex; gap:12px; font-size:13px; line-height:1.45;}
.historia__czas{width:92px; flex:0 0 auto; color:var(--ink-faint); font-weight:500;}
@media (max-width:559px){
  .zadanie__osoby{grid-template-columns:1fr 1fr;}
  .rozmowa__formularz{flex-direction:column; align-items:stretch;}
  .rozmowa__formularz .btn{width:100%;}
  /* Martwa reguła usunięta (przegląd 2026-09-19): `.rozmowa__dymek` ma
     unikalną, bezwarunkową regułę `max-width:100%` niżej w pliku — ta sama
     specyficzność, ale późniejsza w kaskadzie, więc `max-width:85%` tutaj
     nigdy nie miało efektu. Po W1–W3 nadal bez wpływu, więc zgodnie z
     ustaleniem usunięta zamiast naprawiana. */
}

/* Rozmowa o zadaniu (wątek na Discordzie; dymki jak w komunikatorze — uwagi 2026-09-19) */
.zadanie__rozmowa-tresc{display:flex; flex-direction:column; gap:12px; padding-top:12px;}
.zadanie__rozmowa-tresc > .btn{align-self:flex-start;}
.rozmowa__lista{display:flex; flex-direction:column; gap:12px;}
/* wiersz: cudze do lewej (z awatarem), moje do prawej, wiadomości aplikacji wyśrodkowane */
.rozmowa__wpis{display:flex; flex-direction:column; gap:3px;}
/* ta sama osoba co poprzedni wpis: odstęp komunikatora (2-4px), bez awatara/imienia */
.rozmowa__wpis--kontynuacja{margin-top:-9px;}
.rozmowa__wpis--cudza{flex-direction:row; align-items:flex-start; gap:8px;}
.rozmowa__wpis--moja{align-items:flex-end;}
.rozmowa__wpis--aplikacja{align-items:center; text-align:center;}
.rozmowa__awatar, .rozmowa__awatar--pusty{width:28px; height:28px; flex:0 0 auto;}
.rozmowa__awatar{
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; background:var(--ink); color:var(--chrome-ink);
}
.rozmowa__tresc{display:flex; flex-direction:column; gap:3px; min-width:0; max-width:80%;}
.rozmowa__kto{font-size:12px; color:var(--ink-faint);}
.rozmowa__meta{display:flex; gap:6px; align-items:center; font-size:12px; color:var(--ink-faint);}
.rozmowa__dymek{
  max-width:100%; padding:9px 14px; border-radius:18px;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word;
  font-size:14px; line-height:1.45;
}
.rozmowa__wpis--cudza .rozmowa__dymek{background:var(--surface-2); border:1px solid var(--line-soft); border-radius:18px 18px 18px 4px;}
.rozmowa__wpis--moja .rozmowa__dymek{background:var(--ink); color:var(--surface); border-radius:18px 18px 4px 18px;}
.rozmowa__pigulka{
  display:inline-block; background:var(--surface-2); color:var(--ink-faint);
  border-radius:999px; padding:5px 14px; font-size:12px;
}
.rozmowa__formularz{display:flex; gap:8px; align-items:flex-end;}
.rozmowa__plik{display:inline-block; max-width:100%; font-size:13px; color:var(--ink-muted); text-decoration:underline;}
.rozmowa__plik img{display:block; width:240px; max-width:100%; height:auto; max-height:220px; border:1px solid var(--line); object-fit:cover;}
.rozmowa__wpis--moja .rozmowa__plik{align-self:flex-end;}
.rozmowa__formularz .textarea{flex:1; min-height:48px; resize:vertical; border-radius:20px;}
.rozmowa__formularz .btn{border-radius:999px;}

/* ============ GRAFIK PRACY — siatka miesiąca (Czas pracy → Grafik) ============ */
/* Siatka do 31 kolumn: przewija się w poziomie w swoim kontenerze, a
   kolumna z nazwiskiem i nagłówek dni zostają przyklejone. Kolory statusów
   to JEDYNE wartości spoza tokenów — kolory z arkusza właściciela (urlop,
   L4, urlop bezpłatny, nieobecność); tekst na nich zostaje var(--ink). */
.grafik{overflow:auto; max-height:70vh; background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-1);}
.grafik__t{border-collapse:separate; border-spacing:0; font-size:12.5px; width:100%;}
.grafik__t th,.grafik__t td{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; text-align:center; height:32px; background-clip:padding-box;}
.grafik__t thead th{
  position:sticky; top:0; z-index:2; background:var(--surface-2);
  font-size:12px; font-weight:600; color:var(--ink-muted); line-height:1.15; padding:5px 0;
  border-bottom-color:var(--line-strong);
}
.grafik__dzien-nazwa{font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-hint);}
.grafik__t .grafik__osoba{
  position:sticky; left:0; z-index:3; background:var(--surface);
  text-align:left; padding:0 12px; white-space:nowrap; min-width:180px;
  font-size:13px; font-weight:600; color:var(--ink);
  border-right:1px solid var(--line-strong);
}
.grafik__t thead .grafik__osoba{z-index:4; background:var(--surface-2); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-hint);}
.grafik__t tfoot td{position:sticky; bottom:0; z-index:2; background:var(--surface-2); font-weight:600; border-top:1px solid var(--line-strong);}
/* Etykieta "Razem w dniu" przyklejona Z LEWEJ jak wiersze wyżej (M3) —
   róg dostaje najwyższy z-index, żeby nie chował się pod sumami. */
.grafik__t tfoot .grafik__osoba{position:sticky; left:0; bottom:0; z-index:4; background:var(--surface-2);}
.grafik__d{min-width:32px; width:32px; font-variant-numeric:tabular-nums;}
.grafik__k{display:flex; align-items:center; justify-content:center; width:100%; height:32px; color:inherit; transition:box-shadow .14s ease;}
/* obwódka pod kursorem tylko na linku (właściciel) — u biura komórka to <span>, nieklikalna */
a.grafik__k:hover{box-shadow:inset 0 0 0 2px var(--ink);}
.grafik__k:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--accent);}
/* dzień wolny: sobota, niedziela, święto ustawowe (core/dni_wolne.py) */
.grafik__weekend{background:var(--surface-3); color:var(--ink-hint);}
.grafik__t thead th.grafik__dzis{box-shadow:inset 0 -3px 0 var(--accent); color:var(--ink);}
.grafik__t .grafik__suma{background:var(--surface-2); font-weight:600; min-width:52px; padding:0 6px;}
/* poprawione ręcznie — generator tego dnia nie rusza */
.grafik__reczne{position:relative;}
.grafik__reczne::after{content:""; position:absolute; top:3px; right:3px; width:5px; height:5px; background:var(--ink); pointer-events:none;}
.st-praca{background:var(--surface); color:var(--ink);}
.st-urlop{background:#CDE9FB; color:var(--ink); font-weight:600;}
.st-urlop_bezplatny{background:#D8F0DC; color:var(--ink); font-weight:600;}
.st-l4{background:#FDF0BF; color:var(--ink); font-weight:600;}
.st-nieobecnosc{background:#F3D6D4; color:var(--ink); font-weight:600;}
.legenda{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-size:12.5px; color:var(--ink-faint);}
.legenda span{display:inline-flex; align-items:center;}
.legenda i{display:inline-block; width:14px; height:14px; margin-right:6px; border:1px solid var(--line-strong);}
.legenda i.grafik__reczne-wzor{position:relative; background:var(--surface);}
.legenda i.grafik__reczne-wzor::after{content:""; position:absolute; top:2px; right:2px; width:4px; height:4px; background:var(--ink);}
@media (max-width:640px){ .grafik__t .grafik__osoba{min-width:130px; font-size:12.5px;} }
/* Od 768px cały miesiąc mieści się na ekranie BEZ paska przewijania
   (właściciel, 2026-09-19): kolumny dni dzielą szerokość między siebie,
   a czcionka skaluje się do szerokości siatki (jednostki cqi kontenera).
   Wiersz pod kursorem się powiększa — wyższy i większą czcionką — żeby dało
   się go wygodnie przeczytać. Na telefonie 31 kolumn fizycznie się nie
   zmieści, tam zostaje przewijanie z przyklejonymi nagłówkami (wyżej). */
@media (min-width:768px){
  .grafik{overflow:visible; max-height:none; container-type:inline-size;}
  .grafik__t{table-layout:fixed;}
  .grafik__t thead th, .grafik__t tfoot td, .grafik__t .grafik__osoba,
  .grafik__t tfoot .grafik__osoba{position:static;}
  .grafik__t .grafik__osoba{
    width:clamp(120px, 14cqi, 180px); min-width:0; padding:0 8px;
    overflow:hidden; text-overflow:ellipsis; font-size:clamp(11px, 1.15cqi, 13px);
  }
  .grafik__d{width:auto; min-width:0;}
  .grafik__t .grafik__suma{width:clamp(38px, 4.4cqi, 52px); min-width:0; padding:0 2px; font-size:clamp(9px, 1.05cqi, 12.5px);}
  .grafik__t th, .grafik__t td{height:26px;}
  .grafik__t thead th{padding:4px 0; font-size:clamp(9px, 1cqi, 12px);}
  .grafik__dzien-nazwa{font-size:clamp(7px, .8cqi, 10px); letter-spacing:.02em;}
  .grafik__t td.grafik__d{font-size:clamp(9px, 1.05cqi, 12.5px);}
  .grafik__k{height:26px; white-space:nowrap; transition:height .14s ease, font-size .14s ease, box-shadow .14s ease;}
  /* powiększenie wiersza pod kursorem */
  .grafik__t tbody tr:hover > *{height:40px; box-shadow:inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink);}
  .grafik__t tbody tr:hover .grafik__k{height:40px; font-size:14px; font-weight:600;}
  .grafik__t tbody tr:hover .grafik__osoba, .grafik__t tbody tr:hover .grafik__suma{font-size:14px;}
}

/* zaznaczone kratki (godziny dodatkowe na wielu dniach naraz) — czerwona
   obwódka i lekki czerwony nalot NA kolorze statusu, żeby było widać oba */
.grafik__t a.grafik__zazn{box-shadow:inset 0 0 0 2px var(--accent); background:rgba(237,28,36,.14);}
.grafik__t{-webkit-user-select:none; user-select:none;}
.grafik-zazn{
  position:sticky; bottom:12px; z-index:6;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  padding:10px 14px; background:var(--chrome); color:var(--chrome-ink); box-shadow:var(--elev-4);
}
.grafik-zazn[hidden]{display:none;}
.grafik-zazn__ile{font-size:13px; color:var(--chrome-ink-muted);}
.grafik-zazn__ile b{color:var(--chrome-ink); font-weight:600;}
.grafik-zazn__pole{display:flex; align-items:center; gap:8px; font-size:13px;}
.grafik-zazn__pole .input{width:90px; min-height:36px; padding:6px 10px;}
.grafik-zazn .btn-ghost{color:var(--chrome-ink);}
.grafik-zazn .btn-ghost:hover{background:var(--chrome-hover); color:var(--chrome-ink);}

/* formularz dnia w grafiku */
.grafik-dzien__form{display:flex; flex-direction:column; gap:12px;}
.grafik-dzien__godziny{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grafik-dzien__przyciski{display:flex; gap:10px;}
.grafik-dzien__przyciski > *{flex:1 1 0;}
.grafik-dzien__usun{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:6px; padding-top:12px; border-top:1px solid var(--line);}
.grafik-dzien__usun-btn{color:var(--danger); padding-left:0; padding-right:0;}
.grafik-dzien__usun-btn:hover{background:transparent; color:var(--danger); text-decoration:underline;}

/* ============ BILANS URLOPÓW (Czas pracy → Bilans urlopów) ============ */
.bilans{overflow-x:auto; background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-1);}
.bilans__t{border-collapse:collapse; width:100%; font-size:13px;}
.bilans__t th,.bilans__t td{padding:8px 12px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.bilans__t thead th{background:var(--surface-2); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-hint); border-bottom-color:var(--line-strong);}
.bilans__t tbody th{text-align:left; font-weight:600; color:var(--ink);}
.bilans__t thead th:first-child{text-align:left;}
.bilans__limit{display:flex; gap:6px; justify-content:flex-end; align-items:center;}
.bilans__pole{width:72px; min-height:34px; padding:6px 8px; text-align:right;}
.bilans__t--kompakt th,.bilans__t--kompakt td{padding:6px 8px; font-size:12.5px;}
/* Wypłaty: lista pracowników bywa długa (kilkanaście wierszy) — nagłówek
   kolumn zostaje widoczny przy przewijaniu (position:sticky w obrębie tego
   kontenera), żeby nie trzeba było pamiętać, która kolumna to co. Modyfikator
   celowo osobny od .bilans (Bilans urlopów używa tej samej klasy bazowej i
   ma zwykle za mało wierszy, żeby przewijanie miało znaczenie). */
.bilans--przewijalny{max-height:70vh; overflow-y:auto;}
.bilans--przewijalny .bilans__t thead th{position:sticky; top:0; z-index:1; box-shadow:0 1px 0 var(--line-strong);}
.premia-cel{position:relative; text-align:left; min-width:172px;}
.premia-zwiezle{display:flex; align-items:center; gap:6px; justify-content:flex-end;}
.premia-tekst{color:var(--ink-muted); font-size:12px;}
.btn-ikona{
  width:26px; height:26px; flex-shrink:0; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-muted); cursor:pointer;
}
.btn-ikona:hover{background:var(--surface-3); color:var(--ink);}
.premia-okno{width:min(320px, calc(100vw - 32px)); box-sizing:border-box; padding:20px; border:1px solid var(--line); background:var(--surface); color:var(--ink); box-shadow:var(--elev-3);}
.premia-okno::backdrop{background:rgba(15,15,16,.45);}
.premia-okno form{display:flex; flex-direction:column; gap:14px;}
.premia-okno__akcje{display:flex; gap:8px; justify-content:flex-end;}
.bilans__pole--podpowiedz{color:var(--ink-hint); font-style:italic;}
.bilans__pasek{position:relative; height:8px; min-width:140px; background:var(--surface-3);}
.bilans__pasek span{position:absolute; top:0; bottom:0; left:0; background:var(--ink);}
.bilans__wiersz--ponad .bilans__pasek span{background:var(--danger);}
.bilans__wiersz--ponad .bilans__zostalo{color:var(--danger); font-weight:600;}

/* ============ KARTA PRACOWNIKA (Czas pracy → nazwisko) ============ */
.osoba-link{color:inherit; text-decoration:none;}
.osoba-link:hover{color:var(--accent); text-decoration:underline;}
.karta__kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;}
.karta__kpi .kpi__num{font-size:28px;}
.rok{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.mies{background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-1); padding:12px;}
.mies__n{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;}
.mies__n a{color:var(--ink); text-decoration:none;}
.mies__n a:hover{color:var(--accent);}
.mies__d{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; font-family:var(--font-mono); font-size:12px;}
.mies__d b{font-weight:500; font-size:10px; color:var(--ink-hint); text-align:center; padding-bottom:2px; font-family:var(--font-sans, inherit);}
.mies__d > a,.mies__d > i{display:flex; align-items:center; justify-content:center; aspect-ratio:1; font-style:normal; color:var(--ink); text-decoration:none; background:var(--surface);}
.mies__d > .mies__pusty{background:transparent;}
.mies__d > a:hover{box-shadow:inset 0 0 0 2px var(--ink);}
.mies__d > a:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--accent);}
.mies__d > .mies__dzis{box-shadow:inset 0 -3px 0 var(--accent);}
/* `.mies__d > a,.mies__d > i` (wyżej) ma wyższą specyficzność niż `.st-*` /
   `.grafik__weekend` same — dopisujemy tu reguły tej samej specyficzności
   (klasa + selektor potomka), żeby kolor statusu/dnia wolnego wygrał. Kolory
   skopiowane z `.st-*` i `.grafik__weekend` wyżej w tym pliku. Status po dniu
   wolnym, żeby ręczny wpis urlopu w sobotę/niedzielę miał kolor statusu. */
.mies__d > .grafik__weekend{background:var(--surface-3); color:var(--ink-hint);}
.mies__d > .st-praca{background:var(--surface); color:var(--ink);}
.mies__d > .st-urlop{background:#CDE9FB; color:var(--ink);}
.mies__d > .st-urlop_bezplatny{background:#D8F0DC; color:var(--ink);}
.mies__d > .st-l4{background:#FDF0BF; color:var(--ink);}
.mies__d > .st-nieobecnosc{background:#F3D6D4; color:var(--ink);}

/* ============ ZATRUDNIENIE (edycja pracownika) ============ */
.zatrudnienie__teraz{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 14px; background:var(--surface-2); border:1px solid var(--line);}
.zatrudnienie__stawka{font-family:var(--font-mono); font-weight:600; font-size:18px; color:var(--ink);}
.zatrudnienie__form{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr) auto; gap:12px; align-items:end;}
.zatrudnienie__form .btn{width:auto;}
@media (max-width:640px){ .zatrudnienie__form{grid-template-columns:1fr;} .zatrudnienie__form .btn{width:100%;} }

/* ============ ZAKUPY DO ZGŁOSZEŃ + wyszukiwarka (właściciel, 2026-09-19) ============ */
.zgloszenie__zakupy{display:inline-flex; align-items:center; gap:5px; margin-top:4px; font-size:12px; font-weight:600; color:var(--ink-faint);}
.zgloszenie__zakupy:hover{color:var(--ink);}
.zgloszenie__zakupy svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.small .zgloszenie__zakupy{display:flex; width:fit-content;}
.zakup-form{display:grid; grid-template-columns:minmax(0,2fr) repeat(4, minmax(0,1fr)); gap:12px; align-items:end;}
.zakup-form__szeroko{grid-column:1 / -1;}
.zakup-form__przyciski{grid-column:1 / -1; display:flex; justify-content:flex-end; gap:8px;}
@media (max-width:760px){ .zakup-form{grid-template-columns:1fr 1fr;} .zakup-form__nazwa{grid-column:1 / -1;} }
.zakup__link a, .wynik-zakupu__linki a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
.zakup__akcje{display:flex; gap:4px; justify-self:end;}
.zakup__akcje form{margin:0;}
.wyniki-zakupow{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.wynik-zakupu{display:flex; flex-direction:column; gap:3px; padding:10px 0; border-top:1px solid var(--line-soft);}
.wynik-zakupu__gora{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;}
.wynik-zakupu__nazwa{font-weight:600;}
.wynik-zakupu__cena{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;}
.wynik-zakupu__linki{display:flex; gap:14px; font-size:12.5px;}
.szukaj-zakupow__pasek{display:flex; gap:8px; align-items:center;}
.szukaj-zakupow__pasek .input{flex:1;}
.odpowiedz-zakupy{padding:11px 14px; background:var(--surface-2); border-left:3px solid var(--ink); font-size:14px; line-height:1.55;}
.odpowiedz-zakupy--blad{border-left-color:var(--warn-accent); color:var(--warn);}


/* znacznik „test” przy dziale ukrytym przed kierownikiem/biurem (app/moduly.py) */
/* licznik zadań z nowymi wiadomościami (nowy wygląd Zadań 2026-10-08) */
.sidebar__nowe{margin-left:auto; font-size:11px; font-weight:700; line-height:1; background:var(--accent); color:#fff; border-radius:99px; padding:3px 7px; font-variant-numeric:tabular-nums;}
.sidebar__test{
  margin-left:7px; padding:1px 5px; font-size:9.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; background:var(--warn-accent); color:#1B1203; vertical-align:2px;
}
/* dział podrzędny na ekranie ustawień (np. Panel budowy pod Budowami) */
.dzial--podrzedny > span:first-child{display:flex; align-items:baseline; flex-wrap:wrap; padding-left:22px; position:relative;}
.dzial--podrzedny .dzial__wciecie{position:absolute; left:4px; top:6px; bottom:6px; width:2px; background:var(--line-strong);}
.dzial--podrzedny .hint{flex-basis:100%;}
/* ============ SZUKAJKA DOKUMENTÓW (ekran budowy) ============ */
/* Przyklejona do dołu ekranu, na każdej zakładce (właściciel, 2026-09-20).
   Ujemne marginesy wychodzą poza padding .view, żeby pasek szedł przez całą
   szerokość widoku; cień --elev-4 to token opisany jako "pasek przyklejony".
   Jasna, jak cały panel — nie chroma jak .grafik-zazn, bo to nie jest pasek
   akcji na zaznaczeniu, tylko stałe pole wyszukiwania. */
/* Sam `position:sticky` nie wystarcza: przy krótkiej treści (pusta jeszcze
   Organizacja) pasek stanąłby tuż pod nią, w połowie ekranu. Kolumna flex +
   `margin-top:auto` spycha go na dół widoku, a sticky trzyma go w kadrze,
   gdy treść jest dłuższa niż ekran. :has() włącza to tylko na ekranach,
   które ten pasek naprawdę mają — reszta panelu zostaje nietknięta.
   `overflow-x:clip` zamiast dziedziczonego `hidden`: `hidden` na jednej osi
   zamienia drugą na `auto`, przez co .view stawało się własnym oknem
   przewijania i sticky przyklejał pasek do dna .view — hen pod ekranem.
   `clip` obcina tak samo, ale okna przewijania nie tworzy. */
.view:has(.dolny-pas){display:flex; flex-direction:column; overflow-x:clip;}
.view:has(.dolny-pas) > .stack{flex:0 0 auto;}
/* Dolny pas ekranu budowy: dok katalogów i wyszukiwarka jedną bryłą. Sticky
   siedzi na PASIE, nie na paskach z osobna — dwa elementy z `bottom:0`
   nachodziłyby na siebie, a nie stawały jeden nad drugim. */
.dolny-pas{
  position:sticky; bottom:0; z-index:6;
  margin:auto -16px -16px;
  display:flex; flex-direction:column;
  box-shadow:var(--elev-4);
}
.szukajka{
  padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--line-strong);
}
.szukajka__pasek{
  display:flex; align-items:center; gap:10px;
  max-width:820px; margin:0 auto; padding:0 12px;
  background:var(--surface-2); border:1px solid var(--line);
}
.szukajka__pasek:focus-within{border-color:var(--ink); background:var(--surface);}
.szukajka__ikona{flex:none; color:var(--ink-hint);}
.szukajka__pole{
  flex:1 1 auto; min-width:0; min-height:44px; padding:0;
  border:0; background:transparent; color:var(--ink); font-size:15px;
}
.szukajka__pole::placeholder{color:var(--ink-placeholder);}
/* przeglądarka dokłada polu `type=search` własny krzyżyk — obok naszego
   wyglądałoby to jak dwa różne „zamknij" */
.szukajka__pole::-webkit-search-cancel-button{display:none;}
.szukajka__pole:focus{outline:none;}
@media (max-width:559px){
  .szukajka__pole{font-size:16px;}  /* mniejsze pole = iOS przybliża stronę */
}

/* ============ KAFELKI TYPÓW DOKUMENTÓW (zakładka Generatory) ============
   Ten sam język wizualny co dok: kolor niesie obrys, nie wypełnienie, a typ
   bez założonego folderu ma obrys przerywany. */
.kafelki{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px;}
.kafelek{
  display:flex; flex-direction:column; gap:4px;
  padding:14px; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-1);
  border-left:3px solid var(--kolor);
}
.kafelek:hover{background:var(--surface-2); box-shadow:var(--elev-2);}
.kafelek:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--accent);}
.kafelek__znak{width:13px; height:13px; border:2px solid var(--kolor); background:color-mix(in srgb, var(--kolor) 10%, transparent);}
.kafelek--brak .kafelek__znak{border-style:dashed; background:transparent;}
.kafelek__nazwa{font-size:14.5px; font-weight:600; line-height:1.3;}
.kafelek__stan{font-size:12px; color:var(--ink-hint);}
.kafelek--brak .kafelek__nazwa{color:var(--ink-faint);}

/* ============ DOK KATALOGÓW BUDOWY (dolny pas ekranu budowy) ============
   Katalogi nie są osobną zakładką, tylko dokiem przy dolnej krawędzi, tak
   jak wyszukiwarka (właściciel, 2026-09-21). Zwinięty domyślnie, rozwija się
   W GÓRĘ — razem z katalogami, bo kolumny są dosunięte do dolnej krawędzi
   płótna i wyrastają do góry, zamiast spadać z sufitu. */
.dok{display:flex; flex-direction:column; background:var(--paper);}
/* `display:flex` wyżej bije domyślne `display:none` atrybutu hidden */
.dok[hidden]{display:none;}

/* Wysokość ustawia JS (animate z Motion) — CSS daje tylko stan zwinięty. */
.dok__panel{
  height:0; overflow:hidden;
  background:var(--surface); border-top:1px solid var(--line);
}
.dok__wnetrze{display:flex; flex-direction:column; height:100%;}

.dok__legenda{
  flex:0 0 auto; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding:7px 16px; border-bottom:1px solid var(--line-soft); background:var(--surface-2);
  font-size:11px; color:var(--ink-faint);
}
.dok__legenda-poz{display:flex; align-items:center; gap:6px;}
.dok__legenda-znak{
  display:inline-block; width:11px; height:11px; font-style:normal;
  border:1.6px solid var(--ink-faint); background:rgba(82,82,91,.12);
}
.dok__legenda-znak--brak{border-style:dashed; background:transparent;}
.dok__legenda-znak--etap{box-shadow:0 0 0 2.5px rgba(82,82,91,.28);}
.dok__legenda-kropka{display:inline-block; width:4px; height:4px; background:var(--ink-faint);}

/* płótno: kolumny dosunięte do DOLNEJ krawędzi */
.dok__plotno{
  flex:1 1 auto; min-height:0; position:relative;
  display:flex; align-items:flex-end;
  overflow-x:auto; overflow-y:hidden;
  padding:0 0 14px 16px;
}
/* Nakładka z kreskami leży W ŚRODKU przewijanej treści, nie na płótnie:
   inaczej jej układ współrzędnych jest układem okna, a nie kolumn, i kreski
   rozjeżdżają się przy pierwszym przewinięciu w poziomie. Rozmiar ustawia JS
   w pikselach, bez `viewBox`, żeby współrzędne szły 1:1. */
.dok__kreski{position:absolute; left:0; top:0; pointer-events:none; overflow:visible;}
.dok__kolumny{position:relative; display:flex; align-items:flex-end; width:max-content; min-width:100%;}

.dok__kol{
  flex:0 0 auto; width:200px; margin-right:52px;   /* 52px = miejsce na kreski */
  display:flex; flex-direction:column; justify-content:flex-end; gap:1px;
}
.dok__kol-tytul{
  order:-1;                      /* nagłówek zostaje NAD listą, która rośnie w górę */
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--ink-hint); padding:0 10px 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.dok__poz{
  position:relative; display:flex; align-items:center; gap:9px;
  width:100%; padding:7px 8px 7px 10px; min-height:34px;
  border:0; border-left:2px solid transparent; background:transparent;
  text-align:left; font-size:13.5px; color:var(--ink);
}
.dok__poz:hover{background:var(--surface-3);}
.dok__poz:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--accent);}
.dok__poz--wybrana{background:var(--surface-3); font-weight:600;}
.dok__poz--wybrana::after{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--kolor);}
.dok__poz--brak{color:var(--ink-hint);}
/* Znacznik gałęzi: kolor niesie OBRYS, nie wypełnienie (spec, etap 3). */
.dok__znak{
  flex:0 0 auto; width:11px; height:11px; border:1.6px solid var(--kolor);
  background:color-mix(in srgb, var(--kolor) 10%, transparent);
}
.dok__poz--brak .dok__znak{border-style:dashed; background:transparent;}
.dok__poz--etap .dok__znak{box-shadow:0 0 0 2.5px color-mix(in srgb, var(--kolor) 28%, transparent);}
/* Nazwa ZAWIJA się zamiast urywać wielokropkiem — „Protokoły odbiorowe z prób”
   musi dać się przeczytać w całości. Wiersze mają wtedy różną wysokość, ale
   kreski liczą się z położenia elementów, więc nic to nie psuje. */
.dok__nazwa{flex:1 1 auto; min-width:0; overflow-wrap:anywhere; line-height:1.32;}
.dok__oznaczenia{flex:0 0 auto; display:flex; gap:5px; align-items:center;}
.dok__kropka{width:4px; height:4px; background:var(--kolor);}
.dok__klodka{flex:0 0 auto; color:var(--ink-placeholder);}
.dok__strzalka{flex:0 0 auto; color:var(--ink-placeholder);}
.dok__poz--wybrana .dok__strzalka{color:var(--ink-faint);}
.dok__kol--korzen .dok__poz{padding-top:9px; padding-bottom:9px; font-size:14.5px; font-weight:600;}
.dok__kol--korzen .dok__znak{width:13px; height:13px; border-width:2px;}

.dok__kreska{fill:none;}

/* Akcje katalogu (etap 4): poziomy pasek tuż nad uchwytem, zawsze w tym samym
   miejscu — kliknięcie węzła jest zajęte przez rozwijanie kolumny. */
.dok__akcje{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 16px; border-top:1px solid var(--line); background:var(--surface-2);
}
.dok__akcje[hidden]{display:none;}
.dok__akcje-nazwa{font-size:13px; font-weight:600; color:var(--ink);}
.dok__akcje-tresc{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.dok__akcja{
  padding:7px 12px; min-height:36px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:13px; text-align:left;
}
.dok__akcja:hover:not(:disabled){background:var(--surface-3);}
.dok__akcja:disabled{color:var(--ink-hint); cursor:not-allowed;}
.dok__akcja--wyrozniona{
  border-color:var(--accent); background:var(--accent); color:var(--accent-ink); font-weight:600;
}
.dok__akcja--wyrozniona:hover:not(:disabled){background:var(--accent-hover);}
.dok__zdanie{font-size:12.5px; color:var(--ink-faint);}

/* uchwyt — jedyne, co widać, dopóki dok jest zwinięty */
.dok__uchwyt{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 16px; min-height:42px;
  border:0; border-top:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font-size:13px; text-align:left;
}
.dok__uchwyt:hover{background:var(--surface-3);}
.dok__uchwyt:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--accent);}
.dok--otwarty .dok__uchwyt{background:var(--surface-2);}
.dok__uchwyt-ikona{flex:0 0 auto; color:var(--ink-faint);}
.dok__uchwyt-tytul{flex:0 0 auto; font-weight:600;}
.dok__uchwyt-budowa{
  flex:0 0 auto; font-family:var(--font-mono); font-size:12px;
  color:var(--ink-muted); background:var(--surface-3); padding:2px 7px;
}
/* ścieżka klikniętych katalogów — widać ją także po zwinięciu doku */
.dok__uchwyt-sciezka{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; color:var(--ink-hint);
}
/* obrót strzałki zostaje w CSS — jedna właściwość, stan i tak niesie klasa;
   reszta ruchu doku idzie przez Motion w graf-budowy.js */
.dok__uchwyt-strzalka{flex:0 0 auto; color:var(--ink-faint); transition:transform .24s cubic-bezier(.2,.7,.3,1);}
.dok--otwarty .dok__uchwyt-strzalka{transform:rotate(180deg);}
@media (prefers-reduced-motion: reduce){
  .dok__uchwyt-strzalka{transition:none;}
}

@media (max-width:559px){
  .dok__legenda{display:none;}          /* na telefonie zabiera pół doku */
  .dok__kol{width:172px; margin-right:40px;}
  .dok__uchwyt-tytul,.dok__uchwyt-sciezka{display:none;}
}

/* wyniki wyszukiwarki dokumentów (etap 5) */
.szukajka__wyniki{
  max-width:820px; margin:0 auto 8px; max-height:44vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-2);
}
.szukajka__wyniki[hidden]{display:none;}
.szukajka__zdanie{
  padding:10px 12px; font-size:13.5px; line-height:1.55; color:var(--ink);
  border-bottom:1px solid var(--line-soft); margin:0;
}
.szukajka__zdanie--model{background:var(--surface-2); border-left:3px solid var(--ink);}
/* uwaga o obiegu wrażliwym — użytkownik ma WIEDZIEĆ, że odpowiedź powstała
   na serwerze, a nie domyślać się (spec) */
.szukajka__zdanie--serwer{
  background:var(--info-soft); border-left:3px solid var(--line-strong);
  color:var(--ink-muted); font-size:12.5px;
}
.szukajka__zdanie--uwaga{background:var(--warn-soft); border-left:3px solid var(--warn-accent); color:var(--warn);}
.szukajka__lista{display:flex; flex-direction:column;}
.szukajka__wynik{
  display:flex; flex-direction:column; gap:3px; padding:9px 12px;
  border-bottom:1px solid var(--line-soft);
}
.szukajka__wynik:hover{background:var(--surface-3);}
.szukajka__wynik-nazwa{font-size:13px; font-weight:600; color:var(--ink);}
.szukajka__wynik-fragment{font-size:12.5px; color:var(--ink-faint); line-height:1.5;}
.szukajka__wynik-fragment b{color:var(--ink); font-weight:600;}
.szukajka__zamknij{
  flex:none; border:0; background:transparent; font-size:18px; line-height:1;
  color:var(--ink-hint); padding:2px 6px;
}
.szukajka__zamknij:hover{color:var(--ink);}
.szukajka__zamknij[hidden]{display:none;}

/* ======= PANEL ROZMOWY ZESPOŁU (ekran budowy, etap 7) =======
   Celowo INNA krawędź niż pasek wyszukiwarki: tamten jest na dole i jest
   rozmową z panelem, ten wysuwa się z prawej i jest rozmową z ludźmi.
   Spec: właściciel ma patrzeć na graf i pisać jednocześnie — panel nakłada
   się na prawy skraj widoku, nie przebudowuje układu (przebudowa zmieniałaby
   rozmiar płótna grafu przy każdym otwarciu). */
:root{ --rozmowa-w:380px; }

.rozmowaB__uchwyt{
  position:fixed; right:0; top:44%; z-index:7;
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid var(--line-strong); border-right:0;
  background:var(--surface); color:var(--ink); box-shadow:var(--elev-3);
  writing-mode:vertical-rl; font-size:12.5px; font-weight:600;
}
.rozmowaB__uchwyt:hover{background:var(--surface-2);}
.rozmowaB__uchwyt svg{transform:rotate(90deg);}
.rozmowaB__uchwyt-licznik{
  padding:1px 6px; background:var(--ink); color:var(--surface); font-size:11px;
}
body.ma-rozmowe .rozmowaB__uchwyt{display:none;}

.rozmowaB{
  /* nad topbarem (z-index 20), pod okienkami modalnymi (40): szuflada
     wysuwa się PRZED całym ekranem, inaczej jej nagłówek z krzyżykiem
     chowa się pod czarnym paskiem u góry */
  position:fixed; top:0; right:0; bottom:0; z-index:30;
  width:var(--rozmowa-w); max-width:100vw;
  display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid var(--line-strong);
  box-shadow:var(--elev-4);
}
.rozmowaB[hidden]{display:none;}

.rozmowaB__naglowek{
  display:flex; align-items:center; gap:8px; flex:none;
  padding:12px 12px 12px 14px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.rozmowaB__tytul{flex:1 1 auto; min-width:0; font-weight:600; font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rozmowaB__przestrzen{flex:none; font-size:11.5px; color:var(--ink-faint);}
.rozmowaB__zamknij, .rozmowaB__wstecz{
  flex:none; border:0; background:transparent; color:var(--ink-hint);
  font-size:18px; line-height:1; padding:2px 6px;
}
.rozmowaB__zamknij:hover, .rozmowaB__wstecz:hover{color:var(--ink);}
.rozmowaB__podnaglowek{flex:none; padding:8px 14px; border-bottom:1px solid var(--line-soft);}
.rozmowaB__pusto{padding:16px 14px; display:flex; flex-direction:column; gap:6px;}

.rozmowaB__watki{flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column;}
.rozmowaB__watek{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  padding:11px 14px; border:0; border-bottom:1px solid var(--line-soft);
  background:transparent; color:inherit; font:inherit;
}
.rozmowaB__watek:hover{background:var(--surface-2);}
.rozmowaB__watek-gora{display:flex; align-items:baseline; gap:8px;}
.rozmowaB__watek-tytul{flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rozmowaB__watek-licznik{flex:none; font-size:11.5px; color:var(--ink-faint);}
.rozmowaB__watek-ostatnia{
  color:var(--ink-faint); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}

.rozmowaB__tresc{flex:1 1 auto; overflow-y:auto; padding:14px;}
.rozmowaB__formularz{flex:none; padding:10px 12px; border-top:1px solid var(--line);}
.rozmowaB__nie-moge{flex:none; padding:12px 14px; border-top:1px solid var(--line);}

/* Otwarty panel nie może zasłaniać paska wyszukiwarki — pasek zwęża się o
   szerokość panelu i sam się w tym, co zostało, wyśrodkowuje. */
body.ma-rozmowe .szukajka{padding-right:calc(16px + var(--rozmowa-w));}

@media (max-width:759px){
  /* na telefonie panel wchodzi na całą szerokość — pasek i tak jest pod nim */
  :root{ --rozmowa-w:100vw; }
  body.ma-rozmowe .szukajka{display:none;}
  .rozmowaB__uchwyt{top:auto; bottom:84px; writing-mode:horizontal-tb;}
  .rozmowaB__uchwyt svg{transform:none;}
}

/* ======= GENERATORY DOKUMENTÓW (ekran budowy, etap 6) ======= */
.tr--wybrany{background:var(--surface-2); box-shadow:inset 3px 0 0 var(--ink);}

/* Wgranie wzoru z komputera. Wybór z „wzory formularzy" wypadł razem ze
   stylami .wzor-wybor (właściciel, 2026-09-21). */
.wzor-wgraj{
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
  padding:10px; border:1px solid var(--line-soft); background:var(--surface-2);
}
.wzor-wgraj__pole{display:flex; flex-direction:column; gap:4px; flex:1 1 280px; min-width:0;}
.wzor-wgraj input[type="file"]{padding:6px 8px; font-size:13px;}

/* Lista osób do druku — dwie kolumny na szerokim ekranie, jedna na telefonie.
   Braki danych pokazujemy PRZY osobie, nie zbiorczo: człowiek ma od razu
   widzieć, kogo dopisać w karcie pracownika. */
.druk-osoby{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:2px;}
.druk-osoby__wiersz{
  display:flex; align-items:center; gap:8px; padding:7px 9px;
  border:1px solid var(--line-soft); background:var(--surface);
}
.druk-osoby__wiersz:hover{background:var(--surface-2);}
.druk-osoby__wiersz span:first-of-type{flex:1 1 auto; min-width:0; font-size:13.5px;}

/* ======= EKRAN AGENTA (warstwa narzędzi MCP, etap 8) ======= */
.agent__decyzja{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.agent__nowy{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.agent__nowy .input{flex:1 1 260px; min-width:0;}
/* Klucz pokazujemy RAZ — ma być łatwy do zaznaczenia i nie może się urwać. */
.agent__klucz{
  display:block; padding:10px 12px; background:var(--surface-2);
  border:1px solid var(--line); font-size:13px; user-select:all;
  word-break:break-all; line-height:1.5;
}

/* Panel rozmowy jako jeden widok (2026-09-21): u góry przypięte wątki zadań,
   pod nimi rozmowa od dołu, na dole pole do pisania. */
.rozmowaB__przypiete{
  flex:none; max-height:34%; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;  /* wiersze-przyciski rozciągają się na całą szerokość */
  border-bottom:1px solid var(--line);
}
.rozmowaB__przegroda{
  padding:8px 14px 4px; color:var(--ink-hint); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; font-size:10.5px;
}
.rozmowaB__watek--zwarty{padding:7px 14px;}
.rozmowaB__watek--aktywny{background:var(--surface-2); box-shadow:inset 3px 0 0 var(--ink);}
.rozmowaB__watek--aktywny:hover{background:var(--surface-3);}
.rozmowaB__podnaglowek{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;
}
.rozmowaB__rozmowa-tytul{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rozmowaB__podnaglowek .rozmowaB__wstecz{padding:0; font-size:12.5px; font-weight:600;}
/* Rozmowa kotwiczy się przy dolnej krawędzi — krótka nie zawisa pod listą
   wątków, tylko siedzi tuż nad polem do pisania, jak w komunikatorze. */
.rozmowaB__tresc{display:flex; flex-direction:column;}
.rozmowaB__tresc .rozmowa__lista{margin-top:auto;}

/* ======= OPERAT POWYKONAWCZY (ekran budowy, H5) ======= */
.operat__pasek{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  padding:10px 14px; background:var(--surface); border:1px solid var(--line);
  font-size:13px;
}
.operat__licz b{font-size:15px;}
.operat__licz--zle{color:var(--danger);}
.operat__licz--uwaga{color:var(--warn);}
/* Licznik, który jest wejściem: kolor dziedziczy po stanie (--uwaga bije
   niebieski link), więc klikalność niesie podkreślenie, nie barwa. */
.operat__licz--link{color:inherit; text-decoration:underline;
  text-decoration-style:dotted; text-underline-offset:3px;}
.operat__licz--link:hover{text-decoration-style:solid;}
.operat__akcje{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
/* Pasek postępu składania: jedno zdanie i kręciołek. Bez procentów — postęp
   pobierania nie mówi nic o tym, ile potrwa samo składanie. */
.operat__postep{
  display:flex; align-items:center; gap:10px; font-size:13px;
  padding:10px 14px; border:1px solid var(--line); background:var(--surface-2);
}
.operat__postep-kreci{
  width:13px; height:13px; flex:0 0 auto; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--ink-hint);
  animation:operat-kreci .8s linear infinite;
}
@keyframes operat-kreci{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.operat__postep-kreci{animation-duration:2.4s;}}

/* Lista ścieżek katalogów (raport przenosin). Bez punktorów, bo ścieżka i tak
   zaczyna się nazwą — punktor tylko przesuwałby kolumnę. */
.lista-prosta{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:4px; font-size:13px;}
.lista-prosta li{padding:5px 0; border-bottom:1px solid var(--line-soft);}
.lista-prosta li:last-child{border-bottom:0;}

.operat__spis{display:flex; flex-direction:column;}
/* Pozycja spisu: numer, tytuł, przypisane pliki, suma stron. Wcięcie niesie
   poziom, bo w operacie numer „2.2.1" bez wcięcia gubi się wzrokowo. */
.operat__poz{
  display:grid; grid-template-columns:64px minmax(0,1.3fr) minmax(0,1.6fr) 56px;
  gap:10px; align-items:baseline;
  padding:8px 10px; border-bottom:1px solid var(--line-soft);
}
.operat__poz--p2{padding-left:26px;}
.operat__poz--p3{padding-left:44px;}
.operat__poz--brak{background:var(--danger-soft);}
.operat__lp{font-weight:600; font-size:13px;}
.operat__tytul{font-size:13.5px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;}
.operat__pliki, .operat__luzne{display:flex; flex-direction:column; gap:3px;}
.operat__luzne{padding:2px 0;}
.operat__plik{display:flex; align-items:baseline; gap:6px; font-size:12.5px; color:var(--ink-faint);}
.operat__brak{font-size:12.5px; color:var(--danger); font-weight:600;}
.operat__stron{text-align:right; font-size:12.5px; color:var(--ink-faint);}

@media (max-width:759px){
  .operat__poz{grid-template-columns:52px minmax(0,1fr); }
  .operat__pliki, .operat__stron{grid-column:2;}
  .operat__stron{text-align:left;}
}

/* --- edycja spisu operatu (H6) --------------------------------------------
   Wcięcie niesie poziom, a numer stoi w stałej kolumnie, żeby przy
   przestawianiu było widać, co się przesunęło. */
.spis-pasek{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--line); background:var(--surface-2);
}
.spis-pasek__miejsce{flex:1 1 auto;}
.spis-pasek__stan--zle{color:var(--accent); font-weight:600;}

.spis-edycja{display:flex; flex-direction:column;}
.spis-wezel{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:10px; padding:7px 10px; border-bottom:1px solid var(--line);
}
.spis-wezel:last-child{border-bottom:0;}
.spis-wezel--p2{padding-left:34px; background:var(--surface);}
.spis-wezel--p3{padding-left:62px; background:var(--surface);}
.spis-wezel--p3 .spis-wezel__tytul{font-size:13px;}
.spis-wezel--poufny{box-shadow:inset 3px 0 0 var(--accent);}
.spis-wezel__lp{min-width:52px; font-weight:600; color:var(--ink-hint);
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;}
.spis-wezel__poufne{font-size:10px; letter-spacing:.02em;}
.spis-wezel--p1 .spis-wezel__lp{color:var(--ink);}
.spis-wezel__tytul{width:100%;}
.spis-wezel--p1 .spis-wezel__tytul{font-weight:600;}
.spis-wezel__akcje{display:flex; gap:4px;}
.spis-wezel__akcja{
  min-width:30px; min-height:30px; padding:0 6px; line-height:1;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:14px;
}
.spis-wezel__akcja:hover:not(:disabled){background:var(--surface-3);}
.spis-wezel__akcja:disabled{color:var(--line-strong); cursor:not-allowed;}
.spis-wezel__opis{grid-column:2 / -1; margin-top:2px; white-space:pre-line;}
.spis-wezel__opis[role=button]{cursor:pointer;}
.spis-wezel__opis[role=button]:hover{color:var(--ink);}
.spis-wezel__punkty{grid-column:2 / -1; width:100%; min-height:72px; resize:vertical;
  font-size:13px; line-height:1.5;}
.spis-wezel__podpowiedz{grid-column:2 / -1; margin-top:-4px;}
.spis-wezel__akcja[aria-pressed=true]{background:var(--ink); border-color:var(--ink); color:#fff;}
.spis-wezel__akcja[aria-pressed=true]:hover:not(:disabled){background:var(--ink);}

@media (max-width:559px){
  .spis-wezel{grid-template-columns:auto minmax(0,1fr); }
  .spis-wezel__akcje{grid-column:1 / -1; justify-content:flex-end;}
  .spis-wezel--p2{padding-left:18px;}
  .spis-wezel--p3{padding-left:32px;}
}

/* --- zatwierdzanie podmian skanów (H7) ------------------------------------
   Po lewej to, co ZNIKNIE, po prawej to, co wejdzie. Strzałka w środku,
   bo kierunek zamiany jest tu najważniejszą informacją. */
.podmiana{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 10px; border:1px solid var(--line-soft); background:var(--surface);
}
.podmiana__znika{flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:2px;}
.podmiana__znika b{text-decoration:line-through; text-decoration-color:var(--accent);}
.podmiana__strzalka{color:var(--ink-hint); font-size:18px;}
.podmiana__wchodzi{flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:2px;}

.podmiana--decyzja{flex-direction:column; align-items:stretch; gap:8px; background:var(--surface-2);}
.podmiana__naglowek{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.podmiana__wybor{display:flex; flex-direction:column; gap:4px; color:var(--ink-faint);}

/* Ostrzeżenie o skanie celującym w plik finalny ma KRZYCZEĆ — to jedyny
   przypadek, w którym zatwierdzenie usuwa z operatu dokument, który nie miał
   podlegać podmianie. */
.podmiana--ostrzezenie{border-color:var(--accent); border-width:2px;}
.podmiana__alarm{
  padding:8px 10px; background:var(--accent); color:var(--accent-ink);
  font-size:13px; line-height:1.45;
}


/* ======= PUNKTY DNIA — zwarta lista (właściciel, 2026-09-21) =======
   Wiersz to numer, jedna linia treści i dwa małe znaczniki (osoba, zadanie z
   planu) zamiast trzech pól i przełącznika „Zmień” pod każdym punktem.
   Podpunkty wcina cienka linia prowadząca; × pokazuje się po najechaniu. */
.pkt-lista, .pyt-lista{display:flex; flex-direction:column; border:1px solid var(--line); background:var(--surface);}
.pkt-lista:empty, .pyt-lista:empty{display:none;}
.punktglowny{border-bottom:1px solid var(--line-soft);}
.punktglowny:last-child{border-bottom:0;}
.podpunkty{margin-left:30px; border-left:2px solid var(--line);}

.pkt, .pyt{
  display:grid; grid-template-columns:34px minmax(0,1fr) auto 28px;
  gap:4px 8px; align-items:start; padding:4px 8px 4px 6px;
}
/* Punkty dnia (nie pytania) dostają dodatkową kolumnę na strzałki kolejności. */
.pkt{grid-template-columns:34px minmax(0,1fr) auto 20px 28px;}
.pkt:hover, .pkt:focus-within, .pyt:hover, .pyt:focus-within{background:var(--surface-2);}
.pkt__num, .pyt__num{padding-top:8px; text-align:right; font-size:12px; color:var(--ink-hint); font-variant-numeric:tabular-nums;}
.pkt__tresc, .pyt__tresc{
  width:100%; box-sizing:border-box; min-height:34px; padding:6px 8px;
  resize:none; overflow:hidden; border:1px solid transparent; background:transparent;
  color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.4;
}
@supports (field-sizing:content){ .pkt__tresc, .pyt__tresc{field-sizing:content;} }
.pkt__tresc:hover, .pyt__tresc:hover{border-color:var(--line);}
.pkt__tresc:focus, .pyt__tresc:focus{outline:none; background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 3px rgba(237,28,36,.16);}
.pkt__meta, .pyt__meta{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; padding-top:4px;}
.pkt__osoba, .pkt__plan, .pyt__osoba{
  min-height:26px; max-width:190px; padding:2px 6px; text-overflow:ellipsis;
  font-family:var(--font-body); font-size:12.5px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
}
.pkt__osoba:focus, .pkt__plan:focus, .pyt__osoba:focus{outline:none; border-color:var(--accent);}
/* osoba inna niż domyślna — wyróżniona, żeby wyjątki było widać z daleka */
.pkt__osoba--inna{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn); font-weight:600;}
.pkt__plan--pusty{background:transparent; border-style:dashed; color:var(--ink-hint);}
/* Podpunkt dotyczy zadania z planu wybranego w punkcie głównym, a gdy punkt
   główny ma osobę — także tej osoby (właściciel, 2026-10-07). */
.pkt--pod .pkt__plan{display:none;}
.punktglowny--osoba .pkt--pod .pkt__osoba{display:none;}
.pkt__usun, .pyt__usun{
  width:28px; height:28px; margin-top:3px; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--ink-faint); opacity:0; transition:opacity .12s ease;
}
.pkt:hover .pkt__usun, .pkt:focus-within .pkt__usun, .pyt:hover .pyt__usun, .pyt:focus-within .pyt__usun{opacity:1;}
.pkt__usun:hover, .pyt__usun:hover{background:var(--danger-soft); color:var(--danger);}
@media (hover:none){ .pkt__usun, .pyt__usun{opacity:1;} }
.pkt__ruch{
  width:20px; margin-top:3px; display:flex; flex-direction:column;
  opacity:0; transition:opacity .12s ease;
}
.pkt:hover .pkt__ruch, .pkt:focus-within .pkt__ruch{opacity:1;}
@media (hover:none){ .pkt__ruch{opacity:1;} }
.pkt__gora, .pkt__dol{
  width:20px; height:14px; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--ink-faint); padding:0;
}
.pkt__gora:hover, .pkt__dol:hover{background:var(--surface-2); color:var(--ink);}
.pkt__gora:disabled, .pkt__dol:disabled{opacity:.25;}
.pkt__gora:disabled:hover, .pkt__dol:disabled:hover{background:transparent; color:var(--ink-faint);}
.pkt__dodaj{
  margin:0 0 4px 42px; padding:2px 8px; border:0; background:transparent;
  color:var(--ink-hint); font-family:var(--font-body); font-size:12.5px; text-align:left;
}
.pkt__dodaj:hover{color:var(--ink); background:var(--surface-2);}
@media (max-width:1039px){
  /* przy węższym widoku znaczniki schodzą pod treść — obok zjadałyby tyle
     miejsca, że treść łamałaby się co kilka znaków */
  .pkt, .pyt{grid-template-columns:34px minmax(0,1fr) 28px;}
  .pkt{grid-template-columns:34px minmax(0,1fr) 20px 28px;}
  .pkt__meta, .pyt__meta{grid-column:2; grid-row:2; justify-content:flex-start;}
  .pkt__usun, .pyt__usun{grid-column:3; grid-row:1;}
  .pkt__ruch{grid-column:3; grid-row:1;}
  .pkt__usun{grid-column:4; grid-row:1;}
}
@media (max-width:759px){
  /* na telefonie pole ma 16px (iOS nie powiększa strony) */
  .pkt, .pyt{grid-template-columns:28px minmax(0,1fr) 28px;}
  .pkt{grid-template-columns:28px minmax(0,1fr) 20px 28px;}
  .pkt__tresc, .pyt__tresc{font-size:16px;}
  .podpunkty{margin-left:14px;}
}

/* ======= DZIENNIK DISKORD — oś podsumowań budowy (właściciel, 2026-09-22) =======
   Wyszukiwarka sprzężona z harmonogramem, oś dni (znacznik rośnie/podświetla
   się po najechaniu — zwykły CSS transition, tańszy niż JS dla tego efektu),
   panel dnia pod osią. */
.dziennikB{display:flex; flex-direction:column; gap:14px;}
.dziennikB__szukajka{
  position:relative; display:flex; align-items:center; gap:8px;
  border:1px solid var(--line-strong); background:var(--surface); padding:0 12px; min-height:44px;
}
.dziennikB__szukajka svg{color:var(--ink-muted); flex-shrink:0;}
.dziennikB__szukajka input{
  flex-grow:1; border:0; outline:none; background:transparent; color:var(--ink);
  font-family:var(--font-body); font-size:14.5px; min-height:40px;
}
.dziennikB__podpowiedzi{
  position:relative; margin-top:-10px; background:var(--surface); border:1px solid var(--line-strong);
  box-shadow:var(--elev-3); z-index:5; display:flex; flex-direction:column; max-width:560px;
}
.dziennikB__podpowiedz{
  display:flex; align-items:baseline; gap:10px; width:100%; text-align:left; padding:9px 12px;
  border:0; border-bottom:1px solid var(--line-soft); background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-size:14px; cursor:pointer;
}
.dziennikB__podpowiedz:last-child{border-bottom:0;}
.dziennikB__podpowiedz:hover{background:var(--surface-2);}
.dziennikB__podpowiedz .okres{font-family:var(--font-mono); font-size:12px; color:var(--ink-hint);}

/* Scena osi — tło wzorowane na ekranie logowania (siatka + pulsująca
   poświata + przesuwająca się smuga), przełożone na jasną tonację panelu
   (właściciel, 2026-09-23 — przeniesione z warsztatu makiety). */
.dziennikB__scena{position:relative; padding:10px 12px 6px; background:var(--surface); transition:background .3s ease;}
.dziennikB__scena[data-tlo="1"]{background:var(--surface-2);}
.dziennikB__tlo{position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .35s ease;}
.dziennikB__scena[data-tlo="1"] .dziennikB__tlo{opacity:1;}
.dziennikB__siatka{position:absolute; inset:-64px;
  background-image:
    linear-gradient(to right, rgba(24,24,27,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24,24,27,.05) 1px, transparent 1px);
  background-size:48px 48px, 48px 48px;
  animation:dziennikB-siatka 14s linear infinite;}
.dziennikB__poswiata{position:absolute; top:52%; left:42%; width:62%; height:300%; border-radius:50%;
  filter:blur(14px); transform:translate(-50%,-50%); opacity:.32;
  background:radial-gradient(closest-side, rgba(237,28,36,.34) 0%, rgba(237,28,36,.13) 42%, rgba(237,28,36,0) 72%);
  animation:dziennikB-poswiata 7s ease-in-out infinite;}
.dziennikB__smuga{position:absolute; top:-20%; left:30%; width:220px; height:140%;
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%);
  animation:dziennikB-smuga 9s ease-in-out infinite;}
@keyframes dziennikB-siatka{ from{background-position:0 0, 0 0;} to{background-position:48px 48px, 48px 48px;} }
@keyframes dziennikB-poswiata{
  0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.30;}
  50%{transform:translate(-50%,-50%) scale(1.16); opacity:.55;}
}
@keyframes dziennikB-smuga{
  0%{transform:translateX(-60%) rotate(8deg); opacity:0;}
  15%,50%{opacity:.55;}
  85%,100%{transform:translateX(60%) rotate(8deg); opacity:0;}
}

.dziennikB__rama{position:relative; display:flex; align-items:flex-start;}
.dziennikB__logo{position:relative; flex:0 0 108px; align-self:stretch;}
.dziennikB__logo-img{position:absolute; left:0; top:28px; width:88px; height:auto; display:block; opacity:0;}
.dziennikB__laczka{position:absolute; left:96px; top:34px; width:14px; height:1px; background:var(--line);
  transform:scaleX(0); transform-origin:left center;}
@media (max-width:640px){
  .dziennikB__rama{flex-direction:column;}
  .dziennikB__logo{flex:0 0 auto; width:100%; height:24px;}
  .dziennikB__logo-img{top:0 !important;}
  .dziennikB__laczka{display:none;}
}

.dziennikB__przewijak{flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; padding-bottom:2px;}
.dziennikB__os{
  /* Dolny odstęp musi pomieścić CAŁĄ datę obróconą o 45° pod znacznikiem
     („17.09.2026" to ok. 40 px w pionie) — przy 30 px ostatnie cyfry ucinał
     kontener z overflow:hidden (właściciel, 2026-09-23). */
  position:relative; display:flex; align-items:flex-end; gap:8px; padding:12px 4px 56px;
  border-bottom:1px solid var(--line);
}
.dziennikB__dzien{
  position:relative; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:0;
  padding:0 2px; border:0; background:transparent; cursor:pointer; height:80px; justify-content:flex-end;
}
.dziennikB__slupek{
  width:calc(7px + var(--waga, 1) * 2.5px); height:calc(7px + var(--waga, 1) * 2.5px); max-width:22px; max-height:22px;
  background:var(--ink-muted); border-radius:50%; transform-origin:center;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), background .15s ease;
}
.dziennikB__dzien--aktywny .dziennikB__slupek{background:var(--accent); box-shadow:0 0 0 3px rgba(237,28,36,.25);}
.dziennikB__dzien--trafienie .dziennikB__slupek{background:var(--accent);}
.dziennikB__dzien--trafienie::after{
  content:""; position:absolute; bottom:-9px; left:50%; margin-left:-1px; width:2px; height:8px; background:var(--accent);
}
.dziennikB__dzien-etykieta{
  position:absolute; bottom:-4px; left:50%; font-family:var(--font-mono); font-size:10.5px;
  color:var(--ink-muted); white-space:nowrap; opacity:0; pointer-events:none;
  transform-origin:left top; transform:rotate(45deg); transition:opacity .15s ease;
  font-variant-numeric:tabular-nums;
}
.dziennikB__dzien:hover .dziennikB__dzien-etykieta,
.dziennikB__dzien:focus-visible .dziennikB__dzien-etykieta,
.dziennikB__dzien--aktywny .dziennikB__dzien-etykieta{opacity:1; color:var(--ink);}
.dziennikB__puls{position:absolute; bottom:0; left:0; width:52px; height:52px; margin:0 0 -26px -26px;
  border-radius:50%; border:2px solid var(--accent); pointer-events:none; opacity:0;}
.dziennikB__dymek{
  position:absolute; z-index:5; width:220px; padding:9px 11px; background:var(--ink); color:var(--surface);
  box-shadow:var(--elev-3); display:flex; flex-direction:column; gap:3px; pointer-events:none;
  opacity:0; transform:translateY(6px); transition:opacity .14s ease, transform .14s ease;
}
.dziennikB__dymek[data-widoczny="1"]{opacity:1; transform:translateY(0);}
.dziennikB__dymek .data{font-family:var(--font-mono); font-size:11px; color:var(--ink-placeholder);}
.dziennikB__dymek .tresc{font-size:12.5px; line-height:1.35;}
.dziennikB__dymek .meta{font-size:11px; color:var(--ink-placeholder);}
@media (prefers-reduced-motion:reduce){
  .dziennikB__slupek, .dziennikB__dzien-etykieta, .dziennikB__dymek{transition:none;}
  .dziennikB__siatka, .dziennikB__poswiata, .dziennikB__smuga{animation:none;}
  .dziennikB__poswiata{opacity:.4;}
  .dziennikB__smuga{display:none;}
}

.dziennikB__panel{padding:0; overflow:hidden;}
.dziennikB__brak{padding:24px; text-align:center;}
.dziennikB__glowka{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.dziennikB__data{font-size:16px; font-weight:500;}
.dziennikB__link{margin-left:auto; font-size:12.5px; color:var(--ink-muted); text-decoration:none; border:1px solid var(--line); padding:6px 10px;}
.dziennikB__link:hover{border-color:var(--line-strong); color:var(--ink);}
.dziennikB__tresc{padding:14px 18px; display:flex; flex-direction:column; gap:11px;}
.dziennikB__etykieta{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-hint);}
.dziennikB__punkt{display:flex; gap:12px; align-items:flex-start;}
.dziennikB__punkt-numer{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-hint); width:20px; flex-shrink:0; padding-top:2px;}
.dziennikB__punkt-opis{font-family:var(--font-mono); font-size:13px; font-weight:500;}
.dziennikB__zdjecia{display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 16px;}
.dziennikB__foto{
  width:64px; height:64px; padding:0; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-muted);
  display:flex; align-items:center; justify-content:center; cursor:zoom-in; transition:transform .15s ease;
}
.dziennikB__foto img{width:100%; height:100%; object-fit:cover; display:block;}
.dziennikB__foto:hover{transform:scale(1.1); border-color:var(--line-strong);}

/* ======= PLAN TYGODNIOWY — oś czasu w karcie Punktów dnia (2026-09-26) =======
   Zamiast numerowanej listy kodów zadań: siatka dni Pon-Pt i kolorowy pasek
   na dniach, których dotyczy zadanie — ta sama forma co pełny harmonogram,
   ale lekka (bez biblioteki Gantt), tylko do szybkiego podglądu tygodnia. */
.planoss{display:flex; flex-direction:column; gap:6px;}
.planoss__naglowek{
  display:grid; grid-template-columns:140px repeat(5,minmax(0,1fr)); gap:4px;
  font-size:11px; color:var(--ink-hint);
}
.planoss__naglowek span:not(:first-child){text-align:center;}
.planoss__wiersz{
  display:grid; grid-template-columns:140px repeat(5,minmax(0,1fr)); gap:4px;
  align-items:center;
}
.planoss__nazwa{
  font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.planoss__pasek{height:14px; border-radius:4px; background:var(--ink-muted);}
@media (max-width:759px){
  .planoss__naglowek, .planoss__wiersz{grid-template-columns:96px repeat(5,minmax(0,1fr));}
  .planoss__nazwa{font-size:12px;}
}

/* ============ Galeria zdjęć sprzętu (karta pojazdu → Zdjęcia) ============ */
.galeria__strefa{border:1.5px dashed var(--line-strong); border-radius:var(--radius-l); padding:18px; text-align:center; background:var(--surface-2);}
.galeria__strefa--nad{border-color:var(--accent); background:var(--accent-soft);}
.galeria__filtry{display:flex; gap:8px; flex-wrap:wrap;}
.galeria__filtr{font-size:13px; padding:6px 14px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-muted); background:var(--surface);}
.galeria__filtr:hover{border-color:var(--ink); color:var(--ink);}
.galeria__filtr--aktywny, .galeria__filtr--aktywny:hover{background:var(--ink); border-color:var(--ink); color:var(--surface);}
.galeria__siatka{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px;}
.galeria__kafel{display:block; width:100%; text-align:left; padding:0; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden; font:inherit; color:inherit;}
.galeria__kafel:hover{border-color:var(--line-strong); box-shadow:var(--elev-3);}
.galeria__kafel:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.galeria__kafel img{display:block; width:100%; height:130px; object-fit:cover; background:var(--surface-3);}
.galeria__podpis{padding:8px 10px; display:grid; gap:6px; font-size:12.5px;}
.galeria__nakladka{position:fixed; inset:0; z-index:200; background:rgba(11,11,11,.82); display:flex; align-items:center; justify-content:center; padding:16px;}
.galeria__nakladka[hidden]{display:none;}
.galeria__okno{width:min(1000px,100%); max-height:100%; display:grid; gap:10px; grid-template-rows:minmax(0,1fr) auto;}
.galeria__scena{display:flex; align-items:center; gap:10px; min-height:0;}
.galeria__scena img{flex:1; min-width:0; max-height:70vh; object-fit:contain; background:#000; display:block;}
.galeria__edycja{background:var(--surface); border-radius:var(--radius-l); padding:10px 12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.galeria__edycja .input{flex:1; min-width:180px;}
.galeria__nr{font-size:12px; color:#D4D4D8; text-align:center;}
.zad-dodaj__publiczne{display:flex; gap:6px; align-items:center; color:var(--ink-faint);}


/* zwijane sekcje — <details class="zwijane"><summary class="zwijane__glowa"> */
.zwijane__glowa{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; cursor:pointer; list-style:none; padding:6px 0;}
.zwijane__glowa::-webkit-details-marker{display:none;}
.zwijane__glowa .h3::before{content:""; display:inline-block; width:7px; height:7px; margin-right:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s ease; vertical-align:2px;}
.zwijane[open] > .zwijane__glowa .h3::before{transform:rotate(45deg);}
.zwijane__glowa:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.zwijane--karta{padding:10px 16px;}
.zwijane:not(.zwijane--karta){margin-top:8px;}
.zwijane:not(.zwijane--karta) > :not(summary){margin-top:8px;}

/* pojazdy: grupy wg typu, nie na całą szerokość */
.pojazdy-grupy{max-width:860px; display:flex; flex-direction:column; gap:4px;}
/* rozmiary pracowników: czytelna, wąska tabela (bez mono, paski co drugi wiersz) */
body .view .wymiary{max-width:820px;}
body.nw:not(.nw-obce) .view .wymiary .bilans__t td, body .view .wymiary .bilans__t td{font-family:inherit; font-size:15px; padding:8px 10px;}
body.nw:not(.nw-obce) .view .wymiary .bilans__t thead th{font-family:inherit; letter-spacing:0; font-size:13px; font-weight:600; text-transform:none; padding:10px;}
body.nw:not(.nw-obce) .view .wymiary .bilans__t tbody tr:nth-child(even){background:#FAFAFA;}
.wymiary .bilans__t td:first-child{white-space:nowrap; font-weight:500;}
.wymiary .bilans__t input{text-align:center; font-family:inherit; font-size:15px;}

/* strony list sprzętu: wąskie, nie na całą szerokość */
.stack--waska{max-width:860px;}

/* kafle (Tankowania i inne strony sprzętu) */
.kafle{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:12px; align-items:stretch;}
.kafel{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; padding:16px;}
.kafel:hover{box-shadow:var(--elev-3); border-color:var(--line-strong);}
.kafel--uwaga{border-color:#FCD34D; background:#FFFBEB;}
.kafel__liczby{margin-top:auto; font-size:13px; color:var(--ink-muted);}
.kafel__liczby b{font-size:22px; color:var(--ink);}
.czesci-grupy{display:flex; flex-direction:column; gap:4px;}

/* nazwa kanału budowy (#26_17tol_boisko) jako plakietka — odcina się od tła */
.kanal{display:inline-block; max-width:100%; background:#F4F4F5; border:1px solid #E4E4E7; border-radius:6px; padding:2px 8px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.4; color:var(--ink); overflow-wrap:anywhere; vertical-align:baseline;}
.kanal i{font-style:normal; color:var(--accent); margin-right:1px;}
.kanal--duzy{padding:3px 12px; border-radius:8px;}
.eyebrow .kanal{font-size:inherit; letter-spacing:normal; text-transform:none;}

/* Punkty dnia i pytania wieczorne: dwa wyraźnie różne bloki (kierownik mylił przyciski). */
.pkt-naglowek{font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;}
.pkt-dodaj-glowny{align-self:flex-start;}
.card.pyt-blok{background:rgba(239,159,39,.10); border:1.5px solid #EF9F27; border-top:1.5px solid #EF9F27; border-radius:10px; margin-top:10px;}
.pyt-blok .h3{color:#EF9F27;}
.pyt-blok .pyt-lista{background:var(--surface);}
.pyt-dodaj{background:#EF9F27; color:#412402; border:0; font-weight:600;}
.pyt-dodaj:hover{background:#FAC775;}