/* IWENDO - PASEK KOMUNIKATU OPERATORA. JEDEN ARKUSZ DLA DWÓCH STRON.

   Czytają go CRM (`index.html`) i panel operatora (`panel/panel.html`, przez trasę
   `/pasek-komunikatu.css`). Powód jest ten sam, co przy `js/pasek-komunikatu.js`:
   panel obiecuje „jak to zobaczy biuro", więc podgląd malowany własnymi regułami
   byłby podglądem czegoś innego - i rozjechałby się przy pierwszej zmianie w CRM,
   bez żadnego objawu poza tym, że operator patrzy na nieaktualny obrazek.

   --- PUŁAPKA, KTÓRA WYSZŁA PRZY WYCIĄGANIU TEGO PLIKU ---

   `--st-uwaga-obwodka` jest zdefiniowana w `css/style.css`, ale NIE BYŁA w palecie
   `panel/panel.html`. Arkusz wspólny malowałby więc w panelu obramowanie bez koloru:
   nieprawidłowe `var()` sprowadza właściwość do `unset`, więc nic nie krzyczy, a różnicy
   nie widać na pierwszy rzut oka. To ta sama rodzina co 28 odwołań do nieistniejącego
   `--green`. `tokeny-css.test.js` tego NIE złapałby, bo token istnieje - tylko nie tam,
   gdzie jest potrzebny. Pilnuje tego teraz `komunikaty-pasek.test.js`: każdy token użyty
   w tym pliku musi być zdefiniowany W OBU miejscach, które ten plik ładują.

   Kolory są WYŁĄCZNIE parami `--st-*-ink` / `--st-*-tint`, bo to one mają sprawdzony
   kontrast AA atramentu na własnym tincie. Podstawienie koloru „statusu na bieli"
   zbiłoby kontrast, tak jak `--danger` pod `.badge.red` (4,84 -> 4,14). */

.pas-komunikaty { display: flex; flex-direction: column; gap: 8px; }
.pas-komunikaty:not(:empty) { padding: 12px 24px 0; }
.pas-crm {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: 10px; border: 1px solid transparent;
  font-size: 16px; line-height: 1.45;
}
.pas-crm b { display: block; }
.pas-crm .pas-slowo {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.pas-crm .pas-znak {
  width: 22px; height: 22px; border-radius: 50%; color: #FFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; flex: 0 0 auto;
}
.pas-crm.informacja { background: var(--st-info-tint); color: var(--st-info-ink); border-color: #C8D6E6; }
.pas-crm.informacja .pas-znak { background: var(--st-info-ink); }
.pas-crm.ostrzezenie { background: var(--st-uwaga-tint); color: var(--st-uwaga-ink); border-color: var(--st-uwaga-obwodka); }
.pas-crm.ostrzezenie .pas-znak { background: var(--st-uwaga-ink); }
.pas-crm.awaria { background: var(--st-alarm-tint); color: var(--st-alarm-ink); border-color: #E8C9BE; }
.pas-crm.awaria .pas-znak { background: var(--st-alarm-ink); }
@media (max-width: 700px) {
  .pas-komunikaty:not(:empty) { padding: 12px 16px 0; }
  .pas-crm { flex-direction: column; gap: 8px; }
}

/* PRZYCISK ZAMKNIĘCIA (dzień 11, blok 3). Pasek jest `flex`, więc `margin-left: auto`
   dosuwa krzyżyk do prawej krawędzi bez dodatkowego elementu rozpychającego.

   KOLOR DZIEDZICZONY (`currentColor`), nie własny: pasek ma trzy warianty atramentu
   i wpisana wartość zbiłaby kontrast w dwóch z nich. `opacity` zamiast jaśniejszego
   koloru - z tego samego powodu.

   POWIERZCHNIA DOTYKU ma 28 px, choć znak jest mały: krzyżyk wielkości znaku jest na
   telefonie celem, w który trudno trafić, a obok niego nie ma nic, w co trafić NIE chcemy. */
.pas-crm .pas-zamknij {
  margin-left: auto; flex: 0 0 auto; align-self: flex-start;
  width: 28px; height: 28px; padding: 0;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: currentColor; opacity: .62;
  font-size: 22px; line-height: 1; font-family: inherit;
}
.pas-crm .pas-zamknij:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
.pas-crm .pas-zamknij:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }

/* ═ PASEK BIURA DEMONSTRACYJNEGO (blok 9, 2026-10-02) ═
   TU, a nie w , bo modyfikuje  z tego arkusza - reguly
   w dwoch plikach rozjechalyby sie przy pierwszej zmianie wysokosci paska.

   Kolor inny niz przy komunikatach operatora, bo to nie jest powiadomienie do
   przeczytania i zamkniecia, a ETYKIETA na danych: ma byc widoczna przez cale
   spotkanie z klientem i nie da sie jej zamknac. */
.pasek-komunikatu.pasek-demo { background: #4A3B6B; color: #fff; border-color: #2E2545; }
.pasek-komunikatu.pasek-demo b { color: #fff; }

/* PASKI KONCA LICENCJI (noc 18, blok 5)
   TU, a nie w style.css, z tego samego powodu co pasek biura demonstracyjnego:
   modyfikuja .pasek-komunikatu z tego arkusza, a reguly w dwoch plikach rozjechalyby sie
   przy pierwszej zmianie wysokosci paska.

   CZTERY STANY, TRZY KOLORY. Prog 14 i 7 dni wyglada spokojnie - to jest informacja
   z czasem na reakcje. Ostatni dzien i karencja sa pomaranczowe, blokada czerwona.
   Jeden kolor na wszystkie stany znaczylby, ze pasek "za 14 dni" wyglada jak odciecie
   dostepu - a wtedy pierwszy wyglada na falszywy alarm i nastepne nikt nie czyta. */
.pasek-komunikatu.pasek-licencja { background: #FFF8E1; color: #4A3B00; border-color: #E6C64D; }
.pasek-komunikatu.pasek-licencja-pilne,
.pasek-komunikatu.pasek-licencja-karencja { background: #FFE8CC; color: #5A2E00; border-color: #E08A2E; }
.pasek-komunikatu.pasek-licencja-blokada { background: #FBE2E2; color: #5C1414; border-color: #D05A5A; }