/* Panel klienta. Wygląd oparty wyłącznie na tokenach z tokens.css. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Pasek górny */
.pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o4);
  padding: var(--o3) var(--o5);
  background: var(--powierzchnia);
  border-bottom: 1px solid var(--obwodka);
  position: sticky;
  top: 0;
  z-index: 10;
}
.marka { display: flex; align-items: center; gap: var(--o3); }
.znak {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-przycisk);
  background: var(--marka);
  color: var(--tekst-na-marce);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.nazwa { font-weight: 600; }
.pasek-prawa { display: flex; align-items: center; gap: var(--o3); }
.konto { color: var(--tekst-cichy); font-size: 14px; }
.ikonka {
  min-width: var(--dotyk); min-height: var(--dotyk);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-przycisk);
  background: var(--powierzchnia);
  color: var(--tekst);
  font-size: 16px;
  cursor: pointer;
}
.ikonka:hover { background: var(--powierzchnia-cicha); }

/* Zakładki */
.zakladki {
  display: flex;
  gap: var(--o1);
  padding: 0 var(--o5);
  background: var(--powierzchnia);
  border-bottom: 1px solid var(--obwodka);
  overflow-x: auto;
}
.zakladka {
  display: flex; align-items: center;
  min-height: var(--dotyk);
  padding: 0 var(--o4);
  color: var(--tekst-cichy);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.zakladka.aktywna { color: var(--marka); border-bottom-color: var(--marka); }
.zakladka.wylaczona { opacity: 0.45; pointer-events: none; }

/* Treść */
.tresc { max-width: 960px; margin: 0 auto; padding: var(--o5); }
.siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--o4);
  margin-bottom: var(--o4);
}

/* Karty */
.karta {
  background: var(--powierzchnia);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-karta);
  box-shadow: var(--cien);
  padding: var(--o5);
}
.karta-gora {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--o3);
  margin-bottom: var(--o3);
}
.karta h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--tekst-cichy); text-transform: uppercase; letter-spacing: 0.04em; }
.duza { margin: 0 0 var(--o1); font-size: 22px; font-weight: 600; }
.cichy { color: var(--tekst-cichy); font-size: 14px; margin: 0; }
.drobne { font-size: 13px; margin-top: var(--o3); }

/* Karta automatu zmienia kolor zależnie od progu */
.karta-automat { border-left: 4px solid var(--neutralny); }
.karta-automat.stan-ok { border-left-color: var(--sukces); }
.karta-automat.stan-uwaga { border-left-color: var(--uwaga); }
.karta-automat.stan-stop { border-left-color: var(--blad); }

/* Plakietki. Kolor nigdy nie jest jedynym nośnikiem informacji, zawsze jest przy nim słowo. */
.plakietka {
  display: inline-flex; align-items: center; gap: var(--o1);
  padding: 2px var(--o3);
  border-radius: var(--r-plakietka);
  font-size: 13px; font-weight: 500;
  background: var(--neutralny-tlo); color: var(--tekst-cichy);
  white-space: nowrap;
}
.plakietka.ok { background: var(--sukces-tlo); color: var(--sukces); }
.plakietka.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.plakietka.blad { background: var(--blad-tlo); color: var(--blad); }

/* Licznik dzienny */
.licznik { margin-top: var(--o5); }
.licznik-gora { display: flex; justify-content: space-between; font-size: 14px; font-variant-numeric: tabular-nums; margin-bottom: var(--o2); }
.pasek-postepu { height: 8px; border-radius: var(--r-plakietka); background: var(--powierzchnia-cicha); overflow: hidden; }
.pasek-wypelnienie { height: 100%; width: 0; background: var(--sukces); transition: width 240ms ease; }
.stan-uwaga .pasek-wypelnienie { background: var(--uwaga); }
.stan-stop .pasek-wypelnienie { background: var(--blad); }

