/* ==== Komunikaty (Notification) ====
   Wygląd zatwierdzony 2026-10-02 (wariant 1): info, sukces i ostrzeżenie jasne w tonach kafelków
   Pulpitu (pulpit-v1.css), błąd w pełnej czerwieni jak pastylka „Złodziej” (klient-v1.css).
   Klasy typów nadaje Vaadin: humanized (info), warning, error, tray (dymek w rogu);
   „sukces” ustawia komponenty/Komunikaty.sukces(). Komunikat systemowy Vaadina (system) zostaje bez zmian.
   Kółko z ikoną to :before (font Vaadin-Icons). Info, sukcesy i ostrzeżenia znikają po interakcji.
   Błąd zamyka wyłącznie przycisk × dodany przez komunikaty.js; dymek w rogu znika sam.
   Prefiks :root jest potrzebny, bo styles.css (Valo) wczytuje się po tym arkuszu i przy równej
   specyficzności wygrywałby z regułami .warning / .error / :after. */

/* ---- wspólne: karta z lewą krawędzią 4px, domyślnie ton info ---- */
:root .mytheme .v-Notification.humanized,
:root .mytheme .v-Notification.sukces,
:root .mytheme .v-Notification.warning,
:root .mytheme .v-Notification.error,
:root .mytheme .v-Notification.blad-skanu,
:root .mytheme .v-Notification.tray {
  box-sizing: border-box;
  width: 520px;
  max-width: calc(100% - 32px);
  min-height: 64px;
  padding: 14px 50px 14px 66px;
  border: 1px solid #caddea;
  border-left: 4px solid #5f8eae;
  border-radius: 9px;
  background: #f1f7fb;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  color: #303030;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

:root .mytheme .v-Notification.humanized .v-Notification-caption,
:root .mytheme .v-Notification.sukces .v-Notification-caption,
:root .mytheme .v-Notification.warning .v-Notification-caption,
:root .mytheme .v-Notification.error .v-Notification-caption,
:root .mytheme .v-Notification.blad-skanu .v-Notification-caption,
:root .mytheme .v-Notification.tray .v-Notification-caption {
  display: block;
  margin: 0;
  padding-top: 6px;
  color: #303030;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

:root .mytheme .v-Notification.humanized .v-Notification-description,
:root .mytheme .v-Notification.sukces .v-Notification-description,
:root .mytheme .v-Notification.warning .v-Notification-description,
:root .mytheme .v-Notification.error .v-Notification-description,
:root .mytheme .v-Notification.blad-skanu .v-Notification-description,
:root .mytheme .v-Notification.tray .v-Notification-description {
  display: block;
  max-width: none;
  margin: 2px 0 0;
  color: #555;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* kółko z ikoną (jak numer kroku, 34px) */
:root .mytheme .v-Notification.humanized:before,
:root .mytheme .v-Notification.sukces:before,
:root .mytheme .v-Notification.warning:before,
:root .mytheme .v-Notification.error:before,
:root .mytheme .v-Notification.blad-skanu:before,
:root .mytheme .v-Notification.tray:before {
  content: "\e71e"; /* VaadinIcons.INFO */
  position: absolute;
  top: 14px;
  left: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #5f8eae;
  color: #fff;
  font-family: "Vaadin-Icons";
  font-size: 16px;
  font-weight: normal;
  line-height: 34px;
  text-align: center;
}

/* krzyżyk: tylko dla komunikatów zamykanych kliknięciem (nie dla dymka w rogu) */
:root .mytheme .v-Notification.humanized:after,
:root .mytheme .v-Notification.sukces:after,
:root .mytheme .v-Notification.warning:after,
:root .mytheme .v-Notification.error:after {
  content: "\00d7";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #8a8a8a;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-align: center;
  opacity: 1;
  transition: none;
}

:root .mytheme .v-Notification.humanized:hover:after,
:root .mytheme .v-Notification.sukces:hover:after,
:root .mytheme .v-Notification.warning:hover:after,
:root .mytheme .v-Notification.error:hover:after {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.05);
  color: #303030;
  opacity: 1;
}

/* Błąd: prawdziwy przycisk zamiast dekoracyjnego :after; treść nie zamyka komunikatu. */
:root .mytheme .v-Notification.error {
  cursor: default;
}

:root .mytheme .v-Notification.error:after {
  display: none;
}

:root .mytheme .v-Notification.error .l66-komunikat-zamknij {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: 400 20px/26px Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  opacity: 0.85;
}

:root .mytheme .v-Notification.error .l66-komunikat-zamknij:hover,
:root .mytheme .v-Notification.error .l66-komunikat-zamknij:focus-visible {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

/* ---- sukces: zielony jak kafelek „Gotówka” ---- */
:root .mytheme .v-Notification.sukces {
  border-color: #cfe3cf;
  border-left-color: #579250;
  background: #f0f8ef;
}

:root .mytheme .v-Notification.sukces:before {
  content: "\e75b"; /* VaadinIcons.CHECK */
  background: #579250;
}

/* ---- ostrzeżenie: bursztyn, opis jak „Ostrzeżenie w oknie” ---- */
:root .mytheme .v-Notification.warning {
  border-color: #e5d6bc;
  border-left-color: #c48b2a;
  background: #fff9ef;
}

:root .mytheme .v-Notification.warning:before {
  content: "\e708"; /* VaadinIcons.EXCLAMATION */
  background: #c48b2a;
}

:root .mytheme .v-Notification.warning .v-Notification-description {
  color: #6f4900;
}

/* ---- błąd: pełna czerwień, biały tekst ---- */
:root .mytheme .v-Notification.error,
:root .mytheme .v-Notification.blad-skanu {
  border-color: #c65353;
  background: #c65353;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

:root .mytheme .v-Notification.error .v-Notification-caption,
:root .mytheme .v-Notification.error .v-Notification-description,
:root .mytheme .v-Notification.blad-skanu .v-Notification-caption,
:root .mytheme .v-Notification.blad-skanu .v-Notification-description {
  color: #fff;
}

:root .mytheme .v-Notification.error:before,
:root .mytheme .v-Notification.blad-skanu:before {
  content: "\e7ad"; /* VaadinIcons.CLOSE */
  background: #fff;
  color: #c65353;
}

:root .mytheme .v-Notification.error:after {
  color: #fff;
  opacity: 0.85;
}

:root .mytheme .v-Notification.error:hover:after,
:root .mytheme .v-Notification.error:active:after {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  opacity: 1;
}

/* ---- błąd skanu inwentury (Komunikaty.bladSkanu): wygląd błędu, ale bez × i bez blokowania ekranu,
   bo skaner to klawiatura; znika sam po kolejnym skanie (zgłoszenie 2026-10-10) ---- */
:root .mytheme .v-Notification.blad-skanu {
  padding-right: 16px;
  cursor: default;
}

/* ---- dymek w rogu (TRAY): wygląd info, węższy, bez krzyżyka, znika sam; od 2026-10-10 nieużywany - Inwentura
   pokazuje wynik skanu w kafelku „Ostatni skan”, bo dymek zasłaniał „Zakończ inwenturę” ---- */
:root .mytheme .v-Notification.tray {
  width: auto;
  min-width: 280px;
  max-width: 420px;
  padding-right: 16px;
  cursor: default;
}