/* =====================================================================
   tils — motyw logowania Keycloak (spójny z panelem admin)
   Nunito + morski primary + jasne, czyste karty.
   ===================================================================== */

/* Krój Z ZASOBÓW MOTYWU, nie z Google. Ten arkusz rysuje logowanie WEWNĄTRZ nakładki na stronie
   głównej, więc dawny `@import` z fonts.googleapis.com znaczył, że klient wysyła swoje IP do
   Google dokładnie w chwili, w której wpisuje hasło. Ścieżka jest względna wobec tego pliku
   (`…/resources/css/` → `…/resources/fonts/`). Nunito — SIL OFL 1.1, treść w `fonts/OFL.txt`.
   Wersja zmienna: jeden plik obsługuje całą oś 200–1000, a używamy 400–900.
   `latin-ext` jest konieczny na polskie znaki (ą ę ł ń ś ź ż leżą poza podzbiorem `latin`). */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paleta wzięta ze strony głównej (landing/index.html), żeby logowanie nie wyglądało jak
     inna aplikacja. Wcześniej motyw miał własne, chłodniejsze odcienie i inny krój pisma. */
  --primary:       #0d9488;
  --primary-hover: #0f766e;
  --primary-ring:  rgba(13,148,136,.24);
  --bg:            #fbf8f3;
  --surface:       #ffffff;
  --border:        #eadfce;
  --ink:           #2b2622;
  --ink-2:         #6b6156;
  /* Był #a89f92 — 2,5:1 na kremowym tle, czyli poniżej progu WCAG AA dla KAŻDEGO rozmiaru tekstu,
     a jeździł po drobnych napisach: „Nie masz konta?", podpis stopki, ikona w polu hasła.
     #756b60 to 4,9:1 na kremowym i 4,6:1 na cieplejszym tle stopki — ta sama wartość, którą po tym
     samym rachunku dostał portal (droga do niej jest opisana w landing/style.css). */
  --ink-3:         #756b60;
  --danger:        #dc4b52;
  --success:       #0f9d6b;
  --warning:       #c2820a;
  --info:          #3b7fd4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }
body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.login-pf, .login-pf body, .login-pf-page {
  background: var(--bg) !important;
  background-image: none !important;
}
.login-pf-page { display: flex; flex-direction: column; min-height: 100vh; }

/* ---- Ukryj natywny nagłówek/stopkę PatternFly ----
   `nav` i `footer` są tu jako NAZWY ZNACZNIKÓW, więc gaszą też te, które wstawia nasz skrypt —
   na tym poległ pierwszy pasek górny: plakietka „DLA BIZNESU" była, a przyciski obok niej znikały
   bez śladu w konsoli (znalezione dopiero listą widocznych elementów na wyrenderowanej stronie).
   Stąd wyłączenie naszych klas z tej reguły. */
#kc-header, .login-pf-header, .login-pf-settings, .login-pf-footer,
#kc-locale,
footer:not(.tils-foot),
nav:not(.tils-topbar__nav) { display: none !important; }

/* ---- Kontener treści ---- */
#kc-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
#kc-content-wrapper { width: 100%; max-width: 400px; }

/* ---- Karta ----
   KARTĄ JEST TYLKO FORMULARZ. Wcześniej stało tu `#kc-content-wrapper > div`, czyli „każdy div
   wprost w kontenerze" — a skrypt motywu wstawia tam podpis roli i podtytuł, więc każdy z nich
   dostawał własne białe pudełko z cieniem. Ekran logowania właściciela wyglądał jak cztery karty
   jedna pod drugą, z czego dwie niosły to samo słowo, a jedna była prawie pusta (zmierzone na
   zrzucie 2026-08-03). Dawne duże logo nad kartą (pseudoelementy ::before/::after) zniknęło
   z tego samego powodu: pasek górny ma już znak marki i nazwę. */
