/*
 * FENIX - system projektowy calej aplikacji (B1). Klasy z przedrostkiem fx-.
 * Przyklady uzycia: fenix/RDZEN-API.md.
 *
 * ZASADY:
 *   - Duzo prosciej niz Enigma: jedna kolumna, duze pola, malo kolorow.
 *   - Kazdy element dotykowy ma co najmniej 48 px (rekawice, plac, kabina).
 *   - Czcionki systemowe, ikony jako SVG wpisane w strone - zero CDN,
 *     aplikacja ma wstac bez zasiegu.
 *   - Motyw przelaczany RECZNIE (data-theme na <html>, wybor w localStorage).
 *     Celowo bez @media (prefers-color-scheme) - wlasciciel chce jasny jako
 *     domyslny niezaleznie od ustawien telefonu.
 *   - Pola 16 px - mniejsza czcionka kaze Safari przyblizac ekran przy dotyku.
 */

:root {
    color-scheme: light;
    --fx-marka: #c22e2f;
    --fx-marka-mocna: #a32526;
    --fx-marka-tekst: #b3292a;
    --fx-marka-tlo: #fbeaea;
    --fx-na-marce: #ffffff;
    --fx-pasek: #c22e2f;

    --fx-tlo: #f3f4f6;
    --fx-karta: #ffffff;
    --fx-karta-wcisniecie: #f6f7f9;
    --fx-tekst: #1d2127;
    --fx-slaby: #5d6470;
    --fx-ramka: #dde1e6;
    --fx-ramka-mocna: #b9c0ca;
    --fx-pole-tlo: #ffffff;

    --fx-ok: #146c3a;
    --fx-ok-tlo: #e5f4ea;
    --fx-uwaga: #7a5300;
    --fx-uwaga-tlo: #fff3d1;
    --fx-blad: #a8201a;
    --fx-blad-tlo: #fdeaea;
    --fx-info: #1a4f8a;
    --fx-info-tlo: #e8f0fa;

    --fx-cien: 0 1px 2px rgba(17, 24, 39, .06), 0 2px 6px rgba(17, 24, 39, .06);
    --fx-cien-mocny: 0 6px 24px rgba(17, 24, 39, .18);
    --fx-promien: 14px;
    --fx-promien-maly: 10px;
    --fx-dotyk: 48px;
    --fx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fx-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Ciemny: grafit, nie granat. Marka rozjasniona tam, gdzie jest TEKSTEM -
   #c22e2f na ciemnym tle ma za slaby kontrast. Pasek przyciemniony, zeby
   w nocy nie swiecil czerwienia po oczach. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --fx-marka: #d8494a;
    --fx-marka-mocna: #c23b3c;
    --fx-marka-tekst: #ff8a8b;
    --fx-marka-tlo: #44262a;
    --fx-na-marce: #ffffff;
    --fx-pasek: #7d1b1c;

    --fx-tlo: #1d2025;
    --fx-karta: #272b31;
    --fx-karta-wcisniecie: #2f343b;
    --fx-tekst: #e8eaed;
    --fx-slaby: #a6adb8;
    --fx-ramka: #3a4048;
    --fx-ramka-mocna: #565e69;
    --fx-pole-tlo: #1f2328;

    --fx-ok: #74d394;
    --fx-ok-tlo: #1e3a29;
    --fx-uwaga: #f2d48a;
    --fx-uwaga-tlo: #44370f;
    --fx-blad: #ff9a94;
    --fx-blad-tlo: #4a2222;
    --fx-info: #8cbcf0;
    --fx-info-tlo: #22303f;

    --fx-cien: 0 1px 2px rgba(0, 0, 0, .35);
    --fx-cien-mocny: 0 6px 24px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------- baza */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fx-tlo);
    color: var(--fx-tekst);
    font: 16px/1.5 var(--fx-font);
    -webkit-tap-highlight-color: transparent;
    padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--fx-marka-tekst); }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.25; }
code, .fx-kod { font-family: var(--fx-mono); }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--fx-info); outline-offset: 2px; }

.fx-ikona { display: inline-block; flex: none; vertical-align: middle; }

/* --------------------------------------------------------------- pasek */
.fx-pasek {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--fx-pasek);
    color: var(--fx-na-marce);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.fx-pasek-lewa, .fx-pasek-prawa { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fx-pasek-logo { display: flex; align-items: center; min-height: var(--fx-dotyk); padding: 0 8px; }
.fx-pasek .fx-logo { height: 30px; width: auto; display: block; }

.fx-pasek-przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fx-dotyk);
    height: var(--fx-dotyk);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}
