/**
 * Zapisy.pro – Ekran logowania panelu + przestylowanie ekranów rdzenia
 *
 * JEDEN plik, DWIE sekcje, bo opisują jeden widok produktu i muszą zmieniać się razem:
 *
 *   A) /panel/logowanie — własny ekran wtyczki (ZP_Panel_Login). Wczytywany razem z arkuszem
 *      ramy panelu (zp-panel.css), skąd bierze klasy marki (.zp-panel-brand*) i przycisku
 *      głównego (.zp-panel-przycisk).
 *   B) wp-login.php — reset hasła i ustawienie nowego. Tam arkusza ramy NIE ma (jego reguły
 *      wiszą na klasach .zp-panel*, których na ekranie rdzenia nie ma), więc sekcja B jest
 *      samodzielna i nadpisuje rdzeniowy 'login'. Selektory są celowo o jeden element
 *      bardziej szczegółowe niż rdzeniowe (body.login #nav a vs .login #nav a) — dzięki temu
 *      nie potrzebujemy ani jednego !important.
 *
 * Kolory bierzemy z assets/shared/zp-tokens.css (uchwyt 'zp-tokens' jest zadeklarowany jako
 * zależność — bez niej wszystkie var(--zp-*) byłyby puste).
 *
 * KONTRAST — tło obu ekranów jest jasne, więc obowiązuje tu ta sama reguła co w białym pasku
 * panelu: cyan marki (--zp-accent #00c3f2) ma na bieli 2,1:1 i NIE WYSTĘPUJE ani jako pismo,
 * ani jako cienka ikona, ani jako obramowanie pola w stanie fokusu. Zmierzone pary użyte
 * w tym pliku:
 *   --zp-navy #1d1c57 na #fff .................... 15,5:1  nagłówki, etykiety, linki
 *   #fff na --zp-navy ............................ 15,5:1  przycisk główny
 *   #fff na --zp-navy-light #35347a .............. 10,9:1  przycisk pod kursorem
 *   --zp-navy-light na #fff ...................... 10,9:1  obramowanie fokusu
 *   --zp-accent-ink #05485c na #fff .............. 10,1:1  końcówka „.pro" w napisie marki
 *   --zp-text-2 #3d5068 na #fff ...................  8,3:1  opis pod nagłówkiem
 *   --zp-red #c0392b na --zp-red-soft #fdf0ee .....  5,3:1  ramka komunikatu błędu
 *   --zp-text na --zp-red-soft ....................  13,3:1 treść komunikatu błędu
 *   --zp-text-m #5b6d84 na --zp-bg #f4f6fb ........  4,9:1  stopka pod kartą
 *
 * @package ZP_Pro
 */

/* ============================================================================
   A) EKRAN /panel/logowanie
   ============================================================================ */

/* body ma także klasę 'zp-panel' (tło, typografia, kolumnowy flex z arkusza ramy), więc
   tutaj zostaje samo wyśrodkowanie karty w wolnej przestrzeni. */
.zp-login {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zp-space-5);
  padding: var(--zp-space-7) var(--zp-space-4);
}

.zp-login__karta {
  width: 100%;
  max-width: 420px;
  padding: var(--zp-space-7);
  background: var(--zp-surface);
  border: 1px solid var(--zp-border);
  border-radius: var(--zp-r-lg);
  box-shadow: var(--zp-sh);
}

.zp-login__marka {
  display: flex;
  justify-content: center;
  margin-bottom: var(--zp-space-6);
}
/* Logo dostaje więcej wysokości niż w pasku panelu (32 px): tu jest głównym elementem ekranu,
   a nie elementem paska narzędzi. */
.zp-login .zp-panel-brand__logo { max-height: 48px; }

/* KONTRAST NAPISU MARKI NA BIELI. Arkusz ramy maluje napis pod kolumnę menu (granat, cyanowa
   końcówka). Na bieli cyan miałby 2,1:1, więc końcówka idzie w przyciemniony wariant —
   dokładnie tak, jak robi to biały pasek panelu (.zp-panel-header .zp-panel-brand__akcent). */
.zp-login .zp-panel-brand { color: var(--zp-navy); justify-content: center; }
.zp-login .zp-panel-brand__akcent { color: var(--zp-accent-ink); }
.zp-login .zp-panel-brand__podpis { color: var(--zp-text-m); }
/* Znak zwinięty ('z' na cyanowym kwadracie) należy do wąskiej kolumny menu — tu nie ma go po co
   pokazywać, a arkusz ramy i tak go chowa. Reguła jest jawna, żeby zmiana w ramie tego nie
   odwróciła. */
