/* SalesGrip Mystery Client — styl jak w aplikacjach Apple (skill apple-design,
   10.10.2026): jeden akcent, płyty na szarym tle z miękkim cieniem zamiast ramek,
   przezroczysty pasek z rozmyciem, czcionka systemowa, odstępy liter zależne od
   wielkości, reakcja na wciśnięcie. Hierarchię dalej niesie typografia i odstęp.
   Warstwa stylu Apple jest na końcu pliku („STYL APPLE”) — nadpisuje wygląd,
   nie zmienia układu ani klas, na których opiera się app.js. */

/* KONTRAST: kolory dobrane tak, żeby spełniały WCAG 2.1 na tle, na którym
   faktycznie leżą — drobny tekst co najmniej 4.5:1, obramowania pól formularza
   co najmniej 3:1. Najważniejszy jest `--tekst-3`: niesie najmniejsze napisy
   w całym panelu (etykiety kafelków i nagłówki sekcji mają 11 px), więc to on
   decyduje, czy panel w ogóle da się czytać. Przy zmianie któregokolwiek z tych
   kolorów przelicz kontrast, nie dobieraj na oko. */

:root {
  --tlo: #f2f2f7;          /* szare tlo grupowane (Apple); bylo #f4f5f7 */
  --plyta: #ffffff;
  --pasek: rgba(255, 255, 255, .78);  /* material paska — loga klientow sa projektowane na biel */
  --szary: rgba(118, 118, 128, .12);  /* wypelnienie przyciskow drugich i torow */
  --segment: #ffffff;                 /* wybrany segment przelacznika */
  --material: rgba(255, 255, 255, .94);
  --cien: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .05);
  --cien-duzy: 0 2px 6px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .16);
  --linia: #d9dce3;        /* bylo #e9eaee, 1.20:1 — praktycznie niewidoczne */
  --linia-mocna: #8b93a2;  /* ramki pol: bylo 1.40:1, jest 3.09:1 */

  --tekst: #14181f;
  --tekst-2: #5b6474;
  --tekst-3: #646c7a;      /* bylo #98a0ae, 2.63:1 — ponizej progu czytelnosci */

  --akcent: #1a56b0;
  --akcent-tlo: #eef3fb;

  --dobry: #1e7e46;
  --sredni: #9a6b1a;
  --zly: #b3372e;

  --r: 16px;
  --r-mala: 10px;
}

/* Ciemne wartosci sa w dwoch miejscach: raz dla ustawienia systemowego, raz dla
   motywu wymuszonego przelacznikiem. CSS nie pozwala polaczyc selektora spoza
   media query z selektorem w srodku, wiec przy zmianie koloru trzeba poprawic
   OBA bloki. */
:root[data-theme="dark"] {
  --tlo: #000000;
  --plyta: #1c1c1e;
  --pasek: rgba(30, 30, 32, .72);   /* jasniejszy od tla, zeby granatowa ikona SalesGrip odcinala sie */
  --szary: rgba(118, 118, 128, .24);
  --segment: #48484a;
  --material: rgba(44, 44, 46, .94);
  --cien: 0 0 0 1px rgba(255, 255, 255, .04);
  --cien-duzy: 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 48px rgba(0, 0, 0, .6);
  --linia: #38383a;
  --linia-mocna: #626b7a;  /* ramki pol: bylo 1.49:1, jest 3.21:1 */

  --tekst: #e8eaee;
  --tekst-2: #a0a8b6;
  --tekst-3: #8a93a3;      /* bylo #6d7685, 3.77:1 przy 11 px */

  --akcent: #6ea3f0;
  --akcent-tlo: #1a2333;

  --dobry: #5cc088;
  --sredni: #d7a34a;
  --zly: #e0736a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tlo: #000000;
    --plyta: #1c1c1e;
    --pasek: rgba(30, 30, 32, .72);
    --szary: rgba(118, 118, 128, .24);
    --segment: #48484a;
    --material: rgba(44, 44, 46, .94);
    --cien: 0 0 0 1px rgba(255, 255, 255, .04);
    --cien-duzy: 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 48px rgba(0, 0, 0, .6);
    --linia: #38383a;
    --linia-mocna: #626b7a;  /* ramki pol: bylo 1.49:1, jest 3.21:1 */

    --tekst: #e8eaee;
    --tekst-2: #a0a8b6;
    --tekst-3: #8a93a3;      /* bylo #6d7685, 3.77:1 przy 11 px */

    --akcent: #6ea3f0;
    --akcent-tlo: #1a2333;

    --dobry: #5cc088;
    --sredni: #d7a34a;
    --zly: #e0736a;
  }
}

* { box-sizing: border-box; }

/* Atrybut hidden ma ukrywać ZAWSZE. Bez tego reguły typu `label { display:
   block }` wygrywały z nim i pole „Grupa” dla admina widział też dyrektor. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }

/* ------------------------------------------------------------ nagłówek */

.gora {
  border-bottom: 1px solid var(--linia);
  background: var(--pasek);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Pasek zawsze na cala szerokosc okna (tresc ponizej ma swoje 1300 px). */
.gora-wnetrze {
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 58px;
}

/* Znak produktu jest najwiekszy; SalesGrip to podpis (mala ikona + nazwa w kolorze
   tekstu), a logo klienta stoi z nim na rowni. Kreska oddziela produkt od marek. */
.logo { display: flex; align-items: center; gap: 14px; flex: none; }
.logo img { display: block; width: auto; }
.logo-znak { height: 22px; }
.logo-kreska { width: 1px; height: 26px; background: var(--linia); }
/* Nazwa SalesGrip w kroju marki (Lexend SemiBold, przyciety do polskiego
   alfabetu, generuje go tools/logotypy.py). Tekst, nie obrazek, zeby kolor szedl
   za motywem. */
@font-face {
  font-family: "Lexend";
  src: url("/static/czcionki/Lexend-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
.logo-sg { display: flex; align-items: center; gap: 7px; font-family: Lexend, "Segoe UI", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -.02em; color: var(--tekst-2); white-space: nowrap; }
.logo-sg img { height: 22px; }
.logo-klient { display: flex; align-items: center; gap: 14px; }
/* Wysrodkowane jako prostokat, logo Matsuoki wygladalo na opuszczone: caly ciezar
   (napis) siedzi w dolnej czesci pliku, nad nim jest tylko cienka linia auta.
   Podnosimy je, zeby srodek napisu wypadl blizej osi paska i napisu SalesGrip. */
.logo-klient img { height: 30px; position: relative; top: -3px; }
.logo-x { font-size: 16px; line-height: 1; color: var(--tekst-3); }

/* Wersja logotypu pod motyw. Jak przy kolorach: raz dla motywu wymuszonego
   przelacznikiem, raz dla ustawienia systemowego. */
:root .na-ciemne { display: none; }   /* :root podbija wage ponad „.logo img { display: block }” */
:root[data-theme="dark"] .na-jasne { display: none; }
:root[data-theme="dark"] .na-ciemne { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .na-jasne { display: none; }
  :root:not([data-theme="light"]) .na-ciemne { display: block; }
}

/* Nawigacja zajmuje miejsce miedzy logo a uzytkownikiem i nigdy nie rozpycha
   paska: zakladki, ktore sie nie mieszcza, app.js przenosi do „Wiecej”
   (ulozNawigacje). Wczesniej chowaly sie pod przewijaniem i nie bylo ich widac. */
nav { display: flex; gap: 2px; margin-left: 8px; min-width: 0; flex: 1 1 auto; }
nav button { flex: none; }

nav button {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--tekst-2);
  padding: 7px 11px;       /* bylo 13px — przy pieciu zakladkach brakowalo miejsca */
  border-radius: var(--r-mala);
  cursor: pointer;
  white-space: nowrap;
}

nav button:hover { background: var(--tlo); color: var(--tekst); }
nav button.wybrany { background: var(--akcent-tlo); color: var(--akcent); font-weight: 600; }

/* „Wiecej”: rozwija sie po najechaniu, a na dotyku i z klawiatury po kliknieciu. */
.wiecej { position: relative; flex: none; }
.wiecej-przycisk::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); }
.wiecej-lista {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 190px;
  padding: 6px;
  margin-top: 6px;
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(15, 18, 22, .12);
  z-index: 20;
}
/* Mostek nad lista, zeby kursor nie gubil najechania w szczelinie 6 px. */
.wiecej-lista::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.wiecej:hover .wiecej-lista, .wiecej.otwarte .wiecej-lista, .wiecej:focus-within .wiecej-lista { display: grid; gap: 2px; }
.wiecej-lista button { text-align: left; width: 100%; }

