/* * Design tokenek (CLAUDE.md 11. fejezet). Minden szín, méret és távolság * innen jön; nyers hexa érték a komponens-CSS-ben tilos. Ez az egyetlen * fájl, ahol hexa állhat. */ :root{ /* Alap: hideg, fémes felület — a hűtőlánc és a rozsdamentes acél világa */ --c-bg: #F7F9FA; --c-surface: #FFFFFF; --c-surface-2: #EDF2F5; --c-ink: #1B2A32; /* mély petróleum, nem szürkés fekete */ --c-ink-2: #52646E; --c-border: #D5DEE3; /* A beviteli mező kerete (TASK-131, WCAG 1.4.11): a mezőt azonosító határ legalább 3:1 a háttereken. */ --c-border-input: #7A8B95; --c-action: #0B6E9E; /* hideglánc-kék, elsődleges művelet */ --c-ok: #1F7A4C; /* tartományon belül */ --c-warn: #966100; /* késve rögzítve, közelgő lejárat — 4,5:1 a surface-2-n és a warn-bg-n is (TASK-131) */ --c-danger: #B3261E; /* tartományon kívül, eltérés */ --r-sm: 4px; --r-md: 8px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --tap: 48px; /* Származtatott tokenek — a fentiekből, a komponensek kényelmére */ --c-on-action: #FFFFFF; /* szöveg az akciószínen */ --c-action-2: #08557A; /* akciószín nyomva / hover */ --c-action-bg: #E3F0F7; /* halvány kék háttér: aktív menüpont, kijelölés */ --c-ok-bg: #E4F3EA; --c-warn-bg: #FBF1DC; --c-danger-bg: #F9E3E1; --c-focus-ring: #2A7FB0; /* látható billentyűzet-fókusz — 3:1 a háttereken (TASK-131, WCAG 1.4.11) */ --c-backdrop: rgba(27, 42, 50, 0.45); --shadow-pop: 0 8px 24px rgba(27, 42, 50, 0.18); /* csak ami lebeg: toast, modal */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --fs-num: 2rem; /* a mért érték — az egyetlen hangos elem */ --lh: 1.45; --tap-lg: 56px; /* az elsődleges hőmérséklet-beviteli mező */ --header-h: 52px; /* alacsony fejléc: a négyzetes monitoron minden pixel számít */ --container: 1200px; --w-cell-text: 16rem; /* a lista szöveges oszlopa: eddig szélesedhet, utána tördel és vág */ --w-cell-text-sm: 10rem; /* ugyanez a keskeny asztali sávban (992–1259 px) */ /* A havi mátrix (TASK-011). A tábla saját konténerében görget: a magassága fix, nem a nézetablakból számolt (nincs vh) — a négyzetes monitor ~850 px hasznos magasságában a fejléccel, az eszközsorral és a jelmagyarázattal együtt elfér, és a mai sor betöltéskor látszik. */ --mx-scroll-h: 32rem; /* A folyamatábra rajzának doboza (TASK-206): a hosszú folyamat a dobozban görget, nem a lap. */ --fl-drawing-h: 36rem; --mx-row-h: 34px; /* asztali sor; érintős eszközön --tap */ --mx-head-h: 3.5rem; /* az oszlopfejléc első sora: a rész-cellák sora ehhez ragad */ --w-mx-day: 4.5rem; --w-mx-cell: 4.5rem; --w-mx-cell-sm: 3.75rem; /* a keskeny asztali sávban */ --w-mx-cell-xs: 3.5rem; /* a tablet-sávban: tíz gép mai sora az aláírással, 820-on (TASK-150) */ --w-mx-sign: 9.5rem; --w-mx-sign-sm: 7.5rem; /* a tablet-sávban; a hosszabb gomb két sorba tör */ --w-mx-state: 7.5rem; /* A QR-címke (TASK-151): a Brother QL 62 mm-es szalagja, címkénként 30 mm; a kód 26 mm-es négyzet. */ --ql-w: 62mm; --ql-h: 30mm; --ql-code: 26mm; --ql-gap: 1.5mm; /* A listás lap (TASK-023). A sorok táblája ugyanúgy a saját konténerében görget, fix magassággal (nincs vh): fölötte a fejléc-űrlap, alatta a lap aláírása és lezárása — a négyzetes monitor ~850 px-ében együtt. */ --ls-scroll-h: 24rem; --w-ls-label: 12rem; /* a sor címkéje (kötött szempont, helyiség) */ --w-ls-col: 8rem; /* egy sormező oszlopa; a szöveges szélesebb lehet */ --w-ls-num-col: 5.5rem; /* a szám- és hőmérséklet-oszlop */ --w-ls-tail: 6.5rem; /* aláírás, ellenőrzés, állapot */ --w-ls-num: 4.5rem; /* a szabad lap sorszáma („3. sor") */ --w-ls-photo-col: 11rem; /* a fénykép oszlopa (TASK-060): a bélyegkép és a gomb */ --ls-photo-max: 160px; /* a bélyegkép leghosszabb oldala a cellában */ --ls-photo-view-h: 32rem; /* a nagy nézet képe a modalban (nem vh: a négyzetes monitoron is fér) */ /* A Törzsadatok oldal (TASK-083): asztali sávban a lista a saját konténerében görget, fix magassággal (nincs vh) — 1280×850-ben a fejléc, a három sor fül, az eszközsor és a lapozó mellett. Mérve (friss átnézés): a lista teteje 460 px, alatta a lapozó 60 és a lap alsó térköze 24 — 460 + 288 + 60 + 24 = 832; a 22rem a lapozót kiszorította. */ --td-scroll-h: 18rem; /* Az Eltérések oldal (TASK-029): a tábla a saját konténerében görget, fix magassággal. */ --dv-scroll-h: 30rem; --w-dv-date: 7.5rem; /* dátum, lezárás, határidő */ --w-dv-text: 11rem; /* hiba, intézkedés, eredmény: tördelve */ /* A heti mátrix (TASK-024): kilenc helyiség × hét nap + a feladatok és az állapot — 1280-on görgetés nélkül, a saját konténerében (nincs vh). */ --wk-scroll-h: 36rem; /* Az összesítő táblája (TASK-119): a saját konténerében görget, 1280×850-ben a lap nem — a részletezés (a cella lapjai) mellett alacsonyabb, a lapok listája a saját magasságában görget. */ --sm-scroll-h: 30rem; --sm-scroll-h-detail: 18rem; --sm-detail-h: 9rem; /* A törzsadat-import előnézete (TASK-139): a sorok a modalban görgetnek. */ --td-import-h: 20rem; /* A hozzáférési napló táblája (TASK-135): a saját konténerében görget, 1280×850-ben a lap nem. */ --al-scroll-h: 34rem; --w-wk-room: 11rem; --w-wk-room-sm: 8rem; /* a keskeny asztali és a tablet sávban */ --w-wk-day: 5.5rem; --w-wk-day-sm: 4.75rem; --w-wk-tasks: 14rem; --w-wk-tasks-sm: 8.5rem; --w-wk-list-cell: 8.5rem; /* a napi lista aláírás-cellája (768 px alatt) */ /* Az ellenőrzőlista (TASK-063): a szakaszok kártyái egymás mellett, amíg elférnek; a tétel jelölője nagy. */ --w-cl-card: 20rem; /* egy szakasz kártyájának legkisebb szélessége */ --cl-check: 28px; /* a tétel jelölőnégyzete (a sor maga --tap magas érintési felület) */ /* A felhasználók táblája (TASK-071): az e-mail-cím oszlopa ennél nem keskenyebb, utána tördelődik. */ --w-us-email: 13rem; --z-modal: 900; --z-toast: 1000; }