/* Panel FluxCRM: motyw jasny i ciemny, układ od telefonu do szerokiego ekranu. */

/* System wyglądu: jedyne miejsce z tokenami (kolory semantyczne, odstępy, promienie, cienie, czcionki,
   wysokość kontrolek). Moduły CSS używają tylko tych zmiennych; komponenty wspólne są w wyglad.css. */
:root {
  color-scheme: light;
  /* kolory: tło strony, powierzchnie, ramki, tekst */
  --tlo: #fafafc;
  --panel: #ffffff;
  --panel-2: #f3f3f7;
  --kolumna-tlo: #f1f1f5;
  --tekst: #17171c;
  --przygaszony: #5d5d6e;
  --ramka: #e6e6ec;
  --ramka-mocna: #d6d6de;
  --ramka-pola: #85859a;
  --ramka-karty: #e6e6ec;
  /* kolory semantyczne */
  --akcent: #6e2cff;
  --akcent-tlo: #6e2cff;
  --akcent-tekst: #ffffff;
  --akcent-miekki: #efe9ff;
  --sukces: #18794e;
  --ostrzezenie: #9a5a00;
  --blad: #c42b1c;
  --wygrane-tlo: #e7f5ed;
  --przegrane-tlo: #eef0f3;
  --ostrzezenie-tlo: #fdf3e2;
  --blad-tlo: #fdeceb;
  --sukces-tlo: #e7f5ed;
  --seg-0: #0b5cad;
  --seg-1: #b45309;
  --seg-2: #15803d;
  --seg-3: #7e22ce;
  --seg-4: #be123c;
  --seg-5: #0e7490;
  --seg-6: #6b7280;
  --awatar-1: #4f5b6a;
  --awatar-2: #2f6db3;
  --awatar-3: #2e7d4f;
  --awatar-4: #a2522a;
  --awatar-5: #7a4bb3;
  --awatar-6: #ad3b5a;
  --awatar-7: #3d6f78;
  --dymek-my: #f1ecff;
  --dymek-my-ramka: #d6c8ff;
  --dymek-klient: #ffffff;
  --prio-niski: #85859a;
  --prio-sredni: #6e2cff;
  --prio-wysoki: #b45309;
  --prio-pilny: #c42b1c;
  /* cienie */
  --cien: 0 1px 2px rgba(16, 24, 40, 0.06);
  --cien-wysoki:
    0 12px 32px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.08);
  /* odstępy: skala 4/8/12/16/24 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  /* promienie: kontrolki, powierzchnie, pigułki */
  --r-1: 6px;
  --r-2: 8px;
  --r-3: 12px;
  --r-pelny: 999px;
  --promien: 8px;
  /* typografia: trzy rozmiary tekstu i jeden do dużych liczb, wszystkie od --skala (A-/A+) */
  --czcionka:
    "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-1: calc(12.5px * var(--skala));
  --fs-2: calc(14px * var(--skala));
  --fs-3: calc(16px * var(--skala));
  --fs-4: calc(22px * var(--skala));
  /* jedna wysokość kontrolek (na telefonie 44 px, zob. niżej) i mała dla pigułek i ikon */
  --wys-kontrolki: 36px;
  --wys-mala: 28px;
  --skala: 1;
  /* ruch: trzy czasy i dwie krzywe (wejście, wyjście); ograniczony ruch zeruje je w dostepnosc.css */
  --ruch-1: 120ms;
  --ruch-2: 200ms;
  --ruch-3: 320ms;
  --krzywa-wejscia: cubic-bezier(0.2, 0.8, 0.2, 1);
  --krzywa-wyjscia: cubic-bezier(0.4, 0, 1, 1);
}

/* Telefon i ekran dotykowy: każdy cel dotyku ma co najmniej 44 px. */
@media (max-width: 760px), (pointer: coarse) {
  :root {
    --wys-kontrolki: 44px;
    --wys-mala: 44px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tlo: #0f0f17;
    --panel: #17171f;
    --panel-2: #1f1f2a;
    --kolumna-tlo: #13131b;
    --tekst: #ececf1;
    --przygaszony: #a0a0b0;
    --ramka: #262631;
    --ramka-mocna: #34343f;
    --ramka-pola: #6b6b7d;
    --ramka-karty: #262631;
    --akcent: #a98bff;
    --akcent-tlo: #6e2cff;
    --akcent-tekst: #ffffff;
    --akcent-miekki: #241a45;
    --sukces: #4cc38a;
    --ostrzezenie: #f0b35b;
    --blad: #ff8a80;
    --wygrane-tlo: #12291d;
    --przegrane-tlo: #1f232a;
    --ostrzezenie-tlo: #2e2410;
    --blad-tlo: #34171a;
    --sukces-tlo: #12291d;
    --seg-0: #5aa2e8;
    --seg-1: #e0963f;
    --seg-2: #4cc38a;
    --seg-3: #b784f0;
    --seg-4: #f0708f;
    --seg-5: #4fb8d0;
    --seg-6: #9ca3af;
    --awatar-1: #4f5b6a;
    --awatar-2: #2f6db3;
    --awatar-3: #2e7d4f;
    --awatar-4: #a2522a;
    --awatar-5: #7a4bb3;
    --awatar-6: #ad3b5a;
    --awatar-7: #3d6f78;
    --dymek-my: #221a40;
    --dymek-my-ramka: #3d2f73;
    --dymek-klient: #1f1f2a;
    --prio-niski: #6b6b7d;
    --prio-sredni: #a98bff;
    --prio-wysoki: #f0b35b;
    --prio-pilny: #ff8a80;
    --cien: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cien-wysoki:
      0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --tlo: #0f0f17;
  --panel: #17171f;
  --panel-2: #1f1f2a;
  --kolumna-tlo: #13131b;
  --tekst: #ececf1;
  --przygaszony: #a0a0b0;
  --ramka: #262631;
  --ramka-mocna: #34343f;
  --ramka-pola: #6b6b7d;
  --ramka-karty: #262631;
  --akcent: #a98bff;
  --akcent-tlo: #6e2cff;
  --akcent-tekst: #ffffff;
  --akcent-miekki: #241a45;
  --sukces: #4cc38a;
  --ostrzezenie: #f0b35b;
  --blad: #ff8a80;
  --wygrane-tlo: #12291d;
  --przegrane-tlo: #1f232a;
  --ostrzezenie-tlo: #2e2410;
  --blad-tlo: #34171a;
  --sukces-tlo: #12291d;
  --seg-0: #5aa2e8;
  --seg-1: #e0963f;
  --seg-2: #4cc38a;
  --seg-3: #b784f0;
  --seg-4: #f0708f;
  --seg-5: #4fb8d0;
  --seg-6: #9ca3af;
  --awatar-1: #4f5b6a;
  --awatar-2: #2f6db3;
  --awatar-3: #2e7d4f;
  --awatar-4: #a2522a;
  --awatar-5: #7a4bb3;
  --awatar-6: #ad3b5a;
  --awatar-7: #3d6f78;
  --dymek-my: #221a40;
  --dymek-my-ramka: #3d2f73;
  --dymek-klient: #1f1f2a;
  --prio-niski: #6b6b7d;
  --prio-sredni: #a98bff;
  --prio-wysoki: #f0b35b;
  --prio-pilny: #ff8a80;
  --cien: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cien-wysoki: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font:
    calc(15px * var(--skala)) / 1.45 system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}

body.karta-otwarta {
  overflow: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
}

h3 {
  font-size: var(--fs-2);
  margin: var(--s-5) 0 var(--s-3);
}

.przygaszony {
  color: var(--przygaszony);
}

.ostrzezenie {
  color: var(--ostrzezenie);
}

.sukces {
  color: var(--sukces);
}

.blad {
  color: var(--blad);
}

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
}

/* Przyciski i pola: cele dotykowe co najmniej 44px. */
.przycisk,
input,
select {
  min-height: var(--wys-kontrolki);
  font: inherit;
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-4);
}

.przycisk {
  cursor: pointer;
}

.przycisk:hover {
  background: var(--panel-2);
}

.przycisk[aria-pressed="true"] {
  background: var(--akcent-tlo);
  border-color: var(--akcent-tlo);
  color: var(--akcent-tekst);
  font-weight: 600;
}

.przycisk.glowny {
  background: var(--akcent-tlo);
  border-color: var(--akcent-tlo);
  color: var(--akcent-tekst);
  font-weight: 600;
}

.przycisk[aria-pressed="true"] .licznik {
  color: inherit;
}

.przycisk:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Logowanie */
.logowanie {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-4);
}

.logowanie-karta {
  width: 100%;
  max-width: 380px;
  display: grid;
  gap: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-3);
  padding: var(--s-5);
  box-shadow: var(--cien);
}

.logowanie-karta p {
  margin: 0;
}

.logowanie-karta label {
  font-weight: 600;
}

/* Układ główny */
.aplikacja {
  /* Bez limitu szerokości: na ekranach ultraszerokich Kanban ma wypełniać cały ekran. */
  width: 100%;
  padding: var(--s-3) var(--s-5) 32px;
}

.gora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-2) 0 var(--s-3);
}

.tytul {
  font-size: var(--fs-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

.marka {
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--przygaszony);
}

.gora-akcje {
  margin-left: auto;
  display: flex;
  gap: var(--s-2);
}

.znaczek {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border: 1px solid currentColor;
  border-radius: var(--r-pelny);
  font-size: var(--fs-1);
}

/* Kafelki liczb w jednym rzedzie i ciasno: Pawel 8.10.2026, "to zajmuje za duzo miejsca". */
.liczby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s-2);
}

.kafelek {
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3) var(--s-2);
  box-shadow: var(--cien);
  min-width: 0;
}

.kafelek-tytul {
  color: var(--przygaszony);
  font-size: var(--fs-1);
}

.kafelek-wartosc {
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.15;
  margin: 1px 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.kafelek-wygrane {
  border-left: 4px solid var(--sukces);
}

.kafelek-opis {
  font-size: var(--fs-1);
  color: var(--przygaszony);
  overflow-wrap: anywhere;
}

/* Zwiniete liczby: jedna linia "tytul: wartosc" na kafelek, reszta ukryta. */
.liczby.zwiniete {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-2);
}
.liczby.zwiniete .kafelek {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
}
.liczby.zwiniete .kafelek-wartosc {
  font-size: var(--fs-3);
  margin: 0;
}
.liczby.zwiniete .kafelek-opis,
.liczby.zwiniete .kafelek-trend,
.liczby.zwiniete .jak-liczone {
  display: none;
}
.liczby.zwiniete .kafelek-tytul {
  font-size: var(--fs-1);
}
.paski {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.przelacznik-liczb {
  align-self: flex-end;
  min-height: 24px;
  padding: 2px var(--s-2);
  font-size: var(--fs-1);
}

.narzedzia {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3) var(--s-3);
  margin: var(--s-4) 0 var(--s-3);
}

.pole {
  display: grid;
  gap: var(--s-1);
  font-size: var(--fs-1);
  color: var(--przygaszony);
}

.widoki {
  margin-left: auto;
  display: flex;
  gap: var(--s-2);
}

.komunikat.blad {
  border-color: var(--blad);
  border-left-width: 4px;
}

.komunikat {
  margin: var(--s-2) 0;
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel);
}

.pusto {
  padding: 28px var(--s-4);
  text-align: center;
  background: var(--panel);
  border: 1px dashed var(--ramka-pola);
  border-radius: var(--r-2);
}

.kanban > .pusto {
  flex: 1;
}

.pusto p {
  margin: var(--s-2) 0 0;
  color: var(--przygaszony);
}

/* Kanban poziomy */
.kanban {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  padding-bottom: var(--s-3);
  padding-inline: 0;
  align-items: flex-start;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0;
}

.kolumna {
  flex: 1 1 0;
  min-width: 260px;
  scroll-snap-align: start;
  background: var(--panel-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 24px);
  max-height: var(--wys-kolumny, calc(100dvh - 24px));
}

.kolumna-naglowek {
  width: 100%;
  min-height: var(--wys-kontrolki);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  background: transparent;
  border: 0;
  color: var(--tekst);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: default;
}

.licznik {
  font-variant-numeric: tabular-nums;
  color: var(--przygaszony);
  font-weight: 400;
}

/* Każda kolumna przewija się sama; strona nie rośnie do długości najdłuższej kolumny. */
.kolumna-tresc {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-1);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.kolumna-tresc > * {
  flex: none;
}

.karta-leada {
  display: grid;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--wys-kontrolki);
  font-size: var(--fs-1);
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
  padding: var(--s-2) var(--s-3);
  box-shadow: var(--cien);
}

.karta-leada[draggable="true"] {
  cursor: grab;
}

.karta-leada:hover {
  border-color: var(--akcent);
}

.karta-leada.przeciagana {
  opacity: 0.45;
  cursor: grabbing;
}

.karta-leada.status-przegrany .karta-lead-nazwa,
.karta-leada.status-oferta_bez_odzewu .karta-lead-nazwa {
  color: var(--przygaszony);
}

.karta-leada.status-wygrany {
  border-left: 4px solid var(--sukces);
}

.karta-leada-tresc {
  display: grid;
  gap: var(--s-1);
  cursor: pointer;
  text-align: left;
}

.karta-leada-tresc:focus-visible {
  outline-offset: 4px;
}

/* Kopia karty jadąca pod palcem przy przeciąganiu dotykiem (pozycja przez Web Animations,
   bo CSP zabrania stylów inline). */
body > .karta-leada.duch-przeciagania {
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  width: 260px;
  max-width: 80vw;
  z-index: 60;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transform-origin: top left;
}

.kolumna.cel-upuszczenia {
  border-color: var(--akcent);
  border-style: dashed;
  outline: 2px solid var(--akcent);
  outline-offset: -2px;
  background: var(--panel);
}

.znaczniki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.znacznik.status-wygrany {
  color: var(--sukces);
  border-color: var(--sukces);
  background: var(--wygrane-tlo);
  font-weight: 600;
}

.znacznik.status-przegrany,
.znacznik.status-oferta_bez_odzewu {
  color: var(--przygaszony);
  border-color: var(--ramka-pola);
  background: var(--przegrane-tlo);
}

.znacznik.oczekiwanie-czeka_na_nas {
  color: var(--ostrzezenie);
  border-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
  font-weight: 600;
}

.znacznik.oczekiwanie-czeka_na_klienta {
  color: var(--akcent);
  border-color: var(--akcent);
}

.znacznik.oczekiwanie-spotkanie {
  color: var(--sukces);
  border-color: var(--sukces);
  font-weight: 600;
}

.powitanie {
  display: block;
  width: 100%;
  margin: 0 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  cursor: pointer;
}

.powitanie:hover {
  background: var(--panel-2);
}

.znacznik.dni-w-etapie {
  color: var(--przygaszony);
}

.tagi-komorka {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.tag-ustawienie {
  display: grid;
  grid-template-columns: 130px 80px 1fr;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--ramka);
}

.tag-ustawienie > .znacznik {
  justify-self: start;
}

@media (max-width: 600px) {
  .tag-ustawienie {
    grid-template-columns: auto 1fr;
  }

  .tag-ustawienie > .tag-palety {
    grid-column: 1 / -1;
  }
}

.tag-palety {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.tag-probka {
  width: 28px;
  height: 28px;
  min-width: var(--wys-mala);
  padding: 0;
  border: 2px solid var(--tag-niebieski-tekst);
  border-radius: 50%;
  cursor: pointer;
}

.tag-probka.wybrany {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
}

.tag-probka:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
}

.znacznik.dni-w-etapie.przekroczone,
.dni-w-etapie-komorka.przekroczone {
  color: var(--ostrzezenie);
  font-weight: 600;
}

.znacznik.dni-w-etapie.przekroczone {
  border-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
}

.znacznik.dni-w-etapie.nieruszony {
  color: var(--przygaszony);
  border: 1px dashed var(--ramka-pola);
  background: var(--panel-2);
}

.dni-w-etapie-uwaga {
  font-size: var(--fs-1);
}

.znacznik.reczny {
  color: var(--przygaszony);
  border-style: dashed;
}

/* Ocena AI: chipy temperatury i intencji, sekcja Podpowiedź */
.znacznik.temp-goracy {
  color: var(--blad);
  border-color: var(--blad);
  background: var(--blad-tlo);
  font-weight: 600;
}

.znacznik.temp-cieply {
  color: var(--ostrzezenie);
  border-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
}

.znacznik.temp-chlodny {
  color: var(--przygaszony);
  border-color: var(--akcent);
}

.znacznik.temp-zimny {
  color: var(--akcent);
  border-color: var(--akcent);
}

.znacznik.intencja {
  color: var(--tekst);
  border-color: var(--ramka-pola);
}

.znacznik.intencja-rezygnacja {
  color: var(--przygaszony);
  background: var(--przegrane-tlo);
}

.znacznik.nieaktualna {
  border-style: dashed;
  opacity: 0.75;
}

.teraz-ocena {
  margin: var(--s-1) 0;
}

.podpowiedz {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.podpowiedz p {
  margin: 0;
}

.podpowiedz.nieaktualna .podpowiedz-krok {
  opacity: 0.8;
}

.podpowiedz-cytat {
  margin: 0;
  padding: var(--s-1) var(--s-3);
  border-left: 3px solid var(--ramka-pola);
  color: var(--przygaszony);
  font-style: italic;
}

/* Filtr statusu nad Kanbanem */
.filtr-statusu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-1) 0 var(--s-3);
}

.filtr-statusu-przycisk {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.filtr-statusu-opis {
  font-size: var(--fs-1);
  margin-right: var(--s-1);
}

.etap-wybor {
  width: 100%;
}

.przyciski-statusu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.przycisk.sukces-przycisk {
  color: var(--sukces);
  border-color: var(--sukces);
}

.pole input[type="text"] {
  width: 100%;
}

.karta-lead-nazwa {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.karta-lead-separator,
.karta-lead-tytul {
  font-weight: 400;
}

.karta-lead-wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
}

.karta-lead-czas {
  margin-left: auto;
  font-size: var(--fs-1);
  white-space: nowrap;
}

.pusta-kolumna {
  padding: var(--s-1) var(--s-2) var(--s-2);
  font-size: var(--fs-1);
}

/* Tabela */
.tabela-przewijana {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

/* Stałe szerokości kolumn: sortowanie i odświeżenie nie przesuwają układu. */
.tabela {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-1);
}

.tabela col {
  width: 120px;
}

.tabela col.kolumna-id {
  width: 76px;
}

.tabela col.kolumna-zrodlo,
.tabela col.kolumna-kanal,
.tabela col.kolumna-zadanie {
  width: 150px;
}

.tabela col.kolumna-oferta {
  width: 110px;
}

.tabela col.kolumna-wazona {
  width: 130px;
}

.tabela col.kolumna-dni_w_etapie {
  width: 104px;
}

.tabela col.kolumna-kontakt {
  width: 210px;
}

.tabela col.kolumna-zlecenie {
  width: 260px;
}

.tabela col.kolumna-etap,
.tabela col.kolumna-oczekiwanie {
  width: 140px;
}

.tabela col.kolumna-ostatnia_od {
  width: 90px;
}

.tabela col.kolumna-wiadomosci,
.tabela col.kolumna-czekamy,
.tabela col.kolumna-kwota {
  width: 110px;
}

.tabela th,
.tabela td {
  padding: var(--s-1) var(--s-2);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--ramka);
}

.tabela thead th {
  border-top: 0;
  color: var(--przygaszony);
  font-weight: 600;
}

.tabela td.zawijaj {
  white-space: normal;
  min-width: 130px;
}

.tabela td.liczba {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sortuj,
.odnosnik {
  min-height: var(--wys-kontrolki);
  background: transparent;
  border: 0;
  padding: 0 2px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.sortuj {
  font-weight: 600;
  color: var(--przygaszony);
}

.sortuj:hover {
  color: var(--tekst);
}

.odnosnik {
  color: var(--akcent);
  text-decoration: underline;
}

/* Widok szansy: pełny ekran, na komputerze dwie kolumny, na telefonie jedna */
.karta {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  background: var(--tlo);
  color: var(--tekst);
}

.karta-lepka {
  flex: none;
  background: var(--panel);
  border-bottom: 1px solid var(--ramka);
  z-index: 2;
}

.karta-gora {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
}

.karta-skrot {
  font-size: var(--fs-1);
}

.karta-lepka > .komunikat {
  margin: 0;
  border-radius: 0;
  border-width: 1px 0 0;
}

.karta-naglowek {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--panel);
  border-bottom: 1px solid var(--ramka);
}

.karta-naglowek h2 {
  font-size: var(--fs-4);
  overflow-wrap: anywhere;
}

.karta-oryginal {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-1);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.karta-podpis {
  margin: var(--s-2) 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.karta-podpis:empty {
  display: none;
}

.karta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
}

.karta-cena {
  font-size: var(--fs-3);
}

/* Jedno miejsce akcji szansy w przyklejonej belce: odpowiedz, etap, status, notatka, zadanie, scal. */
.karta-sterowanie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-4) var(--s-2);
}

.karta-sterowanie:empty {
  display: none;
}

.scalanie-formularz {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-2);
  max-width: 640px;
}

.scalanie-para {
  margin: 0;
  font-weight: 600;
}

/* Scalanie z karty: obie szanse obok siebie, różnice zaznaczone, ostrzeżenie przy różnych sprawach. */
.scalanie-miejsce {
  margin-top: var(--s-2);
}

.scalanie-panel {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel);
}

.scalanie-tabela-opakowanie {
  overflow-x: auto;
}

.scalanie-porownanie {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-1);
}

.scalanie-porownanie th,
.scalanie-porownanie td {
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--ramka);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.scalanie-porownanie thead th {
  vertical-align: bottom;
}

.scalanie-porownanie tbody th {
  font-weight: 500;
  color: var(--przygaszony);
  overflow-wrap: normal;
  word-break: normal;
}

.scalanie-wybor {
  white-space: nowrap;
}

.scalanie-porownanie tr.roznica td {
  background: var(--ostrzezenie-tlo);
  font-weight: 600;
}

.scalanie-wybor {
  display: block;
  margin-top: var(--s-1);
}

.scalanie-wybor[aria-pressed="true"] {
  background: var(--akcent-tlo);
  color: var(--akcent-tekst);
  border-color: var(--akcent-tlo);
}

.scalanie-ostrzezenie {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ostrzezenie);
  border-left-width: 4px;
  border-radius: var(--r-2);
  background: var(--ostrzezenie-tlo);
}

.scalanie-zgoda {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-2);
  font-weight: 600;
}

@media (max-width: 700px) {
  .scalanie-porownanie {
    font-size: var(--fs-1);
  }

  .scalanie-porownanie th,
  .scalanie-porownanie td {
    padding: var(--s-1) var(--s-1);
  }

  .scalanie-porownanie tbody th {
    font-size: var(--fs-1);
    width: 22%;
  }
}

.karta-sterowanie .przyciski-statusu {
  margin-top: 0;
}

