/* ============================================================================
 * Fájl:        assets/pselector.css
 * Feladat:     A pselector teljes arculata — raktári PDA-kra (320–480 px).
 *
 * Verzió:      1.1
 * Készítette:  Claude Opus 5 — 2026-09-03
 * Projekt:     pselector átdesignolása a parcelcheck arculatára
 * v1.1:        rácsos háttér kivéve; asztali nézetben a lap 540 px-es kártya
 * Terv:        claude.ai/code/artifact/f16a5b65-8c34-456d-9f7a-cf5b2e1b1d06
 *
 * HONNAN JÖN: a dev.parcelcheck.network.local arculata (parcelcheck.css v2.4),
 * rendszerré emelve. A tokenek szándékosan bájtra azonosak vele, hogy a két
 * felület egy nyelvet beszéljen — a raktáros ugyanazon a PDA-n váltogat köztük.
 *
 * BETŰK — KÉT SZEREP, ez a rendszer legfontosabb szabálya:
 *   Bricolage Grotesque .... minden, ami SZÓ (cím, gomb, címke, csempe-felirat)
 *   Ubuntu Mono ............ minden, ami SZÁM vagy AZONOSÍTÓ
 *
 *   Nincs nagybetűsítés és nincs betűköz-nyújtás a szavakon. A korábbi
 *   felirat-stílus (nagybetű + ritkított monospace) lassan olvasható volt —
 *   itt viszont egy pillantásból kell felismerni, melyik gomb melyik.
 *
 *   Az Ubuntu Mono azért ez, mert TISZTA a nullája. A JetBrains Mono nullájában
 *   pötty van, amit a raktári dolgozók más karakternek néznek (user jelzése,
 *   2026-05-21). Ezért minden azonosító, vonalkód, időpont ezzel megy.
 *
 * MÉRETEK: 320 px a padló, 360 px az alap, 480 px felett tágasabb. A TARTALOM
 *   nyúlik, a CÉLFELÜLETEK nem: gomb, mező és sormagasság mindig >= 44 px,
 *   mert azt az ujj mérete szabja meg, nem a kijelzőé.
 * ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
    --bg:           #F3F4F7;

    --surface:      #FFFFFF;
    --surface-2:    #F7F8FB;
    --surface-3:    #EEF1F8;

    --border:       #DDE2EB;

    --text:         #1A1B22;
    --text-muted:   #5F6371;
    --text-dim:     #9CA1AE;

    --accent:        #97ADFF;
    --accent-strong: #7A92F2;
    --accent-deep:   #5D74D8;
    --accent-tint:   #EAEEFB;
    --accent-glow:   rgba(151, 173, 255, 0.35);
    --jelzo:         #FFE066;      /* a wordmark perjele es a nyil */

    --ok:      #2BA34E;
    --danger:  #D93B3B;
    --warn:    #E89B1F;
    --hiba-bg: #FDECEC;

    --radius-sm: 4px;             /* jelveny es ikon-gomb */
    --radius:    8px;             /* gomb, mezo, csempe, lista */
    --radius-lg: 16px;            /* csak modal */

    --font:      'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-num:  'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --t-fast: 120ms;
    --t-med:  220ms;
}

/* --- Reset --------------------------------------------------------------- */
/* A box-sizing NEM elhagyhato: nelkule a width:100% mezok a paddinggel es a
   kerettel EGYUTT szelesebbek a szulonel, es kilognak a PDA kepernyojerol. */
* { box-sizing: border-box; }
*:focus { outline: none; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* A 32 px-es racs-hatter KIVEVE (user kerese, 2026-09-03): adatokkal teli
   listan zavaro, a szemet a tartalomrol a hatterre huzza. A parcelcheckben
   megmaradhat — ott egyetlen nagy elem van a kepernyon, nem tablazat. */

/* --- A lap --------------------------------------------------------------- */
.lap {
    position: relative;
    z-index: 1;
    width: 100%;
    background: var(--surface);
}

/* --- Fejléc -------------------------------------------------------------- */
/* 60 px magas. A also korlatot a 44 px-es ikon-gomb adja: ennel lejjebb csak
   ugy lehetne menni, ha a gomb menne 44 ala — az pedig keztyus kezzel keves. */
.fejlec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    min-height: 60px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: #FFFFFF;
}

.fejlec-kozep { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }

.wordmark {
    display: block;
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #FFFFFF;
}
.wordmark .perjel { color: var(--jelzo); font-weight: 600; }

.wordmark .jelveny {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    vertical-align: middle;
    line-height: 1.2;
}

