/* FJN System — E0 component styles: sign-in screens, component catalogue, motion.
   Loaded after fjn-screens-admin.css (see templates/base.html); order matters. */
/* ---------- Sign-in and access screens (E0-01…05) ---------- */

.fjn-auth { display: flex; min-height: 100vh; background: var(--fjn-bg); }
.fjn-auth__aside {
  width: 560px; flex: none; display: flex; flex-direction: column; gap: var(--fjn-sp-6);
  padding: var(--fjn-sp-10); background: var(--fjn-nav-bg); color: var(--fjn-text-inverse);
}
.fjn-auth__brand { display: flex; flex-direction: column; gap: 10px; font-size: var(--fjn-fs-small); color: var(--fjn-border-strong); }
.fjn-auth__logo { height: 40px; width: auto; align-self: flex-start; }
.fjn-auth__photo {
  flex: 1; border-radius: var(--fjn-r-lg);
  background: repeating-linear-gradient(135deg, var(--fjn-placeholder-1) 0 10px, var(--fjn-placeholder-2) 10px 20px);
}
.fjn-auth__places { font-size: var(--fjn-fs-small); line-height: var(--fjn-lh-small); color: var(--fjn-border-strong); }
.fjn-auth__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--fjn-sp-10); }
.fjn-auth__logo-m { display: none; height: 34px; width: auto; align-self: flex-start; margin-bottom: var(--fjn-sp-10); }
.fjn-auth__panel { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--fjn-sp-5); }
.fjn-auth__head { display: flex; flex-direction: column; gap: 6px; }
.fjn-auth__head h1 { font-size: 28px; line-height: 36px; }
.fjn-auth__strong { color: var(--fjn-text); }
.fjn-auth__form { display: flex; flex-direction: column; gap: var(--fjn-sp-5); }
.fjn-auth .fjn-input, .fjn-auth .fjn-input-group { height: var(--fjn-ctl-touch); font-size: 16px; }
.fjn-btn--auth { height: 48px; font-size: 16px; gap: 10px; }
.fjn-auth__link, .fjn-auth__back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: var(--fjn-ctl-touch);
  font-size: var(--fjn-fs-body); white-space: nowrap;
}
.fjn-auth__badge { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--fjn-r-lg); }
.fjn-auth__badge--warning { background: var(--fjn-warning-100); color: var(--fjn-warning-700); }
.fjn-auth__badge--success { background: var(--fjn-success-100); color: var(--fjn-success-700); }
@media (max-width: 1279px) { .fjn-auth__aside { width: 380px; } }
@media (max-width: 767px) {
  .fjn-auth__aside { display: none; }
  .fjn-auth__main { justify-content: flex-start; padding: 20px 20px 24px; }
  .fjn-auth__logo-m { display: block; }
}

/* Device name to copy (E0-03) */
.fjn-device-code {
  display: flex; flex-direction: column; gap: 6px; padding: var(--fjn-sp-4);
  background: var(--fjn-surface); border: 1px solid var(--fjn-border); border-radius: 8px;
}
.fjn-device-code__row { display: flex; align-items: center; justify-content: space-between; gap: var(--fjn-sp-3); }
.fjn-device-code__value { font: var(--fjn-fw-bold) 24px/32px var(--fjn-font-mono); letter-spacing: .08em; }
.fjn-btn--icon-bordered { width: var(--fjn-ctl-touch); height: var(--fjn-ctl-touch); padding: 0; }

/* Password: show / hide, live requirements */
.fjn-input-group__reveal {
  display: flex; align-items: center; justify-content: center; width: var(--fjn-ctl-touch); flex: none;
  border: 0; background: none; color: var(--fjn-text-2); cursor: pointer;
}
.fjn-input-group__reveal:hover { color: var(--fjn-text); }
.fjn-input-group__reveal:focus-visible { box-shadow: inset 0 0 0 2px var(--fjn-focus-ring); }
.fjn-input-group__reveal .fjn-reveal-hide, .fjn-input-group__reveal[aria-pressed="true"] .fjn-reveal-show { display: none; }
.fjn-input-group__reveal[aria-pressed="true"] .fjn-reveal-hide { display: inline-block; }
.fjn-rules { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.fjn-rules__item { display: flex; align-items: center; gap: var(--fjn-sp-2); color: var(--fjn-text-2); }
.fjn-rules__icon--ok, .fjn-rules__state--ok { display: none; }
.fjn-rules__item.is-met { color: var(--fjn-success-700); }
.fjn-rules__item.is-met .fjn-rules__icon--ok { display: inline-flex; }
.fjn-rules__item.is-met .fjn-rules__icon--todo { display: none; }
.fjn-rules__item.is-met .fjn-rules__state--ok { display: inline; margin-left: auto; font-size: var(--fjn-fs-label); font-weight: var(--fjn-fw-bold); }

/* Neutral message (e.g. "To konto jest nieaktywne") */
.fjn-alert--neutral { background: var(--fjn-neutral-100); color: var(--fjn-neutral-700); }
.fjn-alert--neutral .fjn-alert__body { color: var(--fjn-text); }
.fjn-alert--neutral .fjn-alert__title { color: var(--fjn-text); }

/* Skeleton placeholder page */
.fjn-placeholder { max-width: var(--fjn-content-max); padding: var(--fjn-sp-8); }

/* ---------- Component catalogue (/komponenty/) ---------- */

.fjn-catalog { max-width: var(--fjn-content-max); margin: 0 auto; padding: var(--fjn-sp-8) var(--fjn-sp-4); display: flex; flex-direction: column; gap: var(--fjn-sp-6); }
.fjn-catalog__section { display: flex; flex-direction: column; gap: var(--fjn-sp-5); padding: var(--fjn-sp-8); background: var(--fjn-surface); border: 1px solid var(--fjn-border); border-radius: var(--fjn-r-lg); }
.fjn-catalog__section > h2 { font-size: var(--fjn-fs-h1); line-height: var(--fjn-lh-h1); }
.fjn-catalog__states { display: grid; grid-template-columns: 150px repeat(6, minmax(0, 1fr)); gap: var(--fjn-sp-4) var(--fjn-sp-5); align-items: center; }
.fjn-catalog__states > .fjn-btn { justify-self: start; }
.fjn-catalog__row { display: flex; flex-wrap: wrap; gap: var(--fjn-sp-4); align-items: center; }
.fjn-catalog__grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--fjn-sp-6); align-items: start; }
.fjn-catalog__note { font-size: var(--fjn-fs-small); color: var(--fjn-text-3); }
@media (max-width: 1023px) {
  .fjn-catalog__states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fjn-catalog__section { padding: var(--fjn-sp-5); }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  /* The spinner stays — it conveys state. */
  .fjn-skel, .fjn-toast { animation: none; }
  .fjn-toggle__track::after { transition: none; }
}
.fjn-table__actions { width: 1%; text-align: right; white-space: nowrap; }

/* D173: „Wyloguj” under the forced „Ustaw własne hasło” */
.fjn-auth__later {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fjn-sp-4);
  padding-top: var(--fjn-sp-5); border-top: 1px solid var(--fjn-border); font-size: 14px; color: var(--fjn-text-2);
}
.fjn-auth__logout {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--fjn-ctl-touch); padding: 0; border: 0;
  background: none; color: var(--fjn-brand-600); font-size: var(--fjn-fs-body); font-weight: var(--fjn-fw-bold); white-space: nowrap; cursor: pointer;
}
.fjn-auth__logout .fjn-icon { color: var(--fjn-text); }
.fjn-auth__logout:focus-visible { outline: none; box-shadow: var(--fjn-focus-btn); border-radius: 4px; }