.karta-tresc {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  gap: var(--s-4);
  padding: var(--s-4);
}

.karta-tresc.jedna-kolumna {
  display: block;
}

.kolumna-karty {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding-right: var(--s-1);
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.karta-ladowanie {
  grid-column: 1 / -1;
}

.sekcja {
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  box-shadow: var(--cien);
}

.sekcja-naglowek {
  margin: 0;
  font-size: var(--fs-3);
}

.sekcja-przycisk {
  width: 100%;
  min-width: 44px;
  min-height: var(--wys-kontrolki);
  display: block;
  padding: var(--s-3) var(--s-4);
  font: inherit;
  font-weight: 700;
  text-align: left;
  color: var(--tekst);
  background: transparent;
  border: 0;
  border-radius: var(--r-2);
  cursor: default;
}

.sekcja-cialo {
  padding: 0 var(--s-4) var(--s-4);
}

.sekcja-cialo > :first-child {
  margin-top: 0;
}

.pusty-stan {
  margin: 0;
  color: var(--przygaszony);
}

.komunikat-lokalny {
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-left-width: 4px;
  border-radius: var(--r-2);
  background: var(--panel-2);
}

.komunikat-lokalny.blad {
  border-left-color: var(--blad);
}

.komunikat-lokalny.sukces {
  border-left-color: var(--sukces);
}

.komunikat.sukces {
  border-left: 4px solid var(--sukces);
  color: var(--tekst);
}

/* Ogłoszenie */
.opis-ogloszenia {
  max-height: 360px;
  overflow-y: auto;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
  background: var(--tlo);
}

.opis-ogloszenia .tekst-blokowy {
  margin: 0;
}

/* Korespondencja */
.korespondencja-narzedzia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}

.filtr-kanalow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.filtr-kanalu {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
}

.przelacznik-techniczne,
.pole-wyboru {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--wys-kontrolki);
  cursor: pointer;
}

.przelacznik-techniczne input,
.pole-wyboru input {
  min-height: 0;
  width: 20px;
  height: 20px;
}

.korespondencja-opis {
  margin: var(--s-2) 0;
  font-size: var(--fs-1);
}

.korespondencja-lista {
  display: grid;
  gap: var(--s-3);
}

.wiadomosc {
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--ramka);
  border-left-width: 5px;
  border-radius: var(--r-2);
  background: var(--panel);
}

.wiadomosc.kierunek-my {
  border-left-color: var(--akcent);
  background: var(--panel-2);
}

.wiadomosc.kierunek-klient {
  border-left-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
}

.wiadomosc.kierunek-system {
  border-left-color: var(--ramka-pola);
}

/* Bez opacity: przezroczystość obniżała kontrast tekstu poniżej WCAG AA (U16). */
.wiadomosc.techniczna {
  font-size: var(--fs-1);
  color: var(--przygaszony);
}

.wiadomosc-gora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.kierunek-znacznik {
  font-weight: 700;
}

.kierunek-znacznik-my {
  color: var(--akcent);
  border-color: var(--akcent);
}

.kierunek-znacznik-klient {
  color: var(--ostrzezenie);
  border-color: var(--ostrzezenie);
}

.wiadomosc-czas {
  margin-left: auto;
  color: var(--przygaszony);
  font-size: var(--fs-1);
}

.wiadomosc-adresy {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-1);
  overflow-wrap: anywhere;
}

.wiadomosc-temat {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-2);
  overflow-wrap: anywhere;
}

.wiadomosc-tresc {
  margin: var(--s-2) 0 0;
}

.wiadomosc-brak p {
  margin: var(--s-2) 0 0;
}

.wiadomosc-skrot {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.wiadomosc-oferta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-2);
}

.wiadomosc-link {
  margin: var(--s-2) 0 0;
}

.sekcja a,
.tekst-blokowy a,
.pola-leada a,
.wiadomosc a,
.osoba a {
  color: var(--akcent);
  overflow-wrap: anywhere;
}

.zwijany {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}

.tekst-blokowy.zwiniety {
  max-height: 9.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.oferta-przelacznik {
  margin-top: var(--s-2);
}

.oferta-przelacznik .oferta-tresc-miejsce:empty {
  display: none;
}

/* Firma */
.firma-nazwa {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-3);
}

.dane-faktury {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
  background: var(--tlo);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.przyciski-sekcji {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0;
}

.rachunki div {
  font-variant-numeric: tabular-nums;
}

.lista-szans,
.wyniki-wyszukiwania {
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
}

.wyniki-wyszukiwania li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
}

.wyszukiwarka-pole {
  display: flex;
  gap: var(--s-2);
}

.wyszukiwarka-pole input {
  flex: 1;
  min-width: 0;
}

/* Edycja inline */
.edytor {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-3) 0;
  padding: var(--s-3);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-2);
  background: var(--panel-2);
}

.edytor h4 {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-2);
}

.edytor-formularz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-2);
}

.edytor-formularz > h4,
.edytor-formularz > .edytor-przyciski,
.edytor-formularz > .pole:has(textarea) {
  grid-column: 1 / -1;
}

.edytor textarea,
.edytor input[type="text"],
.edytor input[type="search"],
.edytor select {
  width: 100%;
  font: inherit;
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-4);
}

.edytor-przyciski,
.edytor-ustawienia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

/* Osoby */
.osoba {
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--tlo);
}

.osoba-glowna {
  border-left: 4px solid var(--akcent);
}

.osoba p {
  margin: var(--s-1) 0 0;
  overflow-wrap: anywhere;
}

.osoba-gora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-2);
}

.osoba-znacznik.glowna {
  color: var(--akcent);
  border-color: var(--akcent);
  font-weight: 600;
}

.osoba-znacznik.decydent {
  color: var(--sukces);
  border-color: var(--sukces);
  font-weight: 600;
}

.osoba-sterowanie {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-2);
}

.zlecenie-komorka {
  display: grid;
  gap: 2px;
}

.karta-lead-kontakt {
  font-size: var(--fs-1);
  overflow-wrap: anywhere;
}

.wiersz-szansy {
  cursor: pointer;
}

.wiersz-szansy:hover {
  background: var(--panel-2);
  box-shadow: inset 3px 0 0 var(--akcent);
}

.pola-leada {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-3);
}

.pola-leada dt {
  color: var(--przygaszony);
}

.pola-leada dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.os-czasu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s-4);
  border-left: 2px solid var(--ramka);
  display: grid;
  gap: var(--s-3);
}

.zdarzenie-gora {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  align-items: baseline;
}

.zdarzenie {
  position: relative;
}

.zdarzenie::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--przygaszony);
  border: 2px solid var(--panel);
}

.zdarzenie.my::before {
  background: var(--akcent);
}

.zdarzenie.klient::before {
  background: var(--ostrzezenie);
}

.zdarzenie.klient strong {
  color: var(--ostrzezenie);
}

.zdarzenie-tresc {
  margin: var(--s-1) 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.zdarzenie p {
  margin: var(--s-1) 0 0;
}

/* Zlecenie i oferty: cena zawsze na wierzchu */
.karta-lead-podpis {
  color: var(--przygaszony);
  overflow-wrap: anywhere;
}

.oferta-linia {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s-3);
  padding: var(--s-1) var(--s-2);
  border-left: 3px solid var(--akcent);
  background: var(--tlo);
  border-radius: var(--r-1);
  overflow-wrap: anywhere;
}

.oferta-cena {
  font-size: var(--fs-2);
  font-weight: 700;
}

.oferta-cena.brak {
  color: var(--ostrzezenie);
}

.oferta-stan {
  font-weight: 600;
}

.oferta-stan-wyslana {
  color: var(--sukces);
}

.oferta-stan-wstrzymana,
.oferta-stan-w_wysylce,
.oferta-stan-nieznany {
  color: var(--ostrzezenie);
}

.oferta-stan-blad {
  color: var(--blad);
}

.oferta-stan-odrzucona {
  color: var(--przygaszony);
}

.oferta-komorka {
  min-width: 140px;
}

.naglowek-ofert {
  font-size: var(--fs-3);
}

.oferta-blok {
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--ramka);
  border-left-width: 4px;
  border-radius: var(--r-2);
  background: var(--panel);
}

.oferta-blok-wyslana {
  border-left-color: var(--sukces);
}

.oferta-blok-wstrzymana,
.oferta-blok-w_wysylce,
.oferta-blok-nieznany {
  border-left-color: var(--ostrzezenie);
}

.oferta-blok-blad {
  border-left-color: var(--blad);
}

.oferta-blok p {
  margin: var(--s-1) 0 0;
}

.oferta-blok-gora {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
}

.oferta-blok-cena {
  font-size: var(--fs-3);
}

.oferta-blok .oferta-stan {
  padding: 1px var(--s-2);
  border: 1px solid currentColor;
  border-radius: var(--r-pelny);
  font-size: var(--fs-1);
}

.oferta-meta {
  color: var(--przygaszony);
  font-size: var(--fs-1);
}

.oferta-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.oferta-przyciski .oferta-tresc-miejsce {
  flex: 1 1 100%;
  order: 3;
}

.oferta-przyciski .oferta-tresc-miejsce:empty {
  display: none;
}

.tekst-blokowy {
  margin: var(--s-1) 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.tresc-oferty {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
  background: var(--tlo);
  max-height: 320px;
  overflow-y: auto;
}

.tresc-finalna {
  border-style: dashed;
}

.opis-opakowanie {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}

.przycisk.maly {
  padding: 2px var(--s-3);
  font-size: var(--fs-1);
}

/* Zadania i notatki: kolejka "Do zrobienia" nad widokiem, sekcje w karcie, termin na karcie */
.do-zrobienia {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  margin: var(--s-1) 0 var(--s-2);
}

#licznik-zadan.zalegle {
  color: var(--blad);
  border-color: var(--blad);
  font-weight: 600;
}

.lista-zadan,
.lista-notatek,
.lista-zadan-karty {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
  width: 100%;
}

.lista-zadan {
  max-width: 720px;
  padding: var(--s-2);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  box-shadow: var(--cien);
}

.lista-zadan li {
  display: grid;
  gap: 2px;
  padding: var(--s-2) var(--s-2);
  border-left: 4px solid var(--ramka);
}

.lista-zadan .odnosnik {
  text-align: left;
}

.lista-zadan li.zalegle,
.lista-zadan-karty .zadanie.zalegle {
  border-left-color: var(--blad);
}

.lista-zadan li.zalegle strong,
.zadanie.zalegle .zadanie-termin {
  color: var(--blad);
  font-weight: 600;
}

.znacznik.termin-zadania {
  color: var(--akcent);
  border-color: var(--akcent);
}

.znacznik.termin-zadania.zalegle {
  color: var(--blad);
  border-color: var(--blad);
  font-weight: 600;
}

.formularz-notatki,
.formularz-zadania {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.formularz-zadania {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.formularz-zadania > .edytor-przyciski {
  grid-column: 1 / -1;
}

.propozycje-terminow:empty {
  display: none;
}

.blok-proformy {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ramka);
}

.odpowiedz-podglad {
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--ramka);
  border-left-width: 4px;
  border-radius: var(--r-2);
  background: var(--panel-2);
}

.kanal-znacznik.w-kolejce {
  color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
}

.formularz-notatki textarea,
.formularz-zadania input {
  width: 100%;
  font: inherit;
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3);
}

.notatka,
.zadanie {
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--ramka);
  border-left-width: 4px;
  border-radius: var(--r-1);
}

.notatka-gora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--fs-1);
}

.notatka-tresc {
  margin: var(--s-1) 0 0;
}

.zadanie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
}

.zadanie .pole-wyboru {
  flex: 1 1 240px;
}

.zadanie.zrobione .pole-wyboru span {
  color: var(--przygaszony);
  text-decoration: line-through;
}

.zadanie-termin {
  font-size: var(--fs-1);
  color: var(--przygaszony);
}

/* Tablet i węższe ekrany */
@media (max-width: 900px) {
  .liczby {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Telefon: kolumny Kanbana pod sobą ze zwijanymi nagłówkami, karta na cały ekran. */
@media (max-width: 699px) {
  .aplikacja {
    padding: var(--s-2) var(--s-3) var(--s-5);
  }

  .kafelek {
    padding: var(--s-3) var(--s-4);
  }

  .kafelek-wartosc {
    font-size: var(--fs-4);
  }

  .liczby {
    gap: var(--s-2);
  }

  .widoki {
    margin-left: 0;
    width: 100%;
  }

  .widoki .przycisk {
    flex: 1;
  }

  .pole {
    flex: 1 1 140px;
  }

  .pole input,
  .pole select {
    width: 100%;
  }

  .kanban {
    flex-direction: column;
    overflow-x: visible;
  }

  .kolumna {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .filtr-statusu-przycisk {
    flex: 1 1 auto;
    justify-content: center;
  }

  .przyciski-statusu .przycisk {
    flex: 1 1 100%;
  }

  .kanban.telefon .kolumna-naglowek {
    cursor: pointer;
  }

  .kanban.telefon .kolumna-naglowek::after {
    content: "\25BE";
    margin-left: var(--s-2);
  }

  .kanban.telefon .kolumna-naglowek[aria-expanded="true"]::after {
    content: "\25B4";
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Kwoty w złotych: oryginał i kurs w podpowiedzi, w szczegółach widoczne wprost */
.kwota-cena {
  white-space: nowrap;
}

.kwota-z-podpowiedzia {
  cursor: help;
  text-decoration: underline dotted var(--przygaszony);
  text-underline-offset: 3px;
}

.kwota-z-podpowiedzia:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.tytul-zlecenia {
  overflow-wrap: anywhere;
}

.kwota-oryginal {
  color: var(--przygaszony);
  font-weight: 400;
}

/* Dymek z klawiatury i dotyku stoi w rogu okna, więc nigdy nie wychodzi poza ekran; myszą działa zwykły title. */
.kwota-dymek {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  box-sizing: border-box;
  width: max-content;
  max-width: min(340px, calc(100vw - 32px));
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-1);
  background: var(--panel);
  color: var(--tekst);
  box-shadow: var(--cien);
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
  white-space: normal;
  pointer-events: none;
}

@media (max-width: 699px) {
  .kwota-dymek {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
  }
}

.kwota-z-podpowiedzia:focus .kwota-dymek {
  display: block;
}

/* Tablet i telefon: jedna kolumna, cały widok przewija się razem z belką przyklejoną u góry. */
@media (max-width: 900px) {
  .karta {
    display: block;
    overflow-y: auto;
  }

  .karta-lepka {
    position: sticky;
    top: 0;
  }

  .karta-naglowek {
    grid-template-columns: minmax(0, 1fr);
  }

  .karta-tresc {
    display: block;
    padding: var(--s-3);
  }

  .kolumna-karty {
    overflow: visible;
    padding-right: 0;
  }

  .karta-naglowek h2 {
    font-size: calc(19px * var(--skala));
  }

  .wiadomosc-czas {
    margin-left: 0;
    flex-basis: 100%;
  }

  .karta-skrot {
    display: none;
  }
}

@media (max-width: 699px) {
  .karta-sterowanie .przyciski-statusu .przycisk {
    flex: 1 1 calc(50% - 8px);
    padding-left: var(--s-2);
    padding-right: var(--s-2);
  }
}

/* Szukanie, kolejka "Do odpowiedzi", ładowanie i błąd API, skróty klawiszowe */
.pole-szukaj {
  flex: 1 1 260px;
}

.pole-szukaj input {
  width: 100%;
}

.pasek-bledu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  border: 1px solid var(--blad);
  border-left-width: 4px;
  border-radius: var(--r-2);
}

.pasek-bledu span {
  flex: 1 1 240px;
}

.ladowanie {
  position: fixed;
  left: 50%;
  bottom: calc(60px + env(safe-area-inset-bottom));
  z-index: 15;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-3);
  box-shadow: 0 2px 8px rgba(10, 14, 20, 0.15);
  font-size: var(--fs-1);
  pointer-events: none;
}

.ladowanie[hidden] {
  display: none;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ramka);
  border-top-color: var(--akcent);
  border-radius: 50%;
  animation: obrot 0.8s linear infinite;
}

@keyframes obrot {
  to {
    transform: rotate(360deg);
  }
}

.czekaja {
  margin: var(--s-1) 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-left: 4px solid var(--ostrzezenie);
  border-radius: var(--r-2);
}

.czekaja-tytul {
  font-size: var(--fs-2);
  color: var(--ostrzezenie);
}

.czekaja.pusto-zielone {
  border-left-color: var(--sukces);
}

.czekaja.pusto-zielone .czekaja-tytul {
  color: var(--sukces);
  font-weight: 600;
}

.czekaja-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.czekaja-lista li {
  max-width: 100%;
}

.czekaja-pozycja {
  min-height: var(--wys-kontrolki);
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-size: var(--fs-1);
  text-align: left;
  color: var(--tekst);
  background: var(--panel-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  cursor: pointer;
}

.czekaja-pozycja:hover {
  border-color: var(--akcent);
}

.czekaja-nazwa {
  overflow-wrap: anywhere;
}

.czekaja-czas {
  color: var(--ostrzezenie);
  font-weight: 600;
  white-space: nowrap;
}

.trafienie {
  font-size: var(--fs-1);
  overflow-wrap: anywhere;
}

.wiersz-szansy:focus {
  outline: 3px solid var(--akcent);
  outline-offset: -3px;
}

.pusto .przycisk {
  margin-top: var(--s-3);
}

.skroty {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: rgba(10, 14, 20, 0.55);
}

.skroty-okno {
  width: 100%;
  max-width: 460px;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--panel);
  color: var(--tekst);
  border: 1px solid var(--ramka);
  border-radius: var(--r-3);
  box-shadow: var(--cien);
}

.skroty-okno p {
  margin: 0;
}

.skroty-lista {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-4);
  margin: 0;
}

.skroty-lista dd {
  margin: 0;
}

/* Paleta poleceń (Ctrl+K): szukanie szans i polecenia z klawiatury i z przycisku Szukaj na telefonie. */
.paleta {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: start center;
  padding: 10vh var(--s-4) var(--s-4);
  background: rgba(10, 14, 20, 0.55);
}

.paleta[hidden] {
  display: none;
}

.paleta-okno {
  width: 100%;
  max-width: 600px;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--panel);
  color: var(--tekst);
  border: 1px solid var(--ramka);
  border-radius: var(--r-3);
  box-shadow: var(--cien-wysoki);
}

.paleta-gora {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.paleta-gora input {
  flex: 1 1 auto;
  min-width: 0;
}

.paleta-lista {
  display: grid;
  gap: 2px;
  max-height: 50vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.paleta-pozycja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  cursor: pointer;
}

.paleta-pozycja:hover {
  background: var(--panel-2);
}

.paleta-pozycja[aria-selected="true"] {
  background: var(--akcent-tlo);
  color: var(--akcent-tekst);
}

.paleta-glowny {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.paleta-dodatkowy {
  grid-column: 1;
  font-size: var(--fs-1);
  overflow-wrap: anywhere;
}

.paleta-znak {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: var(--fs-1);
  color: var(--przygaszony);
}

.paleta-pozycja[aria-selected="true"] .paleta-dodatkowy,
.paleta-pozycja[aria-selected="true"] .paleta-znak {
  color: inherit;
}

.paleta-pusto {
  padding: var(--s-2) var(--s-3);
}

.paleta-podpowiedz {
  margin: 0;
  font-size: var(--fs-1);
}

@media (max-width: 699px) {
  .paleta {
    padding-top: var(--s-2);
  }

  .paleta-podpowiedz {
    display: none;
  }
}

kbd {
  display: inline-block;
  min-width: 24px;
  margin-right: var(--s-1);
  padding: 1px var(--s-2);
  text-align: center;
  font:
    13px/1.5 ui-monospace,
    monospace;
  background: var(--panel-2);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-1);
}

/* Telefon: tabela bez kolumn drugorzędnych, kolejka na całą szerokość, bez przycisku skrótów */
@media (max-width: 699px) {
  .tabela .drugorzedna {
    display: none;
  }

  .tabela th,
  .tabela td {
    padding: var(--s-2) var(--s-2);
  }

  .czekaja-lista li,
  .czekaja-pozycja {
    width: 100%;
  }

  .czekaja-pozycja {
    justify-content: space-between;
  }

  #pokaz-skroty {
    display: none;
  }

  .narzedzia > .przycisk {
    flex: 1 1 auto;
  }
}
/* Kafle z trendem i podpowiedzią "jak liczone" */
.kafelek-tytul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}

.jak-liczone {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ramka-pola);
  border-radius: 50%;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--przygaszony);
  cursor: help;
  text-decoration: none;
}

.kafelek-trend {
  margin: 0 0 2px;
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
}

.trend-lepiej {
  color: var(--sukces);
}

.trend-gorzej {
  color: var(--blad);
}

.trend-rowno {
  color: var(--przygaszony);
}

.kafelek-czekaja {
  border-left: 4px solid var(--ostrzezenie);
}

/* Źródło jako litera z kolorem (pełna nazwa w podpowiedzi) */
.zrodlo-litera {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--s-1);
  box-sizing: border-box;
  border-radius: var(--r-1);
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: #566070;
}

.zrodlo-useme {
  background: #1f7a3f;
}

.zrodlo-freelancehunt {
  background: #1d5fa8;
}

.zrodlo-poczta {
  background: #a35200;
}

.zrodlo-formularz,
.zrodlo-strona_www {
  background: #6b3fa0;
}

.zrodlo-komorka {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

.znacznik.zrodlo-znacznik {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

/* Czas czekania na naszą odpowiedź: zielony < 2 h, żółty < 24 h, czerwony dłużej */
.czekanie-zielone,
.znacznik.czekanie-zielone {
  color: var(--sukces);
  border-color: var(--sukces);
  background: var(--wygrane-tlo);
}

.czekanie-zolte,
.znacznik.czekanie-zolte {
  color: var(--ostrzezenie);
  border-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
}

.czekanie-czerwone,
.znacznik.czekanie-czerwone {
  color: var(--blad);
  border-color: var(--blad);
  background: var(--blad-tlo);
  font-weight: 600;
}

.czekaja-czas.czekanie-zielone,
.czekaja-czas.czekanie-zolte,
.czekaja-czas.czekanie-czerwone {
  padding: 1px var(--s-2);
  border: 1px solid;
  border-radius: var(--r-pelny);
}

/* Brak nazwy klienta: czerwona kropka "uzupełnij" */
.kropka-uzupelnij {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: var(--s-2);
  border-radius: 50%;
  background: var(--blad);
  vertical-align: middle;
}

.bez-nazwy {
  color: var(--przygaszony);
  font-style: italic;
}

/* Tabela: wybór kolumn */
.tabela-narzedzia {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--s-2);
}

.wybor-kolumn > summary,
.akcja-rozwijana > summary {
  list-style: none;
  cursor: pointer;
}

.wybor-kolumn > summary::-webkit-details-marker,
.akcja-rozwijana > summary::-webkit-details-marker {
  display: none;
}

.wybor-kolumn-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  box-shadow: 0 6px 24px rgba(10, 14, 20, 0.18);
}

