/* ==========================================================================
   PANEL DIETETYKA — wspólny wygląd i responsywność.

   Argon jest z 2019 roku i był robiony pod jeden rozmiar: szeroki monitor.
   Ten arkusz robi dwie rzeczy naraz:

     1. podnosi wygląd (karty, listy pozycji, puste stany, formularze),
        żeby ekrany nie wyglądały jak surowy szkielet;
     2. **układa panel na wąskim ekranie** — telefon i tablet. Właściciel
        16.08.2026: „stwórz responsywność do tego, bo może zrobimy potem
        PWA dla dietetyków, bez sklepów".

   ZAKRES: wyłącznie panel dietetyka (`body:not(.patient)`). Ekrany
   pacjenta mają własną warstwę mobilną, zrobioną 16.08 — dokładanie się
   do nich stąd rozjechałoby jedno albo drugie.

   ŁADOWANY GLOBALNIE z `base.html`, po `argon.css`. Nie wpina się go już
   ekran po ekranie: nowy ekran dostaje ten wygląd bez pamiętania o niczym.
   ========================================================================== */

/* --- kolor ----------------------------------------------------------
   Motyw jechał na turkusie, który właściciel rozpoznał jako „systemowy
   django" — i słusznie, bo to dokładnie ten odcień. Panel dostaje własny,
   chłodny błękit: ciemniejszy na nagłówku, jaśniejszy na przyciskach.
   Zmieniamy TYLKO warstwę koloru, nie motyw — dlatego nadpisania, a nie
   grzebanie w `argon.css` (ten plik jest z paczki i wraca przy każdej
   aktualizacji). */
body:not(.patient) {
  /* KOLORY Z LOGO „Przyjazny Dietetyk" (polecenie właściciela 2026-08-16:
     „kolor jak nasze logo"). Ze strony przyjazny-dietetyk.pl: błękit
     napisu i sygnetu oraz pomarańcz przycisku „Umów wizytę".

     Wcześniejsze podejścia leciały w ślepo: turkus motywu wyglądał jak
     panel Django, a mocny kobalt — słowami właściciela — „jak typowy AI".
     Kolor firmy jest jedyną odpowiedzią, której nie trzeba zgadywać.

     Odcienie zdjęte ze strony na oko; gdy będzie księga znaku z dokładnymi
     numerami, poprawia się je TUTAJ — nigdzie indziej ich nie ma. */
  --panel-blekit: #1e88d0;
  --panel-blekit-ciemny: #16679f;
  --panel-blekit-jasny: #4aa9e4;
  --panel-blekit-tlo: #e8f4fc;
  /* pomarańcz z logo świadomie NIE jest używany w panelu
     (decyzja właściciela 2026-08-16) */
  --panel-atrament: #1e293b;
}
/* Nagłówek ma wyglądać JAK NIEBO (polecenie właściciela 2026-08-16):
   ciemniejszy przy lewej krawędzi, gdzie leży tytuł — bo biały napis musi
   być czytelny — i rozjaśniający się w prawo, ku górnemu błękitowi. */
body:not(.patient) .bg-primary,
body:not(.patient) .bg-gradient-primary {
  background: linear-gradient(115deg,
              var(--panel-blekit-ciemny) 0%,
              var(--panel-blekit) 45%,
              var(--panel-blekit-jasny) 78%,
              #8fcbee 100%) !important;
}
body:not(.patient) .btn-primary {
  background-color: var(--panel-blekit);
  border-color: var(--panel-blekit);
  box-shadow: none;
}
body:not(.patient) .btn-primary:hover,
body:not(.patient) .btn-primary:focus,
body:not(.patient) .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--panel-blekit-ciemny);
  border-color: var(--panel-blekit-ciemny);
}
body:not(.patient) .btn-outline-primary {
  color: var(--panel-blekit);
  border-color: var(--panel-blekit);
}
body:not(.patient) .btn-outline-primary:hover {
  background-color: var(--panel-blekit);
  border-color: var(--panel-blekit);
  color: #fff;
}
body:not(.patient) .text-primary { color: var(--panel-blekit) !important; }
body:not(.patient) .badge-primary { background-color: var(--panel-blekit); }
/* `a:not(.btn)` — BEZ tego wyłączenia napisy znikały z przycisków:
   przyciski w panelu to często odnośniki, a ta reguła jest mocniejsza niż
   `.btn-primary` i przemalowywała biały tekst na błękit, czyli na kolor
   tła przycisku (zgłoszenie właściciela 2026-08-16: puste niebieskie
   prostokąty zamiast „Otwórz"). */
body:not(.patient) a:not(.btn) { color: var(--panel-blekit); }
body:not(.patient) a:not(.btn):hover { color: var(--panel-blekit-ciemny); }
body:not(.patient) .form-control:focus {
  border-color: var(--panel-blekit-jasny);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .15);
}


/* --- główny przycisk ekranu -----------------------------------------
   Na stronie firmowej najważniejsze kliknięcie jest pomarańczowe.
   W panelu pomarańcz odpadł decyzją właściciela (2026-08-16: „bez
   pomarańczu") — zostaje sam błękit marki, a „ten najważniejszy"
   przycisk wyróżnia się pełnym wypełnieniem wśród obrysowanych.
   Klasa zostaje, żeby dało się to zmienić w JEDNYM miejscu. */
body:not(.patient) .btn-akcja {
  background-color: var(--panel-blekit);
  border-color: var(--panel-blekit);
  color: #fff;
}
body:not(.patient) .btn-akcja:hover,
body:not(.patient) .btn-akcja:focus {
  background-color: var(--panel-blekit-ciemny);
  border-color: var(--panel-blekit-ciemny);
  color: #fff;
}

/* --- karty ---------------------------------------------------------- */
body:not(.patient) .card {
  border: 0;
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(50, 50, 93, .08), 0 4px 12px rgba(0, 0, 0, .04);
}

