/* ============================================================
   klasyk.pl — design system 2026 · MODUŁ AUTH
   Strony: /logowanie.html, /rejestracja.html, /reset-password.html,
   /konto/ustawienia.html, pulpit /user/, /user/remove-account.html.
   Ładowany za tokens.css + base.css (bez Bootstrapa i home.css) przez
   Auth\Middlewares\PrepareLayout — layout user::layout. Konwencja jak
   w uslugi-panel-2026.css: wyłącznie tokeny, wszystko Inter, czerwień
   (--accent) tylko akcent linków/fokusów/taba, przyciski akcji CZARNE,
   teal nie występuje, zakaz dashed borders. Klasy .form-error i
   .btn-danger to kontrakt helperów PHP (FormError, BtnSubmitReCaptcha
   współdzielony z ad-form) — nadajemy im tylko wygląd, markupu nie ruszamy.
   ============================================================ */

/* ---------- Kontrakt przycisków z components.css ----------
   Kopiowane, bo layout auth NIE ładuje components.css. .btn-danger
   emituje BtnSubmitReCaptcha + „Zapisz"/„Usuń" — taksonomia: CZARNY. */
.btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans);
  font-weight:600; white-space:nowrap; border-radius:var(--r-control); cursor:pointer; text-decoration:none; }
