/* PULS — portal zarzadu.
   Szata jasna. WSZYSTKIE kolory ida przez zmienne, zeby ciemna wersje dalo sie
   dolozyc bez dotykania komponentow (SPEC 1). Cele dotykowe >= 44 px. */

:root {
  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --line: #d5dde4;
  --text: #10222f;
  --dim: #5c7183;
  --accent: #0e6b74;
  --accent-soft: #dcecee;
  /* Rampa „liczba wycieleń”. PORZĄDKOWA, jednego tonu - tylko wtedy ten sam
     odcien znaczy to samo w kazdym miejscu sekcji. Zero celowo poza tonem
     (szaroniebieski), zeby kolorowa czesc paska byla dokladnie zbiorem
     zwierzat PO wycieleniu. Szesc stopni, bo prog obciecia LGRP ustawia sie
     per ferma - bywa 3, bywa 5 kolumn. */
  --lgrp-0: #8aa4b5;
  --lgrp-1: #7cc2bb;
  --lgrp-2: #2c9a8f;
  --lgrp-3: #0e6b74;
  --lgrp-4: #0a4a52;
  --lgrp-5: #062f34;
  --good: #2c7a4b;
  --good-soft: #e4f2e9;
  --warn: #9a6608;
  --warn-soft: #fbf0d8;
  --bad: #a83224;
  --bad-soft: #fbe6e2;
  /* Kolory GRUP zdarzen na rolce dobowej. To paleta JAKOSCIOWA - cztery rozne
     rodzaje pracy, a nie skala od dobrego do zlego. Dlatego NIE siegamy tu po
     --good/--warn/--bad: w tym portalu czerwien znaczy „problem”, a szczepienie
     problemem nie jest. Cztery wyraznie rozne barwy (morska, fioletowa, bursztyn,
     szaroniebieska), bo znacznik ma trzy piksele szerokosci i musi byc rozpoznany
     samym kolorem. */
  /* Druga wersja palety. Pierwsza (morska, fiolet, bursztyn, szaroblekit) byla
     jakosciowa na papierze, ale na 3-pikselowym znaczniku morska i fiolet
     zlewaly sie w jedna ciemna kreske, a szaroblekit ginal na tle. Teraz cztery
     barwy leza mozliwie daleko od siebie na kole (niebieski, purpura,
     pomaranczowy, grafit) i daleko od czerwieni, ktora zostaje znakiem wpisu
     z data wsteczna. Pomaranczowy jest celowo JASNY i zolty - od ciemnej,
     ceglastej czerwieni rozni sie nie tylko odcieniem, ale i jasnoscia. */
  --grupa-rozrod: #2563eb;
  --grupa-ruch: #c026d3;
  --grupa-zdrowie: #f97316;
  --grupa-pozostale: #64748b;
  /* Wpis z data wsteczna na rolce: JASKRAWA zielen, nie czerwien. Czerwony
     cokol pod pomaranczowym slupkiem zlewal sie z nim w jedna ceglasta plame
     (obie barwy cieple i ciemne). Zielen jest jedyna barwa, ktorej zadna z
     czterech grup nie uzywa, i lezy naprzeciw pomaranczowego na kole.
     To celowe odejscie od zasady „zielony = dobrze”: na rolce zielen nie
     ocenia, tylko ODROZNIA - i dotyczy wylacznie rolki. Karta „Wpisy z data
     wsteczna” nad nia dalej liczy je na czerwono, bo tam to jest ostrzezenie.
     Tekst (godzina przy wierszu) dostaje ciemniejszy odcien - jasna zielen
     jako napis na bieli nie ma kontrastu. */
  /* Serie na wykresie suchej masy (DMeter). Paleta JAKOSCIOWA - kazda linia to
     inny silos albo material, zadna nie jest „lepsza”. Te same barwy, ktore
     sprawdzily sie na rolce jako rozroznialne przy cienkiej kresce. */
  --seria-1: #2563eb;
  --seria-2: #f97316;
  --seria-3: #c026d3;
  --seria-4: #16a34a;
  --seria-5: #64748b;
  --seria-6: #0e6b74;
  --wsteczny: #22c55e;
  --wsteczny-tekst: #15803d;
  /* Przebieg suszenia (DMeter 180). Kazda linia mierzy co innego (gramy,
     stopnie, procenty), wiec barwy maja sie roznic od serii trendu i od siebie:
     masa w niebieskich (ta sama rodzina co krzywa wazen), temperatura ceglasta,
     grzalka bursztynowa, dmuchawa morska, prognoza fioletowa. */
  --dm-masa-ciagla: #93b4f5;
  --dm-temp: #c2410c;
  --dm-grzanie: #f59e0b;
  --dm-dmuchawa: #0891b2;
  --dm-prognoza: #7c3aed;
  --shadow: 0 1px 2px rgba(16, 34, 47, .06), 0 8px 24px rgba(16, 34, 47, .07);
  --radius: 10px;
  --luz-main: 18px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.hidden { display: none !important; }

/* ---------- logowanie ---------- */

#ekran-logowania, #ekran-resetu, #ekran-zmiany {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.btn-tekstowy {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
}
.btn-tekstowy:hover { text-decoration: underline; }

.karta-logowania {
  width: 100%;
  max-width: 25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.marka { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.marka h1 { margin: 0; font-size: 26px; letter-spacing: .06em; font-weight: 700; }
.marka span { font-size: 13px; color: var(--dim); }
.podtytul { margin: 0 0 22px; color: var(--dim); font-size: 14px; }
.karta-logowania .wyjasnienie {
  margin: -10px 0 20px; padding: 12px 14px; border-radius: 8px;
  background: var(--accent-soft, #eef5f4); color: var(--dim);
  font-size: 13px; line-height: 1.5; text-align: left;
}

.pole { margin-bottom: 14px; }
.pole label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dim);
  margin-bottom: 5px;
  font-weight: 600;
}
.pole input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.pole input:focus { border-color: var(--accent); background: var(--surface); }

.btn-glowny {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-weight: 600;
}
.btn-glowny:hover { filter: brightness(1.08); }
.btn-glowny:disabled { opacity: .6; cursor: default; }

.komunikat-bledu {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--bad-soft);
  border: 1px solid var(--bad);
  border-radius: 6px;
  color: var(--bad);
  font-size: 14px;
}
.komunikat-bledu .zgloszenie { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; }

/* ---------- naglowek aplikacji ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 10px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
header .marka h1 { font-size: 18px; }
header .marka { margin: 0; }
.kod-stada {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 7px;
  border-radius: 4px;
}
.rozpychacz { margin-left: auto; }
header select, header button.btn-drugi {
  min-height: 40px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
header button.btn-drugi:hover { border-color: var(--accent); color: var(--accent); }
.kto { font-size: 13px; color: var(--dim); }

/* Margines strony trzymamy w zmiennej, bo pasek zakładek musi rozlewać się
   DOKŁADNIE na tyle, ile go tu jest — inaczej wystaje poza ekran (tak było:
   -18 px przy 12 px marginesu na telefonie dawało 6 px poza krawędzią). */
main { padding: var(--luz-main); max-width: 1400px; margin: 0 auto; }

/* ---------- werdykt ---------- */

.werdykt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.werdykt.ok { border-left: 5px solid var(--good); }
.werdykt.uwaga { border-left: 5px solid var(--warn); }
.werdykt.alarm { border-left: 5px solid var(--bad); }
.werdykt h2 { margin: 0 0 3px; font-size: 19px; }
.werdykt p { margin: 0; color: var(--dim); font-size: 14px; }
.werdykt .okres { font-family: var(--mono); }

/* ---------- kafle ---------- */

.kafle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.kafel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  text-align: left;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kafel:hover { border-color: var(--accent); }
.kafel .nazwa {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  font-weight: 600;
}
.kafel .liczba { font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.kafel .jednostka { font-size: 12px; color: var(--dim); margin-left: 4px; }
.kafel .zmiana { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.zmiana.lepiej { color: var(--good); }
.zmiana.gorzej { color: var(--bad); }
.zmiana.bez { color: var(--dim); }
.kafel.stan-warn { background: var(--warn-soft); }
.kafel.stan-crit { background: var(--bad-soft); }
.kafel .prog { font-size: 11px; color: var(--dim); font-family: var(--mono); }

/* ---------- zakladki ---------- */

/* Menu zostaje na ekranie przy przewijaniu. Przykleja się POD nagłówkiem, więc
   odsuwamy je o jego zmierzoną wysokość (`--wys-naglowka` ustawia JS, bo pasek
   zawija się na wąskim ekranie). Tło i cień są konieczne: bez nich treść
   przejeżdżałaby pod przyciskami i mieszała się z nimi. `z-index` niżej niż
   nagłówek (30), żeby przy zawinięciu jedno chowało się pod drugim, a nie na
   odwrót. */
.zakladki {
  display: flex; gap: 6px; flex-wrap: wrap;
  position: sticky;
  top: var(--wys-naglowka, 64px);
  z-index: 20;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--luz-main)) 14px;
  padding: 10px var(--luz-main);
  background: var(--bg);
  box-shadow: 0 6px 10px -8px rgba(16, 34, 47, .28);
}
.zakladki button {
  min-height: 44px;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 600;
  color: var(--dim);
}
.zakladki button:hover { border-color: var(--accent); color: var(--accent); }
.zakladki button.aktywna { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Panel ma wypełnić ekran pod menu, nawet gdy karta jest krótka. Bez tego
   dokument bywał niższy od okna, przeglądarka przycinała przewinięcie i strona
   sama wracała na górę — a wtedy przyklejone menu odklejało się i zjeżdżało pod
   nagłówek. Widać to było przy Zdarzeniach, Cenniku, Genetyce, Tablicy
   i Administracji; pulpit i monitor są zawsze dość długie, żeby tego uniknąć. */
.panel { min-height: calc(100vh - var(--wys-zakladek, 64px) - 16px); }
@supports (height: 100dvh) {
  .panel { min-height: calc(100dvh - var(--wys-zakladek, 64px) - 16px); }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.panel h3 { margin: 0 0 4px; font-size: 16px; }
.panel .wyjasnienie { margin: 0 0 16px; color: var(--dim); font-size: 13px; }

/* ---------- lista uwag ---------- */

.uwagi { list-style: none; margin: 0; padding: 0; }
.uwagi li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.uwagi li:last-child { border-bottom: none; }
.znacznik {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.znacznik.crit { background: var(--bad-soft); color: var(--bad); }
.znacznik.warn { background: var(--warn-soft); color: var(--warn); }
.znacznik.good { background: var(--good-soft); color: var(--good); }
.uwagi .tresc { flex: 1; min-width: 12rem; }
.uwagi .tresc b { font-weight: 600; }
.uwagi .tresc small { display: block; color: var(--dim); }
.uwagi .liczba { font-family: var(--mono); font-weight: 600; }
.uwagi li.klikalny { cursor: pointer; }
.uwagi li.klikalny:hover { background: var(--surface-2); }

/* ---------- tabela monitora ---------- */

.przewijak { overflow-x: auto; }

/* Nagłówek kolumn monitora UCIEKAŁ przy przewijaniu i miesiące stawały się
   nieczytelne — a przy niektórych pozycjach przewinięcia wyglądał, jakby stał
   w środku tabeli, poniżej pierwszych wierszy.

   Powód: `overflow-x: auto` na owijce sprawia, że przeglądarka liczy `overflow-y`
   jako `auto` i owijka staje się WŁASNYM kontenerem przewijania. Nagłówek
   przykleja się wtedy do niej, a nie do strony — a że owijka nie miała
   ograniczonej wysokości, nie przewijała się w pionie i przyklejanie nie miało
   do czego przylgnąć. Zmierzone: przy `overflow-x: auto` nagłówek lądował na
   −16 px (poza ekranem), przy `overflow: visible` na 125 px, czyli dokładnie
   pod menu, tak jak miał.

   Naprawa: owijka dostaje ograniczoną wysokość i przewija się w obie strony
   SAMA, a nagłówek przykleja się do jej górnej krawędzi. Tabela ma wtedy własną
   ramkę, nazwy kolumn zostają na wierzchu przy każdym przewinięciu, a reszta
   strony (nagłówek, menu) zachowuje się jak dotąd. */
.ramka-monitora {
  overflow: auto;
  max-height: calc(100vh - var(--wys-naglowka, 64px) - var(--wys-zakladek, 64px) - 32px);
}
@supports (height: 100dvh) {
  .ramka-monitora {
    max-height: calc(100dvh - var(--wys-naglowka, 64px) - var(--wys-zakladek, 64px) - 32px);
  }
}
.ramka-monitora table.monitor thead th { top: 0; z-index: 3; }
/* Róg tabeli: komórka nagłówka pierwszej kolumny jest przyklejona w OBU osiach,
   więc musi być nad jednym i drugim paskiem. */
.ramka-monitora table.monitor thead th.wskaznik { z-index: 4; }
.ramka-monitora table.monitor tbody td.wskaznik { z-index: 2; }
table.monitor { border-collapse: collapse; width: 100%; font-size: 13px; }
table.monitor th, table.monitor td { padding: 6px 8px; text-align: right; white-space: nowrap; }
table.monitor thead th {
  position: sticky;
  /* Pod nagłówkiem strony I pod paskiem zakładek - inaczej nazwy kolumn
     chowałyby się za menu przy przewijaniu długiej tabeli monitora. */
  top: calc(var(--wys-naglowka, 64px) + var(--wys-zakladek, 64px));
  background: var(--surface-2);
  border-bottom: 2px solid var(--line);
  font-size: 11px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}
table.monitor th.wskaznik, table.monitor td.wskaznik {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface);
  min-width: 17rem;
  border-right: 1px solid var(--line);
}

/* Numer pozycji z wydruku monitora - klient zna wskazniki po tych numerach. */
td.wskaznik .pozycja {
  display: inline-block;
  min-width: 1.6rem;
  margin-right: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  text-align: right;
}
td.wskaznik .nazwa-wskaznika { vertical-align: baseline; }

button.strzalka {
  width: 18px;
  min-height: 18px;
  padding: 0;
  margin-right: 2px;
  border: none;
  background: none;
  color: var(--dim);
  font-size: 11px;
  line-height: 1;
}
button.strzalka:hover { color: var(--accent); }

table.monitor th.trend, table.monitor td.trend {
  width: 110px;
  min-width: 110px;
  text-align: center;
  padding: 2px 8px;
}
table.monitor td.trend svg.iskra { width: 96px; height: 24px; margin: 0 auto; }

/* Ostatni, najswiezszy miesiac wyroznia sie - to on jest przedmiotem rozmowy. */
table.monitor th.ostatni, table.monitor td.ostatni { font-weight: 700; }
table.monitor td.cel { color: var(--dim); }

tr.opis-wiersza td {
  text-align: left;
  white-space: normal;
  background: var(--surface-2);
  padding: 12px 16px 16px;
  border-bottom: 1px solid var(--line);
}
tr.opis-wiersza p { margin: 0 0 8px; max-width: 60rem; font-size: 13px; }
tr.opis-wiersza .kod { font-family: var(--mono); font-size: 11px; color: var(--dim); }
table.monitor thead th.wskaznik { background: var(--surface-2); z-index: 1; }
table.monitor tr.sekcja td {
  background: var(--surface-2);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dim);
  text-align: left;
}
table.monitor tbody tr { cursor: pointer; }
table.monitor tbody tr:hover td { background: var(--accent-soft); }
table.monitor tbody tr:hover td.wskaznik { background: var(--accent-soft); }
table.monitor td.liczba { font-family: var(--mono); }
td.stan-warn { background: var(--warn-soft); }
td.stan-crit { background: var(--bad-soft); }
td.stan-good { background: var(--good-soft); }
.pusto { color: var(--dim); }

/* ---------- szuflada wskaznika ---------- */

.szuflada-tlo {
  position: fixed;
  inset: 0;
  background: rgba(16, 34, 47, .35);
  z-index: 40;
  display: flex;
  justify-content: flex-end;
}
.szuflada {
  width: min(30rem, 100%);
  background: var(--surface);
  height: 100%;
  overflow-y: auto;
  padding: 22px;
  box-shadow: var(--shadow);
}
/* `flex-wrap` z naglowka aplikacji jest tu szkodliwy: przy dluzszej nazwie
   wskaznika krzyzyk zamkniecia spadal pod tytul, na srodek szuflady. */
.szuflada header {
  position: static; box-shadow: none; border: none; padding: 0;
  margin-bottom: 12px; flex-wrap: nowrap; align-items: flex-start;
}
.szuflada header > div:first-child { min-width: 0; }
.szuflada h3 { margin: 0; font-size: 20px; }
.szuflada .kod { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.duza-liczba { font-family: var(--mono); font-size: 38px; font-weight: 600; letter-spacing: -.02em; }
.szuflada .opis { font-size: 14px; color: var(--text); margin: 14px 0 0; }
.btn-zamknij {
  min-width: 44px;
  min-height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.miesiace { list-style: none; margin: 14px 0 0; padding: 0; font-family: var(--mono); font-size: 13px; }
.miesiace li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line); }

/* Ramka wykresu jest układem odniesienia dla dymka. */
.wykres-ramka { position: relative; margin-top: 12px; }
svg.wykres { width: 100%; height: auto; display: block; touch-action: none; }

.dymek {
  position: absolute;
  transform: translate(10px, -50%);
  background: var(--text);
  color: var(--surface);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(16, 34, 47, .25);
  z-index: 2;
}
.dymek.od-prawej { transform: translate(calc(-100% - 10px), -50%); }
.dymek b { display: block; font-family: var(--mono); font-size: 14px; }
.dymek span { opacity: .75; }
svg.iskra { width: 72px; height: 22px; display: block; }

/* ---------- stany puste ---------- */

.puste {
  text-align: center;
  padding: 34px 20px;
  color: var(--dim);
}
.puste strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 6px; }
.puste ul { display: inline-block; text-align: left; margin-top: 10px; }