body:not(.patient) .karta-polki {
  transition: transform .12s ease, box-shadow .12s ease;
  height: calc(100% - 1.5rem);
  display: flex;
  flex-direction: column;
}
body:not(.patient) .karta-polki:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(50, 50, 93, .12), 0 8px 24px rgba(0, 0, 0, .08);
}
body:not(.patient) .karta-polki .card-footer { margin-top: auto; }
body:not(.patient) .nazwa-polki {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #32325d;
  line-height: 1.3;
}
body:not(.patient) .nazwa-polki:hover { color: var(--panel-blekit); }
body:not(.patient) .licznik-polki { font-size: .8125rem; color: #8898aa; }

/* --- lista pozycji zamiast szerokiej tabeli --------------------------
   Tabela z czterema krótkimi wartościami rozjeżdżała się na całą
   szerokość ekranu: nazwa przy lewej krawędzi, „33" gdzieś w środku,
   przyciski przy prawej. Wiersz jest teraz kartą: nazwa i jej dane obok
   siebie, akcje przy prawej krawędzi. Na wąskim ekranie akcje schodzą
   pod spód, zamiast wypychać stronę w bok. */
body:not(.patient) .pozycja {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid #f1f4f8;
  transition: background .1s ease;
}
body:not(.patient) .pozycja:last-child { border-bottom: 0; }
body:not(.patient) .pozycja:hover { background: #f8f9fe; }
body:not(.patient) .pozycja-ikona {
  width: 44px;
  height: 44px;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-blekit-tlo);
  color: var(--panel-blekit);
  flex: 0 0 auto;
  font-size: 1.125rem;
}
body:not(.patient) .pozycja-ikona.wspolna { background: #fef0f4; color: #f5365c; }
body:not(.patient) .pozycja-tresc { flex: 1 1 auto; min-width: 0; }
body:not(.patient) .pozycja-nazwa {
  display: block;
  font-weight: 600;
  color: #32325d;
  font-size: .9375rem;
  line-height: 1.35;
}
body:not(.patient) a.pozycja-nazwa:hover { color: var(--panel-blekit); }
body:not(.patient) .pozycja-meta {
  font-size: .8125rem;
  color: #8898aa;
  margin-top: .125rem;
}
body:not(.patient) .pozycja-meta .kropka { margin: 0 .4rem; opacity: .5; }
body:not(.patient) .pozycja-akcje {
  flex: 0 0 auto;
  display: flex;
  gap: .375rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --- kolumna dat w wierszu (lista pacjentów) -------------------------
   Dwie daty obok siebie, każda podpisana. W tabeli zajmowały dwie pełne
   kolumny na środku ekranu i i tak trzeba było wodzić wzrokiem. */
body:not(.patient) .pozycja-daty {
  flex: 0 0 auto;
  display: flex;
  gap: 1.5rem;
  margin-right: .5rem;
}
body:not(.patient) .pozycja-daty .etykieta {
  display: block;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #a0aec0;
}
body:not(.patient) .pozycja-daty .wartosc {
  font-size: .8125rem;
  color: #4a5568;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  body:not(.patient) .pozycja-daty {
    width: 100%;
    padding-left: 3.5rem;
    margin-top: .5rem;
  }
}

/* --- tabele --------------------------------------------------------- */
body:not(.patient) thead th {
  font-size: .6875rem;
  letter-spacing: .04em;
  color: #8898aa;
  background: #f7fafc;
  border-bottom: 1px solid #e9ecef !important;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
body:not(.patient) tbody tr { transition: background .1s ease; }
body:not(.patient) .table-hover tbody tr:hover { background: #f8f9fe; }
body:not(.patient) .drobne { font-size: .8125rem; color: #8898aa; }
body:not(.patient) .liczba { font-weight: 600; color: #32325d; white-space: nowrap; }

/* --- pusty stan ----------------------------------------------------- */
body:not(.patient) .pusto {
  text-align: center;
  padding: 3rem 1.5rem;
  color: #8898aa;
}
body:not(.patient) .pusto i {
  font-size: 2.5rem;
  color: #dee2e6;
  display: block;
  margin-bottom: 1rem;
}

/* --- formularze ----------------------------------------------------- */
body:not(.patient) .ekran-panelu form label,
body:not(.patient) .formularz-siatka label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #8898aa;
}
body:not(.patient) .ekran-panelu form .form-control,
body:not(.patient) .formularz-siatka .form-control {
  border-radius: .5rem;
  padding: .625rem .875rem;
  height: auto;
}
body:not(.patient) .ekran-panelu form .btn { border-radius: .5rem; }


/* Pola opisowe (cel wizyty, choroby, leki, uwagi) w dwóch kolumnach
   i o rozsądnej wysokości. Każde miało własną kartę na całą szerokość
   ekranu — ramka na 1700 px i na pół ekranu wysokości. */
body:not(.patient) .siatka-szeroka {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
body:not(.patient) form textarea.form-control {
  min-height: 6rem;
  height: 6rem;
  resize: vertical;
}

/* --- wyliczenia PPM/CPM ---------------------------------------------
   Dwa wzory obok siebie, wybrany podświetlony. Dietetyk ma widzieć
   różnicę między nimi, a nie ufać jednej liczbie bez kontekstu. */
body:not(.patient) .wyliczenia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
body:not(.patient) .wyliczenie {
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  padding: .75rem 1rem;
}
body:not(.patient) .wyliczenie.wybrany {
  border-color: var(--panel-blekit);
  background: var(--panel-blekit-tlo);
}
body:not(.patient) .wyliczenie .etykieta {
  display: block;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #8898aa;
  margin-bottom: .25rem;
}
body:not(.patient) .wyliczenie .wynik {
  display: block;
  font-size: .875rem;
  color: #32325d;
}

/* --- siatka pól formularza -------------------------------------------
   Formularz wizyty miał trzydzieści pól, każde na całą szerokość karty:
   olbrzymie napisy, olbrzymie ramki i kilometr przewijania (zgłoszenie
   właściciela 2026-08-16). Pola układają się teraz w kolumny szerokie na
   tyle, na ile pozwala karta — dwie, trzy albo jedna na telefonie. Bez
   przepisywania każdego pola w szablonie z osobna. */
body:not(.patient) .formularz-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 1.25rem;
}
body:not(.patient) .formularz-siatka .form-group { margin-bottom: 1rem; }
body:not(.patient) .formularz-siatka label { margin-bottom: .25rem; }

/* ==========================================================================
   RESPONSYWNOŚĆ PANELU
   ========================================================================== */

/* TABELE W CAŁYM SYSTEMIE BYŁY ZA SZEROKIE i to nie był przypadek:
   Argon ustawia `white-space: nowrap` na KAŻDEJ komórce, więc jeden długi
   adres e-mail rozpychał tabelę poza ekran i ostatnia kolumna (np. „konto"
   na liście pacjentów) po prostu uciekała za krawędź. Komórki mogą się
   łamać; kolumny, które muszą zostać w jednej linii (daty, kwoty), i tak
   mają w szablonach `text-nowrap`, a ta klasa ma `!important` i wygrywa.

   Padding też zjechany z 1 rem na 1 rem/0,75 rem w pionie — przy dziesięciu
   wierszach to cała ekranowa wysokość różnicy.

   ŁAMANIE: `break-word`, NIE `anywhere` (poprawka 2026-08-17, zgłoszenie
   właściciela ze zrzutami). Różnica nie jest kosmetyczna: `anywhere`
   pozwala przeglądarce liczyć minimalną szerokość kolumny na JEDNĄ LITERĘ,
   więc przy tabeli z dwudziestoma kolumnami (wartości odżywcze posiłku)
   albo przy wąskiej kolumnie „typ posiłku" w kalendarzu nagłówki układały
   się pionowo, litera pod literą, i strona wyglądała na rozsypaną.
   `break-word` łamie długie słowa dopiero wtedy, gdy nie mieszczą się
   w wierszu, ale minimalna szerokość kolumny zostaje szerokością
   najdłuższego słowa — czyli długi e-mail nadal się zawija, a szeroka
   tabela zaczyna się przewijać w poziomie (`.table-responsive`) zamiast
   stawiać litery w słupku. */
body:not(.patient) .table th,
body:not(.patient) .table td {
  white-space: normal;
  overflow-wrap: break-word;
  padding: .75rem 1rem;
  vertical-align: middle;
}
body:not(.patient) .table-responsive { overflow-x: auto; }

/* KALENDARZ JADŁOSPISU — kolumna z nazwami typów posiłku.
   `width: 1%` z zakazem łamania to stary sposób na kolumnę „dokładnie tak
   szeroką, jak jej najdłuższy napis": resztę szerokości biorą dni. Bez
   tego przeglądarka ściskała kolumnę do kilkunastu pikseli i „przekąska
   II" schodziła po jednej literze na linię. */
body:not(.patient) table.menu-calendar th.kolumna-typow,
body:not(.patient) table.menu-calendar td.kolumna-typow {
  width: 1%;
  white-space: nowrap;
}
body:not(.patient) table.menu-calendar td,
body:not(.patient) table.menu-calendar th { padding: .5rem; }

/* KAFELEK MA SWOJĄ SZEROKOŚĆ, NIE SZEROKOŚĆ KOLUMNY.
   Tabela zajmuje całą stronę, więc przy trzydniowej diecie na trzy
   kolumny przypadało po 460 px i nazwa posiłku rozjeżdżała się przez pół
   ekranu, a pasek makro ciągnął się jak linia (zgłoszenie właściciela
   2026-08-17: „zły widok"). Treść kafelka trzymamy w rozsądnej szerokości
   karty niezależnie od tego, ile dni ma dieta; siatka zostaje siatką. */
body:not(.patient) table.menu-calendar .kafelek-posilku {
  max-width: 260px;
}
body:not(.patient) .dropdown-menu { max-width: calc(100vw - 2rem); }

/* ==========================================================================
   KARTA WIZYTY — sylwetka ze składem ciała
   ==========================================================================
   Ta sama karta służy dietetykowi i pacjentowi (`dieticians/visit_detail.html`
   z `patient_view`), więc musi działać także na telefonie — pacjent otwiera
   ją głównie tam.

   Podpisy przy sylwetce („51,5% wody") są ustawione na sztywno w pikselach:
   `position: absolute; left: 205px`. Przy 375 px szerokości wychodziły poza
   kartę i nachodziły na siebie. Na wąskim ekranie zdejmujemy je z pozycji
   bezwzględnych i układamy w czytelną listę pod rysunkiem — z kropką
   w kolorze odpowiadającym strefie na sylwetce. */
.body-percent p { margin-bottom: 0; }

/* SKŁAD CIAŁA: sylwetka + słupki (2026-08-17).
   Sylwetka zostaje — pokazuje, GDZIE co jest, i tego żaden słupek nie
   zastąpi. Liczby idą obok, w tych samych pionowych słupkach, którymi
   panel rysuje makro: jeden język graficzny zamiast podpisów wiszących
   na sztywnych pikselach. */
.sylwetka-sklad {
  display: flex;
  align-items: center;        /* rysunek wyśrodkowany względem słupków */
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.sylwetka-sklad .sylwetka {
  /* Rysunek przycięty do wysokości słupków — przy oryginalnych 428 px
     karta była wieżą, a słupki wyglądały przy nim jak przypis.
     Podniesiony do 230 px razem z torami (2026-08-21), żeby sylwetka
     i wykres były tej samej wagi na ekranie. */
  height: 230px;
  width: auto;
  flex: 0 0 auto;
}
/* KOLUMNY RÓWNANE DO GÓRY, NIE DO DOŁU (2026-08-25).
   Stało tu `align-items: flex-end`, czyli kolumny stały na wspólnej
   podłodze — a rosły od dołu do góry o różną wysokość, bo podpis „woda"
   zajmuje jeden wiersz, „tkanka tłuszczowa" dwa. Tory i liczby procentowe
   rozjeżdżały się wtedy pionowo o pół wiersza i wykres wyglądał na
   krzywy (zgłoszenie właściciela: „wyrównaj, te wykresy są nierówne").

   Teraz wspólna jest GÓRA: liczba procentowa, tor i podpis zaczynają się
   u wszystkich na tej samej wysokości, a stały tor (190 px) i stała
   wysokość podpisu (`.sklad-nazwa`) trzymają w jednej linii także
   kilogramy pod spodem. */
.sklad-slupki {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex: 1 1 200px;
  max-width: 320px;
}
/* Kolumna WĘŻSZA niż tor był wcześniej: słupek ma wyglądać jak słupek,
   a nie jak kwadratowe pudełko. Przy 90 px szerokości i 140 px wysokości
   wychodził prawie kwadrat (zgłoszenie właściciela: „proporcje lepsze").

   Górne 88 px zamiast 76 px (2026-08-25): po zdjęciu słupka mięśni są
   trzy kolumny, a przy 76 px „tłuszczowa" łamała się w środku wyrazu
   („tłuszczow / a"). Szerzej — podpis mieści się w dwóch wierszach,
   na które jest miejsce. */
.sklad-kolumna { flex: 1 1 0; text-align: center; min-width: 52px; max-width: 88px; }
.sklad-procent {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 3px;
  line-height: 1;
}
/* WYSOKOŚĆ TORU TRZYMA WYŁĄCZNIE TEN ARKUSZ (2026-08-21).
   Do tego dnia słupek liczył się w Pythonie na tor wysoki na 110 px,
   a tor miał tutaj 140 px — słupek nie dochodził do góry NIGDY: 100%
   rysowało się jako 79%. Dwie liczby opisujące jedną geometrię, w dwóch
   plikach. Teraz szablon podaje sam procent, a piksele są tylko tu. */
.sklad-tor {
  height: 190px;
  background: #f1f3f9;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.sklad-slupek {
  width: 100%;
  border-radius: 10px;
  min-height: 4px;          /* 1% ma być widoczne, a nie zniknąć */
  transition: height .3s ease;
}
.sklad-nazwa {
  font-size: 12px;
  color: #525f7f;
  margin-top: 6px;
  line-height: 1.25;
  min-height: 2.5em;        /* dwuwierszowa „tkanka tłuszczowa" nie
                               przesuwa sąsiednich podpisów */
}
.sklad-kg { font-size: 12px; color: #8898aa; }

/* POMIARY CIAŁA: rysunek mówi GDZIE, lista obok ILE. */
.pomiary-uklad { display: flex; align-items: center; gap: 1rem; }
.pomiary-uklad .sylwetka-pomiary {
  height: 260px;
  width: auto;
  flex: 0 0 auto;
  margin: 1rem 0 1rem 1rem;
}
.pomiary-uklad .list-group { min-width: 0; }

/* WSKAŹNIKI: dwie liczby obok siebie zamiast dwóch pustych kart. */
.wskazniki { display: flex; gap: 1rem; flex-wrap: wrap; }
.wskaznik {
  flex: 1 1 130px;
  text-align: center;
  background: #f8f9fe;
  border-radius: .75rem;
  padding: 1rem .75rem;
}
.wskaznik-liczba {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--panel-blekit, #1e88d0);
}
.wskaznik-nazwa { font-size: 12px; color: #8898aa; margin-top: .25rem; }

/* ==========================================================================
   ODŚWIEŻENIE WYGLĄDU: PASEK BOCZNY I KAFLE LICZB (2026-08-27)

   Polecenie właściciela: „lewy panel — większe ikony i trochę
   nowocześniejsze, logo po lewej zwiększ, liczba poradni / liczba wizyt
   u góry trochę ciekawiej, bo to stare widoki".

   Argon jest z 2019 roku i rysuje pasek boczny jak zwykłą listę odnośników:
   znak wielkości .9375 rem wtopiony w napis, brak jakiejkolwiek reakcji na
   najechanie, logo nie wyższe niż pozycja menu. Kafle liczb są wprost
   z szablonu demo — okrągła ikona w mocnym gradiencie i cień z epoki.

   ZMIENIAMY WYŁĄCZNIE WARSTWĘ GRAFICZNĄ. Żadna pozycja menu nie znika, nie
   zmienia nazwy ani adresu; kafle pokazują te same trzy liczby co
   przedtem, z tymi samymi podpisami. Wszystko siedzi w TYM arkuszu —
   `argon.css` jest z paczki i wraca przy każdej aktualizacji motywu.
   ========================================================================== */

/* --- logo w pasku bocznym -------------------------------------------
   Sygnet „SELECT DIET" ograniczał `argon.css` do 2 rem wysokości — obok
   trzech kresek przełącznika ginął zupełnie. `.sidenav-header` ma
   w Argonie sztywne 78 px, więc samo powiększenie obrazka nic by nie dało:
   logo zostałoby przycięte u dołu. Podnosimy jedno i drugie. */
body:not(.patient) .sidenav-header { height: 104px; }
body:not(.patient) .sidenav .navbar-brand { padding: 1.25rem 1.5rem; }
body:not(.patient) .navbar-vertical .navbar-brand-img,
body:not(.patient) .navbar-vertical .navbar-brand > img { max-height: 3.5rem; }

/* --- pozycje menu ---------------------------------------------------
   Ikona dostaje własny kafelek (2,25 rem kwadrat z zaokrągleniem), a sam
   znak rośnie z .9375 rem do 1.125 rem — to jest owo „większe ikony".
   Cała pozycja staje się pigułką: na najechanie podświetla się wiersz
   z kafelkiem, a nie sam napis.

   07.09.2026: kafelki są WYRAŹNIEJ KWADRATOWE („te ramki bardziej
   w kwadracie") — .375 rem zamiast .625 rem, a wiersz .5 rem zamiast
   .75 rem. Kolor niosą dalej klasy narzędziowe Argona przy samych
   znakach w `sidebar.html`, kafelek zostaje neutralny, żeby żadnego
   z nich nie zagłuszyć. Zdjęty jest tylko `text-pink` — bladoróżowy
   na jasnoszarym tle ledwo było widać. */
body:not(.patient) .sidenav .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .125rem .75rem;
  padding: .5rem .625rem;
  border-radius: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: #4c5b6e;
  transition: background-color .12s ease, color .12s ease;
}
body:not(.patient) .sidenav .navbar-nav .nav-link > i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  font-size: 1.125rem;
  line-height: 1;
  border-radius: .375rem;
  background: #f1f5fa;
  transition: background-color .12s ease, color .12s ease, transform .12s ease;
}
/* Pozycje zagnieżdżone (np. „Wizyty" pod nazwiskiem pacjenta) mają być
   wyraźnie młodsze rangą — mniejszy kafelek, mniejszy znak. */
body:not(.patient) .sidenav .navbar-nav .nav-sm .nav-link > i {
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  font-size: .9375rem;
  border-radius: .3125rem;
}
body:not(.patient) .sidenav .navbar-nav .nav-link:hover {
  background: var(--panel-blekit-tlo);
  color: var(--panel-blekit-ciemny);
}
/* `!important` nie z rozpędu: kolor znaku niosą klasy narzędziowe
   Bootstrapa (`text-pink` i spółka), a te same mają `!important`. Bez tego
   biel na wypełnionym kafelku by nie weszła. */
body:not(.patient) .sidenav .navbar-nav .nav-link:hover > i {
  background: var(--panel-blekit);
  color: #fff !important;
  transform: translateY(-1px);
}
/* Pasek zwinięty do 62 px pokazuje same kafelki — bez tego stałyby przy
   lewej krawędzi, bo napis jest wtedy schowany (`display: none`). */
body:not(.patient).g-sidenav-hidden:not(.g-sidenav-show) .sidenav .navbar-nav .nav-link,
body:not(.patient).g-sidenav-hide .sidenav .navbar-nav .nav-link {
  justify-content: center;
  margin-left: .375rem;
  margin-right: .375rem;
}
/* Kreski działowe: cieńsze i wcięte na szerokość pigułek, żeby nie cięły
   paska od krawędzi do krawędzi. */
body:not(.patient) .sidenav hr {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
  border-top-color: #edf1f6;
}

/* --- STOPKA PASKA: „SelectDiet 2026" --------------------------------
   Polecenie właściciela 07.09.2026: „na dole selectdiet 2026".

   Leży POZA `scrollbar-inner`, więc `position: absolute` łapie się
   `.sidenav` (motyw ustawia mu `position: fixed`) i napis trzyma się
   dolnej krawędzi paska, a nie końca listy pozycji. Menu może rosnąć
   i przewijać się pod nim.

   MIEJSCE POD STOPKĘ ODDAJE `.sidenav`, NIE `.scrollbar-inner`
   (zgłoszenie właściciela 07.09.2026: „lewy panel brak widoczności" —
   „Raport wizyt" chował się za napisem, a pasek zaczynał się przewijać
   i ucinał logo u góry).

   Wtyczka przewijania (`jquery.scrollbar`) OPAKOWUJE `.scrollbar-inner`
   i własnym `padding: 0 !important` kasuje wszystko, co się temu
   elementowi da. Odstęp musi więc siedzieć na samym `<nav>`: wysokość
   przewijanej części liczy się od jego pola treści, więc powiększone
   `padding-bottom` skraca listę dokładnie o wysokość stopki — i ostatnia
   pozycja kończy się nad nią, na każdym ekranie panelu. */
body:not(.patient) .sidenav { padding-bottom: 3.5rem; }
body:not(.patient) .stopka-paska {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3rem;
  padding: .875rem .75rem;
  border-top: 1px solid #edf1f6;
  background: #fff;
  font-size: .75rem;
  line-height: 1;
  white-space: nowrap;
}
body:not(.patient) .stopka-paska-nazwa {
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--panel-blekit-ciemny);
}
body:not(.patient) .stopka-paska-rok { color: #8a97a8; }
/* W zwiniętej szynie (62 px) zostaje sam rok — „SelectDiet 2026" złamałoby
   się na dwa wiersze i podniosło stopkę na ostatnią pozycję menu. Te same
   dwa stany co przy napisach pozycji (`nav-link-text`). */
body:not(.patient).g-sidenav-hidden:not(.g-sidenav-show) .stopka-paska-nazwa,
body:not(.patient).g-sidenav-hide .stopka-paska-nazwa {
  display: none;
}

/* Druga połowa poprawki „pasek nie rozwija się od najechania" — sam
   `argon.css` rozsuwa go regułą `.sidenav:hover { max-width: 250px }`.
   Bez tego nadpisania szyna z ikonami i tak rozjeżdżałaby się pod myszką
   do 250 px, tyle że BEZ napisów (te chowa `g-sidenav-hidden`) — czyli
   pusty biały pas na treści. Stan rozwinięty trzyma
   `.g-sidenav-pinned .sidenav`, który ma `!important` i wygrywa. */
@media (min-width: 1200px) {
  body:not(.patient) .sidenav:hover { max-width: 62px; }
}

/* --- PRZYCISK POWROTU MUSI BYĆ WIDOCZNY W ZWINIĘTYM PASKU -----------
   Zgłoszenie właściciela 2026-08-27: „nie ma przycisku do powrotu".

   Trzy kreski stoją w nagłówku paska za `ml-auto`, a `argon.css` daje im
   na dużym ekranie `padding: 1.5rem`. Razem z 18-pikselowym środkiem
   wychodzi z tego 66 px — WIĘCEJ niż całe 62 px zwiniętej szyny. Przycisk
   był więc wypychany poza krawędź i po prostu go nie było widać.

   Dopóki najechanie rozsuwało pasek, nikt tego nie zauważał: wystarczyło
   nasunąć mysz, pasek robił się szeroki i kreski wracały. Odkąd o
   szerokości decyduje wyłącznie ten przycisk, jego zniknięcie zamykało
   drogę powrotną — zwinięty pasek zostawał zwinięty na dobre.

   W szynie: kreski na środku, mniejszy oddech, żeby się zmieściły. */
@media (min-width: 1200px) {
  body:not(.patient).g-sidenav-hidden .sidenav .sidenav-header,
  body:not(.patient).g-sidenav-hide .sidenav .sidenav-header {
    justify-content: center;
  }
  body:not(.patient).g-sidenav-hidden .sidenav .sidenav-header .ml-auto,
  body:not(.patient).g-sidenav-hide .sidenav .sidenav-header .ml-auto {
    margin-left: 0 !important;
  }
  body:not(.patient).g-sidenav-hidden .sidenav .sidenav-toggler,
  body:not(.patient).g-sidenav-hide .sidenav .sidenav-toggler {
    padding: .75rem;
  }
}

/* --- napis nad kaflami ----------------------------------------------
   Polecenie właściciela 07.09.2026: „większy tekst", „i trochę większy
   napis". Tytuł ekranu chodził w `h2` motywu (1,25 rem) — na szerokim
   błękitnym pasie wyglądał jak podpis, a nie jak nagłówek. Linijka pod
   nim była tego samego rozmiaru co drobny dopisek niżej, więc zdanie,
   które ma powiedzieć, po co tu jesteś, niczym się nie wyróżniało.

   Rozmiar siedzi w osobnej klasie, nie w `h1`: powiększenie dotyczy TEGO
   nagłówka, a nie każdego `h2` w panelu. Na telefonie schodzi z powrotem —
   32 px na 360-pikselowym ekranie łamałoby „Poradnia Golub-Dobrzyń"
   na trzy wiersze. */
body:not(.patient) .naglowek-ekranu {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
}
body:not(.patient) .naglowek-ekranu-opis {
  font-size: 1.0625rem;
  line-height: 1.45;
}
@media (max-width: 767.98px) {
  body:not(.patient) .naglowek-ekranu { font-size: 1.5rem; }
  body:not(.patient) .naglowek-ekranu-opis { font-size: .9375rem; }
}

/* --- kafle liczb na górze ekranu startowego --------------------------
   Trzy liczby (poradnie, wizyty, pacjenci) stoją na tle nagłówka i to one
   witają dietetyka po zalogowaniu. Były płaskim demem Argona.

   Co się zmienia: liczba urosła i jest teraz najmocniejszym elementem
   karty, podpis zszedł do roli etykiety (rozstrzelony wersalik), okrągła
   ikona zamieniła się w zaokrąglony kwadrat z miękkim cieniem W SWOIM
   kolorze, a w prawym górnym rogu leży ledwo widoczna poświata. Karta
   reaguje na najechanie tak samo jak kafle półek niżej — panel ma się
   zachowywać jednakowo wszędzie. */
/* Kwadrat, nie listwa (polecenie właściciela 07.09.2026: „liczba poradni
   kwadrat, liczba wizyt kwadrat, liczba pacjentów kwadrat"). `aspect-ratio`
   trzyma proporcję na każdej szerokości okna — wysokość podana w pikselach
   rozjeżdżałaby się przy każdym innym monitorze. `min-height` to zapasowa
   droga dla przeglądarki, która `aspect-ratio` nie zna: kafel będzie wtedy
   po prostu wysoki, a nie płaski. */
/* --- pasek trzech liczników -----------------------------------------
   Polecenie właściciela 07.09.2026: „kwadraty rozmieść proporcjonalnie do
   prawej", potem „za duże odstępy, zmniejsz" i „lewy i prawy do środka
   lekko".

   Kolumny bootstrapowe (`col-xl-3`) nie umiały tego pogodzić: albo trzy
   czwarte pasa i pusta ćwiartka z prawej, albo rozepchanie do krawędzi
   z dziurami po sto sześćdziesiąt pikseli między kaflami. Kwadrat, który
   rośnie z szerokością okna, na monitorze 1920 px robiłby się wielkości
   pół ekranu.

   Dlatego kafel ma STAŁY bok (15 rem), a `space-evenly` rozkłada tę samą
   przerwę przed pierwszym, między i za ostatnim — skrajne odsuwają się
   od krawędzi „lekko do środka", a odstępy między nimi maleją. Poniżej
   tabletu kafle się zawijają i stoją na środku. */
body:not(.patient) .kafle-liczb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  /* Wcięcie z obu stron ściąga skrajne kwadraty do środka i o tyle samo
     skraca przerwy między nimi (polecenie właściciela 07.09.2026:
     „kwadraty minimalnie większe i jeszcze te odstępy bliższe"). */
  padding: 0 4%;
  gap: 1.25rem;
}
body:not(.patient) .kafle-liczb > .kafel-liczby {
  flex: 0 0 auto;
  width: 16.5rem;
  max-width: 100%;
}
/* Kafel niesie własny odstęp przez `gap` paska, więc dolny margines karty
   z motywu (1,5 rem) tylko dokładałby drugą przerwę. */
body:not(.patient) .kafle-liczb .card-stats { margin-bottom: 0; }
/* TELEFON: trzy kwadraty po 240 px jeden pod drugim to siedemset pikseli
   samych liczników — zanim doszłoby się do listy poradni, trzeba by
   przewinąć cały ekran. Po dwa w rzędzie, trzeci sam na środku (robi to
   `space-evenly`), i ciaśniejsze wnętrze, żeby liczba nie dotykała
   krawędzi. */
@media (max-width: 575.98px) {
  body:not(.patient) .kafle-liczb { gap: .75rem; }
  body:not(.patient) .kafle-liczb > .kafel-liczby { width: calc(50% - .375rem); }
  body:not(.patient) .card-stats .card-body { padding: .75rem .5rem; }
  body:not(.patient) .card-stats .h2 { font-size: 1.75rem; }
  body:not(.patient) .card-stats .icon-shape {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .5rem;
  }
  body:not(.patient) .card-stats .icon-shape i { font-size: 1.0625rem; }
  /* „Łączna liczba" schodzi z telefonu: w kwadracie 150 px nie mieści się
     razem ze znakiem, podpisem i liczbą — wystawała poza kafel i była
     ucinana. Etykieta „LICZBA WIZYT" mówi to samo, tylko krócej. */
  body:not(.patient) .card-stats .card-body > p.text-sm { display: none; }
}
body:not(.patient) .card-stats {
  position: relative;
  overflow: hidden;
  border-radius: .5rem;
  aspect-ratio: 1 / 1;
  transition: transform .15s ease, box-shadow .15s ease;
}
/* Zapasowa wysokość TYLKO dla przeglądarki bez `aspect-ratio`. Wpisana na
   stałe w regułę robiła szkodę na telefonie: 11 rem minimalnej wysokości
   razem z proporcją 1:1 wymuszało 176 px SZEROKOŚCI, więc kafel wystawał
   poza ekran przy 320 px (sprawdzone — strona przewijała się w bok). */
@supports not (aspect-ratio: 1 / 1) {
  body:not(.patient) .card-stats { min-height: 11rem; }
}
body:not(.patient) .card-stats::before {
  content: '';
  position: absolute;
  top: -3.5rem;
  right: -3.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(30, 136, 208, .13) 0%,
              rgba(30, 136, 208, 0) 70%);
  pointer-events: none;
}
body:not(.patient) .card-stats:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(50, 50, 93, .12), 0 12px 28px rgba(0, 0, 0, .06);
}
body:not(.patient) .card-stats .card-body { padding: 1.25rem 1.375rem; }
/* Wszystko w kwadracie stoi w OSI (polecenie właściciela 07.09.2026:
   „rozmieszczenie słabe, wyśrodkuj wszystko", „napisy wyżej").

   Pierwszy układ rozpychał znak do góry, a liczbę do dołu (`mt-auto`):
   w kwadracie robiła się z tego dziura przez środek kafla, a podpis
   „LICZBA WIZYT" siedział przy samej dolnej krawędzi. Teraz cała trójka —
   znak, podpis, liczba — jest jedną grupą wyśrodkowaną w pionie i w
   poziomie, więc napisy same idą wyżej.

   Kafelek ze znakiem jest `inline-flex`; w pionowej kolumnie flexa taki
   element rozciągnąłby się na całą szerokość karty, stąd `align-self`. */
body:not(.patient) .card-stats .icon-shape {
  align-self: center;
  margin-bottom: .875rem;
}
body:not(.patient) .card-stats .card-title {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #8a97a8;
  margin-bottom: .375rem !important;
}
body:not(.patient) .card-stats .h2 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--panel-atrament);
}
body:not(.patient) .card-stats .card-body > p.text-sm {
  margin-top: .875rem !important;
  font-size: .75rem;
  color: #8a97a8;
}
/* Kwadratowy kafelek pod znakiem (polecenie właściciela 07.09.2026:
   „te ramki bardziej w kwadracie"). Zaokrąglenie zeszło z .875 rem do
   .4375 rem — róg jest jeszcze zmiękczony, ale kształt czyta się już jako
   kwadrat, nie jako pigułka.

   `!important` przy zaokrągleniu zniknęło razem z klasą `rounded-circle`
   w szablonie: kółko przynosił sam `.icon-shape` z `argon.css` (bez
   `!important`), a ta reguła ma wyższą swoistość i wygrywa normalnie.
   Przy cieniu zostaje — `shadow` jest klasą narzędziową Bootstrapa. */
body:not(.patient) .card-stats .icon-shape {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border-radius: .4375rem;
}
body:not(.patient) .card-stats .icon-shape i { font-size: 1.375rem; }
/* Cień pod ikoną w JEJ kolorze — stąd bierze się wrażenie, że kafelek
   unosi się nad kartą. Szary cień Argona robił z tego naklejkę.

   KOLORY 07.09.2026: fiolet (poradnie), pomarańcz (wizyty — wskazany przez
   właściciela wprost), błękit (pacjenci). Zeszły czerwień i zieleń: w tym
   panelu czerwień znaczy wszędzie ostrzeżenie, a zieleń potwierdzenie,
   i przy zwykłym liczniku mówiły coś, czego nikt nie powiedział. */
body:not(.patient) .card-stats .icon-shape.bg-gradient-indigo {
  box-shadow: 0 6px 14px rgba(86, 3, 173, .32) !important;
}
body:not(.patient) .card-stats .icon-shape.bg-gradient-teal {
  box-shadow: 0 6px 14px rgba(17, 113, 239, .32) !important;
}
body:not(.patient) .card-stats .icon-shape.bg-gradient-orange {
  box-shadow: 0 6px 14px rgba(251, 99, 64, .32) !important;
}

/* --- pierwszy tytuł pod nagłówkiem NIE STOI NA BŁĘKICIE --------------
   Zgłoszenie właściciela 2026-08-27: „twoje poradnie trochę wyjeżdżają do
   góry", „niewidoczny opis na tym tle".

   Motyw podciąga treść pod nagłówek o 4,5 rem (`mt--6`), żeby karty
   nachodziły na błękitny pas — i to jest w porządku, dopóki pierwszą
   rzeczą w treści JEST karta. Na ekranie startowym pierwszy jest goły
   tytuł „Twoje poradnie" z linijką opisu: ciemny napis i szary opis
   lądowały wprost na błękicie, opisu nie dało się przeczytać.

   Klasa oddaje dokładnie tyle, ile zabrał `mt--6`, plus pół rem luzu —
   tytuł zaczyna się na białym tle, a błękit zostaje pod kaflami liczb
   jako zwykły pas. Wartości dla tabletu i telefonu stoją niżej, przy tych
   samych progach, przy których zmienia się `mt--6`. */
body:not(.patient) .pod-naglowkiem { padding-top: 5rem; }

/* --- „Wybierz" pod kafelkiem poradni --------------------------------
   Polecenie właściciela 2026-08-27: „pod spodem baton wybierz ma być
   większy". Przycisk chodził w `btn-sm` — czyli w rozmiarze, którego
   w panelu używamy do akcji drugoplanowych („Otwórz", „Wszystkie
   wizyty"). A to jest PIERWSZE kliknięcie dnia: bez wybranej poradni nie
   widać ani pacjentów, ani wizyt. Ma wyglądać na najważniejsze w kafelku.

   Zdjęte `btn-sm` (z szablonu) plus własna wysokość i wyraźniejszy napis. */
body:not(.patient) .przycisk-wybierz-poradnie {
  padding: .75rem 1rem;
  font-size: .9375rem;
  font-weight: 600;
  border-radius: .625rem;
  letter-spacing: .01em;
}

/* --- PÓŁKI JAKO KWADRATOWE KAFELKI ----------------------------------
   Polecenie właściciela 2026-08-27: „kafelki mają być w kwadracie
   i mniejsze, będzie ich dużo tych kategorii", „zasłonięty jest
   rozwijacz".

   Były wierszem bootstrapowym po cztery w rzędzie. Przy kilkunastu
   półkach zjadały cały ekran, zanim doszło się do listy jadłospisów.
   Siatka `auto-fill` dobiera liczbę kafelków do szerokości okna, a nie do
   sztywnych dwunastu kolumn: przy 150 px na kafelek na monitorze mieści
   ich się dziewięć, na telefonie dwa.

   Środek kafelka został ten sam — te same odnośniki, licznik, „Otwórz"
   i menu pod trzema kropkami. Pionowy układ robi tu `column-reverse` na
   wewnętrznym wierszu: ikona (druga w kodzie) ląduje nad nazwą, a nie
   obok niej. Bez ruszania szablonu w środku. */
body:not(.patient) .polki-siatka {
  display: grid;
  /* WIĘKSZE KAFELKI (13.09.2026). 150 px wystarczało przy kilkunastu
     półkach; po gotowcach ze starego programu jest ich 53 i idą po 24
     na stronę — właściciel: „nie takie małe kwadraciki, większe kwadraty".
     Na monitorze mieści się pięć–sześć w rzędzie, na telefonie jeden–dwa. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  /* ROZWIJANE MENU NAD KARTĄ NIŻEJ. Menu „…" jest rysowane wewnątrz
     kafelka, a karta „Wszystkie moje jadłospisy" stoi w kodzie DALEJ,
     więc bez własnej warstwy zamalowywała je od dołu — właściciel widział
     ucięte w połowie „Nowy jadłospis tutaj". */
  position: relative;
  z-index: 5;
}
body:not(.patient) .polki-siatka .karta-polki {
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0;
}
body:not(.patient) .polki-siatka .card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  padding: .75rem .625rem .25rem;
}
/* `column-reverse`: ikona z drugiej kolumny idzie na górę, nazwa i licznik
   pod nią, wszystko w osi kafelka. */