/* ------------------------------------------------------------ układ */

main { max-width: 1300px; margin: 0 auto; padding: 26px 32px 72px; }

.ekran[hidden] { display: none; }

.naglowek-sekcji {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
}
.naglowek-sekcji h2 { margin: 0; font-size: 16px; }
.naglowek-sekcji p { margin: 0; font-size: 13px; color: var(--tekst-3); }
.naglowek-sekcji .z-prawej { margin-left: auto; }

.plyta {
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  padding: 20px;
}

.plyta + .plyta { margin-top: 16px; }

.plyta h3 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tekst-3);
}

.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.bok-i-tresc { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }

/* Kolumna siatki domyślnie nie kurczy się poniżej najszerszej rzeczy w środku —
   wystarczy jeden nagłówek albo tabela, żeby rozepchnęła cały ekran i strona
   zaczęła przewijać się na boki. Pozwalamy jej się zwęzić; to, co naprawdę
   potrzebuje szerokości, ma własne przewijanie (.tabela-otoczka). */
.dwie-kolumny > *, .bok-i-tresc > * { min-width: 0; }

@media (max-width: 980px) {
  .dwie-kolumny, .bok-i-tresc { grid-template-columns: 1fr; }
  .gora-wnetrze { padding: 0 18px; gap: 14px; }
  main { padding: 20px 18px 60px; }
  nav { margin-left: 0; overflow-x: auto; }
}

/* Węższe okno (laptop z lupą, pół ekranu): logo i blok użytkownika zajmują razem
   ok. 800 px, więc na zakładki zostawałby skrawek i prawie wszystko lądowałoby
   w „Więcej”. Zakładki schodzą wtedy do drugiego rzędu na całą szerokość. */
@media (max-width: 1180px) {
  .gora-wnetrze { height: auto; flex-wrap: wrap; gap: 8px 24px; padding: 10px 28px 8px; }
  .gora-wnetrze .ja { margin-left: auto; }
  nav { order: 3; flex: 1 0 100%; margin-left: -11px; }
}

/* Na telefonie nie mieszczą się nawet logo i nazwisko obok siebie. Dane
   użytkownika łamią się pod logo, a zakładki jak wyżej idą do osobnego rzędu,
   z nadmiarem w „Więcej”. */
@media (max-width: 700px) {
  .gora-wnetrze {
    height: auto;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 10px 16px;
  }
  .logo { flex: 1 1 auto; gap: 10px; }
  .logo-znak { height: 17px; }
  .logo-kreska { height: 20px; }
  /* Na telefonie z SalesGrip zostaje sama ikona, inaczej pasek sie nie miesci. */
  .logo .logo-sg span { display: none; }
  .logo .logo-sg img { height: 20px; }
  .logo-klient { gap: 10px; }
  .logo-klient img { height: 24px; top: -2px; }
  /* Nazwisko, plakietka roli i trzy przyciski nie zmieszczą się w jednym rzędzie,
     więc pozwalamy im się łamać zamiast wypychać stronę w bok. Samo `flex-wrap`
     nie wystarczy: `flex: none` z reguły bazowej blokuje kurczenie, a ta reguła
     stoi w pliku NIŻEJ — stąd selektor z rodzicem, a nie samo `.ja`. */
  .gora-wnetrze .ja {
    margin-left: auto;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .ja .kto { min-width: 0; }
  .ja .kto b, .ja .kto span {
    display: block;
    max-width: 42vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  nav { order: 3; flex: 1 0 100%; }
}

/* ------------------------------------------------------------ kafelki */

/* `auto-fit` zamiast sztywnej liczby kolumn: kafelków bywa sześć albo siedem
   (doszedł czas do odebrania), a przy sztywnej szóstce siódmy spadał sam
   w drugi rząd. Teraz siatka dopasowuje się do liczby kafelków i do szerokości,
   więc dołożenie kolejnego wskaźnika nie wymaga ruszania CSS-u. */
.kafelki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 620px) { .kafelki { grid-template-columns: repeat(2, 1fr); } }

.kafelek {
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  padding: 14px 16px;
}

.kafelek .liczba {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.kafelek .etykieta { font-size: 11px; color: var(--tekst-3); margin-top: 2px; }
.kafelek.wyroznik .liczba { color: var(--akcent); }
/* Kafelek, w którym wysoka liczba jest złą wiadomością — dziś: rozpoznania AI. */
.kafelek.alarm .liczba { color: var(--zly); }

/* Cztery kafelki podsumowania w karcie doradcy. Karta jest węższa niż ekran,
   więc ma własny próg łamania — reguły dla siatki na stronie liczą szerokość
   okna, a nie okienka. */
/* Pięć kafelków w karcie doradcy: doszedł czas do odebrania. */
.kafelki.w-karcie { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 720px) { .kafelki.w-karcie { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------ formularze */

label { display: block; margin-bottom: 13px; }

label .nazwa {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tekst-3);
  margin-bottom: 5px;
}

input, select, textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-mala);
  background: var(--plyta);
  color: var(--tekst);
  font: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--akcent);
  box-shadow: 0 0 0 3px var(--akcent-tlo);
}

input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
textarea { resize: vertical; min-height: 62px; }

.pomoc { font-size: 12px; color: var(--tekst-3); margin-top: 5px; }
.para { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

button {
  font: inherit;
  font-weight: 550;
  border: 1px solid transparent;
  border-radius: var(--r-mala);
  padding: 9px 15px;
  cursor: pointer;
}

.glowny { background: var(--akcent); color: var(--na-akcencie, #fff); width: 100%; }
.glowny:hover { filter: brightness(1.08); }
.glowny:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.drugi {
  background: var(--plyta);
  border-color: var(--linia-mocna);
  color: var(--tekst-2);
  padding: 6px 12px;
  font-size: 13px;
}
.drugi:hover { border-color: var(--akcent); color: var(--akcent); }
.drugi.ostrzegawczy:hover { border-color: var(--zly); color: var(--zly); }
/* Link wyglądający jak przycisk — pobieranie pliku musi być linkiem, żeby
   przeglądarka wysłała ciasteczko sesji i zapisała plik pod właściwą nazwą. */
a.przycisk {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--r-mala);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
a.przycisk.drugi { border-color: var(--linia-mocna); }
a.przycisk.drugi:hover { border-color: var(--akcent); }

/* Odsłuch nagrania w podglądzie rozmowy */
.nagranie-rozmowy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
}
.nagranie-rozmowy audio { flex: 1; min-width: 220px; height: 36px; }

.uwaga.rozpoznanie { border-left-color: var(--zly); }
.uwaga.rozpoznanie q { display: block; margin-top: 4px; font-style: italic; color: var(--tekst); }
.uwaga.rozpoznanie p { margin: 6px 0 0; }

/* wybór doradców do serii */

.lista-wyboru {
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-mala);
  max-height: 230px;
  overflow-y: auto;
}

.lista-wyboru .pozycja {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--linia);
  cursor: pointer;
}
.lista-wyboru .pozycja:last-child { border-bottom: 0; }
.lista-wyboru .pozycja:hover { background: var(--tlo); }
.lista-wyboru input[type=checkbox] { width: auto; margin: 0; flex: none; }
.lista-wyboru .kto { flex: 1; min-width: 0 }
.lista-wyboru .kto b { font-weight: 550; display: block; }
.lista-wyboru .kto span { font-size: 12px; color: var(--tekst-3); }