.plakietka {
  font-size: 12px;
  color: var(--dim);
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 12px;
}

/* ---------- telefon ---------- */

@media (max-width: 768px) {
  :root { --luz-main: 12px; }
  /* Na telefonie nagłówek zawija się na pięć linii i ma 278 px. Przyklejony
     razem z menu zabierał 60% ekranu — zostaje więc na miejscu i odjeżdża
     przy przewijaniu, a przykleja się SAMO menu. To ono jest potrzebne
     w trakcie czytania; wybór fermy i wylogowanie czekają na górze strony. */
  #aplikacja > header { position: static; }
  /* Zakładki w JEDNYM rzędzie, przewijanym w bok. Zawinięte do czterech
     wierszy zajmowały 200 px, czyli tyle co ćwierć ekranu telefonu. */
  .zakladki {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .zakladki::-webkit-scrollbar { display: none; }
  .zakladki button { flex: 0 0 auto; }
  main { padding: var(--luz-main); }
  /* Nagłówek na telefonie zawijał się na CZTERY linie: marka z kodem stada
     i wyborem fermy, pod nią zakres monitora, pod nią kto zalogowany razem
     ze „Zmień hasło”, a na końcu samo „Wyloguj”. Zajmowało to 280 px, czyli
     jedną trzecią ekranu, i wyglądało jak rozsypane klocki.

     Teraz są dwa rzędy: górny z marką i wyborami, dolny z kontem i przyciskami
     dosuniętymi do prawej. Pola są niższe (34 px zamiast 40) i mają mniejszy
     stopień pisma — nadal spełniają minimum dla celu dotykowego, bo cały rząd
     ma 40 px wysokości. */
  header {
    padding: 8px 12px;
    gap: 8px;
    row-gap: 6px;
    align-items: center;
  }
  header .marka h1 { font-size: 15px; letter-spacing: -.01em; }
  .kod-stada { font-size: 10px; padding: 2px 5px; }
  header select, header button.btn-drugi { min-height: 32px; padding: 3px 7px;
    font-size: .76rem; }
  /* Dwa wybory muszą zmieścić się w jednym rzędzie razem z marką, inaczej
     zakres monitora spada do własnej linii i nagłówek rośnie o 40 px. */
  header select { max-width: 7.6rem; flex: 0 1 auto; min-width: 0; }
  #wybor-zakresu { max-width: 5.8rem; }
  /* Rozpychacz łamie rząd w JEDNYM miejscu — przed kontem i przyciskami —
     zamiast puszczać każdy element w osobną linię. */
  .rozpychacz { margin-left: 0; flex-basis: 100%; height: 0; }
  .kto {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.monitor th.wskaznik, table.monitor td.wskaznik { position: static; min-width: 11rem; }
  /* Na waskim ekranie iskra zajmuje miejsce potrzebne liczbom. */
  table.monitor th.trend, table.monitor td.trend { display: none; }
  /* Tabela wskaznik x miesiac jest z natury szeroka - na waskim ekranie zostaja
     trzy ostatnie miesiace, reszta w szufladzie po tapnieciu. */
  table.monitor td.staryMiesiac, table.monitor th.staryMiesiac { display: none; }
  .szuflada { width: 100%; padding: 16px; }
  .kafel .liczba { font-size: 26px; }
}

/* ---------- formularz danych dziennych ---------- */

.formularz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
/* Etykieta „LKS Z MLECZARNI TYS/ML” zawija się na dwie linie, a „DZIEŃ” nie —
   bez tego pole pod dłuższą etykietą spadało 18 px niżej niż sąsiednie. Komórki
   siatki i tak mają jednakową wysokość, więc dosunięcie zawartości do dołu
   ustawia wszystkie pola na jednej linii, niezależnie od długości podpisu. */
.formularz .pole-dnia {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.formularz .pole-dnia label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  font-weight: 600;
  margin-bottom: 4px;
}
/* Pole daty ma własny przycisk kalendarza i przy samym `min-height` wychodziło
   o 2 px wyższe od pól liczbowych. Sztywna wysokość zrównuje wszystkie. */
.formularz input { height: 46px; }
.formularz input, .formularz textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 16px;          /* 16 px, zeby telefon nie przybliżał widoku przy dotknięciu */
}
.formularz input:focus, .formularz textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
}
/* Pole daty na telefonie ma własną, dużą szerokość wewnętrzną, a komórki
   siatki mają domyślnie `min-width: auto` — razem rozpychały kolumnę tak, że
   sąsiednia etykieta wchodziła na pole daty. Oba `min-width: 0` pozwalają
   kolumnie zwęzić się do przydziału z siatki. */
.formularz .pole-dnia { min-width: 0; }
.formularz input, .formularz textarea { min-width: 0; max-width: 100%; }
.formularz input[type="date"] { -webkit-appearance: none; appearance: none; }

.formularz .szeroko { grid-column: 1 / -1; }
.formularz textarea { font-family: var(--font); min-height: 66px; resize: vertical; }
.formularz .jednostka { font-size: 11px; color: var(--dim); font-weight: 400; }

.pasek-formularza { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pasek-formularza .btn-glowny { width: auto; min-width: 12rem; margin: 0; }
/* Pole nazwy agenta: musi pomiescic „Komputer w biurze obory”, inaczej
   podpowiedz urywa sie w polowie i przestaje cokolwiek podpowiadac. */
.pole-nazwy { flex: 1 1 22rem; min-width: 18rem; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.wynik-zapisu { font-size: 14px; }
.wynik-zapisu.ok { color: var(--good); }
.wynik-zapisu.blad { color: var(--bad); }

.uwagi-wpisu {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--warn-soft);
  border-left: 4px solid var(--warn);
  border-radius: 0 6px 6px 0;
  font-size: 14px;
}
.uwagi-wpisu li + li { margin-top: 6px; }

tr.brak-wpisu td { color: var(--dim); font-style: italic; background: var(--surface-2); }
td.ostrzezenie { color: var(--warn); }
button.uzupelnij {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
}
button.uzupelnij:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 768px) {
  .formularz { grid-template-columns: 1fr 1fr; }
  .formularz .szeroko { grid-column: 1 / -1; }
}

/* ---------- panel administratora ---------- */

.podnawigacja { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.podnawigacja button {
  min-height: 40px;
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--dim);
  font-weight: 600;
  font-size: 14px;
}
.podnawigacja button.aktywna { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

table.lista { border-collapse: collapse; width: 100%; font-size: 14px; }
table.lista th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  border-bottom: 2px solid var(--line);
  padding: 8px 10px;
  white-space: nowrap;
}
table.lista td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.lista tr:last-child td { border-bottom: none; }
table.lista td.akcje { text-align: right; white-space: nowrap; }
table.lista td.akcje button {
  min-height: 34px;
  padding: 5px 10px;
  margin-left: 6px;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
}
table.lista td.akcje button:hover { border-color: var(--accent); color: var(--accent); }
table.lista td.akcje button.groznie:hover { border-color: var(--bad); color: var(--bad); }
table.lista .drobne { display: block; font-size: 12px; color: var(--dim); }
tr.nieaktywny td { opacity: .55; }