body:not(.patient) .polki-siatka .card-body > .row {
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin: 0;
}
body:not(.patient) .polki-siatka .card-body > .row > .col,
body:not(.patient) .polki-siatka .card-body > .row > .col-auto {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding: 0;
}
body:not(.patient) .polki-siatka .icon-shape {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  margin-bottom: .5rem;
  border-radius: .75rem !important;
}
body:not(.patient) .polki-siatka .icon-shape i { font-size: 1.0625rem; }
body:not(.patient) .polki-siatka .nazwa-polki {
  font-size: .875rem;
  line-height: 1.2;
}
body:not(.patient) .polki-siatka .licznik-polki { font-size: .75rem; }
body:not(.patient) .polki-siatka .card-footer {
  padding: .25rem .5rem .75rem !important;
  text-align: center !important;
}
body:not(.patient) .polki-siatka .card-footer .btn {
  padding: .25rem .625rem;
  font-size: .75rem;
}

@media (max-width: 767.98px) {
  .pomiary-uklad { flex-direction: column; }
  .pomiary-uklad .sylwetka-pomiary { height: 200px; margin: 1rem 0 0; }
  .pomiary-uklad .list-group { width: 100%; }
}

@media (max-width: 575.98px) {
  /* Na telefonie sylwetka nad słupkami, obie wyśrodkowane — obok siebie
     zostawałoby na słupki jakieś 80 px. */
  .sylwetka-sklad { justify-content: center; }
  .sylwetka-sklad .sylwetka { height: 150px; }
  .sklad-slupki { flex: 1 1 100%; }
}