.belepve {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.belepve::before { content: '▸ '; color: var(--jelzo); }

/* A verziot LATNI kell a futo feluleten, nem csak a fajl-fejlecben: igy egy
   pillantasbol kiderul, nem egy regi, cache-elt peldany fut-e. */
.verzio {
    flex-shrink: 0;
    font-family: var(--font-num);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);
}

/* Ikon-gomb a fejlecben (vissza, kilepes). 44x44 — ez a padlo. */
.ikongomb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    transition: background var(--t-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.ikongomb:active { background: rgba(255, 255, 255, 0.32); }
.ikongomb svg { width: 20px; height: 20px; display: block; }

/* --- Szakaszcímke -------------------------------------------------------- */
.szakasz {
    margin: 18px 20px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
.szakasz::before { content: '──\00a0\00a0'; color: var(--accent); }

/* Kozepre zart valtozat, ket oldalt elhalo vonallal (mezo folott). */
.szakasz-kozep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 20px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
.szakasz-kozep::before,
.szakasz-kozep::after {
    content: '';
    flex: 1;
    height: 1px;
    max-width: 60px;
    background: linear-gradient(90deg, transparent, var(--border) 50%, transparent);
}

/* --- Csempék ------------------------------------------------------------- */
.csempek {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 20px;
}
@media (min-width: 480px) {
    .csempek { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A csempe FEHER, nem szurkes: a warehouse-icon.png es a dpd-back.jpg
   atlatszatlan raszterkep feher hatterrel — szurkes csempen feher
   teglalapkent ulne. A csempet a keret hatarolja, nem a kitoltes. */
.csempe {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color var(--t-med) ease, box-shadow var(--t-med) ease,
                transform var(--t-med) ease;
    -webkit-tap-highlight-color: transparent;
}
.csempe:active {
    transform: scale(0.98);
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(122, 146, 242, 0.22);
}

/* Az EREDETI ikonok maradnak. A raktarosok EZEKET ismerik fel: evek ota
   ezekre nyulnak. A csempe formaja es a felirat valtozhat, az ikon nem. */
.csempe img {
    height: 58px;
    width: 100%;
    object-fit: contain;
}
.csempe span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-align: center;
    line-height: 1.25;
}

/* --- Sor-elem (admin-funkcio, lista) ------------------------------------- */
.sor {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 0 16px;
    margin: 0 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    -webkit-tap-highlight-color: transparent;
}
.sor:active { border-color: var(--accent); }
.sor img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.sor .cimke { flex-grow: 1; font-size: 15px; font-weight: 700; }
.sor .szam  { font-family: var(--font-num); font-size: 17px; font-weight: 700; color: var(--accent-deep); }
.sor .nyil  { flex-shrink: 0; color: var(--text-dim); }

/* --- Űrlap --------------------------------------------------------------- */
.urlap { padding: 0 20px; }

.mezocimke {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.mezocimke + .mezocimke { margin-top: 16px; }

/* A beviteli mezo ERTEKE azonosito (nev, vonalkod), ezert Ubuntu Mono. */
input[type="text"],
input[type="password"] {
    width: 100%;
    min-height: 56px;
    padding: 16px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-num);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    transition: border-color var(--t-med) ease, box-shadow var(--t-med) ease,
                background var(--t-med) ease;
    caret-color: var(--accent-deep);
}
input[type="password"] { letter-spacing: 0.3em; }

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--accent-tint), 0 0 18px var(--accent-glow);
}
input::placeholder { color: var(--text-dim); font-weight: 400; letter-spacing: 0; }

.mezo + .mezocimke { margin-top: 16px; }
.mezo { margin-bottom: 0; }

/* --- Gombok -------------------------------------------------------------- */
/* Kepernyonkent EGYETLEN elsodleges gomb. A min-height 52 px: a 44-es padlo
   folott van, mert ez a lap fo cselekvese. */
.gomb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin-top: 20px;
    padding: 0 24px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(122, 146, 242, 0.25);
    transition: box-shadow var(--t-fast) ease, transform var(--t-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.gomb:active { transform: scale(0.985); box-shadow: 0 2px 8px rgba(122, 146, 242, 0.3); }

.gomb.masodlagos {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    box-shadow: none;
    font-size: 15px;
    margin: 18px 20px 24px;
    width: auto;
}
.gomb.masodlagos::after { content: '\00a0\00a0↗'; opacity: 0.5; }

.gomb.tiltott {
    background: var(--surface-3);
    color: var(--text-dim);
    box-shadow: none;
    pointer-events: none;
}

/* --- Lábléc-sáv ---------------------------------------------------------- */
.lablec {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-muted);
    padding: 16px 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(247, 248, 251, 0) 0%, var(--surface-2) 100%);
}
.lablec .pont {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 8px rgba(43, 163, 78, 0.3);
    flex-shrink: 0;
}
.lablec .szam { font-family: var(--font-num); font-weight: 700; color: var(--text); }