/* ------------------------------------------------------------ tabele */

.tabela-otoczka { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tekst-3);
  padding: 0 14px 9px 0;
  border-bottom: 1px solid var(--linia);
  white-space: nowrap;
}

td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--linia); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
th:last-child, td:last-child { padding-right: 0; }

.liczby { font-variant-numeric: tabular-nums; white-space: nowrap; }
.drobne { font-size: 12px; color: var(--tekst-3); }
.mocne { font-weight: 550; }

.znacznik {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.st-zaplanowane { background: var(--akcent-tlo); color: var(--akcent); }
.st-w_trakcie   { background: color-mix(in srgb, var(--sredni) 14%, transparent); color: var(--sredni); }
.st-zakonczone  { background: color-mix(in srgb, var(--dobry) 14%, transparent); color: var(--dobry); }
.st-nieudane    { background: color-mix(in srgb, var(--zly) 14%, transparent); color: var(--zly); }
.st-odwolane    { background: var(--tlo); color: var(--tekst-3); border-color: var(--linia); }

.wynik { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; }
.w-dobry { color: var(--dobry); }
.w-sredni { color: var(--sredni); }
.w-zly { color: var(--zly); }

.trend { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.t-gora { color: var(--dobry); }
.t-dol { color: var(--zly); }
.t-brak { color: var(--tekst-3); font-weight: 400; }

.akcje { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ------------------------------------------------------------ paski wartości */

.miara { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.miara .opis { width: 160px; flex: none; font-size: 13px; }
.miara .opis small { display: block; color: var(--tekst-3); font-size: 11px; }
.miara .rynna { flex: 1; height: 6px; background: var(--tlo); border-radius: 3px; overflow: hidden; }
.miara .rynna i { display: block; height: 100%; background: var(--akcent); border-radius: 3px; }
.miara .rynna i.w-dobry { background: var(--dobry); }
.miara .rynna i.w-sredni { background: var(--sredni); }
.miara .rynna i.w-zly { background: var(--zly); }
.miara .wartosc { width: 52px; flex: none; text-align: right; font-variant-numeric: tabular-nums;
                  font-weight: 600; font-size: 13px; }

/* iskierka — historia wyników doradcy */
.iskierka { display: block; }
.iskierka polyline { fill: none; stroke: var(--akcent); stroke-width: 1.5;
                     stroke-linejoin: round; stroke-linecap: round; }
.iskierka circle { fill: var(--akcent); }

/* ------------------------------------------------------------ drobne */

.komunikat { border-radius: var(--r-mala); padding: 9px 12px; font-size: 13px; margin-bottom: 13px; }
.komunikat.ok  { background: color-mix(in srgb, var(--dobry) 12%, transparent); color: var(--dobry); }
.komunikat.zle { background: color-mix(in srgb, var(--zly) 12%, transparent); color: var(--zly); }
/* Ani sukces, ani błąd: generator zrobił co mógł, ale nie wszystko. Czerwień
   sugerowałaby awarię, zieleń — że jest w porządku. Jedno i drugie myli. */
.komunikat.uwaga { background: color-mix(in srgb, var(--sredni) 12%, transparent);
                   color: var(--sredni); }

/* Pola generatora w jednym rzędzie — to cztery krótkie wartości, a nie ankieta.
   Na wąskim ekranie zawijają się same. */
.formularz-poziomy {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.formularz-poziomy label { flex: 1 1 150px; min-width: 0; }
/* `.glowny` jest domyślnie na całą szerokość — w rzędzie wygląda to jak baner. */
.formularz-poziomy button { flex: none; width: auto; }

/* ------------------------------------------------ kryteria w karcie rozmowy */
.kryteria { list-style: none; margin: 4px 0 14px; padding: 0; }
.kryteria li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12.5px;
  border-top: 1px dashed var(--linia);
}
.kryteria li:first-child { border-top: 0; }
.kryteria .znak { font-weight: 700; text-align: center; }
.kryteria .dowod { display: block; color: var(--tekst-3); font-size: 11.5px; margin-top: 1px; }
.kryteria .waga { color: var(--tekst-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.kryteria .k-tak .znak { color: var(--dobry); }
.kryteria .k-czesc .znak { color: var(--sredni); }
.kryteria .k-nie .znak { color: var(--zly); }
/* „Nie dotyczy" nie wchodzi do wyniku — widoczne, ale wyciszone. */
.kryteria .k-nd { opacity: .55; }
.legenda-kryteriow { margin: -4px 0 10px; font-size: 11.5px; color: var(--tekst-3); }

/* ---------------------------------------------------------------- kalendarz */
.siatka-kalendarza {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
  border-radius: var(--r-mala);
  overflow: hidden;
}
.glowa-kalendarza {
  background: var(--plyta);
  padding: 7px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tekst-3);
}
.dzien-kalendarza {
  background: var(--plyta);
  min-height: 84px;
  padding: 5px 5px 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dzien-kalendarza.obcy { background: color-mix(in srgb, var(--tlo) 60%, var(--plyta)); }
.dzien-kalendarza.obcy .numer-dnia { opacity: .45; }
.dzien-kalendarza.dzis .numer-dnia {
  background: var(--akcent); color: #fff; border-radius: 999px;
  width: 20px; height: 20px; display: inline-flex;
  align-items: center; justify-content: center;
}
.numer-dnia { font-size: 12px; color: var(--tekst-3); }
.wpis-kalendarza {
  display: block; width: 100%; text-align: left;
  background: color-mix(in srgb, var(--akcent) 10%, transparent);
  color: var(--tekst);
  border: 0; border-left: 3px solid var(--akcent);
  border-radius: 3px;
  padding: 3px 5px;
  font: inherit; font-size: 11.5px; line-height: 1.3;
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wpis-kalendarza:hover { background: color-mix(in srgb, var(--akcent) 20%, transparent); }
.wpis-kalendarza b { font-weight: 600; }

/* Na telefonie siatka siedmiu kolumn jest nie do czytania — dni idą listą. */
@media (max-width: 760px) {
  .siatka-kalendarza { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .dzien-kalendarza { min-height: 62px; }
  .wpis-kalendarza { font-size: 10px; padding: 2px 3px; }
  .glowa-kalendarza { padding: 5px 3px; font-size: 10px; }
}

.uwaga {
  border: 1px solid var(--linia);
  border-left: 3px solid var(--sredni);
  border-radius: var(--r-mala);
  background: var(--plyta);
  padding: 12px 15px;
  font-size: 12.5px;
  color: var(--tekst-2);
  margin-bottom: 16px;
}
.uwaga b { color: var(--tekst); display: block; margin-bottom: 2px; }

.pusto { text-align: center; padding: 38px 20px; color: var(--tekst-3); font-size: 13px; }


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

#brama {
  position: fixed;
  inset: 0;
  background: var(--tlo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

#brama[hidden] { display: none; }

.brama-karta {
  width: 100%;
  max-width: 340px;
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  padding: 28px 26px 26px;
}

/* Marka na gorze karty, wysrodkowana i oddzielona linia od formularza. */
.brama-marka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--linia);
}
.brama-znak { height: 30px; width: auto; }
.brama-podpis { display: flex; align-items: center; gap: 12px; }
.brama-podpis img { display: block; width: auto; }
.brama-podpis .logo-sg img { height: 20px; }
.brama-podpis .logo-klient { gap: 12px; }
.brama-podpis .logo-klient img { height: 28px; }

.brama-wstep { margin: 0 0 20px; font-size: 12.5px; color: var(--tekst-3); }

/* „Nie pamiętasz hasła?” i „Wróć do logowania”: link pod głównym przyciskiem. */
.brama-link {
  display: block;
  margin: 12px auto 0;
  padding: 4px 6px;
  background: none;
  border: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--akcent);
}
.brama-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------ kto jest zalogowany */

.ja { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.ja .kto { text-align: right; line-height: 1.25; }
.ja .kto b { display: block; font-size: 12.5px; font-weight: 600; }
.ja .kto span { font-size: 11px; color: var(--tekst-3); }

/* Menu konta: imię, nazwisko i rola, pod spodem motyw, hasło, wylogowanie.
   Rozwija się po najechaniu, a na dotyku i z klawiatury po kliknięciu. */
.konto { position: relative; }
.konto-przycisk {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid transparent;
  padding: 5px 8px 5px 6px;
  color: var(--tekst);
  text-align: left;
}
.konto-przycisk .kto { text-align: left; }
.konto-przycisk::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border: solid var(--tekst-3);
  border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); flex: none; }
.konto:hover .konto-przycisk, .konto.otwarte .konto-przycisk { background: var(--tlo); border-color: var(--linia); }
.konto-inicjaly {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--akcent-tlo);
  color: var(--akcent);
  font: 600 12.5px Lexend, "Segoe UI", sans-serif;
  letter-spacing: .02em;
}
.konto-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 260px;
  margin-top: 6px;
  padding: 6px;
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(15, 18, 22, .12);
  z-index: 30;
}
.konto-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.konto:hover .konto-menu, .konto.otwarte .konto-menu, .konto:focus-within .konto-menu { display: grid; gap: 2px; }
.konto-naglowek { padding: 8px 10px 10px; border-bottom: 1px solid var(--linia); margin-bottom: 4px; line-height: 1.35; }
.konto-naglowek b { display: block; font-size: 13px; }
.konto-naglowek span { font-size: 12px; color: var(--tekst-3); overflow-wrap: anywhere; }
.konto-sekcja { padding: 6px 10px 10px; border-bottom: 1px solid var(--linia); margin-bottom: 4px; }
.konto-etykieta { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 6px; }
.motywy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; background: var(--tlo); border-radius: var(--r-mala); }
.motywy button { padding: 5px 4px; font-size: 12px; font-weight: 500; background: none; color: var(--tekst-2); border-radius: 5px; }
.motywy button[aria-pressed="true"] { background: var(--plyta); color: var(--tekst); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 18, 22, .12); }
.konto-pozycja { display: block; width: 100%; text-align: left; background: none; padding: 8px 10px; font-weight: 500; color: var(--tekst); }
.konto-pozycja:hover { background: var(--tlo); }
.konto-pozycja.wyloguj { color: var(--zly); }

.plakietka-roli {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--akcent);
  background: var(--akcent-tlo);
  border-radius: 999px;
  padding: 2px 8px;
}

