/* awid-login.css — tlo strony logowania (Zimbra-FOSS-AWid)
 * Selektory oparte na RZECZYWISTEJ strukturze login.jsp 10.1.x (zweryfikowane w zrodlach):
 *   <div id="modifiedLogin" class="LoginScreen">
 *     <div class="modernCenter"><div class="modernContentBox"> ...formularz... </div></div>
 *     <div class="Footer"><div id="ZLoginNotice" class="legalNotice-small">copyright</div></div>
 * Skin (_base/base3/skin.properties) maluje na .LoginScreen NIEPRZEZROCZYSTE tlo z obrazkiem
 * -> musimy je zdjac, inaczej nasze tlo jest niewidoczne (H1 z code review).
 * Formularz ORAZ nota copyright (#ZLoginNotice) MUSZA byc nad tlem — wymog CPAL + uzytecznosc.
 * Author: AWid, powered by Ai
 */

/* 0. TLO KORZENIA — malowane natychmiast, zanim cokolwiek innego zdazy.
 * Skin Zimbry ma wlasne, jasnoniebieskie tlo i jego arkusz laduje sie przed naszym.
 * Bez tej deklaracji przez ulamek sekundy widac kolor skinu, zanim nasze reguly wejda
 * w zycie. Ustawienie na html/body kosztuje nic i zamyka to okno. */
html, body {
  background-color: #08101d;
  /* ⛔ PRZEWIJANIE WYKLUCZONE BEZWZGLEDNIE (polecenie usera 2026-08-16).
   * Strona logowania to JEDEN ekran — nie ma na niej tresci ponizej krawedzi, wiec
   * przewijanie moze wyniknac wylacznie z bledu ukladu, a wtedy przesuwa formularz
   * i wyglada jak "rolka rusza karte". Pomiar przy pieciu rozmiarach okna (do
   * 4868x4340) pokazuje nadmiar [0,0], czyli dzis nic nie wystaje — ta regula jest
   * BRAMKA, nie naprawa: sprawia, ze nawet przyszly blad ukladu nie zamieni sie
   * w przewijanie. Karta jest ograniczona do kadru w awid-login.js, wiec nic
   * nie moze zostac schowane poza ekranem i stac sie niedostepne. */
  /* ⛔ POPRAWIONE 2026-08-16 PO AUDYCIE GUI — `overflow: hidden` BYLO BLOKERA.
     Uzasadnienie powyzej jest NIEPRAWDZIWE w dwoch punktach i zostawiam je jako
     przestroge: (1) "nie ma tresci ponizej krawedzi" — jest: ekran 2FA, ramka
     komunikatu bledu i zmiana hasla podnosza karte o 60-105 px; (2) "pomiar
     pokazuje nadmiar [0,0]" — ten pomiar szedl po `documentElement`, o czym ten
     sam plik pisze 40 linii nizej, ze jest bezwartosciowy, bo kontenerem
     przewijania jest `#modifiedLogin`. Bramka stala na pomiarze, ktory projekt
     sam uznal za niewazny.
     ZMIERZONE na hoscie BEZ `CARD_OFFSET` (mail.dynamiczny.net, produkcja): przy
     2FA i widoku 683x384 gorna krawedz karty jest na -10 px, przy 2FA+blad na -41,
     a rolka, klawisz End i pasek przewijania sa NIECZYNNE. Tresci nie da sie
     odslonic — ujemne polozenie nie miesci sie w `scrollTop`.
     Wycinamy wiec WYLACZNIE os pozioma (to o nia chodzilo: "rolka rusza karte"),
     a pionowa zostaje dostepna. Dziala niezaleznie od JS i od konfiguracji domeny. */
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

/* 1. warstwa tla — pod wszystkim, nieklikalna.
 * KOLOR: granat marki (#08101d = COLOR_BG z .conf), NIE niebieski.
 * Do 2026-08-08 stal tu jasnoniebieski gradient (#0a3d62 -> #00a8cc). Na desktopie
 * widac go bylo jako "rozblysk" przy ladowaniu — vanta zamalowywala go dopiero po
 * inicjalizacji. Na telefonie zostawal NA STALE: canvas vanty dostaje wysokosc widoku
 * w chwili startu, a mobilna przegladarka zmienia ja przy chowaniu paska adresu, wiec
 * ponizej canvasu przebijal goly gradient — niebieski pas pod formularzem, z nota CPAL
 * w srodku (zgloszone przez AWida ze zrzutem, lab 2026-08-08).
 * Teraz warstwa zapasowa jest w kolorze docelowym, wiec jej odslonieciе jest niewidoczne:
 * i przy ladowaniu, i ponizej canvasu widac to samo tlo, ktore ma tam byc. */
#awid-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 62% 38%, #12233c 0%, #0b1526 45%, #08101d 100%);
}

/* Canvas vanty ma pokrywac cala warstwe, takze po zmianie wysokosci widoku.
 * Vanta ustawia rozmiar inline przy starcie; to nadpisanie sprawia, ze rozciaga sie
 * na rodzica niezaleznie od tego, co policzyla w chwili inicjalizacji. */
