/* APF Rdzeń — moduł pages 0.1.0 (R-02): strony bez aplikacji — rejestracja /signup, logowanie /login i /<nazwa>/login,
   lista aplikacji /user/, strona firmy /<nazwa>/. Dokłada się do ui.css (przyciski, pola, karty).
   Tylko tokeny z apps/shared/platform-theme.css (żadnych kolorów na sztywno, żadnych nowych tokenów).
   0.1.7 (R-41): główny przycisk stron platformy (<body class="apfc-platform">) w kolorze --platform-btn; karty rejestracji ze znakiem 102 i logotypem.
   0.1.8 (R-51): strony konta na całą szerokość — panel marki po lewej od 1000 px (.apfc-split, .apfc-side), szersza karta rejestracji
   (.apfc-card--wide, do 720 px) i formularz w siatce (.apfc-form--grid: pola parami od 700 px). */

.apfc-card-wrap--top { align-items: flex-start; padding-top: 32px; }
.apfc-brand { margin: 0 0 18px; font-weight: 700; font-size: 15px; color: var(--text-muted); letter-spacing: .02em; }
.apfc-lead { color: var(--text-muted); }

/* ---------- formularz ---------- */
.apfc-form { margin: 8px 0 0; }
.apfc-field { margin: 0 0 16px; }
.apfc-field .apfc-input[aria-invalid="true"] { border-color: var(--danger-color); }
.apfc-hint { display: block; margin: 6px 0 0; font-size: 14px; color: var(--text-muted); overflow-wrap: anywhere; }
.apfc-field-err { display: block; margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--err-fg); }
.apfc-warn {
    margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px;
    background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--border-color);
}
.apfc-name-state { display: block; min-height: 22px; margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.apfc-name-state[data-state="free"] { color: var(--ok-fg); }
.apfc-name-state[data-state="taken"], .apfc-name-state[data-state="not_allowed"], .apfc-name-state[data-state="invalid"] { color: var(--err-fg); }
.apfc-name-state[data-state="checking"], .apfc-name-state[data-state="error"] { color: var(--text-muted); font-weight: 400; }
.apfc-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.apfc-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--primary-color); }
.apfc-fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.apfc-fieldset legend { font-weight: 600; margin: 0 0 6px; padding: 0; }
.apfc-legal { margin: 0 0 4px; padding-left: 20px; }
.apfc-legal li { margin: 4px 0; }
.apfc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apfc-form .apfc-btn--primary { width: 100%; }

/* ---------- komunikaty na stronie ---------- */
.apfc-alert { padding: 12px 14px; border-radius: 10px; margin: 0 0 16px; border: 1px solid var(--border-color); }
.apfc-alert--err { background: var(--err-bg); color: var(--err-fg); }
.apfc-alert--ok { background: var(--ok-bg); color: var(--ok-fg); }

