/* --------------------------------------------------------------------------
   Mieszczenie w ekranie tego, co Telerik wyswietla na wierzchu: okien modalnych
   (sekcja nizej) i wyskakujacych paneli siatek (sekcja na koncu pliku).
   Okien jest w aplikacji 99, 63 bez zadeklarowanej szerokosci, 16 z twarda
   szerokoscia w px — do 1480 px.

   Plik jest STATYCZNY i ladowany zawsze, po motywie, w obu hostach (Web.App
   i Web.Public — stad Web.UI, wspolna biblioteka RCL). Reguly stały
   wczesniej w static_source/scss/_modal.scss, czyli w motywie — a motyw aplikacja
   bierze z bazy (URL do bloba, HostModel.ThemeUrl) i dopoki nie zostanie
   przekompilowany, zmiany w SCSS nie docieraja do przegladarki. Poprawka byla
   w repo, a modale i tak wyjezdzaly poza ekran telefonu. Tutaj dziala zawsze.

   .k-window ma w motywie Kendo 14 position: absolute, a top/left wylicza JS
   Telerika. Przy oknie szerszym od viewportu left wychodzi UJEMNY i modal ucieka
   poza lewa krawedz — sam max-width tego nie naprawia, trzeba nadpisac pozycje.

   .k-window ma tez overflow: clip, wiec ograniczenie wysokosci bez wlaczenia
   przewijania w tresci uczynioby dol modala (zwykle przyciski) nieosiagalnym.
   -------------------------------------------------------------------------- */

/* Ograniczenie rozmiaru dziala na KAZDEJ szerokosci, bez media query. To jest
   wazniejsze, niz wyglada: JS Telerika mierzy offsetWidth PO zastosowaniu
   max-width, wiec wyliczone left jest juz liczone od przycietej szerokosci
   i okno centruje sie poprawnie takze na ekranie wezszym niz zadeklarowane
   Width. Dzieki temu nie ma dziury miedzy progiem media query a szerokoscia
   najwiekszego modala.

   Wersje w vh sa fallbackiem dla przegladarek bez dvh — przy nieznanej
   jednostce cala deklaracja jest odrzucana, wiec bez tej linii ograniczenie
   wysokosci znikneloby calkowicie. */
.k-window:not(.k-window-maximized) {
  max-width: 96vw;
  max-height: 92vh;
  max-height: 92dvh;
}

/* min-height: 0 idzie w parze z overflow: auto. .k-window jest flexem w kolumnie,
   a element flex domyslnie nie kurczy sie ponizej wysokosci swojej tresci — bez tego
   ograniczenie max-height okna nie przelozyloby sie na przewijanie tresci i dol
   modala (zwykle przyciski) zostalby przyciety przez overflow: clip okna. */
.k-window:not(.k-window-maximized) > .k-window-content {
  overflow: auto;
  min-height: 0;
}

/* TelerikDialog siedzi w .k-dialog-wrapper, ktory centruje flexem, wiec nie ma
   problemu z ujemnym left — wystarczy ograniczyc rozmiar. */
.k-dialog {
  max-width: 96vw;
  max-height: 92vh;
  max-height: 92dvh;
}

.k-dialog > .k-dialog-content {
  overflow: auto;
}

/* Prog 48em (768px) obejmuje telefony w pionie i w poziomie. Wyzej zostawiamy
   Telerikowi jego wyliczone pozycjonowanie — ograniczenia rozmiaru wyzej i tak
   juz mieszcza okno w ekranie, a wymuszanie pozycji psuloby przeciaganie okien.

   position: fixed jest tu istotne: .k-window ma absolute, wiec jego top/left
   licza sie wzgledem pozycjonowanego przodka, a nie viewportu. Statyczna pozycja
   przy przewinietej stronie wyladowalaby poza ekranem. fixed czyni pozycje
   odporna zarowno na scroll, jak i na obrot urzadzenia (Telerik nie przelicza
   top/left po zmianie orientacji).

   Srodek ekranu robimy przez 50% + translate(-50%, -50%), a nie przez stale
   top/left: przesuniecie o polowe WLASNEJ wysokosci dziala niezaleznie od tego,
   ile okno ma tresci, wiec maly dialog jest realnie na srodku, a wysoki (przyciety
   do 96dvh) siada z rownym marginesem 2dvh u gory i u dolu. Wyliczenie w CSS,
   bez JS, wiec przezywa tez obrot telefonu i wjazd klawiatury (dvh sledzi realna
   wysokosc viewportu).

   Swiadomy koszt: okna z Draggable przestaja byc przeciagalne na dotyku. */
@media (max-width: 48em) {
  .k-window:not(.k-window-maximized) {
    position: fixed !important;
    /* Fizyczne top/left, nie logiczne inset-* — nadpisujemy inline'owe style
       wyliczone przez JS Telerika, wiec zaleznosc od mapowania wlasciwosci
       logicznych na fizyczne bylaby niepotrzebnym ryzykiem. */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 96vh !important;
    max-height: 96dvh !important;
  }
}


