/*
   ============================================================================
   auth.css - wyglad ekranow kont (logowanie, rejestracja, reset hasla)
   ----------------------------------------------------------------------------
   Wspolna, wysrodkowana karta z formularzem. Stylizuje tez pola formularzy
   allauth renderowane przez {{ form.as_p }}, dlatego nie trzeba dodawac klas
   do kazdego pola z osobna. Przyciski korzystaja z gotowych klas .btn ze
   styles.css. Kolory marki: granat #062a4d, Reflex Blue #0055A4, magenta #E20077.
   ============================================================================
*/

.auth-wrap {
    max-width: 460px;
    margin: 0 auto;
    padding: 56px 20px 80px;
}

.auth-card {
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    padding: 34px 30px;
    box-shadow: 0 8px 28px rgba(13, 27, 46, .07);
}

.auth-card h1 {
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: 25px;
    line-height: 1.2;
    margin: 0 0 6px;
    color: #062a4d;
    text-align: center;
}

.auth-sub {
    margin: 0 0 22px;
    color: #6b7a90;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* Pola formularza (takze z form.as_p: kazde pole opakowane w <p>) */
.auth-card form p {
    margin: 0 0 16px;
}

.auth-card label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: #0d1b2e;
}

.auth-card input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d7deea;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--blue, #0055A4);
    background: #f7f9fc;
    transition: border-color .15s, background .15s;
}

.auth-card input:not([type="checkbox"]):not([type="radio"]):focus {
    outline: none;
    border-color: #0055A4;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 85, 164, .12);
}

/* Wiersz "Pamietaj mnie": checkbox PO LEWEJ od etykiety, powiekszony ~2x */
.auth-card .auth-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px;
    font-weight: 500;
    font-size: 14px;
    color: #33445c;
    cursor: pointer;
}

.auth-card .auth-remember input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #0055A4;
    cursor: pointer;
}

/* Komunikaty bledow i podpowiedzi */
.auth-card .errorlist {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    color: #b3261e;
    font-size: 13px;
}

.auth-card .helptext,
.auth-card .form-text {
    display: block;
    margin-top: 6px;
    color: #6b7a90;
    font-size: 12px;
    line-height: 1.45;
}

/* Przycisk akcji - pelna szerokosc karty */
.auth-card .btn {
    width: 100%;
    margin-top: 6px;
}

/* Linki pod formularzem (reset hasla, zaloz konto, powrot do logowania) */
.auth-links {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #6b7a90;
}

.auth-links p {
    margin: 8px 0 0;
}

