/* =====================================================================
   CPS – kontrola statusu ofert po kodzie QR
   Paleta i krój jak na stronie głównej (navy / gold, Space Grotesk).
   Płaskie kolory, bez gradientów. Projektowane pod telefon trzymany w ręce.
   ===================================================================== */

:root {
    --navy-900: #0d1f3c;
    --navy-800: #1a365d;
    --navy-700: #334e68;
    --navy-600: #486581;
    --navy-500: #627d98;
    --navy-300: #9fb3c8;
    --navy-200: #bcccdc;
    --navy-100: #d9e2ec;
    --navy-50:  #f0f4f8;
    --gold:     #f7ad0c;
    --gold-dark:#d99500;
    --white:    #ffffff;

    /* Wynik sprawdzenia */
    --ok:    #15803d;
    --warn:  #b45309;
    --bad:   #b91c1c;
    --gone:  #7f1d1d;
    --muted: #486581;

    --radius: 14px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--navy-900);
    background: var(--navy-50);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.sprite { position: absolute; }
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ico {
    width: 1.25em; height: 1.25em; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

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

.boot {
    position: fixed; inset: 0; display: grid; place-items: center;
    color: var(--navy-500); background: var(--navy-50);
}

/* ---------- Przyciski i pola ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 48px; padding: 0 18px;
    border: 0; border-radius: 12px;
    font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background-color .15s, transform .05s;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn--primary { background: var(--gold); color: var(--navy-900); }
.btn--primary:hover { background: var(--gold-dark); }
.btn--light { background: var(--white); color: var(--navy-800); box-shadow: inset 0 0 0 1.5px var(--navy-200); }
.btn--light:hover { background: var(--navy-50); }
.btn--block { width: 100%; }

.iconbtn {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 50%; background: transparent;
}
.iconbtn .ico { width: 22px; height: 22px; }
.iconbtn--light { color: var(--white); }
.iconbtn--light:hover { background: var(--navy-800); }
.iconbtn--glass { color: var(--white); background: rgba(13, 31, 60, .72); }
.iconbtn--glass[aria-pressed="true"] { background: var(--gold); color: var(--navy-900); }

.input {
    width: 100%; min-height: 48px; padding: 0 14px;
    border: 1.5px solid var(--navy-200); border-radius: 12px;
    background: var(--white); color: var(--navy-900);
    font-size: 16px; /* poniżej 16px iOS powiększa stronę po dotknięciu pola */
}
.input::placeholder { color: var(--navy-500); }
.input:focus { outline: none; border-color: var(--navy-800); box-shadow: 0 0 0 3px var(--navy-100); }
.input--pin { letter-spacing: .3em; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Logowanie ---------- */
.login {
    min-height: 100%; display: grid; place-items: center;
    padding: calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
    background: var(--white);
}
.login__box { width: 100%; max-width: 320px; text-align: center; }
.login__logo { width: 190px; height: auto; margin-bottom: 28px; }
.login__title { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.login__hint { min-height: 2.8em; margin-top: 6px; color: var(--navy-600); }
.login__hint.is-error { color: var(--bad); font-weight: 600; }

.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 14px 0 26px; }
.pin-dots span {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--navy-300); background: transparent;
    transition: background-color .1s, border-color .1s;
}
.pin-dots span.is-on { background: var(--navy-900); border-color: var(--navy-900); }
.pin-dots.is-shake { animation: shake .4s; }
@keyframes shake {
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.key {
    display: grid; place-items: center;
    height: 68px; padding: 0;
    border: 0; border-radius: var(--radius);
    background: var(--navy-50); color: var(--navy-900);
    font-size: 26px; font-weight: 600;
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.key:hover { background: var(--navy-100); }
.key:active { background: var(--navy-200); }
.key--empty { background: transparent; }
.key--back { background: transparent; color: var(--navy-600); }
.key--back .ico { width: 28px; height: 28px; }
.keypad.is-locked .key { opacity: .4; pointer-events: none; }

/* ---------- Układ apki ---------- */
.app { height: 100%; height: 100dvh; display: flex; flex-direction: column; }

.topbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: calc(8px + var(--safe-top)) 8px 8px 16px;
    background: var(--navy-900); color: var(--white);
}
.topbar__title { font-size: 18px; font-weight: 700; margin-right: auto; }
.topbar__user { font-size: 14px; color: var(--navy-200); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tab { flex: 1 1 auto; min-height: 0; }
.tab--scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tab--scan { display: flex; flex-direction: column; background: var(--navy-900); }
.page { max-width: 640px; margin: 0 auto; padding: 16px 16px 24px; }

.tabbar {
    flex: 0 0 auto; display: flex;
    padding-bottom: var(--safe-bottom);
    background: var(--white); border-top: 1px solid var(--navy-100);
}
.tabbar__btn {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: 58px; padding: 8px 4px;
    border: 0; background: transparent; color: var(--navy-500);
    font-size: 12px; font-weight: 600;
}
.tabbar__btn .ico { width: 24px; height: 24px; }
.tabbar__btn.is-on { color: var(--navy-900); box-shadow: inset 0 3px 0 var(--gold); }

/* ---------- Skaner ---------- */
.scanner { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #000; }
.scanner__video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ramkę pozycjonuje biblioteka skanera (dokładnie tam, gdzie szuka kodu) */
.scan-frame { border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
.scan-frame i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--gold); }
.scan-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 18px; }
.scan-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 18px; }
.scan-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }

