/* ==== Menu na telefonie: burger (2026-10-03) ====
   Działa tylko z klasą l66-telefon na <html> (l66-telefon.js: krótszy bok ekranu < 600 px). Komputery, monitory
   dotykowe i tablety jej nie dostają - ten arkusz ich nie dotyczy.
   System nie ma @Viewport, więc telefon rysuje go jak stronę szerokości 980 px pomniejszoną do ekranu (ok. 0,4).
   Treść zostaje taka jak teraz; zmienia się tylko menu: zamiast kolumny 80 px (tryb „601px-1000px” z designs.scss)
   belka u góry z „≡ Menu”, a lista otwiera się pod nią na cały ekran.
   Wymiary są ok. 2,5 raza większe niż na komputerze, żeby po pomniejszeniu dało się trafić kciukiem:
   belka i pozycja listy 110 px ≈ 44 px na ekranie telefonu, napisy 40 px ≈ 16 px.
   Otwarte menu = klasa l66-menu-otwarte na <html> (l66-telefon.js).
   Selektory są dłuższe niż w designs.scss, bo styles.css wczytuje się po tym arkuszu i przy równej
   specyficzności wygrywałby. */

/* ---- kolumna menu znika, treść bierze całą szerokość ---- */
:root.l66-telefon .mytheme .app-shell .navigation-bar-container {
  width: 0 !important;
}

/* ---- belka u góry: L66 + ikonka motywu po lewej, „≡ Menu” po prawej ---- */
/* !important przy wymiarach: Vaadin wpisuje size-full / height z Designera w atrybut style */
:root.l66-telefon .mytheme .app-shell .navigation-bar-container .navigation-bar {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100% !important;
  height: 110px !important;
}

:root.l66-telefon .mytheme .app-shell .navigation-bar .v-label.logo {
  float: left;
  box-sizing: border-box;
  width: auto !important;
  height: 110px !important;
  padding: 0 112px 0 36px;
  font-size: 40px;
  line-height: 110px;
}

:root.l66-telefon .mytheme .app-shell .navigation-bar .l66-motyw-przycisk {
  right: 24px;
  width: 72px;
  height: 72px;
  margin-top: -36px;
  border-radius: 14px;
  font-size: 40px;
  line-height: 72px;
}

:root.l66-telefon .mytheme .app-shell .navigation-bar .v-button.menu {
  display: block;
  float: right;
  height: 110px;
  padding: 0 36px;
  border-radius: 0;
  color: #fff;
  font-size: 40px;
  line-height: 110px;
}

:root.l66-telefon .mytheme .app-shell .navigation-bar .v-button.menu .v-icon {
  color: #fff;
  font-size: 40px;
}

:root.l66-telefon.l66-menu-otwarte .mytheme .app-shell .navigation-bar .v-button.menu {
  background: rgba(0, 0, 0, 0.12);
}

/* miejsce pod belką: padding w nagłówku, nie w .content-container - tam padding-top wpisuje Vaadin
   (rezerwuje miejsce dla nagłówka nad rozciągniętą treścią) i nadpisałby regułę */
:root.l66-telefon .mytheme .app-shell .v-csslayout.naglowek {
  padding-top: 119px;
}

/* ---- lista: schowana, po „Menu” na cały ekran pod belką, przewijana ---- */
:root.l66-telefon .mytheme .app-shell .navigation-bar .navigation {
  display: none;
}

:root.l66-telefon.l66-menu-otwarte .mytheme .app-shell .navigation-bar .navigation {
  display: block;
  position: fixed;
  top: 110px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* pozycje jak w menu na komputerze (ikona + napis w jednej linii), nie jak w wąskiej kolumnie 80 px;
   ikona ma stałą szerokość, żeby napisy zaczynały się w jednej linii (koszyk jest szerszy od innych ikon) */
:root.l66-telefon .mytheme .app-shell .navigation-bar .navigation .v-button {
  display: block;
  box-sizing: border-box;
  height: 110px;
  padding: 0 40px;
  font-size: 40px;
  line-height: 110px;
  text-align: left;
}

:root.l66-telefon .mytheme .app-shell .navigation-bar .navigation .v-button .v-button-caption {
  float: none;
  width: auto;
  margin: 0;
  font-size: inherit;
  text-align: left;
}

:root.l66-telefon .mytheme .app-shell .navigation-bar .navigation .v-button .v-icon {
  float: none;
  width: 52px;
  margin-right: 20px;
  font-size: inherit;
  text-align: center;
}

/* podpowiedź „Ctrl+K · szukaj zakładki” - na telefonie nie ma klawiatury */
:root.l66-telefon .mytheme .app-shell .v-label.paleta-podpowiedz {
  display: none;
}

/* ---- karta „Wczytywanie…” (animacje-v1.css): bez kolumny menu środek treści = środek okna ---- */
:root.l66-telefon .mytheme .v-ui:has(> .app-shell) > .v-loading-indicator:not([style*="none"]):before,
:root.l66-telefon .mytheme .v-ui:has(> .app-shell) > .v-loading-indicator:not([style*="none"]):after {
  left: 50%;
}