/* Pasek akcji karty: rozwijane panele statusu i scalania */
.pole-w-linii {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.akcja-rozwijana {
  position: relative;
}

.akcja-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  box-shadow: 0 6px 24px rgba(10, 14, 20, 0.18);
}

.akcja-scal .akcja-panel {
  left: auto;
  right: 0;
}

.akcja-panel .scalanie-formularz {
  margin-top: 0;
}

.karta-lepki-tytul {
  display: inline-block;
  max-width: 60vw;
  margin-left: var(--s-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-weight: 600;
  color: var(--tekst);
}

.korespondencja-stopka {
  margin-top: var(--s-2);
}

.korespondencja-stopka:empty {
  display: none;
}

/* Edycja inline firmy i osób */
.inline-wartosc {
  cursor: text;
  border-bottom: 1px dashed var(--ramka-pola);
  overflow-wrap: anywhere;
}

.inline-wartosc:hover {
  background: var(--panel-2);
}

.inline-wartosc:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
}

.inline-zmien {
  margin-left: var(--s-2);
}

.inline-pusta {
  color: var(--przygaszony);
  font-style: italic;
  font-weight: 400;
}

.inline-edycja {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.inline-edycja input,
.inline-edycja textarea {
  min-width: 180px;
  font: inherit;
}

.inline-znacznik {
  font: inherit;
  font-size: var(--fs-1);
  cursor: pointer;
}

.inline-znacznik.wylaczony {
  color: var(--przygaszony);
  border-style: dashed;
}

.osoba-kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
}

@media (max-width: 699px) {
  .liczby {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kolumna {
    max-height: 75vh;
  }

  .karta-sterowanie {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 var(--s-3) var(--s-2);
  }

  .karta-sterowanie > * {
    flex: none;
  }

  .karta-sterowanie .pole-w-linii select {
    width: auto;
  }

  .akcja-panel,
  .akcja-scal .akcja-panel {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
  }

  .wybor-kolumn-lista {
    grid-template-columns: max-content;
  }
}

/* Archiwum, duplikaty, wyjaśnienie statusu i historia w karcie (fala 3, N8/N16/N17/N22). */
.filtr-archiwum {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  margin: 0 0 var(--s-2);
}
.duplikat,
.wyjasnienie-statusu,
.historia-zmian {
  margin: 0 0 var(--s-3);
}
.duplikat-pewnosc {
  margin-left: var(--s-2);
  font-size: 0.85em;
  font-weight: 600;
}
.duplikat-niska .duplikat-pewnosc {
  opacity: 0.7;
}
.wyjasnienie-statusu p {
  margin: 2px 0;
}

/* Fala 3b, U16-U30: dostępność, odświeżanie, szkielet, chipy, kolejka boczna, telefon, druk. */

/* Tekst tylko dla czytnika ekranu (ikony i strzałki mają aria-hidden). */
.tylko-czytnik {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* U17: fokus klawiatury widoczny na każdym elemencie interaktywnym, także w przewijanych
   kontenerach (ujemny odstęp nie jest przycinany) i na przyciskach w kolorze akcentu. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--tlo);
}

.przycisk.glowny:focus-visible,
.przycisk[aria-pressed="true"]:focus-visible {
  outline-color: var(--tekst);
}

.kolumna-tresc .karta-leada-tresc:focus-visible,
.lista-zadan :focus-visible,
.karta-sterowanie :focus-visible,
.zakladki-karty :focus-visible {
  outline-offset: -3px;
  box-shadow: none;
}

input[type="checkbox"]:focus-visible {
  outline-offset: 1px;
}

/* U18: czas ostatniego odświeżenia przy przycisku. */
.odswiez-grupa {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.odswiezono {
  font-size: var(--fs-1);
  white-space: nowrap;
}

/* U19: komunikat błędu z radą, co zrobić. */
.blad-api-tekst {
  overflow-wrap: anywhere;
}

/* U20: szkielet zamiast pustego ekranu przy pierwszym wczytaniu. */
.szkielet-linia {
  display: block;
  height: 12px;
  margin: var(--s-2) 0;
  border-radius: var(--r-1);
  background: linear-gradient(90deg, var(--panel-2) 0%, var(--ramka) 50%, var(--panel-2) 100%);
  background-size: 200% 100%;
  animation: szkielet 1.4s ease-in-out infinite;
}

.szkielet-krotka {
  width: 45%;
}

.szkielet-duza {
  height: 26px;
  width: 35%;
}

.szkielet-widok {
  display: flex;
  gap: var(--s-3);
  width: 100%;
}

.szkielet-kolumna {
  flex: 1 1 0;
  min-width: 220px;
}

.szkielet-tabela {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.szkielet-wiersz-tabeli {
  display: grid;
  grid-template-columns: 56px 3fr 2fr 2fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--ramka);
}

.szkielet-wiersz-tabeli .szkielet-linia {
  width: auto;
  margin: 0;
}

.szkielet-numer {
  width: 36px;
}

.teraz-wiersz.szkielet {
  min-height: 84px;
}

.karta-leada.szkielet {
  cursor: default;
  min-height: 64px;
}

.szkielet-karty {
  display: grid;
  gap: var(--s-3);
}

.sekcja.szkielet {
  padding: var(--s-3) var(--s-4);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

@keyframes szkielet {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

/* U24, U25: presety dat i filtry jako chipy z licznikami (wielokrotny wybór). */
.presety-dat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.przycisk.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border-radius: var(--r-pelny);
  padding: var(--s-2) var(--s-4);
}

.przycisk.chip .licznik {
  min-width: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pelny);
  background: var(--panel-2);
  color: var(--tekst);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.przycisk.chip[aria-pressed="true"] .licznik {
  background: var(--akcent-tekst);
  color: var(--akcent-tlo);
}

.filtr-zrodla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: -4px 0 var(--s-3);
}

/* U23: stan importów jako przycisk i szczegóły źródeł z /api/zdrowie. */
button.znaczek {
  font: inherit;
  font-size: var(--fs-1);
  min-height: var(--wys-mala);
  background: transparent;
  cursor: pointer;
}

button.znaczek.sukces {
  color: var(--sukces);
}

button.znaczek.ostrzezenie {
  color: var(--ostrzezenie);
}

/* Kropka stanu instancji w pasku (monitoring.py): zielona, bursztynowa, czerwona. */
.kropka-stanu {
  width: 14px;
  height: 14px;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--sukces);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--ramka);
  align-self: center;
}

.kropka-stanu.stan-ostrzezenie {
  background: var(--ostrzezenie);
}

.kropka-stanu.stan-awaria {
  background: var(--blad);
}

.lista-przyczyn-stanu {
  margin: var(--s-1) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
}

.przyczyna-stanu {
  padding: var(--s-2) var(--s-3);
  border-left: 4px solid var(--ostrzezenie);
  border-radius: var(--r-1);
  background: var(--ostrzezenie-tlo);
}

.przyczyna-stanu.stan-awaria {
  border-left-color: var(--blad);
  background: var(--blad-tlo);
}

.przyczyna-stanu.stan-ok {
  border-left-color: var(--sukces);
  background: transparent;
}

.szczegoly-zrodel {
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  box-shadow: var(--cien);
}

.szczegoly-zrodel-gora,
.panel-zadan-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.szczegoly-zrodel h2,
.panel-zadan h2 {
  font-size: var(--fs-3);
}

.szczegoly-zrodel p {
  margin: var(--s-1) 0;
}

.lista-zrodel {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-2);
}

.zrodlo-wiersz {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-left: 4px solid var(--sukces);
  border-radius: var(--r-1);
  font-size: var(--fs-1);
}

.zrodlo-wiersz.stan-blad {
  border-left-color: var(--blad);
}

.zrodlo-wiersz.stan-brak,
.zrodlo-wiersz.dawny {
  border-left-color: var(--ostrzezenie);
}

.zrodlo-wiersz-gora {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-2);
}

.znacznik.zrodlo-stan.stan-ok {
  color: var(--sukces);
  border-color: var(--sukces);
  background: var(--wygrane-tlo);
}

.znacznik.zrodlo-stan.stan-blad {
  color: var(--blad);
  border-color: var(--blad);
  background: var(--blad-tlo);
}

.znacznik.zrodlo-stan.stan-brak {
  color: var(--ostrzezenie);
  border-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
}

.zrodlo-uwagi {
  overflow-wrap: anywhere;
}

.zrodlo-rada {
  font-weight: 600;
}

/* U26: kolejka "Do zrobienia" jako panel boczny z przesuwaniem terminu. */
.panel-zadan {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: min(420px, 100%);
  overflow-y: auto;
  padding: var(--s-4);
  background: var(--panel);
  border-left: 1px solid var(--ramka);
  box-shadow: 0 6px 24px rgba(10, 14, 20, 0.18);
}

.panel-zadan-podpis {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-1);
}

.panel-zadan .lista-zadan {
  max-width: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.zadanie-kolejki {
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
}

.lista-zadan li.zadanie-kolejki {
  border-left-width: 4px;
}

.zadanie-kolejki[draggable="true"] {
  cursor: grab;
}

.zadanie-kolejki.przeciagana {
  opacity: 0.5;
}

.zadanie-kolejki-gora {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.zadanie-kolejki-gora input {
  min-height: 0;
  width: 20px;
  height: 20px;
  flex: none;
}

.przesun-termin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-1);
}

.przesun-termin .przycisk.maly {
  min-height: var(--wys-mala);
}

.cele-terminu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}

.cel-terminu {
  padding: var(--s-3) var(--s-2);
  text-align: center;
  font-size: var(--fs-1);
  color: var(--przygaszony);
  border: 2px dashed var(--ramka-pola);
  border-radius: var(--r-2);
}

.cel-terminu.cel-upuszczenia {
  color: var(--akcent);
  border-color: var(--akcent);
  background: var(--panel-2);
}

/* U30: logowanie z opcją zapamiętania klucza. */
.logowanie-karta .zapamietaj {
  font-weight: 400;
}

/* U21: dolny pasek nawigacji tylko na telefonie. */
.dolny-pasek {
  display: none;
}

/* U22: zakładki karty szansy (telefon). */
.zakladki-karty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: -12px -12px var(--s-3);
  background: var(--panel);
  border-bottom: 1px solid var(--ramka);
}

.zakladka {
  min-height: var(--wys-kontrolki);
  font: inherit;
  color: var(--przygaszony);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.zakladka[aria-selected="true"] {
  color: var(--tekst);
  font-weight: 600;
  border-bottom-color: var(--akcent);
}

@media (max-width: 699px) {
  .aplikacja {
    padding-bottom: 84px;
  }

  .dolny-pasek {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--ramka);
    box-shadow: 0 -2px 8px rgba(10, 14, 20, 0.12);
  }

  .dolny-pasek button {
    min-height: 48px;
    font: inherit;
    font-size: var(--fs-2);
    color: var(--tekst);
    background: transparent;
    border: 0;
    border-radius: var(--r-2);
    cursor: pointer;
  }

  .dolny-pasek button[aria-pressed="true"],
  .dolny-pasek button[aria-expanded="true"] {
    color: var(--akcent-tekst);
    background: var(--akcent-tlo);
    font-weight: 600;
  }

  .dolny-pasek button:focus-visible {
    outline-offset: -3px;
    box-shadow: none;
  }

  /* Na telefonie widok przełączamy dolnym paskiem; górne przyciski widoku znikają. */
  .narzedzia .widoki {
    display: none;
  }

  .panel-zadan {
    width: 100%;
    padding-bottom: 84px;
  }

  .odswiez-grupa {
    flex: 1 1 100%;
  }

  .szkielet-kolumna:nth-child(n + 2) {
    display: none;
  }

  .karta-drukuj {
    display: none;
  }
}

/* U29: wydruk karty szansy bez nawigacji, ze wszystkimi sekcjami rozwiniętymi. */
@media print {
  :root {
    color-scheme: light;
    --tlo: #ffffff;
    --panel: #ffffff;
    --panel-2: #f2f2f2;
    --tekst: #000000;
    --przygaszony: #333333;
    --ramka: #999999;
    --akcent: #000000;
  }

  body.karta-otwarta {
    overflow: visible;
  }

  body.karta-otwarta .aplikacja,
  .dolny-pasek,
  .panel-zadan,
  .skroty,
  .karta-lepka,
  .karta .sekcja-przycisk::after,
  .karta .edytor-przyciski,
  .karta form,
  .karta .przycisk,
  .zakladki-karty {
    display: none !important;
  }

  .karta {
    position: static;
    display: block;
    overflow: visible;
  }

  .karta-tresc {
    display: block;
    padding: 0;
  }

  .kolumna-karty {
    overflow: visible;
    max-height: none;
  }

  .karta .sekcja-cialo[hidden],
  .karta .panel-zakladki[hidden] {
    display: block !important;
  }

  .sekcja {
    break-inside: avoid-page;
  }

  .wiadomosc {
    break-inside: avoid;
  }
}
/* Fala 3b: cele, roznice ofert, tagi, szablony, szybkie dodanie, nowa szansa */
.postep-celu {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 180px;
  font-size: var(--fs-1);
}
.postep-celu progress {
  width: 100%;
  accent-color: var(--sukces);
}
.roznica-oferty summary,
.edycja-powodow summary {
  cursor: pointer;
}
.roznica-linia {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-1);
  white-space: pre-wrap;
}
.roznica-plus {
  background: var(--wygrane-tlo);
  color: var(--sukces);
}
.roznica-minus {
  background: var(--blad-tlo);
  color: var(--blad);
  text-decoration: line-through;
}
.tagi-szansy,
.szablony-odpowiedzi,
.szybkie-dodanie,
.tagi-formularz,
.powod-wiersz {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin: var(--s-2) 0;
}
.znacznik.tag {
  background: var(--panel-2);
}
.nowa-szansa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-2);
  padding: var(--s-3);
  margin: var(--s-2) 0;
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}
.nowa-szansa .pole,
.nowa-szansa input,
.nowa-szansa select,
.nowa-szansa textarea {
  min-width: 0;
  max-width: 100%;
}
.nowa-szansa .pole-notatka {
  grid-column: 1 / -1;
}
/* Strefy krawedzi ekranu: tylko podczas przeciagania karty (lewa = przegrana, prawa = wygrana) */
.kanban.przeciaganie.telefon {
  padding-inline: 76px;
  transition: padding-inline 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* PC: kolumny dostaja zamrozona szerokosc (--zamrozona), a padding rosnie razem ze scrollLeft
   (panel.js, pokazStrefyKrawedzi), wiec nic sie nie przesuwa; ostatnia kolumna da sie przewinac spod strefy. */
.kanban.przeciaganie:not(.telefon) {
  padding-inline: 76px;
  scroll-snap-type: none;
  transition: none;
}
.kanban.przeciaganie:not(.telefon) > .kolumna {
  flex: 0 0 var(--zamrozona, auto);
  min-width: 0;
}

.strefa-krawedzi {
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease,
    visibility 0s linear 0.28s;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 84px;
  z-index: 60;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-2);
  letter-spacing: 0.04em;
  pointer-events: auto;
}
.strefa-przegrana {
  transform: translateX(-100%);
}
.strefa-wygrana {
  transform: translateX(100%);
}
.strefa-krawedzi.widoczna {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease,
    visibility 0s;
}
.strefa-krawedzi .strefa-tytul {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.strefa-przegrana {
  left: 0;
  color: var(--blad);
  background: var(--blad-tlo);
  border-right: 3px dashed var(--blad);
}
.strefa-wygrana {
  right: 0;
  color: var(--sukces);
  background: var(--wygrane-tlo);
  border-left: 3px dashed var(--sukces);
}
.strefa-krawedzi.cel {
  background: rgba(180, 35, 24, 0.32);
}
.strefa-wygrana.cel {
  background: rgba(22, 106, 46, 0.32);
}

/* Fala 4 (U31-U40): karta szansy jako miejsce pracy z klientem. Lewa strefa "Rozmowa"
   z polem odpowiedzi przy dolnej krawędzi, prawa "Kontekst" ze zwijanymi sekcjami. */
.karta-nawigacja {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

.karta-nawigacja .przycisk {
  min-width: var(--wys-kontrolki);
  padding-left: var(--s-2);
  padding-right: var(--s-2);
}

.karta-pozycja {
  min-width: 3.5em;
  text-align: center;
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
}

.karta-nawigacja:has(.karta-pozycja:empty) {
  display: none;
}

.karta-co-dalej {
  grid-column: 1 / -1;
}

.karta-co-dalej:empty,
.miejsce-wstawki:empty {
  display: none;
}

.strefa-rozmowa {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0;
}

.strefa-rozmowa > .sekcja-korespondencja {
  flex: 1 1 auto;
  /* 14.10: pole odpowiedzi i wstawki pod nim (streszczenie, wywiad) spychały listę wiadomości do
     220 px, czyli półtora dymka; rozmowa jest głównym miejscem pracy, więc dostaje większość
     wysokości, a reszta kolumny przewija się pod nią. */
  min-height: max(220px, 62vh);
  min-height: max(220px, 62dvh);
  display: flex;
  flex-direction: column;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.strefa-rozmowa > .sekcja-korespondencja > .sekcja-cialo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.strefa-rozmowa > .sekcja-odpowiedz {
  flex: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: var(--panel-2);
}

.rozmowa-przewijana {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-2) -14px 0;
  padding: var(--s-2) var(--s-4) var(--s-4);
  border-top: 1px solid var(--ramka);
  background: var(--tlo);
}

.rozmowa-przewijana > .korespondencja-lista {
  margin-top: auto;
}

.korespondencja-gora {
  display: flex;
  justify-content: center;
}

.korespondencja-gora:empty {
  display: none;
}

.korespondencja-lista {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.korespondencja-narzedzia .przelacznik-techniczne {
  min-height: var(--wys-mala);
  font-size: var(--fs-1);
}

.separator-dnia {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-2) 0 0;
  color: var(--przygaszony);
  font-size: var(--fs-1);
  font-weight: 600;
}

.separator-dnia::before,
.separator-dnia::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--ramka);
}

.wiadomosc.dymek {
  max-width: min(80%, 720px);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-3);
}

.wiadomosc.dymek.kierunek-klient {
  align-self: flex-start;
  background: var(--dymek-klient);
  border-bottom-left-radius: 4px;
}

.wiadomosc.dymek.kierunek-my {
  align-self: flex-end;
  background: var(--dymek-my);
  border-color: var(--dymek-my-ramka);
  border-bottom-right-radius: 4px;
}

.wiadomosc.dymek.strona-srodek {
  align-self: center;
  max-width: 92%;
  padding: var(--s-1) var(--s-3);
  background: transparent;
  border-style: dashed;
  border-radius: var(--r-2);
  font-size: var(--fs-1);
  color: var(--przygaszony);
}

.dymek .wiadomosc-gora {
  gap: var(--s-1) var(--s-2);
  font-size: var(--fs-1);
}

.dymek .wiadomosc-czas {
  margin-left: auto;
  flex-basis: auto;
  font-size: var(--fs-1);
}

.dymek .wiadomosc-temat {
  font-size: var(--fs-2);
}

.dymek .wiadomosc-tresc {
  margin-top: var(--s-1);
}

.dymek.strona-srodek .wiadomosc-skrot,
.dymek.strona-srodek .wiadomosc-temat {
  margin: 2px 0 0;
  font-size: var(--fs-1);
  font-weight: 400;
}

.pigulki,
.zalaczniki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.pigulki {
  margin-bottom: var(--s-3);
}

.zalaczniki {
  margin-top: var(--s-2);
}

.pigulka {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  max-width: 100%;
  padding: 2px var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-pelny);
  background: var(--panel-2);
  font-size: var(--fs-1);
  overflow-wrap: anywhere;
}

.pigulka-budzet {
  font-weight: 600;
}

.pigulka-zalacznika {
  background: var(--panel);
}

.opis-ogloszenia.zwiniety-3 {
  overflow: hidden;
}

.opis-ogloszenia.zwiniety-3 .tekst-blokowy {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.przycisk-rozwin {
  margin-top: var(--s-2);
}

.pola-zwiezle {
  margin-top: var(--s-3);
  font-size: var(--fs-1);
}

.sekcja-zwijana .sekcja-przycisk {
  cursor: pointer;
}

.sekcja-zwijana .sekcja-przycisk:hover {
  background: var(--panel-2);
}

.sekcja-zwijana .sekcja-przycisk::after {
  content: "\25BE";
  float: right;
  color: var(--przygaszony);
}

.sekcja-zwijana .sekcja-przycisk[aria-expanded="true"]::after {
  content: "\25B4";
}

.strefa-kontekst {
  gap: var(--s-3);
}

.strefa-kontekst .sekcja-przycisk {
  min-height: var(--wys-kontrolki);
  padding: var(--s-2) var(--s-3);
}

.strefa-kontekst .sekcja-cialo {
  padding: 0 var(--s-3) var(--s-3);
}

/* Pole odpowiedzi jak w komunikatorze; nagłówek sekcji tylko dla czytnika ekranu. */
.sekcja-odpowiedz > .sekcja-naglowek {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sekcja-odpowiedz > .sekcja-cialo {
  padding-top: var(--s-3);
}

/* Siatki karty z jedną kolumną nie rosną ponad ekran przez długie rzędy bez zawijania. */
.kolumna-karty,
.kompozytor,
.oferta-karta {
  grid-template-columns: minmax(0, 1fr);
}

.kompozytor {
  gap: var(--s-2);
  margin-bottom: 0;
}

.kompozytor-narzedzia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.kompozytor-narzedzia .szablony-odpowiedzi {
  margin: 0;
}

.kompozytor .pole-odpowiedzi {
  width: 100%;
  min-height: 72px;
  max-height: 40vh;
  resize: vertical;
  field-sizing: content;
}

.kompozytor-dol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.kompozytor-dol .odpowiedz-podpis {
  flex: 1 1 220px;
  margin: 0;
  font-size: var(--fs-1);
}

.licznik-znakow {
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
}

.licznik-znakow.blisko-limitu {
  color: var(--ostrzezenie);
  font-weight: 600;
}

/* Oferta jako karta: kwota, termin, stan, potem wersje z różnicami. */
.oferta-karta {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--ramka);
  border-left: 4px solid var(--akcent);
  border-radius: var(--r-2);
  background: var(--panel-2);
}

.oferta-karta-pusta {
  border-left-color: var(--ramka-pola);
  background: transparent;
}

.oferta-karta-wyslana {
  border-left-color: var(--sukces);
}

.oferta-karta-wstrzymana,
.oferta-karta-w_wysylce {
  border-left-color: var(--ostrzezenie);
}

.oferta-karta-blad {
  border-left-color: var(--blad);
}

.oferta-karta-gora {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
}

.oferta-karta-kwota {
  font-size: var(--fs-4);
}

.oferta-karta-dni {
  color: var(--przygaszony);
}

.oferta-karta-meta {
  margin: 0;
  font-size: var(--fs-1);
}

.oferta-wersje {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.oferta-wersje-tytul {
  margin: 0;
  font-size: var(--fs-1);
  color: var(--przygaszony);
}

.oferta-wersje .oferta-blok {
  margin: 0;
  padding: var(--s-2) var(--s-3);
}

.oferta-zmiany {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--ostrzezenie);
}

/* Kontakty: firma i osoby w jednej sekcji, z inicjałami. */
.kontakty-firma,
.kontakty-osoby {
  display: grid;
  gap: var(--s-2);
}

.kontakty-osoby {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ramka);
}