.plakietki { display: flex; gap: 4px; flex-wrap: wrap; }
.plakietka-rola {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.plakietka-rola.systemowa { background: var(--surface-2); color: var(--dim); }

.karta-formularza {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
}
.karta-formularza h4 { margin: 0 0 12px; font-size: 15px; }

/* Konto platformowe widzi fermy wszystkich klientow naraz. Ramka mowi, czyje sa:
   biale tlo grupy pod szarymi kartami ferm, zeby zagniezdzenie bylo widoczne bez
   drugiej, mocniejszej kreski. */
.grupa-ferm {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px 0;
  margin-bottom: 18px;
}
.grupa-ferm .naglowek-grupy {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.grupa-ferm .naglowek-grupy b { font-size: 15px; }
.grupa-ferm .naglowek-grupy .drobne { display: block; }
.grupa-ferm .karta-formularza { margin-bottom: 14px; }
/* Na telefonie ramka nie moze zjadac szerokosci kartom, ktore sa w srodku. */
@media (max-width: 560px) {
  .grupa-ferm { padding: 12px 8px 0; }
}

.wybor-grupa { margin-bottom: 12px; }
.wybor-grupa > b {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  margin-bottom: 6px;
}
.wybor { display: flex; gap: 8px; flex-wrap: wrap; }
.wybor label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.wybor label:hover { border-color: var(--accent); }
.wybor input { accent-color: var(--accent); width: 16px; height: 16px; }
.wybor label.zaznaczone { background: var(--accent-soft); border-color: var(--accent); }

.sekret {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: 6px;
}
.sekret b { display: block; margin-bottom: 6px; font-size: 13px; }
.sekret code {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-all;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 9px 11px;
  margin-bottom: 8px;
}
.sekret small { color: var(--dim); }

.pasek-prosb {
  padding: 12px 14px;
  background: var(--warn-soft);
  border-left: 4px solid var(--warn);
  border-radius: 0 6px 6px 0;
  margin-bottom: 16px;
  font-size: 14px;
}

/* ---------- pulpit dnia ---------- */

.pasek-dnia { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.pasek-dnia select { min-height: 40px; padding: 6px 10px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; }

/* Wybór doby: krok wstecz, kalendarz, krok naprzód. Przyciski są te same, co
   przy progu wpisów wstecznych — ten sam gest ma wyglądać tak samo w całym
   portalu. Cel dotykowy 40 px, bo na telefonie klika się to kciukiem. */
.wybor-dnia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wybor-dnia .krok { width: 40px; height: 40px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 6px; font-size: 1.25rem; line-height: 1;
  cursor: pointer; color: var(--text); display: inline-flex; align-items: center;
  justify-content: center; }
.wybor-dnia .krok:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.wybor-dnia .krok:disabled { opacity: .35; cursor: default; }
.wybor-dnia .data-dnia { min-height: 40px; padding: 6px 10px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--text);
  font-variant-numeric: tabular-nums; min-width: 0; max-width: 100%;
  appearance: none; -webkit-appearance: none; }
.wybor-dnia .data-dnia:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.wybor-dnia .drobne { font-size: .76rem; color: var(--dim); }

@media (max-width: 560px) {
  /* Na telefonie nagłówek z datą i tak mówi, którą dobę widać, więc podpis
     „N dób z danymi” ustępuje miejsca samym przyciskom. */
  .wybor-dnia .drobne { display: none; }
}

.sesje { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.sesja {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.sesja.razem { background: var(--accent-soft); border-color: var(--accent); }
.sesja h4 { margin: 0 0 2px; font-size: 14px; }
.sesja .godzina { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.sesja .glowna { font-family: var(--mono); font-size: 26px; font-weight: 600; margin: 8px 0 0; }
.sesja .glowna span { font-size: 12px; color: var(--dim); font-weight: 400; margin-left: 3px; }
.sesja dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 10px 0 0;
  font-size: 12px; }
.sesja dt { color: var(--dim); }
.sesja dd { margin: 0; font-family: var(--mono); text-align: right; }

/* Lejek: udzial grupy w stadzie widac od razu, bez czytania liczb. */
.lejek { list-style: none; margin: 0; padding: 0; }
.lejek li { display: grid; grid-template-columns: 9rem 1fr 4.5rem 3rem; gap: 10px;
  align-items: center; padding: 5px 0; }
.lejek .nazwa { font-size: 13px; }
.lejek .slupek { background: var(--surface-2); border-radius: 4px; height: 20px; overflow: hidden; }
.lejek .slupek span { display: block; height: 100%; background: var(--accent); }
.lejek .liczba, .lejek .udzial { font-family: var(--mono); font-size: 13px; text-align: right; }
.lejek .udzial { color: var(--dim); }

.bilans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.bilans .pozycja { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; }
.bilans .pozycja b { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim); margin-bottom: 4px; }
.bilans .pozycja .w { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.bilans .pozycja .w span { font-size: 12px; color: var(--dim); font-weight: 400; }
.bilans .pozycja.brak .w { color: var(--dim); }

details.raport { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px;
  background: var(--surface); }
details.raport > summary { padding: 11px 14px; cursor: pointer; font-weight: 600; font-size: 14px; }
details.raport > summary:hover { color: var(--accent); }
details.raport .opis { padding: 0 14px 10px; margin: 0; font-size: 13px; color: var(--dim); }
details.raport .przewijak { padding: 0 14px 14px; }
details.raport table.lista td { font-family: var(--mono); font-size: 13px; }
details.raport table.lista td:first-child { font-family: var(--font); }
details.raport tr.podsumowanie td { font-weight: 700; border-top: 2px solid var(--line); }

/* ─── kafelki mleka ─── */
/* Kafelek jest przyciskiem tylko wtedy, gdy naprawde ma co pokazac po kliknieciu.
   Udawany przycisk, ktory nic nie robi, jest gorszy niz jego brak. */
.kafelki-mleka { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin: 14px 0; }
.kafelek-mleka { background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  border-left: 4px solid var(--line); }
.kafelek-mleka b { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dim); font-weight: 600; }
.kafelek-mleka .w { display: flex; align-items: baseline; gap: 2px; min-height: 2.2rem; }
.kafelek-mleka .liczba { font-size: 1.7rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.kafelek-mleka .jedn { font-size: .9rem; color: var(--dim); }
.kafelek-mleka .pusto { font-size: .95rem; color: var(--dim); font-style: italic; }
.kafelek-mleka .srednia { font-size: .8rem; color: var(--dim);
  font-variant-numeric: tabular-nums; min-height: 1rem; }
.kafelek-mleka .ostrzezenie-skladu { display: block; margin-top: 2px; font-size: .75rem;
  color: var(--warn); line-height: 1.3; }
.kafelek-mleka.hala { border-left-color: #0e6b74; }
.kafelek-mleka.sprzedaz { border-left-color: #2c7a4b; }
.kafelek-mleka.pieniadze { border-left-color: #9a6608; }
.kafelek-mleka.ciel { border-left-color: #5c7183; }
.kafelek-mleka.brak { background: #fafbfc; }
.kafelek-mleka.klikalny { cursor: pointer; transition: box-shadow .12s, transform .12s; }
.kafelek-mleka.klikalny:hover { box-shadow: 0 2px 10px rgba(16, 34, 47, .10); }
.kafelek-mleka.klikalny:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kafelek-mleka.wybrany { box-shadow: 0 0 0 2px var(--accent) inset; }

.szuflada-mleka { background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.pasek-szuflady { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; }
.pasek-szuflady h4 { margin: 0; }
.pasek-szuflady .zakres { border: 1px solid var(--line); background: transparent;
  border-radius: 999px; padding: 4px 12px; font-size: .82rem; cursor: pointer; }
.pasek-szuflady .zakres.wybrany { background: var(--accent); border-color: var(--accent);
  color: #fff; }
.podsumowanie-szuflady { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.pozycja-podsumowania b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* ─── podsumowanie monitora ─── */
.karta-analizy { background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 10px; padding: 16px 18px;
  margin: 4px 0 18px; }
.karta-analizy h3 { margin: 0 0 2px; }
.analiza-md { margin-top: 14px; max-width: 62rem; }
.analiza-md h4 { margin: 18px 0 6px; font-size: .95rem; color: var(--accent);
  letter-spacing: .02em; }
.analiza-md h4:first-child { margin-top: 4px; }
.analiza-md h5 { margin: 12px 0 4px; font-size: .88rem; }
.analiza-md p { margin: 0 0 8px; line-height: 1.55; }
.analiza-md ul { margin: 0 0 10px; padding-left: 20px; }
.analiza-md li { margin-bottom: 6px; line-height: 1.55; }

/* ─── skład stada ─── */
/* Zostal z tego jeden uzytkownik: pasek „wg liczby wycieleń” (`.wycielenia`
   nizej). Plaski pasek statusow, dla ktorego te reguly powstaly, zastapily
   paski populacji — wysokosc i margines nadpisuje `.wycielenia`, wiec tu
   zostaje tylko to, co obie wersje mialy wspolne. */
.pasek-stada { display: flex; height: 34px; border-radius: 8px; overflow: hidden;
  margin: 14px 0 4px; background: var(--bg); }
.pasek-stada span { display: block; height: 100%; transition: filter .12s; }
.pasek-stada span:hover { filter: brightness(1.15); }

.tabela-stada { width: 100%; border-collapse: collapse; margin-top: 10px; }
.tabela-stada td { padding: 7px 8px; border-bottom: 1px solid var(--line);
  vertical-align: middle; }
.tabela-stada tfoot td { border-bottom: none; border-top: 2px solid var(--line);
  font-weight: 650; padding-top: 10px; }
.tabela-stada .kropka { width: 18px; padding-right: 0; }
/* Komorka nazwy urosla o „w tym…” i pasek udzialu, wiec kropka wysrodkowana
   w pionie odjezdzala od nazwy, ktora opisuje. */
.tabela-stada.krzyzowa .kropka { vertical-align: top; padding-top: 12px; }
.tabela-stada.krzyzowa .nazwa-grupy { vertical-align: top; }
.tabela-stada.krzyzowa td.lg, .tabela-stada.krzyzowa td.sztuk { vertical-align: top;
  padding-top: 10px; }
.tabela-stada .kropka span { display: block; width: 10px; height: 10px;
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(16, 34, 47, .45); }
.tabela-stada .nazwa-grupy b { display: inline; }
.tabela-stada .nazwa-grupy .kod { font-family: var(--mono, ui-monospace, monospace);
  font-size: .72rem; color: var(--dim); margin-left: 8px; }
.tabela-stada .nazwa-grupy .drobne { display: block; }
.tabela-stada .sztuk { text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 650; width: 5.5rem; }
.tabela-stada .udzial-grupy { text-align: right; font-variant-numeric: tabular-nums;
  color: var(--dim); width: 4.5rem; }
.tabela-stada .mini { width: 34%; }
.mini-slupek { background: var(--bg); border-radius: 4px; height: 8px; overflow: hidden; }
.mini-slupek span { display: block; height: 100%; border-radius: 4px; }

/* ─── rozbicie na liczbę wycieleń (LGRP) ─── */

.podpis-paska { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 3px;
  font-size: .72rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.podpis-paska .prawa { margin-left: auto; }
.pasek-stada.wycielenia { height: 20px; margin: 0 0 4px; }

/* ─── pasek rozrodczy: rodziny statusów, jałówki i krowy osobno ─── */
/* Dwa poziomy podziału muszą różnić się SPOSOBEM, nie tylko kolorem: rodziny
   rozdziela sam przeskok barwy, podstany wewnątrz rodziny — biała kreska.
   Dlatego blok jest kontenerem flex, a nie tłem: kawałki w środku dzielą jego
   szerokość i mogą mieć własną granicę. */
.pasek-populacji { display: flex; height: 30px; border-radius: 8px; overflow: hidden;
  background: var(--bg); margin: 3px 0 0; }
/* `overflow: hidden` na BLOKU, nie tylko na pasku. Etykieta procentu jest
   pozycjonowana absolutnie w `inset: 0`, wiec przy waskim bloku „63,2%”
   wylewalo sie na sasiadow — pasek ma wtedy dwa napisy jeden na drugim. */
.blok-stanu { position: relative; display: flex; min-width: 0; height: 100%;
  overflow: hidden; transition: filter .12s; }
.blok-stanu:hover { filter: brightness(1.08); }
.blok-stanu i { display: block; align-self: stretch; min-width: 0; }
/* Procent leży NAD kawałkami, na środku całego bloku — gdyby siedział w jednym
   z nich, przy bloku złożonym z dwóch odcieni czytałoby się go jako udział
   samego tego odcienia. Kolor napisu ustawia JS, bo zależy od tła pod nim. */
.blok-stanu u { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-decoration: none; font-size: .72rem; font-weight: 650;
  font-variant-numeric: tabular-nums; pointer-events: none; }
.podpis-paska .nazwa-populacji { color: var(--text); font-size: .82rem; }
.podpisy-blokow { display: flex; margin: 4px 0 0; font-size: .72rem; color: var(--dim);
  font-variant-numeric: tabular-nums; }
/* Wielokropek, nie ciche uciecie. Podpis zaczyna sie od nazwy rodziny, wiec
   przyciety pokazuje „Cielne 155 · w tym…” — a bez wielokropka moglby pokazac
   „Cielne 15”, czyli inna liczbe podana jako fakt. */
.podpisy-blokow span { min-width: 0; padding: 0 3px; text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Procent w bloku to same cyfry — nie da się go przyciąć uczciwie. „8,6%”
   obcięte do „,6%” czyta się jak inna liczba, a wielokropek w 25-pikselowym
   bloku nie zmieści się tym bardziej. Więc albo cały, albo wcale — a o to,
   który to przypadek, pyta sam blok, bo procent nie wie, ile ma pikseli (8,6%
   to 81 px na monitorze i 25 px na telefonie). Gdy przeglądarka nie zna
   `@container`, zostaje stare przycinanie, czyli dokładnie to, co było. */
.blok-stanu { container-type: inline-size; }
@container (max-width: 40px) { .blok-stanu u { display: none; } }
.stopka-populacji { margin: 5px 0 0; font-size: .74rem; color: var(--dim); }
.legenda-stanow { margin-top: 10px; }
.rodziny-stanow { margin: 6px 0 0; font-size: .74rem; color: var(--dim); line-height: 1.5; }

/* Na telefonie blok o szerokości 9% ma 35 px, więc podpis ustawiony na tę samą
   szerokość co blok zostałby przycięty do jednej cyfry. Nie chowamy go jednak
   całkiem — to JEDYNE miejsce, gdzie pada nazwa rodziny i rozbicie „w tym
   zasuszone 43”; legenda niżej podaje statusy dla całej ewidencji, nie dla tej
   populacji. Zamiast tego podpisy przestają być kolumnami i układają się
   w zawijaną listę. `!important` bije szerokość, którą JS ustawia inline. */
@media (max-width: 700px) {
  .podpisy-blokow { flex-wrap: wrap; gap: 2px 12px; }
  /* Bez `container-type`: tutaj szerokość bierze się z treści, więc zapytanie
     o szerokość kontenera schowałoby napisy, które właśnie mają być widoczne. */
  .podpisy-blokow > span { width: auto !important;
    overflow: visible; white-space: normal; padding: 0; }
  .podpisy-blokow > span:empty { display: none; }
  .pasek-populacji { height: 26px; }
}

.legenda-wycielen { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px;
  margin: 6px 0 2px; font-size: .76rem; color: var(--dim); }
.chip-lgrp { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
/* Pierscien, nie ozdoba. Kropka 10x10 px jest jedynym lacznikiem miedzy nazwa
   a kolorem na pasku, czyli elementem graficznym niosacym znaczenie — a
   najjasniejsze odcienie (Do krycia 1,84:1, Zasuszone 2,29:1) nie maja na
   bieli wymaganych 3:1. Wyrazny obrys daje im granice niezaleznie od barwy. */
.chip-lgrp i { align-self: center; flex: 0 0 auto; width: 10px; height: 10px;
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(16, 34, 47, .45); }
.chip-lgrp b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

.definicja-krowy { margin: 12px 0 0; }

.tabela-stada.krzyzowa thead th { padding: 4px 8px; font-size: .72rem; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dim); text-align: right; }
.tabela-stada.krzyzowa thead tr.nad th { padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.tabela-stada.krzyzowa thead th.grupa { text-align: left; }
.tabela-stada.krzyzowa td.lg, .tabela-stada.krzyzowa th.lg {
  text-align: right; font-variant-numeric: tabular-nums; width: 3.1rem; }
/* Cezura: ta sama kreska, ktora oddziela kolumne „Razem”. Trzy elementy mowia
   to samo - podpis nad kolumnami, kreska miedzy nimi i kolor w dolnym pasku. */
.tabela-stada.krzyzowa td.po-cezurze, .tabela-stada.krzyzowa th.po-cezurze {
  box-shadow: inset 1px 0 0 var(--line); }
.tabela-stada.krzyzowa td.zero { color: var(--dim); }
/* Kolumna „Krowy razem”: margines grupy „Krowy”, a nie kolejny kubelek. Wlasna
   kreska po lewej domyka rubryki z liczba wycielen, zeby suma nie czytala sie
   jak dalszy kubelek. */
.tabela-stada.krzyzowa td.krowy-suma, .tabela-stada.krzyzowa th.krowy-suma {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 650;
  width: 3.7rem; box-shadow: inset 1px 0 0 var(--line); }
.tabela-stada.krzyzowa td.krowy-suma { vertical-align: top; padding-top: 10px; }
.tabela-stada.krzyzowa td.lg, .tabela-stada.krzyzowa td.sztuk { vertical-align: top; }
.tabela-stada .w-tym { display: block; font-size: .74rem; color: var(--accent); margin-top: 2px; }
/* Udział pod liczbą — w młodzieży, w krowach i w całym inwentarzu. Trzy
   procenty w jednym wierszu mają dać się porównać wzrokiem, więc stoją tak samo
   wyrównane, tą samą wielkością i przygaszone, żeby nie konkurowały z liczbą
   sztuk, która jest tu wartością główną. */
.tabela-stada .proc { display: block; font-size: .68rem; color: var(--dim);
  font-variant-numeric: tabular-nums; line-height: 1.3; margin-top: 1px; }
.tabela-stada td.zero .proc { display: none; }

.tabela-stada .pod-nazwa { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.tabela-stada .pod-nazwa .mini-slupek { flex: 1 1 auto; min-width: 40px; }
.tabela-stada .pod-nazwa .udzial-grupy { width: auto; font-size: .78rem; }
.plakietka-rozjazd { display: block; margin-top: 8px; font-size: .76rem; color: var(--warn); }

/* Piec rubryk liczbowych nie miesci sie na telefonie, wiec jedna grupa musi
   zejsc. Schodzi rozbicie na poszczegolne wycielenia - najdrobniejszy szczegol
   z calej tabeli - a zostaje to, po co sie tu zaglada: mlodziez, suma krow
   i razem. Przelacza to wylacznie CSS: zadnego nasluchu resize, zadnej
   przebudowy tabeli przy obrocie ekranu. */
@media (max-width: 560px) {
  .tabela-stada.krzyzowa .detal { display: none; }
  /* Z dolnego wiersza naglowkow zostawaloby na telefonie samotne „0” nad kolumna
     mlodziezy - liczba bez zdania, ktore ja tlumaczy. Caly wiersz schodzi:
     nazwy rubryk niesie wiersz gorny, a kolumne nazw grup rozpoznac po tresci. */
  .tabela-stada.krzyzowa thead tr:not(.nad) { display: none; }
  .tabela-stada.krzyzowa thead tr.nad th { padding-bottom: 6px; }
  .tabela-stada.krzyzowa td, .tabela-stada.krzyzowa thead th { padding: 6px 3px; }
  .tabela-stada.krzyzowa td.lg, .tabela-stada.krzyzowa th.lg { width: 2.3rem; }
  /* Kolumna „Razem” ma na pulpicie 5,5 rem - na telefonie to 88 px oddane
     liczbie trzycyfrowej i to ona wypychala tabele poza ekran. */
  .tabela-stada.krzyzowa td.sztuk, .tabela-stada.krzyzowa th.sztuk { width: 3.2rem; }
  .tabela-stada.krzyzowa .kropka { width: 12px; }
  /* Kod DC305 i opis grupy schodza z ekranu: nazwa polska wystarczy, zeby
     rozpoznac wiersz, a te dwa dodatki kosztuja szerokosc, ktorej nie ma. */
  .tabela-stada.krzyzowa .nazwa-grupy .drobne,
  .tabela-stada.krzyzowa .nazwa-grupy .kod { display: none; }
}

/* ─── macierz zdarzeń ─── */
.analiza-zdarzen { margin-bottom: 22px; }
.przewijana { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); margin-top: 14px; }
.macierz-zdarzen { border-collapse: collapse; font-size: .82rem; min-width: 100%; }
.macierz-zdarzen th, .macierz-zdarzen td { padding: 5px 7px; white-space: nowrap; }
.macierz-zdarzen thead th { position: sticky; top: 0; z-index: 2; background: var(--surface);
  border-bottom: 2px solid var(--line); font-weight: 600; font-size: .72rem;
  color: var(--dim); }
.macierz-zdarzen th.dzien span { display: block; text-align: center; }
/* Pierwsza kolumna zostaje na ekranie przy przewijaniu w bok — bez niej przy
   trzydziestu kolumnach nie wiadomo, który to wiersz.
   Warstwy MUSZĄ być jawne: bez `z-index` komórki z liczbami rysują się PO
   przyklejonej kolumnie i przechodzą przez nazwy zdarzeń. Kolejność:
   nagłówek narożny (4) > nagłówek dni (2) = kolumna nazw (2) > komórki (0). */
.macierz-zdarzen .lewa { position: sticky; left: 0; z-index: 2; background: var(--surface);
  text-align: left; min-width: 15rem; box-shadow: 1px 0 0 var(--line); }
.macierz-zdarzen thead th.lewa { z-index: 4; }
.macierz-zdarzen .lewa .kod { display: block; font-family: ui-monospace, monospace;
  font-size: .68rem; color: var(--dim); }
.macierz-zdarzen .komorka { text-align: center; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--bg); min-width: 2.6rem; }
.macierz-zdarzen .komorka.pusta { color: #c8d2da; }
/* Tło MUSI być nieprzezroczyste: to jedyne, co dzieli przyklejoną kolumnę od
   liczb przewijających się pod nią. */
.macierz-zdarzen .suma { text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 650; background: var(--bg); box-shadow: -1px 0 0 var(--line); }
.macierz-zdarzen .suma.srednia { box-shadow: none; }
/* Wiersz grupy obejmuje całą szerokość, więc `sticky` na komórce przesuwałby
   go razem z przewijaniem i zakrywał sąsiednie kolumny. Przykleja się sam
   napis, nie komórka. */
.macierz-zdarzen tr.grupa-zdarzen td { background: var(--bg); font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  font-weight: 650; padding: 8px; }
.macierz-zdarzen tr.grupa-zdarzen span { position: sticky; left: 8px; }
.macierz-zdarzen tfoot td { border-top: 1px solid var(--line); background: #fbf9f4; }
.macierz-zdarzen tfoot td.lewa { background: #fbf9f4; }
/* Kolumny sum też zostają widoczne — przy 90 dobach są najdalej od ekranu,
   a to one odpowiadają na pytanie „ile tego w ogóle było”. */
.macierz-zdarzen .suma { position: sticky; z-index: 2; }
.macierz-zdarzen .suma.razem { right: var(--szer-sredniej, 4.5rem); }
.macierz-zdarzen .suma.srednia { right: 0; }
.macierz-zdarzen tfoot tr.praca td.komorka { background: rgba(154, 102, 8, .14);
  font-weight: 600; }
.macierz-zdarzen tfoot tr.godziny td.komorka { white-space: pre-line; font-size: .68rem;
  line-height: 1.25; }

.karta-wstecznych { background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--bad); border-radius: 10px; padding: 16px 18px; margin-top: 16px; }
.karta-wstecznych h4 { margin: 0 0 2px; }
.karta-wstecznych .wstecz { color: var(--bad); font-variant-numeric: tabular-nums; }

/* ─── rozwijana lista wpisów wstecznych ─── */
.rozwijak { display: flex; align-items: flex-start; gap: 12px; width: 100%;
  background: transparent; border: none; padding: 0; cursor: pointer; text-align: left; }
.rozwijak .znak { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 1rem; line-height: 1; color: var(--dim); flex: none; margin-top: 1px; }
.rozwijak:hover .znak { border-color: var(--accent); color: var(--accent); }
.rozwijak .tytul-rozwijaka b { display: block; }
.wnetrze-rozwijaka { margin-top: 12px; }
.wnetrze-rozwijaka .pasek-szuflady { margin-bottom: 10px; }

/* ─── krokowy wybór progu ─── */
.krokowy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.krokowy .krok { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 6px; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; }
.krokowy .krok:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.krokowy .krok:disabled { opacity: .35; cursor: default; }
.krokowy .wartosc-progu { min-width: 4.5rem; text-align: center;
  font-variant-numeric: tabular-nums; }

/* ─── rolka dobowa ─── */

/* Karta ma akcentowa krawedz, a nie czerwona jak wpisy wsteczne nad nia: rolka
   nie zglasza problemu, tylko pokazuje rytm doby. */
.karta-rolki { background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 10px; padding: 16px 18px;
  margin-top: 16px; }
.karta-rolki .tytul-rolki b { display: block; }
.karta-rolki .wyjasnienie { margin-bottom: 10px; }
.karta-rolki .plakietka { margin-top: 14px; }

/* Trzy kolumny powtarzaja sie w osi godzin i w kazdym wierszu doby - dzieki temu
   podpis „12” stoi dokladnie nad kreska poludnia w kazdym pasku ponizej. */
.rolka-os, .rolka-wiersz { display: grid; grid-template-columns: 4.4rem 1fr 6.6rem;
  align-items: center; gap: 10px; }
.rolka-os { padding: 0 0 2px; }
.rolka-os-pas { position: relative; height: 14px; }
.rolka-os .rolka-podsumowanie { font-size: .68rem; color: var(--dim);
  letter-spacing: .06em; text-transform: uppercase; }
.rolka-godzina { position: absolute; top: 0; transform: translateX(-50%);
  font-size: .68rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.rolka-godzina.skraj-lewy { transform: none; }
.rolka-godzina.skraj-prawy { transform: translateX(-100%); }

.rolka-dni { border-top: 1px solid var(--line); }
.rolka-wiersz { width: 100%; min-height: 42px; background: transparent; border: none;
  border-bottom: 1px solid var(--line); padding: 4px 0; cursor: pointer;
  text-align: left; color: var(--text); font: inherit; }
.rolka-wiersz.weekend { background: var(--surface-2); }
.rolka-wiersz.weekend .rolka-etykieta b { color: var(--dim); }
.rolka-wiersz:hover:not(:disabled) { background: var(--accent-soft); }
.rolka-wiersz.otwarty { background: var(--accent-soft); }
/* Doba bez wpisów to NAJWAŻNIEJSZY stan na tej rolce - po to ona jest.
   Przygaszamy więc sam pasek, a nie datę: przy kilku dobach ciszy pod rząd
   trzeba móc odczytać, od której zaczął się przestój. */
.rolka-wiersz:disabled { cursor: default; }
.rolka-wiersz:disabled .rolka-pasek { opacity: .45; }
.rolka-wiersz:disabled .rolka-podsumowanie { color: var(--dim); }
.rolka-wiersz .rolka-etykieta b { display: block; font-size: .82rem;
  font-variant-numeric: tabular-nums; }
.rolka-wiersz .rolka-etykieta .drobne { display: block; font-size: .68rem; color: var(--dim); }
.rolka-podsumowanie { text-align: right; }
.rolka-podsumowanie b { display: block; font-size: .78rem;
  font-variant-numeric: tabular-nums; }
.rolka-podsumowanie b.pusto { color: var(--dim); font-weight: 400; }
.rolka-podsumowanie .drobne { display: block; font-size: .68rem; color: var(--dim); }

/* Pasek rozciaga sie w poziomie (1440 jednostek = 1440 minut doby), ale kreski
   maja stala grubosc w pikselach - inaczej na telefonie znacznik zwezalby sie
   do niewidocznosci razem z cala osia. */
.rolka-pasek { display: block; width: 100%; height: 26px; }
.rolka-pasek line { vector-effect: non-scaling-stroke; }
.rolka-siatka { stroke: var(--line); stroke-width: 1; }
.rolka-dno { stroke: var(--line); stroke-width: 1; }
.rolka-slup { stroke-width: 3; stroke-linecap: round; }
.rolka-wsteczny { stroke: var(--wsteczny); stroke-width: 3; }
.rolka-slup.g-rozrod { stroke: var(--grupa-rozrod); }
.rolka-slup.g-ruch { stroke: var(--grupa-ruch); }
.rolka-slup.g-zdrowie { stroke: var(--grupa-zdrowie); }
.rolka-slup.g-pozostale { stroke: var(--grupa-pozostale); }

.rolka-szczegol { padding: 10px 0 12px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); }
.rolka-linia { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 3px 10px; }
.rolka-linia .godz { min-width: 3.2rem; font-variant-numeric: tabular-nums;
  font-size: .8rem; }
.rolka-linia .co { display: flex; gap: 6px; flex-wrap: wrap; }
.rolka-linia .zdarzenie { display: inline-flex; align-items: center; gap: 5px;
  font-size: .76rem; padding: 1px 8px 1px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); }
.rolka-linia .zdarzenie::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--grupa-pozostale); }
.rolka-linia .zdarzenie.g-rozrod::before { background: var(--grupa-rozrod); }
.rolka-linia .zdarzenie.g-ruch::before { background: var(--grupa-ruch); }
.rolka-linia .zdarzenie.g-zdrowie::before { background: var(--grupa-zdrowie); }
.rolka-linia .zdarzenie .ile { font-variant-numeric: tabular-nums; color: var(--dim); }
.rolka-linia .wstecz { font-size: .72rem; color: var(--wsteczny-tekst); }
.rolka-linia.ma-wsteczne .godz { color: var(--wsteczny-tekst); }

.rolka-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  font-size: .74rem; color: var(--dim); }
.rolka-legenda .poz { display: inline-flex; align-items: center; gap: 6px; }
.rolka-legenda .kropka { width: 10px; height: 3px; border-radius: 2px;
  background: var(--grupa-pozostale); }
.rolka-legenda .kropka.g-rozrod { background: var(--grupa-rozrod); }
.rolka-legenda .kropka.g-ruch { background: var(--grupa-ruch); }
.rolka-legenda .kropka.g-zdrowie { background: var(--grupa-zdrowie); }
.rolka-legenda .kropka.wsteczna { background: var(--wsteczny); }

/* ─── kafelki z przebiegiem ─── */
.naglowek-sekcji { margin: 22px 0 8px; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); font-weight: 650; }
.siatka-kafelkow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; }
.kafelek-serii { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--line); border-radius: 10px; padding: 14px 16px 10px;
  display: flex; flex-direction: column; gap: 3px; }
.kafelek-serii.ma-szczegoly { cursor: pointer; }
.kafelek-serii.ma-szczegoly:hover, .kafelek-serii:focus-visible { border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(16, 34, 47, .10); outline: none; }
.kafelek-serii .etykieta { font-size: .78rem; color: var(--dim); font-weight: 600; }
.kafelek-serii .w { display: flex; align-items: baseline; gap: 2px; }
.kafelek-serii .liczba { font-size: 1.7rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.kafelek-serii .jedn { font-size: .85rem; color: var(--dim); }
.kafelek-serii.dobrze { border-left-color: var(--good); }
.kafelek-serii.uwaga { border-left-color: var(--warn); }
.kafelek-serii.zle { border-left-color: var(--bad); }
.kafelek-serii.neutral { border-left-color: var(--accent); }
.iskra-kafelka { width: 100%; height: 26px; margin-top: 4px; }
.iskra-linia { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.iskra-linia.dobrze { stroke: var(--good); }
.iskra-linia.uwaga { stroke: var(--warn); }
.iskra-linia.zle { stroke: var(--bad); }
.kafelek-serii .zajawka { position: absolute; right: 14px; bottom: 10px; font-size: .7rem;
  color: var(--dim); }

/* ─── pływające okno szczegółów ─── */
.okno-serii { position: fixed; z-index: 60; width: min(390px, calc(100vw - 16px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 8px 30px rgba(16, 34, 47, .18);
  display: flex; flex-direction: column; gap: 3px; }
.slupki-okna { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin: 14px 0 0; }
.slupek-dnia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  height: 100%; }
.slupek-dnia .pion { flex: 1; width: 100%; display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--line); }
.slupek-dnia .pion span { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0;
  min-height: 1px; }
/* Weekend przygaszony: mniejsza liczba wpisów w sobotę nie jest spadkiem jakości. */
.slupek-dnia.weekend .pion span { background: var(--accent-soft); }
.slupek-dnia .dzien { font-size: .62rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.staty-okna { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.staty-okna b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.staty-okna .drobne { text-transform: uppercase; font-size: .62rem; letter-spacing: .05em; }
.stopka-okna { margin-top: 10px; line-height: 1.4; }

/* ─── cennik ─── */
.cennik { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.cennik th { text-align: left; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dim); font-weight: 600; padding: 6px 8px; border-bottom: 2px solid var(--line); }
.cennik td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cennik .poz b { display: block; }
.cennik .poz .jedn-cennika { font-size: .72rem; color: var(--dim); }
.cennik .poz .drobne { display: block; color: var(--warn); }
.cennik .stawka { text-align: right; width: 8rem; font-variant-numeric: tabular-nums;
  font-size: 1.05rem; }
.cennik .stawka .pusto { font-style: italic; color: var(--dim); font-size: .9rem; }
.cennik .od { width: 9rem; font-variant-numeric: tabular-nums; color: var(--dim); }
.cennik .akcje { width: 14rem; text-align: right; white-space: nowrap; }
.cennik tr.bez-ceny { background: var(--warn-soft); }
.cennik tr.edycja-ceny > td, .cennik tr.historia-ceny > td { background: var(--surface-2);
  border-bottom: 2px solid var(--line); }
.cennik tr.historia-ceny .lista tr.biezaca { font-weight: 650; }
.cennik tr.stawka-domyslna { background: var(--surface-2); }
.cennik .znacznik-domyslna { display: block; font-size: .66rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--warn); font-weight: 600; }

/* ─── nasienie wg buhaja ─── */

/* Skuteczność i koszt cielaka to INFORMACJA, nie ostrzeżenie. Bez własnej
   reguły ta linia brała kolor z wiersza „stawka ogólna” i czytała się jak alarm
   przy każdym buhaju, który jeszcze nie ma wpisanej ceny — czyli na starcie
   przy wszystkich. */
.cennik .poz .info-buhaja { display: block; font-size: .72rem; color: var(--dim);
  line-height: 1.35; }
.sekcja-buhajow .kafelki-mleka { margin-top: 4px; }

/* Stara stawka i pole na nową obok siebie w jednej komórce — po to, żeby
   wpisanie ceny nie wymagało otwierania niczego. Dotyczy obu tabel cennika:
   pozycji katalogowych i buhajów. Pole jest wąskie, bo mieści kwotę, nie zdanie. */
.cennik td.komorka-ceny { white-space: nowrap; }
.cennik .stara-cena { display: inline-block; vertical-align: middle;
  min-width: 5.4rem; text-align: right; }
.cennik .szybka-cena { display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; vertical-align: middle; }
.cennik input.szybka-stawka { width: 5.2rem; padding: 5px 8px; text-align: right;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  font: inherit; font-size: .84rem; color: var(--text);
  font-variant-numeric: tabular-nums; min-height: 34px; }
.cennik input.szybka-stawka:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.cennik input.szybka-stawka:disabled { opacity: .5; }
.cennik .szybka-cena .wynik-zapisu { font-size: .72rem; }

@media (max-width: 560px) {
  /* Na telefonie stara cena i pole idą jedno pod drugim — obok siebie nie
     zmieściłyby się bez ścinania przycisku zapisu ceny. */
  .cennik td.komorka-ceny { white-space: normal; }
  .cennik .szybka-cena { margin-left: 0; margin-top: 4px; }
  .cennik .stara-cena { min-width: 0; text-align: left; }
}
.sekcja-buhajow .drobne-okres { margin: 10px 0 0; font-size: .78rem;
  color: var(--dim); }
.karta-buhajow-historia { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line); }

/* Na telefonie data obowiązywania i koszt zjadały miejsce potrzebne przyciskowi
   ceny — a po to ta tabela jest. Obie liczby zostają w tabeli na szerokim
   ekranie i obie są dalej w kaflach nad nią. */
@media (max-width: 560px) {
  .sekcja-buhajow .cennik .detal { display: none; }
}

/* ─── analiza finansowa ─── */
.finanse-tabela { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.finanse-tabela td { padding: 10px 8px; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.finanse-tabela .poz b { display: block; }
.finanse-tabela .poz .drobne { display: block; margin-top: 2px; }
.finanse-tabela .poz .brak { color: var(--warn); }
.finanse-tabela .zrodlo { width: 17rem; }
.finanse-tabela .kwota { text-align: right; width: 9rem; font-variant-numeric: tabular-nums;
  font-size: 1.05rem; }
.finanse-tabela .kwota .pusto { font-size: .85rem; font-style: italic; color: var(--dim); }
.finanse-tabela tr.niepoliczona { background: var(--surface-2); }
/* Informacja o stawce domyślnej musi zaczynać się od nowej linii — wklejona
   obok plakietki źródła zlewała się z nią w jedno zdanie bez sensu. */
.finanse-tabela .domyslna { color: var(--warn); display: block; margin-top: 4px; }
/* Plakietka źródła — kolor mówi, jak twarda jest liczba: wpis obsługi i log są
   pomiarem, monitor to średnia miesięczna rozciągnięta na okres. */
.plakietka-zrodla { display: inline-block; font-size: .7rem; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.plakietka-zrodla.wpis, .plakietka-zrodla.hala { background: var(--good-soft);
  border-color: var(--good); color: var(--good); }
.plakietka-zrodla.log, .plakietka-zrodla.stado { background: var(--accent-soft);
  border-color: var(--accent); color: var(--accent); }
.plakietka-zrodla.monitor { background: var(--warn-soft); border-color: var(--warn);
  color: var(--warn); }

/* Sesja bez raportu: widoczna, ale wyraźnie odróżniona — zero z brakującego
   doju nie może wyglądać jak zmierzone zero. */
.sesja.bez-danych { background: var(--surface-2); border-style: dashed;
  color: var(--dim); cursor: default; }
.sesja.bez-danych .glowna { color: var(--dim); }
.sesja.bez-danych .godzina { color: var(--warn); font-style: italic; }

/* ─── pulpit: mleko obok składu stada ─── */
.dwie-kolumny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px; align-items: start; }
.dwie-kolumny.jedna { grid-template-columns: 1fr; }
.dwie-kolumny .kolumna { min-width: 0; }
.dwie-kolumny .kolumna > h3:first-child { margin-top: 0; }
/* W połowie szerokości cztery kafelki układają się 2×2 — poniżej tej granicy
   ściskałyby się do nieczytelnej szpalty, więc kolumny się rozdzielają. */
@media (max-width: 1100px) {
  .dwie-kolumny { grid-template-columns: 1fr; }
}
.dwie-kolumny .kafelki-mleka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .dwie-kolumny .kafelki-mleka { grid-template-columns: 1fr; }
}

/* ─── macierz zdarzeń na wąskim ekranie ─── */
/* Na telefonie przyklejone kolumny zjadały cały ekran: etykieta z lewej plus
   „Razem” i „Śr./d” z prawej zostawiały na doby kilkadziesiąt pikseli i danych
   po prostu nie było widać. Poniżej tej szerokości nic się nie przykleja —
   tabela przewija się w bok normalnie, a sumy są na jej końcu. */
@media (max-width: 760px) {
  .macierz-zdarzen .lewa { position: static; min-width: 9.5rem; box-shadow: none; }
  .macierz-zdarzen .suma { position: static; }
  .macierz-zdarzen thead th { position: static; }
  .macierz-zdarzen { font-size: .78rem; }
  .macierz-zdarzen th, .macierz-zdarzen td { padding: 4px 5px; }
  .macierz-zdarzen .komorka { min-width: 2.1rem; }
  .przewijana { -webkit-overflow-scrolling: touch; }
}

/* Kafle monitora w kolumnie pulpitu: dwa w rzędzie zamiast sześciu w pasku. */
.dwie-kolumny .kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4px; }
@media (max-width: 560px) {
  .dwie-kolumny .kafle { grid-template-columns: 1fr; }
}

/* ── analiza AI: wyroznienie przyznanej funkcji ──────────────────────────── */

/* Baner ma sie roznic od reszty portalu na pierwszy rzut oka - to jedyne
   miejsce, gdzie klient widzi, ze dostal cos ponad standard. Stad ramka
   w kolorze akcentu i emblemat, a nie kolejna szara karta. */
.baner-ai {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 0 0 18px; padding: 16px 18px;
  border: 1px solid var(--accent); border-left: 5px solid var(--accent);
  border-radius: 10px; background: var(--accent-soft);
}
.baner-ai-znak {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 14px; letter-spacing: .5px;
}
.baner-ai-etykieta {
  display: block; margin-bottom: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}
.baner-ai b { display: block; font-size: 16px; margin-bottom: 6px; }
.baner-ai p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--dim); }

.znacznik-ai {
  display: inline-block; margin-top: 3px; padding: 1px 7px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}

.analiza-md hr {
  border: 0; border-top: 1px solid var(--line); margin: 18px 0 12px;
}
.analiza-md i { color: var(--dim); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 560px) {
  .baner-ai { flex-direction: column; gap: 10px; }
}

/* Etykieta dokladnie taka, jak na wydruku monitora tej fermy. Stoi pod nazwa
   slownikowa, bo to po niej hodowca rozpoznaje swoj wiersz. */
.etykieta-zrodlowa {
  margin: 2px 0 0; font-family: var(--mono); font-size: 12px; color: var(--accent);
}
tr.opis-wiersza .etykieta-zrodlowa { margin: 0 0 8px; }

/* ─── szerokie tabele na telefonie ────────────────────────────────────────
   Tabela z ośmioma kolumnami nie zmieści się w 390 px i nie ma sensu jej do
   tego zmuszać — ma przewijać się W SOBIE, tak jak monitor w `.przewijak`,
   a nie wypychać całej strony w bok. Trzy tabele nie miały tego opakowania
   i to one rozjeżdżały pulpit, cennik i administrację na telefonie.

   `display: block` robi z tabeli blok, który da się przewijać; thead i tbody
   trafiają wtedy do wspólnego anonimowego pudełka tabeli, więc kolumny nadal
   są wyrównane między nagłówkiem a wierszami. */
@media (max-width: 760px) {
  table.lista, table.cennik, table.finanse-tabela {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Kolumny akcji przy koncie mają własne przyciski - bez tego zawijają się
     na trzy linie i wiersz robi się wyższy niż ekran. */
  table.lista td.akcje { white-space: nowrap; }
}

/* Nagłówki macierzy stada: .68 rem to na telefonie 10,9 px - poniżej progu,
   przy którym wersaliki z odstępem między literami dają się jeszcze czytać. */
@media (max-width: 560px) {
  .tabela-stada.krzyzowa thead th { font-size: .72rem; letter-spacing: .03em; }
}

/* Drobne etykiety pomocnicze schodzily na telefonie ponizej 11 px. Macierzy
   zdarzen celowo nie ruszamy - jest gesta z zalozenia i przewija sie w sobie,
   a powiekszenie cyfr kazaloby przewijac ja dwa razy dluzej. */
@media (max-width: 560px) {
  /* Selektory muszą być tak samo szczegółowe jak te, które nadpisują —
     `.znacznik-domyslna` samo w sobie przegrywa z `.cennik .znacznik-domyslna`. */
  .macierz-zdarzen .lewa .kod { font-size: .72rem; }
  .cennik .znacznik-domyslna { font-size: .72rem; }
  /* Przy 360 px macierz stada wychodziła 11 px poza ekran. Ostatnie, co można
     jej zabrać, to szerokość kolumn liczbowych — treść zostaje w komplecie. */
  .tabela-stada.krzyzowa td.lg, .tabela-stada.krzyzowa th.lg { width: 2.1rem; }
  .tabela-stada.krzyzowa td.sztuk, .tabela-stada.krzyzowa th.sztuk { width: 2.9rem; }
  .tabela-stada.krzyzowa td.krowy-suma,
  .tabela-stada.krzyzowa th.krowy-suma { width: 2.9rem; }
  .tabela-stada.krzyzowa td, .tabela-stada.krzyzowa thead th { padding: 6px 2px; }
}

/* Adnotacja DC305 dopisana za ostatnią kolumną wiersza (np. „???? Preg Stat”).
   Wiersz z nią jest przygaszony, bo jego zera nie znaczą tego, co wyglądają. */
.dopisek { display: block; margin-top: 2px; font-family: var(--mono);
  font-size: .72rem; color: var(--warn); white-space: nowrap; cursor: help; }
tr.z-dopiskiem td { background: var(--warn-soft); }

/* ─── historia danych dziennych ─── */
.wykres-historii { margin: 18px 0 8px; }
.wykres-historii .legenda-wycielen { gap: 6px; margin-bottom: 10px; }
.wykres-historii .drobne { margin-top: 6px; }

/* ─── krowy dojne w tabeli stada ─── */
/* Podświetlenie wierszy, które składają się na sumę „dojne”. Delikatne,
   bo to cztery z siedmiu wierszy — mocny kolor zrobiłby z tabeli szachownicę. */
.tabela-stada.krzyzowa tr.dojna td { background: var(--accent-soft); }
.tabela-stada.krzyzowa tr.dojna td.kropka {
  box-shadow: inset 3px 0 0 var(--accent); }
.tabela-stada.krzyzowa tfoot tr.krowy-razem td { border-top: 1px solid var(--line);
  font-weight: 600; padding-top: 8px; }
/* „w tym dojne” to podzbior wiersza wyzej, wiec kreska nad nim musi byc CIENSZA
   niz ta, ktora oddziela stopke od tabeli - inaczej hierarchia czyta sie na opak. */
.tabela-stada.krzyzowa tfoot tr.suma-dojnych td { font-weight: 700; color: var(--accent);
  border-top: 1px solid var(--line); padding-top: 8px; }
.legenda-dojne { margin: 10px 0 0; font-size: .78rem; color: var(--dim); }

/* Wykres historii rysuje się w układzie 360×176, więc w szerokim panelu
   rozciągał się 2,5× — razem z podpisami osi, które robiły się większe od
   nagłówków sekcji. Ograniczenie szerokości trzyma skalę blisko jedynki:
   1,4× na pulpicie i 1,1× na telefonie. */
.wykres-historii .wykres-ramka { max-width: 520px; margin: 12px auto 0; }

/* Nagłówek tabeli dziennej NIE przykleja się do góry. W monitorze ma to sens —
   tam kolumn jest kilkanaście i bez nazw nie wiadomo, co się czyta. Tu tabela
   jest chronologiczną listą, a przyklejony wiersz zatrzymywał się w środku
   między datami i wyglądał jak kolejny wpis. */
table.monitor.dzienna thead th { position: static; }

/* Notatka spod wpisu dziennego, w historii pod swoim dniem. */
tr.wiersz-notatki td { padding-top: 0; border-bottom: 1px solid var(--line); }
.notatka-dnia { display: flex; gap: 8px; align-items: baseline;
  font-size: .82rem; color: var(--dim); padding: 2px 0 6px; }
.notatka-dnia .znak-notatki { color: var(--accent); flex: 0 0 auto; }

/* Pulpit pokazuje starszą dobę, bo dzisiejsza jeszcze nie doszła. */
.czekamy { margin: 4px 0 14px; padding: 10px 14px; border-radius: 8px;
  background: var(--surface-2); border-left: 4px solid var(--accent);
  font-size: .86rem; color: var(--dim); }
.czekamy b { color: var(--text); margin-right: 4px; }

/* Iskra na kafelku ze średnią z dekady — pokazuje kierunek, którego jedna
   liczba nie powie. Kolor bierze z kafelka, więc idzie za jego tonem. */
.iskra-kafelka { margin: 6px 0 2px; height: 24px; }
.iskra-kafelka .iskra { width: 100%; height: 24px; display: block; opacity: .85; }
.iskra-kafelka .iskra-opis { display: block; margin-top: 2px;
  font-size: .68rem; color: var(--dim); font-style: italic; }

/* ─── hala: zagrody na tle średniej ─── */
.hala-blok { margin: 6px 0 18px; }
.hala-blok > summary { font-size: .9rem; }
.hala-tresc { padding: 0 14px 14px; }
table.hala-srednie td, table.hala-srednie th { white-space: nowrap; }
/* Nagłówek tej tabeli NIE przykleja się — ani w pionie, ani w poziomie.
   W monitorze przyklejona pierwsza kolumna ma sens, bo bez nazwy wskaźnika
   wiersz nic nie znaczy. Tu pierwsza kolumna to numer zagrody, a przyklejony
   nagłówek zatrzymywał się w środku tabeli i wyglądał jak kolejny wiersz. */
table.monitor.hala-srednie thead th,
table.monitor.hala-srednie thead th.wskaznik,
table.monitor.hala-srednie td.wskaznik { position: static; }
/* Pierwsza kolumna to numer zagrody, a nie nazwa wskaźnika — 17 rem zostawione
   po monitorze rozpychało tabelę o ćwierć ekranu bez powodu. */
table.monitor.hala-srednie th.wskaznik,
table.monitor.hala-srednie td.wskaznik { min-width: 5rem; }
.hala-wartosc { display: block; font-variant-numeric: tabular-nums; }
.hala-odchylka { display: block; margin-top: 1px; font-size: .7rem;
  font-variant-numeric: tabular-nums; }
.hala-odchylka.lepiej { color: var(--good); }
.hala-odchylka.gorzej { color: var(--bad); }
.hala-odchylka.neutralnie { color: var(--dim); }
table.hala-srednie .mini { width: 90px; color: var(--accent); }
table.hala-srednie tr.podsumowanie td { border-top: 2px solid var(--line); font-weight: 650; }

/* ═══════════════════════ tablica na ścianie ═══════════════════════
   Ciemna, bo w gabinecie o zmroku bialy ekran 55" oslepia, a scena z jasnym
   tlem swieci przez cala dobe. Wszystkie stopnie pisma ida z jednostki --u,
   ktora mnozy `skala=` z adresu: to jest kalibracja przy montazu, nie ozdoba.
   Z 4 m na 55" znak musi miec ~20 mm, czyli 32 px - stad podloga 40 px. */

.tab-pudlo {
  position: relative; width: 100%; overflow: hidden; border-radius: 8px;
  background: #06141a; border: 1px solid #21454f;
}
.tab-scena {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  transform-origin: top left; display: flex; flex-direction: column;
  background: #0b1a1f; color: #e9f2f3;
  font-variant-numeric: tabular-nums;
  --k: 1;
  --u: calc(var(--k) * 10px);
  --tab-akcent: #37c9c0;
  --tab-przygas: #85a4ac;
  --tab-plyta: #102730;
  --tab-kreska: #21454f;
  --tab-uwaga: #f0b24a;
  --tab-zle: #ef6a52;
}
/* Ekran bez swiezych danych przygasa i mowi o tym w zegarze - cisza byla by
   tu najgorszym komunikatem, bo nikt nigdy tego ekranu nie klika. */
.tab-scena.nieswieze .tab-plansza { opacity: .45; }
.tab-scena.nieswieze .tab-zegar span { color: var(--tab-zle); }

.tab-gora { display: flex; align-items: flex-start; justify-content: space-between;
  padding: 44px 64px 0; }
.tab-tytul b { display: block; font-size: calc(var(--u) * 4.8); font-weight: 700; }
.tab-tytul small { display: block; margin-top: 6px; font-size: calc(var(--u) * 3.4);
  color: var(--tab-przygas); }
.tab-zegar { text-align: right; font-family: var(--mono, ui-monospace, monospace);
  font-size: calc(var(--u) * 3.6); line-height: 1.35; color: var(--tab-przygas); }
.tab-zegar b { display: block; font-weight: 500; color: #e9f2f3; }

.tab-plansza { flex: 1; position: relative; padding: 0 64px; }
.tab-slajd { position: absolute; inset: 0 64px; display: flex; flex-direction: column;
  justify-content: center; gap: 28px; opacity: 0; visibility: hidden;
  transition: opacity .5s ease; }
.tab-slajd.aktywny { opacity: 1; visibility: visible; }

.tab-brew { display: flex; align-items: center; gap: 20px; color: var(--tab-akcent);
  font-size: calc(var(--u) * 4.4); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; }
.tab-brew.ostrzega { color: var(--tab-uwaga); }
.tab-brew.alarm { color: var(--tab-zle); }
.tab-brew i { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px;
  background: currentColor; }

.tab-glowna { display: flex; align-items: baseline; gap: 26px; }
.tab-glowna b { font-size: calc(var(--u) * 23); font-weight: 800; line-height: .86;
  letter-spacing: -.035em; }
.tab-glowna span { font-size: calc(var(--u) * 6.4); font-weight: 600;
  color: var(--tab-przygas); }

.tab-rzad { display: flex; gap: 22px; }
.tab-kafel { flex: 1; background: var(--tab-plyta); border: 1px solid var(--tab-kreska);
  border-radius: 10px; padding: 24px 28px 28px; }
.tab-kafel u { display: block; text-decoration: none; font-size: calc(var(--u) * 4);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tab-przygas); }
.tab-kafel b { display: block; margin-top: 8px; font-size: calc(var(--u) * 8.8);
  font-weight: 700; line-height: 1.05; }
.tab-kafel b em { font-style: normal; margin-left: 10px; font-size: calc(var(--u) * 4);
  font-weight: 600; color: var(--tab-przygas); }

.tab-nota { display: flex; align-items: center; gap: 18px; color: var(--tab-uwaga);
  font-size: calc(var(--u) * 4.6); font-weight: 600; }
.tab-nota i { width: 16px; height: 16px; border-radius: 50%; background: currentColor; }

.tab-fermy { display: flex; flex-direction: column; gap: 14px; }
.tab-lin { display: flex; align-items: center; gap: 26px; padding: 20px 28px;
  background: var(--tab-plyta); border-left: 10px solid #5cc98b; border-radius: 8px; }
.tab-lin.cicha { background: transparent; border: 1px solid var(--tab-kreska);
  border-left: 10px solid var(--tab-kreska); }
.tab-lin .nazwa { flex: 1; font-size: calc(var(--u) * 5); font-weight: 700; }
.tab-lin .litry { width: 260px; text-align: right; font-size: calc(var(--u) * 6.6);
  font-weight: 800; }
.tab-lin .litry em { font-style: normal; margin-left: 8px; font-size: calc(var(--u) * 3.4);
  font-weight: 600; color: var(--tab-przygas); }
.tab-lin .stan { width: 520px; font-size: calc(var(--u) * 3.6); line-height: 1.3;
  color: var(--tab-przygas); }
.tab-lin .brak { flex: 0 0 770px; text-align: right; font-size: calc(var(--u) * 4);
  font-weight: 600; color: var(--tab-uwaga); }

.tab-pas { display: flex; height: 64px; border-radius: 8px; overflow: hidden; }
.tab-pas span { display: block; }
.tab-legenda { display: flex; flex-wrap: wrap; gap: 14px 44px;
  font-size: calc(var(--u) * 4); color: var(--tab-przygas); }
.tab-legenda span { display: inline-flex; align-items: center; gap: 12px; }
.tab-legenda i { width: 20px; height: 20px; border-radius: 5px; }
.tab-legenda b { color: #e9f2f3; font-weight: 700; }

.tab-doby { display: flex; align-items: flex-end; gap: 16px; height: 290px; }
.tab-doba { flex: 1 1 0; min-width: 0; height: 100%; display: flex;
  flex-direction: column; justify-content: flex-end; align-items: center; gap: 12px; }
.tab-doba b { font-size: calc(var(--u) * 3.6); font-weight: 700; }
.tab-doba u { text-decoration: none; font-family: var(--mono, ui-monospace, monospace);
  font-size: calc(var(--u) * 3.2); color: var(--tab-przygas); }
.tab-slupek { width: 100%; border-radius: 6px 6px 0 0; background: var(--tab-akcent); }
.tab-slupek.pusty { height: 26px; background: transparent;
  border: 2px dashed var(--tab-kreska); }
.tab-slupek.niepelna { background: transparent; border: 3px solid var(--tab-akcent); }

.tab-lista { display: flex; flex-direction: column; gap: 16px; }
.tab-wiersz { display: flex; align-items: center; gap: 26px; padding: 22px 30px;
  background: var(--tab-plyta); border-left: 10px solid var(--tab-uwaga);
  border-radius: 8px; }
.tab-wiersz.krytyczny { border-left-color: var(--tab-zle); }
.tab-wiersz .co { flex: 1; font-size: calc(var(--u) * 5); font-weight: 700; }
.tab-wiersz .ile { font-size: calc(var(--u) * 7.2); font-weight: 800; white-space: nowrap;
  color: var(--tab-uwaga); }
.tab-wiersz.krytyczny .ile { color: var(--tab-zle); }
.tab-wiersz .ile em { font-style: normal; font-size: calc(var(--u) * 3.6); font-weight: 600;
  color: var(--tab-przygas); }
.tab-wiersz .prog { width: 430px; font-size: calc(var(--u) * 3.4); line-height: 1.3;
  color: var(--tab-przygas); }

.tab-dol { display: flex; align-items: center; gap: 34px; padding: 0 64px 38px;
  font-family: var(--mono, ui-monospace, monospace); font-size: calc(var(--u) * 4);
  color: var(--tab-przygas); }
.tab-dol .zrodlo { flex: 1; }
.tab-dol .kropki { display: flex; gap: 10px; }
.tab-dol .kropki i { width: 46px; height: 8px; border-radius: 4px;
  background: var(--tab-kreska); }
.tab-dol .kropki i.tu { background: var(--tab-akcent); }
.tab-postep { position: absolute; left: 0; bottom: 0; height: 6px; width: 0;
  background: var(--tab-akcent); opacity: .7; }

/* Podglad w portalu jest tym samym ekranem, tylko wpisanym w szerokosc panelu. */
.tab-podglad { margin: 12px 0 22px; }
.tab-podglad:fullscreen { display: flex; align-items: center; justify-content: center;
  background: #000; margin: 0; }
.adres-kiosku { width: 100%; font-family: var(--mono, ui-monospace, monospace);
  font-size: .82rem; }

/* Telewizor: strona to sam ekran i nic poza nim. */
body.tryb-tablicy { background: #0b1a1f; margin: 0; overflow: hidden; }
body.tryb-tablicy header, body.tryb-tablicy nav, body.tryb-tablicy footer { display: none; }
#tablica-pelna { display: flex; align-items: center; justify-content: center;
  width: 100vw; height: 100vh; background: #0b1a1f; }
#tablica-pelna .tab-pudlo { border: none; border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .tab-slajd { transition: none; }
}

/* Pasek „dane sa stare”. Bursztynowy, nie czerwony: portal dziala, tylko liczby
   sa sprzed chwili, ktora podaje wprost. */
.nieswieze {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid rgba(154, 102, 8, .22);
  font-size: .86rem;
  font-weight: 600;
}

/* ═══════════════════════════ genetyka ═══════════════════════════
   Ranking buhajow: punkt to zmierzona skutecznosc, was to przedzial ufnosci
   podany przez DC305. Wasy, ktore na siebie zachodza, znacza roznice
   nierozstrzygnieta - i to ma byc widac na pierwszy rzut oka, bez czytania. */

.ranking-buhajow { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 20px; }
.wiersz-buhaja { display: grid; grid-template-columns: 12rem 1fr 6rem; gap: 14px;
  align-items: center; }
.wiersz-buhaja .nazwa b { display: block; font-size: .92rem; }
.wiersz-buhaja .nazwa .drobne { display: block; }
.wiersz-buhaja .tor { position: relative; height: 22px; background: var(--bg);
  border-radius: 6px; }
.wiersz-buhaja .was { position: absolute; top: 8px; height: 6px; border-radius: 3px;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--line); }
.wiersz-buhaja .punkt { position: absolute; top: 4px; width: 14px; height: 14px;
  margin-left: -7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface); }
.wiersz-buhaja .wartosc { text-align: right; font-variant-numeric: tabular-nums; }
.wiersz-buhaja .wartosc b { display: block; font-size: 1rem; }
.wiersz-buhaja .wartosc .drobne { display: block; }

.lista-brakow { margin: 8px 0 0; padding-left: 20px; font-size: .88rem; line-height: 1.6; }
.lista-brakow li { margin-bottom: 6px; }

@media (max-width: 560px) {
  .wiersz-buhaja { grid-template-columns: 7.5rem 1fr 4.6rem; gap: 8px; }
}

/* ─── uzytkownicy w blokach gospodarstw ─── */
.filtr-kont { margin: 4px 0 14px; }
.filtr-kont select { min-height: 38px; padding: 6px 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; }
.filtr-kont input[type="search"] { flex: 1 1 18rem; min-width: 12rem; }
.naglowek-grupy-kont { display: flex; align-items: center; gap: 12px;
  margin: 20px 0 6px; }
.naglowek-grupy-kont b { font-size: 15px; }

/* Wyjasnienie karty chowane pod trojkatem: czyta sie je raz, a stalo codziennie
   miedzy naglowkiem a formularzem. */
.opis-karty { margin: 0 0 14px; }
.opis-karty > summary { cursor: pointer; font-size: .84rem; font-weight: 600;
  color: var(--accent); padding: 6px 0; list-style-position: outside; }
.opis-karty > summary:hover { text-decoration: underline; }
.opis-karty[open] > summary { margin-bottom: 4px; }

/* Na telefonie trzy kolumny zjadaja pasek: przy 340 px na date i podsumowanie
   zostaje polowa szerokosci, a doba sciska sie do 150 px i przestaje cokolwiek
   znaczyc. Data i podsumowanie ida wiec w jeden rzad NAD paskiem, a pasek
   dostaje cala szerokosc. */
@media (max-width: 560px) {
  .rolka-os { grid-template-columns: 1fr; gap: 0; }
  .rolka-os .rolka-etykieta, .rolka-os .rolka-podsumowanie { display: none; }
  .rolka-wiersz { grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; }
  .rolka-wiersz .rolka-etykieta { grid-row: 1; grid-column: 1; }
  .rolka-wiersz .rolka-podsumowanie { grid-row: 1; grid-column: 2; }
  .rolka-wiersz .rolka-pasek { grid-row: 2; grid-column: 1 / -1; }
  .rolka-wiersz .rolka-etykieta b, .rolka-wiersz .rolka-etykieta .drobne {
    display: inline; font-size: .78rem; }
  .rolka-wiersz .rolka-etykieta .drobne { margin-left: 5px; }
  .rolka-podsumowanie b, .rolka-podsumowanie .drobne {
    display: inline; font-size: .72rem; }
  .rolka-podsumowanie .drobne { margin-left: 6px; }
  .rolka-godzina.gesta { display: none; }
  .rolka-linia .godz { min-width: 100%; }
}

/* ─── zakładka: Rynek mleka ─── */
/* Kafel porównania jest tu jedyną liczbą, na którą hodowca może zareagować
   działaniem (rozmową z mleczarnią), więc jako jedyny dostaje ramkę w kolorze
   znaczącym: zielono, gdy jesteś nad średnią, bursztynowo, gdy pod. Reszta
   sekcji to cudze notowania - te mają być czytelne, a nie krzyczeć. */
.kafel-rynku { background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--dim); border-radius: 10px; padding: 14px 16px;
  margin: 14px 0; }
.kafel-rynku.nad { border-left-color: var(--good); background: var(--good-soft); }
.kafel-rynku.pod { border-left-color: var(--warn); background: var(--warn-soft); }
.kafel-rynku.maly { flex: 1 1 240px; margin: 0; }
.kafel-rynku .etykieta { display: block; font-size: .74rem; color: var(--dim);
  letter-spacing: .04em; text-transform: uppercase; }
.kafel-rynku .wielka-liczba { margin-top: 4px; }
.kafel-rynku .wielka-liczba b { font-size: 1.7rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.kafel-rynku .pod-liczba { font-size: .82rem; color: var(--dim); margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.kafel-rynku .kwota-miesieczna { margin-top: 8px; font-size: 1rem; font-weight: 650;
  font-variant-numeric: tabular-nums; }
.kafel-rynku .drobne { margin: 8px 0 0; font-size: .74rem; color: var(--dim);
  line-height: 1.5; }
.kafel-rynku .brak-porownania { margin-top: 4px; font-size: 1rem; font-weight: 650; }
.kafle-rynku { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }

.tabela-rynku { width: 100%; border-collapse: collapse; margin: 10px 0 4px; }
.tabela-rynku th { padding: 5px 8px; font-size: .72rem; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase; color: var(--dim);
  text-align: left; border-bottom: 1px solid var(--line); }
.tabela-rynku th.num, .tabela-rynku td.num { text-align: right;
  font-variant-numeric: tabular-nums; }
.tabela-rynku td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.tabela-rynku tr.wyroznione { background: var(--accent-soft); font-weight: 650; }
.tabela-rynku td.wzrost { color: var(--good); }
.tabela-rynku td.spadek { color: var(--bad); }
.tabela-rynku td.zero { color: var(--dim); }
.tabela-rynku .kod { font-family: var(--mono, ui-monospace, monospace);
  font-size: .72rem; color: var(--dim); margin-left: 8px; }

.wykres-skupu, .wykres-gdt { width: 100%; height: auto; margin: 2px 0 10px; }
.wykres-skupu .siatka, .wykres-gdt .siatka { stroke: var(--line); stroke-width: 1; }
.wykres-skupu .os, .wykres-gdt .os { fill: var(--dim); font-size: 10px; }
.wykres-skupu .linia-skupu { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; }
.wykres-gdt .slupek-wzrost { fill: var(--good); }
.wykres-gdt .slupek-spadek { fill: var(--bad); }

.kontynent { margin: 14px 0 0; }
.naglowek-kontynentu { display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.naglowek-kontynentu .prawa { margin-left: auto; font-size: .75rem; color: var(--dim); }
.lista-newsow { list-style: none; margin: 6px 0 0; padding: 0; }
.lista-newsow li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.lista-newsow li:last-child { border-bottom: none; }
.lista-newsow a { color: var(--text); text-decoration: none; font-size: .9rem;
  line-height: 1.4; }
.lista-newsow a:hover { color: var(--accent); text-decoration: underline; }
.meta-newsa { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px;
  font-size: .74rem; color: var(--dim); }
.meta-newsa .oryginal { color: var(--warn); }

.pobrania-rynku { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--dim); }
.pobrania-rynku > div { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 3px 0; }
.pobrania-rynku b { color: var(--text); font-weight: 650; min-width: 10rem; }
.pobrania-rynku .drobne { flex: 1 1 100%; }
.pobrania-rynku .blad b, .pobrania-rynku .blad .drobne { color: var(--bad); }

/* Na telefonie kolumny w euro schodzą - złotówki i zmiana tygodniowa niosą
   całą treść, a kurs EUR stoi w zdaniu nad tabelą. */
@media (max-width: 700px) {
  .tabela-rynku .detal { display: none; }
  .kafel-rynku .wielka-liczba b { font-size: 1.4rem; }
}

/* ─── zakładka: DMeter (analizator suchej masy) ─── */
.wybor-zakresu-dmeter { display: flex; gap: 6px; margin: 4px 0 10px; }
.wybor-zakresu-dmeter .aktywny { background: var(--accent); color: #fff;
  border-color: var(--accent); }

.wykres-dmeter { width: 100%; height: auto; margin: 2px 0 6px; }
.wykres-dmeter .siatka { stroke: var(--line); stroke-width: 1; }
.wykres-dmeter .os { fill: var(--dim); font-size: 10px; }
.wykres-dmeter .linia { fill: none; stroke-width: 2; stroke-linejoin: round; }
.wykres-dmeter .punkt { stroke: var(--surface); stroke-width: 1.5; }
/* Kolor serii idzie klasa, nie atrybutem: te same szesc klas maluje linie,
   punkt i kropke w legendzie, wiec nie da sie ich rozjechac. */
.wykres-dmeter .linia.seria-1 { stroke: var(--seria-1); }
.wykres-dmeter .linia.seria-2 { stroke: var(--seria-2); }
.wykres-dmeter .linia.seria-3 { stroke: var(--seria-3); }
.wykres-dmeter .linia.seria-4 { stroke: var(--seria-4); }
.wykres-dmeter .linia.seria-5 { stroke: var(--seria-5); }
.wykres-dmeter .linia.seria-6 { stroke: var(--seria-6); }
.wykres-dmeter .punkt.seria-1 { fill: var(--seria-1); }
.wykres-dmeter .punkt.seria-2 { fill: var(--seria-2); }
.wykres-dmeter .punkt.seria-3 { fill: var(--seria-3); }
.wykres-dmeter .punkt.seria-4 { fill: var(--seria-4); }
.wykres-dmeter .punkt.seria-5 { fill: var(--seria-5); }
.wykres-dmeter .punkt.seria-6 { fill: var(--seria-6); }
.kropka-serii { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 6px; }
.kropka-serii.seria-1 { background: var(--seria-1); }
.kropka-serii.seria-2 { background: var(--seria-2); }
.kropka-serii.seria-3 { background: var(--seria-3); }
.kropka-serii.seria-4 { background: var(--seria-4); }
.kropka-serii.seria-5 { background: var(--seria-5); }
.kropka-serii.seria-6 { background: var(--seria-6); }
.kafel-dmeter .etykieta { display: flex; align-items: center; text-transform: none;
  letter-spacing: 0; font-size: .8rem; }

.tabela-dmeter .wiersz-pomiaru { cursor: pointer; }
.tabela-dmeter .wiersz-pomiaru:hover { background: var(--surface-2); }
.tabela-dmeter td.mocne { font-weight: 650; }
.tabela-dmeter .notatka-skrot { max-width: 16rem; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; color: var(--dim); }
.tabela-dmeter .czas-odbioru { display: inline-block; margin-left: 8px; padding: 0 6px;
  border-radius: 999px; background: var(--warn-soft); color: var(--warn);
  font-size: .68rem; }
.tabela-dmeter .szczegol-pomiaru td { background: var(--surface-2); padding: 12px 14px; }
.notatka-pomiaru { margin: 4px 0 8px; font-size: .86rem; }

/* Kod parujacy czyta sie z ekranu i przepisuje palcem na urzadzeniu - ma byc
   duzy, rowny i podzielony na dwie czworki, zeby dalo sie go trzymac w glowie. */
.kod-dmeter .cyfry-kodu { font-size: 2.2rem; font-weight: 700; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.kod-dmeter code { font-family: var(--mono, ui-monospace, monospace); font-size: .8rem; }
.drobne.ostrzezenie { color: var(--warn); }
.przewijak-dmeter { overflow-x: auto; container-type: inline-size; }
.wnetrze-szczegolu { position: sticky; left: 0; max-width: calc(100cqw - 28px); }
/* Nazwa urzadzenia nad opisem stanu, przyciski w tym samym wierszu. Opis jest
   elastyczny i moze sie zawijac - inaczej dlugi stan wypychal „Odwolaj”
   do nowej linii, a nazwa zlewala sie z pierwszym slowem opisu. */
.urzadzenie-dmeter { align-items: flex-start; }
.urzadzenie-dmeter .opis { flex: 1 1 220px; min-width: 0; }
.urzadzenie-dmeter .opis b { display: block; }

/* ─── DMeter 180: przebieg suszenia ─── */
.naglowek-suszenia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  justify-content: space-between; }
.przelacznik-przebiegu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: .86rem; font-weight: 600; cursor: pointer; }
.przelacznik-przebiegu input { width: 18px; height: 18px; accent-color: var(--accent); }
.wykres-dmeter .os-temp { fill: var(--dm-temp); }
.wykres-dmeter .linia.masa-ciagla { stroke: var(--dm-masa-ciagla); stroke-width: 1; }
.wykres-dmeter .linia.temperatura { stroke: var(--dm-temp); stroke-width: 1.5; }
.wykres-dmeter .linia.dmuchawa { stroke: var(--dm-dmuchawa); stroke-width: 1.2; }
.wykres-dmeter .pole-grzania { fill: var(--dm-grzanie); fill-opacity: .45; stroke: none; }
.wykres-dmeter .tlo-pasa { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.wykres-dmeter .prognoza line { stroke: var(--dm-prognoza); stroke-width: 1.5; }
.wykres-dmeter .prognoza circle { fill: var(--surface); stroke: var(--dm-prognoza); stroke-width: 1.5; }
.wykres-dmeter .znacznik-alarmu line { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 3 3; }
.wykres-dmeter .znacznik-alarmu path { fill: var(--bad); }
.legenda-przebiegu { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 10px;
  font-size: .78rem; color: var(--dim); }
.legenda-przebiegu .poz { display: inline-flex; align-items: center; gap: 6px; }
.legenda-przebiegu .znak { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.legenda-przebiegu .znak.wazenia { background: var(--seria-1); height: 3px; }
.legenda-przebiegu .znak.masa-ciagla { background: var(--dm-masa-ciagla); height: 2px; }
.legenda-przebiegu .znak.temperatura { background: var(--dm-temp); }
.legenda-przebiegu .znak.dmuchawa { background: var(--dm-dmuchawa); height: 2px; }
.legenda-przebiegu .znak.grzanie { background: var(--dm-grzanie); height: 10px; opacity: .6; }
.legenda-przebiegu .znak.prognoza { width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--dm-prognoza); background: var(--surface); }
.legenda-przebiegu .znak.alarm { width: 0; height: 12px; border-left: 2px dashed var(--bad);
  border-radius: 0; }
.bilans-dmeter { margin: 4px 0 2px; }
.fakty-dmeter { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px;
  margin: 0 0 8px; font-size: .84rem; }
.fakty-dmeter dt { color: var(--dim); }
.fakty-dmeter dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ─── DMeter 180: podglad na zywo ─── */
.na-zywo-dmeter { display: grid; gap: 10px; margin: 0 0 12px; }
.na-zywo-dmeter:empty { display: none; }
.karta-na-zywo { background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--accent); border-radius: var(--radius); padding: 12px 14px; }
.karta-na-zywo.cisza { border-left-color: var(--dim); background: var(--surface-2); }
.karta-na-zywo.cisza .fakty-na-zywo b { color: var(--dim); }
.karta-na-zywo.czeka_na_wynik { border-left-color: var(--good); }
.karta-na-zywo.przerwany { border-left-color: var(--warn); }
.karta-na-zywo .drobne { margin: 8px 0 0; }
.glowa-na-zywo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.glowa-na-zywo b { font-size: 1rem; }
.puls-dmeter { width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  animation: puls-dmeter 1.6s ease-in-out infinite; }
@keyframes puls-dmeter { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .puls-dmeter { animation: none; } }
.fakty-na-zywo { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px 16px; margin-top: 10px; }
.fakty-na-zywo .fakt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fakty-na-zywo .etykieta { font-size: .72rem; color: var(--dim); text-transform: uppercase;
  letter-spacing: .04em; }
.fakty-na-zywo b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.fakty-na-zywo .glowny b { font-size: 1.6rem; color: var(--accent); }
.fakty-na-zywo small { color: var(--dim); font-size: .76rem; }

/* ─── DMeter 180: stan urzadzen i raport serwisowy ─── */
.lampka-dmeter { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; background: var(--dim); }
.lampka-dmeter.ok { background: var(--good); }
.lampka-dmeter.uwagi { background: var(--warn); }
.lampka-dmeter.blad { background: var(--bad); }
.alarm-urzadzenia { display: block; color: var(--bad); font-weight: 600; }
.stan-urzadzen-dmeter { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; }
.stan-urzadzen-dmeter:empty { display: none; }
.chip-urzadzenia { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: .8rem; }
.chip-urzadzenia .lampka-dmeter { margin-right: 0; }
.chip-urzadzenia span { color: var(--dim); }
.raport-dmeter { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 10px; }
.raport-dmeter h5 { margin: 12px 0 6px; font-size: .86rem; display: flex; align-items: center;
  gap: 8px; }
.alarmy-urzadzenia { border-left: 4px solid var(--bad); background: var(--bad-soft);
  border-radius: 6px; padding: 8px 12px; }
.alarmy-urzadzenia p { margin: 0 0 6px; font-size: .86rem; }
.alarmy-urzadzenia p.krytyczny b { color: var(--bad); }
.wynik-dmeter { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem;
  font-weight: 600; background: var(--surface); color: var(--dim); border: 1px solid var(--line); }
.wynik-dmeter.dobrze { background: var(--good-soft); color: var(--good); border-color: transparent; }
.wynik-dmeter.uwaga { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.wynik-dmeter.zle { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.tabela-autotestu td { vertical-align: top; }
.siatka-serwisu { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 18px; }
.lista-alarmow { margin: 0; padding-left: 18px; font-size: .84rem; }

/* Alarm krytyczny nad panelem - na kazdej zakladce tej fermy. */
.alarm-dmeter { background: var(--bad-soft); border: 1px solid var(--bad);
  border-left-width: 5px; border-radius: var(--radius); padding: 10px 14px; margin: 10px 0;
  color: var(--text); }
.alarm-dmeter p { margin: 0 0 6px; }
.alarm-dmeter b { color: var(--bad); }

/* ─── DMeter: komunikat o przeciazeniu (tylko w zakladce DMeter) ─── */
.przeciazenia-dmeter { display: grid; gap: 10px; margin: 0 0 12px; }
.przeciazenia-dmeter:empty { display: none; }
.komunikat-przeciazenia { background: var(--warn-soft); border: 1px solid var(--line);
  border-left: 5px solid var(--warn); border-radius: var(--radius); padding: 12px 14px; }
.komunikat-przeciazenia.trwa { border-left-color: var(--bad); background: var(--bad-soft); }
.komunikat-przeciazenia p { margin: 8px 0 10px; font-size: .9rem; }

/* ─── DMeter: trwajacy pomiar na wykresach ─── */
.miejsce-wykresu-na-zywo { margin-top: 12px; }
.podpis-paska.wtrakcie { color: var(--accent); font-weight: 600; }
.wykres-dmeter .teraz line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.wykres-dmeter .os-teraz { fill: var(--accent); }
.legenda-przebiegu .znak.teraz { width: 0; height: 12px; border-left: 2px dashed var(--accent);
  border-radius: 0; }
.wykres-dmeter .wtrakcie .kolko { fill: var(--surface); stroke-width: 2.5; stroke-dasharray: 3 2; }
.wykres-dmeter .wtrakcie .dojscie { stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.wykres-dmeter .wtrakcie .zakres { stroke-width: 2; }
.wykres-dmeter .etykieta-wtrakcie { font-weight: 700; fill: var(--accent); }
.wykres-dmeter .wtrakcie.seria-1 line, .wykres-dmeter .wtrakcie.seria-1 circle { stroke: var(--seria-1); }
.wykres-dmeter .wtrakcie.seria-2 line, .wykres-dmeter .wtrakcie.seria-2 circle { stroke: var(--seria-2); }
.wykres-dmeter .wtrakcie.seria-3 line, .wykres-dmeter .wtrakcie.seria-3 circle { stroke: var(--seria-3); }
.wykres-dmeter .wtrakcie.seria-4 line, .wykres-dmeter .wtrakcie.seria-4 circle { stroke: var(--seria-4); }
.wykres-dmeter .wtrakcie.seria-5 line, .wykres-dmeter .wtrakcie.seria-5 circle { stroke: var(--seria-5); }
.wykres-dmeter .wtrakcie.seria-6 line, .wykres-dmeter .wtrakcie.seria-6 circle { stroke: var(--seria-6); }
.wykres-dmeter .wtrakcie.seria-bez line, .wykres-dmeter .wtrakcie.seria-bez circle { stroke: var(--accent); }
.kropka-wtrakcie { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 2px dashed var(--accent); margin-right: 6px; background: var(--surface); }
.chip-wtrakcie span { color: var(--accent); font-weight: 600; }

/* Wilgotnosc (100% - sucha masa) pod wynikiem na kafelku DMeter. */
.kafel-dmeter .wilgotnosc-kafla { font-size: .82rem; color: var(--dim); margin-top: -2px;
  font-variant-numeric: tabular-nums; }

/* Pomiar przerwany (ZATRZYMAJ, alarm, za malo wazen): szary wiersz, w kolumnie
   wyniku chip zamiast liczby - wartosc pozorna nie moze wygladac jak wynik. */
.tabela-dmeter .wiersz-pomiaru.przerwany td { color: var(--dim); }
.tabela-dmeter .wiersz-pomiaru.przerwany td:first-child { font-style: italic; }
.chip-przerwania { display: inline-block; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--dim);
  font-size: .76rem; font-weight: 600; white-space: nowrap; cursor: help; }
.info-przerwania { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px;
  padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--dim); border-radius: var(--radius); font-size: .9rem; }

/* Aktualizacja programu DMeter przez Wi-Fi. */
.aktualizacja-dostepna { display: block; color: var(--accent); font-weight: 600; }
.wgrywanie-oprogramowania { display: flex; flex-direction: column; gap: 10px; }
.wgrywanie-oprogramowania h4 { margin-bottom: 0; }
.pole-pliku { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pole-pliku > span:first-child { min-width: 120px; font-weight: 600; font-size: .9rem; }
.pole-pliku select, .pole-pliku input:not([type="checkbox"]) { max-width: 100%; min-width: 0; }
.pole-pliku input { max-width: 100%; }
.wgrywanie-oprogramowania .uzupelnij { align-self: flex-start; }
.wgrywanie-oprogramowania .wynik-zapisu:empty { display: none; }
.tabela-oprogramowania td { vertical-align: top; }
.tabela-oprogramowania td b { white-space: nowrap; }
.tabela-oprogramowania div.drobne { font-size: .76rem; color: var(--dim); }
.tabela-oprogramowania td.zmiany-wersji { min-width: 220px; font-size: .82rem; color: var(--dim); }
.tabela-oprogramowania tr.wycofana td { color: var(--dim); }
.stan-wersji { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .76rem;
  font-weight: 600; white-space: nowrap; border: 1px solid var(--line); }
.stan-wersji.proponowana { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.stan-wersji.starsza { background: var(--surface-2); color: var(--dim); }
.stan-wersji.wycofana { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }

/* Pliki diagnostyczne DMeter (tylko konto platformowe). */
.naglowek-plikow { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: 8px 16px; margin-bottom: 10px; }
.naglowek-plikow .drobne { font-size: .8rem; color: var(--dim); }
.zajecie-plikow { min-width: 180px; display: flex; flex-direction: column; gap: 4px; }
.pasek-zajecia { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pasek-zajecia i { display: block; height: 100%; background: var(--accent); }
.pasek-zajecia.prawie-pelny i { background: var(--warn); }
.tabela-plikow td { vertical-align: top; }
.tabela-plikow code { font-size: .85rem; white-space: nowrap; }
.tabela-plikow div.drobne { font-size: .76rem; color: var(--dim); }
.tabela-plikow td.num { white-space: nowrap; }
.akcje-pliku { display: flex; gap: 6px; justify-content: flex-end; }
.podglad-pliku pre { margin: 6px 0 0; max-height: 320px; overflow: auto; padding: 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .76rem; line-height: 1.4; white-space: pre; }

/* Reklamy DMeter (tylko konto platformowe): lista po lewej, makieta ekranu po prawej. */
.uklad-plansz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: 20px; align-items: start; }
@media (max-width: 860px) { .uklad-plansz { grid-template-columns: minmax(0, 1fr); }
  .podglad-plansz { order: -1; position: static; } }
.podglad-plansz { position: sticky; display: flex; flex-direction: column; gap: 8px;
  top: calc(var(--wys-naglowka, 64px) + var(--wys-zakladek, 64px) + 12px); }
.podglad-plansz h4 { margin: 0; }
.podglad-plansz select { align-self: flex-start; }
.tlo-planszy, .termin-planszy { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tlo-planszy label { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; }
.lista-plansz { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.karta-planszy { display: flex; gap: 14px; flex-wrap: wrap; padding: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); }
.karta-planszy.wybrana { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wybor-planszy { align-self: flex-start; padding: 0; border: 0; background: none; line-height: 0;
  border-radius: 4px; }
.miniatura-planszy { width: 200px; max-width: 100%; aspect-ratio: 400 / 160; object-fit: contain;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); }
.opis-planszy { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tytul-planszy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.opis-planszy .drobne { font-size: .8rem; color: var(--dim); }
.opis-planszy .drobne.ostrzezenie { color: var(--warn); }
.akcje-planszy { justify-content: flex-start; flex-wrap: wrap; margin-top: 6px; }
.edycja-planszy { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.edycja-planszy .uzupelnij { align-self: flex-start; }

/* Makieta ekranu urzadzenia. Ekran ma wlasne, stale barwy (to obraz LCD, nie
   strona portalu), wiec nie idzie za motywem jasnym/ciemnym. */
.ramka-ekranu { padding: 10px; background: #20292f; border-radius: 12px; }
.ekran-dmeter { position: relative; width: 100%; overflow: hidden; container-type: inline-size;
  background: #0f1d26; color: #f2f6f8; border-radius: 3px; --przejscie: 1000ms; }
.zegar-pelny, .ekran-dzielony { position: absolute; inset: 0; }
.zegar-pelny { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1cqw; transition: opacity var(--przejscie) ease-in-out, transform var(--przejscie) ease-in-out; }
.zegar-pelny b { font-size: 22cqw; line-height: 1; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.zegar-pelny span { font-size: 4.6cqw; color: #b9c7cf; }
.ekran-dzielony { display: flex; flex-direction: column; opacity: 0;
  transition: opacity var(--przejscie) ease-in-out; }
.pole-planszy { overflow: hidden; background: #fff; transform: translateY(-6%);
  transition: transform var(--przejscie) ease-in-out; }
.pole-planszy img { display: block; width: 100%; height: 100%; object-fit: fill; }
.zegar-pasek { display: flex; align-items: center; justify-content: space-between;
  padding: 0 4cqw; gap: 3cqw; }
.zegar-pasek b { font-size: 10cqw; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.zegar-pasek span { font-size: 3.6cqw; color: #b9c7cf; text-align: right; }
.ekran-dmeter.z-plansza .zegar-pelny { opacity: 0; transform: translateY(30%) scale(.55); }
.ekran-dmeter.z-plansza .ekran-dzielony { opacity: 1; }
.ekran-dmeter.z-plansza .pole-planszy { transform: none; }
.makieta-dmeter .drobne { font-size: .78rem; color: var(--dim); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .zegar-pelny, .ekran-dzielony, .pole-planszy { transition: none; }
}

/* Administracja: co wpisac w pole „Gospodarstwo” przy logowaniu. */
.karta-logowania-admin { margin: 0 0 16px; padding: 10px 14px; background: var(--accent-soft);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.linia-logowania { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.identyfikator-logowania { font-size: 1.05rem; font-weight: 700; padding: 2px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.karta-logowania-admin .drobne { margin: 6px 0 0; font-size: .8rem; color: var(--dim); }
.linia-logowania .btn-tekstowy { display: inline-block; width: auto; margin: 0; padding: 0 8px;
  min-height: 36px; }

/* Kreator ukladu tablicy: lista stron po lewej, podglad prawdziwej tablicy po prawej. */
.kreator-tablicy .pasek-ukladu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kreator-tablicy .pasek-ukladu select, .kreator-tablicy .pasek-ukladu input {
  min-width: 0; max-width: 100%; }
.kreator-tablicy .pasek-ukladu input { flex: 1 1 180px; }
.uklad-kreatora { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px; align-items: start; margin-top: 8px; }
@media (max-width: 900px) { .uklad-kreatora { grid-template-columns: minmax(0, 1fr); }
  .podglad-kreatora { order: -1; position: static; } }
.lista-stron { list-style: none; margin: 0 0 10px; padding: 0; display: flex;
  flex-direction: column; gap: 6px; counter-reset: strona; }
.lista-stron li { display: flex; align-items: stretch; gap: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); counter-increment: strona; }
.lista-stron li.zaznaczona { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.lista-stron li.na-ekranie { background: var(--accent-soft); }
.lista-stron .nazwa-strony { flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px; padding: 8px 10px; background: none; border: 0;
  text-align: left; }
.lista-stron .nazwa-strony b::before { content: counter(strona) ". "; color: var(--dim); }
.lista-stron .nazwa-strony .drobne { font-size: .78rem; color: var(--dim); }
.akcje-strony { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.akcje-strony .uzupelnij { min-width: 32px; padding: 4px 6px; }
.dodaj-strone { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dodaj-strone select { flex: 1 1 160px; min-width: 0; }
.ustawienia-strony { display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ustawienia-strony h5 { margin: 0; font-size: .95rem; }
.ustawienia-strony .drobne { margin: 0; font-size: .8rem; color: var(--dim); }
.ustawienia-strony input[type="number"] { width: 110px; }
.fermy-strony { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px; margin: 0; }
.fermy-strony legend { font-weight: 600; font-size: .9rem; padding: 0 4px; }
.fermy-strony label, .wybor-ferm label { display: flex; align-items: center; gap: 6px; }
.wybor-ferm { display: flex; flex-direction: column; gap: 4px; padding-left: 22px; }
/* Przyklejony pod naglowkiem i paskiem zakladek, a w jednej kolumnie (telefon)
   wcale - inaczej zaslanialby liste stron i przyciski podgladu. */
.podglad-kreatora { position: sticky; display: flex; flex-direction: column; gap: 8px;
  min-width: 0; top: calc(var(--wys-naglowka, 64px) + var(--wys-zakladek, 64px) + 12px); }
.sterowanie-podgladu { display: flex; gap: 6px; flex-wrap: wrap; }
.nota-podgladu { margin: 0; font-size: .82rem; color: var(--warn); min-height: 1em; }
.uklad-telewizora { max-width: 220px; }
.kreator-tablicy .pasek-ukladu .btn-glowny { width: auto; flex: 0 0 auto; padding-inline: 22px; }
.ustawienia-strony input[type="number"] { width: 140px; }
/* Telewizory: nazwa i „ostatnio widziany” w osobnych liniach. */
.karta-formularza .pasek-formularza > div > span.drobne { display: block; font-size: .8rem;
  color: var(--dim); }

/* ── Tablica, etap 2: porownania ferm, tabela, trend, rynek, DMeter, komunikat ── */
.tab-rankingi { display: flex; flex-direction: column; gap: 14px; }
.tab-ranking { display: grid; grid-template-columns: 360px minmax(0, 1fr) 300px 440px;
  align-items: center; gap: 28px; padding: 16px 26px; background: var(--tab-plyta);
  border: 1px solid var(--tab-kreska); border-left: 8px solid var(--tab-akcent);
  border-radius: 10px; }
.tab-ranking.uwaga { border-left-color: var(--tab-uwaga); }
.tab-ranking.krytyczny { border-left-color: var(--tab-zle); }
.tab-ranking .nazwa { font-size: calc(var(--u) * 4.6); font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tab-ranking .pasek { height: 30px; background: #0b1a1f; border-radius: 6px; overflow: hidden; }
.tab-ranking .pasek i { display: block; height: 100%; border-radius: 6px; }
.tab-ranking .ile { text-align: right; font-size: calc(var(--u) * 6.6); font-weight: 800;
  white-space: nowrap; }
.tab-ranking .ile em { font-style: normal; margin-left: 10px; font-size: calc(var(--u) * 3.2);
  font-weight: 600; color: var(--tab-przygas); }
.tab-ranking .dopisek { display: flex; align-items: center; gap: 18px;
  font-size: calc(var(--u) * 3.4); color: var(--tab-przygas); }
.tab-ranking .dopisek small { font-size: inherit; white-space: nowrap; }
.tab-iskra { width: 300px; height: 70px; flex: 0 0 auto; }
.tab-tabela { width: 100%; border-collapse: separate; border-spacing: 0 10px;
  font-size: calc(var(--u) * 4.4); }
.tab-tabela th { text-align: right; font-size: calc(var(--u) * 3.2); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tab-przygas);
  padding: 0 24px 4px; }
.tab-tabela th:first-child, .tab-tabela td.nazwa { text-align: left; }
.tab-tabela td { text-align: right; padding: 18px 24px; background: var(--tab-plyta);
  font-weight: 700; white-space: nowrap; }
.tab-tabela td:first-child { border-radius: 10px 0 0 10px; }
.tab-tabela td:last-child { border-radius: 0 10px 10px 0; }
.tab-tabela td em { font-style: normal; margin-left: 8px; font-size: calc(var(--u) * 2.8);
  color: var(--tab-przygas); font-weight: 600; }
.tab-trend { width: 100%; height: 470px; }
.tab-trend .siatka { stroke: var(--tab-kreska); stroke-width: 2; }
.tab-trend .prog { stroke: var(--tab-uwaga); stroke-width: 2; stroke-dasharray: 12 10; }
.tab-trend .os { fill: var(--tab-przygas); font-size: 30px;
  font-family: var(--mono, ui-monospace, monospace); }
.tab-linia-rynku .tab-iskra { width: 100%; height: 160px; }
.tab-komunikat { font-size: calc(var(--u) * 11); font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; }
.tab-komunikat-tekst { font-size: calc(var(--u) * 5.2); line-height: 1.35; color: #cfe1e3;
  max-width: 1600px; white-space: pre-line; }
.tab-wiadomosci { display: flex; flex-direction: column; gap: 18px; }
.tab-wiadomosc { display: flex; flex-direction: column; gap: 6px; padding: 16px 26px;
  background: var(--tab-plyta); border-left: 6px solid var(--tab-akcent); border-radius: 8px; }
.tab-wiadomosc b { font-size: calc(var(--u) * 4.4); font-weight: 700; line-height: 1.2; }
.tab-wiadomosc span { font-size: calc(var(--u) * 3); color: var(--tab-przygas); }
.tab-rzad-dmeter .tab-kafel small { display: block; margin-top: 10px;
  font-size: calc(var(--u) * 3.2); color: var(--tab-przygas); }
.tab-nota.tab-nota-akcent { color: var(--tab-akcent); }
.tab-trend .prog.krytyczny { stroke: var(--tab-zle); }
.tab-glowna.srednia b { font-size: calc(var(--u) * 15); }
.tab-glowna.srednia span { font-size: calc(var(--u) * 5); }
.tab-lista.zwarta { gap: 10px; }
.tab-lista.zwarta .tab-wiersz { padding: 12px 26px; }
.tab-wiersz.rynek { border-left-color: var(--tab-przygas); }
.tab-wiersz.rynek .ile { color: #e9f2f3; }
.tab-wiersz.rynek.w-gore { border-left-color: var(--tab-akcent); }
.tab-wiersz.rynek.w-gore .ile { color: var(--tab-akcent); }
.tab-wiersz.rynek.w-dol { border-left-color: var(--tab-zle); }
.tab-wiersz.rynek.w-dol .ile { color: var(--tab-zle); }
.tab-lista.zwarta .tab-wiersz .co { font-size: calc(var(--u) * 4.2); }
.tab-lista.zwarta .tab-wiersz .ile { font-size: calc(var(--u) * 5.6); }
/* Poprawki po przegladzie etapu 2. */
.tab-ranking.stara { opacity: .55; }
.tab-tabela td.nazwa { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.tab-tabela td.nazwa small { display: block; margin-top: 4px; font-size: calc(var(--u) * 2.6);
  font-weight: 600; color: var(--tab-uwaga); }
.tab-tabela tr.cicha td { color: var(--tab-przygas); }
.tab-wiadomosc { min-width: 0; }
.tab-wiadomosc b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-komunikat { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.tab-komunikat-tekst { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; }

/* DMeter: wykres trendu zwijany, serie wlaczane i wylaczane z legendy. */
.naglowek-trendu { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 14px; }
.naglowek-trendu .podpis-paska { margin: 0; }
.legenda-przelaczana button.chip-lgrp { font: inherit; cursor: pointer; }
.legenda-przelaczana button.chip-lgrp.wylaczona { opacity: .45; }
.legenda-przelaczana button.chip-lgrp.wylaczona span { text-decoration: line-through; }
.legenda-przelaczana .pokaz-wszystkie { display: inline-block; width: auto; min-height: 32px;
  margin: 0; padding: 0 8px; }
.legenda-przelaczana button.chip-lgrp { background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; color: var(--text); align-items: center; }
.legenda-przelaczana button.chip-lgrp:hover { border-color: var(--accent); }

/* Cennik: koncowa cena mleka danej doby rozpisana na wzor. */
.cena-koncowa { display: flex; flex-direction: column; gap: 8px; }
.naglowek-ceny { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; }
.naglowek-ceny h5 { margin: 0; font-size: .95rem; }
.cena-koncowa .drobne { margin: 0; font-size: .8rem; color: var(--dim); }
.cena-koncowa .drobne.ostrzezenie { color: var(--warn); }
.tabela-ceny { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela-ceny td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela-ceny td.wzor { color: var(--dim); }
.tabela-ceny td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-ceny tr.pusty td { color: var(--dim); }
.tabela-ceny tr.suma td { font-weight: 700; border-bottom: none; }
.cena-koncowa-wynik { margin: 4px 0 0; font-size: 1rem; }
.cena-koncowa-wynik b { font-size: 1.15rem; color: var(--accent); white-space: nowrap; }
@media (max-width: 560px) {
  .tabela-ceny tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--line); }
  .tabela-ceny tr.suma { border-bottom: none; }
  .tabela-ceny td { border-bottom: none; }
  .tabela-ceny td.num { grid-column: 2; grid-row: 1; }
  .tabela-ceny td.wzor { grid-column: 1 / -1; grid-row: 2; padding-top: 0; } }

/* ── Konta: lista, karta osoby, wybór roli i zakresu ferm ───────────────── */
.lista-kont td .znacznik { margin-top: 3px; }
.lista-kont td.akcje .powod-blokady { display: block; max-width: 220px; white-space: normal;
  text-align: right; margin-top: 4px; }
.lista-kont td.akcje button.zablokowany { color: var(--dim); }
.plakietka-dodatku { font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); }
tr.karta-osoby-wiersz > td { background: var(--surface-2); padding: 14px; }
.karta-osoby { display: grid; gap: 14px; }
.sekcja-karty { background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; }
.sekcja-karty h4 { margin: 0 0 10px; font-size: 15px; }
.wybor-roli, .wybor-zakresu { display: grid; gap: 8px; margin-bottom: 14px; }
.wybor-roli > b, .wybor-zakresu > b { font-size: 13px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--dim); }
.karta-roli, .opcja-zakresu { display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer;
  background: var(--surface); }
.karta-roli:hover, .opcja-zakresu:hover { border-color: var(--accent); }
.karta-roli:has(input:checked), .opcja-zakresu:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); }
.karta-roli input, .opcja-zakresu input { margin-top: 3px; accent-color: var(--accent);
  width: 16px; height: 16px; flex: none; }
.karta-roli > div, .opcja-zakresu > div { display: grid; gap: 2px; min-width: 0; }
.karta-roli.niedostepna { cursor: not-allowed; opacity: .7; }
.karta-roli.niedostepna:hover { border-color: var(--line); }
.co-moze summary { cursor: pointer; font-size: 13px; color: var(--accent); margin-top: 4px; }
.co-moze .drobne, .co-moze .grupa-uprawnien { display: block; margin-top: 4px; font-size: 13px;
  color: var(--text); line-height: 1.5; }
.lista-ferm-zakresu { margin-left: 26px; }
.podsumowanie-zmian { border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; font-size: 14px; }
.podsumowanie-zmian ul { margin: 6px 0 0; padding-left: 18px; }
.podsumowanie-zmian li.ostrzezenie, .drobne.ostrzezenie { color: var(--warn); }
.wiersz-dodatku { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 8px 0; border-top: 1px solid var(--line); }
.wiersz-dodatku > div { display: grid; gap: 2px; }
.pasek-formularza.zawijany { flex-wrap: wrap; }
.historia-konta { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.wpis-historii { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.wpis-historii .kiedy { color: var(--dim); font-variant-numeric: tabular-nums; }
.wpis-historii .drobne { flex-basis: 100%; }
.opis-dostepu { display: grid; gap: 4px; font-size: 14px; }
.przewijak.przestarzala { opacity: .55; }

/* ── AIOTEK: klient w nagłówku, lista klientów, role ────────────────────── */
#wybor-klienta { max-width: 220px; }
.pasek-klienta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 24px; background: var(--warn-soft); color: var(--text); font-size: 14px;
  border-bottom: 1px solid var(--line); }
.pasek-klienta .btn-tekstowy { margin-left: auto; }
.karta-klienta.wybrany { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.karta-klienta .plakietki { margin-top: 8px; }
.karta-klienta .pasek-formularza, .karta-roli-katalog .pasek-formularza { flex-wrap: wrap; }
.karta-klienta h4 { margin: 0; }
.karta-roli-katalog .drobne { display: block; }
.stan-identyfikatora { display: block; margin: -4px 0 10px; }
.stan-identyfikatora.ok { color: var(--good); }
.stan-identyfikatora.blad { color: var(--bad); }
@media (max-width: 640px) {
  .pasek-klienta { padding: 6px 12px; }
  #wybor-klienta { max-width: 140px; }
  tr.karta-osoby-wiersz > td { padding: 8px; }
}

.wybor-roli { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wybor-roli > b, .wybor-roli > p { grid-column: 1 / -1; }
.karta-roli { padding: 8px 10px; }
.sekcja-karty .pasek-formularza button:not(.btn-glowny) {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.sekcja-karty .pasek-formularza button:not(.btn-glowny):hover { border-color: var(--accent);
  color: var(--accent); }
.sekcja-karty .pasek-formularza button.groznie:hover { border-color: var(--bad); color: var(--bad); }
.wiersz-dodatku button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; flex: none; }
.wiersz-dodatku button.groznie:hover { border-color: var(--bad); color: var(--bad); }
.formularz select { height: 46px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit;
  font-size: 15px; width: 100%; }

@media (max-width: 760px) {
  /* Karta osoby nie może rozciągać się do szerokości przewijanej tabeli — dostaje
     dokładnie widoczną szerokość i trzyma się lewej krawędzi. */
  table.lista-kont { container-type: inline-size; }
  tr.karta-osoby-wiersz > td { padding: 8px; }
  .karta-osoby { position: sticky; left: 8px; width: calc(100cqw - 16px); }
  .wybor-roli { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lista-kont td.akcje .powod-blokady { display: none; }
}