#awid-bg > canvas {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* 2. zdejmij nieprzezroczyste tlo skinu, zeby nasze bylo widoczne */
#modifiedLogin.LoginScreen,
.LoginScreen {
  background: transparent !important;
  /* ⛔ TO JEST WLASCIWY KONTENER PRZEWIJANIA — nie `html`/`body` (2026-08-16, zmierzone).
   * Skin ustawia tu `overflow: auto`. Nasz `overflow: hidden` na html/body niczego
   * nie zalatwial, bo pasek przewijania nalezy do TEGO elementu. Pomiar
   * `document.documentElement.scrollWidth` pokazywal zero i przez to trzy razy
   * odpowiedzialem "przewijania nie ma", podczas gdy user je widzial.
   * Zmierzone przy oknie 1456x1200: nadmiar poziomy 81 px na #modifiedLogin,
   * przy zerowym nadmiarze na documentElement.
   * Wniosek ogolniejszy: przy szukaniu przewijania trzeba przejsc WSZYSTKIE elementy
   * i porownac scrollWidth z clientWidth, a nie ufac korzeniowi dokumentu. */
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* 3. tresc NAD tlem: formularz + stopka z nota copyright (CPAL) */
#modifiedLogin,
.modernCenter,
.modernContentBox,
.Footer,
#ZLoginNotice {
  position: relative;
  z-index: 2;
}

/* ============================================================
 * 4. KARTA LOGOWANIA — CALKOWICIE PRZEZROCZYSTA (decyzja usera 2026-08-12)
 * Skin daje nieprzezroczysta biel; zdejmujemy ja w calosci, zeby formularz
 * "unosil sie" nad animowanym tlem. Historia: 2026-08-02 bylo 55% krycia
 * z rozmyciem 4px pod spodem; 2026-08-12 po ogladzie na zywo zdjete do zera
 * razem z rozmyciem. Pola formularza maja wlasne jasne tlo, wiec pozostaja
 * czytelne; etykiety sprawdzone nad przelatujacymi ptakami.
 * ============================================================ */
/* Wypelnienie w kolorze TLA, nie biale. Biel przy przezroczystosci nad ciemnym
 * tlem daje szarosc — to wynik mieszania kolorow, a nie zly dobor wartosci.
 * #08101d to tlo z logo (COLOR_BG); przy 55% krycia karta czyta sie jako
 * przyciemniona tafla tego samego koloru, a nie jako szara plama.
 * KONSEKWENCJA: tekst i wordmark MUSZA byc jasne (patrz nizej) — inaczej granat
 * na granacie jest nieczytelny. */
/* Karta w DOKLADNIE tym samym kolorze co tlo strony (#08101d = COLOR_BG z .conf).
 * Rozni ja od tla WYLACZNIE krycie — zadnego przesuniecia odcienia. Wczesniejsza
 * wersja byla rozjasniona o 10 punktow jasnosci i przez to czytala sie jak inny kolor. */
.modernContentBox {
  /* PELNA PRZEZROCZYSTOSC (decyzja usera 2026-08-12, po ogladzie na zywo).
   * Bylo rgba(8,16,29,.55) + blur(4px). Rozmycie zdjete razem z tlem: przy
   * przezroczystej karcie i tak nie ma czego rozmywac pod spodem w sposob,
   * ktory cokolwiek dawal, a filtr kosztuje przy kazdej klatce animacji Vanty.
   * Czytelnosc etykiet sprawdzona na zywym tle z ptakami — trzyma sie. */
  background: transparent !important;
  /* Skin rysuje pod karta cien; na ciemnym tle zostaje po nim smuga pod dolna
     krawedzia — widoczna jako pasek ciemniejszy od tla. Zdejmujemy. */
  box-shadow: none !important;
}

/* ============================================================
 * 4b. LOGO NA STRONIE LOGOWANIA — +30% (zyczenie usera 2026-08-12)
 *
 * Element to `span.ImgLoginBanner` (260x34), rysowany przez skin jako TLO CSS,
 * nie <img> — dlatego prawy klawisz nie daje adresu obrazka, a rozstrzyga
 * dopiero F12 -> Siec -> filtr Img.
 *
 * Uzywamy `transform`, a NIE width/height: przeksztalcenie nie zmienia miejsca
 * zajmowanego przez element w ukladzie, wiec naglowek "Zaloguj sie" i formularz
 * NIE przesuwaja sie ani o piksel. Zmiana wymiarow zepchnelaby cala karte w dol.
 *
 * `transform-origin: left center` trzyma punkt zaczepienia przy lewej krawedzi —
 * logo rosnie w prawo i symetrycznie w pionie, zachowujac wyrownanie do lewej.
 *
 * `display: inline-block` jest KONIECZNE: transform nie dziala na elementach
 * liniowych. Skin i tak nadaje temu spanowi wymiary, wiec ta deklaracja niczego
 * nie zmienia wizualnie — zabezpiecza tylko przed wersja skina, ktora zostawi
 * element jako inline i regula po cichu przestanie dzialac.
 *
 * CELOWO nie podmieniamy tu `background-image` na plik z brandingu domeny:
 * ten arkusz jest WSPOLNY dla wszystkich brandingow, a nazwa pliku jest
 * per domena. Wpisanie tu "dynamiczny_net-..." zepsuloby pozostale instalacje.
 * Jesli powiekszenie okaze sie zbyt miekkie, wlasciwa droga jest inna: niech
 * apply-domain-branding wgrywa logo TAKZE pod stala, neutralna nazwa.
 * ============================================================ */