.fx-pasek-przycisk:hover { background: rgba(255, 255, 255, .14); }
.fx-pasek-przycisk:active { background: rgba(255, 255, 255, .24); }
.fx-pasek .fx-pasek-przycisk:focus-visible { outline-color: #fff; }

/* Przycisk motywu pokazuje to, CO SIE STANIE: ksiezyc w jasnym, slonce w ciemnym. */
.fx-ikona-slonce { display: none; }
:root[data-theme="dark"] .fx-ikona-slonce { display: inline-block; }
:root[data-theme="dark"] .fx-ikona-ksiezyc { display: none; }

/* Licznik kolejki i brak zasiegu - odznaki na pasku. */
.fx-kolejka, .fx-siec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.fx-kolejka { background: #fff; color: #7a1c1d; }
.fx-kolejka.fx-kolejka-blad { background: #ffe9a8; color: #5a3c00; }
.fx-siec { background: rgba(0, 0, 0, .28); color: #fff; }
@media (max-width: 420px) {
    .fx-kolejka-opis, .fx-siec-opis { display: none; }
}

/* --------------------------------------------------------------- tresc */
.fx-tresc {
    max-width: 720px;
    margin: 0 auto;
    padding: 18px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}
.fx-szeroka .fx-tresc { max-width: 1040px; }

.fx-tytul { font-size: 1.45rem; margin: 4px 0 16px; font-weight: 800; letter-spacing: -.01em; }
.fx-podtytul { font-size: 1.05rem; margin: 22px 0 10px; font-weight: 700; }
.fx-wstep { color: var(--fx-slaby); margin: -8px 0 18px; }
.fx-drobne { color: var(--fx-slaby); font-size: .875rem; }
.fx-pusto {
    color: var(--fx-slaby);
    text-align: center;
    padding: 28px 16px;
    border: 2px dashed var(--fx-ramka);
    border-radius: var(--fx-promien);
    margin: 12px 0;
}
.fx-stopka {
    text-align: center;
    color: var(--fx-slaby);
    font-size: .8rem;
    padding: 8px 16px 24px;
}

/* --------------------------------------------------------------- kafle */
/* Start aplikacji: duze kafle modulow. Dwie kolumny na telefonie, trzy na
   szerokim ekranie. Kafel to jeden duzy cel do kciuka, nie przycisk w kafelku. */
.fx-kafle {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 8px 0 20px;
}
.fx-kafel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-height: 140px;
    padding: 16px;
    background: var(--fx-karta);
    color: var(--fx-tekst);
    border: 1px solid var(--fx-ramka);
    border-radius: var(--fx-promien);
    box-shadow: var(--fx-cien);
    text-decoration: none;
    transition: transform .08s ease, background-color .12s ease;
}
.fx-kafel:hover { border-color: var(--fx-ramka-mocna); }
.fx-kafel:active { transform: scale(.98); background: var(--fx-karta-wcisniecie); }
.fx-kafel-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--fx-marka-tlo);
    color: var(--fx-marka-tekst);
}
.fx-kafel-nazwa { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.fx-kafel-opis { display: block; color: var(--fx-slaby); font-size: .85rem; font-weight: 400; margin-top: 2px; }
@media (max-width: 340px) { .fx-kafle { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- karty */
.fx-karta {
    background: var(--fx-karta);
    border: 1px solid var(--fx-ramka);
    border-radius: var(--fx-promien);
    box-shadow: var(--fx-cien);
    padding: 16px;
    margin: 0 0 14px;
}
.fx-karta > :first-child { margin-top: 0; }
.fx-karta > :last-child { margin-bottom: 0; }
.fx-karta-naglowek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 800;
}

/* --------------------------------------------------------------- listy */
.fx-lista {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    background: var(--fx-karta);
    border: 1px solid var(--fx-ramka);
    border-radius: var(--fx-promien);
    overflow: hidden;
}
.fx-lista-poz {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 14px;
    border-top: 1px solid var(--fx-ramka);
}
.fx-lista-poz:first-child { border-top: 0; }
.fx-lista-poz-kolumna { flex-direction: column; align-items: stretch; }
a.fx-lista-poz, .fx-lista-poz > a.fx-lista-link {
    color: var(--fx-tekst);
    text-decoration: none;
}
a.fx-lista-poz:active, .fx-lista-poz > a.fx-lista-link:active { background: var(--fx-karta-wcisniecie); }
.fx-lista-poz > a.fx-lista-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-height: 60px;
    margin: -10px -14px;
    padding: 10px 14px;
}
.fx-lista-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--fx-marka-tlo);
    color: var(--fx-marka-tekst);
    flex: none;
}
.fx-lista-tresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-lista-tresc strong { font-weight: 700; overflow-wrap: anywhere; }
.fx-lista-strzalka { color: var(--fx-slaby); flex: none; }

