/* ==== Animacje (test 2026-10-03) ====
   Spokojne przejścia w stylu Apple: wejście zakładki, okna dialogowe, komunikaty, przyciski i kafelki,
   karta „Wczytywanie…” przy dłuższej odpowiedzi serwera. Wyłączenie = usunięcie tego arkusza
   z @StyleSheet w LoginUI.
   Zasady wynikające z Vaadina 8 (sprawdzone w źródłach 8.11.3):
   - Bez scale(): Vaadin mierzy komponenty przez getBoundingClientRect, który widzi transformację,
     więc okno albo widok zmierzone w trakcie skalowania dostałyby o kilka procent za małe rozmiary.
     Dozwolone są tylko przesunięcie i przezroczystość.
   - Nazwa animacji okna musi zawierać „animate-in” / „animate-out”. Vaadin czyta nazwę po dodaniu
     klasy v-window-animate-in/-out i przy innej nazwie zdejmuje klasę od razu, ucinając animację.
   - Widok wjeżdża z góry (ujemne przesunięcie), nie z dołu: przesunięty w dół widok na 100% wysokości
     na chwilę wystawałby z content-section i pokazywał pasek przewijania (a pasek w trakcie liczenia
     układu psuje szerokości zakładek TabSheet, patrz UI_STYLE_VAADIN8.md).
   Prefiks :root jest potrzebny, bo styles.css (Valo) wczytuje się po tym arkuszu i przy równej
   specyficzności wygrywałby. */