.ImgLoginBanner {
  display: inline-block;
  /* ============================================================
   * LOGO NA KARCIE LOGOWANIA — Z BRANDINGU DOMENY, NIE Z BUILDU (2026-08-16)
   *
   * Do tej pory obrazek pochodzil WYLACZNIE z `/skins/_base/logos/LoginBanner.png`,
   * czyli z pliku WKOMPILOWANEGO w zrodla przez apply-branding.sh. Skutek zobaczylismy
   * na mail.elsta.tech: build bez wbudowanego logo -> na karcie siedzialo DOMYSLNE
   * LOGO ZIMBRY, mimo ze caly branding domeny nalozyl sie poprawnie i wszystkie
   * kontrole HTTP dawaly 200. Branding wygladal na kompletny i nie byl.
   *
   * Nazwa jest STALA i NEUTRALNA (nie `elsta_tech-...`), bo ten arkusz jest WSPOLNY
   * dla wszystkich brandingow — wpisanie nazwy jednej domeny zepsuloby pozostale
   * instalacje. Plik pod ta nazwa kladzie apply-domain-branding z LOGO_LOGIN.
   *
   * ⛔ OGRANICZENIE, ktore trzeba znac: przy KILKU domenach na jednym hoscie ta nazwa
   * pomiesci tylko JEDNO logo — ostatnia nalozona domena wygrywa. Dla hostow
   * jednodomenowych (elsta.tech, dynamiczny.net) jest to poprawne; dla wielodomenowego
   * wlasciwa droga jest inna: podstawianie adresu przez awid-login.js z branding.json.
   *
   * `!important` jest konieczny — skin ustawia wlasne `background-image` w regule
   * o wyzszej specyficznosci. Bez tego zmiana nie ma zadnego efektu, a wyglada
   * na nalozona. */
  background-image: url("/public/awid/login-card-logo.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  /* 1.43 = 1.3 (pierwsze podejscie) + 10% (ocena na zywo 2026-08-12).
   * Skin daje pudelko 260x34; przy tym mnozniku logo rysuje sie jako ~372x49.
   * Obrazek pochodzi z brandingu domeny i ma `background-size: contain`,
   * wiec powiekszenie NIE traci ostrosci — skalowany jest plik zrodlowy,
   * a nie maly baner skina. */
  transform: scale(1.43);
  transform-origin: left center;
}
/* NA TELEFONIE 1.43 NIE MIESCI SIE NA EKRANIE.
 * Mnoznik dobrano na desktopie i nikt nie sprawdzil waskiego ekranu. Pomiar
 * z 2026-08-13 (Pixel 5, 393 px): prawa krawedz znaku ladowala na 418 px,
 * czyli logo bylo PRZYCINANE o ~25 px. Strona sie nie przewijala w poziomie,
 * wiec objaw nie rzucal sie w oczy — nadmiar byl po prostu ucinany.
 * Wykryl to test `logo miesci sie w szerokosci ekranu`, nie oko.
 *
 * 1.20 daje prawa krawedz ~356 px przy 393 px szerokosci, czyli zapas ~37 px
 * takze dla wezszych ekranow (360 px: ~330 px). Prog 480 px obejmuje wszystkie
 * telefony w orientacji pionowej, nie dotyka tabletow ani desktopu. */
@media (max-width: 480px) {
  .ImgLoginBanner {
    transform: scale(1.2);
  }
}
/* To samo dla kontenerow, ktore moga niesc wlasne tlo lub cien pod karta. */
.modernCenter,
#modifiedLogin .decor1,
#modifiedLogin .decor2 {
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
 * 8. EKRAN 2FA — na ciemnej karcie domyslne kolory sa nieczytelne.
 * Klasy z login.jsp:581-643 (twoFactorTitle/Description, tfaMethodLabel,
 * twoFactorAuthCodeLabel) oraz przyciski Zweryfikuj / Anuluj / Dalej / Wstecz.
 * ============================================================ */
.twoFactorTitle {
  color: #ffffff !important;
  font-weight: 600;
}
.twoFactorDescription,
.twoFactorAuthCodeLabel,
.tfaMethodLabel,
.zLoginFieldLabel,
.twoFactorForm label {
  color: var(--awid-text-muted, #cdd8e8) !important;
}
.twoFactorForm input[type="text"] {
  color: #16202e !important;
  background: #fff !important;
}
/* Przyciski drugoplanowe (Anuluj/Wstecz) gubily sie w tle — dajemy im obrys i kontrast */
#cancelButton, #backButton,
.twoFactorForm .loginButton:not(#verifyButton):not(#nextButton) {
  color: var(--awid-text-color, #eef3fa) !important;
  background: transparent !important;
  border: 1px solid rgba(238, 243, 250, .45) !important;
}
#cancelButton:hover, #backButton:hover {
  background: rgba(238, 243, 250, .12) !important;
}

/* 5. SZARY PAS pod formularzem — usuwany.
 * Zrodlo: css/login.css -> .versionBlock { background:#eee; margin:0 -40px -40px }
 * Nasz blok jezykowy dziedziczy te klase, wiec nadpisujemy punktowo, zachowujac
 * geometrie (ujemne marginesy rozciagaja pas na cala szerokosc karty). */
/* Bez wlasnej kreski — nad blokiem jest juz <hr/> z login.jsp:846 i to on zostaje.
 * Pierwsza wersja dokladala border-top, przez co byly DWIE linie jedna pod druga. */
/* MARGINESY: .versionBlock ma w css/login.css `margin: 0 -40px -40px`, czyli celowo
 * WYSTAJE poza padding karty, zeby szary pas siegal jej krawedzi. Skoro pas usuwamy,
 * te ujemne marginesy trzeba wyzerowac — inaczej flagi i nota wypadaja 40 px PONIZEJ
 * karty, na tlo strony (tak wygladalo pierwsze wdrozenie). */
.awidLangBlock {
  background: transparent !important;
  border-top: 0 !important;
  margin: 0 !important;
  padding: 12px 0 6px !important;
}

/* ============================================================
 * 9. NOTA PRAWNA — ZOSTAJE NA DOLE STRONY, wysrodkowana, jak w oryginale.
 * Pierwsza wersja przenosila ja na karte — wygladalo to gorzej i user to odrzucil.
 * Zmieniamy WYLACZNIE kolor: przygaszamy, zeby nie konkurowala z formularzem.
 * LICENCJA (CPAL 1.0): tresc pozostaje nietknieta i widoczna — zmiana dotyczy
 * samej jasnosci tekstu, nie jego obecnosci ani brzmienia.
 * ============================================================ */
#ZLoginNotice,
.Footer .legalNotice-small {
  /* Alfa .38 dawala kontrast ~2,7:1 nad gradientem — ponizej WCAG AA (4,5:1) i slaba
     pozycja przy sporze o CPAL ("reasonably calculated to inform"). .70 to nadal
     wyraznie przygaszony tekst, ale czytelny i obronny. Audyt 2026-08-03, Agent 2. */
  color: rgba(238, 243, 250, .70) !important;
  text-align: center;
}

/* 6. KOLORYSTYKA TEKSTU — JASNA, bo karta jest ciemna.
 * Wersja z granatem #012e67 dzialala, dopoki wypelnienie bylo biale. Po zmianie
 * na kolor tla granat na granacie jest nieczytelny, wiec tekst idzie w biel.
 * Pola formularza zostaja jasne (wpisywany tekst musi byc czarny na bialym),
 * a przycisk ma wlasne wypelnienie. */
.modernContentBox,
.modernContentBox .signIn,
.modernContentBox label,
.modernContentBox .loginSection,
.modernContentBox a {
  color: var(--awid-text-color, #eef3fa) !important;
}
.modernContentBox input[type="text"],
.modernContentBox input[type="password"] {
  color: #16202e !important;
}
.modernContentBox input[type="submit"],
.modernContentBox button {
  color: #fff !important;
}

/* 7. "Pokaz/Ukryj" haslo -> PIKTOGRAM OKA.
 * login.jsp:718-719 to <span id="showSpan"> / <span id="hideSpan"> z tekstem.
 * Tekst chowamy przez font-size:0, ikone wstawiamy jako tlo (data URI — CSP
 * blokuje zasoby z innych hostow, wiec nie linkujemy zadnych plikow). */
.passwordWrapper #showSpan,
.passwordWrapper #hideSpan {
  font-size: 0 !important;
  width: 22px;
  height: 22px;
  top: 7px !important;
  right: 10px !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  opacity: .55;
  transition: opacity .15s;
}
.passwordWrapper #showSpan:hover,
.passwordWrapper #hideSpan:hover,
.passwordWrapper #showSpan:focus,
.passwordWrapper #hideSpan:focus {
  opacity: 1;
}
.passwordWrapper #showSpan {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23012e67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.passwordWrapper #hideSpan {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23012e67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E");
}