/* -------------------------------------------------------------- przyciski */
.fx-przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--fx-dotyk);
    padding: 10px 18px;
    border: 2px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
.fx-przycisk:active { transform: scale(.98); }
.fx-przycisk:disabled, .fx-przycisk[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.fx-przycisk-pelny { display: flex; width: 100%; }
.fx-przycisk-duzy { min-height: 60px; font-size: 1.1rem; }

.fx-przycisk-glowny { background: var(--fx-marka); color: var(--fx-na-marce); }
.fx-przycisk-glowny:hover { background: var(--fx-marka-mocna); }

.fx-przycisk-drugi { background: var(--fx-karta); color: var(--fx-tekst); border-color: var(--fx-ramka-mocna); }
.fx-przycisk-drugi:hover { background: var(--fx-karta-wcisniecie); }

.fx-przycisk-niebezpieczny { background: var(--fx-karta); color: var(--fx-blad); border-color: currentColor; }
.fx-przycisk-niebezpieczny:hover { background: var(--fx-blad-tlo); }

.fx-przycisk-ok { background: var(--fx-ok); color: #fff; }
:root[data-theme="dark"] .fx-przycisk-ok { color: #10261a; }

.fx-wiersz { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Rozpoznaj towar: odnosnik "Szukaj EAN w internecie" zaraz nad rzedem "Zrob zdjecie etykiety". */
.fx-r-internet + .fx-wiersz, .fx-wiersz + .fx-r-internet { margin-top: 10px; }
.fx-wiersz > .fx-przycisk { flex: 1 1 140px; }
.fx-siatka-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ----------------------------------------------------------------- pola */
.fx-pole { margin: 0 0 16px; }
.fx-pole > label, .fx-etykieta { display: block; font-weight: 700; margin: 0 0 6px; }
.fx-pole input[type="text"], .fx-pole input[type="password"], .fx-pole input[type="number"],
.fx-pole input[type="search"], .fx-pole input[type="tel"], .fx-pole input[type="email"],
.fx-pole input[type="date"], .fx-pole input[type="time"], .fx-pole select, .fx-pole textarea,
.fx-input {
    display: block;
    width: 100%;
    min-height: var(--fx-dotyk);
    padding: 11px 14px;
    font: inherit;
    font-size: 16px;
    color: var(--fx-tekst);
    background: var(--fx-pole-tlo);
    border: 2px solid var(--fx-ramka-mocna);
    border-radius: 12px;
    appearance: none;
}
.fx-pole textarea { min-height: 96px; resize: vertical; }
.fx-pole input:focus, .fx-pole select:focus, .fx-pole textarea:focus, .fx-input:focus {
    outline: none;
    border-color: var(--fx-info);
    box-shadow: 0 0 0 3px var(--fx-info-tlo);
}
.fx-pole-pomoc { color: var(--fx-slaby); font-size: .85rem; margin: 6px 0 0; }
.fx-pole-blad input, .fx-pole-blad select, .fx-pole-blad textarea { border-color: var(--fx-blad); }
.fx-pole-blad .fx-pole-pomoc { color: var(--fx-blad); font-weight: 600; }
.fx-pole-duze input { font-size: 1.6rem; font-weight: 800; text-align: center; min-height: 64px; letter-spacing: .02em; }
.fx-pole-kod input { font-family: var(--fx-mono); text-transform: uppercase; letter-spacing: .12em; text-align: center; }

/* Pole z przyciskiem obok (np. kod towaru + aparat). */
.fx-pole-z-przyciskiem { display: flex; gap: 8px; }
.fx-pole-z-przyciskiem > input { flex: 1; min-width: 0; }
.fx-pole-z-przyciskiem > .fx-przycisk { flex: none; min-width: var(--fx-dotyk); padding: 10px 12px; }

/* Haslo z oczkiem. */
.fx-haslo { position: relative; }
.fx-haslo input { padding-right: 56px !important; }
.fx-oko {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 100%;
    min-height: var(--fx-dotyk);
    border: 0;
    background: transparent;
    color: var(--fx-slaby);
    cursor: pointer;
    border-radius: 0 12px 12px 0;
}
.fx-oko[aria-pressed="true"] { color: var(--fx-info); }

/* Pole wyboru i przelacznik - caly wiersz klikalny, 48 px. */
.fx-wybor {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--fx-dotyk);
    padding: 8px 0;
    cursor: pointer;
    font-weight: 600;
}
.fx-wybor input[type="checkbox"], .fx-wybor input[type="radio"] {
    width: 24px;
    height: 24px;
    margin: 0;
    flex: none;
    accent-color: var(--fx-marka);
}

/* -------------------------------------------------------------- odznaki */
.fx-odznaka {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    background: var(--fx-karta-wcisniecie);
    color: var(--fx-slaby);
    border: 1px solid var(--fx-ramka);
}
.fx-odznaka-ok { background: var(--fx-ok-tlo); color: var(--fx-ok); border-color: transparent; }
.fx-odznaka-uwaga { background: var(--fx-uwaga-tlo); color: var(--fx-uwaga); border-color: transparent; }
.fx-odznaka-blad { background: var(--fx-blad-tlo); color: var(--fx-blad); border-color: transparent; white-space: normal; }
.fx-odznaka-info { background: var(--fx-info-tlo); color: var(--fx-info); border-color: transparent; }
.fx-odznaka-marka { background: var(--fx-marka-tlo); color: var(--fx-marka-tekst); border-color: transparent; }

/* ----------------------------------------------------------- komunikaty */
.fx-komunikat {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    margin: 0 0 14px;
    border-radius: var(--fx-promien-maly);
    font-weight: 600;
    background: var(--fx-info-tlo);
    color: var(--fx-info);
}
.fx-komunikat > div { flex: 1; min-width: 0; }
.fx-komunikat .fx-ikona { margin-top: 1px; }
.fx-komunikat-ok { background: var(--fx-ok-tlo); color: var(--fx-ok); }
.fx-komunikat-uwaga { background: var(--fx-uwaga-tlo); color: var(--fx-uwaga); }
.fx-komunikat-blad { background: var(--fx-blad-tlo); color: var(--fx-blad); }
.fx-komunikat-info { background: var(--fx-info-tlo); color: var(--fx-info); }

/* Toasty - nad dolna krawedzia, nad kciukiem, nie zaslaniaja paska. */
.fx-toasty {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    pointer-events: none;
}
.fx-toast {
    pointer-events: auto;
    max-width: 560px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: var(--fx-cien-mocny);
    background: #2b2f36;
    color: #fff;
    animation: fx-wjazd .18s ease-out;
    cursor: pointer;
}
.fx-toast-ok { background: #146c3a; }
.fx-toast-uwaga { background: #8a5d00; }
.fx-toast-blad { background: #a8201a; }
.fx-toast-znika { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
@keyframes fx-wjazd { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Ladowanie. */
.fx-ladowanie {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid var(--fx-ramka);
    border-top-color: var(--fx-marka);
    border-radius: 50%;
    animation: fx-obrot .8s linear infinite;
    vertical-align: middle;
}
@keyframes fx-obrot { to { transform: rotate(360deg); } }

/* --------------------------------------------------- liczby i tabele */
.fx-liczba-duza {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--fx-marka-tekst);
    font-variant-numeric: tabular-nums;
}
.fx-tabela-otoczka { overflow-x: auto; margin: 0 0 14px; }
.fx-tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fx-tabela th, .fx-tabela td { padding: 10px 8px; border-bottom: 1px solid var(--fx-ramka); text-align: left; vertical-align: top; }
.fx-tabela th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--fx-slaby); }
.fx-tabela td.fx-liczba, .fx-tabela th.fx-liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Kod do przepisania (np. numer dokumentu). */
.fx-kod {
    font-size: 1.05rem;
    letter-spacing: .06em;
    background: var(--fx-karta-wcisniecie);
    border: 1px solid var(--fx-ramka);
    border-radius: 8px;
    padding: 2px 8px;
}

/* --------------------------------------------- logowanie i aktywacja */
.fx-logowanie {
    max-width: 440px;
    margin: 0 auto;
    padding: calc(24px + env(safe-area-inset-top)) 16px 32px;
}
.fx-logowanie-marka {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    margin: 0 0 14px;
    border-radius: var(--fx-promien);
    background: var(--fx-pasek);
    color: #fff;
    box-shadow: var(--fx-cien);
}
.fx-logowanie-marka .fx-logo { height: 40px; width: auto; }
.fx-logowanie-nazwa {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .02em;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, .45);
}
.fx-logowanie-marka .fx-motyw-przycisk { margin-left: auto; }
.fx-logowanie-karta { padding: 20px; }
.fx-logowanie-karta .fx-tytul { font-size: 1.3rem; margin-bottom: 12px; }
.fx-logowanie-stopka { text-align: center; color: var(--fx-slaby); font-size: .8rem; margin-top: 18px; }

/* ----------------------------------------------- licznik synchronizacji */
.fx-licznik { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- dostepnosc */
.fx-tylko-czytnik {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}