.kontakt-wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.kontakt-glowne {
  flex: 1 1 160px;
  min-width: 0;
}

.kontakt-glowne p,
.kontakty-firma .firma-nazwa {
  margin: 0;
}

.kontakt-podpis {
  font-size: var(--fs-1);
}

.awatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: var(--fs-1);
  font-weight: 700;
  color: #ffffff;
  background: var(--awatar-1);
}

.awatar-firma {
  border-radius: var(--r-2);
}

.awatar-pusty {
  color: var(--przygaszony);
  background: var(--panel-2);
  border: 1px dashed var(--ramka-pola);
}

.awatar-kolor-0 {
  background: var(--awatar-2);
}

.awatar-kolor-1 {
  background: var(--awatar-3);
}

.awatar-kolor-2 {
  background: var(--awatar-4);
}

.awatar-kolor-3 {
  background: var(--awatar-5);
}

.awatar-kolor-4 {
  background: var(--awatar-6);
}

.awatar-kolor-5 {
  background: var(--awatar-7);
}

.kontakty-osoby .osoba {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-2) var(--s-3);
}

.osoba-tresc {
  flex: 1 1 auto;
  min-width: 0;
}

.osoba-gora > .przycisk.maly:last-child {
  margin-left: auto;
}

.oddzialy-firmy h4 {
  margin: var(--s-3) 0 var(--s-1);
}

.lista-oddzialow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-1);
}

.lista-oddzialow .przycisk-link,
.firma-centrala .przycisk-link,
.podglad-firmy .przycisk-link {
  min-height: var(--wys-mala);
  text-align: left;
  overflow-wrap: anywhere;
}

.firma-centrala {
  margin: 0;
  overflow-wrap: anywhere;
}

.podglad-firmy {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
  overflow-wrap: anywhere;
}

.podglad-firmy p {
  margin: 0;
}

.firma-szczegoly > summary {
  min-height: var(--wys-mala);
  padding: var(--s-1) 0;
  color: var(--akcent);
  font-size: var(--fs-1);
  cursor: pointer;
}

.kontakty-dodaj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.kontakty-dodaj .szybkie-dodanie {
  flex: 1 1 260px;
  margin: 0;
}

.ostrzezenia-karty {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ostrzezenie);
  border-left-width: 4px;
  border-radius: var(--r-2);
  background: var(--ostrzezenie-tlo);
}

.ostrzezenia-karty .duplikat:last-child {
  margin-bottom: 0;
}

/* U39: toasty w prawym dolnym rogu, z paskiem odliczania 6 s przy "Cofnij". */
.toasty {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-left: 4px solid var(--akcent);
  border-radius: var(--r-2);
  box-shadow: var(--cien-wysoki);
  pointer-events: auto;
  animation: toast-wejscie 0.18s ease-out;
}

.toast-sukces {
  border-left-color: var(--sukces);
}

.toast-blad {
  border-left-color: var(--blad);
}

.toast-tekst {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast-cofnij {
  flex: none;
  font-weight: 700;
}

.toast-zamknij {
  flex: none;
  width: 36px;
  height: 36px;
  font-size: var(--fs-4);
  line-height: 1;
  color: var(--przygaszony);
  background: transparent;
  border: 0;
  border-radius: var(--r-1);
  cursor: pointer;
}

.toast-zamknij:hover {
  background: var(--panel-2);
}

.toast-postep {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--akcent);
  transform-origin: left;
  animation: toast-postep 10s linear forwards;
}

@keyframes toast-postep {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@keyframes toast-wejscie {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* U40: okno wyboru powodu przegranej (plan_dnia.js, wygląd w wyglad.css). */
.dymek-powodu {
  cursor: default;
}

@media (max-width: 900px) {
  .rozmowa-przewijana {
    overflow: visible;
    margin: var(--s-2) -14px 0;
  }

  .karta .sekcja-odpowiedz {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--panel-2);
    box-shadow: 0 -2px 8px rgba(10, 14, 20, 0.18);
  }

  .wiadomosc.dymek {
    max-width: 88%;
  }
}

@media (max-width: 699px) {
  .toasty {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
  }

  .karta-gora {
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  /* Przyklejone pole odpowiedzi zajmuje mało miejsca: narzędzia w jednym przewijanym rzędzie. */
  .filtr-kanalow,
  .kompozytor-narzedzia,
  .kompozytor-narzedzia .szablony-odpowiedzi {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .filtr-kanalow .przycisk,
  .kompozytor-narzedzia .przycisk,
  .kompozytor-narzedzia select {
    flex: none;
    min-height: var(--wys-kontrolki);
  }

  .kompozytor-narzedzia select {
    max-width: 48vw;
  }

  .kompozytor .pole-odpowiedzi {
    min-height: 56px;
  }

  .kompozytor-dol {
    justify-content: flex-end;
  }

  .kompozytor-dol .odpowiedz-podpis {
    flex-basis: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

@media print {
  .toasty,
  .karta-nawigacja,
  .miejsce-wstawki,
  .dymek-powodu {
    display: none !important;
  }

  .opis-ogloszenia.zwiniety-3 .tekst-blokowy {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
  }

  .wiadomosc.dymek {
    max-width: none;
  }
}

/* Karta Kanbana: pelny tytul w dwoch liniach i dwa wiersze "o co chodzi" */
.karta-lead-nazwa {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.karta-lead-o-co {
  margin: 2px 0 var(--s-1);
  font-size: var(--fs-1);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Fala 4: aktywnosc dnia, masowe akcje w tabeli, widoki, import CSV, tryb skupienia */
.aktywnosc-dnia {
  margin: 0;
  font-size: var(--fs-2);
}

.kolumna-zaznacz {
  width: 44px;
  text-align: center;
}

.kolumna-zaznacz input {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}

.wiersz-szansy.zaznaczony {
  background: var(--panel-2);
  box-shadow: inset 3px 0 0 var(--akcent);
}

.tabela-narzedzia {
  flex-wrap: wrap;
  gap: var(--s-2);
}

.pasek-masowy {
  order: -1;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  border: 1px solid var(--akcent);
  border-radius: var(--r-2);
}

.pasek-masowy[hidden] {
  display: none;
}

.pasek-masowy-licznik {
  font-weight: 600;
}

.pasek-masowy .komunikat-lokalny {
  flex-basis: 100%;
}

.menu-widokow {
  position: relative;
}

.menu-widokow > summary {
  list-style: none;
  cursor: pointer;
}

.menu-widokow > summary::-webkit-details-marker {
  display: none;
}

.menu-widokow-lista {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 6;
  display: grid;
  gap: var(--s-2);
  min-width: 260px;
  max-width: min(420px, calc(100vw - 32px));
  padding: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  box-shadow: 0 6px 24px rgba(10, 14, 20, 0.18);
}

.menu-widokow-pozycja,
.menu-widokow-zapis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.menu-widokow-zapis input {
  flex: 1 1 140px;
  min-width: 0;
}

.menu-widokow-zapis input[type="checkbox"] {
  flex: 0 0 auto;
  min-width: 0;
}

.menu-widokow-domyslny {
  display: flex;
  flex: 1 1 100%;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--fs-1);
}

.widok-gwiazdka[aria-pressed="true"] {
  font-weight: 600;
}

.import-csv {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  margin: var(--s-2) 0;
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.import-csv[hidden] {
  display: none;
}

@media (max-width: 699px) {
  .import-csv {
    margin-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

.import-csv textarea {
  width: 100%;
  font-family: ui-monospace, monospace;
}

.import-csv-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.import-csv-wynik {
  overflow-x: auto;
}

.import-csv-tabela .import-csv-blad td:last-child {
  color: var(--blad);
}

.import-csv-tabela .import-csv-duplikat td:last-child,
.import-csv-tabela .import-csv-powtorka td:last-child {
  color: var(--przygaszony);
}

.skupienie-pasek {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: var(--ostrzezenie-tlo);
  border-bottom: 1px solid var(--ramka);
}

.skupienie-licznik {
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}

/* Fala 4: pasek "Co dalej" z kontaktem, oferta z karty, oś czasu, dymek warunków umowy. */
.fala4-pasek {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-1);
}
.bant {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.bant-rzad {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-1);
}
.bant-kafel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: var(--wys-kontrolki);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--ramka);
  border-top: 4px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bant-kafel[data-stan="znany"] {
  border-top-color: var(--sukces);
}
.bant-kafel[data-stan="czesciowy"] {
  border-top-color: var(--ostrzezenie);
}
.bant-kafel[aria-pressed="true"] {
  border-color: var(--akcent);
}
.bant-nazwa {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bant-stan {
  font-size: 0.8rem;
  font-weight: 600;
}
.bant-kafel[data-stan="brak"] .bant-stan {
  opacity: 0.6;
  font-weight: 400;
}
.bant-dowod {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel-2);
}
.bant-dowod p {
  margin: 0 0 var(--s-1);
}
.bant-cytat {
  margin: 0 0 var(--s-1);
  padding-left: var(--s-2);
  border-left: 3px solid var(--ramka);
  overflow-wrap: anywhere;
}
.co-dalej {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-left: 4px solid var(--akcent);
  border-radius: var(--r-2);
  background: var(--panel-2);
}
.co-dalej-odpowiedz,
.co-dalej-zamknij {
  border-left-color: var(--blad);
}
.co-dalej-follow_up,
.co-dalej-uzupelnij {
  border-left-color: var(--ostrzezenie);
}
.co-dalej-brak {
  border-left-color: var(--sukces);
}
.fala4-kontakt,
.formularz-inline,
.filtr-osi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.fala4-edytor {
  margin-top: var(--s-2);
}
.fala4-edytor textarea,
.formularz-oferty textarea {
  width: 100%;
}
.fala4-oferta {
  margin-bottom: var(--s-2);
}
.formularz-oferty {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.filtr-osi {
  margin: var(--s-1) 0 var(--s-2);
}
.filtr-osi .aktywny {
  background: var(--akcent-tlo);
  color: var(--akcent-tekst);
}
.os-czasu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.punkt-osi {
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  border-left: 3px solid var(--ramka);
  margin-bottom: var(--s-1);
}
.punkt-osi.grupa-rozmowa {
  border-left-color: var(--akcent);
}
.punkt-osi-gora {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.streszczenie.nieaktualne .streszczenie-tresc {
  opacity: 0.7;
}
.lista-wykrytych,
.lista-brakow {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista-wykrytych li,
.lista-brakow li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--ramka);
}
.dymek-umowy {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 40;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 32px));
  padding: var(--s-4) var(--s-4);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel);
  color: var(--tekst);
  box-shadow: 0 6px 24px rgba(10, 14, 20, 0.25);
}
/* Fala 4b (U41-U50): Kanban, tabela, cele, animacje, czcionka, gesty, stany puste, wprowadzenie, ikony */

/* U46: rozmiar czcionki A- / A+ (wszystkie font-size liczone od --skala). */
:root[data-czcionka="mala"] {
  --skala: 0.9;
}

:root[data-czcionka="duza"] {
  --skala: 1.15;
}

.czcionka {
  display: inline-flex;
  gap: var(--s-1);
}

.przycisk-czcionki {
  min-width: var(--wys-kontrolki);
  padding: var(--s-2) var(--s-3);
  font-weight: 700;
}

/* U50: jeden zestaw ikon SVG (symbole w index.html, <use>). */
.ikony-zestaw {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ikona {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.przycisk:has(> .ikona) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.karta-nawigacja .przycisk {
  min-width: var(--wys-kontrolki);
}

.toast-zamknij {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.toast-zamknij .ikona {
  width: 18px;
  height: 18px;
}

.skroty-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* U41: pasek priorytetu przy lewej krawędzi karty (próg 0-24, 25-49, 50-74, 75-100). */
.karta-leada {
  position: relative;
  border-color: var(--ramka-karty);
}

.pasek-priorytetu {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: var(--prio-niski);
}

.pasek-priorytetu.priorytet-sredni {
  background: var(--prio-sredni);
}

.pasek-priorytetu.priorytet-wysoki {
  background: var(--prio-wysoki);
}

.pasek-priorytetu.priorytet-pilny {
  background: var(--prio-pilny);
  width: 5px;
}

/* U41: wartość ofert pod nagłówkiem kolumny. */
.kolumna-wartosc {
  display: block;
  padding: 0 var(--s-2) var(--s-2);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
}

.kolumna-tytul {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.kolumna-naglowek[aria-expanded] {
  cursor: pointer;
}

/* U41: pusta kolumna zwinięta do wąskiego paska z nazwą; klik rozwija (pamięć w localStorage). */
.kolumna.zwinieta-pusta {
  flex: 0 0 52px;
  min-width: 52px;
  padding: var(--s-2) var(--s-1);
}

.kolumna.zwinieta-pusta .kolumna-naglowek {
  writing-mode: vertical-rl;
  justify-content: flex-start;
  align-items: center;
  width: 42px;
  min-height: 180px;
  padding: var(--s-3) 0;
  gap: var(--s-3);
  border-radius: var(--r-1);
}

.kolumna.zwinieta-pusta .kolumna-naglowek:hover {
  background: var(--panel);
}

/* U42: wirtualna kolumna "Do odpowiedzi". */
.kolumna-czekajacych {
  background: var(--ostrzezenie-tlo);
  border-color: var(--ostrzezenie);
}

.kolumna-naglowek-czekajacych {
  cursor: default;
}

.karta-czekajaca .czas-czekania {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-weight: 700;
}

/* Czas jest na górze karty; drugi znacznik "Czeka na nas" byłby powtórzeniem. */
.karta-czekajaca .znacznik.oczekiwanie-czeka_na_nas {
  display: none;
}

.kanban.telefon .kolumna-naglowek-czekajacych::after,
.kanban.telefon .kolumna-czekajacych > .kolumna-wartosc {
  display: none;
}

.pusta-kolumna-krok {
  padding: var(--s-4) var(--s-3);
  font-size: var(--fs-1);
}

/* U43: grupy w tabeli i nagłówek przyklejony do góry przewijanej tabeli. */
.tabela-przewijana {
  overflow: auto;
  max-height: calc(100vh - 24px);
  max-height: var(--wys-tabeli, calc(100dvh - 24px));
}

.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--ramka-pola);
}

.tabela .wiersz-grupy th {
  padding: var(--s-2);
  text-align: left;
  white-space: normal;
  color: var(--tekst);
  background: var(--panel-2);
  border-top: 2px solid var(--ramka-pola);
}

.grupa-nazwa {
  font-weight: 700;
}

.grupa-sumy {
  margin-left: var(--s-3);
  color: var(--przygaszony);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.pole-grupowania {
  display: inline-grid;
}

/* U44: pasek celów w nagłówku. */
.pasek-celow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

.cel-naglowka {
  display: grid;
  gap: var(--s-1);
  min-width: 160px;
  font-size: var(--fs-1);
}

.cel-naglowka-opis {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}

.cel-naglowka.osiagniety .cel-naglowka-brak {
  color: var(--sukces);
  font-weight: 600;
}

.cel-naglowka progress {
  width: 100%;
  height: 8px;
  appearance: none;
  border: 0;
  border-radius: var(--r-pelny);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--ramka-pola);
  overflow: hidden;
}

.cel-naglowka progress::-webkit-progress-bar {
  background: transparent;
}

.cel-naglowka progress::-webkit-progress-value {
  background: var(--akcent);
  border-radius: var(--r-pelny);
}

.cel-naglowka progress::-moz-progress-bar {
  background: var(--akcent);
  border-radius: var(--r-pelny);
}

.cel-naglowka.osiagniety progress::-webkit-progress-value {
  background: var(--sukces);
}

.cel-naglowka.osiagniety progress::-moz-progress-bar {
  background: var(--sukces);
}

/* U45: karta szansy wsuwa się z prawej. */
.karta:not([hidden]) {
  animation: karta-wsun 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes karta-wsun {
  from {
    transform: translateX(100%);
  }
  to {
    transform: none;
  }
}

/* U47: gest na karcie (telefon) i pull-to-refresh. */
.odswiez-gestem {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  transform: translateX(-50%);
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-pelny);
  box-shadow: var(--cien-wysoki);
  font-size: var(--fs-1);
}

.odswiez-gestem.gotowe {
  color: var(--akcent);
  border-color: var(--akcent);
}

.odswiez-gestem .ikona {
  transition: transform 0.2s ease;
}

.odswiez-gestem.gotowe .ikona {
  transform: rotate(180deg);
}

/* U48: stany puste z następnym krokiem. */
.pusto-krok .pusto-akcja {
  margin-top: var(--s-3);
}

.czekaja-krok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 0;
}

.lista-zadan .zadania-pusto {
  list-style: none;
}

/* U49: wprowadzenie w 3 krokach (okno w rogu, wskazany element obrysowany). */
.wprowadzenie {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 45;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4);
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--akcent);
  border-radius: var(--r-3);
  box-shadow: var(--cien-wysoki);
  animation: toast-wejscie 0.2s ease-out;
}

.wprowadzenie h2 {
  font-size: var(--fs-3);
}

.wprowadzenie p {
  margin: 0;
}

.wprowadzenie-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

#wprowadzenie-pomin {
  margin-right: auto;
}

.wprowadzenie-cel {
  outline: 3px solid var(--akcent);
  outline-offset: 4px;
  border-radius: var(--r-2);
  animation: wprowadzenie-puls 1.6s ease-in-out infinite;
}

@keyframes wprowadzenie-puls {
  50% {
    outline-color: transparent;
  }
}

/* U50: cele dotyku 44 px także w karcie szansy (sekcje, rozwijane listy, linki poza tekstem, edycja inline). */
.karta summary:not(.przycisk) {
  padding-block: var(--s-3);
}

.karta-tresc a[href]:not(.tekst-blokowy a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wys-kontrolki);
}

.karta .inline-wartosc {
  display: inline-flex;
  align-items: center;
  min-height: var(--wys-kontrolki);
  border-bottom: 0;
  text-decoration: underline dashed var(--ramka-pola);
  text-underline-offset: 4px;
}

.karta .inline-znacznik {
  min-height: var(--wys-kontrolki);
}

/* U50: focus-visible na nowych elementach (jak na przyciskach). */
.kolumna-naglowek:focus-visible,
.pusto-akcja:focus-visible,
.przycisk-czcionki:focus-visible,
#kolumna-czekajacych:focus-visible,
.wybor-grupowania:focus-visible,
.czekaja-krok .przycisk:focus-visible,
.toast-zamknij:focus-visible,
.wprowadzenie .przycisk:focus-visible,
.dolny-pasek button:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
}

.kolumna.zwinieta-pusta .kolumna-naglowek:focus-visible {
  outline-offset: -3px;
}

@media (max-width: 699px) {
  html {
    overscroll-behavior-y: contain;
  }

  .kanban.telefon .karta-leada {
    touch-action: pan-y;
    transition:
      transform 0.18s ease,
      background-color 0.18s ease;
  }

  .karta-leada.gest-w-toku {
    box-shadow: var(--cien-wysoki);
  }

  .karta-leada.gest-wygrany {
    transform: translateX(20px);
    background: var(--wygrane-tlo);
    border-color: var(--sukces);
  }

  .karta-leada.gest-przegrany {
    transform: translateX(-20px);
    background: var(--przegrane-tlo);
    border-color: var(--przygaszony);
  }

  .karta-leada.gest-zadanie {
    transform: translateX(14px);
    border-color: var(--sukces);
  }

  .karta-leada.gest-odloz {
    transform: translateX(-14px);
    border-color: var(--ostrzezenie);
  }

  .karta-leada[data-gest-opis]::after {
    content: attr(data-gest-opis);
    position: absolute;
    right: 10px;
    bottom: 6px;
    padding: 0 var(--s-3);
    border: 1px solid currentColor;
    border-radius: var(--r-pelny);
    font-size: var(--fs-1);
    font-weight: 700;
    line-height: 1.6;
    color: var(--tekst);
    background: var(--panel);
    pointer-events: none;
  }

  .karta-leada.gest-wygrany[data-gest-opis]::after {
    color: var(--sukces);
    background: var(--wygrane-tlo);
  }

  .karta-leada.gest-przegrany[data-gest-opis]::after {
    background: var(--przegrane-tlo);
  }

  .dolny-pasek button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    font-size: var(--fs-1);
  }

  .dolny-pasek .ikona {
    width: 22px;
    height: 22px;
  }

  .wprowadzenie {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .gora-akcje {
    flex-wrap: wrap;
  }

  .pasek-celow {
    width: 100%;
  }

  .cel-naglowka {
    flex: 1 1 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .karta:not([hidden]),
  .wprowadzenie,
  .wprowadzenie-cel {
    animation: none;
  }

  .karta-leada.gest-wygrany,
  .karta-leada.gest-przegrany,
  .karta-leada.gest-zadanie,
  .karta-leada.gest-odloz {
    transform: none;
  }
}

@media print {
  .pasek-celow,
  .czcionka,
  .wprowadzenie,
  .odswiez-gestem,
  .pasek-priorytetu {
    display: none !important;
  }
}

/* P1: logowanie loginem i hasłem, klucz API jako druga droga, konta i role */
.logowanie-formularz {
  display: grid;
  gap: var(--s-3);
}

.logowanie-formularz label {
  font-weight: 600;
}

.logowanie-kluczem {
  border-top: 1px solid var(--ramka);
  padding-top: var(--s-3);
}

.logowanie-kluczem summary {
  cursor: pointer;
  color: var(--akcent);
  min-height: var(--wys-kontrolki);
  display: flex;
  align-items: center;
}

.logowanie-kluczem[open] summary {
  margin-bottom: var(--s-2);
}

.zalogowany {
  align-self: center;
  font-size: var(--fs-2);
}

.ustawienia-uzytkownikow .tabela-kont {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-2) 0 var(--s-4);
}

.tabela-kont th,
.tabela-kont td {
  text-align: left;
  padding: var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--ramka);
  vertical-align: middle;
}

.tabela-kont .wiersz-wylaczony td {
  color: var(--przygaszony);
}

.konto-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.formularz-konta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: flex-end;
  margin: var(--s-2) 0;
}

.sekret-konta {
  margin: var(--s-3) 0;
  padding: var(--s-3);
  border: 1px solid var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
  border-radius: var(--r-2);
  display: grid;
  gap: var(--s-2);
}