/* ============================================================
 * KOLOR AKCENTU Z BRANDINGU DOMENY (2026-08-16)
 *
 * Przycisk logowania mial kolor domyslny Zimbry (blekit), co przy pomaranczowym
 * tle Elstej wygladalo jak element z innej strony. Wartosc bierze sie z `COLOR_FG`
 * w pliku .conf domeny, przechodzi przez branding.json i jest ustawiana przez
 * awid-login.js jako `--awid-accent` na <html>.
 *
 * DLACZEGO ZMIENNA, A NIE WPISANY KOLOR: ten arkusz jest WSPOLNY dla wszystkich
 * brandingow. Granat Elstej wpisany tutaj pomalowal by przycisk takze na
 * dynamiczny.net. `var(--awid-accent, ...)` daje wartosc domyslna, wiec instalacje
 * bez tego pola w branding.json zachowuja sie jak dotad.
 * ============================================================ */
.modernContentBox input[type="submit"],
.modernContentBox button,
.modernContentBox .loginButton,
#loginButton {
  background-color: var(--awid-accent, #0088cc) !important;
  border-color: var(--awid-accent, #0088cc) !important;
  color: #ffffff !important;
}
.modernContentBox input[type="submit"]:hover,
.modernContentBox button:hover,
.modernContentBox .loginButton:hover,
#loginButton:hover {
  filter: brightness(1.18);
}

/* ============================================================
 * PRZESUNIECIE KARTY LOGOWANIA (2026-08-16)
 *
 * Skin srodkuje karte w oknie. Gdy tapeta niesie wlasna kompozycje (mapa, znak
 * w rogu), wysrodkowana karta potrafi zaslonic to, co ma byc widoczne — na
 * mail.elsta.tech siedziala dokladnie na srodku mapy.
 *
 * Wartosci ida z `CARD_OFFSET` w pliku .conf domeny przez branding.json; arkusz
 * jest WSPOLNY, wiec przesuniecie wpisane tutaj przesunelo by karte takze na
 * pozostalych instalacjach. Brak wartosci = 0, czyli zachowanie jak dotad.
 *
 * JEDNOSTKI WIDOKU (vw/vh), nie piksele: karta ma trzymac te sama pozycje
 * WZGLEDEM tapety, ktora tez skaluje sie z oknem. W pikselach rozjechala by sie
 * przy kazdej innej rozdzielczosci.
 *
 * `transform`, a nie margin/position: nie rusza ukladu, wiec nic sie nie przesuwa
 * poza sama karta i nie ma ryzyka, ze stopka z nota CPAL zmieni miejsce.
 * ============================================================ */