/* Przyciski */
.przycisk {
  min-height: var(--dotyk);
  padding: 0 var(--o5);
  border-radius: var(--r-przycisk);
  border: 1px solid transparent;
  background: var(--marka);
  color: var(--tekst-na-marce);
  font-family: var(--font);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.przycisk:hover { background: var(--marka-ciemna); }
.przycisk.drugorzedny { background: var(--powierzchnia); color: var(--tekst); border-color: var(--obwodka); }
.przycisk.drugorzedny:hover { background: var(--powierzchnia-cicha); }
.przycisk[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Ten sam wyglad, gdy przycisk jest odnosnikiem. `min-height` nie ustawia wysokosci tekstu
   w elemencie liniowym, wiec bez `inline-flex` odnosnik bylby nizszy od sasiedniego przycisku. */
a.przycisk { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }

/* Lista publikacji */
.karta-lista { padding: var(--o5) 0 var(--o2); }
.karta-lista .karta-gora { padding: 0 var(--o5); }
.wiersz { border-top: 1px solid var(--obwodka); }
.wiersz-gora {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--o3);
  width: 100%;
  min-height: var(--dotyk);
  padding: var(--o3) var(--o5);
  background: none; border: 0;
  font-family: var(--font); font-size: 15px; color: var(--tekst);
  text-align: left; cursor: pointer;
}
.wiersz-gora:hover { background: var(--powierzchnia-cicha); }
.grupa { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.godzina { color: var(--tekst-cichy); font-size: 14px; font-variant-numeric: tabular-nums; }
.dowod { padding: 0 var(--o5) var(--o4); display: none; }
.wiersz.otwarty .dowod { display: block; }
.dowod dl { display: grid; grid-template-columns: auto 1fr; gap: var(--o2) var(--o4); margin: 0; font-size: 14px; }
.dowod dt { color: var(--tekst-cichy); }
.dowod dd { margin: 0; word-break: break-word; }
.dowod a { color: var(--marka); }
.dowod img { max-width: 100%; border-radius: var(--r-przycisk); border: 1px solid var(--obwodka); margin-top: var(--o3); }

/* Stan pusty */
.pusto { padding: var(--o6) var(--o5); text-align: center; color: var(--tekst-cichy); }
.stopka { margin-top: var(--o5); text-align: center; font-size: 13px; }

/* Telefon (E.8). Tabel w panelu nie ma ani jednej: listy od początku są kartami
   i wierszami, więc nie ma czego zamieniać. Zostaje to, co da się zmierzyć, i co
   pilnuje `test/panel-telefon.test.mjs` na 390 i na 360 px: nic nie ucieka poza
   ekran i każdy cel dotykowy ma 44 piksele. */
@media (max-width: 640px) {
  .tresc { padding: var(--o4); }
  .pasek { padding-left: var(--o4); padding-right: var(--o4); }

  /* Pięć zakładek nie mieściło się w 390 pikselach: pasek przewijał się w bok, więc
     ostatnia („Wyniki", odblokowana w E.6) stała poza ekranem i nic nie mówiło, że
     w ogóle jest. Zakładka, o której klient nie wie, jest tym samym, co zakładka
     zablokowana. Węższy odstęp mieści całą piątkę (zmierzone na 390 i na 360 px), a `flex`
     rozdziela resztę miejsca po równo, żeby pasek nie kończył się w połowie ekranu. */
  .zakladki { padding-left: 0; padding-right: 0; gap: 0; }
  .zakladka { flex: 1 1 auto; justify-content: center; padding: 0 var(--o2); }
  .karta { padding: var(--o4); }
  .karta-lista { padding: var(--o4) 0 var(--o2); }
  .karta-lista .karta-gora, .wiersz-gora, .dowod { padding-left: var(--o4); padding-right: var(--o4); }
  .wiersz-gora { grid-template-columns: 1fr; gap: var(--o1); align-items: start; padding-top: var(--o3); padding-bottom: var(--o3); }
  .duza { font-size: 20px; }
  .konto { display: none; }
}

/* ---- Ekran „Połączenie" (krok C.4) ---- */

/* Karta stanu konta dostaje ten sam pasek koloru co karta automatu. Reguły progów
   były dotąd zawężone do `.karta-automat`, więc na tym ekranie nie miałyby zastosowania. */
.karta-konto { border-left: 4px solid var(--neutralny); }
.karta-konto.stan-ok { border-left-color: var(--sukces); }
.karta-konto.stan-uwaga { border-left-color: var(--uwaga); }
.karta-konto.stan-stop { border-left-color: var(--blad); }

/* Trzy zdania przed oknem. Wypunktowanie bez kropek, bo to nie jest lista rzeczy
   do zrobienia, tylko trzy zdania uprzedzenia, które klient ma przeczytać w całości. */
.zdania { list-style: none; margin: var(--o4) 0 var(--o5); padding: 0; display: grid; gap: var(--o3); }
.zdania li { position: relative; padding-left: var(--o5); font-size: 15px; line-height: 1.5; }
.zdania li::before { content: "•"; position: absolute; left: 0; color: var(--tekst-cichy); }

/* Zdanie wyłącznie dla telefonu trzymanego pionowo (L.5). Na biurku nie ma czego obracać,
   a w poziomie klient już to zrobił: zdanie „obróć ekran poziomo" pokazane komuś, kto trzyma
   telefon poziomo, jest po prostu nieprawdziwe. Każde zdanie, które nie dotyczy czytelnika,
   obniża szansę przeczytania trzech pozostałych, a te trzy są tam z konkretnego powodu.
   Ta sama reguła widoczności co przy podpowiedzi w oknie (L.3), i to jest zamierzone. */
.tylko-waskie { display: none; }
@media (max-width: 640px) and (orientation: portrait) {
  .zdania li.tylko-waskie { display: block; }
}

/* Ramka z oknem noVNC. Proporcja pilnuje, żeby okno nie skakało przy wczytywaniu,
   a `min-height` żeby formularz Facebooka miał się gdzie zmieścić na telefonie.

   Proporcja MUSI być ta sama, co ekran wirtualny kontenera (`XVFB_ROZDZIELCZOSC`
   w `infra/runner-entrypoint.sh`, dziś 1280x800). Każda inna zostawia wokół obrazu
   szare pasy, bo noVNC dopasowuje obraz zachowując proporcje ekranu, nie ramki.
   Do kroku L.2 stało tu `1288 / 851`, czyli wymiar zmierzony ze zrzutu razem
   z obwódką okna, przez co pas był zawsze. Test pilnuje zgodności obu liczb. */
.karta-okno { border-left: 4px solid var(--marka); }
.ramka-okna {
  margin: var(--o4) 0;
  border: 1px solid var(--obwodka);
  border-radius: var(--r-karta);
  overflow: hidden;
  background: var(--powierzchnia-cicha);
  aspect-ratio: 1280 / 800;
  min-height: 420px;
}
.ramka-okna iframe { display: block; width: 100%; height: 100%; border: 0; }

/* W pełnym ekranie ramka przestaje być kartą w panelu i staje się całym ekranem.
   Bez zdjęcia proporcji i marginesu przeglądarka zostawiłaby obraz w pasku pośrodku
   czerni, czyli pełny ekran nie dałby ani jednego piksela więcej. Dwa zapisy, bo
   Safari na iPadzie zna wyłącznie wariant z przedrostkiem, a nieznany selektor
   unieważniłby całą regułę. */
.ramka-okna:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.ramka-okna:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; }

/* Historia przerw (E.5). Lista, nie tabela: na telefonie tabela i tak zamieniłaby się
   w karty, a tu w wierszu są tylko dwie rzeczy, data i zdanie. */
.przerwy { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--o3); }
.przerwy li { display: grid; gap: var(--o1); padding-top: var(--o3); border-top: 1px solid var(--obwodka); }
.przerwy li:first-child { padding-top: 0; border-top: 0; }
.przerwy .kiedy { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.przerwy .powod { font-size: 14px; color: var(--tekst-cichy); }
.przerwy .trwa { color: var(--uwaga); font-weight: 600; }

/* Podpowiedź do ekranu, który Facebook pokazuje w oknie (L.4). Kolor uwagi, nie błędu:
   nic się nie zepsuło, klient ma tylko zrobić jeden krok więcej. */
.podpowiedz {
  display: grid; gap: var(--o1);
  margin: var(--o4) 0 0; padding: var(--o3) var(--o4);
  border-left: 3px solid var(--marka);
  border-radius: var(--r-karta);
  background: var(--marka-tlo); color: var(--tekst);
  font-size: 14px; line-height: 1.45;
}
.podpowiedz[hidden] { display: none; }

.rzad-przyciskow { display: flex; flex-wrap: wrap; gap: var(--o3); margin-top: var(--o4); }

/* Prośba o obrócenie telefonu. Czysty CSS, bez skryptu: pion na wąskim ekranie widzi
   sam arkusz, a podpowiedź, która nie zależy od JavaScriptu, nie zniknie przy błędzie
   w odpytywaniu stanu sesji. */
.obroc { display: none; }
.obroc svg { flex: 0 0 auto; }
@media (max-width: 640px) and (orientation: portrait) {
  .obroc {
    display: flex; align-items: center; gap: var(--o3);
    margin: var(--o4) 0 0; padding: var(--o3) var(--o4);
    border-radius: var(--r-karta);
    background: var(--uwaga-tlo); color: var(--tekst);
    font-size: 14px; line-height: 1.45;
  }
}

@media (max-width: 640px) {
  /* Do kroku L.2 stało tu `height: 60vh`, czyli okno przycięte do trzech piątych
     wysokości ekranu niezależnie od proporcji obrazu. Przy 1280 pikselach obrazu
     w 358 pikselach ramki tekst na ekranie Facebooka miał około czterech pikseli
     wysokości, więc miejsca w pionie i tak nie dało się na nic wymienić.
     Teraz decyduje proporcja obrazu, a miejsce robi pełny ekran w poziomie. */
  .ramka-okna { min-height: 0; }
  .rzad-przyciskow > * { flex: 1 1 100%; }
}

/* ── KREATOR KAMPANII (E.3) ─────────────────────────────────────────────────
   Kroki stoja jeden pod drugim, wszystkie widoczne. Numer w kolku, zeby dalo sie
   je policzyc wzrokiem, i kreska po lewej, zeby bylo widac, gdzie krok sie konczy. */
.krok { border-top: 1px solid var(--obwodka); padding-top: var(--o4); margin-top: var(--o4); }
.krok:first-of-type { border-top: 0; margin-top: var(--o2); padding-top: 0; }
.krok h3 { display: flex; align-items: center; gap: var(--o3); margin: 0 0 var(--o2); font-size: 16px; }
.krok-numer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--marka); color: #fff; font-size: 13px; font-weight: 600;
}
.krok .przycisk { margin-top: var(--o3); }

