/* Strony konta: logowanie, rejestracja, reset hasła, potwierdzenia.

   ŻADNEJ WARTOŚCI KOLORU — wyłącznie var(--kwl-*) (reguła A12, ADR-020). Ten arkusz
   dokłada wyłącznie układ; kolory, kroje i odstępy przychodzą z theme.css, tego samego,
   którego używa panel i aplikacja mobilna.

   Leży w Kwl.Ui.Web/wwwroot, a nie w module Identity, z jednego powodu: ten projekt ma
   StaticWebAssetBasePath ustawiony na korzeń, więc arkusz jest pod /account.css.
   Robienie z modułu domenowego biblioteki zasobów statycznych kosztowałoby więcej
   niż ta jedna linijka wyjaśnienia. */

.kwl-account {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* Wcięcia systemowe: logowanie idzie w PRZEGLĄDARCE SYSTEMOWEJ telefonu (ADR-006),
       więc pasek adresu i wskaźnik gestów są tu realnym problemem, nie hipotetycznym. */
    padding: var(--kwl-space-5);
    padding-top: calc(var(--kwl-space-5) + env(safe-area-inset-top));
    padding-bottom: calc(var(--kwl-space-5) + env(safe-area-inset-bottom));
    background: var(--kwl-bg);
}

.kwl-account__card {
    width: 100%;
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    gap: var(--kwl-space-4);
    padding: var(--kwl-space-6);
    background: var(--kwl-surface);
    border: 1px solid var(--kwl-border);
    border-radius: var(--kwl-radius-lg);
    box-shadow: var(--kwl-shadow-2);
}

.kwl-account__brand {
    display: flex;
    align-items: center;
    gap: var(--kwl-space-2);
    color: var(--kwl-primary);
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
}

.kwl-account__mark {
    width: 28px;
    height: 28px;
    flex: none;
}

.kwl-account h1 {
    font-size: 24px;
    line-height: 30px;
}

.kwl-account p {
    color: var(--kwl-text-muted);
    margin: 0;
}

.kwl-account form {
    display: flex;
    flex-direction: column;
    gap: var(--kwl-space-3);
}

.kwl-account label {
    display: flex;
    flex-direction: column;
    gap: var(--kwl-space-1);
    font-size: 14px;
    font-weight: 600;
    color: var(--kwl-text-muted);
}

/* Etykieta pola wyboru leży W JEDNEJ LINII z polem — inaczej „Zapamiętaj mnie" wygląda
   jak nagłówek osamotnionego kwadratu. */
.kwl-account label.kwl-inline {
    flex-direction: row;
    align-items: center;
    gap: var(--kwl-space-2);
    font-weight: 500;
}

.kwl-account label.kwl-inline input {
    width: auto;
    min-height: auto;
}

.kwl-account input[type="email"],
.kwl-account input[type="password"],
.kwl-account input[type="text"] {
    width: 100%;
}

.kwl-account button[type="submit"] {
    width: 100%;
    margin-top: var(--kwl-space-2);
}

/* Klasa powtórzona z panel.css, bo strony konta go NIE ładują: formularz logowania
   nie ma powodu ciągnąć arkusza tabel i grafiku. Obie definicje wskazują na te same
   tokeny, więc zmiana odcienia dalej jest zmianą w jednym miejscu. */
.kwl-account .kwl-primary {
    background: var(--kwl-primary);
    color: var(--kwl-primary-on);
}

/* --- dostawcy zewnętrzni (06.09.2026) --------------------------------------
   Przycisk dostawcy ma OBRYS, a nie wypełnienie, i to nie jest kwestia gustu:
   dwa wypełnione przyciski jeden pod drugim nie mówią, który jest drogą
   domyślną. Hasło zostaje pierwsze i wypełnione, bo działa zawsze — logowanie
   przez dostawcę odpada razem z jego awarią, a wtedy trzeba widzieć drugą drogę. */

.kwl-account__separator {
    display: flex;
    align-items: center;
    gap: var(--kwl-space-3);
    font-size: 13px;
}

/* Kreski po obu stronach słowa. Sam wyśrodkowany napis czyta się jak zdanie
   o niczym; kreski mówią, że to granica między dwiema drogami. */
.kwl-account__separator::before,
.kwl-account__separator::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--kwl-border);
}

/* Formularz dostawcy niesie same pola ukryte, więc przycisk nie ma się od czego
   odsunąć — a `button[type="submit"]` wyżej dokłada górny margines liczony dla
   formularza z polami. */
.kwl-account__provider button[type="submit"] {
    margin-top: 0;
    background: transparent;
    color: var(--kwl-text);
    border: 1px solid var(--kwl-border);
}

/* --- komunikaty ------------------------------------------------------------
   Kolor jest WZMOCNIENIEM, nie nośnikiem: nośnikiem jest tekst i rola alert.
   Przy zaburzeniu rozróżniania barw czerwona i zielona ramka to ta sama ramka,
   więc każdy komunikat niesie też znak. */

.kwl-account [role="alert"],
.kwl-account .validation-summary-errors {
    display: flex;
    align-items: flex-start;
    gap: var(--kwl-space-2);
    padding: var(--kwl-space-3);
    border-radius: var(--kwl-radius-md);
    border: 2px solid var(--kwl-danger);
    background: var(--kwl-surface-sunken);
    color: var(--kwl-text);
    font-weight: 600;
}

.kwl-account [role="alert"]::before,
.kwl-account .validation-summary-errors::before {
    content: "⚠";
    flex: none;
}

/* Pusta lista błędów walidacji renderuje się zawsze; bez tego każda strona
   zaczyna się od pustej czerwonej ramki. */
.kwl-account .validation-summary-valid,
.kwl-account [role="alert"]:empty {
    display: none;
}

.kwl-account .validation-summary-errors ul {
    margin: 0;
    padding-left: var(--kwl-space-4);
}

/* Błąd przy POLU, nie w oknie na środku: użytkownik ma go przeczytać w kontekście
   tego, co właśnie wpisał. */
.kwl-account .field-validation-error {
    font-size: 13px;
    font-weight: 600;
    color: var(--kwl-danger);
}

.kwl-account input.input-validation-error {
    border-color: var(--kwl-danger);
    border-width: 2px;
}

/* --- potwierdzenia ---------------------------------------------------------
   Ekran „sprawdź skrzynkę" jest końcem drogi, nie błędem. Zielona ramka byłaby
   tu ozdobą; wystarczy znak i spokojny ton. */

.kwl-account__done {
    display: flex;
    align-items: flex-start;
    gap: var(--kwl-space-2);
    padding: var(--kwl-space-3);
    border-radius: var(--kwl-radius-md);
    border: 1px solid var(--kwl-border);
    background: var(--kwl-primary-subtle);
    color: var(--kwl-text);
}

.kwl-account__done::before {
    content: "✓";
    flex: none;
    font-weight: 700;
    color: var(--kwl-success);
}

.kwl-account__links {
    display: flex;
    flex-direction: column;
    gap: var(--kwl-space-2);
    padding-top: var(--kwl-space-2);
    border-top: 1px solid var(--kwl-border);
    font-size: 14px;
}

.kwl-account__links a {
    min-height: var(--kwl-touch);
    display: inline-flex;
    align-items: center;
}

.kwl-account__hint {
    font-size: 13px;
}