.haslo-jednorazowe {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 15px;
  background: var(--tlo);
  border: 1px dashed var(--linia-mocna);
  border-radius: var(--r-mala);
  padding: 9px 12px;
  margin-top: 7px;
  user-select: all;
  word-break: break-all;
}

/* ------------------------------------------------- podgląd pojedynczej rozmowy */

tr.klikalny { cursor: pointer; }
tr.klikalny:hover { background: var(--tlo); }

.podglad {
  width: min(640px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  overflow: auto;
  border: 1px solid var(--linia);
  border-radius: var(--r);
  background: var(--plyta);
  color: var(--tekst);
  padding: 20px;
}
.podglad::backdrop { background: rgba(0, 0, 0, .45); }

.podglad-gora {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.podglad-gora h2 { margin: 0; font-size: 17px; flex: 1; min-width: 0; }
.podglad h3 {
  margin: 20px 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tekst-3);
}

.podglad-wynik { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }

/* Dwie kolumny faktów; na telefonie jedna, bo etykieta i wartość obok siebie
   przestają się mieścić. */
.podglad-fakty { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
@media (max-width: 560px) { .podglad-fakty { grid-template-columns: 1fr; } }

.podglad-fakty .pole {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linia);
  font-size: 12.5px;
}
.podglad-fakty .pole span { color: var(--tekst-3); }
.podglad-fakty .pole b { font-weight: 600; text-align: right; }

.transkrypt {
  margin: 0;
  padding: 12px 14px;
  max-height: 320px;
  overflow: auto;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--r-mala);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Miara i kafelek, ktore otwieraja rozbicie. Kursor i tlo pod kursorem sa
   jedyna zapowiedzia, ze da sie w to kliknac. */
.miara.klikalna, .kafelek.klikalny { cursor: pointer; }
.miara.klikalna:hover .opis { color: var(--akcent); }
.kafelek.klikalny:hover { border-color: var(--akcent); }


/* Pasek filtrów raportu: pola równej szerokości i przycisk na końcu rzędu.
   Na wąskim ekranie schodzą pod siebie, bo cztery pola z datami się nie mieszczą. */
.pasek-raportu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
}
.pasek-raportu label { margin-bottom: 0; }
.pasek-raportu button { width: auto; white-space: nowrap; }

@media (max-width: 860px) {
  .pasek-raportu { grid-template-columns: 1fr 1fr; }
  .pasek-raportu button { grid-column: 1 / -1; width: 100%; }
}

/* ------------------------------------------------- wnioski i ocena rozmowy */

.wniosek { padding: 11px 0 11px 13px; border-left: 3px solid var(--linia-mocna); }
.wniosek + .wniosek { border-top: 1px solid var(--linia); }
.wniosek.w-alarm { border-left-color: var(--zly); }
.wniosek.w-uwaga { border-left-color: var(--sredni); }
.wniosek.w-dobre { border-left-color: var(--dobry); }
.wniosek .drobne { margin-top: 2px; }

/* Uzasadnienie stoi pod paskiem kompetencji i jest wcięte, żeby było widać,
   że należy do niej, a nie do następnej pozycji. */
.uzasadnienie {
  margin: -2px 0 12px 0;
  padding-left: 13px;
  border-left: 2px solid var(--linia);
  font-size: 12.5px;
  color: var(--tekst-2);
}
.uzasadnienie.brak { color: var(--tekst-3); font-style: italic; }