.sekret-konta code {
  font-size: var(--fs-2);
  word-break: break-all;
  user-select: all;
}

.sekcja-bezp {
  margin: 0 0 var(--s-5);
}

.sekcja-bezp h3 {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--fs-3);
}

.sekcja-bezp h4 {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--fs-2);
}

.sekcja-bezp select[multiple] {
  min-width: 160px;
}

.pasek-bezpieczenstwa {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  background: var(--ostrzezenie-tlo);
  color: var(--tekst);
  border-bottom: 1px solid var(--ostrzezenie);
}

.stan-bezp {
  font-weight: 600;
}

.stan-bezp-ok {
  color: var(--sukces);
}

.stan-bezp-ostrzezenie {
  color: var(--ostrzezenie);
}

.stan-bezp-awaria {
  color: var(--blad);
}

.ogolny-stan {
  font-weight: 600;
  margin: var(--s-1) 0 var(--s-2);
}

.kod-qr {
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
  background: #ffffff;
  border-radius: var(--r-1);
}

@media (max-width: 699px) {
  .tabela-kont thead {
    display: none;
  }

  .tabela-kont tr,
  .tabela-kont td {
    display: block;
  }

  .tabela-kont tr {
    border-bottom: 1px solid var(--ramka);
    padding: var(--s-2) 0;
  }

  .tabela-kont td {
    border: 0;
    padding: 2px 0;
  }
}

/* Rola odczyt (sesja albo klucz odczytu): dane widać, akcji zmieniających nie ma. */
body.tylko-odczyt #karta-tresc form,
body.tylko-odczyt .lista-notatek .przycisk,
body.tylko-odczyt .zmienia,
body.tylko-odczyt .nowa-szansa,
body.tylko-odczyt .import-csv {
  display: none !important;
}

body.tylko-odczyt #karta-tresc input[type="checkbox"] {
  pointer-events: none;
}

/* P3: import CSV z mapowaniem kolumn i ekran Ustawienia -> Podlacz zrodla */
.przycisk-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--akcent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.import-csv-kolumny {
  overflow-x: auto;
}

.import-csv-mapowanie select {
  min-width: 9em;
}

.import-csv-mapowanie td {
  max-width: 16em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ustawienia-tresc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}

/* Kolumna minmax(0, 1fr): niepodzielna zawartość bloku (pole z domyślną szerokością, fragment kodu) nie rozpycha
   całej strony Ustawień ponad ekran telefonu (ok. 529 px na 390 px). */
.ustawienia-blok {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.ustawienia-blok h3 {
  margin: 0;
  font-size: var(--fs-2);
}

.ustawienia-pola {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-2) var(--s-3);
}

.ustawienia-pola[hidden] {
  display: none;
}

.ustawienia-pola input {
  width: 100%;
}

.ustawienia-pola-pion {
  display: grid;
  gap: var(--s-2);
}

.ustawienia-fragment {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: var(--fs-1);
}

.ustawienia-zrodla {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-1) var(--s-3);
}

.ustawienia-zrodla .przygaszony {
  font-size: var(--fs-1);
}

.ustawienia-postep {
  width: 100%;
}

.ustawienia-postep[hidden] {
  display: none;
}

body.tylko-odczyt #pokaz-ustawienia {
  display: none;
}

/* Marka instancji ([wyglad] w instancja.toml): kolory daje panel/marka.css z serwera, tu tylko logo. */
.logo-marki img,
#logowanie-marka img {
  display: block;
  height: calc(32px * var(--skala, 1));
  width: auto;
  max-width: 220px;
}
#logowanie-marka img {
  height: 48px;
  max-width: 260px;
  margin-bottom: var(--s-1);
}
.logo-marki img.znak-fluxcrm {
  height: calc(28px * var(--skala, 1));
  border-radius: 7px;
}
.logo-marki:has(.znak-fluxcrm) {
  margin-right: calc(var(--s-3) * -0.5);
  align-self: center;
}
@media (max-width: 699px) {
  .tytul:has(.znak-fluxcrm) #nazwa-firmy {
    display: none;
  }
}
.logo-marki {
  display: inline-flex;
  align-items: center;
  margin-right: var(--s-3);
}
.logo-marki img.logo-ciemny,
#logowanie-marka img.logo-ciemny {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-marki img.logo-jasny,
  :root:not([data-theme="light"]) #logowanie-marka img.logo-jasny {
    display: none;
  }
  :root:not([data-theme="light"]) .logo-marki img.logo-ciemny,
  :root:not([data-theme="light"]) #logowanie-marka img.logo-ciemny {
    display: block;
  }
}
:root[data-theme="dark"] .logo-marki img.logo-jasny,
:root[data-theme="dark"] #logowanie-marka img.logo-jasny {
  display: none;
}
:root[data-theme="dark"] .logo-marki img.logo-ciemny,
:root[data-theme="dark"] #logowanie-marka img.logo-ciemny {
  display: block;
}

/* Katalog usług i wytyczne ofert (Ustawienia), wywiad o kliencie (karta). */
.katalog-lista {
  display: grid;
  gap: var(--s-2);
}

.katalog-wiersz {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 80px 1fr auto;
  gap: var(--s-2) var(--s-2);
  align-items: center;
  padding: var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.katalog-wiersz.nieaktywny {
  opacity: 0.6;
}

.katalog-wiersz textarea,
.katalog-wiersz .katalog-przyciski {
  grid-column: 1 / -1;
}

.katalog-przyciski {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.wywiad-tresc {
  max-height: 24em;
  overflow: auto;
}

.wywiad-zrodla {
  overflow-wrap: anywhere;
}

@media (max-width: 699px) {
  .katalog-wiersz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Pola z domyślną szerokością (size=20) rozpychały stronę Ustawień do ok. 529 px na 390 px. */
  .katalog-wiersz > * {
    min-width: 0;
  }

  .katalog-wiersz input,
  .katalog-wiersz select {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Reguły automatyczne (Ustawienia). */
.reguly-lista {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.regula-wiersz,
.regula-edytor {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.regula-wiersz.nieaktywny {
  opacity: 0.7;
}

.regula-glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.regula-pole {
  display: grid;
  gap: 2px;
}

.regula-parametry {
  display: grid;
  gap: var(--s-2);
}

.regula-edytor-miejsce {
  margin-top: var(--s-2);
}

.regula-edytor input[type="text"],
.regula-edytor input[type="number"],
.regula-edytor select,
.regula-edytor textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.regula-test {
  padding: var(--s-2) var(--s-2);
  border-left: 3px solid var(--akcent);
}

.regula-test p {
  margin: var(--s-1) 0;
}

.regula-test-lista {
  margin: var(--s-1) 0;
  padding-left: var(--s-4);
}

.regula-filtry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  min-width: 0;
}

.regula-filtry legend {
  padding: 0 var(--s-1);
}

.regula-dodatkowe {
  display: grid;
  gap: var(--s-2);
}

.regula-dodatkowa {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 1px dashed var(--ramka);
  border-radius: var(--r-2);
}

.regula-podglad {
  min-height: 1.5em;
}

/* Ekran offline aplikacji (panel/offline.html z service workera). */
.ekran-offline {
  max-width: 36em;
  margin: 15vh auto;
  padding: 0 var(--s-4);
  display: grid;
  gap: var(--s-3);
}

/* Instrukcja instalacji aplikacji (panel/instalacja.html). */
.instalacja {
  max-width: 44em;
  margin: 0 auto;
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
}

.instalacja ol {
  padding-left: 1.4em;
  display: grid;
  gap: var(--s-2);
}

/* Sekcja "Sprawa" karty szansy: własne pola instancji w siatce dwóch kolumn (panel.js, sekcjaSprawy). */
.siatka-sprawy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-3);
}

.pole-sprawy input,
.pole-sprawy select,
.pole-sprawy textarea {
  width: 100%;
  min-width: 0;
}

.pole-sprawy [aria-invalid="true"] {
  border-color: var(--blad);
}

.pole-sprawy-szerokie {
  grid-column: 1 / -1;
}

.sprawa-prowizja,
.sprawa-braki {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-1);
}

.sprawa-braki {
  color: var(--ostrzezenie);
}

@media (max-width: 480px) {
  .siatka-sprawy {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K1: układ "doradca" ([wyglad] uklad = "doradca"). Cały blok działa tylko przy data-uklad="doradca",
   układ pełny nie zmienia się. Górny pasek: marka, szukaj, Nowa szansa, menu "…". */
:root[data-uklad="doradca"] .gora-akcje,
:root[data-uklad="doradca"] .aktywnosc-dnia,
:root[data-uklad="doradca"] .narzedzia,
:root[data-uklad="doradca"] #czekaja,
:root[data-uklad="doradca"] #do-zrobienia,
:root[data-uklad="doradca"] .przelacznik-liczb {
  display: none;
}

.uklad-doradca .gora {
  flex-wrap: nowrap;
  gap: var(--s-3) var(--s-4);
  position: relative;
}

.uklad-doradca .tytul {
  flex: none;
}

.gora-doradcy {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.szukaj-gora {
  flex: 1 1 auto;
  max-width: 520px;
  margin-left: auto;
}

.szukaj-gora > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.szukaj-gora input {
  width: 100%;
}

.menu-wiecej-przycisk {
  min-width: var(--wys-kontrolki);
  font-size: var(--fs-4);
  line-height: 1;
  padding-inline: var(--s-3);
}

.menu-wiecej {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 15;
  width: min(360px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--s-2);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  box-shadow: var(--cien-wysoki);
}

.menu-wiecej-grupa {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--ramka);
}

.menu-wiecej-grupa:first-child {
  border-top: 0;
}

.menu-wiecej-grupa > .przycisk,
.menu-wiecej-grupa > details > summary {
  width: 100%;
  text-align: left;
}

.menu-wiecej-grupa .zalogowany {
  padding: 0 var(--s-1);
}

.menu-wiecej-grupa .czcionka {
  display: flex;
  gap: var(--s-2);
}

.menu-wiecej-grupa .czcionka .przycisk {
  flex: 1;
  text-align: center;
}

.menu-wiecej-grupa .menu-widokow {
  position: static;
}

/* Kafle: trzy główne, z linkiem do listy; reszta w rozwinięciu. */
.uklad-doradca .liczby {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kafelek-link {
  cursor: pointer;
}

.kafelek-link:hover {
  border-color: var(--akcent);
}

.kafelek-link:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
}

.wiecej-liczb {
  margin-top: var(--s-2);
}

.wiecej-liczb > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--wys-mala);
  padding: 2px var(--s-3);
  font-size: var(--fs-1);
  cursor: pointer;
}

.wiecej-liczb .liczby {
  margin-top: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Lista "Teraz". */
.teraz {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-left: 4px solid var(--ostrzezenie);
  border-radius: var(--r-2);
}

.teraz.pusto-zielone {
  border-left-color: var(--sukces);
}

.teraz-tytul {
  font-size: var(--fs-3);
}

.teraz-podpis {
  margin: 2px 0 var(--s-3);
  font-size: var(--fs-1);
}

.teraz-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.teraz-wiersz {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  min-width: 0;
  padding: var(--s-3) var(--s-3);
  background: var(--panel-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.teraz-glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.teraz-nazwa-blok {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.teraz-nazwa {
  padding: 0;
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-3);
  text-align: left;
  color: var(--tekst);
  background: none;
  border: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.teraz-nazwa:hover {
  color: var(--akcent);
  text-decoration: underline;
}

.teraz-opiekun,
.opiekun-znacznik {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--s-1);
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--przygaszony);
  background: var(--panel);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-pelny);
}

.teraz-czas {
  flex: none;
  padding: 1px var(--s-2);
  font-size: var(--fs-1);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: var(--r-pelny);
}

.teraz-opis {
  font-size: var(--fs-1);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.teraz-zadanie {
  font-size: var(--fs-1);
}

.teraz-zadanie.zalegle strong {
  color: var(--blad);
}

.teraz-akcje,
.teraz-edytor-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: 2px;
}

.teraz-akcje .przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.teraz-dzwon {
  flex: 1 1 auto;
}

.teraz-edytor {
  padding-top: var(--s-2);
  border-top: 1px dashed var(--ramka-pola);
}

.teraz-edytor-formularz {
  display: grid;
  gap: var(--s-2);
}

.teraz-edytor-formularz textarea {
  width: 100%;
  font: inherit;
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-2);
  padding: var(--s-2);
}

.teraz-wybor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

.teraz-nazwa-edycja {
  display: flex;
  gap: var(--s-2);
}

.teraz-nazwa-edycja input {
  flex: 1 1 auto;
  min-width: 0;
}

.teraz-wiecej {
  grid-column: 1 / -1;
}

.teraz-stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-3);
  font-size: var(--fs-1);
}

.teraz-stopka .teraz-braki {
  min-height: var(--wys-kontrolki);
}

.teraz-braki[hidden] + #teraz-braki-opis {
  display: none;
}

/* Szanse: nagłówek, Kanban albo Tabela i Filtry w zwiniętym wierszu. */
.szanse-pasek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-3) 0 var(--s-2);
}

.szanse-tytul {
  margin-right: auto;
  font-size: var(--fs-3);
}

.szanse-pasek .widoki {
  margin-left: 0;
}

.filtry-doradcy {
  flex: 1 1 100%;
  order: 3;
}

.szanse-pasek > .filtry-doradcy:not([open]) {
  flex: 0 0 auto;
  order: 2;
}

.filtry-doradcy > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
}

.licznik-filtrow {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--s-2);
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--akcent-tekst);
  background: var(--akcent-tlo);
  border-radius: var(--r-pelny);
}

.filtry-doradcy-tresc {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.filtry-wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3) var(--s-3);
}

/* Karta Kanbanu: kwota i prowizja. */
.karta-lead-kwoty {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s-3);
  font-size: var(--fs-1);
}

.karta-lead-prowizja {
  color: var(--sukces);
}

/* Karta szansy: pole imienia i dolny pasek akcji telefonu. */
.karta .teraz-nazwa-edycja {
  max-width: 420px;
  margin-top: var(--s-2);
}

.karta-dol {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  gap: var(--s-2);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--ramka);
  box-shadow: 0 -2px 8px rgba(10, 14, 20, 0.12);
}

.karta-dol .karta-dol-akcja {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
}

@media (max-width: 699px) {
  .uklad-doradca .gora {
    flex-wrap: wrap;
    padding-bottom: var(--s-2);
  }

  .gora-doradcy {
    flex: 1 1 100%;
  }

  .szukaj-gora {
    max-width: none;
    margin-left: 0;
  }

  .uklad-doradca .liczby {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
  }

  .uklad-doradca .liczby .kafelek {
    padding: var(--s-2) var(--s-2);
  }

  .uklad-doradca .liczby .kafelek-wartosc {
    font-size: var(--fs-4);
  }

  .uklad-doradca .liczby .kafelek-opis,
  .uklad-doradca .liczby .kafelek-trend,
  .uklad-doradca .liczby .jak-liczone {
    display: none;
  }

  .teraz-lista {
    grid-template-columns: minmax(0, 1fr);
  }

  .teraz {
    padding: var(--s-3);
  }

  /* Dwa ekrany: Teraz (domyślny) i Szanse; Szukaj i Więcej są w pasku u dołu. */
  .ekran-teraz #szanse-pasek,
  .ekran-teraz #kanban,
  .ekran-teraz #oferty-bez-odzewu,
  .ekran-teraz #tabela,
  .ekran-teraz .filtr-archiwum,
  .ekran-szanse .paski,
  .ekran-szanse #teraz {
    display: none;
  }

  .dolny-pasek.dolny-pasek-doradcy button:not(.dol-doradcy) {
    display: none;
  }

  .dolny-pasek .dol-doradcy {
    display: grid;
  }

  .menu-wiecej {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 70vh;
  }

  .karta-dol {
    margin-top: auto;
  }
}

@media print {
  .karta-dol,
  .menu-wiecej {
    display: none;
  }
}

/* K1: akcje w wierszu "Teraz" w jednej linii: numer (rośnie), Zadzwoniłem, Odłóż. */
.teraz-akcje {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-2);
}

.teraz-akcje .przycisk {
  padding-inline: var(--s-3);
  white-space: nowrap;
}

.teraz-wiersz {
  gap: var(--s-1);
}

.teraz-akcje {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.teraz-akcje .przycisk {
  font-size: var(--fs-2);
  padding-inline: var(--s-2);
}

.teraz-akcje .teraz-dzwon {
  font-size: var(--fs-2);
  letter-spacing: 0;
}

#nowa-szansa {
  white-space: nowrap;
}

@media (max-width: 699px) {
  .szukaj-gora {
    min-width: 0;
  }

  .szukaj-gora input {
    text-overflow: ellipsis;
  }

  .teraz-akcje {
    grid-template-columns: 1fr 1fr;
  }

  .teraz-akcje .teraz-dzwon {
    grid-column: 1 / -1;
  }

  .uklad-doradca .liczby .kafelek-wartosc {
    font-size: var(--fs-3);
    white-space: nowrap;
  }
}

/* K3: Zespół i przydział leadów (Ustawienia), przekazanie szansy w karcie */
.zespol-blok {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  padding-top: var(--s-1);
}

.zespol-blok h4,
.zespol-wg-zrodla h4 {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-2);
}

.zespol-doradcy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

.zespol-doradca {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--wys-mala);
}

.zespol-wg-zrodla,
.zespol-reguly {
  display: grid;
  gap: var(--s-2);
}

.zespol-regula {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.zespol-nowa-regula,
.zespol-nowa-nieobecnosc {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2) var(--s-3);
}

.zespol-nieobecnosci {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zespol-nieobecnosci li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.przekaz {
  display: grid;
  gap: var(--s-2);
  min-width: min(320px, 80vw);
}

.przekaz textarea {
  width: 100%;
}

.cudza-szansa {
  align-self: center;
}

.zespol-blok > .przycisk,
.zespol-regula > .przycisk,
.przekaz > .przycisk {
  justify-self: start;
}

.zespol-blok select {
  max-width: 360px;
}

/* K4: Automatyczna odpowiedź (Ustawienia) */
.auto-tresc {
  margin: 0;
  padding: var(--s-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.auto-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.auto-kolejka {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto-wiersz {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.auto-podglad {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.zespol-blok textarea,
.zespol-blok input[type="text"],
.zespol-blok input[type="number"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* K5: sekcja "Banki" karty (panel.js, sekcjaBankow) i linia postępu na karcie Kanbanu. */
.banki-pasek {
  margin: 0 0 var(--s-2);
  font-weight: 600;
}

.banki-wybrany {
  margin: 0 0 var(--s-2);
  color: var(--sukces);
  font-weight: 600;
}

.banki-sugestia {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  background: var(--ostrzezenie-tlo);
  color: var(--tekst);
  font-size: var(--fs-1);
}

.tabela-wnioskow-obudowa {
  overflow-x: auto;
}

.tabela-wnioskow {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-2);
}

.tabela-wnioskow th,
.tabela-wnioskow td {
  padding: var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--ramka);
  text-align: left;
  vertical-align: top;
}

.tabela-wnioskow th {
  color: var(--przygaszony);
  font-size: var(--fs-1);
  font-weight: 600;
}

.tabela-wnioskow select {
  max-width: 100%;
}

.wniosek.wybrany td {
  background: var(--wygrane-tlo);
}

.wniosek.wycofany .wniosek-bank strong {
  text-decoration: line-through;
  color: var(--przygaszony);
}

.wniosek-opis {
  display: block;
  font-size: var(--fs-1);
}

.wniosek-kwota {
  overflow-wrap: anywhere;
}

.wniosek-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-2);
}

.wniosek-akcje .przycisk {
  min-height: var(--wys-mala);
  padding: 2px var(--s-3);
  white-space: nowrap;
}

.tabela-wnioskow {
  table-layout: fixed;
}

.tabela-wnioskow th:nth-child(1) {
  width: 38%;
}

.tabela-wnioskow th:nth-child(2) {
  width: 21%;
}

.tabela-wnioskow th:nth-child(3) {
  width: 27%;
}

.tabela-wnioskow th:nth-child(4) {
  width: 14%;
}

.tabela-wnioskow select {
  width: 100%;
  font-size: var(--fs-1);
  padding-left: var(--s-2);
  padding-right: var(--s-1);
}

.wniosek-edytor td {
  padding: 0;
  border-bottom: 1px solid var(--ramka);
}

.wniosek-forma {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-2);
}

.wniosek-forma input,
.wniosek-forma textarea {
  width: 100%;
  min-width: 0;
}

.wniosek-forma .pole-szerokie,
.wniosek-forma .edytor-przyciski {
  grid-column: 1 / -1;
}

.formularz-wniosku {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.formularz-wniosku input {
  flex: 1 1 140px;
  min-width: 0;
}

.karta-lead-postep {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s-3);
  font-size: var(--fs-1);
}

@media (max-width: 699px) {
  .tabela-wnioskow thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tabela-wnioskow,
  .tabela-wnioskow tbody,
  .tabela-wnioskow tr,
  .tabela-wnioskow td {
    display: block;
  }

  .wniosek {
    margin-bottom: var(--s-2);
    border: 1px solid var(--ramka);
    border-radius: var(--r-2);
    padding: var(--s-2) var(--s-2);
  }

  .wniosek td,
  .wniosek.wybrany td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-2);
    padding: var(--s-1) 0;
    border: 0;
  }

  .wniosek td[data-etykieta]::before {
    content: attr(data-etykieta);
    flex: none;
    color: var(--przygaszony);
    font-size: var(--fs-1);
  }

  .wniosek td[data-etykieta=""]::before {
    content: none;
  }

  .wniosek td.wniosek-bank {
    display: block;
  }

  .wniosek td.wniosek-bank::before {
    content: none;
  }

  .wniosek-edytor {
    margin-bottom: var(--s-2);
    border: 1px solid var(--ramka);
    border-radius: var(--r-2);
  }

  .wniosek-forma {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K6: sekcja "Dokumenty" karty (panel.js, sekcjaDokumentow). */
.dokumenty-pasek {
  margin: 0 0 var(--s-2);
  font-weight: 600;
}

.lista-dokumentow {
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}

.dokument {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--ramka);
}

.dokument-nazwa {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: 0;
  overflow-wrap: anywhere;
}

.dokument-nazwa input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
}

.dokument-otrzymano .dokument-nazwa span {
  color: var(--sukces);
}

.dokument-odrzucono .dokument-nazwa span {
  color: var(--blad);
}

.dokument-kontrolki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-left: 28px;
}

.dokument-kontrolki select {
  flex: 1 1 130px;
  min-width: 0;
  max-width: 240px;
  min-height: var(--wys-kontrolki);
  font-size: var(--fs-1);
}

.dokument-kontrolki .przycisk {
  min-height: var(--wys-mala);
}

.dokumenty-akcje,
.zestaw-dokumentow,
.prosba-akcje,
.formularz-dokumentu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.formularz-dokumentu input {
  flex: 1 1 160px;
  min-width: 0;
}