.zp-login .zp-panel-brand__znak { display: none; }

.zp-login__tytul {
  margin: 0 0 var(--zp-space-2);
  font-size: var(--zp-fs-xl);
  font-weight: 800;
  color: var(--zp-navy);
  text-align: center;
}
.zp-login__opis {
  margin: 0 0 var(--zp-space-6);
  font-size: var(--zp-fs-sm);
  color: var(--zp-text-2);
  text-align: center;
}

/* Komunikat błędu: pasek po lewej w czerwieni, treść w kolorze tekstu. Ikony nie ma celowo —
   jedna linia tekstu z wyraźnym paskiem czyta się szybciej niż linia z symbolem. */
.zp-login__blad {
  margin: 0 0 var(--zp-space-5);
  padding: var(--zp-space-3) var(--zp-space-4);
  background: var(--zp-red-soft);
  border-left: 4px solid var(--zp-red);
  border-radius: var(--zp-r);
  color: var(--zp-text);
  font-size: var(--zp-fs-sm);
}

/* Potwierdzenie po ustawieniu hasła — ta sama forma co błąd, stan „sukces". */
.zp-login__info {
  margin: 0 0 var(--zp-space-4);
  padding: var(--zp-space-3) var(--zp-space-4);
  border-left: 4px solid var(--zp-green);
  border-radius: var(--zp-r);
  background: var(--zp-green-soft);
  color: var(--zp-text);
  font-size: var(--zp-fs-sm);
}

.zp-login__pole { margin: 0 0 var(--zp-space-5); }

.zp-login__etykieta {
  display: block;
  margin-bottom: var(--zp-space-2);
  font-size: var(--zp-fs-sm);
  font-weight: 600;
  color: var(--zp-navy);
}

.zp-login__input {
  display: block;
  width: 100%;
  height: 44px;              /* pole dotyku na telefonie; 40 px jest już za nisko */
  padding: 0 14px;
  background: var(--zp-surface);
  border: 1px solid var(--zp-border-s);
  border-radius: var(--zp-r);
  color: var(--zp-text);
  font-family: inherit;
  font-size: var(--zp-fs-md);
  line-height: 1.4;
}
.zp-login__input:focus {
  border-color: var(--zp-navy);
  /* Granat, nie cyan: obramowanie fokusu jest CIENKIE, a cyan na bieli ma 2,1:1 — czyli
     wskazanie, którego przy słabszym wzroku po prostu nie widać. */
  outline: 3px solid var(--zp-navy-light);
  outline-offset: 1px;
}

.zp-login__zapamietaj {
  display: flex;
  align-items: center;
  gap: var(--zp-space-2);
  margin: 0 0 var(--zp-space-6);
  font-size: var(--zp-fs-sm);
  color: var(--zp-text-2);
}
.zp-login__zapamietaj input { width: 18px; height: 18px; margin: 0; accent-color: var(--zp-navy); }
.zp-login__zapamietaj label { cursor: pointer; }

/* Przycisk główny dziedziczy wygląd z .zp-panel-przycisk (granat + biały napis, 15,5:1).
   Tu zostaje tylko to, czego <button> potrzebuje, a <a> nie. */
.zp-login__przycisk {
  width: 100%;
  height: 44px;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.zp-login__pomoc {
  margin: var(--zp-space-5) 0 0;
  text-align: center;
  font-size: var(--zp-fs-sm);
}
.zp-login__pomoc a { color: var(--zp-navy); font-weight: 600; }
.zp-login__pomoc a:hover { color: var(--zp-navy-light); }

.zp-login__stopka {
  margin: 0;
  font-size: var(--zp-fs-xs);
  color: var(--zp-text-m);
}
.zp-login__stopka a { color: var(--zp-text-m); }
.zp-login__stopka a:hover { color: var(--zp-navy); }

.zp-login a:focus-visible,
.zp-login button:focus-visible {
  outline: 3px solid var(--zp-navy-light);
  outline-offset: 2px;
}

/* Telefon: karta traci wcięcie i cień, bo zajmuje całą szerokość ekranu. */
@media (max-width: 480px) {
  .zp-login { padding: var(--zp-space-5) var(--zp-space-3); }
  .zp-login__karta { padding: var(--zp-space-5); box-shadow: var(--zp-sh-sm); }
}

/* ============================================================================
   B) EKRANY RDZENIA (wp-login.php): reset hasła, ustawienie nowego

   Nadpisujemy wyłącznie warstwę wizualną — żadnego ukrywania pól, komunikatów rdzenia
   ani linków nawigacyjnych. Selektory zaczynają się od body.login, żeby wygrać
   szczegółowością z rdzeniowym arkuszem 'login' bez !important.
   ============================================================================ */

body.login {
  background: var(--zp-bg);
  color: var(--zp-text);
  font-family: var(--zp-font);
}

body.login #login {
  width: 400px;
  max-width: 100%;
  padding: 48px 0 24px;
}