.ocena-wiersz {
  display: grid;
  grid-template-columns: 130px 72px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--linia);
}
.ocena-nazwa { font-size: 12.5px; padding-top: 8px; }
.ocena-uzasadnienie { min-height: 40px; font-size: 12.5px; }

.ocena-stopka {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  margin-top: 14px;
}
.ocena-stopka label { flex: 1 1 130px; }
.ocena-stopka button { width: auto; }

@media (max-width: 560px) {
  .ocena-wiersz { grid-template-columns: 1fr 72px; }
  .ocena-uzasadnienie { grid-column: 1 / -1; }
}

/* Podsumowanie rozmowy — jedno miejsce, od którego zaczyna się czytanie. */
.podsumowanie {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-left: 3px solid var(--akcent);
  background: var(--akcent-tlo);
  border-radius: 0 var(--r-mala) var(--r-mala) 0;
  font-size: 13px;
  color: var(--tekst);
}

/* ------------------------------------------------- przegląd: hero i wykresy */

.pasek-zakresu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pasek-zakresu .nazwa { margin: 0; }
.pasek-zakresu select { width: auto; min-width: 190px; }

.naglowek-wyniku {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 16px;
}
@media (max-width: 760px) {
  .naglowek-wyniku { grid-template-columns: 1fr; gap: 12px; }
}

.hero { display: flex; align-items: baseline; gap: 14px; }
.hero-liczba {
  font-size: 58px;
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-etykieta { font-size: 12.5px; color: var(--tekst-2); }

/* Rusztowanie wykresu jest recesywne: dane czarne, siatka i oś szare. */
.wykres { width: 100%; height: auto; display: block; overflow: visible; }
.wykres .siatka { stroke: var(--linia); stroke-width: 1; }
.wykres .os { fill: var(--tekst-3); font-size: 10px; }
.wykres .linia { fill: none; stroke: var(--akcent); stroke-width: 2;
                 stroke-linejoin: round; stroke-linecap: round; }
.wykres .punkt { fill: var(--akcent); stroke: var(--plyta); stroke-width: 2; }
.wykres .wartosc-konca { fill: var(--tekst); font-size: 12px; font-weight: 600; }

.mapa-tabela { width: 100%; border-collapse: separate; border-spacing: 2px; }
.mapa-tabela th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tekst-3);
  padding: 0 8px 6px;
  text-align: right;
}
.mapa-tabela th:first-child { text-align: left; }
.mapa-nazwa { font-size: 12.5px; padding-right: 12px; white-space: nowrap; }
.mapa-komorka {
  text-align: right;
  padding: 9px 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-mala);
  cursor: pointer;
  min-width: 74px;
}
.mapa-komorka:hover { outline: 2px solid var(--akcent); outline-offset: -2px; }
.mapa-razem { cursor: default; font-weight: 600; color: var(--tekst-2); }
.mapa-razem:hover { outline: none; }

/* Kluczowe kroki: procent na górze, „ile z ilu" pod spodem — przy trzech
   rozmowach 67% to dwie osoby, i to ma być widać bez najeżdżania myszą. */
.tabela-krokow .mapa-komorka { line-height: 1.2; }
.krok-ile { display: block; font-size: 10.5px; color: var(--tekst-3); }
.krok-malo { opacity: .6; }
.krok-pusty { cursor: default; color: var(--tekst-3); }
.krok-pusty:hover { outline: none; }
.tabela-krokow .mapa-nazwa .drobne { display: block; }

/* Słupki: kolor niosą dane, wartość i etykiety zostają w kolorach tekstu. */
.wykres .slupek { cursor: pointer; }
.wykres .slupek:hover rect { opacity: .78; }
.wykres rect.w-dobry { fill: var(--dobry); }
.wykres rect.w-sredni { fill: var(--sredni); }
.wykres rect.w-zly { fill: var(--zly); }
.wykres .wartosc-slupka { fill: var(--tekst-2); font-size: 10.5px; font-weight: 600; }

/* Nagłówek grupy salonu w tabeli zespołu: ma oddzielać, nie konkurować
   z nazwiskami — stąd tło zamiast pogrubionej ramki. */
.grupa-salonu td {
  background: var(--tlo);
  padding-top: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linia-mocna);
}
.grupa-salonu td:first-child .drobne { margin-left: 8px; }

/* Kto rośnie, kto spada — wiersz osoby z iskierką, wynikiem i zmianą. */
.kierunek {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linia);
}
.kierunek:last-child { border-bottom: 0; }
.kierunek-kto { flex: 1; min-width: 0; }
.kierunek-kto b { display: block; font-size: 13px; font-weight: 600; }
.kierunek .wynik { min-width: 34px; text-align: right; }
.kierunek .trend { min-width: 48px; text-align: right; }
.klikalny.kierunek { cursor: pointer; }
.klikalny.kierunek:hover .kierunek-kto b { color: var(--akcent); }

/* Różnica wobec zespołu pod paskiem kompetencji w karcie doradcy. */
/* Dwa punkty odniesienia pod paskiem kompetencji: salon i cała grupa.
   Kolor niesie wyłącznie różnica, nazwy zostają w kolorze tekstu. */
.porownanie {
  margin: -6px 0 12px;
  padding-left: 13px;
  font-size: 12px;
  color: var(--tekst-3);
}
.porownanie .t-gora, .porownanie .t-dol { font-weight: 600; }

/* Przełącznik dyrektora: kulisy badania przed kierownikami. Opis pod spodem,
   bo samo „ukryj kulisy" nic nie mówi komuś, kto widzi to pierwszy raz. */
.przelacznik-kulis {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--linia);
  border-radius: var(--r-mala);
  font-size: 12.5px;
  color: var(--tekst-2);
  cursor: pointer;
}
.przelacznik-kulis input { width: auto; margin-top: 3px; }
.przelacznik-kulis b { display: block; color: var(--tekst); margin-bottom: 2px; }

/* ------------------------------------------------------------ tablica telefonii */

/* Kafelek = numer. Kolor paska po lewej to stan, żeby jednym rzutem oka
   zobaczyć, co rozmawia, co odpoczywa i co nie może dzwonić. */
.tablica-pasek {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin-bottom: 14px; font-size: 13px; color: var(--tekst-2);
}
.tablica-pasek b { color: var(--tekst); font-weight: 600; }
.tablica-pasek .odswiezono { margin-left: auto; font-size: 12px; color: var(--tekst-3); }
.tablica {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.numer-kafel {
  background: var(--plyta); border: 1px solid var(--linia); border-left-width: 4px;
  border-radius: var(--r); padding: 12px 14px; display: grid; gap: 6px; align-content: start;
  min-width: 0;
}
.numer-kafel .nr { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 15px; }
.numer-kafel .kto { font-size: 12px; color: var(--tekst-3); }
.numer-kafel .stan { font-weight: 600; font-size: 13.5px; display: flex; gap: 7px; align-items: center; }
.numer-kafel .szczegol { font-size: 12px; color: var(--tekst-2); line-height: 1.4; }
.numer-kafel ul { margin: 0; padding-left: 16px; }
.kropka { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--linia-mocna); }
.st-rozmawia { --kolor: var(--dobry); }
.st-dzwoni, .st-laczy { --kolor: var(--akcent); }
.st-gotowy { --kolor: var(--dobry); }
.st-po_rozmowie { --kolor: var(--sredni); }
.st-bez_rejestracji, .st-spam { --kolor: var(--zly); }
.st-wylaczony, .st-wycofywany { --kolor: var(--linia-mocna); }
.numer-kafel[class*="st-"] { border-left-color: var(--kolor); }
.kropka[class*="st-"] { background: var(--kolor); }
.numer-kafel .kropka { background: var(--kolor); }
.st-gotowy.kropka, .numer-kafel.st-gotowy .kropka { background: transparent; border: 2px solid var(--kolor); width: 9px; height: 9px; box-sizing: border-box; }
.numer-kafel.st-wylaczony { opacity: .6; }
.st-rozmawia .kropka, .st-dzwoni .kropka, .st-laczy .kropka { animation: tetno 1.2s ease-in-out infinite; }
@keyframes tetno { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .kropka { animation: none !important; } }
.tablica-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  font-size: 12px; color: var(--tekst-3);
}
.tablica-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.tablica-tytul {
  margin: 18px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tekst-3);
}
.tablica-pasek + div + .tablica-tytul, .tablica-pasek + .tablica-tytul { margin-top: 4px; }
.numer-kafel .akcje-kafla { display: flex; gap: 6px; margin-top: 2px; }
.numer-kafel .akcje-kafla button { font-size: 12px; padding: 4px 9px; }