/* ---------- linki pod formularzem, przełącznik języka ---------- */
.apfc-links { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.apfc-links a, .apfc-links span { display: inline-flex; align-items: center; min-height: 44px; }
.apfc-links span { gap: 6px; flex-wrap: wrap; }
.apfc-lang { margin: 12px 0 0; font-size: 14px; color: var(--text-muted); }
.apfc-lang a, .apfc-lang strong { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* ---------- lista aplikacji /user/ ---------- */
.apfc-tiles { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.apfc-tiles a {
    display: flex; align-items: center; min-height: 56px; padding: 12px 16px; border-radius: 12px;
    border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-main);
    font-weight: 600; font-size: 17px; text-decoration: none;
}
.apfc-tiles a:hover { background: var(--bg-surface-hover); }

/* ---------- pasek górny: nazwa firmy obok nazwy aplikacji ---------- */
.apfc-topbar__company { font-weight: 400; color: var(--text-muted); }

.apfc-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 480px) {
    .apfc-card-wrap { padding: 16px; }
    .apfc-card { padding: 22px 16px; }
}

/* ---------- R-24 (pages 0.1.5): nagłówek grupy w menu konta (powłoka 0.1.8 dokłada <li class="apfc-menu__group" role="presentation">) ---------- */
.apfc-menu__group { padding: 10px 12px 4px; margin-top: 4px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 14px; font-weight: 600; }

/* ---------- R-28 (pages 0.1.6): karty aplikacji w rejestracji, „Pobierz dane”, strona potwierdzenia „Zacznij używać” ---------- */
.apfc-appcards { display: grid; gap: 10px; }
.apfc-appcard {
    display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--bg-surface);
}
.apfc-appcard:hover { background: var(--bg-surface-hover); }
.apfc-appcard:has(input:checked) { border-color: var(--primary-text); box-shadow: inset 0 0 0 1px var(--primary-text); }
.apfc-appcard input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--primary-color); }
.apfc-appcard__ico { font-size: 22px; line-height: 1; flex: none; }
.apfc-appcard__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apfc-appcard__t > span { font-size: 14px; color: var(--text-muted); }   /* 0.1.7: tylko opis (logotyp ma własne <span>) */
.apfc-lookup { margin: 8px 0 0; }
.apfc-lookup .apfc-btn { min-height: 44px; }
.apfc-lookup [hidden] { display: none; }
.apfc-lookup-state { display: block; min-height: 22px; margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.apfc-lookup-state[data-state="found"] { color: var(--ok-fg); }
.apfc-lookup-state[data-state="error"] { color: var(--err-fg); }
.apfc-lookup-state[data-state="checking"] { color: var(--text-muted); font-weight: 400; }
.apfc-input[readonly] { background: var(--bg-surface-alt); color: var(--text-muted); }
.apfh-confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.apfh-confirm form { margin: 0; }
.apfh-confirm .apfc-btn { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- R-41 (pages 0.1.7): marka Manager⁴ na stronach platformy ---------- */
/* Główny przycisk stron platformy (Start, logowanie, rejestracja, konto, kod z aplikacji, „Ustaw hasło”): czerń logo, w ciemnym motywie jasny.
   Powłoka aplikacji nie ma klasy apfc-platform, więc przyciski w aplikacjach są bez zmian. Wyjątek: przyciski w elemencie z data-app (karty aplikacji). */
.apfc-platform .apfc-btn--primary { background: var(--platform-btn); border-color: var(--platform-btn); color: var(--on-platform-btn); }
.apfc-platform .apfc-btn--primary:hover { background: var(--platform-btn); }
.apfc-platform [data-app] .apfc-btn--primary,
.apfc-platform .apfc-btn--primary[data-app] { background: var(--primary-color); border-color: var(--primary-color); color: var(--on-primary); }

/* Rejestracja: karta aplikacji Manager⁴ = ikona ze znakiem 102 i logotyp nazwy (kolor z data-app na <label>) */
.apfc-appcard--m4 { align-items: center; }
.apfc-appcard--m4 input { margin: 0; }
.apfc-appcard .apfc-appico { width: 44px; height: 44px; border-radius: 11px; }
.apfc-appcard .apfc-applogo { font-size: 17px; margin-bottom: 4px; }

/* ---------- R-51 (pages 0.1.8): strony konta na całą szerokość ---------- */
/* Układ: <div class="apfc-split"><aside class="apfc-side">…</aside><main class="apfc-card-wrap"><div class="apfc-card">…</div></main></div>.
   Panel marki jest pierwszy w DOM, więc kolejność Tab = kolejność wzrokowa (lewa kolumna, potem formularz). Poniżej 1000 px panelu nie ma (jak przed R-51). */
.apfc-side { display: none; }
.apfc-side[hidden] { display: none; }

/* Karta rejestracji: szersza od 700 px (do 720 px), poniżej jak dotąd. */
@media (min-width: 700px) {
    .apfc-card--wide { max-width: 720px; }
    .apfc-appcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .apfc-form--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
    .apfc-form--grid > * { grid-column: 1 / -1; }
    .apfc-form--grid > .apfc-field--half { grid-column: auto; }
    .apfc-form--grid > input[type="hidden"] { display: none; }
    /* NIP: „Pobierz dane” obok pola (ten sam porządek w DOM: pole, potem przycisk) */
    .apfc-form--grid .apfc-field:has(> .apfc-lookup) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
    .apfc-form--grid .apfc-field:has(> .apfc-lookup) > * { grid-column: 1 / -1; }
    .apfc-form--grid .apfc-field:has(> .apfc-lookup) > .apfc-input { grid-column: 1; }
    .apfc-form--grid .apfc-field:has(> .apfc-lookup) > .apfc-lookup { grid-column: 2; grid-row: 2; margin: 0; }
}

@media (min-width: 1000px) {
    .apfc-split { display: grid; grid-template-columns: minmax(360px, 40%) minmax(0, 1fr); min-height: 100vh; }
    .apfc-side { display: block; background: var(--bg-surface); border-right: 1px solid var(--border-color); }
    .apfc-side__in {
        position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
        max-width: 520px; margin: 0 auto; padding: 48px clamp(32px, 4vw, 64px);
    }
    .apfc-split .apfc-card-wrap { min-height: 100vh; align-items: flex-start; padding: 24px clamp(24px, 3vw, 56px); }
    .apfc-split .apfc-card { margin: auto 0; }                     /* wyśrodkowana w pionie; wyższa niż ekran = od góry */
    .apfc-split .apfc-card-wrap--top { padding-top: 24px; }
    .apfc-split .apfc-brand { display: none; }                      /* znak 102 jest w panelu */
}

.apfc-side__logo { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 26px; font-weight: 800; letter-spacing: .01em; color: var(--text-main); }
.apfc-side__mark { display: block; width: 64px; height: auto; flex: none; }
.apfc-side__lead { margin: 0 0 24px; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--text-main); }
.apfc-side__h { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text-muted); text-transform: none; }
.apfc-side__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.apfc-side__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.4; }
.apfc-side__tick {
    flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--ok-bg); color: var(--ok-fg); font-size: 15px; font-weight: 700;
}
.apfc-side__apps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.apfc-side__apps li { display: flex; align-items: center; gap: 14px; }
.apfc-side__ico.apfc-appico { width: 48px; height: 48px; border-radius: 12px; }
.apfc-side__app { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.apfc-side__app .apfc-applogo { font-size: 17px; }
.apfc-side__desc { font-size: 14px; color: var(--text-muted); }
.apfc-side__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.apfc-side__links a, .apfc-side__links span { display: inline-flex; align-items: center; min-height: 44px; }
.apfc-side__links span { gap: 6px; flex-wrap: wrap; }
.apfc-side__links a { color: var(--primary-text); font-weight: 600; }