.prosba-dokumentow {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-2);
  background: var(--ostrzezenie-tlo);
}

.prosba-naglowek,
.prosba-temat {
  margin: 0 0 var(--s-1);
}

.prosba-tresc {
  margin: var(--s-2) 0 0;
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: var(--fs-1);
}

@media (max-width: 699px) {
  .dokument-kontrolki select {
    max-width: 100%;
  }
}

/* K7: sekcja "Zgody" karty (panel.js, sekcjaZgod) i ostrzezenie o braku zgody na przetwarzanie. */
.zgody-ostrzezenie {
  margin: 0 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ostrzezenie);
  border-radius: var(--r-2);
  background: var(--ostrzezenie-tlo);
  color: var(--tekst);
  font-weight: 600;
}

.lista-zgod {
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}

.zgoda {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--ramka);
  overflow-wrap: anywhere;
}

.zgoda-jest .zgoda-stan {
  color: var(--sukces);
}

.zgoda-wycofana .zgoda-stan {
  color: var(--blad);
}

.zgoda-brak .zgoda-stan {
  color: var(--przygaszony);
}

.zgoda-dowod {
  font-size: var(--fs-1);
}

.zgoda-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

.zgoda-akcje .przycisk {
  min-height: var(--wys-mala);
}

.formularz-zgody {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.formularz-zgody select,
.formularz-zgody input {
  flex: 1 1 140px;
  min-width: 0;
  min-height: var(--wys-kontrolki);
  font-size: var(--fs-1);
}

/* K8: zakladki Doradcy, Zrodla i Kampanie w "Wiecej liczb" (panel.js, zbudujGrupyLiczb). */
.grupy-liczb {
  margin-top: var(--s-3);
}

.grupy-sekcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.grupy-sekcje .grupy-sekcja {
  min-height: 0;
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-1);
}

.grupy-sekcja[aria-pressed="true"] {
  border-color: var(--akcent);
  background: var(--akcent-miekki);
  color: var(--akcent);
  font-weight: 700;
}

.grupy-zakladki-obwod {
  position: relative;
  margin-bottom: var(--s-2);
}

.grupy-zakladki {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--s-1);
  background:
    linear-gradient(to right, var(--tlo) 30%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--tlo) 30%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, 0.28), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, 0.28), transparent) right center / 10px 100% no-repeat scroll;
}

.grupy-zakladki .grupy-zakladka {
  flex: 0 0 auto;
}

.grupy-zakladka[hidden] {
  display: none;
}

.grupy-zakladka[aria-selected="true"] {
  border-color: var(--akcent);
  background: var(--akcent-tlo);
  color: var(--akcent-tekst);
  font-weight: 700;
}

.grupy-opis {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-1);
}

.grupy-przewijana {
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: var(--s-2);
}

.tabela-grup {
  width: auto;
  max-width: 60rem;
  border-collapse: collapse;
  font-size: var(--fs-2);
}

.tabela-grup th,
.tabela-grup td {
  padding: var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--ramka);
  text-align: left;
  vertical-align: top;
}

.tabela-grup thead th {
  font-size: var(--fs-1);
  color: var(--przygaszony);
}

.tabela-grup th.liczba,
.tabela-grup td.liczba {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabela-grup tbody th {
  font-weight: 600;
  min-width: 84px;
}

@media (max-width: 699px) {
  /* Telefon: wiersz to blok z nazwa i szescioma liczbami pod etykietami, bez przewijania w bok. */
  .tabela-grup thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabela-grup,
  .tabela-grup tbody,
  .tabela-grup tfoot {
    display: block;
  }

  .tabela-grup tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--ramka);
  }

  .tabela-grup th,
  .tabela-grup td {
    padding: 0;
    border: 0;
  }

  .tabela-grup tbody th,
  .tabela-grup tfoot th {
    grid-column: 1 / -1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .tabela-grup td.liczba {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .tabela-grup td.liczba::before {
    content: attr(data-label);
    font-size: var(--fs-1);
    font-weight: 400;
    color: var(--przygaszony);
  }

  .tabela-grup tfoot tr {
    border-top: 2px solid var(--ramka-pola);
    border-bottom: 0;
  }
}

.tabela-grup tfoot th,
.tabela-grup tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--ramka-pola);
}

@media (max-width: 699px) {
  .tabela-grup tfoot th,
  .tabela-grup tfoot td {
    border-top: 0;
  }
}

/* K10 Telefon doradcy: etykieta Oddzwoń, formularz rozmowy i SMS z kolejką akceptacji w karcie. */
.znacznik.oddzwon {
  color: var(--blad);
  border-color: var(--blad);
  background: var(--blad-tlo);
  font-weight: 700;
}

.teraz-oddzwon {
  flex: none;
}

.formularz-rozmowy {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.formularz-rozmowy textarea,
.formularz-rozmowy select,
.formularz-rozmowy input[type="number"] {
  width: 100%;
}

.sms-kolejka {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-2);
}

.sms-tresc {
  white-space: pre-wrap;
}

.fala4-kontakt .przycisk {
  text-decoration: none;
}
:root {
  --tag-niebieski-tlo: #dae8fb;
  --tag-niebieski-tekst: #0f2d57;
  --tag-zielony-tlo: #dafbe5;
  --tag-zielony-tekst: #0f5727;
  --tag-czerwony-tlo: #fbdcda;
  --tag-czerwony-tekst: #57130f;
  --tag-pomaranczowy-tlo: #fbeada;
  --tag-pomaranczowy-tekst: #57310f;
  --tag-fioletowy-tlo: #eadafb;
  --tag-fioletowy-tekst: #310f57;
  --tag-turkusowy-tlo: #dafbfb;
  --tag-turkusowy-tekst: #0f5757;
  --tag-rozowy-tlo: #fbdaeb;
  --tag-rozowy-tekst: #570f33;
  --tag-zolty-tlo: #fbf4da;
  --tag-zolty-tekst: #453a0c;
  --tag-szary-tlo: #e8eaed;
  --tag-szary-tekst: #2d3239;
  --tag-brazowy-tlo: #fbe6da;
  --tag-brazowy-tekst: #57290f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tag-niebieski-tlo: #1f3451;
    --tag-niebieski-tekst: #bfd7f8;
    --tag-zielony-tlo: #1f5130;
    --tag-zielony-tekst: #bff8d2;
    --tag-czerwony-tlo: #51211f;
    --tag-czerwony-tekst: #f8c2bf;
    --tag-pomaranczowy-tlo: #51361f;
    --tag-pomaranczowy-tekst: #f8d9bf;
    --tag-fioletowy-tlo: #361f51;
    --tag-fioletowy-tekst: #d9bff8;
    --tag-turkusowy-tlo: #1f5151;
    --tag-turkusowy-tekst: #bff8f8;
    --tag-rozowy-tlo: #511f38;
    --tag-rozowy-tekst: #f8bfdb;
    --tag-zolty-tlo: #51471f;
    --tag-zolty-tekst: #f8ecbf;
    --tag-szary-tlo: #32373e;
    --tag-szary-tekst: #d8dbdf;
    --tag-brazowy-tlo: #51311f;
    --tag-brazowy-tekst: #f8d4bf;
  }
}

:root[data-theme="dark"] {
  --tag-niebieski-tlo: #1f3451;
  --tag-niebieski-tekst: #bfd7f8;
  --tag-zielony-tlo: #1f5130;
  --tag-zielony-tekst: #bff8d2;
  --tag-czerwony-tlo: #51211f;
  --tag-czerwony-tekst: #f8c2bf;
  --tag-pomaranczowy-tlo: #51361f;
  --tag-pomaranczowy-tekst: #f8d9bf;
  --tag-fioletowy-tlo: #361f51;
  --tag-fioletowy-tekst: #d9bff8;
  --tag-turkusowy-tlo: #1f5151;
  --tag-turkusowy-tekst: #bff8f8;
  --tag-rozowy-tlo: #511f38;
  --tag-rozowy-tekst: #f8bfdb;
  --tag-zolty-tlo: #51471f;
  --tag-zolty-tekst: #f8ecbf;
  --tag-szary-tlo: #32373e;
  --tag-szary-tekst: #d8dbdf;
  --tag-brazowy-tlo: #51311f;
  --tag-brazowy-tekst: #f8d4bf;
}

.znacznik.tag.tag-kolor-niebieski,
.tag-kolor-niebieski {
  background: var(--tag-niebieski-tlo);
  color: var(--tag-niebieski-tekst);
  border-color: var(--tag-niebieski-tekst);
}

.znacznik.tag.tag-kolor-zielony,
.tag-kolor-zielony {
  background: var(--tag-zielony-tlo);
  color: var(--tag-zielony-tekst);
  border-color: var(--tag-zielony-tekst);
}

.znacznik.tag.tag-kolor-czerwony,
.tag-kolor-czerwony {
  background: var(--tag-czerwony-tlo);
  color: var(--tag-czerwony-tekst);
  border-color: var(--tag-czerwony-tekst);
}

.znacznik.tag.tag-kolor-pomaranczowy,
.tag-kolor-pomaranczowy {
  background: var(--tag-pomaranczowy-tlo);
  color: var(--tag-pomaranczowy-tekst);
  border-color: var(--tag-pomaranczowy-tekst);
}

.znacznik.tag.tag-kolor-fioletowy,
.tag-kolor-fioletowy {
  background: var(--tag-fioletowy-tlo);
  color: var(--tag-fioletowy-tekst);
  border-color: var(--tag-fioletowy-tekst);
}

.znacznik.tag.tag-kolor-turkusowy,
.tag-kolor-turkusowy {
  background: var(--tag-turkusowy-tlo);
  color: var(--tag-turkusowy-tekst);
  border-color: var(--tag-turkusowy-tekst);
}

.znacznik.tag.tag-kolor-rozowy,
.tag-kolor-rozowy {
  background: var(--tag-rozowy-tlo);
  color: var(--tag-rozowy-tekst);
  border-color: var(--tag-rozowy-tekst);
}

.znacznik.tag.tag-kolor-zolty,
.tag-kolor-zolty {
  background: var(--tag-zolty-tlo);
  color: var(--tag-zolty-tekst);
  border-color: var(--tag-zolty-tekst);
}

.znacznik.tag.tag-kolor-szary,
.tag-kolor-szary {
  background: var(--tag-szary-tlo);
  color: var(--tag-szary-tekst);
  border-color: var(--tag-szary-tekst);
}

.znacznik.tag.tag-kolor-brazowy,
.tag-kolor-brazowy {
  background: var(--tag-brazowy-tlo);
  color: var(--tag-brazowy-tekst);
  border-color: var(--tag-brazowy-tekst);
}

/* R1: raporty w "Wiecej liczb" (panel.js, raportLejek i pozostale): paski SVG, kolory z klas. */
.raport {
  display: grid;
  gap: var(--s-2);
}

.raport-tytul {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-2);
}

.raport-podtytul {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-2);
}

.raport-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-3);
}

.raport-sekcja {
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3);
  min-width: 0;
}

.pasek-lista {
  display: grid;
  gap: var(--s-2);
}

.pasek-wiersz {
  display: grid;
  grid-template-columns: minmax(90px, 160px) minmax(80px, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-1);
}

.pasek-svg {
  width: 100%;
  height: 14px;
  display: block;
  border-radius: var(--r-1);
}

.pasek-tlo {
  fill: var(--ramka);
  opacity: 0.45;
}

.pasek-glowny {
  fill: var(--akcent);
}

.pasek-jasny {
  fill: var(--akcent);
  opacity: 0.35;
}

.pasek-dobry {
  fill: var(--sukces);
}

.pasek-zly {
  fill: var(--blad);
}

.pasek-znacznik {
  fill: var(--tekst);
}

.seg-0 { fill: var(--seg-0); background: var(--seg-0); }
.seg-1 { fill: var(--seg-1); background: var(--seg-1); }
.seg-2 { fill: var(--seg-2); background: var(--seg-2); }
.seg-3 { fill: var(--seg-3); background: var(--seg-3); }
.seg-4 { fill: var(--seg-4); background: var(--seg-4); }
.seg-5 { fill: var(--seg-5); background: var(--seg-5); }
.seg-inne { fill: var(--seg-6); background: var(--seg-6); }

.pasek-etykieta {
  overflow-wrap: anywhere;
}

.pasek-wartosc {
  min-width: 0;
  overflow-wrap: anywhere;
}

.raport-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-1);
}

.legenda-kolor {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--s-1);
  border-radius: var(--r-1);
}

.legenda-glowny {
  background: var(--akcent);
}

.legenda-jasny {
  background: var(--akcent);
  opacity: 0.35;
}

.legenda-zly {
  background: var(--blad);
}

.legenda-znacznik {
  width: 3px;
  background: var(--tekst);
}

.raport-lista {
  margin: 0;
  padding-left: var(--s-4);
  font-size: var(--fs-1);
}

.link-szansy {
  border: 0;
  background: none;
  padding: 0;
  color: var(--akcent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.delta-lepiej {
  color: var(--sukces);
}

.delta-gorzej {
  color: var(--blad);
}

@media (max-width: 699px) {
  .pasek-wiersz {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .raport-siatka {
    grid-template-columns: 1fr;
  }
}

/* R2: okno "Zapytaj CRM" (panel.js, zbudujAsystenta); tlo i ramka jak paleta polecen. */
.asystent-okno {
  max-width: 720px;
  max-height: 80vh;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.asystent-gora,
.asystent-wiersz {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.asystent-tytul {
  flex: 1;
  margin: 0;
  font-size: var(--fs-3);
}

.asystent-opis {
  margin: 0;
  font-size: var(--fs-1);
}

.asystent-przyklady {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.asystent-rozmowa {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  min-height: 80px;
  overflow-y: auto;
}

.asystent-pytanie {
  margin: 0 0 var(--s-1);
  font-weight: 700;
}

.asystent-akapit {
  margin: 0 0 var(--s-2);
  overflow-wrap: anywhere;
}

.asystent-wiersz input {
  flex: 1;
  min-width: 0;
}

@media (max-width: 699px) {
  .asystent-dopisek {
    display: none;
  }

  #zapytaj-crm {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Raporty w ukladzie pelnym: zwiniete pod kaflami, te same zakladki co "Wiecej liczb" doradcy. */
.raporty-pelny {
  align-self: flex-start;
  width: 100%;
}
.wiecej-liczb.raporty-pelny > summary.przycisk {
  position: static;
  width: 100%;
  justify-content: flex-start;
}

/* Oferta PDF w karcie szansy (panel.js, blokOfertyPdf). */
.blok-oferty-pdf {
  margin-top: var(--s-3);
  display: grid;
  gap: var(--s-2);
}

.oferta-pdf-wersje {
  display: grid;
  gap: var(--s-2);
}

.oferta-pdf-wersja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.oferta-pdf-wersja.wygasla {
  opacity: 0.75;
}

.oferta-pdf-opis {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s-3);
  align-items: baseline;
  min-width: 0;
}

.oferta-pdf-marza {
  color: var(--przygaszony);
  font-size: var(--fs-1);
}

.oferta-pdf-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.formularz-oferty-pdf {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: minmax(0, 1fr);
}

.formularz-oferty-pdf input,
.formularz-oferty-pdf select,
.formularz-oferty-pdf textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font: inherit;
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--ramka-pola);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-2);
}

.oferta-pdf-pozycje {
  display: grid;
  gap: var(--s-2);
}

.oferta-pdf-pozycja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.oferta-pdf-pozycja > select,
.oferta-pdf-pozycja > input:nth-of-type(1),
.oferta-pdf-pozycja > input:last-of-type {
  grid-column: 1 / -1;
}

.oferta-pdf-wartosc {
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.oferta-pdf-parametry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.oferta-pdf-suma {
  font-weight: 700;
  margin: 0;
}

/* Pakiet kredytowy 2: ważność decyzji, powód odmowy, rozliczenie prowizji, prompter rozmowy, raporty. */
.banki-ostrzezenie {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  background: var(--ostrzezenie-tlo);
  color: var(--ostrzezenie);
  font-weight: 600;
  font-size: var(--fs-1);
}

.banki-ostrzezenie.wygasla {
  background: var(--blad-tlo);
  color: var(--blad);
}

.wniosek-waznosc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  margin-top: var(--s-1);
  font-size: var(--fs-1);
  color: var(--przygaszony);
}

.wniosek-waznosc.wygasa,
.wniosek-waznosc.wygasla {
  color: var(--ostrzezenie);
  font-weight: 600;
}

.wniosek-waznosc.wygasla {
  color: var(--blad);
}

.wniosek-wazna-do {
  min-width: 0;
}

.znacznik.wygasa {
  color: var(--ostrzezenie);
  border-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
}

.wniosek-waznosc.wygasla .znacznik.wygasa {
  color: var(--blad);
  border-color: var(--blad);
  background: var(--blad-tlo);
}

.wniosek-powod {
  margin-top: var(--s-1);
  max-width: 100%;
}

.teraz-ostrzezenie {
  margin: var(--s-1) 0;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-2);
  background: var(--ostrzezenie-tlo);
  color: var(--ostrzezenie);
  font-size: var(--fs-1);
  font-weight: 600;
}

.teraz-ostrzezenie.wygasla {
  background: var(--blad-tlo);
  color: var(--blad);
}

.rozliczenie {
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.rozliczenie.po-terminie {
  border-color: var(--ostrzezenie);
}

.rozliczenie-tytul {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-2);
}

.rozliczenie-pasek {
  margin: 0 0 var(--s-2);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rozliczenie-stan.stan-rozliczona,
.rozliczenie-stan.stan-nadplata {
  color: var(--sukces);
  border-color: var(--sukces);
}

.rozliczenie-stan.stan-do_rozliczenia,
.rozliczenie-stan.stan-czesciowo,
.rozliczenie-stan.stan-bez_stawki {
  color: var(--ostrzezenie);
  border-color: var(--ostrzezenie);
}

.rozliczenie-forma {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2);
  margin: var(--s-2) 0;
}

.rozliczenie-forma input {
  flex: 1 1 130px;
  min-width: 0;
}

.rozliczenie-forma .pole {
  flex: 1 1 200px;
  min-width: 0;
}

.rozliczenie-wplywy {
  margin: var(--s-2) 0;
  padding: 0;
  list-style: none;
}

.rozliczenie-wplyw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-2);
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--ramka);
}

.rozliczenie-wplyw-opis {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prompter-wynik h4,
.prompter-tytul {
  margin: var(--s-3) 0 var(--s-2);
  font-size: var(--fs-2);
}

.prompter-pytania,
.prompter-ryzyka {
  margin: 0;
  padding-left: var(--s-5);
}

.prompter-ryzyka {
  list-style: none;
  padding-left: 0;
}

.prompter-pytania li,
.prompter-ryzyka li {
  margin-bottom: var(--s-2);
  overflow-wrap: anywhere;
}

.prompter-zrodla {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-left: var(--s-2);
}

.prompter-zrodlo {
  font-size: var(--fs-1);
  cursor: help;
}

.prompter-cytat {
  margin: var(--s-1) 0 0;
  padding: 2px var(--s-3);
  border-left: 3px solid var(--ramka-pola);
  color: var(--przygaszony);
  font-size: var(--fs-1);
}

.prompter-waga.waga-wysokie {
  color: var(--blad);
  border-color: var(--blad);
  background: var(--blad-tlo);
}

.prompter-waga.waga-srednie {
  color: var(--ostrzezenie);
  border-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
}

.prompter-produkt {
  overflow-wrap: anywhere;
}

.prompter-lista-zrodel {
  margin-top: var(--s-3);
  font-size: var(--fs-1);
}

.prompter-lista-zrodel ul {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
  overflow-wrap: anywhere;
}

.zespol-wg-celu {
  margin-top: var(--s-3);
}

.raport-miesieczny {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.raport-miesieczny[hidden] {
  display: none;
}

.raport-odmowy-ostatnie,
.raport-do-rozliczenia {
  margin: var(--s-2) 0;
  padding: 0;
  list-style: none;
}

.raport-odmowy-ostatnie li,
.raport-do-rozliczenia li {
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--ramka);
  overflow-wrap: anywhere;
}

.raport-do-rozliczenia li.po-terminie {
  color: var(--ostrzezenie);
}

/* Portal klienta w karcie szansy */
.lista-portalu {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.portal-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.portal-klient {
  border-left: 3px solid var(--akcent);
  padding-left: 0.5rem;
}


/* Pakiet Poczta (sekcja 13): mail z CRM na karcie, kontrola domeny i raport w Ustawieniach. */
.blok-poczty-crm {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
}
.poczta-znaczniki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.poczta-znacznik {
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-pelny);
  border: 1px solid var(--akcent, currentColor);
  font-size: 0.8rem;
}
.poczta-crm-lista,
.poczta-crm-formularz {
  display: grid;
  gap: 0.5rem;
}
.poczta-crm-mail {
  display: grid;
  gap: 0.2rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
}
.poczta-stan-blad {
  border-color: #b3261e;
}
.poczta-watek-wiadomosc {
  display: grid;
  gap: 0.2rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--ramka);
}
.poczta-watek-wiadomosc.od_nas {
  padding-left: 1rem;
}
.poczta-dns-lista {
  margin: 0.4rem 0;
  padding-left: 1.1rem;
}
.poczta-dns-ocena {
  font-weight: 600;
}
.poczta-dns-ocena.zle,
.poczta-dns-blad,
.poczta-dns-brak {
  color: #b3261e;
}
.poczta-dns-ocena.uwaga,
.poczta-dns-uwaga {
  color: #8a5a00;
}

/* Linki w roli przyciskow (Pomoc w pasku i w oknie skrotow). */
a.przycisk {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: inherit;
  text-decoration: none;
}

/* Realizacja po wygranej: sekcja Projekt w karcie, widok Projekty i strona akceptacji etapu klienta. */

.projekt-naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}

.projekt-nazwa {
  overflow-wrap: anywhere;
}

.projekt-postep {
  flex: 1 1 140px;
  min-width: 100px;
  max-width: 320px;
  height: 12px;
  accent-color: var(--akcent-tlo);
}

.projekt-postep-tekst {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.projekt-status-gwarancja {
  color: var(--sukces);
  border-color: var(--sukces);
}

.projekt-status-odbior,
.projekt-status-w_realizacji {
  color: var(--akcent);
  border-color: var(--akcent);
}

.projekt-zakladki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--ramka);
}

.projekt-zakladka {
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--promien) var(--promien) 0 0;
  background: transparent;
  color: var(--przygaszony);
  font: inherit;
  cursor: pointer;
}

.projekt-zakladka[aria-selected="true"] {
  border-color: var(--ramka);
  background: var(--panel);
  color: var(--tekst);
  font-weight: 600;
}

.projekt-zakladka:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
}

.projekt-zakladka-tresc {
  display: grid;
  gap: var(--s-4);
}

.projekt-blok {
  padding: var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel);
}