/* --- Hibadoboz ----------------------------------------------------------- */
.hibadoboz {
    margin: 24px 20px 0;
    padding: 18px 16px;
    background: var(--hiba-bg);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    text-align: center;
}
.hibadoboz svg { display: block; margin: 0 auto 8px; }
.hibadoboz .cim { font-size: 16px; font-weight: 700; color: var(--danger); }
.hibadoboz .mit { font-size: 13px; line-height: 1.6; color: var(--text); margin-top: 8px; }

/* Visszaszamlalo: a raktaros lassa, hogy a keszulek EL, csak var. */
.varakozas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px 20px 0;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text-muted);
}
.varakozas .mp {
    font-family: var(--font-num);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.sugo {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
    text-align: center;
    padding: 18px 24px 24px;
}

/* --- Zár-ikon a belépőn -------------------------------------------------- */
.zarikon { display: block; margin: 30px auto 0; }

/* --- Kis képernyő (<380 px) ---------------------------------------------- */
@media (max-width: 380px) {
    .fejlec        { padding: 8px 12px; gap: 8px; }
    /* 320 px-en a fejlec egy sorba kell hogy ferjen: 320 - 24 (padding)
       - 44 (ikon-gomb) - 8 (koz) - ~30 (verzio) - 8 (koz) = ~206 px marad a
       wordmarknak. 16 px-es Bricolage 800 + szukebb jelveny ennyibe fer bele;
       18 px-nel a jelveny mar a kovetkezo sorba csuszott, es a fejlec 60-rol
       90 px-re nott. */
    .wordmark      { font-size: 16px; white-space: nowrap; }
    .wordmark .jelveny { margin-left: 6px; padding: 2px 6px; font-size: 9px; letter-spacing: 0.1em; }
    .verzio        { font-size: 11px; }
    .belepve       { font-size: 11px; }
    .szakasz,
    .szakasz-kozep { margin-left: 16px; margin-right: 16px; }
    .csempek,
    .urlap         { padding-left: 16px; padding-right: 16px; }
    .sor           { margin-left: 16px; margin-right: 16px; }
    .gomb.masodlagos { margin-left: 16px; margin-right: 16px; }
    .csempe span   { font-size: 13px; }
    input[type="text"],
    input[type="password"] { font-size: 17px; padding: 15px 12px; }
}

/* --- Nagy képernyő (>=480 px) -------------------------------------------- */
@media (min-width: 480px) {
    .wordmark { font-size: 24px; }
    /* A gomb es a mezo NEM no tovabb: a huvelykujj nem lett nagyobb. */
}

/* --- Asztali nézet (>=620 px) -------------------------------------------- */
/* Ezek a lapok PDA-ra keszultek: ott a teljes szelesseg a helyes, mert minden
   pixel szamit. Asztali gepen viszont ugyanez azt jelenti, hogy a beviteli
   mezo 1900 px szeles lesz — ami egy jelszohoz keptelenseg, es a szemnek
   sincs hol megkapaszkodnia.
   Ezert a munkateruletet 540 px-ben maximaljuk, es LAPKENT emeljuk ki a
   hatterbol. Igy asztali gepen is ugyanaz az elrendezes latszik, amit a
   raktaros a kezeben tart — csak keretben.
   A felhasznalo-kezelo NEM ilyen: az .fh-tartalom nincs .lap-ban, mert az
   asztali tablazat, es szandekosan teljes szelessegu. */
@media (min-width: 620px) {
    .lap {
        max-width: 540px;
        /* A FEJLÉC A LAP TETEJÉHEZ TAPAD: nincs felső margó. Függőlegesen
           semmit nem pazarolunk — a kézi terminálon ez a legdrágább irány,
           és asztali gépen sincs értelme egy üres csíknak a fejléc fölött.
           A kártya csak VÍZSZINTESEN van középre fogva. */
        margin: 0 auto;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(31, 41, 75, 0.10),
                    0 2px 6px rgba(31, 41, 75, 0.06);
    }
}

/* --- Mozgás-érzékenység -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }

}