/* Gotowosc mostu: co blokuje dzwonienie i co z tym zrobic. */
.gotowosc { display: grid; gap: 6px; margin-bottom: 14px; }
.gotowosc > div { border: 1px solid var(--linia); border-left-width: 4px; border-radius: var(--r-mala);
  padding: 8px 12px; font-size: 13px; background: var(--plyta); }
.gotowosc-ok { border-left-color: var(--dobry) !important; color: var(--tekst-2); }
.gotowosc-uwaga { border-left-color: var(--sredni) !important; }
.gotowosc-blad { border-left-color: var(--zly) !important; font-weight: 600; }


/* ======================================================================
   STYL APPLE (10.10.2026, skill apple-design)
   Nadpisuje sam wygląd: kolory, cienie, zaokrąglenia, typografię, ruch.
   Układ, klasy i zachowanie zostają jak wyżej — app.js niczego tu nie zakłada.
   ====================================================================== */

body {
  font: 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
}

/* ---- pasek: materiał z rozmyciem, krawędź dopiero nad przewiniętą treścią */
.gora {
  background: var(--pasek);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: transparent;
  transition: border-color .2s ease;
}
.gora.nad-trescia { border-bottom-color: var(--linia); }

/* ---- zakładki: przełącznik segmentowy; wybrany segment to „wskaźnik”
   przesuwany sprężyną w app.js (.nav-wskaznik). Bez JS wybrany przycisk
   ma własne tło — dlatego tło zdejmujemy dopiero, gdy wskaźnik istnieje. */
nav { position: relative; }
nav button { border-radius: 8px; position: relative; z-index: 1; transition: color .15s ease; }
nav button:hover { background: none; color: var(--tekst); }
nav button.wybrany { background: var(--segment); color: var(--tekst); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
nav.z-wskaznikiem button.wybrany { background: none; box-shadow: none; }
.nav-wskaznik {
  position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: 0;
  border-radius: 8px; background: var(--segment);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
  pointer-events: none; will-change: transform, width;
}
@media (min-width: 1181px) {
  /* Szeroki ekran: tor przełącznika na środku paska. Nawigacja ma szerokość
     treści, ale dalej kurczy się do dostępnego miejsca — ulozNawigacje mierzy
     ją tak samo jak wcześniej. */
  nav { flex: 0 1 auto; margin: 0 auto; padding: 3px; gap: 2px; background: var(--szary); border-radius: 11px; }
  nav button { padding: 6px 13px; }
}
@media (max-width: 1180px) {
  /* Wąski ekran: zakładki w osobnym rzędzie, bez toru — wybrany segment w akcencie. */
  nav button.wybrany, .nav-wskaznik { background: var(--akcent-tlo); box-shadow: none; }
  nav button.wybrany { color: var(--akcent); }
}

/* ---- menu rozwijane: materiał, zakotwiczone przy przycisku, który je otwiera */
.wiecej-lista, .konto-menu {
  background: var(--material);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border-color: var(--linia);
  border-radius: 14px;
  box-shadow: var(--cien-duzy);
  transform-origin: top right;
}
.wiecej:hover .wiecej-lista, .wiecej.otwarte .wiecej-lista, .wiecej:focus-within .wiecej-lista,
.konto:hover .konto-menu, .konto.otwarte .konto-menu, .konto:focus-within .konto-menu {
  animation: menu-wejscie .18s cubic-bezier(.2, .9, .3, 1);
}
@keyframes menu-wejscie { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.konto-pozycja, .wiecej-lista button { border-radius: 8px; }
.konto-pozycja:hover, .wiecej-lista button:hover { background: var(--szary); }
.konto-przycisk { border-radius: 12px; }
.konto:hover .konto-przycisk, .konto.otwarte .konto-przycisk { background: var(--szary); border-color: transparent; }
.motywy { background: var(--szary); border-radius: 9px; }
.motywy button { border-radius: 7px; }
.motywy button[aria-pressed="true"] { background: var(--segment); }

/* ---- płyty i kafelki: tło zamiast ramki, miękki cień */
.plyta, .kafelek, .brama-karta {
  border-color: transparent;
  box-shadow: var(--cien);
}
.kafelek { padding: 16px 18px; border-radius: var(--r); }
.kafelek .liczba { font-size: 28px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.kafelek .etykieta { font-size: 12px; margin-top: 4px; }
.kafelek.klikalny { transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s ease; }
.kafelek.klikalny:hover { border-color: transparent; box-shadow: var(--cien), 0 0 0 2px var(--akcent); }

/* ---- typografia: duże ciaśniej, małe luźniej; nagłówki zdaniem, nie wersalikami */
.naglowek-sekcji h2 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.plyta h3 {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  text-transform: none; color: var(--tekst);
}
.tablica-tytul, .konto-etykieta, .glowa-kalendarza {
  font-size: 12px; font-weight: 600; letter-spacing: .01em; text-transform: none;
}
.podglad h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--tekst); }
label .nazwa { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tekst-2); }
th { font-size: 12px; letter-spacing: 0; text-transform: none; }
.mapa-tabela th { font-size: 11.5px; letter-spacing: 0; text-transform: none; }
.hero-liczba { font-size: 64px; font-weight: 700; letter-spacing: -.045em; }
.podglad-gora h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.plakietka-roli { letter-spacing: .02em; text-transform: none; font-size: 11px; }

/* ---- pola formularzy */
input, select, textarea { border-radius: var(--r-mala); padding: 9px 12px; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--akcent-tlo); }
.lista-wyboru, .transkrypt, .haslo-jednorazowe { border-radius: var(--r-mala); }

/* ---- przyciski: reakcja od razu przy wciśnięciu (:active), nie po puszczeniu */
button, a.przycisk {
  border-radius: var(--r-mala);
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), background-color .12s ease, color .12s ease, filter .12s ease;
}
button:active:not(:disabled), a.przycisk:active, .kafelek.klikalny:active {
  transform: scale(.97);
  transition-duration: .08s;
}
.glowny { font-weight: 600; }
.drugi, a.przycisk.drugi {
  background: var(--szary);
  border-color: transparent;
  color: var(--tekst);
  font-weight: 550;
}
.drugi:hover, a.przycisk.drugi:hover { background: var(--akcent-tlo); border-color: transparent; color: var(--akcent); }
.drugi.ostrzegawczy:hover { background: color-mix(in srgb, var(--zly) 14%, transparent); border-color: transparent; color: var(--zly); }