/* ---- wejście zakładki: nowy widok w content-section (UserMenu.showView) ---- */
:root .mytheme .content-section > .v-widget {
  animation: l66-widok-animate-in 240ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

@keyframes l66-widok-animate-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ---- okno dialogowe: wyłania się z przezroczystości i lekko unosi ---- */
:root .mytheme .v-window[class*="animate-in"] {
  animation: l66-okno-animate-in 260ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

:root .mytheme .v-window[class*="animate-out"] {
  animation: l66-okno-animate-out 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes l66-okno-animate-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes l66-okno-animate-out {
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---- tło pod oknem modalnym: jaśniejsze przyciemnienie z lekkim rozmyciem zamiast ciemnej zasłony Valo ---- */
:root .mytheme .v-window-modalitycurtain {
  background-color: rgba(28, 28, 30, 0.42);
  background-image: none;
  opacity: 1;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: l66-zaslona-animate-in 260ms ease-out backwards;
}

@keyframes l66-zaslona-animate-in {
  from {
    opacity: 0;
  }
}

/* ---- komunikaty (komunikaty-v1.css): jak okno, wyłaniają się i lekko unoszą ----
   Tylko typy z Komunikaty; komunikat systemowy Vaadina (system) i „bar” zostają z animacją Valo. */
:root .mytheme .v-Notification.humanized[class*="animate-in"],
:root .mytheme .v-Notification.sukces[class*="animate-in"],
:root .mytheme .v-Notification.warning[class*="animate-in"],
:root .mytheme .v-Notification.error[class*="animate-in"],
:root .mytheme .v-Notification.tray[class*="animate-in"] {
  animation: l66-komunikat-animate-in 280ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

:root .mytheme .v-Notification.humanized[class*="animate-out"],
:root .mytheme .v-Notification.sukces[class*="animate-out"],
:root .mytheme .v-Notification.warning[class*="animate-out"],
:root .mytheme .v-Notification.error[class*="animate-out"],
:root .mytheme .v-Notification.tray[class*="animate-out"] {
  animation: l66-komunikat-animate-out 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes l66-komunikat-animate-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes l66-komunikat-animate-out {
  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---- przyciski: płynne podświetlenie po najechaniu, wciśnięcie o 1 px ----
   Bez transition na samym .v-button: arkusz jest ostatni na liście, więc nadpisałby przejścia z arkuszy modułów.
   Podświetlenie Valo siedzi w :after; wciśnięcie zmienia tło od razu, puszczenie wygasza je płynnie. */
:root .mytheme .v-button:after {
  transition: box-shadow 180ms, border 180ms, background-color 150ms;
}

:root .mytheme .v-button:active:after {
  transition: none;
}

/* duże kafelki-przyciski (Paragon / Faktura, PUS / UKS, Kasa / Towar): lekko unoszą się pod kursorem.
   Lista przejść = ta z sale-form-v1.css / umowa-form-v1.css + transform (przy zmianie tam, zmień też tu). */
.mytheme .v-button.sale-doc-tile,
.mytheme .v-button.umowa-doc-tile {
  transition: border-color 120ms, background-color 120ms, box-shadow 120ms, transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* tylko przy myszce: na ekranie dotykowym :hover zostaje po stuknięciu i kafelek wisiałby uniesiony */
@media (hover: hover) {
  :root .mytheme .v-button.sale-doc-tile:not(.v-disabled):hover,
  :root .mytheme .v-button.umowa-doc-tile:not(.v-disabled):hover {
    transform: translateY(-2px);
  }
}

:root .mytheme .v-button.sale-doc-tile:active,
:root .mytheme .v-button.umowa-doc-tile:active {
  transition-duration: 60ms;
}

:root .mytheme .v-button:not(.v-disabled):active {
  transform: translateY(1px);
}

/* kafelki radio (*-choice) i checkbox (*-check-tile, magazyny inwentury): wciśnięcie o 1 px.
   Przesuwamy cały .v-radiobutton / .v-checkbox (Valo: position relative), nie label - kółko i kropka
   (:before/:after labela) jadą razem z kafelkiem. */
:root .mytheme [class*="-choice"] .v-radiobutton:not(.v-disabled):active,
:root .mytheme .v-checkbox[class*="-check-tile"]:not(.v-disabled):active,
:root .mytheme .inw-mag-choice .v-checkbox:not(.v-disabled):active {
  transform: translateY(1px);
}

/* ---- ładowanie: karta „Wczytywanie…” na środku obszaru treści przy dłuższej odpowiedzi serwera ----
   Wskaźnik Vaadina (.v-loading-indicator = pasek u góry) dostaje display:block 300 ms po wysłaniu żądania
   i style="display: none" po odpowiedzi (Valo i tak trzyma go wtedy na display:block z opacity 0, stąd
   :not([style*="none"]) - inaczej karta wisiałaby jeszcze 0,8 s po załadowaniu).
   :before = karta z napisem, :after = kółko. Karta pojawia się po kolejnych 500 ms (razem ok. 0,8 s),
   żeby szybkie kliknięcia nic nie migały. pointer-events: none dziedziczy po wskaźniku - nic nie blokuje.
   Domyślnie środek okna (ekran logowania nie ma menu bocznego); przesunięcie o pół menu niżej. */
:root .mytheme .v-loading-indicator:not([style*="none"]):before {
  content: "Wczytywanie…";
  position: fixed;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 168px;
  height: 104px;
  margin: -52px 0 0 -84px;
  padding-top: 64px;
  border: 1px solid #dedede;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  color: #666;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  animation: l66-ladowanie-pojaw 200ms ease-out 500ms backwards;
}

:root .mytheme .v-loading-indicator:not([style*="none"]):after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  margin: -32px 0 0 -15px;
  border: 3px solid #ead8b8;
  border-top-color: #d59b35;
  border-radius: 50%;
  animation: l66-ladowanie-pojaw 200ms ease-out 500ms backwards, l66-ladowanie-obrot 800ms linear infinite;
}

/* Po zalogowaniu (jest menu boczne): środek obszaru treści = środek okna + połowa menu.
   Wskaźnik jest PIERWSZYM dzieckiem .v-ui, przed .app-shell, więc zwykły selektor rodzeństwa (~) go nie
   złapie - stąd :has() (Chrome/Edge 105+, Safari 15.4+, Firefox 121+; starsza przeglądarka pokaże kartę
   na środku okna, czyli tylko lekko obok środka treści).
   Menu zwęża się w węższym oknie (designs.scss, width-range na .app-shell = szerokość okna): powyżej 1000 px
   149 px, 601–1000 px 80 px, do 600 px schowane pod przyciskiem Menu. Telefon bez @Viewport rysuje stronę
   na 980 px, czyli trafia w środkowy przedział. */
:root .mytheme .v-ui:has(> .app-shell) > .v-loading-indicator:not([style*="none"]):before,
:root .mytheme .v-ui:has(> .app-shell) > .v-loading-indicator:not([style*="none"]):after {
  left: calc(50% + 74px);
}

@media (max-width: 1000px) {
  :root .mytheme .v-ui:has(> .app-shell) > .v-loading-indicator:not([style*="none"]):before,
  :root .mytheme .v-ui:has(> .app-shell) > .v-loading-indicator:not([style*="none"]):after {
    left: calc(50% + 40px);
  }
}

@media (max-width: 600px) {
  :root .mytheme .v-ui:has(> .app-shell) > .v-loading-indicator:not([style*="none"]):before,
  :root .mytheme .v-ui:has(> .app-shell) > .v-loading-indicator:not([style*="none"]):after {
    left: 50%;
  }
}

/* Valo po 9 s pulsuje paskiem przez opacity (v-progress-wait-pulse), co pulsowałoby też kartą - zostaje
   samo dociągnięcie paska, o trwaniu ładowania mówi kręcące się kółko */
:root .mytheme .v-loading-indicator-wait {
  animation: v-progress-wait 5s forwards;
}

@keyframes l66-ladowanie-pojaw {
  from {
    opacity: 0;
  }
}

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

/* ---- systemowe „ogranicz ruch” (Windows: Ustawienia > Ułatwienia dostępu > Efekty animacji) ----
   Kółko ładowania kręci się dalej - to informacja, nie ozdoba. */
@media (prefers-reduced-motion: reduce) {
  :root .mytheme .content-section > .v-widget,
  :root .mytheme .v-window[class*="animate-in"],
  :root .mytheme .v-window[class*="animate-out"],
  :root .mytheme .v-window-modalitycurtain,
  :root .mytheme .v-Notification.humanized[class*="animate-in"],
  :root .mytheme .v-Notification.sukces[class*="animate-in"],
  :root .mytheme .v-Notification.warning[class*="animate-in"],
  :root .mytheme .v-Notification.error[class*="animate-in"],
  :root .mytheme .v-Notification.tray[class*="animate-in"],
  :root .mytheme .v-Notification.humanized[class*="animate-out"],
  :root .mytheme .v-Notification.sukces[class*="animate-out"],
  :root .mytheme .v-Notification.warning[class*="animate-out"],
  :root .mytheme .v-Notification.error[class*="animate-out"],
  :root .mytheme .v-Notification.tray[class*="animate-out"] {
    animation: none;
  }

  :root .mytheme .v-button.sale-doc-tile:not(.v-disabled):hover,
  :root .mytheme .v-button.umowa-doc-tile:not(.v-disabled):hover {
    transform: none;
  }
}