/* ⛔ SELEKTOR MUSI BIC SKIN NA SPECYFICZNOSCI — TO BYLA PRZYCZYNA (2026-08-16).
 * Skin ma `.LoginScreen .modernContentBox { transform: translateY(-50%) }`, czyli
 * specyficznosc 0,2,0. Nasza `.modernContentBox` ma 0,1,0 i PRZEGRYWALA — przez
 * dziesiec wersji przeksztalcenie nie nakladalo sie ANI RAZU, a zmienne CSS byly
 * poprawnie ustawiane. Zaden zrzut ekranu tego nie pokazywal: pokazywal skutek,
 * ktorego nie dalo sie osiagnac. Rozstrzygnal dopiero odczyt `getComputedStyle`
 * (matrix(1,0,0,1,0,-197) = translateY(-50%) skina) i CSSOM.
 *
 * `translateY(-50%)` MUSI zostac PIERWSZE — to nim skin centruje karte w pionie.
 * Nasze przesuniecie dokladamy PO nim, w tym samym lancuchu przeksztalcen. */
.LoginScreen .modernContentBox,
#modifiedLogin .modernContentBox {
  /* ⛔ WSZYSTKO W PIKSELACH CSS — TO JEST SEDNO (2026-08-16, po nocy iteracji).
   * Powiekszenie przegladarki skaluje PIKSELE CSS, wiec elementy podane w px skaluja
   * sie RAZEM. Tlo mielismy w jednostkach OKNA (background-size: contain/cover), a te
   * przy oddalaniu widoku ROSNA — okno w pikselach CSS robi sie wieksze, wiec tapeta
   * byla rozdmuchiwana, a karta zostawala. Przy 95% skale przypadkiem sie pokrywaly
   * i wygladalo poprawnie; przy 25% karta byla czterokrotnie za mala wzgledem tla.
   * Teraz tlo ma rozmiar NATURALNY (BG_SIZE="auto" = 1920x1080 px CSS), a przesuniecie
   * karty jest w PIKSELACH tego samego ukladu wspolrzednych co zrodlowy SVG.
   * Zadnego scale() — kompozycja skaluje sie w calosci, bo cala jest w px. */
  /* ⛔ PRZEKSZTALCENIE NA KARCIE, NIE NA `.modernCenter` (2026-08-16).
   * `.modernCenter` ma rozmiar CALEGO OKNA. Przeskalowany 2,5x stawal sie pudelkiem
   * 12190x10852 px, ktore tworzy OBSZAR PRZEWIJANIA — i rolka przewijala strone
   * razem z formularzem. Objaw user opisal jako "rolka skaluje karte logowania",
   * bo karta jechala po ekranie przy kazdym ruchu rolki.
   * `.modernContentBox` to sama karta, wiec przeskalowana nie generuje overflow. */
  /* Przesuniecie ORAZ skala — oba z tego samego wspolczynnika co tapeta.
   * Dzieki temu rolka z Ctrl nie zmienia kompozycji: powiekszenie zmienia rozmiar
   * piksela CSS, a okno mierzone w px CSS rosnie odwrotnie proporcjonalnie, wiec
   * iloczyn jest staly i karta zachowuje polozenie oraz wielkosc wzgledem tla.
   * Przeksztalcenie MUSI byc na `.modernContentBox` (sama karta) — na kontenerze
   * wielkosci okna tworzylo obszar przewijania. */
  /* ⛔ POLOZENIE BAZOWE NIE MOZE ZALEZEC OD SRODKOWANIA TEKSTEM (2026-08-16).
     Skin srodkuje karte przez `text-align:center` na `.modernCenter`. Gdy widok jest
     WEZSZY od karty (380 px) — przy powiekszeniu 500% widok ma 291 px — przegladarka
     przestaje ja srodkowac i `offsetLeft` skacze z -44 na 0. Punkt odniesienia calej
     kompozycji przesuwa sie wtedy o 45 px i karta laduje gdzie indziej na grafice,
     mimo poprawnie policzonych `dx`/`sk`. Zmierzone: przy 500% srodek karty wypadal
     na plotnie w x=507 zamiast 214.
     `position:absolute; left:50%` + `translate(-50%,-50%)` daja punkt bazowy liczony
     wprost z szerokosci kontenera, wiec niezalezny od zawartosci i od tego, czy sie
     miesci. Przy okazji karta wypada z ukladu, wiec jej NIEskalowane pudelko przestaje
     tworzyc obszar przewijania (to byl ten "pasek po prawej na dole"). */
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%)
             translate(var(--awid-card-dx, 0), var(--awid-card-dy, 0))
             scale(var(--awid-card-scale, 1));
  transform-origin: center center;
}
/* NA WASKIM EKRANIE PRZESUNIECIE JEST WYLACZONE.
 * Przy 393 px szerokosci translate(17vw, …) wypycha karte poza kadr, a strona
 * nie przewija sie w poziomie — formularz stalby sie NIEDOSTEPNY. To ta sama
 * klasa bledu co skala logo 1.43 dobrana na desktopie (poprawka z 2026-08-13):
 * wartosc dobrana na duzym ekranie, nikt nie sprawdzil malego. */