.fakt { display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--o2); margin-top: var(--o2); }
.fakt input {
  min-height: 44px; padding: 0 var(--o3);
  border: 1px solid var(--obwodka); border-radius: var(--r-karta);
  background: var(--powierzchnia); color: var(--tekst); font: inherit;
}
.fakt .usun { min-width: 44px; }
@media (max-width: 560px) { .fakt { grid-template-columns: 1fr; } }

.komunikat { margin: var(--o3) 0 0; font-size: 14px; min-height: 20px; }
.komunikat.ok { color: var(--sukces); }
.komunikat.blad { color: var(--blad); }
/* Żółty stopień z D.3. Do tej pory komunikat umiał tylko „dobrze" i „źle", a ostrzeżenie
   od 80 procent limitu nie jest ani jednym, ani drugim. */
.komunikat.uwaga { color: var(--uwaga); }

.kampania { display: flex; justify-content: space-between; align-items: center; gap: var(--o3); }
.kampania .nazwa-kampanii { font-weight: 500; }

/* ── EKRAN GRUPY (E.4) ──────────────────────────────────────────────────────
   Pasek zaznaczenia jest przyklejony do dolu, bo lista grup bywa dluga i klient
   zaznacza na dole, a przycisk mialby byc na gorze. */
.wklejanie { margin-top: var(--o3); }
.wklejanie-wiersz { display: flex; gap: var(--o2); margin-top: var(--o2); }
.wklejanie input {
  flex: 1; min-height: 44px; padding: 0 var(--o3);
  border: 1px solid var(--obwodka); border-radius: var(--r-karta);
  background: var(--powierzchnia); color: var(--tekst); font: inherit;
}
@media (max-width: 560px) { .wklejanie-wiersz { flex-direction: column; } }