/* ---- paski wartości i drobne elementy */
.miara .rynna { height: 8px; border-radius: 999px; background: var(--szary); }
.miara .rynna i { border-radius: 999px; }
.uwaga, .gotowosc > div, .numer-kafel {
  border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;
  box-shadow: var(--cien);
}
.przelacznik-kulis { border-color: transparent; background: var(--plyta); box-shadow: var(--cien); }
.uwaga, .gotowosc > div { border-radius: var(--r-mala); }
.numer-kafel { border-radius: 14px; }
.wpis-kalendarza { border-radius: 5px; }
tr.klikalny:hover { background: color-mix(in srgb, var(--szary) 60%, transparent); }

/* ---- logowanie */
.brama-karta { border-radius: 22px; padding: 32px 28px 28px; box-shadow: var(--cien-duzy); }

/* ---- okna (dialog): wchodzą z miejsca, w którym zostaną; na telefonie jako
   arkusz od dołu, który można zsunąć palcem (app.js, uchwyt .uchwyt-okna). */
.podglad {
  border: 0;
  border-radius: 22px;
  box-shadow: var(--cien-duzy);
  padding: 22px 24px 24px;
}
.podglad[open] { animation: okno-wejscie .28s cubic-bezier(.2, .9, .25, 1); }
.podglad[open]::backdrop { background: rgba(0, 0, 0, .38); animation: zaslona-wejscie .28s ease; }
@keyframes okno-wejscie { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes zaslona-wejscie { from { opacity: 0; } }
@keyframes arkusz-wejscie { from { transform: translateY(100%); } }
.uchwyt-okna { display: none; }
@media (max-width: 600px) {
  .podglad {
    width: 100%; max-width: 100%;
    margin: auto 0 0;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    padding: 0 18px 28px;
  }
  .podglad[open] { animation: arkusz-wejscie .34s cubic-bezier(.2, .9, .25, 1); }
  .uchwyt-okna {
    display: block; position: sticky; top: 0; z-index: 2;
    margin: 0 -18px 6px; padding: 9px 0 12px;
    background: linear-gradient(var(--plyta) 70%, transparent);
    touch-action: none; cursor: grab;
  }
  .uchwyt-okna::before { content: ""; display: block; width: 38px; height: 5px; margin: 0 auto;
    border-radius: 3px; background: color-mix(in srgb, var(--tekst-3) 55%, transparent); }
}

/* ---- dostępność: mniej ruchu, mniej przezroczystości, więcej kontrastu */
@media (prefers-reduced-motion: reduce) {
  button, a.przycisk, .kafelek.klikalny { transition: none; }
  button:active:not(:disabled), a.przycisk:active, .kafelek.klikalny:active { transform: none; }
  .podglad[open], .podglad[open]::backdrop { animation: zaslona-wejscie .2s ease; }
  .wiecej-lista, .konto-menu { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .gora, .wiecej-lista, .konto-menu { background: var(--plyta); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .gora, .wiecej-lista, .konto-menu { background: var(--plyta); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .plyta, .kafelek, .brama-karta, .podglad, .numer-kafel, .uwaga { box-shadow: none; border: 1px solid var(--linia-mocna); }
  .drugi, a.przycisk.drugi { border-color: var(--linia-mocna); }
}

/* ---- wpadki klienta AI (okno admina) */
.podglad.szerokie { width: min(820px, calc(100vw - 32px)); }
@media (max-width: 600px) { .podglad.szerokie { width: 100%; } }
.filtry-wpadek { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.filtry-wpadek button { font-size: 12.5px; padding: 6px 11px; border-radius: 999px; }
.filtry-wpadek button[aria-pressed="true"] { background: var(--tekst); color: var(--plyta); }
.rozmowa-wpadek { padding: 14px 0; border-top: 1px solid var(--linia); }
.rozmowa-wpadek-gora { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.rozmowa-wpadek-gora button { flex: none; }
.wpadka { border-left: 3px solid var(--linia-mocna); padding: 8px 0 8px 12px; margin: 8px 0; font-size: 13px; }
.wpadka.waga-zly { border-left-color: var(--zly); }
.wpadka.waga-sredni { border-left-color: var(--sredni); }
.wpadka q { display: block; margin: 4px 0; font-weight: 600; color: var(--tekst); }
.wpadka-naglowek { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.wpadka-naglowek .znacznik { background: var(--szary); color: var(--tekst); }
.wpadka-reakcja { margin-top: 4px; color: var(--zly); font-size: 12.5px; }

/* ======================================================================
   STYLE WYGLADU (11.10.2026): Minimalny i Cieply — wybor w menu konta,
   atrybut data-styl na <html>. Domyslny to STYL APPLE wyzej. Kazdy styl ma
   kolory dla jasnego i ciemnego motywu (wymuszonego i „jak system").
   KONTRAST jak wyzej: --tekst-3 >= 4.5:1, ramki pol >= 3:1 na --plyta.
   ====================================================================== */

/* ---- MINIMALNY: biel i czern, cienkie linie, bez cieni i rozmyc */
:root[data-styl="minimalny"] {
  --tlo: #ffffff; --plyta: #ffffff; --pasek: #ffffff;
  --linia: #e6e6e6; --linia-mocna: #8a8a8a;          /* 3.4:1 */
  --tekst: #0a0a0a; --tekst-2: #3f3f3f; --tekst-3: #6b6b6b;   /* 5.3:1 */
  --akcent: #0a0a0a; --akcent-tlo: #f2f2f2; --na-akcencie: #ffffff;
  --szary: #f2f2f2; --segment: #ffffff; --material: #ffffff;
  --cien: none; --cien-duzy: 0 0 0 1px #e6e6e6, 0 12px 32px rgba(0, 0, 0, .08);
  --r: 6px; --r-mala: 4px;
}
:root[data-styl="minimalny"][data-theme="dark"] {
  --tlo: #0a0a0a; --plyta: #0a0a0a; --pasek: #0a0a0a;
  --linia: #262626; --linia-mocna: #6e6e6e;          /* 3.7:1 */
  --tekst: #fafafa; --tekst-2: #c4c4c4; --tekst-3: #9a9a9a;   /* 6.9:1 */
  --akcent: #fafafa; --akcent-tlo: #1c1c1c; --na-akcencie: #0a0a0a;
  --szary: #1c1c1c; --segment: #0a0a0a; --material: #0a0a0a;
  --cien: none; --cien-duzy: 0 0 0 1px #262626, 0 12px 32px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root[data-styl="minimalny"]:not([data-theme="light"]) {
    --tlo: #0a0a0a; --plyta: #0a0a0a; --pasek: #0a0a0a;
    --linia: #262626; --linia-mocna: #6e6e6e;
    --tekst: #fafafa; --tekst-2: #c4c4c4; --tekst-3: #9a9a9a;
    --akcent: #fafafa; --akcent-tlo: #1c1c1c; --na-akcencie: #0a0a0a;
    --szary: #1c1c1c; --segment: #0a0a0a; --material: #0a0a0a;
    --cien: none; --cien-duzy: 0 0 0 1px #262626, 0 12px 32px rgba(0, 0, 0, .6);
  }
}
[data-styl="minimalny"] .gora { -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--linia); }
[data-styl="minimalny"] .plyta, [data-styl="minimalny"] .kafelek,
[data-styl="minimalny"] .brama-karta, [data-styl="minimalny"] .podglad { border: 1px solid var(--linia); box-shadow: none; }
[data-styl="minimalny"] .uwaga, [data-styl="minimalny"] .gotowosc > div, [data-styl="minimalny"] .numer-kafel {
  border-top-color: var(--linia); border-right-color: var(--linia); border-bottom-color: var(--linia); box-shadow: none; }
[data-styl="minimalny"] .przelacznik-kulis { border-color: var(--linia); box-shadow: none; }
[data-styl="minimalny"] .wiecej-lista, [data-styl="minimalny"] .konto-menu { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Zakladki: podkreslenie zamiast „pigulki" */
[data-styl="minimalny"] nav { background: none; padding: 0; gap: 4px; }
[data-styl="minimalny"] nav button { border-radius: 0; padding-left: 10px; padding-right: 10px; }
[data-styl="minimalny"] nav button.wybrany { background: none; box-shadow: inset 0 -2px 0 var(--tekst); color: var(--tekst); }
[data-styl="minimalny"] nav.z-wskaznikiem button.wybrany { box-shadow: none; }
[data-styl="minimalny"] .nav-wskaznik { background: none; box-shadow: inset 0 -2px 0 var(--tekst); border-radius: 0; }
[data-styl="minimalny"] .drugi, [data-styl="minimalny"] a.przycisk.drugi { background: transparent; border-color: var(--linia-mocna); }
[data-styl="minimalny"] .drugi:hover, [data-styl="minimalny"] a.przycisk.drugi:hover { background: var(--szary); border-color: var(--tekst); color: var(--tekst); }
[data-styl="minimalny"] .kafelek .liczba, [data-styl="minimalny"] .hero-liczba { font-weight: 600; }
[data-styl="minimalny"] .naglowek-sekcji h2, [data-styl="minimalny"] .plyta h3 { font-weight: 600; letter-spacing: -.02em; }
[data-styl="minimalny"] .podglad[open] { animation: zaslona-wejscie .15s ease; }

/* ---- CIEPLY: kremowe tlo, terakota, naglowki szeryfowe — jak dobry raport papierowy */
:root[data-styl="cieply"] {
  --tlo: #f5efe6; --plyta: #fffdf9; --pasek: rgba(255, 253, 249, .82);
  --linia: #eadfcf; --linia-mocna: #a08c78;          /* 3.2:1 */
  --tekst: #2b2118; --tekst-2: #5c4d40; --tekst-3: #6e5f52;   /* 6.0:1 */
  --akcent: #b4532a; --akcent-tlo: #f8e7dc; --na-akcencie: #ffffff;   /* akcent 4.9:1 */
  --dobry: #3d7a3a; --sredni: #9a6512; --zly: #b0362b;
  --szary: rgba(120, 90, 60, .12); --segment: #fffdf9; --material: rgba(255, 252, 246, .9);
  --cien: 0 1px 2px rgba(80, 50, 20, .05), 0 8px 24px rgba(80, 50, 20, .07);
  --cien-duzy: 0 2px 6px rgba(80, 50, 20, .08), 0 18px 48px rgba(80, 50, 20, .18);
  --r: 14px; --r-mala: 9px;
}
:root[data-styl="cieply"][data-theme="dark"] {
  --tlo: #17130f; --plyta: #221c17; --pasek: rgba(34, 28, 23, .82);
  --linia: #3a3029; --linia-mocna: #7f6e60;          /* 3.4:1 */
  --tekst: #f3eadf; --tekst-2: #d0c2b2; --tekst-3: #a8998a;   /* 6.3:1 */
  --akcent: #e3936a; --akcent-tlo: #3a2519; --na-akcencie: #1f140d;
  --dobry: #7cc27a; --sredni: #dcaa55; --zly: #e8796c;
  --szary: rgba(200, 170, 140, .14); --segment: #3a3029; --material: rgba(44, 36, 30, .9);
  --cien: 0 0 0 1px rgba(255, 240, 220, .04);
  --cien-duzy: 0 0 0 1px rgba(255, 240, 220, .07), 0 18px 48px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root[data-styl="cieply"]:not([data-theme="light"]) {
    --tlo: #17130f; --plyta: #221c17; --pasek: rgba(34, 28, 23, .82);
    --linia: #3a3029; --linia-mocna: #7f6e60;
    --tekst: #f3eadf; --tekst-2: #d0c2b2; --tekst-3: #a8998a;
    --akcent: #e3936a; --akcent-tlo: #3a2519; --na-akcencie: #1f140d;
    --dobry: #7cc27a; --sredni: #dcaa55; --zly: #e8796c;
    --szary: rgba(200, 170, 140, .14); --segment: #3a3029; --material: rgba(44, 36, 30, .9);
    --cien: 0 0 0 1px rgba(255, 240, 220, .04);
    --cien-duzy: 0 0 0 1px rgba(255, 240, 220, .07), 0 18px 48px rgba(0, 0, 0, .6);
  }
}
[data-styl="cieply"] .naglowek-sekcji h2, [data-styl="cieply"] .plyta h3, [data-styl="cieply"] .podglad h3,
[data-styl="cieply"] .podglad-gora h2, [data-styl="cieply"] .hero-liczba, [data-styl="cieply"] .kafelek .liczba {
  font-family: "Iowan Old Style", "Charter", "Georgia", "Cambria", serif;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.01em;
}
[data-styl="cieply"] .hero-liczba { font-weight: 600; letter-spacing: -.03em; }
[data-styl="cieply"] .kafelek .liczba { font-weight: 600; }

/* ---- zakladka Raporty */
.sekcje-raportu { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; }
.sekcja-raportu { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 8px 10px;
  border-radius: var(--r-mala); cursor: pointer; }
.sekcja-raportu:hover { background: var(--szary); }
.sekcja-raportu input { width: auto; margin-top: 3px; flex: none; }
.sekcja-raportu b { display: block; font-weight: 600; font-size: 13.5px; }
.sekcja-raportu .drobne { display: block; }
.szybkie-okresy { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 6px; }
.szybkie-okresy button { font-size: 12.5px; padding: 5px 10px; }
.przyciski-raportu { display: flex; gap: 10px; margin-top: 6px; }
.przyciski-raportu .glowny { width: auto; padding-left: 22px; padding-right: 22px; }

/* ---- linki do dokumentow pod formularzem logowania */
.brama-dokumenty { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--tekst-3); }
.brama-dokumenty a, .pomoc a { color: var(--akcent); text-decoration: none; }
.brama-dokumenty a:hover, .pomoc a:hover { text-decoration: underline; }
a.konto-pozycja { text-decoration: none; font-size: 13.5px; }

/* Plyty obok siebie w siatce nie dostaja odstepu „pod poprzednia" — inaczej druga
   kolumna startowala 16 px nizej niz pierwsza (Raporty, Telefonia). */
.bok-i-tresc > .plyta + .plyta, .dwie-kolumny > .plyta + .plyta { margin-top: 0; }

/* ---- adres panelu grupy (Grupy i konta) i nazwa grupy na stronie logowania */
.adres-grupy { margin-top: 6px; font-weight: 400; font-size: 12.5px; color: var(--tekst-2); }
.adres-grupy a { color: var(--akcent); text-decoration: none; }
.adres-grupy label { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 0; }
.adres-grupy input { width: 170px; padding: 2px 6px; font-size: 12.5px; }
.brama-grupa { margin: -4px 0 0; font-size: 13px; font-weight: 600; color: var(--tekst-2); }