.auth-links a {
    color: #0055A4;
    text-decoration: none;
    font-weight: 600;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* Tresc informacyjna (np. "sprawdz skrzynke") */
.auth-card .auth-text {
    color: #33445c;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

.auth-card .auth-text + .auth-text {
    margin-top: 12px;
}

/* =====================================================================
   Walidacja rejestracji w czasie rzeczywistym (signup)
   ===================================================================== */
:root {
    --error-color: #b3261e;
    --warning-color: #e08e0b;
    --success-color: #1a7f37;
}

/* Stany pol po walidacji klienta */
.auth-card input.error {
    border-color: var(--error-color);
    background: #fff;
}
.auth-card input.error:focus {
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}
.auth-card input.success {
    border-color: var(--success-color);
}

/* Komunikat bledu pod polem; z klasa .ok robi sie ZIELONYM potwierdzeniem
   (np. "Hasla sa zgodne" pod powtorzeniem hasla - signup-validate.js) */
.auth-err {
    display: block;
    margin-top: 6px;
    color: var(--error-color);
    font-size: 13px;
    line-height: 1.4;
}
.auth-err.ok {
    color: var(--success-color);
    font-weight: 600;
}

/* Pole hasla z ikona pokaz/ukryj */
.pw-wrap {
    position: relative;
    display: block;
}
/* Wyzsza specyficznosc niz ogolna regula pol - robi miejsce na ikone oka */
.auth-card .pw-wrap input:not([type="checkbox"]):not([type="radio"]) {
    padding-right: 46px;
}
.pw-toggle {
    position: absolute;
    right: 8px;
    top: 24px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 6px;
    color: #6b7a90;
    cursor: pointer;
    display: inline-flex;
    line-height: 0;
}
.pw-toggle:hover { color: #0055A4; }
.pw-toggle .eye-off { display: none; }
.pw-toggle.is-shown .eye-on { display: none; }
.pw-toggle.is-shown .eye-off { display: inline; }

/* Pasek sily hasla + warunki */
.pw-feedback {
    margin-top: 12px;
}
.strength-bar {
    height: 6px;
    border-radius: 4px;
    background: #e3e9f1;
    overflow: hidden;
}
.strength-bar::after {
    content: "";
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width .2s, background .2s;
}
.strength-bar.strength-weak::after        { width: 25%;  background: var(--error-color); }
.strength-bar.strength-medium::after      { width: 55%;  background: var(--warning-color); }
.strength-bar.strength-strong::after      { width: 80%;  background: var(--success-color); }
.strength-bar.strength-very-strong::after { width: 100%; background: var(--success-color); }

.strength-text {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

.pw-conditions {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 14px;
}
.pw-conditions li {
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    color: #6b7a90;
}
.pw-conditions li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: #c2ccda;
}
.pw-conditions li.valid {
    color: var(--success-color);
}
.pw-conditions li.valid::before {
    content: "✓";
    color: var(--success-color);
}

/*
 =====================================================================
  EKRANY WERYFIKACJI DWUETAPOWEJ (2FA) - dodane 30.10.2026
 =====================================================================
  Wszystkie ekrany 2FA (kod QR, kod przy logowaniu, kody zapasowe,
  potwierdzenie haslem) korzystaja z karty `account/_auth_base.html`,
  bo to pojedyncze, skupione czynnosci - a ekran z kodem pokazuje sie
  w POLOWIE logowania, gdy nie ma jeszcze sesji ani panelu konta.
 =====================================================================
*/
.tfa2-kroki { margin:0 0 18px; padding-left:22px; font-size:14px; line-height:1.65; color:#44546a; }
.tfa2-kroki li { margin:0 0 4px; }

/* Ramka kodu QR: biale tlo jest WYMAGANE do odczytu, takze gdyby karta
   kiedys dostala ciemniejsze tlo. SVG skalujemy do szerokosci ramki. */
/* Kod QR WYSRODKOWANY. `margin-inline:auto` na samym SVG to pas zapasowy:
   SVG z biblioteki `qrcode` przychodzi z wlasnymi `width`/`height` w milimetrach,
   wiec gdyby ktoras regula flexa nie zadzialala, element i tak stanie na srodku. */
.tfa2-qr { display:flex; justify-content:center; align-items:center; padding:16px; margin:0 0 16px;
           background:#fff; border:1px solid #dfe5ec; border-radius:12px; }
.tfa2-qr svg { width:200px; height:200px; display:block; margin-inline:auto;
               /* Modulu QR nie wolno zostawiac na lasce dziedziczenia: `<path>` z
                  biblioteki nie ma atrybutu `fill`, wiec przejalby kolor z CSS,
                  gdyby ktos kiedys dodal globalna regule dla svg. */
               fill:#000; }

.tfa2-recznie { margin:0 0 20px; font-size:13.5px; color:#44546a; }
.tfa2-recznie > summary { cursor:pointer; color:#1266c7; font-weight:600; }
.tfa2-recznie p { margin:10px 0 8px; line-height:1.55; }
/* user-select:all = jedno klikniecie zaznacza caly sekret. */
.tfa2-sekret { display:block; padding:10px 12px; background:#f4f7fa; border:1px solid #dfe5ec;
               border-radius:8px; font-family:Consolas,monospace; font-size:14px;
               letter-spacing:1.5px; word-break:break-all; user-select:all; color:#0b3d66; }

/* Kody zapasowe: siatka monospace - tak sie je przepisuje i drukuje. */
.tfa2-kody { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:0 0 12px; }
.tfa2-kody code { padding:9px 10px; background:#f4f7fa; border:1px solid #dfe5ec; border-radius:8px;
                  font-family:Consolas,monospace; font-size:15px; letter-spacing:1.5px;
                  text-align:center; user-select:all; color:#0b3d66; }
.tfa2-kody-info { margin:0 0 16px; font-size:13px; color:#6b7a90; }

/* Uklad ekranu kodow zapasowych, od gory: para „zabezpiecz teraz" (pobierz +
   drukuj), potem „wygeneruj nowe" osobno, ostrzezenie, a na samym koncu przycisk
   konczacy. Kolejnosc odpowiada temu, co uzytkownik ma po kolei zrobic. */
.tfa2-akcje-glowna { margin:0 0 10px; }
.tfa2-akcje-glowna .btn { width:100%; justify-content:center; }
.tfa2-akcje-para { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:0 0 8px; }
.tfa2-akcje-szeroko { margin:0 0 18px; }
.tfa2-akcje-szeroko .btn { width:100%; }
/* Przycisk konczacy stoi POD ostrzezeniem - nie da sie go kliknac, zanim
   ostrzezenie przejdzie przez pole widzenia. */
.tfa2-akcje-koniec { margin:0 0 6px; }
.tfa2-akcje-koniec .btn { width:100%; }
.tfa2-akcje-para .btn, .tfa2-akcje-szeroko .btn, .tfa2-akcje-koniec .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding-left:10px; padding-right:10px; white-space:nowrap; }
.tfa2-akcje-para .btn svg, .tfa2-akcje-szeroko .btn svg { width:16px; height:16px; flex:none; }

/* Ostrzezenie „poza siecia" - celowo najmocniejszy blok na stronie. */
.tfa2-offline { margin:0 0 18px; padding:14px 16px; border-radius:10px;
                background:#fdf2f4; border:1px solid #e8b4be; }
.tfa2-offline b:first-child { display:block; text-transform:uppercase; letter-spacing:.03em;
                              font-size:14.5px; line-height:1.4; color:#75132a; }
.tfa2-offline span { display:block; margin-top:7px; font-size:13px; line-height:1.55; color:#8a4254; }

.tfa2-akcje { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }

.tfa2-ostrzezenie { margin:0 0 18px; padding:12px 14px; border-radius:9px; background:#fff8e6;
                    border:1px solid #e8d4a0; color:#7a5c00; font-size:13.5px; line-height:1.55; }

/* Przycisk, ktory OBNIZA bezpieczenstwo - celowo nie wyglada na domyslny wybor. */
.tfa2-btn-groznie { background:#75132a; border-color:#75132a; color:#fff; }
.tfa2-btn-groznie:hover { background:#a62741; border-color:#a62741; color:#fff; }

/* „Anuluj logowanie" jest POST-em (sprzatniecie polowy logowania), wiec musi byc
   <button>, a ma wygladac jak odnosnik obok pozostalych w .auth-links. */
.auth-link-btn { background:none; border:0; padding:0; font:inherit; color:#1266c7;
                 text-decoration:underline; cursor:pointer; }
.auth-link-btn:hover { color:#0b3d66; }

@media (max-width:420px) {
    .tfa2-kody { grid-template-columns:1fr; }
    .tfa2-qr svg { width:170px; height:170px; }
}

/*
 =====================================================================
  WYDRUK KODOW ZAPASOWYCH (@media print)
 =====================================================================
  Bez osobnego widoku: drukujemy TE SAMA strone. Na ekranie blok
  `.tfa2-druk` jest ukryty, a w druku to on niesie caly kontekst -
  logo, adres serwisu, adres konta i date. Kartka znaleziona pol roku
  pozniej w szufladzie ma mowic, do czego i do kogo nalezy; sama lista
  osmioznakowych ciagow nie mowi nic.
 =====================================================================
*/
.tfa2-druk, .tfa2-druk-stopka { display:none; }

@media print {
    /* Wszystko, co nalezy do serwisu, a nie do kartki. */
    .hdr, .ftr, .auth-links, ul.messages, .tfa2-offline, h1, .auth-sub,
    .tfa2-akcje-glowna, .tfa2-akcje-para, .tfa2-akcje-szeroko,
    .tfa2-akcje-koniec { display:none !important; }

    /* Karta bez ozdob - na papierze cien i ramka sa tylko marnowaniem tuszu. */
    body { background:#fff; }
    .auth-wrap, .auth-card { max-width:none; width:auto; margin:0; padding:0;
                             box-shadow:none; border:0; background:#fff; }
    .section { padding:0 !important; }

    .tfa2-druk { display:block; margin:0 0 18px; }
    .tfa2-druk-logo { height:38px; width:auto; margin:0 0 14px; }
    .tfa2-druk h2 { margin:0 0 12px; font-size:17pt; }
    .tfa2-druk-dane { border-collapse:collapse; font-size:10.5pt; }
    .tfa2-druk-dane th { text-align:left; padding:2px 14px 2px 0; font-weight:600;
                         color:#000; white-space:nowrap; vertical-align:top; }
    .tfa2-druk-dane td { padding:2px 0; }

    /* Kody: wieksze i w dwoch kolumnach - maja byc czytelne z kartki. */
    .tfa2-kody { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; margin:0 0 10px; }
    .tfa2-kody code { border:1px solid #999; background:#fff; color:#000;
                      font-size:13pt; letter-spacing:2px; padding:7px 8px; }
    .tfa2-kody-info { font-size:10pt; color:#000; margin:0 0 14px; }

    .tfa2-druk-stopka { display:block; margin:0; padding-top:10px;
                        border-top:1px solid #999; font-size:9.5pt; color:#000; }

    a[href]::after { content:""; }   /* bez doklejania adresow przy odnosnikach */
}

/* Lista aplikacji uwierzytelniajacych na ekranie wlaczania 2FA. Zwinieta,
   bo kto ma juz aplikacje, ten jej nie otwiera. */
.tfa2-apki { margin:0 0 18px; font-size:13.5px; color:#44546a; }
.tfa2-apki > summary { cursor:pointer; color:#1266c7; font-weight:600; list-style:none; }
.tfa2-apki > summary::-webkit-details-marker { display:none; }
.tfa2-apki > summary::before { content:"\25B8"; display:inline-block; margin-right:7px; transition:transform .15s; }
.tfa2-apki[open] > summary::before { transform:rotate(90deg); }
.tfa2-apki p { margin:10px 0; line-height:1.55; }
.tfa2-apki-lista { list-style:none; margin:10px 0; padding:0; }
.tfa2-apki-lista li { padding:8px 0; border-bottom:1px solid #eef1f5; }
.tfa2-apki-lista li:last-child { border-bottom:0; }
.tfa2-apki-lista i { display:block; margin-top:2px; font-style:normal; font-size:12.5px; color:#6b7a90; }
.tfa2-apki-uwaga { padding:10px 12px; border-radius:8px; background:#f4f7fa; border:1px solid #dfe5ec;
                   font-size:12.5px; line-height:1.55; }