.pasek-zaznaczenia { position: sticky; bottom: var(--o3); z-index: 2; }
.akcje-zaznaczenia { display: flex; flex-wrap: wrap; gap: var(--o2); margin-top: var(--o3); }

.grupa-wiersz { display: grid; grid-template-columns: auto 1fr auto; gap: var(--o3); cursor: pointer; }
.grupa-wiersz input[type=checkbox] { width: 20px; height: 20px; align-self: center; }
.puste { padding: var(--o2) var(--o5) var(--o3); }

/* ── EKRAN WYNIKI (E.6) ─────────────────────────────────────────────────────
   Trzy liczby stoja w rzedzie, bo odpowiadaja na trzy pytania po kolei. Na waskim
   ekranie schodza w kolumne, zamiast sciskac cyfry do nieczytelnosci. */
.trzy-liczby {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--o3); margin-top: var(--o4);
}
.liczba {
  display: flex; flex-direction: column; gap: var(--o1);
  padding: var(--o3); border: 1px solid var(--obwodka);
  border-radius: var(--r-karta); background: var(--powierzchnia);
}
.liczba-wartosc { font-size: 28px; font-weight: 700; line-height: 1.1; }
@media (max-width: 560px) { .trzy-liczby { grid-template-columns: 1fr; } }