#kc-form,
#kc-form-login-wrapper,
#kc-content-wrapper > form,
#kc-content-wrapper > .instruction {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15,27,38,.10), 0 4px 12px rgba(15,27,38,.06);
  padding: 28px;
}
/* `.card-pf` NIE JEST kartą — jest zewnętrznym opakowaniem całej strony w szablonie Keycloaka
   (`.login-pf-page > .card-pf > #kc-content > #kc-content-wrapper`). Nadanie mu białego tła
   i cienia dawało wielki biały prostokąt o szerokości 1300 px w oknie 1280 px, w środku którego
   leżała druga, prawdziwa karta — zmierzone drzewem elementów, bo na oko wyglądało to po prostu
   jak „za dużo bieli". */
.login-pf-page .card-pf {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

/* ---- Ukryj domyślny tytuł formularza ---- */
#kc-page-title, .pf-c-title, #kc-header-wrapper { display: none; }

/* ---- Alerty ---- */
.alert, .pf-c-alert {
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
}
.alert-error, .pf-m-danger   { background: #fbebeb; border-color: rgba(220,75,82,.3);  color: var(--danger); }
.alert-warning, .pf-m-warning{ background: #fbf2dd; border-color: rgba(194,130,10,.3); color: var(--warning); }
.alert-info, .pf-m-info      { background: #e9f1fb; border-color: rgba(59,127,212,.3); color: var(--info); }
.alert-success, .pf-m-success{ background: #e7f6ef; border-color: rgba(15,157,107,.3); color: var(--success); }

/* ---- Komunikat błędu logowania (np. złe hasło) ----
   Keycloak renderuje go jako #input-error / .pf-c-form__helper-text.pf-m-error.
   Bez tego wygląda jak goły, mały tekst — stylizujemy na spójny czerwony box. */
#input-error,
.pf-c-form__helper-text.pf-m-error,
.kc-feedback-text {
  display: block;
  margin: 10px 0 0;
  padding: 10px 14px;
  background: #fbebeb;
  border: 1px solid rgba(220,75,82,.3);
  border-radius: 8px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
/* Pole z błędem — czysty input + czerwona ramka.
   background-image:none usuwa powielającą się (kafelkowaną) ikonę błędu PatternFly. */
input[aria-invalid="true"],
.pf-c-form-control.pf-m-error,
input.pf-m-error,
#username[aria-invalid="true"],
#password[aria-invalid="true"] {
  background-image: none !important;
  background-color: #fff !important;
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(220,75,82,.15) !important;
}

/* ---- Pola ---- */
.form-group, .pf-c-form__group { margin-bottom: 16px; }
label, .pf-c-form__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
input[type="text"], input[type="password"], input[type="email"], .pf-c-form-control {
  width: 100%;
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, .pf-c-form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

/* ---- Pokaż/ukryj hasło (ikona w polu) ---- */
.pf-c-input-group { display: flex; }
.pf-c-input-group .pf-c-button {
  background: transparent; border: 1px solid var(--border); border-left: none;
  border-radius: 0 8px 8px 0; color: var(--ink-3); cursor: pointer; padding: 0 12px;
}

/* ---- Checkbox „zapamiętaj mnie" ---- */
.checkbox label, .pf-c-check__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
#rememberMe, .pf-c-check__input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

/* ---- Przycisk ---- */
#kc-form-buttons, .pf-c-form__group:last-child { margin-top: 20px; }
#kc-login, .pf-c-button--primary, input[type="submit"], button[type="submit"] {
  width: 100%;
  height: 44px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
#kc-login:hover, .pf-c-button--primary:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  background: var(--primary-hover);
}

/* ---- Linki ---- */
a { color: var(--primary); text-decoration: none; font-size: 13px; font-weight: 600; }
a:hover { text-decoration: underline; }
#kc-registration, #kc-reset-password, #kc-info { text-align: center; margin-top: 16px; font-size: 13px; color: var(--ink-3); }

hr, .pf-c-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ---- Podpis pod kartą ----
   #aab4bf na kremowym tle to 2,1:1 — poniżej progu AA i to przy rozmiarze 11 px, czyli tam, gdzie
   kontrast jest najbardziej potrzebny. 12,5 px i #756b60 dają 4,9:1. */
#kc-content-wrapper > form::after,
.login-pf-page::after {
  content: "tils · bezpieczne logowanie";
  display: block;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  margin-top: 24px;
}

@media (max-width: 480px) {
  #kc-content { padding: 20px 12px; }
  #kc-form, #kc-form-login-wrapper { padding: 22px; }
}

/* =====================================================================
   Przełącznik „Klient / Biznes" i powrót na stronę główną (js/tils.js).
   Ekran logowania jest wspólny dla obu rodzajów kont, więc musi wprost
   mówić, w czyim imieniu się logujesz — i pozwalać to zmienić.
   ===================================================================== */
.tils-switch { margin: 0 0 18px; }

/* Dyskretnie: to nie jest główna akcja na tym ekranie, tylko informacja „gdzie jesteś"
   z możliwością zmiany. Pierwsza wersja miała wypełnioną kolorem pigułkę i przykuwała
   wzrok mocniej niż samo logowanie. */
.tils-switch__tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
}

.tils-switch__tab {
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.tils-switch__tab:hover { color: var(--primary, #0d9488); text-decoration: none; }
.tils-switch__tab.is-active {
  color: var(--ink-2, #475569);
  background: var(--bg, #f6f8fa);
  box-shadow: inset 0 0 0 1px var(--border, #e7ecf1);
}

.tils-switch__hint {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
  text-align: center;
}
.tils-switch__hint strong { color: var(--ink-2, #475569); font-weight: 700; }

.tils-back {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
}
.tils-back:hover { color: var(--primary, #0d9488); }

/* Nagłówek realmu jest odnośnikiem do portalu (displayNameHtml) — ma wyglądać jak marka,
   nie jak przypadkowy link. */
.tils-brand {
  color: var(--ink, #0f1b26) !important;
  font-weight: 800;
  text-decoration: none !important;
  letter-spacing: -.02em;
}
.tils-brand:hover { color: var(--primary, #0d9488) !important; }

.tils-reg { font-size: 14px; color: var(--ink-2, #6b6156); }
.tils-reg a { font-weight: 800; color: var(--primary-hover, #0f766e); }

/* Podpis nad kartą (js/tils.js): nazwa roli + jedno zdanie wyjaśniające. Zwykły tekst, NIE karta —
   to jest nagłówek ekranu, a nie druga treść do przeczytania w pudełku. */
.tils-nad { text-align: center; margin: 0 0 20px; }
.tils-nad__tytul {
  font-size: clamp(24px, 3vw, 30px); line-height: 1.15; font-weight: 900;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 6px;
}
.tils-nad__opis {
  font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink-2);
  margin: 0 auto; max-width: 34ch; text-wrap: pretty;
}


/* =====================================================================
   Nagłówek i stopka jak na stronie głównej (js/tils.js je wstawia).
   Świadomie NIE wciągamy ich z portalu przez fetch/iframe: ekran logowania
   musi się wyrenderować także wtedy, gdy kontener landingu nie działa.
   ===================================================================== */
.tils-topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251,248,243,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.tils-topbar__in {
  max-width: 1120px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.tils-brandlink { display: flex; align-items: center; gap: 10px; color: var(--ink) !important; text-decoration: none !important; }
.tils-brandlink__mark {
  /* Gradient, nie płaski kolor — dokładnie jak `.brand__mark` w portalu. Płaski prostokąt obok
     gradientowego na stronie obok czyta się jak inna aplikacja. */
  width: 34px; height: 34px; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  display: grid; place-items: center; font-weight: 900; font-size: 19px;
  box-shadow: 0 4px 12px var(--primary-ring);
}
.tils-brandlink__name { font-weight: 900; font-size: 22px; letter-spacing: -.03em; }
/* Plakietka „dla biznesu" — ta sama, co w nagłówku `landing/biznes.html`. To ona mówi, na którym
   z dwóch wejść stoisz; bez niej ekran logowania właściciela wyglądał jak ekran klienta. */
.tils-brandlink__tag {
  font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #0f766e; background: #d7f5f0; border: 1px solid #a7e3da;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.tils-topbar__nav { display: flex; align-items: center; gap: 8px; }
/* Powrót do portalu klienta: przycisk-odnośnik bez obramowania, jak `.btn--link` w portalu. */
.tils-topbar__link {
  font-weight: 700; font-size: 15px; color: var(--ink-2) !important;
  padding: 9px 12px; border-radius: 999px; text-decoration: none !important; white-space: nowrap;
}
.tils-topbar__link:hover { background: #f6efe4; color: var(--primary-hover) !important; }
.tils-topbar__cta {
  font-weight: 800; font-size: 15px; color: #fff !important;
  /* --primary (#0d9488) z białym napisem to 3,74:1, czyli poniżej progu AA. Portal używa tu
     ciemniejszego #0f766e (5,47:1) i ten pasek musi robić to samo. */
  background: var(--primary-hover);
  padding: 10px 18px; border-radius: 999px; text-decoration: none !important; white-space: nowrap;
  box-shadow: 0 6px 18px var(--primary-ring);
}
.tils-topbar__cta:hover { background: #115e56; }
@media (max-width: 620px) {
  .tils-topbar__in { padding: 10px 16px; }
  .tils-topbar__nav { gap: 6px; }
  /* Na telefonie powrót schodzi z paska (jest w stopce), a plakietka nie łamie się na dwa wiersze —
     to ten sam wniosek, który wyszedł ze zmierzonego nagłówka strony dla biznesu (223 px → 66 px). */
  .tils-topbar__link { display: none; }
  .tils-brandlink__name { font-size: 19px; }
  .tils-brandlink__tag { font-size: 10.5px; padding: 3px 8px; }
}
@media (max-width: 400px) { .tils-brandlink__tag { display: none; } }

.tils-foot { border-top: 1px solid var(--border); background: #f6efe4; padding: 28px 20px; margin-top: 40px; }
.tils-foot__in {
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.tils-foot__brand { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 17px; color: var(--ink); }
.tils-foot__brand span.mark {
  width: 26px; height: 26px; border-radius: 9px; background: var(--primary); color: #fff;
  display: grid; place-items: center; font-size: 15px;
}
.tils-foot__note { color: var(--ink-3); font-weight: 600; font-size: 13.5px; margin-left: 4px; }
.tils-foot__links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; font-weight: 700; }
.tils-foot__links a { color: var(--ink-2) !important; text-decoration: none !important; }
.tils-foot__links a:hover { color: var(--primary) !important; }
/* --ink-3 (#a89f92) ma na tle stopki 2,5:1 — poniżej progu dla każdego rozmiaru tekstu.
   Ten sam kolor został wymieniony w portalu na #756b60 i tu musi być tak samo. */
.tils-foot__copy { max-width: 1120px; margin: 14px auto 0; color: #756b60; font-size: 13px; font-weight: 600; }
.tils-foot__maker { color: var(--primary-hover) !important; font-weight: 800; font-size: 13px; }


/* =====================================================================
   Dostrojenie do języka formularzy z portalu (patrz landing: karta biała,
   ramka 2 px #eadfce, promień 22 px; pola tło #fbf8f3, promień 12 px;
   przycisk pigułka w kolorze marki). Wcześniej motyw miał własne, cieńsze
   ramki i promień 8 px — te same kolory, a jednak inny „charakter pisma"
   interfejsu, co widać najbardziej, gdy przechodzi się z portalu prosto tutaj.
   Reguły są DOPISANE na końcu, żeby wygrywały bez podnoszenia specyficzności.
   ===================================================================== */
#kc-form,
#kc-form-login-wrapper,
#kc-content-wrapper > form,
#kc-content-wrapper > .instruction {
  border: 2px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(43,38,34,.07);
  padding: 26px;
}

label, .pf-c-form__label, .pf-c-form__label-text {
  font-weight: 800 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
}

input[type="text"], input[type="password"], input[type="email"], .pf-c-form-control {
  background: var(--bg) !important;
  border: 2px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 13px 15px !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, .pf-c-form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px var(--primary-ring) !important;
}

/* Pole hasła z podglądem — „oko" siedzi W POLU, nie obok niego jako osobne pudełko z obwódką.
   Tak było już w nakładce (reguły pod `html.tils-w-ramce`), ale pełna strona została z klockiem
   przyklejonym z prawej — a to ten sam formularz i ma wyglądać tak samo w obu miejscach.
   Pole dostaje z prawej miejsce na przycisk, żeby długie hasło nie wjeżdżało pod ikonę. */
.pf-c-input-group { position: relative; display: block; }
input[type="password"] { padding-right: 48px !important; }
.pf-c-input-group .pf-c-button,
.pf-c-input-group button,
button.pf-c-button.pf-m-control {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink-2) !important;
}
.pf-c-input-group .pf-c-button:hover,
.pf-c-input-group button:hover { background: #f3efe9 !important; }
/* Obramowanie przycisków PatternFly NIE jest własnością `border` — jest pseudoelementem `::after`
   z własną ramką i tłem. Dlatego samo `border: 0` na przycisku nic nie dawało: za okiem nadal
   siedział biały prostokąt z kreską po lewej i u dołu. Widoczne tylko na powiększeniu pola;
   pomiar stylu obliczonego pokazywał „ramka=0px", bo pytał o zły element. */
.pf-c-input-group .pf-c-button::after,
.pf-c-input-group button::after,
button.pf-c-button.pf-m-control::after {
  display: none !important;
}
/* Białe tło grupy pola wychodziło poza zaokrąglenia pola (grupa jest białym prostokątem pod
   polem o promieniu 12 px) — przy kremowym tle pola widać to jako jaśniejsze naroża. */
.pf-c-input-group { background: transparent !important; }

#kc-login, .pf-c-button--primary, input[type="submit"], button[type="submit"] {
  border-radius: 14px !important;
  padding: 15px 20px !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: 16.5px !important;
  background: var(--primary) !important;
  border: 0 !important;
  box-shadow: 0 8px 20px var(--primary-ring) !important;
}
#kc-login:hover, .pf-c-button--primary:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  background: var(--primary-hover) !important;
}

/* Odnośniki pod formularzem („Nie pamiętasz hasła?", rejestracja) — jeden rytm z portalem. */
#kc-form-options a, #kc-registration a, #kc-registration-container a, .tils-reg a {
  font-weight: 800 !important;
  color: var(--primary) !important;
}
#kc-registration, #kc-registration-container {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
}

/* Karta nie może dotykać nagłówka ani stopki — na portalu treść też ma powietrze. */
#kc-content { padding: 44px 16px 8px !important; }
@media (max-width: 640px) {
  #kc-form, #kc-form-login-wrapper { padding: 20px; border-radius: 18px; }
  #kc-content { padding: 28px 14px 4px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   WERSJA KOMPAKTOWA — logowanie w NAKŁADCE portalu (klasa `tils-w-ramce` dodawana przez tils.js)
   ════════════════════════════════════════════════════════════════════════════════════════════

   Ten sam ekran obsługuje pełną stronę (panel biznesu, /biznes/login) i małe okienko w portalu.
   Reguły niżej dotyczą WYŁĄCZNIE okienka — pełna strona zostaje bez zmian.

   PIERWSZA WERSJA TYCH REGUŁ WYGLĄDAŁA ŹLE i widać to było tylko na zrzucie ekranu, nie w kodzie:
     * KARTA W KARCIE — nakładka rysowała białe pudełko, a motyw w środku rysował drugie, kremowe,
       z własnym cieniem i obwódką;
     * PUSTY BIAŁY PROSTOKĄT pod formularzem — ukryłem zawartość `#kc-registration`, ale sam
       `#kc-info` (jego rodzic, stylowany jak karta) został widoczny i pusty. Zamiast linku
       „Nie masz konta? Rejestracja" było białe nic;
     * obca stopka „tils · bezpieczne logowanie" z pseudoelementu `::after` pełnej strony;
     * pola w kolorze tła, bez widocznej obwódki — nie wyglądały na pola do wpisania.
   Dlatego teraz zamiast dokładać nadpisania, ZDEJMUJEMY z okienka całą oprawę pełnej strony
   i rysujemy formularz od zera.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

html.tils-w-ramce,
html.tils-w-ramce body,
html.tils-w-ramce .login-pf-page {
  background: #fff !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
}
/* Górny odstęp większy niż pozostałe: w prawym górnym rogu nakładki siedzi krzyżyk
   zamykający, a przy 26 px wchodził na etykietę pola e-mail. */
html.tils-w-ramce .login-pf-page { padding: 38px 22px 22px !important; }

/* NAKŁADKA JEST KARTĄ — motyw nie może rysować drugiej. Zdejmujemy tło, obwódkę, cień
   i zaokrąglenia ze wszystkiego, co pełna strona traktuje jak pudełko. */
html.tils-w-ramce #kc-content,
html.tils-w-ramce #kc-content-wrapper,
html.tils-w-ramce .card-pf,
html.tils-w-ramce .login-pf-page .card-pf,
html.tils-w-ramce #kc-form,
html.tils-w-ramce #kc-form-wrapper,
html.tils-w-ramce #kc-form-login-wrapper,
html.tils-w-ramce #kc-info,
html.tils-w-ramce #kc-info-wrapper,
html.tils-w-ramce #kc-registration-container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  /* width: 100%, NIE auto. `auto` było moim błędem i widać go było tylko z pomiaru: kontenery
     Keycloaka są elementami układu flex z wyśrodkowaniem, więc przy `auto` kurczyły się DO TREŚCI
     — formularz miał 217 px w ramce 400 px i zajmował około połowy okienka. */
  width: 100% !important;
}

/* Oprawa pełnej strony, w okienku zbędna: nagłówek Keycloaka, przełącznik języka, „Zapamiętaj
   mnie", pasek górny, stopka, podpis roli oraz pseudoelementy z podpisem „bezpieczne logowanie". */
html.tils-w-ramce #kc-header,
html.tils-w-ramce #kc-header-wrapper,
html.tils-w-ramce #kc-page-title,
html.tils-w-ramce #kc-locale,
html.tils-w-ramce #kc-form-options,
html.tils-w-ramce .tils-topbar,
html.tils-w-ramce .tils-foot,
html.tils-w-ramce .tils-switch,
html.tils-w-ramce .tils-subtitle,
html.tils-w-ramce .tils-logo { display: none !important; }
html.tils-w-ramce #kc-content-wrapper::after,
html.tils-w-ramce #kc-content-wrapper > form::after,
html.tils-w-ramce .login-pf-page::after { content: none !important; display: none !important; }

/* ── Pola ─────────────────────────────────────────────────────────────────────────────────
   Białe tło i wyraźna obwódka: w kremowym kolorze tła pola nie wyglądały na pola. */
html.tils-w-ramce .form-group { margin: 0 0 14px !important; }
html.tils-w-ramce label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #4a423b !important;
  margin: 0 0 6px !important;
}
html.tils-w-ramce input[type="text"],
html.tils-w-ramce input[type="email"],
html.tils-w-ramce input[type="password"],
html.tils-w-ramce .pf-c-form-control {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  color: #2b2622 !important;
  background: #fff !important;
  border: 1.5px solid #dfd3c2 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html.tils-w-ramce input:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, .14) !important;
  outline: none !important;
}
/* Przycisk „pokaż hasło" siedzi W POLU, nie obok niego jako osobne pudełko z obwódką.
   Selektor musi być mocniejszy niż reguły pełnej strony dla `.pf-c-button.pf-m-control`, dlatego
   powtórzone klasy — inaczej obwódka i tło zostawały i oko wyglądało jak przyklejony guzik.
   Pole hasła dostaje z prawej miejsce na przycisk, żeby długie hasło nie wjeżdżało pod ikonę. */
html.tils-w-ramce .pf-c-input-group { position: relative !important; display: block !important; }
html.tils-w-ramce input[type="password"] { padding-right: 46px !important; }
html.tils-w-ramce .pf-c-input-group button.pf-c-button,
html.tils-w-ramce .pf-c-input-group button,
html.tils-w-ramce button.pf-c-button.pf-m-control {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 34px !important;
  width: 34px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #756b60 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  min-width: 0 !important;
}
html.tils-w-ramce .pf-c-input-group button:hover { background: #f3efe9 !important; }

/* ── Przycisk logowania ───────────────────────────────────────────────────────────────────── */
html.tils-w-ramce #kc-form-buttons { margin: 18px 0 0 !important; }
html.tils-w-ramce input[type="submit"],
html.tils-w-ramce #kc-login {
  width: 100% !important;
  height: 48px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  /* #0f766e, nie #0d9488: biały tekst na jaśniejszym teal ma 3,74:1, czyli poniżej progu AA. */
  background: #0f766e !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(15, 118, 110, .26) !important;
}
html.tils-w-ramce input[type="submit"]:hover,
html.tils-w-ramce #kc-login:hover { background: #115e56 !important; }

/* ── „Nie masz konta? Rejestracja" — POD przyciskiem, w tym samym pudełku ──────────────────
   Rodzic (#kc-info) jest wyżej wyzerowany, a nie ukryty — ukrycie samej zawartości zostawiało
   pustą białą kartę. Odnośnik dostaje wygląd przycisku pobocznego, bo od 2026-08-03 nie ma już
   „Zarejestruj się" w nagłówku portalu i to jest jedyne wejście do rejestracji. */
html.tils-w-ramce #kc-info,
html.tils-w-ramce #kc-info-wrapper,
html.tils-w-ramce #kc-registration-container,
html.tils-w-ramce #kc-registration {
  display: block !important;
  text-align: center !important;
  font-size: 13.5px !important;
  color: #6b6156 !important;
}
html.tils-w-ramce #kc-info { margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid #ece4d8 !important; }
/* JEDNA kreska, nie dwie. Pełna strona daje obramowanie górne także `#kc-registration`, więc
   w okienku wychodziły dwie linie jedna pod drugą z pustym pasem między nimi. */
html.tils-w-ramce #kc-registration,
html.tils-w-ramce #kc-registration-container { border: 0 !important; margin: 0 !important; padding: 0 !important; }
html.tils-w-ramce #kc-registration span { display: block; margin: 0 0 8px !important; padding: 0 !important; font-weight: 600; }
html.tils-w-ramce #kc-registration a {
  display: block;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  height: 44px;
  line-height: 42px;
  font-size: 15px;
  font-weight: 800;
  color: #0f766e !important;
  background: #d7f5f0;
  border: 1px solid #a7e3da;
  border-radius: 12px;
  text-decoration: none !important;
}
html.tils-w-ramce #kc-registration a:hover { background: #c7efe8; color: #115e56 !important; }

/* ── Logowanie kontem zewnętrznym (Google, Apple, Facebook) ────────────────────────────────
   Keycloak rysuje tę sekcję TYLKO wtedy, gdy istnieje choć jeden dostawca — patrz
   scripts/keycloak-social-idp.sh. Napis nad przyciskami bierze się z messages_pl.properties;
   domyślny „Or sign in with" był nieprzetłumaczony. */
/* Sekcja dostawców NIE MOŻE być kartą: motyw pełnej strony daje `.kc-social-section` białe tło,
   cień i zaokrąglenia, więc w nakładce wychodziło pudełko w pudełku (widoczne na zrzucie). */
html.tils-w-ramce #kc-social-providers,
html.tils-w-ramce .kc-social-section {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Kreska i nagłówek sekcji ZNIKAJĄ. Napis „albo kontem zewnętrznym" był w `<h2>` — czyli
   w elemencie o rozmiarze nagłówka, co w okienku wyglądało jak druga tytułowa linia większa niż
   cokolwiek innego. Same przyciski z logotypami mówią to samo bez słów (decyzja użytkownika). */
html.tils-w-ramce #kc-social-providers hr,
html.tils-w-ramce #kc-social-providers h1,
html.tils-w-ramce #kc-social-providers h2,
html.tils-w-ramce #kc-social-providers h3,
html.tils-w-ramce #kc-social-providers h4,
html.tils-w-ramce #kc-social-providers > p { display: none !important; }
html.tils-w-ramce #kc-social-providers ul { margin: 0 !important; padding: 0 !important; list-style: none !important; display: block !important; }
html.tils-w-ramce #kc-social-providers li { margin: 0 0 8px !important; display: block !important; }
html.tils-w-ramce #kc-social-providers li:last-child { margin-bottom: 0 !important; }

html.tils-w-ramce .kc-social-item,
html.tils-w-ramce #kc-social-providers a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  border: 1.5px solid #dfd3c2 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #2b2622 !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
html.tils-w-ramce #kc-social-providers a:hover { background: #faf7f2 !important; border-color: #cdbfa8 !important; }
/* Keycloak wstawia ikonę czcionkową (Font Awesome), której ten motyw nie wczytuje — bez tego
   w przycisku byłby pusty kwadrat albo nic. Logotypy wstawiamy więc jako tło pseudoelementu. */
html.tils-w-ramce .kc-social-item i,
html.tils-w-ramce #kc-social-providers a i { display: none !important; }
html.tils-w-ramce #kc-social-providers a::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
html.tils-w-ramce #social-google::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H24v7.9h11.3C33.7 32.7 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.1 7.9 3l5.7-5.7C34.1 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20c11 0 19.4-8.1 19.4-20 0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.1 7.9 3l5.7-5.7C34.1 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 34.9 26.7 36 24 36c-5.3 0-9.7-3.3-11.3-8l-6.5 5C9.6 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H24v7.9h11.3c-.8 2.2-2.2 4.1-4.1 5.5l6.2 5.2C40.9 36.3 44 30.8 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E");
}
html.tils-w-ramce #social-facebook::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877F2' d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.96h-1.51c-1.49 0-1.95.93-1.95 1.89v2.26h3.32l-.53 3.49h-2.79V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E");
}
html.tils-w-ramce #social-apple::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.05 12.54c.02-2.3 1.88-3.4 1.96-3.45-1.07-1.57-2.73-1.78-3.32-1.81-1.41-.14-2.76.83-3.48.83-.72 0-1.83-.81-3.01-.79-1.55.02-2.98.9-3.78 2.29-1.61 2.8-.41 6.94 1.16 9.21.77 1.11 1.69 2.35 2.9 2.31 1.16-.05 1.6-.75 3.01-.75 1.4 0 1.8.75 3.02.73 1.25-.02 2.05-1.13 2.82-2.25.88-1.28 1.24-2.52 1.26-2.59-.03-.01-2.42-.93-2.44-3.7zM14.9 5.4c.63-.77 1.06-1.83.94-2.9-.91.04-2.02.61-2.67 1.37-.58.68-1.09 1.77-.95 2.81 1.02.08 2.05-.52 2.68-1.28z'/%3E%3C/svg%3E");
}

/* Komunikat błędu (złe hasło) — w okienku musi być wąski i czytelny, nie szeroki pas. */
html.tils-w-ramce .alert, html.tils-w-ramce .pf-c-alert {
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
}