.scanner__msg {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    padding: 24px; text-align: center; color: var(--white); background: var(--navy-900);
}
.scanner__msg p { max-width: 320px; }
.scanner__msg-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; }

.scanner__tools { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 10px; }
.scanner__hint {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    padding: 8px 14px; border-radius: 999px;
    font-size: 14px; font-weight: 500; white-space: nowrap;
    color: var(--white); background: rgba(13, 31, 60, .78);
}
.scanner__hint.is-busy { background: var(--gold); color: var(--navy-900); }

.manual { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px; background: var(--navy-900); }
.manual .input { border-color: var(--navy-700); }
.manual .btn { flex: 0 0 auto; }

/* ---------- Wynik ---------- */
.result {
    position: fixed; inset: 0; z-index: 20;
    display: flex; flex-direction: column;
    background: var(--navy-50);
}
.result__hero {
    flex: 0 0 auto; text-align: center; color: var(--white);
    padding: calc(22px + var(--safe-top)) 20px 22px;
    background: var(--muted);
}
.result[data-tone="ok"]   .result__hero { background: var(--ok); }
.result[data-tone="warn"] .result__hero { background: var(--warn); }
.result[data-tone="bad"]  .result__hero { background: var(--bad); }
.result[data-tone="gone"] .result__hero { background: var(--gone); }
.result__icon { width: 64px; height: 64px; stroke-width: 1.75; }
.result__label { margin-top: 4px; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.result__sub { margin-top: 8px; font-size: 15px; opacity: .95; }

.result__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px;
    display: grid; grid-template-columns: minmax(0, 608px); justify-content: center; align-content: start; gap: 12px;
}

.result__actions {
    flex: 0 0 auto; display: flex; gap: 10px;
    padding: 12px 16px calc(12px + var(--safe-bottom));
    background: var(--white); border-top: 1px solid var(--navy-100);
}
.result__actions .btn { flex: 1 1 0; min-height: 56px; font-size: 17px; }
.result__actions #result-recheck { flex: 0 1 auto; }

.card { padding: 14px; border-radius: var(--radius); background: var(--white); box-shadow: 0 1px 2px rgba(13, 31, 60, .08); }
.card__title { font-size: 17px; font-weight: 700; }

.offer { display: flex; gap: 12px; align-items: center; }
.offer__thumb {
    flex: 0 0 auto; width: 84px; height: 84px; border-radius: 10px; overflow: hidden;
    display: grid; place-items: center; background: var(--navy-100); color: var(--navy-500);
}
.offer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer__thumb .ico { width: 30px; height: 30px; }
.offer__main { min-width: 0; }
.offer__ref { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--navy-600); }
.offer__title { font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.offer__meta { font-size: 14px; color: var(--navy-600); }
.offer__price { margin-top: 2px; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

.facts { display: grid; gap: 6px; margin: 0; font-size: 14px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; }
.facts dt { color: var(--navy-600); }
.facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: #fef3c7; color: #78350f; font-size: 14px; font-weight: 500; }
.notice .ico { margin-top: 1px; }

.links { display: flex; flex-wrap: wrap; gap: 10px; }
.links .btn { flex: 1 1 140px; }

.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; color: var(--navy-700); }

.section-title { margin: 22px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-600); }
.card .section-title { margin-top: 0; }