/* ⛔ REGULY MOBILNEJ TU NIE MA — I TO JEST CELOWE (2026-08-16, zmierzone).
 * Byl tu `@media (max-width: 900px) { transform: translateY(-50%) }`, zeby na waskim
 * ekranie karta nie wyszla poza kadr. Prog lapal jednak nie tylko telefony:
 * POWIEKSZENIE PRZEGLADARKI tez zmniejsza okno w pikselach CSS. Przy 150% okno
 * 1217 px staje sie 811 px CSS — regula wchodzila, wylaczala CALE przeksztalcenie
 * (takze SKALE), i karta skakala z 382 na 570 px na ekranie. Zmierzone:
 *     zoom  50/75/100/133%  -> karta 382 px (stabilnie)
 *     zoom  150%            -> 570 px      <- skok
 *     zoom  200%            -> 760 px
 * Dla CSS "waski ekran" i "powiekszony widok" wygladaja IDENTYCZNIE, wiec progiem
 * szerokosci nie da sie ich rozroznic. Przed wyjsciem poza kadr chroni teraz
 * OGRANICZNIK w awid-login.js, ktory liczy realne wymiary karty i przy braku
 * miejsca ustawia przesuniecie na zero. To dziala w obu przypadkach naraz. */

/* ============================================================
 * NOTA CPAL SKALOWANA RAZEM Z KOMPOZYCJA (2026-08-16)
 *
 * Karta jest kompensowana wspolczynnikiem tapety, wiec jej rozmiar na ekranie nie
 * zmienia sie przy Ctrl+rolce. Nota copyright NIE byla — to zwykly tekst w pikselach
 * CSS, wiec przy powiekszeniu rosla, a tlo i karta stały. Uzytkownik widzi wtedy
 * "cos sie skaluje" i naturalnie przypisuje to karcie, bo nota jest maly, szary tekst.
 *
 * Obejmujemy ja TYM SAMYM wspolczynnikiem — wtedy caly ekran logowania zachowuje
 * proporcje niezaleznie od powiekszenia, a zmienia sie tylko z ROZDZIELCZOSCIA OKNA.
 *
 * `transform-origin: bottom center` — nota jest przyklejona do dolu, wiec skalowanie
 * wzgledem srodka odsunelo by ja od krawedzi. Punkt zaczepienia u dolu trzyma ja
 * na miejscu.
 *
 * ⛔ NOTY NIE WOLNO UKRYC ANI ZMNIEJSZYC DO NIECZYTELNOSCI — to wymog licencyjny
 * CPAL 1.0. Podloge skali daje `NOTA_SKALA_MIN` (0.91) w awid-login.js, a bramka
 * w patch-login-assets odrzuca arkusz probujacy ja schowac.
 * (Wczesniej stalo tu odwolanie do `SKALA_MIN`, ktorego w kodzie NIE BYLO —
 *  arkusz powolywal sie na zabezpieczenie istniejace wylacznie w komentarzu.)
 * ============================================================ */
.LoginScreen .Footer,
#modifiedLogin .Footer {
  /* ⛔ STALA SZEROKOSC PROJEKTOWA, NIE PROCENT OKNA (2026-08-16, zglosil user).
   * Stopka mial szerokosc 100% okna, a okno mierzone w pikselach CSS ZMIENIA SIE
   * z powiekszeniem przegladarki. Skutek: ta sama nota zawijala sie na JEDNA linie
   * przy 100%, DWIE przy 150% i TRZY przy 200% — a rosnace pudelko wypychalo uklad
   * i karta wyjezdzala poza kadr. Rozmiar liter byl przy tym staly, wiec objaw
   * wygladal na "skalowanie", choc byl zmiana LAMANIA TEKSTU.
   * 1920 px to szerokosc plotna projektowego (g2.svg) — ta sama, w ktorej liczone
   * jest przesuniecie karty. Tekst lamie sie wiec zawsze tak samo, a calosc skaluje
   * sie jednym wspolczynnikiem razem z tapeta i karta. */
  /* ⛔ `min(...)`, NIE STALE 1920 px (2026-08-16, audyt GUI — zmierzone `Range`).
   * Stala szerokosc daje jednakowe lamanie na szerokich oknach, ale przy widoku
   * 390 px tekst noty siegal od -64 do 454 px, czyli byl UCINANY z obu stron
   * w polowie zdania. Atrybucja CPAL musi byc czytelna w CALOSCI. */
  width: min(1920px, 100vw - 16px);
  left: 50%;
  margin-left: calc(-1 * min(960px, 50vw - 8px));
  right: auto;
  transform: scale(var(--awid-nota-scale, var(--awid-card-scale, 1)));
  transform-origin: bottom center;
}

/* ⛔ KOLOR NOTY CPAL — Z BRANDINGU, NIE STALY (audyt TEAM-3, B4).
 * Wartosc jasna (rgba(238,243,250,.70)) byla dobrana pod GRANAT: kontrast 8.62:1.
 * Po odwroceniu palety na elsta.tech tlo jest POMARANCZOWE i ta sama wartosc daje
 * 1.87:1 — ponizej progu AA (4.5:1), a nawet ponizej 3:1. Uzasadnienie zostalo stare,
 * paleta sie zmienila. Nota jest wymogiem CPAL 1.0, wiec to nie jest kwestia gustu.
 * Wartosc podaje `NOTE_COLOR` w .conf; brak = zachowanie jak dotad. */
