, amit a globális a:hover aláhúzna. */
.pager .pg:hover{
background:var(--brand-soft);
border-color:var(--brand);
color:var(--brand-dark);
box-shadow:0 1px 2px rgba(22,104,214,.18);
text-decoration:none;
}
.pager .pg.active{background:var(--brand);border-color:var(--brand);color:#fff}
.pager .pg.off{opacity:.4;pointer-events:none}
.pager .info{font-size:13px;color:var(--ink-3)}
/* ---------- páciens adatlap ---------- */
/* adatlap felső sor: páciens adatok + dokumentumok egymás mellett, azonos magasságban */
.rec-top{
display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
gap:22px;align-items:stretch;
}
.rec-top > .card{display:flex;flex-direction:column;min-width:0;overflow:hidden}
/* a dokumentum-kártya ne nyújtsa meg a sort: a magasságot az adatok kártya adja,
a lista pedig a kártyán belül görgethető */
.rec-top > .doc-card{height:0;min-height:100%}
.doc-scroll{flex:1;min-height:0;overflow-y:auto}
.doc-row{
display:flex;align-items:center;gap:10px;
padding:10px 20px;border-bottom:1px solid var(--line);font-size:13.5px;
}
.doc-row:last-child{border-bottom:0}
.doc-row:hover{background:var(--surface-2)}
.doc-row .name{flex:1;min-width:0;overflow-wrap:break-word}
/* páciens adatai: címke–érték párok egymás alatt */
/* A cimke-oszlop FIX 100 px (2026.08.23.), nem a tartalomhoz igazodik: igy a
ket helyen (paciens adatlap, foglalas szerkesztese) es blokkon belul is
egy vonalban kezdodnek az ertekek, fuggetlenul attol, hogy "TAJ" vagy
"Szuletesi datum" all a cimkeben. A leghosszabb cimke ~95 px, tehat befer. */
.info-rows{display:grid;grid-template-columns:100px minmax(0,1fr);gap:11px 18px;margin:0;font-size:14px}
.info-rows dt{color:var(--ink-3);white-space:nowrap;font-size:13px}
.info-rows dd{margin:0;color:var(--ink);font-weight:500;min-width:0;overflow-wrap:break-word}
.info-rows dd.empty{color:var(--ink-3);font-weight:400}
/* anamnézis: két hasáb, mindkettőben a szokásos „címke a mező felett” forma.
A két hasáb külön .form-grid-et tartalmaz, így a mezők nem folynak át
egyik oszlopból a másikba, és a rövidítések sorrendje hasábon belül marad. */
.anam-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;align-items:start}
.anam-grid > div{min-width:0;overflow-wrap:break-word}
.anam-grid b{color:var(--ink-2)}
/* egy foglalás blokkja a foglalás-listában */
.order-block{
border:1px solid var(--line);border-radius:var(--radius-sm);
overflow:hidden;margin-bottom:14px;
}
.order-block:last-child{margin-bottom:0}
.order-head{
display:flex;align-items:center;gap:9px;flex-wrap:wrap;
padding:11px 13px;background:var(--surface-2);border-bottom:1px solid var(--line);
}
.order-head .order-date{font-weight:700;font-size:14.5px;color:var(--ink)}
.order-head .grow{flex:1}
/* a csoportok közti térköz (15px) nagyobb, mint a csoporton belüli sorok között
(7px): ez tartja össze a vizsgálatot az eredményeivel, behúzás nélkül */
.order-body{padding:13px;display:flex;flex-direction:column;gap:15px}
/* egy vizsgálat / eredmény sor a foglaláson belül */
.res-row{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:9px 11px;border:1px solid var(--line);border-radius:9px;
background:var(--surface);font-size:13.5px;
}
/* A név után közvetlenül az állapotcímke áll, ezért a nevet NEM nyújtjuk, és nem
is kap minimális szélességet: így a címke MINDEN sorban (vizsgálat és eredmény
egyaránt) pontosan a fenti 10 px-es réstávolságra esik a szövegtől, nem egy fix
sáv végéhez igazodva. A maradék helyet ez a kitöltő eszi meg, a címke UTÁN. */
.res-row .grow{flex:1;min-width:0}
/* itt a címke nem pill alakú, hanem a mellette álló .btn.sm gombok lekerekítését
veszi fel (9px) – a lista oldalak .chip-jei maradnak kerekek */
.res-row .chip{border-radius:9px}
.res-row .date{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
/* foglalás, amihez még nincs vizsgálat rögzítve – üres állapot a blokkon belül */
.res-empty{
padding:10px 11px;border:1px dashed var(--line-strong);border-radius:9px;
background:var(--surface-2);color:var(--ink-3);font-size:13.5px;
}
/* EGY VIZSGÁLAT ÉS A HOZZÁ TARTOZÓ EREDMÉNYSOROK (§20)
Két szint, mert egy vizsgálathoz 1–4 eredmény tartozhat (product_result1..4):
fent a vizsgálat sora az összesített állapottal, alatta behúzva az eredmények. */
/* A csoport EGY doboz: a vizsgálat a feje, az eredményei a törzse – ugyanaz a
szerkezet, mint a foglalás-blokknál (szürke fejsor + fehér törzs egy kereten
belül). Így összecsukás után és nyitva is egyértelmű, mi tartozik mihez, behúzás
nélkül. A belső sorok ezért nem kapnak saját keretet, csak hajszálvonal választja
el őket. */
.svc-group{
border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
}
.svc-group .res-row{border:0;border-radius:0}
.svc-group .res-row.is-svc{border-bottom:1px solid var(--line)}
.svc-group.collapsed .res-row.is-svc{border-bottom:0}
.svc-results .res-row + .res-row{border-top:1px solid var(--line)}
/* a vizsgálat sora = a csoport feje: szürke háttér, vastagabb név */
.res-row.is-svc{background:var(--surface-2)}
.res-row.is-svc .name{font-weight:620}
/* ár a vizsgálat sorában */
.res-row .price{font-weight:620;font-variant-numeric:tabular-nums;white-space:nowrap}
/* az eredménysorok a vizsgálat alatt: NINCS behúzás és nincs vezetővonal –
ugyanolyan szélesek, mint a vizsgálat sora. A csoportot a szürke fejsor,
a vastagabb név és a csoportok közti nagyobb térköz jelöli. */
.svc-results{display:flex;flex-direction:column}
/* ÖSSZECSUKÁS – két szinten ugyanaz a nyíl és ugyanaz a viselkedés:
a NAP (.order-block) és egy VIZSGÁLAT (.svc-group) is csukható. A fejléc egésze
kattintható, a benne lévő gombok viszont nem csukják be (lásd script.js). */
.res-row.is-svc,.order-head{cursor:pointer}
.svc-toggle,.order-toggle{
display:inline-flex;align-items:center;justify-content:center;flex:none;
width:24px;height:24px;margin-right:-2px;
border:0;background:none;padding:0;color:var(--ink-3);cursor:pointer;
}
.svc-toggle svg,.order-toggle svg{transition:transform .15s ease}
.svc-group.collapsed .svc-toggle svg,
.order-block.collapsed .order-toggle svg{transform:rotate(-90deg)}
.svc-group.collapsed .svc-results{display:none}
/* ⚠️ VIZSGÁLAT EREDMÉNYSOR NÉLKÜL – nincs mit összecsukni (2026.09.04.)
Ha a vizsgálathoz egyetlen „Milyen eredményre vár?" mező sincs kitöltve,
nem jön létre `results` sor (§20.3/2.), tehát a csoportban CSAK a fejsor áll.
Ilyenkor a fejsor alsó szegélye közvetlenül a csoport saját kerete mellett
futna – ez a DUPLA VONAL, amit a felület mutatott –, és a nyíl is csak
annyit tett, hogy elvette az egyiket. Ezért:
- a fejsor alsó szegélye kiesik,
- a sor nem kattintható (nincs `cursor:pointer`),
- a nyíl helyén üres, nem interaktív hely áll (`.svc-toggle-ures`), hogy a
nevek a többi sorral EGY vonalban maradjanak.
A nyitás/csukás ilyenkor a nézetben és a JS-ben is ki van zárva – ez a CSS
csak a látvány fele. */
.svc-group.no-res .res-row.is-svc{border-bottom:0;cursor:default}
.svc-toggle-ures{
display:inline-flex;flex:none;width:24px;height:24px;margin-right:-2px;cursor:default;
}
/* összecsukott nap: csak a fejléc és a lábléc látszik. A törzs elrejtésével a
fejléc alsó szegélye feleslegessé válik, ezért kiesik – így
VAN lábléc: a lábléc felső szegélye adja az egyetlen hajszálvonalat;
NINCS lábléc (vizsgálat nélküli nap): a blokk saját alsó szegélye adja, nem lesz
belőle dupla vonal. */
.order-block.collapsed .order-body{display:none}
.order-block.collapsed .order-head{border-bottom:0}
/* a nap összesített ára a foglalás-blokk alján */
.order-foot{
display:flex;align-items:center;justify-content:flex-end;gap:10px;
padding:11px 13px;background:var(--surface-2);border-top:1px solid var(--line);
font-size:13.5px;
}
.order-foot .lbl{color:var(--ink-2)}
/* ugyanaz a súly és méret, mint a vizsgálat-sorok .price értékei */
.order-foot .sum{font-weight:620;font-variant-numeric:tabular-nums}
/* EREDMÉNY FELTÖLTŐ ŰRLAP – a saját eredménysora alatt, a csoport-dobozon belül
nyíló ÖNÁLLÓ box: szaggatott semleges keret + egyszínű szürke háttér, ugyanaz a
forma, mint a többi szaggatott panelnél (§4: „Elérhető szolgáltatások", üres
állapotok). A körülötte lévő fehér sáv mutatja, hogy egy sor kinyitott része.
A sor háttere fehér marad; az `.is-open` osztály nem színez, csak a script.js
tudja belőle, melyik sor van nyitva. */
.res-form{
margin:11px;padding:15px;
border:1px dashed var(--line-strong);
border-radius:var(--radius-sm);
background:var(--surface-2);
}
.res-form-head{
display:flex;align-items:center;gap:10px;
font-size:13.5px;font-weight:650;color:var(--ink);margin-bottom:14px;
}
/* „Új vizsgálat” panel: ugyanaz a szaggatott keretes doboz, mint az eredmény
feltöltésé, de egy sorba szedve – választó + ár + gombok. A panel MINDIG a saját
foglalás-blokkján belül van, ezért nem lehet összekeverni másik foglalással
(élesben épp ez a hiba: a JS az oldal ELSŐ legördülőjét olvassa – §15.7/10.) */
.add-svc{
border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
background:var(--surface-2);padding:13px;
}
.add-svc-head{
display:flex;align-items:center;gap:9px;
font-size:13.5px;font-weight:650;color:var(--ink);margin-bottom:11px;
}
.add-svc-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.add-svc-row select{flex:1;min-width:220px;height:36px;padding-top:0;padding-bottom:0}
/* Frissen hozzáadott sor kiemelése: zölden jelenik meg, majd elhalványul a sorok
normál fehér hátteréig. Két lépés: 0,8 s-ig tartja a zöldet (ennyi kell, hogy a
szem odakapjon), utána 2,4 s alatt átúszik. A `forwards` miatt a végállapot marad,
tehát a sor a szokásos fehér marad, nem ugrik vissza zöldbe. */
@keyframes res-new-fade{
0%, 25%{background:var(--ok-soft);box-shadow:0 1px 2px rgba(10,95,61,.12)}
100% {background:var(--surface);box-shadow:none}
}
/* a vizsgálat fejsora szürke, nem fehér – ezért külön záróállapot kell neki,
különben az effekt végén világosabb maradna, mint a többi fejsor */
@keyframes res-new-fade-head{
0%, 25%{background:var(--ok-soft);box-shadow:0 1px 2px rgba(10,95,61,.12)}
100% {background:var(--surface-2);box-shadow:none}
}
.res-row.is-new{animation:res-new-fade 3.2s ease-out forwards}
.res-row.is-svc.is-new{animation-name:res-new-fade-head}
/* aki kikapcsolta a mozgást a rendszerében, ne kapjon villanást: a sor rögtön
a normál formájában jelenik meg, a zöld visszajelző sáv így is elmondja, mi történt */
@media (prefers-reduced-motion:reduce){
.res-row.is-new{animation:none}
}
/* fájlválasztó a design szerint: a böngésző alap gombja helyett saját gomb + fájlnév.
A szürke űrlapon belül FEHÉR, hogy elváljon tőle. */
.file-field{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:10px 12px;border:1px dashed var(--line-strong);border-radius:9px;
background:var(--surface);
}
.file-field label{margin:0;cursor:pointer}
.file-field input[type=file]{display:none}
.file-field .file-name{font-size:13px;color:var(--ink-3);min-width:0;overflow-wrap:break-word}
.file-field .file-name.has{color:var(--ink);font-weight:560}
/* ---------- belépés oldal ---------- */
.login-wrap{
display:flex;align-items:center;justify-content:center;
min-height:62vh;padding:56px 22px;
}
.login-card{width:100%;max-width:420px}
.login-card .card-body{padding:30px 30px 26px}
/* a belépés oldal logója: logo3.webp, 158 × 86 px – 150 px szélesen ~82 px magas */
.login-logo{display:block;margin:0 auto 18px;max-width:150px;height:auto}
.login-title{text-align:center;font-size:19px;margin-bottom:5px}
.login-sub{text-align:center;font-size:13px;color:var(--ink-3);margin:0 0 22px}
/* teljes szélességű gomb (belépés) */
.btn.block{width:100%}
/* copyright + netmetro logó a belépés kártyán belül, a gomb alatt */
.login-credit{
margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
display:flex;flex-direction:column;align-items:center;gap:11px;
font-size:12.5px;color:var(--ink-3);text-align:center;
}
.login-credit a{display:block;color:var(--ink-3)}
/* ugyanaz a 26 px magasság, mint a lábléc logójánál; a szélesség a 1230.05 : 237.25
képarányból jön (26 × 5.1846 = 134.8 px) – kiírva, mert a width:auto itt nem a
képarányból, hanem a szülő szélességéből számolna, és a logó szétnyúlna */
.login-credit svg{display:block;height:26px;width:134.8px}
/* ---------- kétfaktoros hitelesítés (2FA / TOTP) ---------- */
/* A két lap a Belépés kártyáját használja (.login-card) – ⚠️ új komponens
nem kellett hozzá, csak ez a néhány, kizárólag ide tartozó szabály.
A beállító lap szélesebb, mert a QR és a három lépés nem fér el 420 px-en. */
/* ⚠️ A .totp-card MIND A KÉT 2FA-lapon rajta van (beállító + kódbekérő), és
csak a KÖZÖS viselkedést hordozza. A szélességet külön osztály adja: a
beállító lapon a QR és a három lépés nem fér el 420 px-en, a kódbekérő
viszont a Belépés lap keskeny kártyája marad. */
.totp-card.totp-szeles{max-width:560px}
/* ⚠️ A cím alatti térköz csak a 2FA-lapokon nagyobb (a fejlesztő kérése,
2026.09.12.) – a .login-title osztályon a Belépés lap is osztozik, ezért
a szabály a .totp-card-hoz van kötve, nem magához a címhez. */
.totp-card .login-title{padding-bottom:20px}
/* ⚠️ MINDEN KÖZÉPRE mind a két lapon. A .form-grid a kódbekérőé, a
.totp-lepesek a beállítóé. */
.totp-card .form-grid{text-align:center}
/* ⚠️ NINCS SZÁMOZÁS (a fejlesztő kérése): a lépések sorrendjét a sorrendjük
mondja meg. A list-style:none mellett a counter is kikerült – ⚠️ ha csak a
::before-t vennénk ki, a counter-reset/increment ott maradna használat
nélkül, és a következő olvasó azt hinné, valahol még számoz. */
.totp-lepesek{list-style:none;margin:4px 0 0;padding:0;text-align:center}
.totp-lepesek > li{padding:0 0 22px}
.totp-lepesek > li:last-child{padding-bottom:0}
.totp-lepesek > li > b{display:block;font-size:14px;margin-bottom:4px}
/* ⚠️ A QR-t a böngésző rajzolja (qrcode.js) – a szerveren nincs GD.
A fill="currentColor" miatt a kód a lap szövegszínét veszi fel, tehát
magától illeszkedik a designhoz. A max-width a kis képernyőkért van. */
.totp-qr{margin:12px 0 10px;line-height:0;text-align:center}
.totp-qr svg{display:inline-block;width:180px;height:180px;max-width:100%}
/* A kulcs betűvel – ⚠️ ez a QR TARTALÉKA, nem dísz: ha a kód nem
rajzolódik ki, ezzel a beléptetés akkor is elvégezhető. */
.totp-kulcs{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:14px;letter-spacing:.06em;
background:var(--surface-2);border:1px solid var(--line);
border-radius:8px;padding:9px 11px;margin-top:5px;
word-break:break-all;text-align:center;
}
/* A két bolt-jelvény az 1. lépésben – ⚠️ önhosztolt képek (public/images/),
külső hivatkozás nem mehet a lapra. A magasság kötött, a szélesség
aránytartó: a két kép eltérő oldalarányú (646×192 és 584×154). */
.totp-boltok{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin:12px 0 2px}
.totp-boltok img{height:40px;width:auto;display:block}
/* ⚠️ A kód mezője KIIRVA kozepre igazitott: a text-align oroklodese
urlapmezokre bongeszofuggo, tehat a lista text-align:center-jere nem
szabad bizni. */
.totp-card input[type=text]{text-align:center;letter-spacing:.22em;font-size:16px}
/* ⚠️ A jelölőnégyzet ÉS a szövege együtt középre. A .check-row label a közös
stíluslapban `display:flex` (1258. sor), tehát a szülő text-align:center-je
RÁ NEM HAT – a flex-sort a justify-content igazítja. */
.totp-card .check-row label{justify-content:center}
/* ⚠️ A magyarázó sáv szövege SORKIZÁRT (a fejlesztő kérése, 2026.09.12.).
A szabály SZŰKEN van kötve: .totp-card .alert-warn – az .alert osztályt a
projekt sok helyen használja, és ott a balra zárás marad. A lap hibasávját
(.alert-bad) sem érinti. */
.totp-card .alert-warn .grow{text-align:justify}
.totp-kiut{font-size:13px;color:var(--ink-3)}
.totp-kiut:hover{color:var(--ink-2)}
/* ---------- hibalap (404, és a többi hibaoldal is ezt kaphatja) ----------
SZANDEKOSAN NEM a .login-* osztalyokat hasznalja, pedig ma pontosan ugyanugy
nez ki. A ket lap ket kulon dolog: ha a hibalapon allitunk valamit (nagyobb
hibakod, mas terkozok, ikon), az NE mozditsa el a belepest - es forditva.
Az ertekek ma megegyeznek a .login-* parjukkal, tehat a valtas nem valtoztat
a megjelenesen; innentol viszont a ketto kulon hangolhato.
A .card alaposztaly kozos marad - az a doboz maga, nem a belepes resze. */
.err-wrap{
display:flex;align-items:center;justify-content:center;
min-height:62vh;padding:56px 22px;
}
.err-card{width:100%;max-width:420px}
.err-card .card-body{padding:30px 30px 26px}
/* a hibalap logoja: logo3.webp, ugyanaz a kep, mint a belepesen */
.err-logo{display:block;margin:0 auto 18px;max-width:150px;height:auto}
/* A hibakod ("404") - folotte ELVALASZTO VONAL, ugyanolyan, mint a kartya aljan
a copyright folott: a logo igy sajat savot kap. A vonalat a .err-code viseli
(border-top), nem a logo - az egy ![]()
, azon a szegely csak a kep szelesseget
fogna, nem a kartya teljes belso szelesseget.
A terkozok a .err-credit-et tukrozik: 24 px a vonal fole, 18 px ala. */
.err-code{
text-align:center;font-size:24px;
margin:24px 0 0;
padding-top:18px;border-top:1px solid var(--line);
}
/* a magyarazat ket sorban ("Oopsz!" + a mondat). SZANDEKOSAN nem halvany
masodlagos szoveg (--ink-3), mint a belepes alcime: itt ez a lap TARTALMA,
nem kiseroszoveg - ezert ugyanazt a fekete tintat kapja, mint a 404 kod. */
.err-text{text-align:center;font-size:14px;color:var(--ink);margin:0 0 22px}
/* copyright + netmetro logo a kartyan belul */
.err-credit{
margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
display:flex;flex-direction:column;align-items:center;gap:11px;
font-size:12.5px;color:var(--ink-3);text-align:center;
}
.err-credit a{display:block;color:var(--ink-3)}
/* a szelesseg itt is ki van irva (26 x 5.1846 = 134.8 px) - fuggoleges flexboxban
a width:auto a szulo szelessegebol szamolna, es a logo szetnyulna */
.err-credit svg{display:block;height:26px;width:134.8px}
/* ---------- Rendelési idők: vizsgálat × nap mátrix ---------- */
table.data.matrix td{vertical-align:top}
/* a vizsgálat neve megragad a bal szélen, hogy vízszintes görgetésnél is látszódjon */
table.data.matrix th.svc,
table.data.matrix td.svc{
position:sticky;left:0;z-index:2;
white-space:normal;min-width:220px;max-width:280px;
box-shadow:1px 0 0 var(--line);
}
table.data.matrix td.svc{background:var(--surface);font-weight:620}
table.data.matrix th.svc{background:var(--surface-2)}
table.data.matrix tbody tr:hover td.svc{background:#f8fbff}
/* egy időpont hossza */
.dur-cell{display:flex;align-items:center;gap:6px;white-space:nowrap}
.dur-cell input[type=number]{width:58px;text-align:right;padding:6px 7px;font-variant-numeric:tabular-nums}
.dur-cell span{font-size:12.5px;color:var(--ink-3)}
/* egy nap egy vizsgálatnál: pipa + tól-ig */
.day-cell{display:flex;flex-direction:column;gap:7px;min-width:148px}
.day-on{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
/* A NEGYZET UGYANAKKORA, MINT MINDENHOL MASHOL (18 px) - döntés 2026.08.31.
Korábban itt egy 16 px-es felülbírás állt, mert a mátrix sűrű; a fejlesztő
viszont azt kérte, hogy a „foglalható" jelölő ugyanúgy nézzen ki, mint a
Tartalmak – szerkesztés lap „Nyomtatható?" jelölője. Így a felületen
EGYFÉLE jelölő van, és nem kell külön háttérméretet karbantartani. */
.day-times{display:flex;align-items:center;gap:5px}
.day-times input[type=text]{width:62px;text-align:center;padding:6px 6px;font-variant-numeric:tabular-nums}
.day-times span{color:var(--ink-3);font-size:12px}
/* kikapcsolt nap: halvány cella, szaggatott keretű mezők */
td.day-off{background:var(--surface-2)}
td.day-off .day-on{color:var(--ink-3)}
td.day-off .day-times input[type=text]{
color:var(--ink-3);background:var(--surface-2);border-style:dashed;
}
/* LEZART IDOMEZO - ha a „foglalható" nincs bepipálva, a tól–ig mezőbe nem
lehet írni (döntés 2026.08.31.). ⚠️ readonly, NEM disabled: a disabled
mezőt a böngésző nem küldi be, és az input->post() FALSE-a felülírná a
tárolt TIME értéket. A jelzés itt is látszik, mielőtt a JS a cellára
tenné a .day-off osztályt. */
.day-times input[readonly]{
color:var(--ink-3);background:var(--surface-2);border-style:dashed;cursor:not-allowed;
}
/* ---------- űrlap ---------- */
/* minden űrlap ("új") oldal egyforma széles, hogy ne ugráljon az oldalak között váltva */
.form-card{max-width:1100px;margin:0 auto}
/* ---------- beépített szövegszerkesztő (2026.09.11-től Jodit) ---------- */
.editor-label{font-size:13.5px;font-weight:620;color:var(--ink-2);margin:18px 0 7px}
.editor{
border:1px solid var(--line-strong);border-radius:10px;
background:var(--surface);overflow:hidden;
}
.editor:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,104,214,.14)}
.editor-toolbar{
display:flex;align-items:center;flex-wrap:wrap;gap:3px;
padding:7px 8px;background:var(--surface-2);border-bottom:1px solid var(--line);
}
.editor-btn{
min-width:30px;height:30px;padding:0 7px;border-radius:7px;
display:grid;place-items:center;
background:transparent;border:1px solid transparent;
color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer;
}
.editor-btn:hover{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.editor-sep{width:1px;height:20px;background:var(--line-strong);margin:0 5px}
.editor-select{
width:auto;height:30px;padding:0 26px 0 8px;
border-radius:7px;font-size:13px;
background-color:var(--surface);
}
.editor-area{
min-height:400px;padding:18px 20px;outline:none;
font-size:14.5px;line-height:1.65;color:var(--ink);
}
.editor-area:focus{background:var(--surface)}
.editor-status{
display:flex;align-items:center;gap:10px;
padding:7px 12px;border-top:1px solid var(--line);
background:var(--surface-2);font-size:11.5px;color:var(--ink-3);
}
.editor-status .grow{flex:1}
/* Egy hasáb: a címke a mező FELETT áll, a mező pedig a kártya teljes
szélességét kitölti. Így az input széle egy vonalban van a szövegszerkesztővel
és minden más elemmel a kártyán belül. */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.form-grid > .lbl{
font-size:13.5px;color:var(--ink-2);font-weight:620;
}
/* a mezőcsoportok közti nagyobb levegő (7 + 11 = 18 px) */
.form-grid > .lbl:not(:first-child){margin-top:11px}
/* üres címke (pl. a GDPR jelölők előtt) ne foglaljon helyet */
.form-grid > .lbl:empty{display:none}
/* a jelölő/rádió sorok igazítása már nem kell, a címke fölöttük van */
.form-grid .radio-row,.form-grid .check-row{padding-top:0}
/* a kötelezőséget jelző csillag mindenhol piros, nem csak a mezőcímkékben */
.req{color:var(--bad);font-weight:700}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:5px}
/* ---------- űrlap hibaállapot (§21.6/3) ----------
Akkor jelenik meg, amikor a SZERVER visszadobja az űrlapot: a csillagos mező
üresen maradt, vagy az értéke nem érvényes. Ma élesben nincs ilyen állapot –
a 78 `form_error()` hívás soha nem ír ki semmit, mert validációs szabály nincs
beállítva (§15.7/4.).
NÉGY jel egyszerre, mert egyik sem elég önmagában:
1. PIROS KERET – ez látszik meg először, végigfutva a lapon;
2. PIROS SZÖVEG a mezőben – a beírt érték ÉS a helykitöltő is, tehát az üresen
maradt mező sem "semleges üres", hanem jelölt;
3. PIROS FELKIÁLTÓJEL a mező jobb szélén – beágyazott SVG háttérképként, ugyanúgy,
ahogy a select a nyilát kapja: így a jelöléshez ELÉG az .err osztály, nem kell
külön markup. Élesben a szerver csak az osztályt teszi ki;
4. A HIBAÜZENET a mező alatt, JOBBRA igazítva – a bal szél a címkéké, ott egy
piros sor összekeveredne a következő címkével; jobbra viszont a mező sarkában
van, ahol a beírás véget ért, és nem tolja el az űrlap ritmusát.
*/
textarea.err,
input.err[type=text],
input.err[type=email],
input.err[type=password],
input.err[type=tel],
input.err[type=number]{
border-color:var(--bad);
color:var(--bad);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 11px center;
padding-right:38px;
}
/* a textarea nem egy sor magas: az ikon a JOBB FELSŐ sarokba kerül, nem középre */
textarea.err{background-position:right 11px 11px}
/* a legördülőnek MÁR VAN háttérképe (a nyíl), ezért ott a kettő egymás mellett áll:
a hibajel beljebb, a nyíl a szélen – így a nyíl nem tűnik el a jelölés miatt */
select.err{
border-color:var(--bad);
color:var(--bad);
background-image:url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-repeat:no-repeat,no-repeat;
background-position:right 32px center,right 10px center;
padding-right:58px;
}
/* a fókusz gyűrű is piros a hibás mezőn – kék gyűrű azt sugallná, minden rendben */
input.err:focus,textarea.err:focus,select.err:focus{
border-color:var(--bad);box-shadow:0 0 0 3px rgba(179,37,31,.14);
}
/* a helykitöltő is piros: az üresen maradt kötelező mező nem "semleges üres".
Az opacity:1 a Firefox miatt kell, ott a placeholder alapból áttetsző. */
input.err::placeholder,textarea.err::placeholder{color:var(--bad);opacity:1}
/* ---------- KIVÉTEL: a rendelési idők mátrixa (döntés 2026.08.31.) ----------
Ott a mezők 58–62 px szélesek: a hibajel SVG ikonja és a hozzá tartozó 38 px
belső margó szétverné őket, a szám vagy az időpont nem férne ki. Ezen az
egy lapon ezért a jelölés CSAK piros keret + piros szöveg és helykitöltő,
és a hibaüzenetek NEM a mezők alatt, hanem a lap tetején állnak, egy piros
sávban az információs doboz fölött. */
table.matrix .day-times input.err{background-image:none;padding-right:6px}
table.matrix .dur-cell input.err{background-image:none;padding-right:7px}
/* A FÁJLVÁLASZTÓ nem input, hanem egy szaggatott keretes doboz (.file-field),
ezért saját hibaállapotot kap: piros SZAGGATOTT keret (a forma megmarad),
piros "Nincs kiválasztott fájl" szöveg és ugyanaz a felkiáltójel a jobb szélen.
A gomb NEM lesz piros: az továbbra is a semleges művelet, nem az a hibás. */
.file-field.err{
border-color:var(--bad);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 11px center;
padding-right:38px;
}
.file-field.err .file-name{color:var(--bad)}
/* JELÖLŐNÉGYZET és RÁDIÓGOMB hibás állapota.
Itt nincs se keret, se beírt szöveg, amit pirosra lehetne váltani – a "hibás
érték" maga a KI NEM PIPÁLT doboz, illetve a VÁLASZTÁS NÉLKÜLI rádiócsoport.
Ezért csak a rajzolt négyzet / kör kerete lesz PIROS (hover-en is, hogy ne
váltson kékre), a hibát pedig a mező alatti .field-err üzenet mondja ki.
FELKIÁLTÓJEL ITT SZÁNDÉKOSAN NINCS (2026.08.24.): a 18 px-es doboz mellett egy
ugyanolyan méretű ikon két egyforma jelet tett egymás mellé, és a sor zsúfolt
lett. A beviteli mezőkön az ikon a mező ÜRES jobb szélére kerül, ott van helye.
A CÍMKE SZÖVEGE sem lesz piros: az a mező NEVE, nem az értéke – ahogy a .lbl
sem pirosodik a többi mezőnél.
Hatókör: a .check-row-nál EGY címkére kerül az .err (a kötelező elfogadás),
a .radio-row-nál a CSOPORTRA, mert a hiba az, hogy egyik sincs kiválasztva. */
.check-row label.err input[type=checkbox],
.radio-row.err input[type=radio]{
border-color:var(--bad);
}
.check-row label.err input[type=checkbox]:hover,
.radio-row.err input[type=radio]:hover{
border-color:var(--bad);
}
.check-row label.err input[type=checkbox]:focus-visible,
.radio-row.err input[type=radio]:focus-visible{
box-shadow:0 0 0 3px rgba(179,37,31,.18);
}
/* a hibaüzenet – a .hint párja, csak piros és jobbra igazított */
.field-err{
display:block;text-align:right;
margin-top:5px;font-size:12.5px;font-weight:600;color:var(--bad);
}
/* ---------- napló: tiltás feloldása ---------- */
/* A feloldó gomb az Esemény cella szövegének VÉGÉN áll, nem külön Művelet
oszlopban – így a §8.2 négy oszlopos, csak olvasható döntése érvényben marad.
A form inline, hogy a gomb a mondat után maradjon, ne új sorba kerüljön. */
.log-unblock{display:inline;margin-left:8px}
.log-unblock .btn{vertical-align:middle}
/* ---------- jelszó megjelenítése (szem ikon) ---------- */
/* A jelszó mező jobb szélén egy gomb, ami láthatóvá teszi a beírt értéket,
és újra elrejti. Azért kell, mert a nem látszó jelszó elírását semmi nem
jelzi – a kikényszerített cserénél pedig KÉTSZER kell ugyanazt beírni,
ott ez a leggyakoribb hibaforrás.
A gomb type="button", KÜLÖNBEN elküldené az űrlapot.
A burkoló CSAK a mezőt fogja körbe, a .field-err üzenet KÍVÜL marad –
különben a gomb az üzenettel együtt középre igazodna, és elcsúszna. */
.pw-field{position:relative;display:block}
.pw-field > input{padding-right:42px}
.pw-toggle{
position:absolute;top:50%;right:2px;transform:translateY(-50%);
width:36px;height:32px;
display:flex;align-items:center;justify-content:center;
background:none;border:0;padding:0;margin:0;
color:var(--ink-3);cursor:pointer;border-radius:7px;
}
.pw-toggle:hover{color:var(--ink);background:var(--surface-2)}
.pw-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pw-toggle svg{display:block}
/* a két ikon egy gombban van; mindig csak az egyik látszik */
.pw-toggle .pw-hide{display:none}
.pw-toggle.on .pw-show{display:none}
.pw-toggle.on .pw-hide{display:block}
/* HIBAÁLLAPOTBAN a mezőnek MÁR VAN háttérképe (a felkiáltójel), és a szem
gomb is a jobb szélen áll. Ugyanaz a szabály érvényes, mint a legördülőnél
(lásd feljebb): a szélen marad a MEGLÉVŐ elem – itt a gomb –, a hibajel
pedig beljebb csúszik, így egyik sem tűnik el a másik miatt. */
.pw-field > input.err{padding-right:70px;background-position:right 44px center}
.slot-summary{
display:flex;align-items:center;gap:12px;
background:var(--brand-soft);border:1px solid #cfe1fb;
border-radius:var(--radius-sm);padding:12px 14px;
}
.slot-summary .big{font-size:17px;font-weight:700;color:var(--brand-dark)}
/* mértékegység a mező végén (pl. Ft) */
.input-suffix{display:flex;align-items:stretch;max-width:230px}
.input-suffix input{border-radius:9px 0 0 9px;text-align:left;font-variant-numeric:tabular-nums}
.input-suffix span{
display:flex;align-items:center;padding:0 13px;
background:var(--surface-2);border:1px solid var(--line-strong);border-left:0;
border-radius:0 9px 9px 0;
color:var(--ink-2);font-size:13.5px;font-weight:650;
}
.badge-time{
background:var(--brand);color:#fff;border-radius:8px;
padding:3px 10px;font-weight:700;font-variant-numeric:tabular-nums;
}
/* nem szerkeszthető, csak megjelenített érték – az input mezők formájára igazítva
(azonos keret, lekerekítés és belső margó, de szürke háttérrel és kurzor nélkül) */
.field-static{
display:flex;align-items:center;gap:10px;
width:100%;background:var(--surface-2);
border:1px solid var(--line);border-radius:9px;padding:9px 11px;
color:var(--ink);font-weight:620;
}
.field-static .badge-time{font-size:13.5px}
.radio-row{display:flex;gap:18px;flex-wrap:wrap;padding-top:8px}
.radio-row label,.check-row label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer}
/* a méretet a közös szabály adja (18 px); itt már csak az igazítás kell */
.radio-row input,.check-row input{margin:0}
.check-row{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.taj-row{display:flex;gap:12px;align-items:center}
.taj-row .check-inline{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.form-foot{
display:flex;align-items:center;gap:12px;justify-content:flex-end;
padding:18px 20px;border-top:1px solid var(--line);background:var(--surface-2);
border-radius:0 0 var(--radius) var(--radius);
}
/* ---------- külső (páciens) oldal fejléc ---------- */
.public-nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.public-nav a{
padding:9px 13px;border-radius:10px;
color:var(--ink-2);font-weight:560;font-size:14px;
border:1px solid transparent;
}
.public-nav a:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.public-nav a.active{background:var(--brand-soft);color:var(--brand-dark);border-color:#cfe1fb}
/* ---------- nyilvános szöveges oldal (Hogyan kell foglalni?, Kapcsolat) ----------
A tartalom a Tartalmak modulból jön, szövegszerkesztővel szerkesztve – tehát TETSZŐLEGES
HTML lehet benne. Ezért nem egy-egy elemre, hanem a .prose konténerre teszünk
szabályt: ami belekerül, az magától a lap tipográfiáját veszi fel.
ÉLESBEN a nézet ma BURKOLÓBA teszi a szerkesztő HTML-jét (bekezdés a
bekezdésben, érvénytelen) – azt el kell hagyni, lásd §17.1. */
.prose{color:var(--ink-2);font-size:15px;line-height:1.72}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
.prose p{margin:0 0 14px}
.prose h2{font-size:19px;color:var(--ink);margin:26px 0 10px}
.prose h3{font-size:16px;color:var(--ink);margin:22px 0 8px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin-bottom:7px}
.prose li::marker{color:var(--ink-3)}
.prose strong,.prose b{color:var(--ink);font-weight:650}
.prose a{text-decoration:underline}
.prose hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.prose table{border-collapse:collapse;width:100%;margin:0 0 14px;font-size:14.5px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 11px;text-align:left}
.prose th{background:var(--surface-2);font-weight:650;color:var(--ink)}
/* címke–érték párok a Kapcsolat oldalon: ugyanaz a forma, mint az adatlapon */
.prose dl{display:grid;grid-template-columns:160px minmax(0,1fr);gap:11px 18px;margin:0 0 14px}
.prose dt{color:var(--ink-3);font-size:13.5px}
.prose dd{margin:0;color:var(--ink);font-weight:500}
/* ---------- nyilvános állapotlap (időpont lemondása, §17.2) ----------
Három állapot, egy képernyő: kérdés / sikeres lemondás / hibás link.
A két visszajelző állapot ugyanaz az .empty-state doboz, csak az ikon-kör
színe más – zöld, illetve piros, UGYANAZ a színcsalád, mint a .modal-icon-nál.
Ezért itt csak a színvariáns és két apró segédosztály kell, új komponens nem. */
.es-icon.ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.es-icon.bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
/* BOROSTYAN ikon-kör – 2026.09.08. A lemondás-lap „24 órán belül már nem
mondható le" állapotához: ez TÁJÉKOZTATÁS, nem hiba (§4 – a piros a hibáé,
a borostyán a tájékoztatásé), ugyanaz a színcsalád, mint az .alert-warn
sávnál és a .chip.wait jelölésnél. ⚠️ A mintában NINCS ilyen állapot: a két
új lemondás-állapot a design-fázis lezárása után született (§17.2). */
.es-icon.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
/* A lemondott (vagy lemondandó) időpont kiemelve: dátum + időbélyeg + vizsgálat.
Ez a lap TÉNYLEGES tartalma, ezért hangsúlyosabb, mint az .empty-state 340 px-es
magyarázó bekezdése – és épp ezt az adatot nem tudná kiírni egy Tartalmak-szöveg. */
.state-slot{
display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:center;
margin:14px 0 18px;padding:11px 16px;
border:1px solid var(--line-strong);border-radius:var(--radius-sm);
background:var(--surface);
font-size:15px;color:var(--ink);font-weight:620;
}
.state-slot .badge-time{font-size:13.5px}
/* a vizsgálat neve a kiemelt időpont mellett – 2026.08.24-től EGYIK lapon sem
szerepel (a kérdés lapon a dátum + idő elég, a siker lapról a teljes doboz
kikerült), de a szabály marad: ha élesben mégis kellene, egy span elég. */
.state-slot .ss-svc{font-weight:400;color:var(--ink-3);font-size:13.5px}
/* az állapotlapok gombsora középen áll – nincs űrlap, tehát nincs .form-foot sem */
/* ⚠️ AZ .empty-state-EN BELÜLI .hint-box SZABÁLYAI ITT ÁLLTAK – 2026.09.08-án
KIKERÜLTEK, mert MEGSZŰNT A HASZNÁLÓJUK. Két lapon éltek (a lemondás-kérdés
és a hibás link állapotán), és mind a kettő átállt a sikeres foglalás
lapjának formájára: `.empty-state.wide.tight` + SIMA BEKEZDÉSEK.
Amit tudtak, a történet miatt: a doboz `inline-block` volt, tehát a
SZÖVEGÉHEZ igazodott (nem a rendelkezésre álló helyhez), a háttere pedig
FEHÉR – mert maga az .empty-state is szürke, és szürkén a szürke nem válik
el. (Ugyanez az oka, amiért az .es-icon kör is fehér ott.)
⚠️ A .hint-box ALAPSZABÁLYA ÉL TOVÁBB (lentebb): a páciens lista kereső
párbeszéde és a Szolgáltatások lap használja. Csak az .empty-state-en
belüli VÁLTOZAT szűnt meg. */
/* az utolsó elem alsó margója elhagyható – a doboz alsó belső margója elég */
.empty-state > :last-child{margin-bottom:0}
/* BŐVEBB szövegű üres állapot: ahol a magyarázat több mondat, a 340 px-es
alapmérték túl korán tördel. A 760 px még kényelmesen olvasható sorhossz,
és a doboz így is jóval szűkebb, mint a kártya 1024 px-es belső tere.
⚠️ ÉL: a lemondás mind az öt állapota és a sikeres foglalás lapja használja. */
.empty-state.wide p{max-width:760px}
/* TOMOR SZOVEGTORZS AZ URES ALLAPOTBAN – 2026.09.08. (a sikeres foglalas lapja)
Az .empty-state p alapbol 20 px also margot kap, mert ott EGY magyarazo
bekezdes all. A /foglalas/sikeres lapon viszont NEGY bekezdes koveti egymast
(koszonet, cim, elerhetosegek felvezetese, elerhetosegek), es azok EGY
gondolatmenet – 20 px-enkent szetesnenek.
⚠️ MODOSITO OSZTALY, NEM a globalis szabaly atirasa: a .empty-state p-t a
naptar ures allapotai, a paciens lista "nincs talalat" doboza es a lemondas-
lapok is hasznaljak – ott a 20 px a helyes.
⚠️ A fajsuly rendben: .empty-state.tight p (2 osztaly + 1 elem) erosebb, mint
a .empty-state p (1 osztaly + 1 elem), tehat nem a sorrenden mulik. */
.empty-state.tight p{margin:0 auto 0}
/* RÉS AZ ÜRES ÁLLAPOT ÉS AZ UTÁNA ÁLLÓ SÁV KÖZÖTT – 2026.09.08.
Az .alert-nek csak ALSÓ margója van (margin-bottom:14px), tehát egy
.empty-state után KÖZVETLENÜL hozzáér a dobozhoz, és a kettő egyetlen
összefolyó felületnek látszik. A sikeres foglalás lapján ez éles helyzet:
a zöld visszaigazoló doboz alatt egy borostyán tájékoztató sáv áll.
⚠️ Szabályként, nem inline stílusként – az űrlapelemek és a dobozok méretét
CSAK a stíluslap adhatja meg (design.md 4., a 2026.09.07-i döntés). */
.empty-state + .alert{margin-top:16px}
.state-acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
/* ---------- A KÉRDÉS LAP KÖZÉPRE IGAZÍTVA – 2026.09.08. ----------
⚠️ A `.card-body.kozepre` szabály ITT ÁLLT, és 2026.09.08-án KIKERÜLT –
nem azért, mert a követelmény változott, hanem mert MEGSZŰNT A HASZNÁLÓJA.
A fejlesztő aznap előbb azt kérte, hogy a lemondás-kérdés lap szövege
legyen középre igazítva (ezt adta ez az osztály), majd azt, hogy a lap
„olyan legyen, mint a többi foglalás oldal” – ⚠️ **és az `.empty-state`
ALAPBÓL középre igazít.** A középre igazítás tehát megmaradt, csak nem egy
külön osztály adja.
⚠️ Nem hagyjuk benne „hátha jó lesz” alapon (§4: nem hagyunk halott kódot).
Ha egyszer mégis kell egy középre igazított `.card-body`, két sor. */
/* ---------- oldal lábléc (külön doboz a tartalmi kártya alatt) ---------- */
/* ⚠️ AZ ALSÓ BELSŐ MARGÓ NEM DÍSZ – 2026.09.07., a fejlesztő kérése: e nélkül
a lábléc kártyája a lap aljára ért, és beleolvadt a böngésző alsó szélébe.
A 22 px ugyanaz az érték, amit a .wrap használ, tehát a lábléc alatt
ugyanannyi hely marad, mint a kártyák körül. */
.sitefoot{max-width:1420px;margin:0 auto;padding:0 22px 22px}
/* űrlap oldalakon a lábléc a keskenyebb tartalomhoz igazodik (1100 + 2*22 padding) */
.sitefoot.narrow{max-width:1144px}
.sitefoot-inner{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow-sm);
padding:15px 20px;
display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.sitefoot-copy{flex:1;min-width:220px;font-size:13px;color:var(--ink-3)}
.sitefoot-logo{flex:none;display:flex;align-items:center;color:var(--ink-3)}
.sitefoot-logo svg{display:block;height:26px;width:auto}
/* ---------- mobil ---------- */
@media (max-width:1100px){
.layout{grid-template-columns:1fr}
.search input{width:110px}
.rec-top{grid-template-columns:1fr}
}
@media (max-width:860px){
.anam-grid{grid-template-columns:1fr}
.topbar-inner{flex-wrap:wrap;gap:12px}
.topbar-right{flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
.mainnav{overflow:auto}
.topbar .search{display:none}
.cal-grid{gap:5px;padding:12px}
.cal-day{min-height:74px;padding:8px 4px}
.cal-day .num{font-size:16px}
.cal-day .txt{display:none}
.form-grid{grid-template-columns:1fr;gap:6px}
.form-grid > .lbl{text-align:left;padding-top:12px}
/* A .prose cimke-ertek parok egymas ALA kerulnek: a fix 160 px-es
cimkeoszlop telefonon tul keveset hagyna az erteknek (a Kapcsolat lap
nyilvanos, tehat javareszt mobilon nezik). Ugyanaz a minta, mint a
.form-grid-nel egy sorral feljebb. */
.prose dl{grid-template-columns:1fr;gap:2px 0}
.prose dt{margin-top:9px}
.slot-main{flex-wrap:wrap}
.slot-text{order:3;flex-basis:100%}
.wrap{padding:14px}
/* a lábléc alsó margója is követi a .wrap szűkebb értékét */
.sitefoot{padding:0 14px 14px}
}
/* ---------- prototype navigation bar (not part of the real design) ---------- */
/* felső sor: balra a felirat, jobbra a DESIGN MINTA cím */
/* alsó sor: az oldalválasztó gombok */
/* több egyenrangú mező egy címke alatt (pl. a négy „Milyen eredményre vár?") */
.stack-inputs{display:flex;flex-direction:column;gap:8px}
/* helyettesítő jelölők (pl. [paciens_neve]) */
.ph{
font-family:ui-monospace,Consolas,monospace;font-size:12.5px;
color:var(--brand-dark);background:var(--brand-soft);
border:1px solid #cfe1fb;border-radius:6px;padding:2px 6px;white-space:nowrap;
}
/* ---------- megerősítő párbeszéd (törlés) ---------- */
/* Minden törlés gombra ez kérdez rá – a natív confirm() helyett, hogy a design
nyelvén szóljon. A script.js hozza létre, bármelyik oldalon. */
.modal-back{
position:fixed;inset:0;z-index:60;
display:flex;align-items:center;justify-content:center;padding:22px;
background:rgba(16,26,40,.45);
}
.modal{
width:100%;max-width:430px;
background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:0 18px 44px rgba(16,26,40,.24);
overflow:hidden;
}
.modal-body{display:flex;align-items:flex-start;gap:13px;padding:20px}
/* álló változat: cím + teljes szélességű mező egymás alatt (kereső párbeszéd) */
.modal-body.stack{flex-direction:column;align-items:stretch;gap:9px}
.modal-body.stack .search{width:100%}
/* piros figyelmeztető ikon-kör, ugyanaz a színcsalád, mint a törlés gomboknál */
.modal-icon{
flex:none;display:flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:99px;
background:var(--bad-soft);border:1px solid var(--bad-line);color:var(--bad);
}
.modal-title{font-size:15px;font-weight:650;color:var(--ink);line-height:1.45}
.modal-note{font-size:13px;color:var(--ink-3);margin-top:6px}
/* magyarázó szövegdoboz: szaggatott semleges keret + szürke háttér – ugyanaz a
panelforma, mint az „Elérhető szolgáltatások"-nál, az üres állapotoknál és az
eredmény feltöltő űrlapnál (§4). Ott használjuk, ahol egy mező mellé egy mondat
magyarázat kell, és el akarjuk választani a mezőtől. */
.hint-box{
padding:10px 12px;
border:1px dashed var(--line-strong);
border-radius:var(--radius-sm);
background:var(--surface-2);
color:var(--ink-2);font-size:13px;line-height:1.5;
}
.modal-foot{
display:flex;justify-content:flex-end;gap:10px;
padding:13px 20px;background:var(--surface-2);border-top:1px solid var(--line);
}
/* a megerősítő gomb tömör piros – nem "outline danger", mert ez itt a fő művelet */
.btn.bad{background:var(--bad);color:#fff;border-color:transparent}
.btn.bad:hover{background:#96201b;color:#fff}
/* ---------- Ambuláns lap (§22) ---------- */
/* Egy szakasz ÖNÁLLÓ BOX (2026.08.22.): fejlécében balra a szakasz neve, jobbra a
két kitöltő gomb, alatta a szerkesztő. Ugyanaz a szerkezet, mint a foglalás-
blokknál (szürke fejsor + fehér törzs egy kereten belül), tehát a lap egy már
meglévő idiómáját ismétli – így az öt szakasz elválik egymástól. */
.amb-sec{
border:1px solid var(--line);border-radius:var(--radius-sm);
overflow:hidden;margin-bottom:18px;
}
.amb-sec:last-child{margin-bottom:0}
.amb-sec-head{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:11px 13px;background:var(--surface-2);border-bottom:1px solid var(--line);
}
.amb-sec-title{font-size:14.5px;font-weight:650;color:var(--ink)}
.amb-sec-head .grow{flex:1}
/* a szerkesztő a boxon belül teljes szélességben ül, saját keret és lekerekítés
nélkül – a box kerete szolgál helyette; a fókusz-gyűrűt is a box kapja */
.amb-sec .editor{border:0;border-radius:0}
.amb-sec .editor:focus-within{box-shadow:none}
.amb-sec:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,104,214,.14)}
/* öt szakasz van egy lapon, ezért a szerkesztő területe alacsonyabb az alap 400
px-nél (élesben 100 px a szerkesztő magassága; itt 170, mert a bővített eszköztár
több helyet kíván, és a szöveg is hosszabb lehet). Írás közben magától nyúlik. */
.amb-sec .editor-area{min-height:170px}
/* sablonválasztó párbeszéd: görgethető lista, soronként név + részlet + gomb */
.modal.wide{max-width:640px}
/* Pontosan öt sor látszik, ha több sablon van, a lista görgethető.
Ezért a SOR MAGASSÁGA FIX (48 px, a szegélyt is beleértve – globális
box-sizing:border-box), és a lista max-height-ja ennek pont az ötszöröse.
Ha a kettő nem illeszkedik, a hatodik sor széle kilátszik alul, és az úgy
néz ki, mintha hézag és dupla vonal lenne a doboz alján. */
.tpl-list{
max-height:240px;overflow-y:auto; /* 5 × 48 px */
border:1px solid var(--line);border-radius:var(--radius-sm);
background:var(--surface);
}
.tpl-row{
display:flex;align-items:center;gap:12px;
height:48px;padding:0 13px;border-bottom:1px solid var(--line);
}
.tpl-row:last-child{border-bottom:0}
.tpl-row .grow{flex:1;min-width:0}
.tpl-name{
font-size:13.5px;font-weight:600;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* üres állapot a listában, ha a keresésre nincs találat */
.tpl-empty{padding:16px 13px;color:var(--ink-3);font-size:13px;text-align:center}
/* ---------------------------------------------------------------------
PACIENS-NEVJAVASLO (auto-complete.min.js) - 2026.09.07.
⚠️ MIERT KERULT IDE: a javaslatlistat a template.php inline JS-e koti be,
es az MINDKET design-agon lefut - a stiluslapja viszont CSAK A REGI agon
toltodott be (style.css 523-573.). Az uj designban tehat a lekerdezes
lefutott, az adat megjott, a lista el is keszult, de STILUS NELKUL:
position:static-kent a lap ALJARA kerult, hatter es keret nelkul.
A fejleszto igy latta: "a konzolban latom a keresest, de semmit nem
jelenit meg". (design.md 15.7/93.)
⚠️ A "core" sorokat A BOVITMENY IGENYLI, nem dizajn: a position:absolute,
a display:none es a box-sizing nelkul a lista nem tud a mezo ala allni.
A bovitmeny csak a left/top/width erteket irja be inline-ban.
A megjelenes a lap sajat legordulo menujet koveti (.menu): feher lap,
--line keret, lagy arnyek, --brand-soft kiemeles.
--------------------------------------------------------------------- */
.autocomplete-suggestions{
/* core - a bovitmeny mukodesehez kell */
position:absolute;display:none;z-index:2000;box-sizing:border-box;
max-height:320px;overflow:hidden;overflow-y:auto;
/* megjelenes - az uj design nyelven */
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius-sm);
box-shadow:var(--shadow);
padding:4px;
text-align:left;cursor:default;
margin-top:4px;
}
.autocomplete-suggestion{
padding:8px 10px;
border-radius:8px;
font-size:14px;color:var(--ink-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ⚠️ A bovitmeny a talalat egyezo reszet -be teszi - ez a kiemeles,
nem "felkover szoveg": ezert kap sajat szint. */
.autocomplete-suggestion b{font-weight:700;color:var(--ink)}
.autocomplete-suggestion.selected{background:var(--brand-soft)}
.autocomplete-suggestion.selected,
.autocomplete-suggestion.selected b{color:var(--brand-dark)}
/* Egerrel is jelezzunk, ne csak a billentyuzetes lepkedesnel. */
.autocomplete-suggestion:hover{background:var(--surface-2)}
/* ⚠️ A NÉV MELLETT A TAJ SZÁM áll – 2026.09.08. (a fejlesztő kérése; korábban
a születési dátum volt itt). Halványabb és kisebb, mint a név: az
azonosításhoz kell, de nem az a lényeg – ugyanaz a viszony, mint az
.info-rows dt/dd párnál. ⚠️ Ha a pácienshez nincs TAJ rögzítve, ez a span
MEG SEM JELENIK (a template.php dönt róla) – a „0" helykitöltő értéket is
üresnek vesszük (§15.7/71.). */
.autocomplete-suggestion .ac-extra{color:var(--ink-3);font-size:13px}
.autocomplete-suggestion.selected .ac-extra{color:var(--brand-dark)}