.checks { display: grid; gap: 8px; font-size: 14px; }
.checks li { display: flex; align-items: center; gap: 8px; }
.checks time { font-variant-numeric: tabular-nums; }
.checks .who { color: var(--navy-600); margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Plakietki wyniku ---------- */
.pill {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    color: var(--white); background: var(--muted);
}
.pill--ok { background: var(--ok); }
.pill--warn { background: var(--warn); }
.pill--bad { background: var(--bad); }
.pill--gone { background: var(--gone); }

/* ---------- Historia ---------- */
.summary { font-size: 14px; color: var(--navy-600); margin-bottom: 12px; }
.summary b { color: var(--navy-900); }

.search { position: relative; display: block; }
.search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--navy-500); pointer-events: none; }
.search .input { padding-left: 42px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 14px;
    border: 0; border-radius: 999px;
    background: var(--white); color: var(--navy-700); box-shadow: inset 0 0 0 1.5px var(--navy-200);
    font-size: 14px; font-weight: 600; text-decoration: none;
}
.chip.is-on { background: var(--navy-900); color: var(--white); box-shadow: none; }
.chip--link { margin-left: auto; }

.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 14px; border: 0; border-radius: var(--radius);
    background: var(--white); box-shadow: 0 1px 2px rgba(13, 31, 60, .08);
    text-align: left;
}
button.row:hover { background: #fafcfe; }
.row__main { display: block; flex: 1 1 auto; min-width: 0; }
.row__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 700; }
.row__title span:first-child { overflow-wrap: anywhere; }
.row__sub { display: block; font-size: 14px; font-weight: 400; color: var(--navy-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__meta { display: block; flex: 0 0 auto; font-weight: 400; text-align: right; font-size: 13px; color: var(--navy-600); font-variant-numeric: tabular-nums; }
.row__meta b { display: block; color: var(--navy-900); font-weight: 600; }
.row.is-off { opacity: .6; }
.row__actions { flex: 0 0 auto; display: flex; gap: 4px; }
.row__actions .iconbtn { color: var(--navy-700); background: var(--navy-50); }
.row__actions .iconbtn:hover { background: var(--navy-100); }

.empty { padding: 32px 16px; text-align: center; color: var(--navy-600); }
#history-more { margin-top: 12px; }

/* ---------- Formularze ---------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--navy-700); }
.field__row { display: flex; gap: 8px; }
.field__row .input { min-width: 0; }
.field__row .btn { flex: 0 0 auto; }
.checkbox { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.checkbox input { width: 22px; height: 22px; accent-color: var(--navy-900); }
.form__error { color: var(--bad); font-size: 14px; font-weight: 600; }
.form__note { font-size: 14px; color: var(--navy-600); }

.dialog {
    width: calc(100% - 32px); max-width: 400px; padding: 20px;
    border: 0; border-radius: 18px; color: var(--navy-900); background: var(--white);
    box-shadow: 0 20px 50px rgba(13, 31, 60, .35);
}
.dialog::backdrop { background: rgba(13, 31, 60, .6); }
.dialog__actions { display: flex; gap: 10px; }
.dialog__actions .btn { flex: 1 1 0; }

/* ---------- Komunikat ---------- */
.toast {
    position: fixed; left: 50%; bottom: calc(84px + var(--safe-bottom)); transform: translateX(-50%); z-index: 40;
    max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 12px;
    font-size: 15px; font-weight: 500; text-align: center;
    color: var(--white); background: var(--navy-900); box-shadow: 0 8px 24px rgba(13, 31, 60, .3);
}

@media (min-width: 720px) {
    .scanner__hint { font-size: 15px; }
    .result__label { font-size: 40px; }
}

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