.btn-outline{ background:#fff; color:var(--heading); padding:0.625rem 1rem; font-size:0.90625rem; border:1px solid var(--gray-line); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); background:#fff; }
.btn-black{ background:var(--dark); color:#fff; padding:0.625rem 1rem; font-size:0.90625rem; border:1px solid var(--dark); }
.btn-black:hover{ background:#000; border-color:#000; color:#fff; }
.btn-danger{ background:var(--dark); color:#fff; border:1px solid var(--dark);
  min-height:2.75rem; padding:0 1.25rem; font-size:.9375rem; }
.btn-danger:hover, .btn-danger:focus{ background:#000; border-color:#000; color:#fff; }

/* ============================================================
   POWŁOKA LAYOUTU (topbar · kolumna treści · stopka)
   ============================================================ */
.kl-auth{ display:flex; flex-direction:column; min-height:100vh; }

/* Topbar: jasny pasek z logo (naturalne kolory logo.svg) i dyskretnym
   powrotem do serwisu. */
.kl-auth-top{ background:#fff; border-bottom:1px solid var(--gray-line); }
.kl-auth-top__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:64rem; margin:0 auto; padding:.9rem 1.5rem; }
.kl-auth-top__logo{ display:inline-flex; align-items:center; }
.kl-auth-top__logo img{ height:1.6rem; width:auto; }
.kl-auth-top__back{ font-size:.875rem; font-weight:500; color:var(--meta-strong); }
.kl-auth-top__back:hover{ color:var(--accent); }

/* Kolumna treści: wąska dla formularzy, szeroka dla pulpitu (hook
   layoutClass=auth--dashboard ustawiany przez Auth\Handlers\Index). */
.kl-auth-main{ flex:1 1 auto; width:100%; padding:2.5rem 1.5rem 3rem; }
.kl-auth-col{ max-width:28rem; margin:0 auto; }
.kl-auth.auth--dashboard .kl-auth-col{ max-width:64rem; }

/* Stopka: cienka linia z copy i linkami prawnymi. */
.kl-auth-foot{ border-top:1px solid var(--gray-line); background:#fff; }
.kl-auth-foot__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.25rem;
  max-width:64rem; margin:0 auto; padding:1.25rem 1.5rem; font-size:.82rem; color:var(--meta); }
.kl-auth-foot__links{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
.kl-auth-foot__links a{ color:var(--meta-strong); }
.kl-auth-foot__links a:hover{ color:var(--accent); }

/* ============================================================
   KARTA AUTH (formularze logowania/rejestracji/resetu/…)
   ============================================================ */
.kl-auth-card{ background:#fff; border:1px solid var(--gray-line); border-radius:var(--r-card); padding:1.75rem; }
.kl-auth-card p{ margin:0; }
.kl-auth-card__head{ text-align:center; margin-bottom:1.25rem; }
.kl-auth-card__title{ margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  font-size:clamp(1.35rem,calc(2.4 * var(--vwu)),1.6rem); color:var(--heading); }
.kl-auth-card__sub{ margin:.4rem 0 0; font-size:.92rem; line-height:1.5; color:var(--meta-strong); }

/* ---------- Zakładki Logowanie / Rejestracja ---------- */
.kl-auth-tabs{ display:flex; gap:.25rem; border-bottom:1px solid var(--gray-line); margin-bottom:1.5rem; }
.kl-auth-tabs__link{ position:relative; padding:.65rem .9rem; font-size:.95rem;
  font-weight:600; color:var(--meta-strong); }
.kl-auth-tabs__link:hover{ color:var(--heading); }
.kl-auth-tabs__link.is-active{ color:var(--heading); }
.kl-auth-tabs__link.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); }

/* ---------- Alerty (sukces / info / błąd) ---------- */
.kl-auth-alert{ margin-bottom:1.25rem; padding:.8rem 1.1rem; border-radius:var(--r-card);
  font-size:.9rem; line-height:1.5; }
.kl-auth-alert strong{ font-weight:700; }
.kl-auth-alert a{ text-decoration:underline; text-underline-offset:2px; }
.kl-auth-alert--success{ background:var(--success-bg); color:var(--success); border:1px solid var(--success-border); }
.kl-auth-alert--success a{ color:inherit; }
.kl-auth-alert--info{ background:var(--surface-warm); color:var(--heading); border:1px solid var(--rule); }
.kl-auth-alert--info a{ color:var(--accent); }
.kl-auth-alert--info a:hover{ color:var(--heading); }
.kl-auth-alert--error{ background:var(--danger-bg); color:var(--text); border:1px solid var(--danger-border); }
.kl-auth-alert--error strong{ color:var(--accent); }
.kl-auth-alert--error a{ color:var(--accent); }

/* ---------- Przyciski OAuth (neutralne, outline z ikoną marki) ---------- */
.kl-auth-oauth{ display:flex; align-items:center; justify-content:center; gap:.55rem; width:100%;
  min-height:2.75rem; padding:.6rem 1rem; background:#fff; color:var(--heading);
  border:1px solid var(--gray-line); border-radius:var(--r-control);
  font-size:.9375rem; font-weight:600; }
.kl-auth-oauth:hover{ border-color:var(--heading); color:var(--heading); }
.kl-auth-oauth + .kl-auth-oauth{ margin-top:.625rem; }
.kl-auth-oauth__icon{ flex:none; width:1.125rem; height:1.125rem; }

/* ---------- Separator „lub" ---------- */
.kl-auth-divider{ display:flex; align-items:center; gap:.75rem; margin:1.25rem 0;
  font-size:.85rem; color:var(--meta); }
.kl-auth-divider::before, .kl-auth-divider::after{ content:""; flex:1; height:1px; background:var(--gray-line); }

/* ---------- Formularz ---------- */
.kl-auth-form{ display:flex; flex-direction:column; gap:1rem; }
.kl-auth-field{ display:flex; flex-direction:column; gap:.4rem; }
.kl-auth-label{ font-size:.8125rem; font-weight:600; color:var(--heading); }
.kl-auth-input{ width:100%; min-width:0; font-family:var(--sans); font-size:.9375rem; line-height:1.5;
  color:var(--heading); background:#fff; border:1px solid var(--gray-line); border-radius:var(--r-control);
  min-height:2.75rem; padding:.6rem .75rem; }
.kl-auth-input:hover{ border-color:var(--heading); }
.kl-auth-input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--heading); }
.kl-auth-input::placeholder{ color:var(--meta); }
.kl-auth-check{ display:flex; align-items:flex-start; gap:.55rem; font-size:.9rem;
  line-height:1.5; color:var(--text); cursor:pointer; }
.kl-auth-check input{ flex:none; margin-top:.15rem; width:1rem; height:1rem; accent-color:var(--dark); }
.kl-auth-check a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
/* Błąd pola — klasa .form-error emitowana przez helper FormError */
.form-error{ margin-top:.15rem; font-size:.8125rem; font-weight:600; color:var(--accent); }
/* Wiersz przycisku wysyłki — pełna szerokość dla submitu helpera (.btn-danger)
   i przycisków „Zapisz"/„Usuń konto" (.btn-black). */
.kl-auth-actions{ margin-top:.25rem; }
.kl-auth-actions .btn{ width:100%; min-height:2.75rem; }
/* Odnośnik pod formularzem (reset hasła) */
.kl-auth-note{ margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border);
  text-align:center; font-size:.9rem; color:var(--meta-strong); }

/* ============================================================
   PULPIT KONTA /user/ (.kl-auth-dash-*)
   ============================================================ */
.kl-auth-dash{ color:var(--text); }
/* Wspólna powierzchnia kart pulpitu */
.kl-auth-dash__attention-card, .kl-auth-dash__card, .kl-auth-dash__panel{
  background:#fff; border:1px solid var(--gray-line); border-radius:var(--r-card); }

.kl-auth-dash__hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding-bottom:1.5rem; border-bottom:1px solid var(--border); }
.kl-auth-dash__eyebrow{ margin:0 0 .4rem; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--meta); }
.kl-auth-dash__hero h1{ margin:0 0 .5rem; font-weight:700; letter-spacing:-.02em;
  line-height:1.15; font-size:clamp(1.6rem,calc(2.6 * var(--vwu)),2rem); color:var(--heading); }