.projekt-blok-tytul {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-2);
}

.projekt-kafelki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-2);
}

.projekt-kafelek {
  display: grid;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel-2);
}

.projekt-kafelek-etykieta {
  color: var(--przygaszony);
  font-size: var(--fs-1);
}

.projekt-kafelek-wartosc {
  overflow-wrap: anywhere;
}

.projekt-kafelek-uwaga {
  border-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
}

.projekt-ostrzezenie {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ostrzezenie);
  border-radius: var(--r-2);
  background: var(--ostrzezenie-tlo);
}

.projekt-pasek {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.projekt-forma {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
}

.projekt-forma .pole {
  flex: 1 1 160px;
  min-width: 0;
}

.projekt-forma .pole input,
.projekt-forma .pole select,
.projekt-forma .pole textarea {
  width: 100%;
}

.projekt-pole-szerokie {
  flex-basis: 100%;
}

.projekt-tabela-obudowa {
  overflow-x: auto;
}

.projekt-tabela {
  width: 100%;
  border-collapse: collapse;
}

.projekt-tabela th,
.projekt-tabela td {
  padding: var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--ramka);
  text-align: left;
  vertical-align: top;
}

.projekt-tabela th {
  color: var(--przygaszony);
  font-size: var(--fs-1);
  font-weight: 600;
  white-space: nowrap;
}

.projekt-tabela input[type="number"] {
  width: 5.5em;
}

.projekt-postep-komorka {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 150px;
}

.projekt-postep-komorka .projekt-postep {
  flex: 1 1 80px;
  min-width: 60px;
}

.projekt-akceptacja,
.projekt-akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.projekt-link {
  flex: 1 1 220px;
  min-width: 0;
}

.projekt-zgoda {
  color: var(--sukces);
  font-weight: 600;
}

.projekt-uwagi,
.projekt-zalegly {
  color: var(--ostrzezenie);
}

.projekt-lista {
  margin: 0;
  padding-left: var(--s-4);
}

.projekt-lista li {
  margin: var(--s-1) 0;
  overflow-wrap: anywhere;
}

.projekt-przypomnienie.zalegle {
  color: var(--ostrzezenie);
}

.projekt-data {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.projekt-rata-zaplacona,
.projekt-sla-dotrzymane,
.projekt-sla-w_terminie {
  color: var(--sukces);
  border-color: var(--sukces);
}

.projekt-rata-proforma,
.projekt-sla-zagrozone {
  color: var(--ostrzezenie);
  border-color: var(--ostrzezenie);
}

.projekt-sla-przekroczone,
.projekt-sla-naruszone {
  color: var(--blad);
  border-color: var(--blad);
}

.projekt-zakladka-tresc textarea[readonly] {
  width: 100%;
}

.projekty-filtry {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0;
}

.projekty-podpis {
  margin: 0 0 var(--s-2);
}

.projekty .projekt-kafelki,
.projekty .projekt-blok,
.projekty .projekt-tabela-obudowa,
.projekty .projekty-szablony {
  margin-top: var(--s-3);
}

.projekt-szablon {
  margin: var(--s-2) 0;
  list-style: none;
}

.projekt-szablon textarea {
  display: block;
  width: 100%;
  margin: var(--s-2) 0;
}

.projekt-zalozenie p {
  margin: 0 0 var(--s-2);
}

body.akceptacja {
  display: flex;
  justify-content: center;
  padding: var(--s-4);
}

.akceptacja-karta {
  width: 100%;
  max-width: 560px;
  padding: var(--s-4);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel);
}

.akceptacja-karta h1 {
  margin: var(--s-1) 0 var(--s-3);
  font-size: var(--fs-4);
  overflow-wrap: anywhere;
}

.akceptacja-nadtytul {
  margin: 0;
  color: var(--akcent);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.akceptacja-forma {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.akceptacja-forma label {
  display: grid;
  gap: var(--s-1);
}

.akceptacja-forma input,
.akceptacja-forma textarea {
  width: 100%;
  box-sizing: border-box;
}

.akceptacja-info {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  background: var(--panel-2);
}

.akceptacja-ok,
.akceptacja-blad {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--sukces);
  border-radius: var(--r-2);
  background: var(--wygrane-tlo);
  font-weight: 600;
}

.akceptacja-blad {
  border-color: var(--blad);
  background: var(--blad-tlo);
}

.projekt-tabela-stos thead {
  display: none;
}

.projekt-tabela-stos tr {
  display: block;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--ramka);
}

.projekt-tabela-stos td {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 2px var(--s-1);
  border: 0;
}

.projekt-tabela-stos td::before {
  flex: 0 0 7.5em;
  content: attr(data-etykieta);
  color: var(--przygaszony);
  font-size: var(--fs-1);
}

.projekt-tabela-stos td[data-etykieta=""]::before {
  display: none;
}

.projekt-tabela-stos td > * {
  min-width: 0;
}

/* Telefon: menu "…" nie moze chowac sie pod dolnym paskiem (po rundzie 1 urosło i "Ustawienia" byly pod paskiem). */
@media (max-width: 700px) {
  .menu-wiecej {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100dvh - 140px - env(safe-area-inset-bottom));
    z-index: 30;
  }
}

/* Praca zespołu: zadania z priorytetem i checklistą, komentarze z wątkami, obecność, okno "Zespół" */
.zadanie-dodatki {
  flex: 1 1 100%;
  min-width: 0;
}

.zadanie-chipy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin: 2px 0 var(--s-1);
}

.znacznik.chip-priorytet-1 {
  border-color: var(--blad);
  color: var(--blad);
}

.znacznik.chip-priorytet-3 {
  color: var(--przygaszony);
}

.znacznik.chip-wykonawca {
  border-color: var(--akcent);
  color: var(--akcent);
}

.znacznik.chip-powtarzanie,
.znacznik.chip-checklista,
.znacznik.chip-czas {
  background: var(--panel-2);
}

.zadanie-szczegoly,
.zadanie-wiecej,
.prywatne-notatki {
  margin: var(--s-1) 0;
}

.zadanie-szczegoly > summary,
.zadanie-wiecej > summary,
.prywatne-notatki > summary {
  cursor: pointer;
  color: var(--akcent);
}

.zadanie-szczegoly h5 {
  margin: var(--s-3) 0 var(--s-1);
}

.zadanie-opcje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0;
}

.zadanie-checklista {
  margin: var(--s-1) 0;
  padding: 0;
  list-style: none;
}

.zadanie-checklista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-2);
  padding: 2px 0;
}

.zadanie-checklista li.zrobione span {
  color: var(--przygaszony);
  text-decoration: line-through;
}

.zadanie-nowa-pozycja,
.zadanie-deleguj,
.zadanie-z-tekstu,
.zadanie-z-szablonu,
.praca-sterowanie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-2);
  margin: var(--s-2) 0;
}

.zadanie-z-tekstu input[type="text"] {
  flex: 1 1 240px;
}

.zadania-dodatkowe {
  margin: var(--s-2) 0 var(--s-3);
}

.karta-obecnosc {
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-left-width: 4px;
  border-radius: var(--r-2);
  background: var(--panel-2);
}

.karta-obecnosc.ostrzezenie {
  border-left-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
}

.wspolpraca-gora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.blok-czasu {
  margin: var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.blok-czasu h4 {
  margin: 0 0 var(--s-1);
}

.blok-czasu input[type="number"] {
  width: 90px;
}

.lista-czasu {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
}

.lista-komentarzy,
.komentarz-odpowiedzi {
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.komentarz {
  padding: var(--s-2) var(--s-2);
  margin: var(--s-2) 0;
  border: 1px solid var(--ramka);
  border-left-width: 4px;
  border-radius: var(--r-1);
}

.komentarz-odpowiedzi {
  margin-left: var(--s-4);
}

.komentarz-odpowiedz {
  border-left-color: var(--ramka-pola);
}

.komentarz-gora {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  font-size: var(--fs-1);
}

.komentarz-tresc {
  margin: var(--s-1) 0;
}

.komentarz-akcje,
.komentarz-wzmianki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin: var(--s-1) 0;
}

.wzmianka {
  color: var(--akcent);
  font-weight: 600;
}

.formularz-komentarza textarea,
.formularz-odpowiedzi-watku textarea,
.prywatne-notatki textarea {
  width: 100%;
  box-sizing: border-box;
}

.notatka-prywatna {
  border-left-color: var(--ostrzezenie);
}

.wiadomosc-zadanie {
  margin-top: var(--s-1);
}

@media (max-width: 699px) {
  #tabela td button,
  #tabela th .sortuj {
    min-width: 44px;
  }
}

/* Okno "Zespół" */
.licznik-zespolu {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 var(--s-2);
  border-radius: var(--r-pelny);
  background: var(--blad);
  color: var(--tlo);
  font-size: var(--fs-1);
  text-align: center;
}

.licznik-zespolu[hidden] {
  display: none;
}

.praca-zakladki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0;
}

.praca-zakladki button[aria-selected="true"] {
  background: var(--akcent-tlo);
  color: var(--akcent-tekst);
}

.praca-tresc {
  min-width: 0;
  overflow-x: auto;
}

.praca-dzien,
.praca-zalegle,
.onboarding-osoba,
.offboarding {
  margin: var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.praca-dzien.dzis {
  border-color: var(--akcent);
}

.praca-zalegle {
  border-color: var(--blad);
}

.praca-dzien h4,
.praca-zalegle h4 {
  margin: 0 0 var(--s-2);
}

.lista-zadan-widoku,
.lista-skrzynki,
.lista-szablonow-zadan {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zadanie-widoku {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--ramka);
}

.zadanie-widoku .pole-wyboru {
  flex: 1 1 260px;
}

.zadanie-widoku.zrobione .pole-wyboru span:not(.godzina) {
  color: var(--przygaszony);
  text-decoration: line-through;
}

.zadanie-widoku .godzina {
  display: inline-block;
  min-width: 5.5em;
  color: var(--przygaszony);
}

.skrzynka-wpis,
.szablon-zadan {
  padding: var(--s-2) var(--s-2);
  margin: var(--s-2) 0;
  border: 1px solid var(--ramka);
  border-left-width: 4px;
  border-radius: var(--r-1);
}

.skrzynka-wpis.nowe {
  border-left-color: var(--akcent);
  background: var(--panel-2);
}

.skrzynka-wpis p {
  margin: var(--s-1) 0;
}

.tabela-pracy {
  width: 100%;
  border-collapse: collapse;
}

.tabela-pracy th,
.tabela-pracy td {
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--ramka);
  text-align: left;
  vertical-align: middle;
}

.tabela-pracy.grafik td.wolne {
  color: var(--przygaszony);
  background: var(--panel-2);
}

.obciazenie-przeciazony th,
.obciazenie-przeciazony td:last-child {
  color: var(--blad);
}

.obciazenie-duzo td:last-child {
  color: var(--ostrzezenie);
}

.formularz-szablonu {
  display: grid;
  gap: var(--s-2);
  max-width: 560px;
  margin-top: var(--s-3);
}

@media (max-width: 600px) {
  .zadanie-opcje {
    grid-template-columns: 1fr 1fr;
  }

  .tabela-pracy th,
  .tabela-pracy td {
    padding: var(--s-1);
  }
}

/* Warstwa AI: czerwony przycisk wylaczenia i lista podobnych wygranych w karcie. */
.przycisk.ai-wylacznik {
  background: var(--blad);
  border-color: var(--blad);
  color: var(--panel);
  font-weight: 600;
}
.podobne-lista {
  list-style: none;
  margin: 0 0 var(--s-2);
  padding: 0;
}
.podobne-pozycja {
  margin: 0 0 var(--s-2);
}

/* Pakiet "Dane i analityka": kafle i tabele raportow, wydatki, szansa wygranej w karcie. */
.analityka-kafle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-3);
}

.analityka-kafel {
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel);
  padding: var(--s-2) var(--s-3);
}

.analityka-kafel-etykieta,
.analityka-kafel-opis {
  font-size: var(--fs-1);
  color: var(--przygaszony);
}

.analityka-kafel-wartosc {
  font-size: var(--fs-4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tabela-analityki td.tekst {
  text-align: left;
  max-width: 420px;
}

.wydatki-pola {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: flex-end;
}

.wydatki-lista {
  margin: var(--s-2) 0;
  padding-left: var(--s-4);
}

.predykcja-wartosc {
  font-size: var(--fs-3);
  margin: 0 0 var(--s-1);
}

.predykcja-wartosc strong {
  font-size: calc(26px * var(--skala));
}

.predykcja-cechy {
  margin: var(--s-1) 0 var(--s-2);
  padding-left: var(--s-4);
}

.benchmark textarea {
  width: 100%;
}

@media (max-width: 699px) {
  .tabela-analityki td.tekst {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    max-width: none;
  }

  .tabela-analityki td.tekst::before {
    content: attr(data-label);
    font-size: var(--fs-1);
    color: var(--przygaszony);
  }
}

/* Marketing: kod do osadzenia landingu i sekcja w karcie */
.kod-osadzenia {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}
.marketing-cialo h4 {
  margin: 0.8rem 0 0.3rem;
}
/* Agencja i agenci: widok firmy i sekcja karty (znaczniki stanu zasobów, scoringu i kampanii, tekst do skopiowania). */
.agencja-tekst {
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  background: var(--panel-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  max-height: 360px;
  overflow: auto;
}

.agencja-wynik {
  margin-top: var(--s-2);
}

.agencja-karta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}

.agencja-karta > * {
  min-width: 0;
}

.projekt-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.zasob-ok,
.scoring-zimny,
.kampania-nowa,
.kampania-wywiad {
  color: var(--przygaszony);
  border-color: var(--ramka);
}

.zasob-wkrotce,
.scoring-cieply,
.kampania-szkic {
  color: var(--ostrzezenie);
  border-color: var(--ostrzezenie);
}

.zasob-pilne,
.zasob-wygasl,
.scoring-goracy,
.kampania-odrzucona {
  color: var(--blad);
  border-color: var(--blad);
}

.kampania-odpowiedziala {
  color: var(--sukces);
  border-color: var(--sukces);
}

.pole-zaznaczenia {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Jakość danych: ocena, ostrzeżenia, podpisy i załączniki w karcie; raport, stop-lista i scalanie w Ustawieniach. */
.jakosc-wynik {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
}

.jakosc-skladniki {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-2) var(--s-3);
  list-style: none;
  margin: 0 0 var(--s-2);
  padding: 0;
}

.jakosc-skladnik {
  display: grid;
  gap: 2px;
  font-size: var(--fs-1);
}

.jakosc-skladnik meter {
  width: 100%;
  height: 8px;
}

.jakosc-ostrzezenia,
.jakosc-podpisy,
.jakosc-zalaczniki,
.jakosc-poprawy-lista,
.jakosc-stop-lista {
  list-style: none;
  margin: 0 0 var(--s-2);
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.jakosc-ostrzezenie,
.jakosc-podpis,
.jakosc-zalacznik,
.jakosc-poprawa,
.jakosc-stop-wpis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel);
}

.jakosc-ostrzezenie {
  border-left-width: 4px;
}

.jakosc-ostrzezenie.jakosc-blad {
  border-left-color: var(--blad);
  background: var(--blad-tlo);
}

.jakosc-ostrzezenie.jakosc-ostrzezenie {
  border-left-color: var(--ostrzezenie);
}

.jakosc-ostrzezenie.jakosc-info {
  border-left-color: var(--akcent);
}

.jakosc-akcje,
.jakosc-stop-formularz {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin: 0 0 var(--s-2);
}

.jakosc-miniatura-miejsce {
  flex-basis: 100%;
}

.jakosc-miniatura {
  display: block;
  max-width: 160px;
  max-height: 120px;
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
  background: var(--panel-2);
}

.jakosc-liczby {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2px var(--s-3);
  margin: 0 0 var(--s-2);
}

.jakosc-liczby dt {
  color: var(--przygaszony);
}

.jakosc-liczby dd {
  margin: 0;
  font-weight: 600;
}

.jakosc-stop-formularz input,
.jakosc-stop-formularz select {
  min-width: 0;
  max-width: 100%;
}

.jakosc-tlumaczenie-sterowanie {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  margin: 0 0 var(--s-2);
}

.jakosc-tlumaczenia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.jakosc-tlumaczenie-wiadomosc {
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel);
}

.jakosc-tlumaczenie-wiadomosc p {
  margin: 2px 0 0;
  white-space: pre-wrap;
}
/* Mobilność panelu (sekcja 21): AMOLED, tryb jednoręczny, tryb samochodowy, przycisk "+", mikrofon, chipy. */
:root[data-amoled="1"][data-theme="dark"] {
  --tlo: #000000;
  --panel: #07090c;
  --panel-2: #0e1217;
  --ramka: #272f39;
  --cien: none;
  --cien-wysoki: 0 0 0 1px #272f39;
}

@media (prefers-color-scheme: dark) {
  :root[data-amoled="1"]:not([data-theme="light"]) {
    --tlo: #000000;
    --panel: #07090c;
    --panel-2: #0e1217;
    --ramka: #272f39;
    --cien: none;
    --cien-wysoki: 0 0 0 1px #272f39;
  }
}

.mobilnosc-ustawienia {
  display: contents;
}

.przycisk.mikrofon {
  margin-left: var(--s-2);
}

.przycisk.mikrofon[aria-pressed="true"] {
  color: var(--akcent-tekst);
  background: var(--akcent-tlo);
}

.chipy-szybkie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.fab-szansa {
  display: none;
}

.tryb-auto {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--tlo);
}

.tryb-auto[hidden] {
  display: none;
}

.tryb-auto-przycisk {
  min-height: 72px;
  font-size: var(--fs-4);
  font-weight: 600;
}

@media (max-width: 699px) {
  .fab-szansa {
    position: fixed;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 8;
    display: block;
    width: 56px;
    height: 56px;
    font: inherit;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--akcent-tekst);
    background: var(--akcent-tlo);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--cien-wysoki);
    cursor: pointer;
  }

  .karta-otwarta .fab-szansa {
    display: none;
  }

  :root[data-reka="lewa"] .fab-szansa {
    right: auto;
    left: 16px;
  }

  :root[data-reka] .dolny-pasek button {
    min-height: 60px;
    font-size: var(--fs-3);
  }

  :root[data-reka] .fab-szansa {
    width: 64px;
    height: 64px;
    bottom: calc(92px + env(safe-area-inset-bottom));
  }

  :root[data-reka] .aplikacja {
    padding-bottom: 104px;
  }
  /* Ostatnia karta kolumny Kanbanu musi dac sie przewinac spod przycisku "+" (lewy albo prawy rog). */
  .kanban .kolumna {
    padding-bottom: 88px;
  }
}
/* Doświadczenie "wow" (sekcja 38): konfetti, podgląd klienta, akcenty per konto, skórka świąteczna, Twój rok, następny krok */
.konfetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3000;
}

.podglad-klienta {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2500;
  max-width: 280px;
  padding: var(--s-3) var(--s-3);
  background: var(--panel);
  color: var(--tekst);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  box-shadow: var(--cien-wysoki);
  font-size: 0.9rem;
  pointer-events: none;
}

.podglad-klienta ul {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
}

.podglad-klienta li {
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.nastepna-akcja {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
  animation: nastepna-akcja-puls 2.4s ease-in-out 3;
}

@keyframes nastepna-akcja-puls {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--akcent) 25%, transparent);
  }
}

.moj-rok-tresc h3 {
  margin: var(--s-4) 0 var(--s-2);
  font-size: 1rem;
}

.rok-kafle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
}

.rok-kafel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3);
  background: var(--panel-2);
  border-radius: var(--r-2);
}

.rok-kafel strong {
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.rok-kafel span {
  color: var(--przygaszony);
  font-size: 0.85rem;
}

.rok-zdania p {
  margin: var(--s-2) 0;
}

.odznaki {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.odznaka {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-3);
  border: 1px dashed var(--ramka);
  border-radius: var(--r-2);
}

.odznaka-zdobyta {
  border: 1px solid var(--sukces);
  background: var(--wygrane-tlo);
}

.odznaka progress {
  width: 100%;
  height: 8px;
  accent-color: var(--akcent-tlo);
}

.odznaka-stan {
  font-size: 0.8rem;
  color: var(--przygaszony);
}

.odznaka-zdobyta .odznaka-stan {
  color: var(--sukces);
  font-weight: 600;
}

:root[data-skorka="swieta"] .gora {
  border-top: 4px solid transparent;
  border-image: repeating-linear-gradient(
      90deg,
      #b42318 0 24px,
      #166a2e 24px 48px,
      #c9a227 48px 72px
    )
    4;
}

:root[data-akcent="las"] {
  --akcent: #1a6b3c;
  --akcent-tlo: #1a6b3c;
  --akcent-tekst: #ffffff;
}

:root[data-akcent="sliwka"] {
  --akcent: #7a2e8e;
  --akcent-tlo: #7a2e8e;
  --akcent-tekst: #ffffff;
}

:root[data-akcent="bursztyn"] {
  --akcent: #9a3412;
  --akcent-tlo: #9a3412;
  --akcent-tekst: #ffffff;
}

:root[data-akcent="swieta"] {
  --akcent: #b42318;
  --akcent-tlo: #b42318;
  --akcent-tekst: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root[data-akcent="las"]:not([data-theme="light"]) {
    --akcent: #6fd39a;
    --akcent-tlo: #6fd39a;
    --akcent-tekst: #08121d;
  }
  :root[data-akcent="sliwka"]:not([data-theme="light"]) {
    --akcent: #d9a5ee;
    --akcent-tlo: #d9a5ee;
    --akcent-tekst: #08121d;
  }
  :root[data-akcent="bursztyn"]:not([data-theme="light"]) {
    --akcent: #ffb27a;
    --akcent-tlo: #ffb27a;
    --akcent-tekst: #08121d;
  }
  :root[data-akcent="swieta"]:not([data-theme="light"]) {
    --akcent: #ff9a8f;
    --akcent-tlo: #ff9a8f;
    --akcent-tekst: #08121d;
  }
}

:root[data-akcent="las"][data-theme="dark"] {
  --akcent: #6fd39a;
  --akcent-tlo: #6fd39a;
  --akcent-tekst: #08121d;
}

:root[data-akcent="sliwka"][data-theme="dark"] {
  --akcent: #d9a5ee;
  --akcent-tlo: #d9a5ee;
  --akcent-tekst: #08121d;
}

:root[data-akcent="bursztyn"][data-theme="dark"] {
  --akcent: #ffb27a;
  --akcent-tlo: #ffb27a;
  --akcent-tekst: #08121d;
}

:root[data-akcent="swieta"][data-theme="dark"] {
  --akcent: #ff9a8f;
  --akcent-tlo: #ff9a8f;
  --akcent-tekst: #08121d;
}

/* Głos i telefonia: rozmowy w karcie i panel Telefon */
.rozmowy-lista {
  margin: 0 0 var(--s-2);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.rozmowa-pozycja {
  padding: var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}
.rozmowa-pozycja.rozmowa-zla {
  border-color: var(--blad);
}
.rozmowa-znaczniki,
.rozmowa-odtwarzacz,
.rozmowa-zgoda-blok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-1) 0;
}
.rozmowa-odtwarzacz audio {
  max-width: 100%;
}
.rozmowa-transkrypcja {
  white-space: pre-wrap;
}
.rozmowa-transkrypcja-edytor,
.telefon-panel #telefon-tresc {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.telefon-panel table {
  width: 100%;
}

