/* 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;
}

/* 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;
}

/* 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;
  /* 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;
}
/* 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: #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: #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: #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");
}