/* Okna z formularzem (klasa gfma-modal-window) kotwiczymy na telefonie u GORY ekranu
   zamiast na srodku. Wysrodkowany modal przy wjezdzie klawiatury laduje mniej wiecej
   tam, gdzie klawiatura — razem z rozwijana lista pod polem. Bylo to widac przy
   dodawaniu TAGow z karty kontaktu: lista wyboru chowala sie za klawiatura.
   Kotwica u gory zostawia pole i jego liste w widocznej czesci ekranu.

   Zwykle dialogi potwierdzenia (bez tej klasy) zostaja wysrodkowane — tam nie ma pol
   do wpisywania, wiec klawiatura sie nie pojawia. */
@media (max-width: 48em) {
  .k-window.gfma-modal-window:not(.k-window-maximized) {
    top: 1vh !important;
    /* Tylko os X — pionowe przesuniecie o polowe wysokosci znosiloby kotwice u gory. */
    transform: translateX(-50%) !important;
    max-height: 88vh;
    max-height: 88dvh;
  }
}

.k-animation-container:has(.k-list-container) {
  width: auto !important;
  max-width: 92vw;
  /* Ponad oknami kart i modalami nad nimi (gfma-card-windows.css: 11510–11600).
     Przy 10050 rozwijana lista chowala sie pod oknem karty — widac to bylo na liscie
     „Dodaj opiekuna" w modalu opiekunow i na liscie tagow otwartej z karty. */
  z-index: 11700 !important;
}

.k-animation-container:has(.k-list-container) > .k-child-animation-container,
.k-animation-container:has(.k-list-container) .k-list-container {
  width: auto !important;
  min-width: 100%;
  max-width: 92vw;
}

.k-animation-container:has(.k-list-container) .k-list-item,
.k-animation-container:has(.k-list-container) .k-list-optionlabel {
  white-space: nowrap;
}

@media (min-width: 48.0625em) {
  .k-animation-container:has(.k-filter-menu),
  .k-animation-container:has(.k-column-list) {
    left: auto !important;
    right: 1rem !important;
    max-width: calc(100vw - 2rem);

    max-height: 90vh;
    max-height: 90dvh;
  }

  .k-animation-container:has(.k-filter-menu) > .k-child-animation-container,
  .k-animation-container:has(.k-column-list) > .k-child-animation-container {
    max-width: 100%;
  }

  .k-filter-menu,
  .k-animation-container:has(.k-column-list) > .k-child-animation-container > .k-popup {
    max-width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    box-sizing: border-box;
  }
}


.k-animation-container:has(.k-column-list) .k-columnmenu-actions > .k-button:last-child,
.k-animation-container:has(.k-column-list) .k-actions > .k-button:last-child {
  display: none;
}

.k-animation-container:has(.k-column-list) .k-columnmenu-actions > .k-button:first-child,
.k-animation-container:has(.k-column-list) .k-actions > .k-button:first-child {
  flex: 1 1 auto;
}

@media (max-width: 48em) {
  .k-animation-container:has(.k-column-menu),
  .k-animation-container:has(.k-filter-menu),
  .k-animation-container:has(.k-column-list) {
    position: fixed !important;
    inset: auto 2vw 2vh 2vw !important;
    width: 96vw !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 80vh;
    max-height: 80dvh;
    z-index: 12000;
  }

  .k-animation-container:has(.k-column-menu) > .k-child-animation-container,
  .k-animation-container:has(.k-filter-menu) > .k-child-animation-container,
  .k-animation-container:has(.k-column-list) > .k-child-animation-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .k-column-menu,
  .k-filter-menu,
  .k-animation-container:has(.k-column-list) > .k-child-animation-container > .k-popup {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
    box-sizing: border-box;
  }

  /* Pola w formularzu filtra sa domyslnie obok siebie i przy 96vw i tak sie nie mieszcza. */
  .k-filter-menu .k-filter-menu-container,
  .k-column-menu .k-filter-menu-container {
    width: 100%;
    box-sizing: border-box;
  }

  /* Pager: przy kilku elementach i waskim ekranie rozjezdzal sie na cala szerokosc
     z dziurami miedzy strzalkami a numeracja. Zawijanie + wysrodkowanie zbija go w kupe. */
  .k-pager {
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
    padding-inline: .25rem;
  }

  .k-animation-container:has(.k-context-menu) {
    position: fixed !important;
    inset: auto 2vw 2vh 2vw !important;
    width: 96vw !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 80vh;
    max-height: 80dvh;
    z-index: 12000;
  }

  .k-animation-container:has(.k-context-menu) > .k-child-animation-container,
  .k-animation-container:has(.k-context-menu) .k-context-menu {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .k-animation-container:has(.k-context-menu) .k-menu-item .k-link {
    min-height: 44px;
  }
}