/* ==========================================================================
PoliceChat — dizájnrendszer + belépő képernyő
--------------------------------------------------------------------------
ARCULAT: kékből pirosba tartó gradiens. Komoly, letisztult, mobil-first.
A színek, sugarak, árnyékok és térközök MIND változóban vannak itt a fájl
tetején — a későbbi etapok (app shell, chat) ezeket használják.
Külső betűtípus SEHOL: a rendőrségi hálózat blokkolhatná.
VILÁGOS / SÖTÉT TÉMA (PROMPT.md 6. fejezet: „Sötét / világos téma
kapcsoló”, kanban 755fe5e9).
- A bare `:root` a VILÁGOS témát adja — ez az alapértelmezés, PROMPT.md
9. fejezete is a világos palettát írja le elsőként („világos, majdnem
fehér alap … fehér kártyák. Sötét téma IS…”).
- A SÖTÉT téma a `:root[data-theme="dark"]` blokkban van, lent — ez az
EREDETI, változatlan dark paletta (a projekt 8a etap óta ezzel fut).
- A `data-theme` attribútumot a `js/app.js` állítja be, MINDIG explicit
módon (rendszer-preferencia ELSŐ betöltéskor, utána a felhasználó
kapcsolója felülírhatja, `localStorage`-ban megjegyezve) — egy korai,
tömbölő inline szkript (`index.html` ``) teszi ezt meg MÉG a CSS
kirajzolása ELŐTT, hogy ne legyen egy pillanatra a rossz témában
felvillanó kezdőképernyő (FOUC).
- EZÉRT nincs itt `@media (prefers-color-scheme: dark)` szabály: a
rendszer-preferenciát a JS olvassa ki és írja bele a `data-theme`-be,
nem a CSS — így NINCS két helyen (media query + attribútum) duplikált
színkészlet, csak egy.
- A GRADIENS-hátterű felületek (topbar, kártyafejléc, saját chat-buborék,
elsődleges gombok) SZÁNDÉKOSAN NEM változnak témával — a vezérmotívum
mindkét témában ugyanaz a kék→piros gradiens, ezért az azon ÁLLÓ fehér
szöveg/ikon/keret is hardcode-olt marad (nem `var(--pc-*)`), akárhol
előfordul a fájlban — ez TUDATOS, nem hiányzó tokenizálás.
========================================================================== */
:root {
/* --- Arculati gradiens (a projekt vezérmotívuma, TÉMÁTÓL FÜGGETLEN) --- */
--pc-gradient: linear-gradient(135deg, #1E3C8C 0%, #3B4FB8 45%, #C8203C 100%);
/* --- Alap (VILÁGOS — PROMPT.md 9. fejezet) --- */
--pc-bg: #F5F7FA;
--pc-bg-glow: radial-gradient(120% 80% at 50% -10%, rgba(59, 79, 184, .10) 0%, rgba(245, 247, 250, 0) 62%);
--pc-surface: #FFFFFF;
--pc-surface-2: #EEF1F6;
--pc-border: rgba(18, 24, 43, .10);
--pc-border-strong: rgba(18, 24, 43, .18);
/* --- Szöveg --- */
--pc-text: #12182B;
--pc-text-muted: #6B7690;
/* A gradiens-hátterű felületek szövege — TÉMÁTÓL FÜGGETLEN (l. fenti fejléc). */
--pc-text-on-gradient: #FFFFFF;
/* --- Akcentek --- */
--pc-blue: #2F5BD0;
--pc-blue-soft: rgba(47, 91, 208, .10);
--pc-red: #D6294B;
--pc-red-soft: rgba(214, 41, 75, .10);
/* --- Állapotszínek (admin: fiók-státusz pillek) ---
Az arculat kék–piros; a státuszok viszont EGY PILLANTÁSSAL szétválaszthatók
kell legyenek, ezért kapnak saját, tompított jelzőszínt. */
--pc-amber: #E9A13B;
--pc-amber-soft: rgba(233, 161, 59, .14);
--pc-green: #3FA971;
--pc-green-soft: rgba(63, 169, 113, .14);
--pc-slate: #8794AE;
--pc-slate-soft: rgba(135, 148, 174, .14);
/* --- Szöveg lágy (-soft) hátterű chipeken (üzenetsáv, admin pill, badge) —
VILÁGOSBAN a chip pasztell, a szöveg SÖTÉT árnyalatú (fordítva, mint
sötét témában, ahol a chip tompított, a szöveg pedig pasztell) — enélkül
a sötét témára hangolt pasztell szöveg fehér alapon szinte eltűnne. */
--pc-on-blue-soft: #1B3E91;
--pc-on-red-soft: #9A1734;
--pc-on-green-soft: #146C43;
--pc-on-amber-soft: #8A5A12;
--pc-on-slate-soft: #495168;
/* Kiemelt akcens-szöveg SIMA felületen (nem chipen) — link, ikon. */
--pc-accent-blue-text: #2F5BD0;
--pc-accent-blue-text-hover: #1E3C8C;
--pc-accent-red-text: #B0264A;
/* Halvány „wash” tónusok (hover-háttér, csontváz-csillogás, elválasztó
árnyalat) — sötét témában fehér, világosban tintafekete-kék, UGYANAZZAL
az opacitással, hogy az intenzitás-érzet egyezzen a két téma közt. */
--pc-wash-weak: rgba(18, 24, 43, .05);
--pc-wash-strong: rgba(18, 24, 43, .08);
--pc-wash-border: rgba(18, 24, 43, .22);
--pc-skeleton-a: rgba(18, 24, 43, .05);
--pc-skeleton-b: rgba(18, 24, 43, .10);
--pc-table-head-tint: rgba(18, 24, 43, .03);
--pc-card-foot-tint: rgba(18, 24, 43, .02);
/* Profilkép-jelvény (`.avatar`) FELÜLETEN (nem gradiensen) álló alakja —
a gradiensen álló eset (`.avatar--on-gradient`) mindig a fehér-áttetsző
változatot kapja, témától függetlenül. */
--pc-avatar-bg: rgba(47, 91, 208, .12);
--pc-avatar-border: rgba(47, 91, 208, .28);
--pc-avatar-text: #1E3C8C;
/* Általános gomb-fókuszgyűrű (`.button:focus-visible`) — a gradiens-hátterű
elemek (topbar-ikonok stb.) fókuszgyűrűje MINDIG fehér marad, azt ez a
token nem érinti. */
--pc-focus-ring: #12182B;
/* --- Sugarak (TÉMÁTÓL FÜGGETLEN) --- */
--pc-radius-sm: 10px;
--pc-radius-md: 14px;
--pc-radius-lg: 18px;
--pc-radius-pill: 999px;
/* --- Árnyék (PROMPT.md 9. fejezet: „nagyon finom árnyék”) --- */
--pc-shadow: 0 2px 12px rgba(20, 30, 60, .08);
--pc-shadow-lg: 0 18px 48px rgba(20, 30, 60, .16);
/* --- Térköz (TÉMÁTÓL FÜGGETLEN) --- */
--pc-space-1: 4px;
--pc-space-2: 8px;
--pc-space-3: 12px;
--pc-space-4: 16px;
--pc-space-5: 20px;
--pc-space-6: 24px;
/* --- Érintési felület: minden kattintható elem legalább ekkora --- */
--pc-touch: 44px;
/* --- Mozgás --- */
--pc-motion: 180ms;
--pc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* --------------------------------------------------------------------------
SÖTÉT TÉMA — az EREDETI, változatlan paletta (8a etap óta). Csak akkor él,
ha a `js/app.js` a ``-re `data-theme="dark"`-ot írt (rendszer-
preferencia vagy a felhasználó kapcsolója, l. a fenti fejléc-kommentet).
-------------------------------------------------------------------------- */
:root[data-theme="dark"] {
--pc-bg: #101623;
--pc-bg-glow: radial-gradient(120% 80% at 50% -10%, rgba(59, 79, 184, .30) 0%, rgba(16, 22, 35, 0) 62%);
--pc-surface: #171F30;
--pc-surface-2: #1E273B;
--pc-border: rgba(255, 255, 255, .10);
--pc-border-strong: rgba(255, 255, 255, .20);
--pc-text: #EEF1F8;
--pc-text-muted: #9AA5BD;
--pc-blue-soft: rgba(47, 91, 208, .18);
--pc-red-soft: rgba(214, 41, 75, .18);
--pc-amber-soft: rgba(233, 161, 59, .16);
--pc-green-soft: rgba(63, 169, 113, .16);
--pc-slate-soft: rgba(135, 148, 174, .16);
--pc-on-blue-soft: #C7D6FF;
--pc-on-red-soft: #FFC9D3;
--pc-on-green-soft: #B6EBD0;
--pc-on-amber-soft: #F6D3A2;
--pc-on-slate-soft: #C6CFE2;
--pc-accent-blue-text: #9FBBFF;
--pc-accent-blue-text-hover: #C7D6FF;
--pc-accent-red-text: #FFB3C1;
--pc-wash-weak: rgba(255, 255, 255, .06);
--pc-wash-strong: rgba(255, 255, 255, .08);
--pc-wash-border: rgba(255, 255, 255, .34);
--pc-skeleton-a: rgba(255, 255, 255, .05);
--pc-skeleton-b: rgba(255, 255, 255, .11);
--pc-table-head-tint: rgba(255, 255, 255, .03);
--pc-card-foot-tint: rgba(255, 255, 255, .02);
--pc-avatar-bg: rgba(255, 255, 255, .18);
--pc-avatar-border: rgba(255, 255, 255, .28);
--pc-avatar-text: #FFFFFF;
--pc-focus-ring: #FFFFFF;
--pc-shadow: 0 2px 12px rgba(5, 9, 18, .45);
--pc-shadow-lg: 0 18px 48px rgba(5, 9, 18, .55);
}
/* --------------------------------------------------------------------------
Alap
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* A vízszintes görgetés tiltása a GYÖKÉRELEMEN van, nem a `body`-n.
A `body`-ra téve a `body` maga válna görgetődobozzá (`overflow-y: auto`), és
egy a képernyőnél magasabb tartalom — pl. a regisztrációs űrlap — nem lenne
végiggörgethető. Ugyanezért nincs a `body`-n rögzített `height: 100%` sem. */
html {
overflow-x: hidden;
}
body {
min-height: 100vh;
margin: 0;
padding: 0;
font-family: var(--pc-font);
font-size: 16px;
line-height: 1.5;
color: var(--pc-text);
background-color: var(--pc-bg);
background-image: var(--pc-bg-glow);
background-repeat: no-repeat;
-webkit-font-smoothing: antialiased;
}
body.is-loading .app { visibility: hidden; }
.app {
min-height: 100vh;
display: flex;
/* FONTOS: nem `align-items: center`. A regisztrációs űrlap magasabb lehet a
képernyőnél, és a középre igazítás ilyenkor LEVÁGNÁ a tetejét (nem lehetne
felgörgetni). Az `auto` függőleges margó (lásd `.screen`) középre teszi a
rövid kártyát, magas tartalomnál viszont magától 0-ra vált. */
align-items: flex-start;
justify-content: center;
padding:
calc(var(--pc-space-6) + env(safe-area-inset-top))
calc(var(--pc-space-4) + env(safe-area-inset-right))
calc(var(--pc-space-6) + env(safe-area-inset-bottom))
calc(var(--pc-space-4) + env(safe-area-inset-left));
}
.screen {
width: 100%;
margin-block: auto; /* középre, de sosem levágva (lásd `.app`) */
}
/* Csak a képernyőolvasónak: a tartalom a bejárási sorrendben és a
címsor-szerkezetben ott van, a látványt viszont nem befolyásolja.
NEM `display: none` és nem `visibility: hidden` — azokat a képernyőolvasó
sem olvasná fel. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
/* --------------------------------------------------------------------------
Kártya
-------------------------------------------------------------------------- */
.card {
width: 100%;
max-width: 420px;
/* A jogi szöveg hosszú — a kártya nőhet, a lap görgethető marad. */
margin: 0 auto;
background: var(--pc-surface);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-lg);
box-shadow: var(--pc-shadow-lg);
overflow: hidden;
}
/* Hosszú dokumentum (adatkezelési tájékoztató) — szélesebb kártya. */
.card--wide { max-width: 760px; }
/* Admin lista — a legszélesebb nézet (szűrők + felhasználókártyák). */
.card--admin { max-width: 900px; }
.card__head {
display: flex;
align-items: center;
gap: var(--pc-space-3);
padding: var(--pc-space-5) var(--pc-space-5);
background: var(--pc-gradient);
color: var(--pc-text-on-gradient);
}
.card__head-text { min-width: 0; }
.card__title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: .2px;
/* Hosszú, felhasználótól jövő név sem törheti szét a fejlécet. */
overflow-wrap: anywhere;
}
.card__tagline {
margin: 2px 0 0;
font-size: .8125rem;
color: rgba(255, 255, 255, .82);
overflow-wrap: anywhere;
}
/* A megerősítő/szerkesztő panelek BELSŐ címsora — a képernyő fő címénél
(`.card__title`) szándékosan kisebb, hogy a hierarchia egyértelmű legyen. */
.card__title--panel {
font-size: 1.0625rem;
margin-bottom: var(--pc-space-3);
}
.logo {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: var(--pc-radius-md);
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .22);
color: #fff;
}
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: var(--pc-radius-pill);
background: var(--pc-avatar-bg);
border: 1px solid var(--pc-avatar-border);
font-weight: 700;
font-size: 1.0625rem;
color: var(--pc-avatar-text);
}
/* A gradiens-hátterű jelvények (fiók-fejléc, drawer-fejléc) MINDIG a fehér-
áttetsző alakot kapják, témától függetlenül (l. a fájl fejléc-kommentjét):
a gradiens maga sem változik, a rajta álló jelvény se változzon vele. */
.avatar--on-gradient {
background: rgba(255, 255, 255, .18);
border-color: rgba(255, 255, 255, .28);
color: #fff;
}
/* Feltöltött profilkép (PROMPT.md 108. sor) -- ugyanaz a kör-alak és méret,
mint a kezdőbetűs jelvénynél (`.avatar`), csak `![]()
`-en: az `object-fit`
biztosítja, hogy egy nem pontosan négyzetes forrás is kitöltse a kört
torzítás nélkül (a kliens oldali vágás, `cropAvatarImageBlob`, már eleve
négyzetesre vág, ez csak a védőháló). */
.avatar--image {
object-fit: cover;
}
/* A profilkép-szerkesztő panel nagyobb előnézete. */
.avatar--lg {
width: 96px;
height: 96px;
font-size: 1.75rem;
}
.card__body { padding: var(--pc-space-5); }
.card__foot {
padding: var(--pc-space-4) var(--pc-space-5);
border-top: 1px solid var(--pc-border);
background: var(--pc-card-foot-tint);
}
.section-title {
margin: 0 0 var(--pc-space-1);
font-size: 1.0625rem;
font-weight: 650;
}
.section-sub {
margin: 0 0 var(--pc-space-4);
font-size: .875rem;
color: var(--pc-text-muted);
}
.note {
margin: 0;
font-size: .8125rem;
color: var(--pc-text-muted);
text-align: center;
}
/* --------------------------------------------------------------------------
Üzenetsáv (hiba / tájékoztatás)
-------------------------------------------------------------------------- */
.message {
margin: 0 0 var(--pc-space-4);
padding: var(--pc-space-3) var(--pc-space-4);
border-radius: var(--pc-radius-md);
font-size: .875rem;
border: 1px solid transparent;
/* A szervertől jövő szöveg sem lóghat ki. */
overflow-wrap: anywhere;
}
/* Hiba: piros akcent. */
.message--error {
background: var(--pc-red-soft);
border-color: rgba(214, 41, 75, .45);
color: var(--pc-on-red-soft);
}
/* Tájékoztatás (pl. „a fiókod jóváhagyásra vár”) — NEM néz ki hibának. */
.message--info {
background: var(--pc-blue-soft);
border-color: rgba(47, 91, 208, .48);
color: var(--pc-on-blue-soft);
}
/* Sikeres művelet (pl. „A felhasználót jóváhagytad”). */
.message--ok {
background: var(--pc-green-soft);
border-color: rgba(63, 169, 113, .48);
color: var(--pc-on-green-soft);
}
/* --------------------------------------------------------------------------
Űrlapmezők
-------------------------------------------------------------------------- */
.field { margin-bottom: var(--pc-space-4); }
.field__label {
display: block;
margin-bottom: var(--pc-space-2);
font-size: .8125rem;
font-weight: 600;
color: var(--pc-text-muted);
}
.field__control { position: relative; }
.field__input {
width: 100%;
min-height: var(--pc-touch);
padding: 10px 14px;
font: inherit;
font-size: 1rem; /* iOS-en 16px alatt belenagyítana a mezőbe */
color: var(--pc-text);
background: var(--pc-surface-2);
border: 1px solid var(--pc-border-strong);
border-radius: var(--pc-radius-md);
transition: border-color var(--pc-motion) ease, box-shadow var(--pc-motion) ease;
}
.field__control .field__input { padding-right: 52px; }
.field__input::placeholder { color: #6B7690; }
.field__input:focus {
outline: none;
border-color: var(--pc-blue);
box-shadow: 0 0 0 3px rgba(47, 91, 208, .30);
}
/* Jelszó mutatása / elrejtése */
.icon-button {
position: absolute;
top: 50%;
right: 2px;
transform: translateY(-50%);
width: var(--pc-touch);
height: var(--pc-touch);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--pc-text-muted);
background: none;
border: none;
border-radius: var(--pc-radius-md);
cursor: pointer;
transition: color var(--pc-motion) ease;
}
.icon-button:hover { color: var(--pc-text); }
.icon-button:focus-visible {
outline: 2px solid var(--pc-blue);
outline-offset: 2px;
}
/* Alapból „elrejtve” = áthúzott szem; megjelenített jelszónál eltűnik a vonal. */
.icon-button.is-visible .icon-eye__slash { display: none; }
/* --- Mező-kiegészítők: súgó, hibaszöveg, „nem kötelező” jelölés ----------- */
.field__hint {
margin: var(--pc-space-2) 0 0;
font-size: .8125rem;
color: var(--pc-text-muted);
}
/* Mezőnkénti hibaszöveg. A tartalma MINDIG textContent-tel íródik. */
.field__error {
margin: var(--pc-space-2) 0 0;
font-size: .8125rem;
font-weight: 600;
color: var(--pc-accent-red-text);
overflow-wrap: anywhere;
}
.field__optional {
margin-left: 6px;
font-weight: 500;
text-transform: none;
color: var(--pc-text-muted);
opacity: .85;
}
/* Hibás mező: piros keret. Az `aria-invalid`-hoz kötjük, hogy a látvány és a
képernyőolvasó ugyanazt mondja. */
.field__input[aria-invalid="true"] {
border-color: var(--pc-red);
box-shadow: 0 0 0 3px rgba(214, 41, 75, .22);
}
/* --- Legördülő (vármegye / kerület) -------------------------------------- */
.field__control--select { display: block; }
.field__select {
appearance: none;
-webkit-appearance: none;
padding-right: 44px;
cursor: pointer;
/* Hosszú megyenév se feszítse szét a kártyát 360 px-en. */
max-width: 100%;
text-overflow: ellipsis;
}
.field__select option,
.field__select optgroup { color: #12182B; background: #fff; }
/* A lista betöltése nem sikerült: magyarázat + újrapróbálkozás gomb. */
.retry {
margin-top: var(--pc-space-3);
padding: var(--pc-space-3) var(--pc-space-4);
background: var(--pc-red-soft);
border: 1px solid rgba(214, 41, 75, .45);
border-radius: var(--pc-radius-md);
}
.retry__text {
margin: 0 0 var(--pc-space-3);
font-size: .8125rem;
color: var(--pc-on-red-soft);
overflow-wrap: anywhere;
}
.field__chevron {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
display: inline-flex;
pointer-events: none;
color: var(--pc-text-muted);
}
/* --- Választó pillek: rendőr (kék) / polgárőr (piros) -------------------- */
.fieldset {
margin-inline: 0;
padding: 0;
border: 0;
}
.fieldset > .field__label { padding: 0; }
.choice-row {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-3);
}
.choice {
flex: 1 1 140px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--pc-space-2);
min-height: var(--pc-touch);
padding: 10px 14px;
font-size: .9375rem;
font-weight: 650;
color: var(--pc-text-muted);
background: var(--pc-surface-2);
border: 1px solid var(--pc-border-strong);
border-radius: var(--pc-radius-pill);
cursor: pointer;
text-align: center;
transition: background-color var(--pc-motion) ease, color var(--pc-motion) ease,
border-color var(--pc-motion) ease;
}
/* A rádiógombot elrejtjük a szem elől, de a fókusz és a billentyűzet marad.
Az elem a címke ELŐTT áll a HTML-ben, ezért az `+` szomszéd-szelektorral
stílusozható a hozzá tartozó pill. */
.choice__input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.choice:hover { border-color: var(--pc-wash-border); }
.choice__input:focus-visible + .choice {
outline: 2px solid var(--pc-blue);
outline-offset: 2px;
}
.choice__input:checked + .choice--police {
color: #fff;
background: var(--pc-blue);
border-color: var(--pc-blue);
}
.choice__input:checked + .choice--civil {
color: #fff;
background: var(--pc-red);
border-color: var(--pc-red);
}
/* --------------------------------------------------------------------------
Szerepkör-választó csempék (a LEGELSŐ képernyő)
Rendőr = kék (#2F5BD0), polgárőr = piros (#D6294B) — PROMPT.md 9. pont.
-------------------------------------------------------------------------- */
.role-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--pc-space-3);
}
/* A rádiógomb a szem elől elrejtve, de fókuszálható és billentyűzhető marad.
(Ugyanaz a minta, mint a `.choice__input`-nál.) */
.role__input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.role {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: var(--pc-space-2);
/* Bőven a 44 px-es minimum fölött: ez a képernyő fő döntése. */
min-height: 132px;
padding: var(--pc-space-4) var(--pc-space-3);
text-align: center;
color: var(--pc-text);
background: var(--pc-surface-2);
border: 1px solid var(--pc-border-strong);
border-radius: var(--pc-radius-lg);
cursor: pointer;
transition: border-color var(--pc-motion) ease, background-color var(--pc-motion) ease,
box-shadow var(--pc-motion) ease, transform var(--pc-motion) ease;
}
.role:hover { border-color: var(--pc-wash-border); }
.role__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--pc-radius-pill);
border: 1px solid transparent;
transition: background-color var(--pc-motion) ease, color var(--pc-motion) ease,
border-color var(--pc-motion) ease;
}
.role--police .role__icon {
color: var(--pc-accent-blue-text);
background: var(--pc-blue-soft);
border-color: rgba(47, 91, 208, .45);
}
.role--civil .role__icon {
color: var(--pc-accent-red-text);
background: var(--pc-red-soft);
border-color: rgba(214, 41, 75, .45);
}
.role__name {
font-size: .9375rem;
font-weight: 700;
letter-spacing: .4px;
overflow-wrap: anywhere;
}
.role__desc {
font-size: .75rem;
line-height: 1.35;
color: var(--pc-text-muted);
overflow-wrap: anywhere;
}
/* A fókuszgyűrű a szerepkör SAJÁT színét viseli — a piros csempe körül ne
villanjon kék keret. */
.role__input:focus-visible + .role--police {
outline: 2px solid var(--pc-blue);
outline-offset: 2px;
}
.role__input:focus-visible + .role--civil {
outline: 2px solid var(--pc-red);
outline-offset: 2px;
}
/* Kiválasztott állapot: a szerepkör saját színe. */
.role__input:checked + .role--police {
background: var(--pc-blue-soft);
border-color: var(--pc-blue);
box-shadow: 0 0 0 1px var(--pc-blue) inset;
}
.role__input:checked + .role--police .role__icon {
color: #fff;
background: var(--pc-blue);
border-color: var(--pc-blue);
}
.role__input:checked + .role--civil {
background: var(--pc-red-soft);
border-color: var(--pc-red);
box-shadow: 0 0 0 1px var(--pc-red) inset;
}
.role__input:checked + .role--civil .role__icon {
color: #fff;
background: var(--pc-red);
border-color: var(--pc-red);
}
.role-actions { margin-top: var(--pc-space-5); }
/* --- GDPR-elfogadás ------------------------------------------------------ */
.consent {
display: flex;
align-items: flex-start;
gap: var(--pc-space-3);
padding: var(--pc-space-3) var(--pc-space-4);
background: var(--pc-surface-2);
border: 1px solid var(--pc-border-strong);
border-radius: var(--pc-radius-md);
}
/* 44×44 px érintési felület a jelölőnégyzet körül (a négyzet maga 22 px). */
.consent__hit {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--pc-touch);
height: var(--pc-touch);
cursor: pointer;
}
.consent__box {
width: 22px;
height: 22px;
margin: 0;
accent-color: var(--pc-blue);
cursor: pointer;
}
/* Hibás (be nem jelölt, de kötelező) jelölőnégyzet. A `.field__input`
szabálya erre nem érvényes — a jelölőnégyzet nem beviteli mező —, ezért
ugyanazt a piros gyűrűt itt kapja meg, hogy a látvány és az
`aria-invalid="true"` ugyanazt mondja. */
.consent__box[aria-invalid="true"] {
border-radius: 4px;
box-shadow: 0 0 0 3px rgba(214, 41, 75, .35);
}
.consent__text { min-width: 0; }
.consent__text label {
display: block;
padding: 11px 0 0;
font-size: .875rem;
cursor: pointer;
overflow-wrap: anywhere;
}
/* --- Szöveges link-gomb (nézetváltás, tájékoztató megnyitása) ------------ */
.link-button {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: var(--pc-touch);
padding: 0 2px;
font: inherit;
font-size: .875rem;
font-weight: 650;
color: var(--pc-accent-blue-text);
background: none;
border: 0;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color var(--pc-motion) ease;
}
.link-button:hover { color: var(--pc-accent-blue-text-hover); }
/* A visszafelé mutató nyíl a szövegével együtt egy gomb — az ikon nem
aláhúzott, ezért külön nem is kattintható elem. */
.link-button__icon { flex: 0 0 auto; }
.link-button:focus-visible {
outline: 2px solid var(--pc-blue);
outline-offset: 2px;
border-radius: var(--pc-radius-sm);
}
/* Belépő ↔ regisztráció váltósor a kártya lábában */
.switch {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--pc-space-2);
margin: var(--pc-space-1) 0 0;
}
.switch__text {
font-size: .875rem;
color: var(--pc-text-muted);
}
/* Visszaút a szerepkör-választóra — halványabb, másodlagos súlyú sor. */
.switch--back {
margin-top: 0;
padding-top: var(--pc-space-1);
border-top: 1px solid var(--pc-border);
}
.switch--back .link-button {
font-weight: 600;
color: var(--pc-text-muted);
}
.switch--back .link-button:hover { color: var(--pc-text); }
/* --------------------------------------------------------------------------
Gombok — minden kattintható elem legalább 44 px magas
-------------------------------------------------------------------------- */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: var(--pc-touch);
padding: 12px 18px;
font: inherit;
font-size: 1rem;
font-weight: 650;
color: var(--pc-text-on-gradient);
border: 1px solid transparent;
border-radius: var(--pc-radius-md);
cursor: pointer;
transition: filter var(--pc-motion) ease, opacity var(--pc-motion) ease,
background-color var(--pc-motion) ease;
}
.button:focus-visible {
outline: 2px solid var(--pc-focus-ring);
outline-offset: 2px;
}
.button--primary { background: var(--pc-gradient); }
.button--primary:hover:not(:disabled) { filter: brightness(1.08); }
.button--ghost {
margin-top: var(--pc-space-5);
color: var(--pc-text);
background: transparent;
border-color: var(--pc-border-strong);
}
.button--ghost:hover:not(:disabled) { background: var(--pc-wash-weak); }
/* Ugyanaz, de felső margó nélkül (kártyalábban áll, nem űrlap alatt). */
.button--flush { margin-top: 0; }
/* Elsődleges gomb az adatlista ALATT (belépett képernyő) — kis levegővel. */
.button--spaced { margin-top: var(--pc-space-5); }
.button__icon { flex: 0 0 auto; margin-right: var(--pc-space-2); }
/* Visszafordíthatatlan / szigorú művelet (elutasítás). */
.button--danger {
color: #fff;
background: var(--pc-red);
border-color: var(--pc-red);
}
.button--danger:hover:not(:disabled) { filter: brightness(1.08); }
/* Visszavonhatatlan művelet NYITÓGOMBJA (törlés): halkabb, de félreérthetetlen.
A tényleges megerősítő gomb a panelben már tömör piros (`button--danger`). */
.button--danger-ghost {
margin-top: 0;
color: var(--pc-on-red-soft);
background: transparent;
border-color: rgba(214, 41, 75, .55);
}
.button--danger-ghost:hover:not(:disabled) { background: var(--pc-red-soft); }
/* Keskenyebb, másodlagos gomb (pl. „Lista újratöltése”) — az érintési felület
így is a teljes 44 px. */
.button--slim {
width: auto;
padding: 10px 16px;
font-size: .875rem;
}
.button:disabled {
opacity: .62;
cursor: default;
}
/* --------------------------------------------------------------------------
Szerepkör-badge: rendőr = kék pill, polgárőr = piros pill
-------------------------------------------------------------------------- */
.badge {
display: inline-block;
margin-top: 6px;
padding: 3px 12px;
font-size: .75rem;
font-weight: 650;
border-radius: var(--pc-radius-pill);
color: #fff;
border: 1px solid rgba(255, 255, 255, .35);
}
.badge--police { background: var(--pc-blue); }
.badge--civil { background: var(--pc-red); }
.badge--tag {
margin-top: 0;
background: var(--pc-slate-soft);
color: var(--pc-on-slate-soft);
border-color: rgba(135, 148, 174, .45);
}
/* --------------------------------------------------------------------------
Adatlista (belépett állapot)
-------------------------------------------------------------------------- */
.data-list {
margin: 0;
padding: 0;
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-md);
background: var(--pc-surface-2);
overflow: hidden;
}
.data-row {
display: flex;
flex-wrap: wrap;
gap: var(--pc-space-1) var(--pc-space-3);
justify-content: space-between;
align-items: baseline;
padding: var(--pc-space-3) var(--pc-space-4);
}
.data-row + .data-row { border-top: 1px solid var(--pc-border); }
.data-row dt {
font-size: .8125rem;
color: var(--pc-text-muted);
}
.data-row dd {
margin: 0;
font-weight: 600;
text-align: right;
min-width: 0;
/* Felhasználótól jövő, hosszú szöveg sem tolja szét a sort. */
overflow-wrap: anywhere;
}
/* --- Kétállású kapcsoló-sor (PROMPT.md 6. fejezet: téma ÉS értesítés
kapcsoló, kanban 755fe5e9 / be0eba1c) — KÖZÖS komponens mindkettőnek.
Klasszikus „switch”: a `role="switch"` + `aria-checked` adja a jelentését,
a látvány csak követi (a `.is-on` osztályt az app.js kapcsolja, ugyanúgy,
mint egy checkbox `:checked`-jét, mert egy `