#ZLoginNotice,
.Footer .legalNotice-small {
  color: var(--awid-nota-color, rgba(238, 243, 250, .70)) !important;
}

/* ============================================================================
   UKLAD ZAPASOWY — maly widok (telefon albo mocne powiekszenie przegladarki)
   ============================================================================
   ⛔ TU KOMPOZYCJA JUZ NIE OBOWIAZUJE i to jest decyzja, nie ustepstwo.
   Karta ma stale 380 px szerokosci i ~370 px wysokosci. Gdy widok jest mniejszy —
   a przy powiekszeniu 500% ma 291x186 px CSS — zadne przesuniecie ani skalowanie
   nie sprawi, ze kompozycja z projektu bedzie mozliwa. Proba jej utrzymania konczy
   sie formularzem uciekajacym poza kadr, do ktorego przy `overflow:hidden` NIE DA
   SIE dojechac: uzytkownik widzi sprawna strone i nie moze sie zalogowac.
   Dlatego ponizej progu przechodzimy na uklad zwykly: karta w naturalnym rozmiarze,
   srodkowana poziomo, strona przewijalna w pionie. Tapeta zostaje jako tlo.
   Znacznik `.awid-zapasowy` ustawia awid-login.js — patrz tam po progi i pomiary. */
html.awid-zapasowy, html.awid-zapasowy body { overflow-y: auto !important; }
html.awid-zapasowy #modifiedLogin.LoginScreen, html.awid-zapasowy .LoginScreen {
  overflow-y: auto !important;
  min-height: 100%;
  height: auto !important;
}
html.awid-zapasowy .modernCenter {
  position: static !important;
  top: auto !important;
  padding: 16px 0 8px;
}
html.awid-zapasowy .LoginScreen .modernContentBox,
html.awid-zapasowy #modifiedLogin .modernContentBox {
  position: static !important;         /* z powrotem do ukladu, zeby strona sie przewijala */
  left: auto !important;
  transform: none !important;          /* takze translateY(-50%) skina */
  margin: 0 auto;
  max-width: calc(100vw - 24px);
}
/* ============================================================================
 * STRONA JEST JASNA I MA TAKA ZOSTAC (2026-08-21)
 *
 * Chromium na Androidzie ma "automatyczny ciemny motyw", ktory PRZEMALOWUJE strony
 * nieodeklarowane jako jasne. Zmierzone na telefonie usera: pomaranczowy branding
 * Elstej zamienil sie w ciemna czerwien, a karta w bordo — uklad byl poprawny,
 * kolory nie nasze.
 *
 * `color-scheme: only light` mowi przegladarce, ze strona ma wlasna palete i nie
 * zyczy sobie przeliczania. Dziala takze na `prefers-color-scheme` w systemie.
 * ⛔ To NIE jest kosmetyka: przemalowany branding wyglada jak zepsute wdrozenie,
 * a uzytkownik nie ma jak stwierdzic, ze to jego przegladarka.
 * ============================================================================ */
:root,
html,
body {
  color-scheme: only light;
}

/* ============================================================================
 * UKLAD ZAPASOWY — WARSTWA WIZUALNA (2026-08-20)
 *
 * Powyzej ustawiony jest UKLAD (pozycja, przewijanie). Brakowalo WYGLADU: karta
 * nie miala zadnej powierzchni, wiec formularz stal wprost na tapecie. Zmierzone
 * na `mail.elsta.tech` przy 390x844 — pola wejsciowe ladowaly na mapie swiata,
 * a flagi jezykow na znaku firmowym. Kontrolki byly klikalne (sprawdzone
 * `elementFromPoint`), wiec to nie blokowalo logowania — ale wygladalo na wdrozenie
 * nieskonczone, a nota CPAL byla nieczytelna.
 *
 * ⛔ STERUJEMY KLASA `.awid-zapasowy`, NIE `@media`. Progiem szerokosci nie da sie
 * odroznic telefonu od POWIEKSZONEGO WIDOKU (lekcja z 16.08: przy 150% okno 1217 px
 * ma 811 px CSS). Klasa pochodzi z pomiaru realnych wymiarow w awid-login.js,
 * wiec obejmuje oba przypadki naraz — i w obu ten uklad jest wlasciwy.
 * ============================================================================ */

/* 1. TAPETA ZNIKA. Przy `background-size: contain` na waskim i wysokim ekranie
 *    grafika renderuje sie jako PAS PRZEZ SRODEK — dokladnie tam, gdzie stoi
 *    formularz. Gradient zostaje, wiec kolor marki jest zachowany. Hosty bez
 *    tapety (dynamiczny.net) ta regula nie dotyczy — nie maja czego chowac. */
/* ⛔ TAPETE ZDEJMUJE JS, NIE TA REGULA. `background-image: none` kasuje TAKZE
 * gradient, bo `linear-gradient()` jest w CSS obrazem tla — sprawdzone podgladem
 * 2026-08-20: tlo robilo sie granatowe (wartosc domyslna) zamiast pomaranczowego.
 * awid-login.js ma obie wartosci osobno i zdejmuje sam obrazek. */

/* 2. KARTA DOSTAJE POWIERZCHNIE. Ciemna, poluprzezroczysta — dziala na obu
 *    paletach: na pomaranczu przyciemnia, na granacie poglebia. Tekst na karcie
 *    jest bialy (`--awid-text-color`), wiec panel MUSI byc ciemniejszy od tla,
 *    a nie jasniejszy. */