/* Wizja (wizja.py): karta propozycji agenta i pola tlumacza na zywo. */
.wizja-karta textarea,
.wizja-karta > select,
#agencja .projekt-blok > .projekt-forma > textarea {
  width: 100%;
  font: inherit;
  margin: var(--s-2) 0;
}

.wizja-karta .projekt-forma input[type="text"] {
  flex: 1 1 200px;
  min-width: 0;
}

/* Pakiet: płatności, spotkania, kanały i narzędzia oferty (pakiet.js) */
.pakiet-blok {
  margin: 0 0 1rem;
}
.pakiet-wiersz {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--ramka);
}
.pakiet-opis {
  flex: 1 1 16rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pakiet-akcje,
.pakiet-formularz {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.4rem;
}
.pakiet-formularz textarea,
.pakiet-formularz input[type="text"] {
  flex: 1 1 14rem;
  min-width: 0;
}
.pakiet-wynik {
  margin: 0.4rem 0 0;
  overflow-wrap: anywhere;
}

/* Okno Wsparcie (wsparcie.js): rozmowa z agentem, FAQ i pasek zapowiedzi przerwy serwisowej. */
.wsparcie-rozmowa {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-2) 0;
}

.wsparcie-wiadomosc {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--dymek-klient);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wsparcie-wiadomosc.wsparcie-klient {
  background: var(--dymek-my);
  border-color: var(--dymek-my-ramka);
}

.wsparcie-faq details {
  margin: var(--s-1) 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  background: var(--panel);
}

.wsparcie-faq summary {
  cursor: pointer;
  font-weight: 600;
}

#okno-wsparcie textarea {
  width: 100%;
  font: inherit;
  margin: var(--s-2) 0;
}

.pasek-przerwy {
  margin: 0;
  border-radius: 0;
  border-left-color: var(--ostrzezenie);
  background: var(--ostrzezenie-tlo);
  color: var(--tekst);
}

/* Logowanie SSO (sso.js): przyciski dostawcow pod formularzem logowania. */
.sso-logowanie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}


/* Runda 5 (runda5.js): szybkie akcje, gwiazdka, podgląd, gęstość listy, sekcje karty i zakładki zespołu. */
.r5-pasek {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.r5-ostatnie {
  position: relative;
}

.r5-ostatnie > summary {
  list-style: none;
  cursor: pointer;
}

.r5-ostatnie > summary::-webkit-details-marker {
  display: none;
}

.r5-ostatnie-lista {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  gap: 2px;
  min-width: min(320px, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--s-2);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  box-shadow: var(--cien-wysoki);
}

.r5-ostatnie-pozycja {
  display: block;
  width: 100%;
  min-height: var(--wys-kontrolki);
  padding: var(--s-2) var(--s-2);
  text-align: left;
  color: var(--tekst);
  background: transparent;
  border: 0;
  border-radius: var(--r-1);
  font: inherit;
  cursor: pointer;
}

.r5-ostatnie-pozycja:hover,
.r5-ostatnie-pozycja:focus-visible {
  background: var(--panel-2);
}

.r5-gwiazdka {
  min-width: var(--wys-mala);
  min-height: var(--wys-mala);
  padding: 0 var(--s-2);
  color: var(--przygaszony);
  background: transparent;
  border: 0;
  border-radius: var(--r-1);
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
}

.r5-gwiazdka.aktywna {
  color: var(--ostrzezenie);
}

.r5-gwiazdka:hover,
.r5-gwiazdka:focus-visible {
  background: var(--panel-2);
}

.r5-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: center;
}

.r5-akcja {
  min-height: var(--wys-mala);
  padding: 2px var(--s-2);
  color: var(--tekst);
  background: var(--panel-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
  font: inherit;
  font-size: var(--fs-1);
  cursor: pointer;
}

.r5-akcja:hover:not(:disabled),
.r5-akcja:focus-visible {
  border-color: var(--akcent);
}

.r5-akcja:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.r5-akcje-komorka {
  white-space: nowrap;
}

.r5-podglad {
  position: fixed;
  z-index: 60;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  overflow-y: auto;
  padding: var(--s-4);
  color: var(--tekst);
  background: var(--panel);
  border-left: 1px solid var(--ramka);
  box-shadow: var(--cien-wysoki);
}

.r5-podglad-gora {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  justify-content: space-between;
}

.r5-podglad-gora h2 {
  margin: 0;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

.r5-podglad-tresc p {
  margin: var(--s-2) 0;
}

.r5-podglad-wiadomosc {
  padding: var(--s-2) var(--s-2);
  margin: var(--s-2) 0;
  background: var(--panel-2);
  border-radius: var(--r-1);
}

.r5-podglad-wiadomosc.kierunek-my {
  background: var(--dymek-my);
}

.r5-podglad-dol {
  margin-top: var(--s-3);
}

.r5-wiecej {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-2);
  color: var(--przygaszony);
}

/* Gęstość listy i Kanbana (zapamiętana na koncie). */
.gestosc-kompakt .karta-leada {
  gap: 2px;
  min-height: var(--wys-mala);
  padding: var(--s-1) var(--s-2);
  font-size: var(--fs-1);
}

.gestosc-kompakt .karta-leada .przygaszony,
.gestosc-kompakt .karta-leada .karta-lead-tresc,
.gestosc-kompakt .karta-leada .trafienie {
  display: none;
}

.gestosc-kompakt .r5-akcja {
  min-height: 24px;
  padding: 0 var(--s-2);
  font-size: 0.78em;
}

.gestosc-kompakt .tabela th,
.gestosc-kompakt .tabela td {
  padding: 1px var(--s-2);
}

.gestosc-rozszerzony .karta-leada {
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  font-size: var(--fs-2);
}

.gestosc-rozszerzony .tabela th,
.gestosc-rozszerzony .tabela td {
  padding: var(--s-3) var(--s-3);
}

.tabela tr.wiersz-szansy {
  content-visibility: auto;
  contain-intrinsic-size: auto 38px;
}

.kolumna-tresc > .karta-leada {
  content-visibility: auto;
  contain-intrinsic-size: auto 132px;
}

/* Sekcje karty. */
.r5-lista,
.r5-czat {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.r5-czat {
  max-height: 260px;
  overflow-y: auto;
  padding: var(--s-2);
  background: var(--panel-2);
  border-radius: var(--r-2);
}

.r5-czat:empty {
  display: none;
}

.r5-czat-wiadomosc p,
.r5-wiadomosc p,
.r5-spotkanie p,
.r5-plik p {
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.r5-wiadomosc,
.r5-plik,
.r5-umowa,
.r5-spotkanie {
  padding: var(--s-2) var(--s-3);
  background: var(--panel-2);
  border-radius: var(--r-2);
}

.r5-wiadomosc.kierunek-my {
  background: var(--dymek-my);
}

.r5-plik.moja {
  background: var(--dymek-my);
}

.r5-spotkanie-odwolane {
  opacity: 0.6;
}

.r5-transkrypcja {
  font-style: italic;
}

.r5-przyciski,
.r5-formularz,
.r5-okna {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: flex-end;
  margin: var(--s-2) 0;
}

.r5-formularz > .pole {
  flex: 1 1 140px;
}

.r5-formularz input,
.r5-formularz select {
  width: 100%;
}

.r5-dzien {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--wys-kontrolki);
  padding: 0 var(--s-2);
}

.r5-dzien input {
  width: 20px;
  height: 20px;
}

.r5-adres {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-1);
  overflow-wrap: anywhere;
}

.r5-nagrywanie {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}

.r5-kropka-nagrywania {
  width: 12px;
  height: 12px;
  background: var(--blad);
  border-radius: 50%;
}

@keyframes r5-puls {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .r5-kropka-nagrywania {
    animation: r5-puls 1s ease-in-out infinite;
  }
}

.r5-wideo {
  max-width: 100%;
  max-height: 240px;
  border-radius: var(--r-2);
}

.r5-podglad-nagrania {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-2) 0;
}

.r5-podglad-nagrania textarea,
.r5-nowy textarea,
.r5-nowy input[type="text"] {
  width: 100%;
}

.r5-okno {
  position: fixed;
  z-index: 70;
  top: 5vh;
  left: 50%;
  width: min(760px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--s-4);
  color: var(--tekst);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  box-shadow: var(--cien-wysoki);
  translate: -50% 0;
}

.r5-okno-gora {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: space-between;
}

.r5-okno-gora h2 {
  margin: 0;
  font-size: 1.1rem;
}

.r5-oryginal-ramka {
  width: 100%;
  min-height: 320px;
  background: #fff;
  border: 1px solid var(--ramka);
  border-radius: var(--r-1);
}

.r5-oryginal-tekst {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.r5-oryginal {
  margin-top: var(--s-2);
}

.r5-przyklad {
  padding: var(--s-3);
  margin: var(--s-3) 0;
  background: var(--panel-2);
  border-radius: var(--r-2);
}

.r5-przyklad h3 {
  margin: 0 0 var(--s-2);
  font-size: 1rem;
}

.r5-przyklad blockquote {
  margin: var(--s-2) 0;
  padding-left: var(--s-3);
  color: var(--przygaszony);
  border-left: 3px solid var(--ramka);
}

.r5-odpowiedz {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.r5-opcja {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  margin: var(--s-1) 0;
}

.r5-opcja meter {
  width: 140px;
}

.r5-nowy {
  margin-top: var(--s-4);
}

@media (max-width: 699px) {
  .r5-pasek {
    width: 100%;
  }

  .r5-okno {
    top: 0;
    max-height: 100vh;
    border-radius: 0;
  }

  .r5-akcja {
    min-height: var(--wys-kontrolki);
  }

  .r5-gwiazdka {
    min-width: var(--wys-kontrolki);
    min-height: var(--wys-kontrolki);
  }
}

.r5-tekst {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  margin: var(--s-2) 0;
}

.r5-tekst textarea {
  flex: 1 1 auto;
  min-width: 0;
}

.r5-pelna {
  width: 100%;
}

.pwa-podpowiedz {
  position: static;
  margin: var(--s-2) 8px 0;
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--r-3);
  box-shadow: 0 4px 16px rgba(10, 14, 20, 0.2);
}

.pwa-podpowiedz p {
  margin: 0;
  font-size: var(--fs-1, 0.9rem);
}

.pwa-podpowiedz .przycisk {
  flex: none;
  min-height: var(--wys-kontrolki);
}

.ustawienia-szukaj {
  display: grid;
  gap: var(--s-2);
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--s-2) 0;
  background: var(--tlo, Canvas);
}

.ustawienia-szukaj input {
  min-height: var(--wys-kontrolki);
  width: 100%;
  box-sizing: border-box;
}

.historia-pol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.historia-pol-wpis {
  border-top: 1px solid var(--linia, rgba(128, 128, 128, 0.3));
  padding-top: 8px;
  display: grid;
  gap: 4px;
  justify-items: start;
  min-width: 0;
}
.historia-pol-glowa {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.historia-pol-wartosci {
  overflow-wrap: anywhere;
  max-width: 100%;
}
.wyrozniony-wpis {
  outline: 2px solid var(--akcent, #3b82f6);
  outline-offset: 2px;
}

.filtr-kanalow {
  margin: var(--s-2) 0;
}

.ostatnio-ikonka.ostatnio-klient {
  color: var(--ostrzezenie);
}

.ostatnio-ikonka.ostatnio-my {
  color: var(--przygaszony);
}

.ostatnio-ikonka {
  display: inline-flex;
  align-items: center;
}

.ostatnia-z-ikonka {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  white-space: nowrap;
}

.zdarzenia-systemowe {
  align-self: center;
  width: 100%;
  font-size: var(--fs-1);
  color: var(--przygaszony);
}

.zdarzenia-systemowe-linia {
  cursor: pointer;
  text-align: center;
  padding: var(--s-1) 0;
  list-style: none;
}

.zdarzenia-systemowe-linia::-webkit-details-marker {
  display: none;
}

.zdarzenia-systemowe-linia::before {
  content: "\25B8  ";
}

.zdarzenia-systemowe[open] > .zdarzenia-systemowe-linia::before {
  content: "\25BE  ";
}

.zdarzenia-systemowe-lista {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.wzbogacenie {
  margin: 0.5rem 0;
  font-size: var(--fs-2);
}
.wzbogacenie p {
  margin: 0.2rem 0;
}
.wzbogacenie-zrodlo {
  color: var(--przygaszony);
}
.wzbogacenie-blad {
  color: var(--blad);
}
.wzbogacenie-roznica {
  border-left: 3px solid var(--ostrzezenie);
  padding-left: 0.6rem;
  margin: 0.4rem 0;
  overflow-wrap: anywhere;
}

.sekwencja-start {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.sekwencja-wybor {
  min-height: var(--wys-kontrolki);
  max-width: 100%;
  flex: 1 1 160px;
  min-width: 0;
}

.dk-wnioski {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.dk-po-terminie {
  color: var(--blad, #b3261e);
  font-weight: 600;
}

/* Webhooki wychodzące (Ustawienia). */
.webhook-dziennik {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.webhook-dostawa {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
}

.webhook-adres,
.webhook-odpowiedz,
.webhook-sekret {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.webhook-odpowiedz {
  max-height: 4.5em;
  overflow: hidden;
}

.webhook-sekret {
  display: block;
  padding: var(--s-2);
  border: 1px dashed var(--ramka);
  border-radius: var(--r-2);
  user-select: all;
}

.import-csv-partie-lista {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.import-csv-partie-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  overflow-wrap: anywhere;
}

/* Kreator importu z innego CRM */
.kreator-crm .pole-wiersz {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.kreator-crm select,
.kreator-crm input[type="text"],
.kreator-crm input[type="password"] {
  max-width: 100%;
}

.kreator-crm-sekcje {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
}

.kreator-crm-tabela {
  overflow-x: auto;
}

.kreator-crm-plik > summary,
.kreator-crm-lista > summary {
  cursor: pointer;
  font-weight: 600;
}

.kreator-crm-liczby {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr));
  gap: var(--s-2);
  margin: 0;
}

.kreator-crm-liczby dt {
  color: var(--przygaszony);
  font-size: var(--fs-1);
}

.kreator-crm-liczby dd {
  margin: 0;
  font-size: calc(var(--fs-3) * 1.25);
  font-weight: 600;
}

.kreator-crm-lista ul {
  max-height: 14em;
  margin: var(--s-1) 0 0;
  overflow-y: auto;
  padding-left: 1.2em;
}

body.tylko-odczyt .kreator-crm {
  display: none !important;
}

.kreator-crm,
.kreator-crm details,
.kreator-crm-tabela {
  min-width: 0;
  max-width: 100%;
}

.kreator-crm-tabela select,
.kreator-crm-tabela input {
  width: 100%;
  min-width: 8em;
}

.kreator-crm-sekcje {
  grid-template-columns: minmax(0, 1fr);
}

.kreator-crm-plik .pole select {
  width: 100%;
}

.dziennik-dostepu-filtry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0;
}

.dziennik-dostepu-filtry select {
  min-width: 0;
  max-width: 100%;
}

.dziennik-dostepu-alerty {
  display: grid;
  gap: var(--s-2);
}

.dziennik-dostepu-lista {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.dziennik-dostepu-wiersz {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-2);
  border: 1px solid var(--ramka);
  border-radius: var(--r-2);
  overflow-wrap: anywhere;
}

.dziennik-dostepu-wiersz.alert {
  border-left: 4px solid var(--blad);
}

.dziennik-dostepu-gora {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
}

.dziennik-dostepu-rodzaj {
  color: var(--przygaszony);
}

.dziennik-dostepu-klient {
  word-break: break-all;
}

.dpa-formularz { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0; }
.dpa-pole { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; }
.dpa-pole input { width: 100%; }
.dpa-podmioty { padding-left: 18px; margin: 6px 0 12px; }
.dpa-podmioty li { margin: 3px 0; overflow-wrap: anywhere; }
.dpa-publiczny { display: inline-block; margin: 8px 0 0 12px; }
@media (min-width: 700px) {
  .dpa-formularz { grid-template-columns: 1fr 1fr; }
}

.czat-ustawienia { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: 100%; }
.czat-kod { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 0.8rem; }

/* Przełącznik lejka nad tablicą: zawija się w wierszach, nie poszerza strony */
.przelacznik-lejka[hidden] {
  display: none;
}

.przelacznik-lejka-przycisk {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Telefon: pasek narzędzi zwinięty do jednego wiersza (Opiekun + Filtry), reszta w rozwinięciu, rzadkie akcje na końcu. */
#filtry-przelacznik {
  display: none;
}

@media (max-width: 699px) {
  .narzedzia {
    gap: var(--s-2);
  }

  .narzedzia > #filtry-przelacznik {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: var(--wys-kontrolki);
  }

  .narzedzia > .pole-opiekun {
    flex: 1 1 0;
    min-width: 0;
    order: -2;
  }

  .narzedzia > #filtry-przelacznik {
    order: -1;
  }

  .narzedzia.rozwiniete::before {
    content: "";
    flex: 1 1 100%;
    height: 0;
    margin-top: calc(-1 * var(--s-2));
  }

  .narzedzia:not(.rozwiniete) > :not(.pole-opiekun):not(#filtry-przelacznik) {
    display: none;
  }

  .narzedzia .r5-pasek,
  .narzedzia .int-szukanie {
    display: contents;
  }

  .narzedzia .int-szukanie .int-wynik {
    flex: 1 1 100%;
    order: 9;
  }

  .narzedzia > .widoki {
    margin-left: 0;
  }

  .narzedzia > #menu-widokow,
  .narzedzia > #import-csv,
  .narzedzia > #import-crm,
  .narzedzia > #link-filtra,
  .narzedzia > #tryb-skupienia,
  .narzedzia > #menu-skrzynka,
  .narzedzia #r5-gestosc,
  .narzedzia #int-szukanie > .przycisk:not(:first-child) {
    order: 9;
  }

  .narzedzia .przycisk,
  .narzedzia .menu-widokow > summary {
    min-height: var(--wys-kontrolki);
  }
}

.oferty-bez-odzewu {
  margin: 8px 0;
}
.oferty-bez-odzewu-grupa {
  border: 1px solid var(--linia, #d8d8e0);
  border-radius: 10px;
  padding: 4px 12px;
}
.oferty-bez-odzewu-grupa summary {
  min-height: var(--wys-kontrolki);
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.oferty-bez-odzewu-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 50vh;
  overflow-y: auto;
}
.oferta-bez-odzewu-wiersz {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: var(--wys-kontrolki);
  padding: 8px 4px;
  border: 0;
  border-top: 1px solid var(--linia, #d8d8e0);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.oferta-bez-odzewu-tytul {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Start bez skokow ukladu (CLS): do pierwszego pelnego rysunku Dzis i zwijane bloki pod nim zajmuja miejsce, ale sa
   niewidoczne, wiec ich dopasowanie wysokosci nie przesuwa widocznej tresci. Klase start-gotowy ustawia odslonStart(). */
body:not(.start-gotowy)
  :is(
    .paski,
    .metryki-okresu,
    .narzedzia,
    .sd-naglowek,
    #motywacja,
    #czekaja,
    #do-zrobienia,
    #filtr-statusu,
    #filtr-zrodla,
    .filtr-archiwum,
    #kanban,
    #tabela,
    #oferty-bez-odzewu,
    .dolny-pasek button
  ) {
  visibility: hidden;
}

/* Telefon: bloki pod Dzis czekaja na pelna liste (nie tylko na awaryjny start-gotowy po 4 s), bo Dzis dorasta o kilkaset px
   i spychalby widoczne naglowki sekcji. */
@media (max-width: 699px) {
  body:not(.lista-pelna)
    :is(.paski, .metryki-okresu, .sd-naglowek, #motywacja, #oferty-bez-odzewu) {
    visibility: hidden;
  }
}

.karta-zglos {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px 16px;
}
.karta-zglos .przycisk {
  opacity: 0.85;
}

/* Komputer: pasek "Coś nie działa" niższy, a przycisk wysyłki odpowiedzi przyklejony do dołu kolumny (bez przewijania). */
@media (min-width: 701px) {
  .karta-zglos {
    padding: 2px 12px 4px;
  }

  .karta-zglos .przycisk {
    min-height: 28px;
    padding-block: 2px;
  }

  .kompozytor-dol {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: var(--s-2) 0;
    background: var(--tlo);
  }
}

/* r31b: na telefonie przeciaganie zadan na dzien nie dziala dotykiem, wiec bez celow i opisu: pierwsze zadanie wyzej. */
@media (max-width: 699px) {
  .panel-zadan-podpis,
  .panel-zadan .cele-terminu {
    display: none;
  }
}

.szablony-karta { margin-block: 8px; }
.szablony-chipsy, .szablony-przyciski, .szablony-zakladki, .szablony-ocena { display: flex; flex-wrap: wrap; gap: 6px; }
.szablony-chip { padding: 2px 8px; border: 1px solid var(--ramka); border-radius: 999px; font-size: 0.85rem; }
.szablony-czesc { display: flex; gap: 6px; align-items: center; }
.szablony-meta { font-size: 0.85rem; opacity: 0.8; }

/* Lead z portalu: ogłoszenie i nasza oferta na górze kolumny kontekstu (Paweł 2.11.2026). */
.karta-portalowa .kolumna-karty > [data-sekcja="ogloszenie"] {
  order: -2;
}

.karta-portalowa .kolumna-karty > [data-sekcja="oferty"] {
  order: -1;
}

.wartosc-leada {
  margin-right: 0.5em;
  white-space: nowrap;
  cursor: help;
}
.wartosc-wyplata {
  white-space: normal;
}
.wartosc-zmiana.wzrost {
  color: var(--sukces);
}
.wartosc-zmiana.spadek {
  color: var(--blad);
}
.kt-wartosc {
  margin: 0;
  font-size: 0.9em;
}
@media (min-width: 700px) {
  .kt-wartosc {
    display: none;
  }
}

.dymek-wartosci {
  position: fixed;
  z-index: 1000;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  max-width: 560px;
  margin: 0 auto;
  max-height: 60vh;
  overflow: auto;
  padding: 10px 12px;
  border-radius: var(--r-2);
  border: 1px solid var(--ramka-mocna);
  background: var(--tlo);
  color: var(--tekst);
  font-size: var(--fs-1);
  line-height: 1.45;
  white-space: pre-line;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.wartosc-leada, .kolumna-prognoza { cursor: help; }