/* Wiersz grupy w rankingu. Cel dotykowy ma 44 px razem z etykieta, wiec zaznacza sie
   klikniecie w cala nazwe, nie w sam kwadracik. */
.grupa-wynik { display: grid; grid-template-columns: auto 1fr auto; gap: var(--o3); align-items: center; cursor: pointer; min-height: var(--dotyk); }
.grupa-wynik input[type=checkbox] { width: 20px; height: 20px; }
.grupa-wynik input[type=checkbox][disabled] { cursor: not-allowed; }
.udzial { font-weight: 600; white-space: nowrap; }
.udzial.zle { color: var(--blad); }

/* ── PROPOZYCJE TREŚCI (E.10) ──────────────────────────────────────────────
   Propozycja jest do przeczytania i poprawienia na miejscu, więc treść stoi w polu
   tekstowym, a nie w akapicie. Zatwierdzenie i zapis leżą pod nią, w jednym rzędzie,
   bo to są dwie różne decyzje: „ta treść jest dobra" i „ta treść ma pójść w świat". */
.propozycja { border-top: 1px solid var(--obwodka); padding-top: var(--o4); margin-top: var(--o4); }
.tresc-propozycji {
  width: 100%; padding: var(--o3);
  border: 1px solid var(--obwodka); border-radius: var(--r-przycisk);
  background: var(--powierzchnia); color: var(--tekst);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  resize: vertical;
}
.zatwierdzenie {
  display: flex; align-items: center; gap: var(--o3);
  min-height: var(--dotyk); font-size: 15px; cursor: pointer;
}

/* Wybór tożsamości (krok T.3). Lista wyboru, nie tabela: pozycji jest kilka, nie kilkaset,
   a klient ma tu podjąć jedną decyzję, nie przeglądać dane. Cel dotykowy 44 px, bo ten
   ekran otwiera się zaraz po logowaniu do Facebooka, które klient często robi z telefonu. */
.wybor { display: flex; flex-direction: column; gap: var(--o2); margin-top: var(--o3); }

.wybor__pozycja {
  display: flex;
  align-items: center;
  gap: var(--o3);
  min-height: var(--dotyk);
  padding: var(--o2) var(--o3);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-przycisk);
  cursor: pointer;
}
.wybor__pozycja:hover { border-color: var(--marka); }
.wybor__pozycja input { width: 20px; height: 20px; accent-color: var(--marka); flex: 0 0 auto; }
.wybor__nazwa { font-weight: 600; }
.wybor__znacznik { margin-left: auto; font-size: 0.85rem; color: var(--tekst-cichy); }

/* Komunikat błędu pod przyciskami wyboru. Osobna klasa od `.komunikat.blad`, bo tamta
   należy do kokpitu i ma inny odstęp. */
p.blad { color: var(--blad); margin-top: var(--o3); }