.kl-auth-dash__hero p{ max-width:40rem; margin:0; font-size:.98rem; line-height:1.55; color:var(--meta-strong); }
.kl-auth-dash__logout{ flex:none; }

.kl-auth-dash__identity{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.kl-auth-dash__identity div{ padding:1rem 1.125rem; background:var(--gray-1); border:1px solid var(--gray-line);
  border-radius:var(--r-card); }
.kl-auth-dash__identity span{ display:block; margin-bottom:.25rem; font-size:.8rem; color:var(--meta); }
.kl-auth-dash__identity strong{ overflow-wrap:anywhere; color:var(--heading); }
.kl-auth-dash__flag--on{ color:var(--success); }
.kl-auth-dash__flag--off{ color:var(--accent); }

.kl-auth-dash__attention{ margin:0 0 1.5rem; padding:1.375rem; background:var(--surface-warm);
  border:1px solid var(--rule); border-radius:var(--r-card); }
.kl-auth-dash__section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.kl-auth-dash__section-head h2{ margin:0; font-weight:700; font-size:1.2rem; line-height:1.2; color:var(--heading); }
.kl-auth-dash__section-head > span{ font-size:.85rem; color:var(--meta); white-space:nowrap; }
.kl-auth-dash__attention-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.kl-auth-dash__attention-card{ padding:1rem; }
.kl-auth-dash__attention-card > span{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--meta); }
.kl-auth-dash__attention-card > strong{ display:block; margin-top:.5rem; min-height:2.75rem; line-height:1.35; color:var(--heading); }
.kl-auth-dash__attention-card a{ display:inline-flex; margin-top:.75rem; font-weight:600; }

.kl-auth-dash__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.kl-auth-dash__card{ padding:1.375rem; }
.kl-auth-dash__card-head, .kl-auth-dash__panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.kl-auth-dash__card-head span{ font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--meta); }
.kl-auth-dash__card-head strong{ font-weight:700; font-size:2rem; line-height:1;
  color:var(--heading); font-variant-numeric:tabular-nums; }
.kl-auth-dash__card p{ min-height:2.5rem; margin:.75rem 0 1.125rem; font-size:.92rem; line-height:1.5; color:var(--meta-strong); }
.kl-auth-dash__actions{ display:flex; flex-wrap:wrap; gap:.5rem; }

.kl-auth-dash__quick{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.25rem; }
.kl-auth-dash__quick a{ display:inline-flex; align-items:center; justify-content:center; min-height:2.5rem;
  padding:0 1rem; background:#fff; color:var(--heading); border:1px solid var(--gray-line); border-radius:var(--r-control);
  font-size:.875rem; font-weight:600; }
.kl-auth-dash__quick a:hover{ border-color:var(--heading); }

.kl-auth-dash__lists{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.kl-auth-dash__panel{ padding:1.375rem; }
.kl-auth-dash__panel-head{ margin-bottom:1rem; }
.kl-auth-dash__panel-head h2{ margin:0; font-weight:700; font-size:1.2rem; color:var(--heading); }
.kl-auth-dash__panel-head a{ font-size:.9rem; font-weight:600; }
.kl-auth-dash__list{ display:grid; gap:.75rem; margin:0; padding:0; list-style:none; }
.kl-auth-dash__list li{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding-top:.75rem; border-top:1px solid var(--border); }
.kl-auth-dash__list strong{ display:block; color:var(--heading); }
.kl-auth-dash__list span{ display:block; margin-top:.25rem; font-size:.85rem; line-height:1.4; color:var(--meta); }
.kl-auth-dash__list a{ font-weight:600; white-space:nowrap; }
.kl-auth-dash__empty{ margin:0; color:var(--meta); }

.kl-auth-dash__secondary{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--border); }
.kl-auth-dash__secondary a{ font-size:.92rem; font-weight:600; }

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width:760px){
  .kl-auth-main{ padding:1.75rem 1.125rem 2.5rem; }
  .kl-auth-card{ padding:1.375rem; }
  .kl-auth-dash__hero{ display:block; }
  .kl-auth-dash__logout{ margin-top:1rem; }
  .kl-auth-dash__identity,
  .kl-auth-dash__attention-grid,
  .kl-auth-dash__grid,
  .kl-auth-dash__lists{ grid-template-columns:1fr; }
  .kl-auth-dash__list li{ display:block; }
  .kl-auth-dash__list a{ display:inline-flex; margin-top:.5rem; }
}