@media (max-width: 767.98px) {
  .card-body > figure img[src*="person"] {
    display: block;
    margin: 12px auto 0 !important;
    max-width: 60%;
    height: auto;
  }
  .body-percent {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    padding: 0 1rem 1rem;
  }
  .body-percent p {
    position: static !important;
    top: auto !important;
    padding: .35rem 0 .35rem 1.25rem;
    border-bottom: 1px solid #f1f3f9;
  }
  /* Kropka w kolorze strefy z rysunku: woda niebieska, tkanka tłuszczowa
     zielona, mięśnie żółte — te same kolory, które widać na sylwetce. */
  .body-percent p::before {
    content: '';
    position: absolute;
    margin-left: -1.25rem;
    margin-top: .35rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: #2f9fe0;
  }
  .body-percent p.body-percent-2::before { background: #8bc53f; }
  .body-percent p.body-percent-3::before { background: #f4c22b; }

  /* Obwody przy sylwetce to same liczby („82 cm") — bez rysunku obok nic
     nie znaczą, a na telefonie i tak nie trafiłyby w miejsce, którego
     dotyczą (`left: 205px`). Na wąskim ekranie chowamy je: te same
     wartości stoją z nazwami w karcie „Pomiary ciała" tuż wyżej. */
  .body-measure { display: none; }
}

/* Tablet i mniej */
@media (max-width: 991.98px) {
  body:not(.patient) .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body:not(.patient) .header.pb-6 { padding-bottom: 3.5rem !important; }
  body:not(.patient) .container-fluid.mt--6 { margin-top: -3rem !important; }
  body:not(.patient) .pod-naglowkiem { padding-top: 3.5rem; }

  /* Wiersz-pozycja NA TABLECIE (pomiar 11.09.2026 przy 768 px, PWA):
     kolumna dat dostaje tu 100 % szerokości (reguła wyżej), ale wiersz
     miał prawo się zawinąć dopiero od 767 px. Daty rozpychały więc
     wiersz, a „Otwórz" wyjeżdżało 108 px za prawą krawędź i strona
     przewijała się w bok. Zawijanie od tabletu; daty schodzą pod
     nazwisko (`order`), przycisk zostaje przy nazwisku po prawej —
     tam jest pod kciukiem. Na telefonie (niżej) kolejność wraca:
     nazwisko, daty, przycisk pod spodem. */
  body:not(.patient) .pozycja { flex-wrap: wrap; }
  body:not(.patient) .pozycja-daty { order: 10; }
}

/* Telefon */
@media (max-width: 767.98px) {
  body:not(.patient) .header.pb-6 { padding-bottom: 2.5rem !important; }
  body:not(.patient) .container-fluid.mt--6 { margin-top: -2rem !important; }
  body:not(.patient) .pod-naglowkiem { padding-top: 2.5rem; }

  /* Na telefonie kafelek jeszcze mniejszy — po dwa w rzędzie. */
  body:not(.patient) .polki-siatka {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
  }

  /* Nagłówek ekranu: tytuł, opis i przyciski jedno pod drugim.
     `text-right` na wąskim ekranie wypychał przyciski poza kartę. */
  body:not(.patient) .header .text-right,
  body:not(.patient) .card-header .text-right { text-align: left !important; }
  body:not(.patient) .header .row > [class*="col-"] + [class*="col-"] {
    margin-top: .75rem;
  }
  body:not(.patient) .header h6.h2 { font-size: 1.25rem; }

  /* Kafle liczb: mniejsza liczba, żeby karta nie rosła na pół ekranu. */
  body:not(.patient) .card-stats .h2 { font-size: 1.375rem; }
  body:not(.patient) .card-stats .card-title { font-size: .6875rem; }

  /* Wiersz-pozycja: akcje pod treścią, wyrównane do lewej. */
  body:not(.patient) .pozycja {
    flex-wrap: wrap;
    padding: .875rem 1rem;
  }
  body:not(.patient) .pozycja-daty { order: 0; }
  /* Dwie daty obok siebie nie mieszczą się poniżej ~340 px (telefon
     z powiększoną czcionką) — wtedy druga schodzi pod pierwszą. */
  body:not(.patient) .pozycja-daty { flex-wrap: wrap; gap: .5rem 1.25rem; }
  body:not(.patient) .pozycja-akcje {
    width: 100%;
    justify-content: flex-start;
    padding-left: 3.5rem;
  }
  body:not(.patient) .card-header,
  body:not(.patient) .card-body { padding-left: 1rem; padding-right: 1rem; }
  body:not(.patient) h3, body:not(.patient) .h3 { font-size: 1.0625rem; }

  /* Przycisk z długim napisem ma się złamać, a nie wystawać. */
  body:not(.patient) .btn { white-space: normal; }

  /* `table-responsive` TO NIE RESPONSYWNOŚĆ: Argon ściska kolumny do zera
     i napisy nachodzą na siebie. Tabela oznaczona `jak-karty` rozkłada
     wiersz na kartę, a etykiety bierze z `data-etykieta`. */
  body:not(.patient) table.jak-karty thead { display: none; }
  body:not(.patient) table.jak-karty tbody tr {
    display: block;
    border-bottom: 1px solid #e9ecef;
    padding: .75rem 1rem;
  }
  /* Etykieta w lewej kolumnie (bezwzględnie), treść płynie normalnie —
     nie `flex` z `space-between` (do 12.09.2026): komórka z datą, `<br>`
     i godziną rozpadała się na osobne elementy rozrzucone po wierszu
     („05.08.2026" na środku, „10:30 · środa" przy prawej krawędzi;
     raport wizyt na telefonie, zgłoszenie właściciela). */
  body:not(.patient) table.jak-karty tbody td {
    display: block;
    position: relative;
    border: 0 !important;
    padding: .25rem 0 .25rem 6.5rem !important;
    min-height: 1.75rem;
    text-align: left !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body:not(.patient) table.jak-karty tbody td::before {
    content: attr(data-etykieta);
    position: absolute;
    left: 0;
    top: .3rem;
    width: 6rem;
    color: #8898aa;
    font-size: .75rem;
    line-height: 1.3;
  }
  /* Komórka bez etykiety (np. same przyciski) idzie na całą szerokość —
     także z etykietą PUSTĄ (`data-etykieta=""`, lista wizyt). */
  body:not(.patient) table.jak-karty tbody td[data-etykieta=""] {
    padding-left: 0 !important;
  }
  body:not(.patient) table.jak-karty tbody td[data-etykieta=""]::before { content: none; }
  body:not(.patient) table.jak-karty tbody td .btn { margin: 0 .25rem .25rem 0; }
  /* Komórka bez etykiety (np. same przyciski) idzie na całą szerokość. */
  body:not(.patient) table.jak-karty tbody td:not([data-etykieta]) {
    padding-left: 0 !important;
  }
  /* Liczba porządkowa nie niesie nic na telefonie. */
  body:not(.patient) table.jak-karty tbody td[data-etykieta="Lp."] { display: none; }

  /* Zwykłe tabele (kartoteka, raporty) przewijają się w swojej ramce,
     a nie razem z całą stroną. */
  body:not(.patient) .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
}


/* MAKRO — pas na monitorze, PIONOWE SŁUPKI na telefonie (2026-08-17).

   Poziomy pas szedł przez całą szerokość karty: na monitorze wyglądał jak
   pasek pobierania, a na telefonie zlewał się w jedną kreskę bez skali
   (zgłoszenie właściciela: „w widoku mobilnym te słupki poziome dramat,
   od makro mają być w pionie"). Na wąskim ekranie pokazujemy więc trzy
   kolumny z podpisami — którą widać wyższą, tego jest więcej. */
.slupek-makro { max-width: 360px; margin-bottom: 4px; }
.slupek-makro .progress { overflow: hidden; }
.makro-pionowo { display: none; }

@media (max-width: 767px) {
  .slupek-makro { max-width: 100%; }
  .slupek-makro .makro-poziomo { display: none; }

  .makro-pionowo { display: flex; align-items: flex-end; gap: 14px;
                   padding: 2px 0 0; }
  .makro-kolumna { display: flex; flex-direction: column; align-items: center;
                   width: 44px; }
  /* Słup rośnie OD DOŁU — `flex-end` w kolumnie, wypełnienie na procent
     udziału w energii. Stała wysokość 44 px, żeby kafelki posiłków miały
     jednakowy rytm niezależnie od proporcji. */
  /* Tor podniesiony z 44 na 64 px (zgłoszenie właściciela 2026-08-21:
     „ten słupek też poprawić w widoku mobilnym dla pacjenta"). Przy 44 px
     różnica między 20% a 30% to CZTERY PIKSELE — wykres przestawał
     cokolwiek pokazywać. Kafelki posiłków rosną o 20 px i tyle. */
  .makro-slup { width: 20px; height: 64px; background: #eef0f4;
                border-radius: 4px; display: flex; align-items: flex-end;
                overflow: hidden; }
  /* `min-height` jest tu warunkiem czytelności, nie ozdobą: bez niego
     udział poniżej 3% rysował się jako ułamek piksela, czyli znikał —
     a „mało" i „wcale" to przy makro dwie różne rzeczy. */
  .makro-slup i { display: block; width: 100%; border-radius: 4px;
                  min-height: 3px; }
  .makro-kolumna b { font-size: 12px; line-height: 1.4; margin-top: 3px; }
  .makro-kolumna span { font-size: 11px; color: #6c757d; line-height: 1.2; }
}

/* --- ŻETONY WYBORU SKŁADNIKÓW ---------------------------------------
   Zgłoszenie właściciela 2026-08-21: „skąd się takie coś dodało i nie
   mogę usunąć" — żeton „Szpinak, mrożony albo Szpinak" w polu „zawiera
   składniki" nie dawał się zdjąć krzyżykiem.

   Krzyżyk był widoczny i działał. Nie dało się w niego TRAFIĆ: bootstrapowy
   `.badge` ma `white-space: nowrap`, więc żeton z długą nazwą (a nazwy
   łączone przez „albo" są długie z definicji) wyjeżdżał poza swoją
   kolumnę siatki. Sąsiednia kolumna stoi w kodzie dalej, więc rysuje się
   na wierzchu i przechwytuje kliknięcie — Playwright nazywa to wprost:
   „div.col-md-4 intercepts pointer events".

   Dlatego żeton ma się ZAWIJAĆ i nie przekraczać szerokości pola.

   WYJĄTEK OD ZAKRESU TEGO ARKUSZA (`body:not(.patient)` wyżej): ten sam
   widget stoi na ekranach pacjenta, a to nie jest kwestia wyglądu, tylko
   przycisk, w który nie da się kliknąć. Reguła musi obowiązywać po obu
   stronach. */
.wybor-skladnikow .badge {
    white-space: normal;
    max-width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
}

/* --- MARGINES TREŚCI NIE MOŻE ZALEŻEĆ OD SĄSIEDZTWA W KODZIE ---------
   Zgłoszenie właściciela 2026-08-21: „ekrany źle się wyświetlają, a robią
   się dobre po wciśnięciu F5". Ucięta lewa krawędź treści, raz jest, raz
   nie ma — i zawsze po jakiejś akcji: przełączniku na pasku, generowaniu.

   PRZYCZYNA. Argon ustawia margines treści selektorem SĄSIADA:

       .navbar-vertical...fixed-left + .main-content { margin-left: 250px }

   Warunkiem jest, żeby `.main-content` stał w kodzie ZARAZ za paskiem.
   A gdy Django ma komunikat do pokazania, między nie wchodzi
   `#komunikaty-systemu` razem ze swoim `<script>`:

       nav#sidenav-main → div#komunikaty-systemu → script → div#panel.main-content

   Sąsiedztwo pęka, reguła przestaje pasować, margines spada do zera
   i **220 px treści wjeżdża pod pasek**. Komunikaty Django są jednorazowe,
   więc po F5 już ich nie ma, sąsiedztwo wraca i ekran wygląda dobrze —
   stąd „po F5 jest OK" i wrażenie, że usterka pojawia się losowo.

   POPRAWKA: te same trzy reguły co w Argonie, tylko przez sąsiada
   OGÓLNEGO (`~`). Margines przestaje zależeć od tego, co akurat stoi
   między paskiem a treścią — a stanąć tam może jeszcze niejedno.

   Nie ruszamy `argon.css`: to plik z paczki, wraca przy każdej
   aktualizacji motywu. Nadpisujemy stąd, tak jak kolory wyżej.

   BEZ ZAKRESU `body:not(.patient)` świadomie — ekrany pacjenta stoją na
   tym samym szkielecie i ten sam komunikat rozjeżdża je tak samo. */
.navbar-vertical.navbar-expand-xs.fixed-left ~ .main-content {
    margin-left: 62px;
}
@media (min-width: 1200px) {
    .g-sidenav-pinned .sidenav.fixed-left ~ .main-content {
        margin-left: 250px;
    }
}
@media (max-width: 1199.98px) {
    .sidenav.fixed-left ~ .main-content {
        margin-left: 0 !important;
    }
}

/* --- NAPISY NIE WYCHODZĄ POZA SWOJĄ KOLUMNĘ -------------------------
   Zgłoszenie właściciela 2026-08-21 (okno generatora): „obraz źle wygląda,
   skalowanie produktu zawsze wyświetla" — etykiety pól i podpowiedzi pod
   nimi nachodziły na siebie i na sąsiednią kolumnę.

   Pojawia się przy WIĘKSZEJ CZCIONCE: powiększenie w przeglądarce albo
   skalowanie ekranu w Windows. Pomiar: przy czcionce ×1,5 napis
   „tolerancja dla makroskładników" wychodzi poza swoją `col-md-4`
   i zderza się z „białko — udział w kaloriach". Przy ×1,0 i ×1,25 jest
   czysto — dlatego usterki nie widać na ekranie programisty.

   Powód jest ten sam co przy żetonach składników wyżej: element z długim
   napisem nie ma jak się zawinąć, więc rozpycha się w bok. Sąsiednia
   kolumna stoi w kodzie dalej, rysuje się na wierzchu i zasłania to,
   co wystaje — razem z przyciskami, w które trzeba trafić.

   Bez zakresu `body:not(.patient)`: te same formularze stoją po obu
   stronach, a to nie jest kwestia wyglądu, tylko czytelności napisu
   i możliwości kliknięcia. */
.form-group > label,
.form-control-label,
.custom-control-label,
.form-text,
.help-block {
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ETYKIETA KWADRACIKA MUSI ROSNĄĆ RAZEM Z TEKSTEM (2026-08-22).

   Zgłoszenie właściciela: „nadal formularz się źle wyświetla, a już to
   poprawiałeś wczoraj". Miał rację — i to WŁAŚNIE wczorajsza poprawka
   dokończyła tę usterkę.

   Argon ustawia etykiecie kwadracika sztywną wysokość:

       .custom-checkbox .custom-control-input ~ .custom-control-label
           { height: 1rem; }

   Dopóki napis mieścił się w jednej linii, nikt tego nie widział. Reguła
   dodana 21.08 (`white-space: normal` wyżej) pozwoliła długim napisom się
   zawijać — i wtedy druga linia zaczęła WYCHODZIĆ POZA swoje pudełko,
   bo pudełko dalej ma 16 pikseli. Podpowiedź `<small class="form-text">`
   rysuje się zaraz za tym pudełkiem, czyli NA drugiej linii napisu.

   Widać to w oknie generatora przy „tylko posiłki z policzalnymi
   wymiennikami (WW/WBT)" i „dopuść skalowanie gramatury" — wszędzie tam,
   gdzie napis jest dłuższy niż szerokość kolumny. Czyli przy węższym
   oknie i przy większej czcionce systemowej.

   Ktoś załatał to wcześniej JEDNĄ STRONĄ — w `argon.css` stoi
   `.activation-page label.custom-control-label {height: auto !important}`.
   To była łatka na ekran aktywacji konta, a wada jest wszędzie.

   Specyficzność musi zgadzać się z regułą Argona (0,3,1), inaczej sztywna
   wysokość wygrywa mimo późniejszego pliku. Dlatego pełny selektor,
   a nie `!important`.

   Kwadracik i ptaszek rysują się przez `::before`/`::after` ustawione
   `position: absolute; top: .25rem`, więc rosnąca etykieta ich nie rusza. */
.custom-checkbox .custom-control-input ~ .custom-control-label,
.custom-radio .custom-control-input ~ .custom-control-label {
    height: auto;
    min-height: 1rem;
}


/* ===================================================================
   KARTA WARTOŚCI ODŻYWCZYCH (23.08.2026)

   Polecenie właściciela: „tabele przepisów jak z poprzedniej epoki —
   suwaki; nie widać pełnych mikro, tylko trzeba przesuwać; pod spodem
   suma całego posiłku ma być widoczna w jednym podglądzie; widok ma być
   nowoczesny. Zrób wszędzie, gdzie te tabele są".

   Było: dwie tabele po ~22 kolumny z poziomym suwakiem, w trzech
   szablonach osobno. Jest: jeden wycinek `diets/_karta_odzywcza.html`
   plus chipy przy składniku. Stara tabela zostaje w kodzie (ukryta),
   bo argon.js liczy na niej sumy.
   =================================================================== */

.ukryta-tabela {display: none !important}

/* Kolumny wartości odżywczych w tabeli składu — schowane; te same liczby
   pokazują się jako chipy, które zawijają się do szerokości ekranu. */
#body-ingredients td[data-key],
.table thead th[data-key] {display: none}

.komorka-odzywcza {text-align: left !important; vertical-align: top}
.kafelki-wiersza {display: flex; flex-wrap: wrap; gap: 1px 9px;
    padding-top: 3px}
.kafelki-wiersza .kafelek {display: inline-flex; align-items: baseline;
    gap: 4px}
.kafelki-wiersza .kafelek .etykieta {font-size: 9px; color: #9a9a9a;
    text-transform: uppercase}
.kafelki-wiersza .kafelek .wartosc {font-size: 11.5px; font-weight: 600;
    color: #32325d}
.kafelki-wiersza .kafelek .wartosc .jednostka {font-size: 10px;
    font-weight: 400; color: #8898aa; margin-left: 1px}
.kafelki-wiersza .kafelek.brak {opacity: .45}

.karta-odzywcza {border: 1px solid #e9ecef; border-radius: 10px;
    background: #fff; padding: 16px 18px}
.karta-odzywcza .naglowek {display: flex; flex-wrap: wrap;
    align-items: baseline; gap: 10px 18px; margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid #f1f3f5}
.karta-odzywcza .naglowek .tytul {font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #5e72e4}
.karta-odzywcza .naglowek .masa {font-size: 13px; color: #8898aa}
.karta-odzywcza .kafelki {display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr))}
.karta-odzywcza .kafelki>.kafelek {border: 1px solid #edf0f3;
    border-radius: 8px; padding: 8px 10px; background: #fbfcfd; min-width: 0}
.karta-odzywcza .kafelki>.kafelek .etykieta {display: block; font-size: 10px;
    line-height: 1.25; text-transform: uppercase; letter-spacing: .03em;
    color: #8898aa; overflow-wrap: break-word}
.karta-odzywcza .kafelki>.kafelek .wartosc {display: block; margin-top: 3px;
    font-size: 16px; font-weight: 700; color: #32325d; white-space: nowrap}
.karta-odzywcza .kafelki>.kafelek .wartosc .jednostka {font-size: 11px;
    font-weight: 400; color: #8898aa; margin-left: 2px}
.karta-odzywcza .kafelki>.kafelek.brak .wartosc {color: #c3cbd5;
    font-weight: 400}
/* PILNOWANE WARTOŚCI — KOLOR W TABELCE ŚREDNICH (2026-08-25).
   Polecenie właściciela: „jeżeli ustawię, to niech pokaże pod spodem
   w tych średnich w tabelce kolor tych trzech, które oznaczyłem jako
   ważne". Przy widoku „wszystkie 31" zaznaczony potas wyglądał tak samo
   jak trzydzieści wartości, których dietetyk nie pilnuje.

   Kolor jest ten sam co odznaka „Pilnuję w tej diecie" (błękit `info`),
   żeby zaznaczenie u góry i kafelek na dole czytało się jako jedna
   rzecz. Ramka i lewy pasek zamiast samego tła: kafelek „brak" niżej
   przygasza wartość, a te dwa stany muszą się dać zobaczyć naraz. */
.karta-odzywcza .kafelki>.kafelek.pilnowany {background: #e6f7fb;
    border-color: #7bd3e8; border-left: 3px solid #11cdef}
.karta-odzywcza .kafelki>.kafelek.pilnowany .etykieta {color: #1171ef;
    font-weight: 700}
.karta-odzywcza .kafelki>.kafelek.makro {background: #f4f5ff;
    border-color: #e2e5fb}
.karta-odzywcza .kafelki>.kafelek.energia {background: #eefaf3;
    border-color: #d3eddd}
.karta-odzywcza .kafelki>.kafelek.energia .wartosc {color: #2dce89;
    font-size: 19px}

/* Tabela składu posiłku: pola formularza po lewej trzymają zwartą
   szerokość, cała reszta wiersza należy do wartości odżywczych.
   Tabela nie przewija się już w bok — `.table-responsive` wokół niej
   zostaje, ale nie ma czego przewijać. */
.tabela-skladu {table-layout: fixed; width: 100%}
.tabela-skladu thead th:nth-child(1) {width: 5%}
.tabela-skladu thead th:nth-child(2) {width: 19%}
.tabela-skladu thead th:nth-child(3) {width: 11%}
.tabela-skladu thead th:nth-child(4) {width: 8%}
.tabela-skladu thead th:nth-child(5) {width: 9%}
.tabela-skladu thead th.kolumna-odzywcza {width: 48%}
/* PODGLĄD POSIŁKU MA INNE KOLUMNY NIŻ FORMULARZ (2026-08-24).

   Szerokości wyżej opisują tabelę FORMULARZA, gdzie pierwsza kolumna to
   wąskie pole porządkowe. W podglądzie pierwszą kolumną jest NAZWA
   SKŁADNIKA — dostawała więc 5% i łamała się po literach: nagłówek
   „SKŁ AD NIK", a w wierszach „Pomid or" i „Chleb żytni razow y"
   (zgłoszenie właściciela ze zrzutem: „słaby wygląd"). Obok tego
   „miarka" miała 19%, choć mieści się w jednym słowie.

   Nazwa łamie się teraz po spacjach, nie w środku wyrazu; jedno długie
   słowo bez spacji nadal wolno przełamać, żeby nie rozpychało tabeli. */
.tabela-podgladu thead th:nth-child(1) {width: 22%}
.tabela-podgladu thead th:nth-child(2) {width: 10%}
.tabela-podgladu thead th:nth-child(3) {width: 10%}
.tabela-podgladu thead th:nth-child(4) {width: 8%}
.tabela-podgladu thead th.kolumna-odzywcza {width: 50%}
.tabela-podgladu thead th:nth-child(1),
.tabela-podgladu tbody td:nth-child(1) {
  text-align: left !important; overflow-wrap: break-word;
  word-break: normal; hyphens: none}
/* Reguła obok („#body-ingredients … td:nth-child(2)") celuje w NAZWĘ
   w tabeli formularza; w podglądzie ta sama pozycja to „miarka",
   a jednowyrazowej miarki nie ma po co łamać. */
.tabela-podgladu #body-ingredients tr>td:nth-child(2) {
  overflow-wrap: normal}
/* Długie nazwy składników łamią się zamiast rozpychać kolumnę —
   ale tylko one; chip „nazwa + wartość" ma zostać w jednej linii. */
#body-ingredients tr>td:nth-child(2) {overflow-wrap: anywhere}
.kafelki-wiersza .kafelek {white-space: nowrap}
#body-ingredients tr>td {vertical-align: top; padding: .45rem .4rem}
#body-ingredients .select2-container {width: 100% !important}
.kolumna-odzywcza {text-align: left !important}

/* Prawdziwy kwadracik „usuń" jest niewidoczny (Argon rysuje własny), ale
   reguła `#body-ingredients input {width:100%}` z argon.css rozciągała go
   na szerokość karty — przy pozycji absolutnej wystawał poza okno. */
#body-ingredients input.custom-control-input {width: 1rem; max-width: 1rem}

/* POTWIERDZENIE PRZY PRZEŁĄCZNIKU PASKA JADŁOSPISU (02.09.2026).
   Przełączniki przestawiają się bez przeładowania strony, więc komunikat
   nie idzie przez `messages` — pokazuje się tu, przy pozycji, którą
   dietetyk właśnie ruszył, i znika sam po czterech sekundach. */
.przelacznik-komunikat {
  padding: .25rem 1.5rem .5rem;
  font-size: .75rem;
  line-height: 1.3;
  color: #5F7078;
}

/* --- SELECTDIET JAKO APLIKACJA (PWA, 11.09.2026) ---------------------
   W zainstalowanej aplikacji (okno bez paska przeglądarki) pozycja
   „Zainstaluj Selectdiet" w menu pod nazwiskiem nie ma czego robić —
   znika. Zapytanie `display-mode` jest prawdziwe tylko w takim oknie. */
@media (display-mode: standalone) {
  .pwa-instalacja { display: none !important; }
}

/* --- EKRAN DOTYKOWY: cele pod palec (PWA, 11.09.2026) ------------------
   Na tablecie i telefonie przycisk ma mieć co najmniej 44 px wysokości
   (wytyczna Apple i WCAG 2.5.5) — mniejszy trafia się palcem co drugi
   raz. Pomiar 11.09 na ośmiu ekranach kartoteki: `btn-sm` 28 px, zwykły
   `btn` 43 px, podpozycje paska bocznego 42 px.

   Zakres: szerokość do 991 px ALBO „gruby" wskaźnik — tablet w poziomie
   ma 1024 px i nadal obsługuje się go palcem. Na monitorze z myszą nic
   się nie zmienia. Pilnuje tego `testy_przegladarki/
   test_szerokosc_tablet_telefon.py`. */
@media (max-width: 991.98px), (pointer: coarse) {
  body:not(.patient) .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body:not(.patient) .btn-block { display: flex; }
  body:not(.patient) .sidenav .navbar-nav .nav-link,
  body:not(.patient) .navbar-top .nav-link,
  body:not(.patient) .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* --- POLA SCHOWANE PRZEZ SELECT2 NA ANDROIDZIE --------------------------
   select2 chowa oryginalne `<select>` regułą `width: 1px` (klasa
   `select2-hidden-accessible`). Chrome na Androidzie rysuje jednak listę
   systemową i nie schodzi poniżej jej naturalnej szerokości — zmierzone
   11.09.2026 (przegląd ekranów na urządzeniach): 358 px przy oknie 390 px.
   Pole jest niewidoczne (`clip`), ale liczy się do szerokości strony,
   więc formularze posiłku przewijały się w bok o 45–86 px.

   `appearance: none` zdejmuje systemowy wygląd i szerokość wraca do 1 px;
   `max-width` to zapas dla przeglądarki, która `appearance` zignoruje.
   BEZ zakresu `body:not(.patient)` — to naprawa widżetu, nie wygląd. */
.select2-hidden-accessible {
  -webkit-appearance: none !important;
  appearance: none !important;
  max-width: 1px !important;
}

/* --- ZNAK „STRONA GŁÓWNA" W GÓRNYM PASKU I NAZWA PORADNI (12.09.2026) ---
   Właściciel po instalacji aplikacji na telefonie: „szybki powrót do
   głównego menu ma być po naciśnięciu ikonki" i „wszystko rozjechane".
   Znak: 36 px obrazka w celu 44 px (pod palec). Nazwa poradni na telefonie
   i tablecie w jednym wierszu z wielokropkiem; na monitorze bez zmian.
   18.09.2026: ikona aplikacji jest teraz błękitno-granatowa (białe logo),
   a pasek jest błękitny — bez białej obwódki kafelek zlewał się z tłem
   paska; obwódka odcina go jak biały przycisk „Wstecz" obok. */
body:not(.patient) .znak-panelu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
}
body:not(.patient) .znak-panelu img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 1px 3px rgba(0, 0, 0, .25);
}
body:not(.patient) .navbar-top .poradnia-w-pasku { min-width: 0; }
@media (max-width: 991.98px) {
  body:not(.patient) .navbar-top .poradnia-w-pasku {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body:not(.patient) .navbar-top .poradnia-w-pasku-etykieta { display: none; }
  body:not(.patient) .navbar-top #wstecz-panel {
    margin-right: .5rem !important;
    padding-left: .6rem;
    padding-right: .6rem;
  }
}
/* Telefon: „Wstecz" jako sama strzałka (z podpisem w `title` i `aria-label`)
   — z napisem pasek nie mieścił nazwy poradni obok znaku i przycisków. */
@media (max-width: 575.98px) {
  body:not(.patient) .navbar-top .wstecz-napis { display: none; }
  body:not(.patient) .navbar-top .container-fluid { padding-left: .75rem; padding-right: .75rem; }
}

/* --- ARGON ŚCISKA TABELE NA TABLECIE I TELEFONIE (12.09.2026) ------------
   Zgłoszenie właściciela po instalacji aplikacji: „raporty wizyt masakra,
   wszystko rozjechane". Motyw ma regułę
       @media (max-width: 1200px) .table { table-layout: fixed;
                                          overflow-wrap: break-word }
   — każda tabela poniżej 1200 px dostaje równe, wąskie kolumny i łamie
   słowa po literach („P O R A D N I A" w pionie w raporcie uproszczonym).
   Z powrotem układ automatyczny: kolumny na miarę treści, a szeroka
   tabela przewija się w swojej ramce (`.table-responsive`); gdy ramki
   nie ma, sama tabela staje się ramką. Tabele `jak-karty` na telefonie
   i tak są kartami; tabela składu posiłku ma własne, procentowe kolumny. */
@media (max-width: 1199.98px) {
  body:not(.patient) .table:not(.tabela-skladu) {
    table-layout: auto;
    overflow-wrap: normal;
  }
  body:not(.patient) .table:not(.tabela-skladu) th,
  body:not(.patient) .table:not(.tabela-skladu) td { overflow-wrap: normal; }
  body:not(.patient) :not(.table-responsive) > .table:not(.jak-karty):not(.tabela-skladu) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Reguła wyżej nadawała `display: block` także tabeli ZWINIĘTEJ w <details>
     („gramatury obok siebie" przy posiłku): reguła autora wygrywa z arkuszem
     przeglądarki, który chowa zawartość zwiniętego <details>, więc tabela
     rysowała się na wierzchu listy posiłków (zmierzone 20.09.2026 na 390 px).
     Zwinięte zostaje zwinięte. */
  body:not(.patient) details:not([open]) > .table { display: none !important; }
}

/* --- TRZY KRESKI MENU NA TELEFONIE I TABLECIE (12.09.2026) ---------------
   Właściciel po instalacji aplikacji: „trochę ikonka większa do menu, te
   kreski". Z motywu przełącznik ma 18 × 12 px — cel nie do trafienia
   palcem. Teraz 28 × 21 px, grubsze kreski, w polu 44 × 44 px; kółko
   podświetlenia z motywu przesunięte tak, żeby dalej było na środku.
   Tylko poniżej 1200 px — na monitorze ten przełącznik jest schowany
   (`d-xl-none`), pasek zwija się własnym z lewej. */
@media (max-width: 1199.98px) {
  body:not(.patient) .navbar-top .sidenav-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    margin-right: .25rem;
  }
  body:not(.patient) .navbar-top .sidenav-toggler-inner,
  body:not(.patient) .navbar-top .sidenav-toggler-line { width: 28px; }
  body:not(.patient) .navbar-top .sidenav-toggler-line {
    height: 3px;
    border-radius: 2px;
  }
  body:not(.patient) .navbar-top .sidenav-toggler-line:not(:last-child) {
    margin-bottom: 6px;
  }
  body:not(.patient) .navbar-top .sidenav-toggler-inner:before {
    width: 44px;
    height: 44px;
    top: -12px;
    left: -8px;
  }
}

/* --- wyszukiwarka katalogu jadłospisów (13.09.2026) ------------------ */
body:not(.patient) .szukaj-biblioteki { justify-content: flex-end; gap: 4px; }
body:not(.patient) .szukaj-biblioteki input[type="search"] { min-width: 260px; }
@media (max-width: 991.98px) {
  body:not(.patient) .szukaj-biblioteki { justify-content: flex-start; }
  body:not(.patient) .szukaj-biblioteki input[type="search"] { min-width: 0; width: 100%; }
}

/* --- kafelki półek: menu „…" nad sąsiadami, ładniejsza ikona (16.09.2026) ---
   Rozwinięte menu kafelka wchodziło POD kafelek z rzędu niżej (rysowany
   później w kodzie) — właściciel widział ucięte „Nowy jadłospis tutaj".
   Kafelek z otwartym menu idzie nad resztę; `:has()` rozumie Chrome/Opera
   od 2022, a dla starszych przeglądarek to samo robi klasa z argon.js. */
body:not(.patient) .polki-siatka .karta-polki:has(.dropdown.show),
body:not(.patient) .polki-siatka .karta-polki.menu-otwarte { z-index: 30; }
body:not(.patient) .polki-siatka .karta-polki { position: relative; }
/* KAFELKI PÓŁEK W CZTERECH KOLORACH PO KOLEI (właściciel 16.09.2026:
   „słabe te kafelki graficznie, może koloru", z czterech wariantów wybrał
   D: każda półka innym kolorem — czerwień / fiolet / pomarańcz / błękit).
   Kolor to zmienne na kafelku; ikona ma gradient i cień w swoim kolorze,
   karta krawędź u góry, licznik i „Otwórz" ten sam kolor. „Bez kategorii"
   zostaje szara — to brak półki, nie półka. */
body:not(.patient) .polki-siatka .karta-polki {
  --polka-a: #f5365c; --polka-b: #fb6340; --polka-cien: rgba(245, 54, 92, .28);
  border-top: 4px solid var(--polka-a);
  border-radius: 14px;
}
body:not(.patient) .polki-siatka .karta-polki:nth-child(4n+2) {
  --polka-a: #8965e0; --polka-b: #c76bd3; --polka-cien: rgba(137, 101, 224, .3);
}
body:not(.patient) .polki-siatka .karta-polki:nth-child(4n+3) {
  --polka-a: #fb6340; --polka-b: #fbb140; --polka-cien: rgba(251, 99, 64, .3);
}
body:not(.patient) .polki-siatka .karta-polki:nth-child(4n) {
  --polka-a: #11cdef; --polka-b: #1171ef; --polka-cien: rgba(17, 205, 239, .3);
}
body:not(.patient) .polki-siatka .icon.icon-shape {
  width: 68px; height: 68px; border-radius: 20px; font-size: 1.7rem;
  background: linear-gradient(135deg, var(--polka-a) 0%, var(--polka-b) 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px var(--polka-cien);
}
body:not(.patient) .polki-siatka .icon.icon-shape.bg-secondary {
  background: #eef1f5 !important; color: #8898aa !important; box-shadow: none;
}
body:not(.patient) .polki-siatka .karta-polki:has(.icon-shape.bg-secondary) { border-top-color: #dee2e6; }
body:not(.patient) .polki-siatka .nazwa-polki { font-size: 1.125rem; color: #32325d; }
body:not(.patient) .polki-siatka .licznik-polki { color: var(--polka-a); font-weight: 600; }
body:not(.patient) .polki-siatka .karta-polki:hover {
  box-shadow: 0 10px 24px var(--polka-cien), 0 2px 6px rgba(0, 0, 0, .06);
}
body:not(.patient) .polki-siatka .card-footer .btn-primary {
  background: var(--polka-a); border-color: var(--polka-a);
}

/* =====================================================================
   TELEFON: KAŻDE OKNO PANELU (20.09.2026)

   Właściciel po pracy w zainstalowanej aplikacji na telefonie: „responsywność
   w PWA nie ma prawie nigdzie — każdy widok posprawdzaj i popraw", ze
   zrzutami: podgląd posiłku z nagłówkiem tabeli łamanym po literach
   (W-A-R-T-O-Ś-Ć), pola „wartość" i „waga" leżące jedno na drugim, lista
   posiłków w edytorze ucięta z prawej. Do tej pory telefon miał tylko
   kartotekę (pacjenci, wizyty, dzienniczek); ekrany pracy nad jadłospisem
   stały „do przewijania w bok" — a tabela z polami formularza przewijana
   w bok to na telefonie nie praca, tylko zgadywanie.

   Cztery reguły, każda na całą klasę ekranów, nie na jeden szablon:
     1. nagłówek karty i strony: tytuł NAD przyciskami, przyciski w dwóch
        kolumnach na całą szerokość (dotąd tytuł i słupek przycisków
        dzieliły 390 px na pół);
     2. tabela składu posiłku (formularz i podgląd) jako karty składników:
        nazwa na całą szerokość, pod nią miarka · wartość · waga z podpisami,
        pod spodem kafelki wartości odżywczych;
     3. lista posiłków w edytorze jako karty (`jak-karty`, jak lista wizyt);
        pole „wskazówka dla pacjenta" na całą szerokość zamiast 22 rem;
     4. tabele, które MUSZĄ zostać szerokie (kalendarz tygodnia, raporty,
        baza posiłków), przewijają się w ramce z pierwszą kolumną
        przyklejoną, żeby wiadomo było, w którym wierszu się jest.
   Pilnuje tego `testy_przegladarki/test_kazde_okno_telefon.py` — każde
   okno panelu przy 360 px (Android) i 390 px (iPhone).
   ===================================================================== */
@media (max-width: 767.98px) {
  /* --- 1. nagłówki: tytuł nad przyciskami ------------------------------ */
  body:not(.patient) .row > .col.text-right,
  body:not(.patient) .row > .col-5.text-right,
  body:not(.patient) .row > .col-md-3.text-right,
  body:not(.patient) .row > .col-lg-8.col-7,
  body:not(.patient) .row > .col-lg-6.col-7 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left !important;
  }
  body:not(.patient) .row > .col.text-right,
  body:not(.patient) .row > .col-5.text-right,
  body:not(.patient) .row > .col-md-3.text-right {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    margin-top: .5rem;
  }
  body:not(.patient) .row > .text-right > .btn,
  body:not(.patient) .row > .text-right > .dropdown,
  body:not(.patient) .row > .text-right > .btn-group,
  body:not(.patient) .row > .text-right > form {
    flex: 1 1 calc(50% - 6px);
    min-width: calc(50% - 6px);
    margin: 0 !important;
  }
  body:not(.patient) .row > .text-right .dropdown > .btn,
  body:not(.patient) .row > .text-right .btn-group > .btn,
  body:not(.patient) .row > .text-right > form > .btn { width: 100%; }
  body:not(.patient) .row > .text-right .dropdown-menu { left: 0; right: auto; }
  body:not(.patient) .row > .text-right .dropdown-menu-right { left: auto; right: 0; }

  /* --- 2. tabela składu posiłku jako karty składników ----------------- */
  body:not(.patient) .tabela-skladu { display: block; table-layout: auto; width: 100%; }
  body:not(.patient) .tabela-skladu thead { display: none; }
  body:not(.patient) .tabela-skladu tbody { display: block; width: 100%; }
  body:not(.patient) .tabela-skladu tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    padding: .6rem 0;
    border-bottom: 1px solid #e9ecef;
  }
  body:not(.patient) .tabela-skladu tbody tr.empty,
  body:not(.patient) .tabela-skladu tbody tr.hidden { display: none; }
  body:not(.patient) .tabela-skladu tbody td {
    display: block;
    min-width: 0;
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal;
  }
  body:not(.patient) .tabela-skladu tbody td[data-key] { display: none; }
  body:not(.patient) .tabela-skladu tbody td .form-control { width: 100%; }
  body:not(.patient) .tabela-skladu tbody td .select2-container { width: 100% !important; }
  /* podpis nad małym polem — nagłówek tabeli jest schowany; treść podpisu
     stoi niżej, przy kolumnie (wiersze formularza buduje skrypt, więc
     podpis z CSS nie wymaga zmian w argon.js ani w szablonie podglądu) */
  body:not(.patient) .tabela-skladu tbody td:nth-child(n+2):nth-child(-n+5)::before {
    display: block;
    font-size: .68rem;
    line-height: 1.2;
    color: #8898aa;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 2px;
  }
  /* formularz: [usuń][składnik][miarka][wartość][waga][…][kafelki] */
  body:not(.patient) .tabela-skladu:not(.tabela-podgladu) tbody tr {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }
  body:not(.patient) .tabela-skladu:not(.tabela-podgladu) tbody td:nth-child(1) { grid-column: 4; grid-row: 1; align-self: center; justify-self: end; }
  body:not(.patient) .tabela-skladu:not(.tabela-podgladu) tbody td:nth-child(2) { grid-column: 1 / 4; grid-row: 1; min-width: 0 !important; }
  body:not(.patient) .tabela-skladu:not(.tabela-podgladu) tbody td:nth-child(3) { grid-column: 1; grid-row: 2; }
  body:not(.patient) .tabela-skladu:not(.tabela-podgladu) tbody td:nth-child(4) { grid-column: 2; grid-row: 2; }
  body:not(.patient) .tabela-skladu:not(.tabela-podgladu) tbody td:nth-child(5) { grid-column: 3; grid-row: 2; }
  body:not(.patient) .tabela-skladu:not(.tabela-podgladu) tbody td:nth-child(3)::before { content: "miarka"; }
  body:not(.patient) .tabela-skladu:not(.tabela-podgladu) tbody td:nth-child(4)::before { content: "ile miarek"; }
  body:not(.patient) .tabela-skladu:not(.tabela-podgladu) tbody td:nth-child(5)::before { content: "waga (g)"; }
  /* podgląd: [nazwa][miarka][wartość][waga][…][kafelki] */
  body:not(.patient) .tabela-podgladu tbody td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; font-weight: 600; color: #32325d; }
  body:not(.patient) .tabela-podgladu tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  body:not(.patient) .tabela-podgladu tbody td:nth-child(3) { grid-column: 2; grid-row: 2; }
  body:not(.patient) .tabela-podgladu tbody td:nth-child(4) { grid-column: 3; grid-row: 2; }
  body:not(.patient) .tabela-podgladu tbody td:nth-child(2)::before { content: "miarka"; }
  body:not(.patient) .tabela-podgladu tbody td:nth-child(3)::before { content: "ile miarek"; }
  body:not(.patient) .tabela-podgladu tbody td:nth-child(4)::before { content: "waga (g)"; }
  body:not(.patient) .tabela-skladu tbody td.komorka-odzywcza { grid-column: 1 / -1; grid-row: 3; }
  body:not(.patient) #body-ingredients tr > td { padding: 0 !important; }
  /* niewidoczny kwadracik „usuń" (Argon rysuje własny) nie ma wystawać poza okno */
  body:not(.patient) .tabela-skladu tbody td .custom-control-input { width: 1rem; max-width: 1rem; left: 0; }

  /* --- 3. formularze w wierszu i lista posiłków w edytorze -------------- */
  body:not(.patient) .form-inline { flex-wrap: wrap; }
  body:not(.patient) .form-inline .form-control { max-width: 100%; }
  body:not(.patient) input[name="wskazowka"] { width: 100% !important; margin-bottom: .25rem; }
  body:not(.patient) table.jak-karty tbody td .badge { white-space: normal; }
  body:not(.patient) .tabela-posilkow tbody td { padding-left: 0 !important; }
  body:not(.patient) .tabela-posilkow tbody td[data-etykieta] { padding-left: 6.5rem !important; }
  body:not(.patient) .tabela-posilkow tbody td .btn-icon-only.text-light { color: #5e72e4 !important; }

  /* karta odżywcza posiłku: dwa kafelki w rzędzie zamiast słupka po jednym */
  body:not(.patient) .karta-odzywcza .kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(.patient) .karta-odzywcza .kafelki > .kafelek { min-width: 0; }
  body:not(.patient) .karta-odzywcza .kafelki > .kafelek .etykieta { white-space: normal; }
  /* na 360 px kafelek ma ~112 px na napis: „wielonienasycone" łamało się
     w środku; ciaśniejszy kafelek i litery bez rozstrzelenia — słowo się mieści */
  body:not(.patient) .karta-odzywcza .kafelki > .kafelek { padding: 8px 8px; }
  body:not(.patient) .karta-odzywcza .kafelki > .kafelek .etykieta { font-size: 9px; letter-spacing: 0; overflow-wrap: normal; }
  /* rodziny FODMAP na ekranie reintrodukcji: po dwie w rzędzie, nie po trzy
     („nadmiarowa" łamało się po literach przy 360 px) */
  body:not(.patient) .row > .col-md-2.col-4 { flex: 0 0 50%; max-width: 50%; }

  /* --- 4. szerokie tabele: pierwsza kolumna przyklejona ------------------ */
  /* baza posiłków: nazwa dostaje szerokość zdania, reszta kolumn przewija się w bok */
  body:not(.patient) .meals-table td:nth-child(2) { min-width: 220px; }
  body:not(.patient) .table-responsive > .table.menu-calendar th:first-child,
  body:not(.patient) .table-responsive > .table.menu-calendar td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 2px 0 0 #e9ecef;
  }
}