/* Logo: adres pliku wstawia inline ZP_Panel_Login::zasoby_rdzenia() (pochodzi z bazy).
   Gdy szkoła nie wgrała logo, tamten kod odsłania tekst nagłówka — dlatego tu NIE ma
   text-indent ani szerokości wymuszonej na sztywno. */
body.login h1 a {
  width: 100%;
  max-width: 240px;
  height: 52px;
  margin: 0 auto 24px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

body.login form {
  margin-top: 0;
  padding: var(--zp-space-7);
  background: var(--zp-surface);
  border: 1px solid var(--zp-border);
  border-radius: var(--zp-r-lg);
  box-shadow: var(--zp-sh);
}

body.login form label,
body.login form .wp-pwd label {
  color: var(--zp-navy);
  font-size: var(--zp-fs-sm);
  font-weight: 600;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
  padding: 10px 12px;
  background: var(--zp-surface);
  border: 1px solid var(--zp-border-s);
  border-radius: var(--zp-r);
  color: var(--zp-text);
  font-family: inherit;
  font-size: var(--zp-fs-md);
  box-shadow: none;
}
body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
  border-color: var(--zp-navy);
  outline: 3px solid var(--zp-navy-light);
  outline-offset: 1px;
  box-shadow: none;
}

/* Przycisk główny: granat z BIAŁYM napisem (15,5:1). Rdzeń daje tu niebieski #2271b1
   z cieniem tekstu — oba idą precz, bo panel ma jeden przycisk główny na wszystkich
   ekranach i musi wyglądać tak samo. */
body.login .wp-core-ui .button-primary,
body.login.wp-core-ui .button-primary {
  height: 40px;
  padding: 0 20px;
  background: var(--zp-navy);
  border: 0;
  border-radius: var(--zp-r);
  color: #fff;
  font-size: var(--zp-fs);
  font-weight: 700;
  text-shadow: none;
  box-shadow: none;
}
body.login .wp-core-ui .button-primary:hover,
body.login .wp-core-ui .button-primary:focus,
body.login.wp-core-ui .button-primary:hover,
body.login.wp-core-ui .button-primary:focus {
  background: var(--zp-navy-light);
  color: #fff;
  box-shadow: none;
}
body.login .wp-core-ui .button-primary:focus-visible,
body.login.wp-core-ui .button-primary:focus-visible {
  outline: 3px solid var(--zp-navy-light);
  outline-offset: 2px;
}

/* Ikona „pokaż hasło" na ekranie nowego hasła — granat, nie rdzeniowy szary. */
body.login .wp-pwd button.wp-hide-pw .dashicons { color: var(--zp-navy); }

/* Linki pod formularzem („Zaloguj się", „Powrót do…"). Rdzeń daje im #50575e (4,9:1);
   granat czyta się lepiej i to on jest kolorem linków w całym panelu. */
body.login #nav a,
body.login #backtoblog a {
  color: var(--zp-navy);
  font-weight: 600;
}
body.login #nav a:hover,
body.login #backtoblog a:hover { color: var(--zp-navy-light); }
body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible {
  outline: 3px solid var(--zp-navy-light);
  outline-offset: 2px;
}

/* Komunikaty rdzenia (np. „Sprawdź skrzynkę e-mail") w tej samej formie co karty panelu. */
body.login .message,
body.login .notice,
body.login #login_error {
  padding: var(--zp-space-3) var(--zp-space-4);
  background: var(--zp-surface);
  border-radius: var(--zp-r);
  box-shadow: var(--zp-sh-xs);
  color: var(--zp-text);
  font-size: var(--zp-fs-sm);
}
body.login .message,
body.login .notice-info { border-left: 4px solid var(--zp-navy); }
body.login #login_error,
body.login .notice-error { border-left: 4px solid var(--zp-red); background: var(--zp-red-soft); }
body.login .notice-success { border-left: 4px solid var(--zp-green); background: var(--zp-green-soft); }

/* Mierniki siły hasła zostają rdzeniowe: ich kolory są częścią komunikatu („słabe"/„mocne"),
   a nie dekoracją marki. */

body.login .privacy-policy-page-link a { color: var(--zp-navy); }

@media (max-width: 480px) {
  body.login #login { width: 100%; padding: 24px 12px; }
  body.login form { padding: var(--zp-space-5); }
}