html.awid-zapasowy .LoginScreen .modernContentBox,
html.awid-zapasowy #modifiedLogin .modernContentBox {
  width: auto !important;
  max-width: 360px !important;
  box-sizing: border-box;
  padding: 22px 20px 18px !important;
  /* ⛔ GRANAT Z PALETY, NIE CZARNA PRZEZROCZYSTOSC (2026-08-21). Czern na pomaranczu
   * daje BRUNAT — user opisal to jako "powalone kolory". Granat #152f4e jest u Elstej
   * kolorem interfejsu, wiec karta wyglada na zamierzona, a nie przybrudzona.
   * Na hostach z ciemnym tlem (dynamiczny.net) roznica jest nieodczuwalna. */
  /* ⛔ PELNY KOLOR, NIE PRZEZROCZYSTOSC (2026-08-21, po podgladzie w pikselach).
   * Granat przy 62% miesza sie z pomaranczem do rgb(104,77,48) — czyli brunatu,
   * ktory user slusznie nazwal "powalonymi kolorami". W ukladzie zapasowym tapeta
   * i tak jest zdejmowana, wiec przezroczystosc niczego nie kupuje, a wynik zalezy
   * od koloru tla kazdego hosta z osobna. Pelny kolor jest przewidywalny wszedzie. */
  background: var(--awid-accent, #152f4e) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 2b. ZNAK NA KARCIE — w ukladzie zapasowym tapeta znika, a razem z nia CALE
 *     logo firmowe. Ekran zostawal wtedy sam kolor, bez identyfikacji. Zasob
 *     `login-card-logo.png` jest instalowany zawsze przez apply-domain-branding
 *     (stala nazwa, wspolna dla wszystkich brandingow), wiec mozna go tu pokazac
 *     takze na hostach z CARD_LOGO="no" — tam znak byl wylaczony WYLACZNIE
 *     dlatego, ze niosla go tapeta.
 *     ⛔ Gdyby pliku nie bylo, `<span>` z tlem po prostu nie pokaze nic i zostanie
 *     pusty odstep 26 px — nie ma ryzyka zepsucia ukladu. */
html.awid-zapasowy .ImgLoginBanner {
  display: block !important;
  width: 100% !important;
  max-width: 240px;
  height: 38px !important;
  margin: 0 auto 16px !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  transform: none !important;          /* kasuje scale(1.2) z reguly telefonowej */
}

/* 2c. ODSTEP OD GORNEJ KRAWEDZI — karta przyklejona do gory wyglada na uciete
 *     okno. `vh` zamiast px, zeby na niskich ekranach nie zjadalo miejsca. */
html.awid-zapasowy .modernCenter {
  padding-top: 6vh !important;
}

/* 2d. PRZYCISK WYSYLKI — na karcie w kolorze akcentu ginal, bo sam byl w tym samym
 *     kolorze (zmierzone na podgladzie 2026-08-21: granat na granacie, przycisk
 *     niewidoczny, choc klikalny). Bialy z ciemnym napisem daje kontrast niezaleznie
 *     od palety hosta i jasno pokazuje, ktore dzialanie jest glowne. */
/* ⛔ IDENTYFIKATOR W SELEKTORZE JEST KONIECZNY: skin stylizuje przycisk przez
 * `#loginButton`, czyli specyficznosc 1,0,1 — a to bije lancuch klas nawet przy
 * `!important` po obu stronach. Bez tego regula sie NIE NAKLADA, co widac bylo
 * na podgladzie: napis bez tla. Ta sama lekcja co przy karcie 16.08. */
html.awid-zapasowy #loginButton,
html.awid-zapasowy .modernContentBox input[type="submit"],
html.awid-zapasowy .modernContentBox button,
html.awid-zapasowy .modernContentBox .loginButton {
  background: #ffffff !important;
  color: var(--awid-accent, #152f4e) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
}
html.awid-zapasowy #loginButton:hover,
html.awid-zapasowy .modernContentBox input[type="submit"]:hover,
html.awid-zapasowy .modernContentBox button:hover,
html.awid-zapasowy .modernContentBox .loginButton:hover {
  background: #f2f5f9 !important;
}

/* 3. POLA NA PELNA SZEROKOSC KARTY — inaczej skin zostawia je waskie i przyklejone
 *    do lewej, co przy panelu wyglada na blad ukladu. */
html.awid-zapasowy .modernContentBox input[type="text"],
html.awid-zapasowy .modernContentBox input[type="password"] {
  width: 100% !important;
  box-sizing: border-box;
}

/* 4. NOTA CPAL — na pomaranczowym tle traci kontrast. Ustawiamy kolor z brandingu
 *    i lekki cien, zeby byla czytelna niezaleznie od jasnosci tla.
 *    ⛔ Nota jest wymogiem LICENCYJNYM (CPAL) — nie wolno jej ukrywac ani zlewac
 *    z tlem. Nasze testy pilnuja jej widocznosci i krycia. */
html.awid-zapasowy .LoginScreen .Footer,
html.awid-zapasowy #modifiedLogin .Footer,
html.awid-zapasowy .LoginScreen .Footer * ,
html.awid-zapasowy #modifiedLogin .Footer * {
  color: var(--awid-nota-color, #ffffff) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html.awid-zapasowy .LoginScreen .Footer, html.awid-zapasowy #modifiedLogin .Footer {
  position: static !important;
  width: auto !important;
  margin: 12px 8px 8px !important;
  transform: none !important;
}