/* VET-PROFIL arculat - Vet-Profil CRM (sales.vetprofil.hu).
*
* A kartya projekt stilusabol nott ki, ugyanazokkal a szinvaltozokkal - a ket
* felulet szandekosan egy csaladba tartozik. Ami itt tobb: a CRM-nek surubb
* tablazatai, allapotjelvenyei es mobilra szant urlapjai vannak.
*
* A szinek es a tipografia a vetprofil.hu-rol: meleg arany kiemeles (#EDB059)
* sotet, majdnem fekete szovegen (#232121), sok feher felulettel. A felepites
* viszont szandekosan csupasz: nincs menusor es nincs lablec-sav, a publikus
* oldal egyetlen kozepre zart oszlop. Az arculatbol a SZIN marad, nem a
* weboldal szerkezete.
*
* A Montserrat helyben van (assets/font/), nincs CDN - a felulet halozat
* nelkul, belso halon is ugyanigy nez ki.
*/
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 700; /* valtozo betukeszlet: egy fajl, minden vastagsag */
font-display: swap;
src: url('/assets/font/montserrat-latin-ext.woff2') format('woff2');
/* Az o es u is ide esik - magyar szoveghez ez a szelet kell. */
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/font/montserrat-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--arany: #EDB059;
--arany-sotet: #DE9330;
--arany-halk: #FBF1E1;
--arany-vonal: #F1DDBE;
--arany-derenges: #F9E8CE; /* a belepolap felso derengese */
--tinta: #232121;
--tinta-halk: #6C6763;
--vonal: #E8E2DA;
--lap: #FFFFFF;
--hatter: #FBF9F6;
--zold: #4C8A38;
--zold-halk: #EDF5E9; /* halvany hatter */
--zold-kozep: #DCEBD3; /* kitoltes: latszik a halk hatteren is */
--zold-vonal: #CFE4C6; /* szegely a halk hatterhez */
--piros: #C0392B;
--piros-halk: #FBEDEB;
--piros-vonal: #F1CFCA;
/* SEMLEGES kiemeles: se nem jo, se nem rossz - csak allapot („varakozik",
* „felkutatott"). A `--hatter`-nel egy arnyalattal sotetebb, hogy feher
* kartyan is elvaljon. */
--semleges: #F2EFEB;
/* A TERKEP VIZE. Azert token, mert a partnerterkep csempeit is mi rajzoljuk
* (`tools/csempe_stilus.py`), es a stiluslap ES a terkep-stilus ugyanebbol
* a sorbol veszi - kulonben a Duna szine ket helyen allna, es elcsuszna. */
--viz: #C9DDEB;
--tinta-halvany: #B4ADA6; /* urlapmezo sugoszovege */
--arnyek: 0 1px 2px rgba(35,33,33,.04), 0 8px 28px rgba(35,33,33,.05);
/* A LEKEREKITES NEGY FOKA. Eddig egyetlen token volt (`--iv`), a tobbi
* huszonhet helyen NYERS KEPPONTBAN allt - es szet is csuszott: negyfele
* ivvel keszult negy urlapmezo (6, 8, 10 es 12 kepponttal), harom egyforma
* szeru kis negyzetes gomb pedig 6 es 8 kozott oszlott meg. Egymas mellett
* ez latszik is, es nem szandekos ritmusnak latszik, hanem rendetlensegnek.
*
* A SKALA AZ ELEM MERETEHEZ IGAZODIK: minel nagyobb a doboz, annal nagyobb
* iv kell, hogy a sarok ugyanolyan „lagynak" latsszon. */
--iv: 14px; /* lap-szintu doboz: kartya, ablak, tablazat */
--iv-kozep: 12px; /* kartyan BELULI doboz: csempe, szalag, uzenet */
--iv-kicsi: 10px; /* urlapmezo es listasor */
--iv-apro: 8px; /* apro negyzetes vezerlo (28-34 keppont) */
/* A legordulo sajat nyila. Beagyazva, hogy ne legyen kulon keres erte;
* a szine a `--tinta-halk` (#6C6763) - ha az valtozik, ezt is at kell irni. */
--nyil-le: url('data:image/svg+xml;utf8,: akkor a huszonkilenc ikon forrasa a JS-be
* kerulne, es minden lapon ujra atmenne a droton.
*
* A `--ikon` valtozot a `kozos.js` `ikon()` fuggvenye allitja be. Uj ikonhoz
* elég a fajlt bemasolni az `assets/ikon/` ala - itt nincs mit modositani. */
.ikon {
display: inline-block; flex: none;
width: 1.15em; height: 1.15em;
vertical-align: -0.2em;
background-color: currentColor;
-webkit-mask: var(--ikon) center / contain no-repeat;
mask: var(--ikon) center / contain no-repeat;
}
.ikon.nagy { width: 1.5em; height: 1.5em; }
/* ----------------------------------------------------------------- kartek */
.kartya {
background: var(--lap); border: 1px solid var(--vonal);
border-radius: var(--iv); box-shadow: var(--arnyek); padding: 26px;
text-align: left; /* a kozepre zart oszlopban is balra olvas */
}
/* ------------------------------------------------------------------ urlap */
label { display: block; font-weight: 600; font-size: .82rem; margin-bottom: 6px; }
.sugo { display: block; font-weight: 400; font-size: .78rem; color: var(--tinta-halk); margin-top: 4px; }
input[type=text], input[type=search], input[type=date], input[type=time],
input[type=month],
input[type=number], input[type=email], input[type=tel], select {
width: 100%; padding: 12px 14px;
font: inherit; font-size: 1rem; color: var(--tinta);
background: var(--lap);
border: 1px solid var(--vonal); border-radius: var(--iv-kicsi);
transition: border-color .12s, box-shadow .12s;
}
/* A FOKUSZGYURU EGY HELYEN. Harom kulon szabalyban allt ugyanez (`input`,
* `textarea`, `.fajl-mezo`) - harom helyen kellett volna atirni, ha a kiemeles
* szine valtozik, es a harmadik elobb-utobb kimaradt volna. */
input:focus, select:focus, textarea:focus,
/* ------------------------------------------- legordulo, datum, fajlmezo
*
* MIERT KELL EZ A HAROM KULON. A bongeszo mindharomhoz sajat rajzot ad, es az
* MINDEN GEPEN MAS: a legordulo nyila Windowson szurke haromszog, macOS-en
* kek, Androidon megint mas; a datummezo mellett ott ul egy rendszerikon; a
* fajlmezo elott pedig egy „Fájl kiválasztása" gomb a rendszer sajat
* gombjaval. Egy lapon, ahol minden mas a mi arculatunk, ezek ugy neznek ki,
* mintha egy masik programbol keveredtek volna oda.
*
* AMIT NEM TUDUNK ATRAJZOLNI: a legordulo NYITOTT listajat es a datumvalaszto
* felugro naptarat. Azok a rendszerhez tartoznak, es szandekosan nincs is
* ranuk befolyasunk - egy sajat naptar-widget tobb hiba lenne, mint amennyi
* hasznot hoz (billentyuzet, kepernyoolvaso, mobil).
*/
/* A LEGORDULO: sajat nyil, `appearance: none`-nal. A nyil beagyazott SVG,
* hogy ne kelljen kulon fajlt letolteni erte, es a szinet a `--tinta-halk`
* adja (a keret szinevel egyutt valtozik, ha egyszer atallitjuk). */
select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding-right: 40px; cursor: pointer;
background-image: var(--nyil-le);
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px 8px;
}
select:disabled { color: var(--tinta-halvany); cursor: default; opacity: 1; }
/* A tobbsoros valaszto (`size`) nem legordulo: ott a nyil zavaro lenne. */
select[size]:not([size="1"]) { background-image: none; padding-right: 14px; }
/* A DATUMMEZO. A bongeszo naptar-ikonja a mezo VEGERE kerul, egyseges
* meretben es a mi szinunkkel; Chromeban a `-webkit-calendar-picker-indicator`
* az egyetlen fogodzo. Firefoxban nincs ilyen ikon - ott a mezo maga marad,
* ami igy is a mi keretunket viseli. */
input[type=date], input[type=time], input[type=month] { cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
opacity: .55; cursor: pointer; padding: 2px; border-radius: 6px;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=month]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover {
opacity: 1; background: var(--arany-halk);
}
/* Az ures datummezo halvanyabb: ugy viselkedjen, mint egy tipp-szoveg. */
input[type=date]:not(:focus):invalid { color: var(--tinta-halvany); }
input::placeholder { color: var(--tinta-halvany); }
.mezok { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mezok .teljes { grid-column: 1 / -1; }
@media (max-width: 620px) { .mezok { grid-template-columns: 1fr; } }
.gomb {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 30px; font: inherit; font-weight: 700; font-size: .95rem;
color: var(--lap); background: var(--arany); border: 1px solid var(--arany);
border-radius: 999px; cursor: pointer; text-decoration: none;
transition: background .12s, border-color .12s, transform .06s;
}
.gomb:hover { background: var(--arany-sotet); border-color: var(--arany-sotet); color: var(--lap); }
.gomb:active { transform: translateY(1px); }
.gomb[disabled] { opacity: .5; cursor: default; transform: none; }
.gomb.halk { background: transparent; color: var(--tinta); border-color: var(--vonal); }
.gomb.halk:hover { background: var(--arany-halk); border-color: var(--arany-vonal); color: var(--tinta); }
.gomb.kicsi { padding: 7px 16px; font-size: .82rem; }
/* Lapozó a lista alján.
*
* `1fr auto 1fr`: a helyzet-jelző PONTOSAN középen áll, függetlenül attól,
* milyen hosszú a két gomb felirata. A `space-between` ehhez kevés volt - ott
* a jelző oldalra csúszott, és lapozás közben ugrált is, ahogy a számok
* hossza változott.
*
* A SÁV A TÁBLÁZAT DOBOZÁN KÍVÜL van (a `.tabla-doboz` vízszintesen
* görgethető), ezért kap saját elválasztó vonalat: enélkül a semmiben lógna. */
.lapozo {
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center; gap: 12px;
margin-top: var(--koz-belso); padding-top: var(--koz-belso);
border-top: 1px solid var(--vonal);
}
.lapozo:empty { display: none; }
.lapozo > :nth-child(1) { justify-self: start; }
.lapozo > :nth-child(3) { justify-self: end; }
/* A TILTOTT GOMB HELYE MEGMARAD, csak nem látszik. Egy kiszürkült pirula az
* első lapon semmit nem mond (a jelző úgyis kiírja, hogy „1–50"), eltüntetve
* viszont a középső jelző a helyén marad - nem ugrik el az elején és a
* végén. */
.lapozo .gomb[disabled] { visibility: hidden; }
.lapozo-hol {
font-size: .82rem; color: var(--tinta-halk); white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Telefonon a hosszú felirat nem fér el egy sorban a jelzővel: a jelző fölé
* kerül, a két gomb alatta osztozik a szélességen. */
@media (max-width: 560px) {
.lapozo { grid-template-columns: 1fr 1fr; gap: 10px; }
.lapozo-hol { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
.lapozo > :nth-child(1), .lapozo > :nth-child(3) { grid-row: 2; }
.lapozo .gomb { width: 100%; }
}
/* KÉTHETES SZÁLLÍTÁSI NAPTÁR. Hét oszlop, két sor - az oszlop MINDIG ugyanaz
* a hétnap, mert egy naptár ettől olvasható.
*
* MOBILON EGY OSZLOP. Hét oszlop egy telefonon 50 képpont széles cellákat
* adna, amikbe egy körnév sem fér ki - ott a napok egymás alatt olvashatóak,
* és az üres napok ki is maradnak (lásd a `:has()` szabályt lent). */
/* ÖT oszlop, nem hét: hétvégén sosem megy kocsi, két üres oszlop csak helyet
* vinne el. Így egy sor = egy munkahét, és az oszlop mindig ugyanaz a hétnap.
* (Ha a naptárban mégis áll valami hétvégén, a szerver beadja azt a napot is -
* olyankor a sor eltolódik, de a szállítás látszik.) */
.naptar-racs {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
/* EGY CSEMPE, KET HELYEN. A szallitasi kor egy napja es egy szabadsag-kartya
* ugyanaz a doboz: ugyanaz a meret, ugyanaz a hatter, ugyanaz a kiemeles. Ez
* KERES volt („a ket resz dizajnja egyezzen meg"), es eddig ket kulon, kezzel
* egyformara irt szabaly tartotta - az elso atszabasnal szethuztak volna.
* A kiemelt allapot neve marad ketfele (`ma` / `most`), mert MAST jelentenek:
* az egyik a mai nap, a masik az, aki epp tavol van. */
.naptar-nap, .szab-kartya {
min-width: 0; padding: 9px 10px; border-radius: var(--iv-kicsi);
background: var(--hatter); border: 1px solid transparent;
}
.naptar-nap.ma, .szab-kartya.most {
border-color: var(--arany); background: var(--arany-halk);
}
.naptar-nap.hetvege { background: transparent; color: var(--tinta-halk); }
/* A NAP FEJLECE EGY SORBAN: „kedd szept. 1." Korabban ket sor volt (a nap
neve alatt a datum), es a naptar minden cellaja egy sorral magasabb lett -
negy hetnyi nezetben ez husz felesleges sor. Mobilon amugy is egy sorban
allt (lasd a lenti media-lekerdezest), tehat ez csak az asztali nezetet
igazitja a mar meglevo mobilhoz. */
.naptar-fej {
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
margin-bottom: 6px; line-height: 1.25;
}
.naptar-hetnap { font-size: .76rem; font-weight: 700; }
.naptar-datum { font-size: .72rem; color: var(--tinta-halk); }
.naptar-tetel {
display: flex; align-items: baseline; gap: 5px;
font-size: .78rem; margin-top: 4px; overflow-wrap: anywhere;
}
/* A FELVÉTEL DŐLT és halvány: nem megy kocsi, csak telefonálni kell. */
.naptar-tetel.felvetel { font-style: italic; color: var(--tinta-halk); }
.naptar-tetel .kor-ikon { align-self: center; } /* baseline helyett kozep */
@media (max-width: 760px) {
.naptar-racs { grid-template-columns: 1fr; gap: 4px; }
.naptar-nap { display: flex; gap: 12px; align-items: baseline; }
/* A sorba rendezes mar az alapszabalyban van; itt csak a szelesseg kell,
hogy a napok cimkéi egymas alatt egy vonalban alljanak. */
.naptar-fej { margin: 0; flex: 0 0 auto; min-width: 8.5em; }
/* Az ÜRES napok kimaradnak: telefonon a görgetés drágább, mint a teljesség,
és egy üres nap úgyis csak annyit mond, hogy nincs dolga vele. */
.naptar-nap:not(:has(.naptar-tetel)) { display: none; }
}
/* Diktálás a táblázatcellában: csak a mikrofon gomb és az állapot fér el -
* a súgómondat és a teljes szélességű gomb szétfeszítené a sort.
*
* SZOROSAN A MEZŐ ALATT: a gomb ahhoz a szövegmezőhöz tartozik, ami fölötte
* van - egy nagyobb hézag két külön dolognak mutatná őket. */
.diktalo.tomor { margin-top: 2px; }
.diktalo.tomor .rogzito-gombsor { gap: 8px; }
.diktalo.tomor .gomb {
padding: 3px 10px; font-size: .74rem; width: auto; gap: 5px;
}
.diktalo.tomor .gomb .ikon { width: .95em; height: .95em; }
.diktalo.tomor .diktalo-allapot { font-size: .72rem; }
.szoveg-szerkeszto textarea { width: 100%; }
/* A törlés × -e HALVÁNY, amíg rá nem visznek: egy piros gomb a ceruza mellett
* folyton azt kiabálná, hogy „itt lehet rombolni". A megerősítő kérdés úgyis
* ott áll utána. */
.gomb-x.torlo { color: var(--tinta-halk); font-size: 1.05rem; line-height: 1; }
/* A `.torlo` lebegese ugyanaz, amit a `.gomb-x:hover` amugy is ad - kulon
* szabaly nelkul is piros lesz. */
.ceruza-cella { white-space: nowrap; }
/* A szerepkör-próba szalagja. VÉGIG LÁTSZIK, mert enélkül a vezető azt hinné,
* hogy tőle vették el a gombokat - és nem találná, hogyan kapja vissza. */
/* „Most nem a sajátodat látod" - a fejlécben (szerepkör-próba) és a lap
* tetején (más kezdőlapja) is ugyanez a szalag. Egy jelentés, egy rajz.
*
* Az `order`/`flex-basis` csak a fejlécben számít (az flexbox); a lap
* tetején sima blokként ül; ott a `#tartalom` rács `gap`-je adja a térközt. */
.proba-szalag {
display: flex; align-items: center; justify-content: center;
gap: 12px; flex-wrap: wrap;
margin: 0; padding: 8px 14px; border-radius: 999px;
background: var(--arany-halk); color: var(--arany-sotet);
font-size: .82rem; font-weight: 700;
}
/* AZ `order` CSAK A FEJLECBEN. A `#tartalom` RACS, es az `order` a
* racs-elemekre is hat: felso szinten hagyva a szalag a lap VEGERE kerult -
* ott volt, csak le kellett gorgetni hozza, tehat ugy latszott, mintha meg
* sem jelent volna. A `flex-basis` ugyanez: a fejlec flex-sorat tori, a
* racsban ertelmetlen. */
.fejlec .proba-szalag {
order: 99; flex-basis: 100%; margin: 10px 0 0;
}
/* ÖSSZETARTOZÓ GOMBOK egy egységként (pl. „Múlt hét / 30 nap / Összes").
*
* MIERT NEM HAROM KULON PIRULA: ez egy választás három állapota, nem három
* független művelet. Külön lekerekítve három különálló gombnak látszott,
* ráadásul eltérő szélességgel - a hosszabb felirat szélesebb gombot kapott,
* és a sor rendetlennek tűnt. Egyenlő mezők, közös szegély, csak a két szélső
* sarok lekerekítve.
*
* `grid-auto-columns: 1fr`: nem köti meg a darabszámot - négy gombbal is
* egyenlő mezőket ad. */
.gombcsoport {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
margin-top: 12px;
}
.gombcsoport .gomb {
border-radius: 0; margin: 0; min-width: 0;
/* A kozos szegely: a szomszedok kozott EGY vonal legyen, ne ketto. */
border-right-width: 0;
}
.gombcsoport .gomb:first-child { border-radius: 999px 0 0 999px; }
.gombcsoport .gomb:last-child {
border-radius: 0 999px 999px 0; border-right-width: 1px;
}
.gombcsoport .gomb:only-child { border-radius: 999px; border-right-width: 1px; }
/* ------------------------------------------------------------ kereso sav */
/* A publikus kereso egyetlen fuggoleges oszlop: cimke, mezo, gomb. */
.kozep .kereso { display: block; }
.kozep .kereso label {
text-transform: uppercase; letter-spacing: .14em;
font-size: .7rem; color: var(--tinta-halk); margin-bottom: 10px;
}
.kozep .kereso input {
/* Az iv a TOBBI URLAPMEZOEVEL egyezik. Korabban itt 12 keppont allt, a
partner-keresonel 10 - ket kereso mezo ket alakkal. */
border-radius: var(--iv-kicsi);
font-size: 1.45rem; font-weight: 700; letter-spacing: .14em;
text-align: center;
/* Ket oldalt AZONOS behuzas: igy a szoveg tenyleg kozepen all, a jobb
* oldali resben pedig elfer a markalogo. */
padding: 16px 72px;
border-radius: var(--iv-kozep);
font-variant-numeric: tabular-nums;
}
.kozep .kereso .gomb { margin-top: 16px; min-width: 200px; }
/* A markalogo a mezo jobb szelen bukkan fel, amint a sorszam felismerheto. */
/* ---------------------------------------------------------------- allapot */
.szalag {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 15px 18px; border-radius: var(--iv-kozep); margin-bottom: 22px;
font-weight: 700;
}
/* A SZALAG ES AZ UZENET UGYANAZ A KET SZIN. Az egyik a lap tetejen all
* allandoan, a masik lebegve villan fel - de mindketto ugyanazt a jo/rossz
* iteletet mondja, tehat egy helyen all a szinuk. */
.szalag.jo, .uzenet.jo {
background: var(--zold-halk); color: var(--zold);
border: 1px solid var(--zold-vonal);
}
.szalag.rossz, .uzenet.hiba {
background: var(--piros-halk); color: var(--piros);
border: 1px solid var(--piros-vonal);
}
.szalag.semleges { background: var(--arany-halk); color: var(--tinta); border: 1px solid var(--arany-vonal); }
.szalag .kis { font-weight: 500; font-size: .88rem; opacity: .85; }
.jelveny {
display: inline-block; padding: 3px 11px; border-radius: 999px;
font-size: .74rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
/* HAROM ALLAPOTSZIN, EGY HELYEN - nyolc szabalyban allt ugyanez a harom par.
* A jelveny es a valtozas-nyil MAS komponens, de ugyanazt a harom iteletet
* mondja ki (jo / rossz / semleges), es ha az egyik zoldje elmozdul a
* masiketol, az a lapon azonnal latszik. */
.jelveny.jo, .jelveny.aktiv, .valtozas.no {
background: var(--zold-halk); color: var(--zold);
}
.jelveny.rossz, .jelveny.inaktiv, .valtozas.csokken {
background: var(--piros-halk); color: var(--piros);
}
.jelveny.varo, .jelveny.felkutatott {
background: var(--semleges); color: var(--tinta-halk);
}
/* Szabadsag. ARANY szint kap, nem pirosat es nem zoldet: nem hiba es nem
* siker, hanem tudnivalo - „ot ma nem ered el". A piros riasztasnak latszana.
* A `letter-spacing` itt nulla, mert ez MONDAT, nem cimke ("Szabadsagon
* 09-11-ig"), es a ritkitas egy mondatot nehezen olvashatova tesz. */
/* FONTOSSAG (a partnerlista oszlopa, 2026-09-21). A szin a JELENTESBOL jon:
a strategiai partner zold (ide erdemes menni), a csokkeno es a „nem
erdemes" piros/semleges (itt mas dolgod van), a fejlodo arany (figyeld), a
„Dobi szallit" pedig semleges tudnivalo - nem a mi kapcsolatunk minosege.
A MEGLEVO allapot-tokeneket hasznaljuk, nem uj szineket: a lapon igy
ugyanaz a harom csalad beszel, mint a statusznal. */
.jelveny.fontos-strategiai { background: var(--zold-halk); color: var(--zold); }
.jelveny.fontos-fejlodo {
background: var(--arany-halk); color: var(--arany-sotet);
}
.jelveny.fontos-csokkeno { background: var(--piros-halk); color: var(--piros); }
.jelveny.fontos-nem, .jelveny.fontos-dobi {
background: var(--semleges); color: var(--tinta-halk);
}
.jelveny.szabadsag {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 12px 4px 5px; /* balra kevesebb: ott a kep ul */
background: var(--arany-halk); color: var(--arany-sotet);
letter-spacing: 0; font-size: .78rem; font-weight: 600;
}
/* A rajz TOBBSZINU, tehat kep - nem a maszkos `.ikon`. A 26px az a meret,
* ahol a palmafa es a kunyho sziluettje meg felismerheto; kisebben folt. */
.jelveny-kep { width: 26px; height: 26px; object-fit: contain; flex: none; }
/* AKI BEJOTT a szabadsaga alatt: nem arany, hanem semleges. Az arany azt
* jelenti, „ot ma nem ered el" - ha megis dolgozik, epp az ellenkezoje igaz,
* es ugyanaz a szin ket ellentetes dolgot mondana. */
.jelveny.szabadsag.dolgozik {
padding-left: 12px;
background: var(--semleges); color: var(--tinta-halk);
}
/* A jelvenyen BELULI gomb. Nem `.gomb`: az akkora, hogy szetfesziti a
* pirulat - ez egy szo a mondat vegen, ami rakattinthato. */
.jelveny-gomb {
border: none; background: none; padding: 0; margin-left: 2px;
font: inherit; color: inherit; opacity: .75;
text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.jelveny-gomb:hover { opacity: 1; }
.jelveny-gomb:disabled { opacity: .4; cursor: default; }
/* ---------------------------------------------------- szallitasi korok */
/* A kor kovetkezo napjai. NEM jelveny: ez adat, nem allapot - a jelveny a sor
* jobb szelen all, es azt jelenti, hogy MA van dolga vele. */
.kor-napok {
/* KOZEPRE IGAZITVA. Alapertelmezesben a flex-elemek NYULNAK (`stretch`), a
teherauto ikon doboza tehat a sor teljes magassagat felvette, es a rajz
a szoveghez kepest feljebb ult. Tobb soros (tordelt) datumlistanal ez
latvanyosan elcsuszott. */
display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
margin-top: 2px; font-size: .86rem; color: var(--tinta-halk);
}
/* A KET IKON KET SZINT KAP, mert KET KULON MUNKA:
sarga = megy a kocsi (szallitas)
zold = telefonalni kell (rendelesfelvetel)
Eddig mindketto a szoveg szurkejet vette fel, es csak a rajzuk kulonbozott -
egy pillantasra nem valtak el. A szin a STILUSLAPON van, nem a JS-ben: a
jelentes az elem osztalyabol jon, nem egy odairt szinkodbol.
Az `opacity` elmarad: egy halvanyitott sarga a feher lapon alig latszana. */
.kor-ikon { width: 1.15em; height: 1.15em; flex: none; }
.kor-ikon.szallitas { color: var(--arany-sotet); }
.kor-ikon.rendeles { color: var(--zold); }
.kor-nap { white-space: nowrap; }
.kor-nap + .kor-nap::before { content: "·"; margin-right: 8px; }
.kor-nap.ma { color: var(--arany-sotet); font-weight: 700; }
/* ------------------------------------------------------------ kartyalap */
.szam {
font-size: 1.9rem; font-weight: 700; letter-spacing: .1em;
font-variant-numeric: tabular-nums; line-height: 1.1;
}
.adatok { display: grid; gap: 2px 26px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* A `min-width: 0` NEM dísz: a racs elemenek alapertelmezett also hatara a
* TARTALOM szelessege, es egy hosszu e-mail cimben nincs hol torni. Enelkul
* a „mihaly.ibolya59@gmail.com" kilogott a kartyabol. */
.adatok div { padding: 10px 0; border-top: 1px solid var(--vonal); min-width: 0; }
.adatok dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-halk); font-weight: 700; }
/* `anywhere` es nem `break-word`: ez a szamitott legkisebb szelesseget is
* csokkenti, tehat a racs oszlopa is ossze tud huzodni. A `break-word` csak
* a tordelest engedi meg, a tulcsordulast nem szunteti meg. */
/* Tobb e-mail cim egymas alatt, nem egy sorba zsufolva: igy latszik, hogy
* KETTO van, es mindegyik kulon kattinthato. */
.email-tetel + .email-tetel { margin-top: 3px; }
.adatok dd { margin: 2px 0 0; font-weight: 600;
overflow-wrap: break-word; /* tartalek a regi Safarinak */
overflow-wrap: anywhere; }
/* ------------------------------------------------------------------ lista */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--vonal); vertical-align: middle; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-halk); white-space: nowrap; }
tbody tr:hover { background: var(--arany-halk); }
/* RENDEZO OSZLOPFEJ. A `th` marad `th`: a gomb csak a KATTINTHATO felulet
benne - igy a tablazat szerkezete valtozatlan, es a billentyuzet is eleri.
A gomb ORokli a `th` betujet; sajat kinezete nincs, csak a mutato es a
nyil. */
th .rendezo {
display: inline-flex; align-items: center; gap: 5px;
padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; color: inherit; text-transform: inherit;
letter-spacing: inherit; white-space: nowrap;
}
th .rendezo:hover { color: var(--tinta); }
th .rendezo.aktiv { color: var(--arany-sotet); }
.rendezo-nyil { font-size: .68rem; line-height: 1; }
td.szamoszlop { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; white-space: nowrap; }
.tabla-doboz { overflow-x: auto; border: 1px solid var(--vonal); border-radius: var(--iv); background: var(--lap); }
/* Kapcsolo a jutalmakhoz az admin listaban. */
.kapcs { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .84rem; white-space: nowrap; }
.kapcs input { width: 18px; height: 18px; accent-color: var(--zold); cursor: pointer; margin: 0; }
/* A lista szurosora keskenyebb, mint a regisztracios urlap. */
.szuro { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-bottom: 18px; }
@media (max-width: 620px) { .szuro { grid-template-columns: 1fr; } }
/* Az admin urlapon a szam melletti markajel kisebb mezoben ul. */
#uj-szam { padding-right: 84px; letter-spacing: .08em; font-weight: 700; }
#uj-marka { height: 20px; right: 10px; }
/* -------------------------------------------------------------- belepes */
/* A talalati lap aljan ul, elvalasztva: nem a kartya adata, hanem ajanlat.
* Alaphelyzetben egyetlen halk gomb, kibontva egy soros urlap. */
.belepo {
margin-top: 20px; padding-top: 18px;
border-top: 1px solid var(--vonal);
}
/* UGYANAZ A SOR-ALAK ket helyen: a belepolap urlapja es a terkep
buborekjanak adatsora. Negy azonos deklaracio ket neven allt. */
.belepo-urlap,
.terkep-buborek-sor { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.belepo-urlap input { width: auto; flex: 1 1 150px; min-width: 130px; padding: 9px 12px; font-size: .92rem; }
.belepo-urlap .uzenet { flex: 1 1 100%; margin: 4px 0 0; }
/* Az admin fejlecben a kilepes gomb a jobb szelre kerul. */
.admin-fej .gomb + .gomb { margin-left: 10px; }
/* ------------------------------------------------- dontes a levelbol */
/* A vezeto a szabadsagkerelmet a LEVELBOL is eldontheti, belepes nelkul. Az a
* lap nem az app resze (nincs munkamenet, nincs JS) - a stiluslapja viszont
* ugyanez, mert az `/assets/` nyilvanos. Igy egy kulon arculatu, idegennek
* latszo lap helyett ugyanaz a rendszer fogadja.
*
* Ugyanaz a keskeny, kozepre zart hasab, mint a belepesnel: egy kerdes, egy
* gomb. Sajat szelesseget kap, mert itt nincs `#tartalom` racs korulotte. */
.dontes-lap {
max-width: 460px; margin: 0 auto; padding: 40px 20px 60px;
text-align: center;
}
.dontes-lap form { margin-top: var(--koz); }
.dontes-lap label { display: block; text-align: left; margin-bottom: 6px; }
.dontes-lap input[type="text"] { margin-bottom: var(--koz-belso); }
.dontes-lap .gomb { margin-top: 6px; }
/* A KET DONTES EGYFORMA SULYU. Nem az egyik a „fo" gomb es a masik egy halk
* link: a jovahagyas es az elutasitas ugyanolyan ervenyes valasz, es a
* felulet ne nyomja egyik fele sem. Ezert azonos meret, azonos rajz, csak a
* szin kulonbozik - a szalagoknal mar bevalt zold/piros csaladdal. */
.dontes-gombok {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-top: var(--koz);
}
.dontes-gombok .gomb { width: 100%; padding: 14px 10px; }
.gomb.jovahagy {
background: var(--zold-halk); color: var(--zold);
border-color: var(--zold-vonal);
}
.gomb.jovahagy:hover {
background: var(--zold); color: var(--lap); border-color: var(--zold);
}
/* A PIROS GOMBKEP EGY HELYEN. Az `.elutasit` a döntési lapé, a `.gomb-x`
a táblázatsorok végén álló „×", a `.terkep-kor-le` a szállítási körből
levevő — más a helyük, azonos a jelentésük és a képük. */
.gomb.elutasit, .gomb-x:hover, .terkep-kor-le:hover {
background: var(--piros-halk); color: var(--piros);
border-color: var(--piros-vonal);
}
.gomb.elutasit:hover {
background: var(--piros); color: var(--lap); border-color: var(--piros);
}
/* Ket gomb egymas mellett 300px alatt osszenyomodna - ott egymas ala. */
@media (max-width: 380px) {
.dontes-gombok { grid-template-columns: 1fr; }
}
/* A kerelem maga: ugyanaz az arany doboz, mint a levelben - aki a levelbol
* jott, ugyanazt latja viszont. */
.dontes-doboz {
background: var(--arany-halk); border: 1px solid var(--arany-vonal);
border-radius: var(--iv); padding: 18px 20px; margin: var(--koz) 0;
}
.dontes-doboz .nagy-szam { font-size: 1.25rem; }
/* --------------------------------------------------- szabadsag-kartyak */
/* EGY SZABADSAG = EGY KARTYA. Sorokban minden bejegyzes a teljes szelesseget
* elvitte, holott negy adat van rajta (ki, mettol, meddig, hany nap). Igy
* HAROMNAL TOBB fer egymas melle, es a harom honap egy kepernyon atlathato.
*
* `auto-fill` es 165px: 560px-nel mar harom oszlop, 760-nal negy. Telefonon
* (360px) ketto - ott a kartya meg olvashato, harom mar nem lenne az. */
/* A MERETEK A SZALLITASI NAPTARBOL JONNEK (`.naptar-nap`, `.naptar-hetnap`,
* `.naptar-datum`), nem sajat izlesbol: a ket doboz egymas alatt all ugyanazon
* a lapon, es ket kulonbozo betumeret ket kulonbozo rendszernek latszik. */
.szabadsag-racs {
display: grid; gap: 8px; margin-top: 10px;
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}
/* A `.szab-kartya` alapja es kiemelese a `.naptar-nap`-pal KOZOS - lasd ott.
* Aki epp tavol van, az ugyanugy van jelolve, mint a naptarban a mai nap. */
.szab-fej { display: flex; align-items: baseline; gap: 6px; line-height: 1.25; }
.szab-nev {
font-size: .76rem; font-weight: 700; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A jelveny a sor vegen, es NEM zsugorodik: a „12 nap" ne torjon ketfele. */
.szab-fej .jelveny { margin-left: auto; flex: none; padding: 1px 8px; font-size: .68rem; }
/* A datum es a hetnap egymas mellett, tordelheto sorban: „szept. 10. csütörtök
* -> szept. 11. péntek". Ugyanaz a meret, mint a naptar datumsora. */
.szab-mikor {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px;
margin-top: 4px; font-size: .72rem; color: var(--tinta-halk);
}
.szab-datum { color: var(--tinta); }
.szab-nyil { color: var(--tinta-halvany); }
/* TELEFONON KESKENYEBB A MINIMUM. Kiszamolva: egy 360 pontos kepernyobol a
* keret (2x14) es a kartya belso margoja (2x18) elvisz 64-et, marad 294 -
* abban a 165-os minimum mellett CSAK EGY oszlop fer el, tehat tiz kartya tiz
* sor lenne. 140-nel ketto fer (2x140+8 = 288), es a kartya meg olvashato:
* a nev elfer a jelveny mellett, a datumsor pedig tordelheto. */
@media (max-width: 620px) {
.szabadsag-racs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* ------------------------------------------------------ eszkozdobozok */
/* Az Admin lap dobozai mind ugyanabbol allnak: egy leiras, egy sor vezerlo,
* egy fajlmezo, ket gomb, alatta az eredmeny. Ez eddig tizenket beagyazott
* stilusbol allt ossze, dobozonkent mas margoval - innen a rendezetlen
* osszkep. Nevesitve egyszer dol el, hogy nez ki mind. */
.vezerlosor {
display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
margin: var(--koz-belso) 0;
}
.vezerlosor select, .vezerlosor input { width: auto; }
/* A legordulonek nem kell a teljes szelesseg: a leghosszabb felirat
(„Teljes (minden CRM-adat)") 220 pontban kenyelmesen elfer. */
.vezerlosor select { flex: 0 1 220px; }
/* A FAJLMEZO. A bongeszo alapbol egy rendszergombot rajzol „Fájl
* kiválasztása" felirattal - mas betuvel, mas sarokkal, mint a lap tobbi
* gombja. A `::file-selector-button` az egyetlen resze, amit at lehet rajzolni;
* a mezo tobbi fele a kivalasztott fajl neve, az marad szoveg. */
.fajl-mezo {
display: block; margin: var(--koz-belso) 0; max-width: 100%;
width: 100%; padding: 10px 12px;
font: inherit; font-size: .92rem; color: var(--tinta-halk);
background: var(--hatter);
border: 1px dashed var(--vonal); border-radius: var(--iv-kicsi);
cursor: pointer;
}
.fajl-mezo:hover { border-color: var(--arany-vonal); }
/* A FOKUSZ-GYURU. Ugyanaz a három deklaráció állt a fájlmezőn és a
medálkártyán — egy billentyűzetes fókuszjelnek egyfélének kell lennie. */
.fajl-mezo:focus, .medal-kartya:focus-visible {
outline: none; border-color: var(--arany);
box-shadow: 0 0 0 3px var(--arany-halk);
}
.fajl-mezo::file-selector-button {
font: inherit; font-weight: 700; font-size: .88rem;
margin-right: 12px; padding: 8px 18px;
color: var(--tinta); background: var(--lap);
border: 1px solid var(--vonal); border-radius: 999px;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.fajl-mezo::file-selector-button:hover {
background: var(--arany-halk); border-color: var(--arany-vonal);
}
.eredmeny:not(:empty) { display: grid; gap: 10px; margin-top: var(--koz-belso); }
/* A jelolonegyzetek egymas ALATT: ket hosszu cimke egy sorban osszefolyik. */
.kapcs-lista { display: grid; gap: 8px; margin-top: 10px; }
/* Tobbszoros valasztas az ablakban (pl. egy kedvezmeny markai). Racsban, mert
* tizennegy marka egy oszlopban kitolna a parbeszedet a kepernyorol. */
.jelolo-racs {
display: grid; gap: 6px 14px; margin-top: 4px;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
max-height: 40vh; overflow-y: auto;
}
.jelolo-racs .kapcs { font-size: .92rem; }
/* Egy kedvezmeny markai jelvenyekkent, tobb is elfer egymas mellett. */
.marka-sor { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.marka-sor .jelveny { font-size: .7rem; padding: 2px 9px; }
.eredmeny .szalag, .eredmeny .feltetel { margin: 0; }
/* ---------------------------------------------------------------- uzenet */
.uzenet { padding: 13px 16px; border-radius: var(--iv-kicsi); margin: 16px 0; font-size: .92rem; font-weight: 600; text-align: left; }
/* A rövid visszajelzés (`jelez`) a képernyő tetején LEBEG. Korábban ez a
* néhány szabály a JS-ben állt `style.cssText`-ként: a pozicionálás layout,
* annak a stíluslapon a helye. */
.uzenet.lebego {
position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
z-index: 60; box-shadow: var(--arnyek); max-width: 90vw;
}
/* Az `.uzenet.jo` es `.uzenet.hiba` szine a `.szalag`-eval kozos - lasd ott. */
.rejtve { display: none !important; }
/* A `hidden` ATTRIBUTUM is rejtsen. A bongeszo sajat `[hidden]` szabalyat egy
* sima `display: block` felulirna - ezert kell a `!important`. Enelkul az a
* kellemetlen fajta hiba all elo, hogy a `hidden = true` lefut, es latszolag
* nem tortenik semmi. */
[hidden] { display: none !important; }
.tolo { margin-left: auto; }
/* SEGEDOSZTALYOK. Keveset tartunk beloluk, es mindegyik EGY dolgot csinal -
* kulonben a HTML-be szivarog vissza a stiluslap. */
/* Doboz tartalma ALATT allo masodlagos gomb („+ Cel", „Bovebben", „Masolas").
* Hat helyen allt kezzel irt margoval - 10, 12 es 14 kepponttal, ugyanarra a
* szandekra. Egy ertek, egy hely. */
.tolo-lent { margin-top: var(--koz-belso); }
/* Muveletsor egy lap tetejen (listak: „+ Partner", „+ Oszlop", „Torles").
*
* `display: flex` IS KELL: a `.gombok` onmagaban nincs definialva (csak
* `.alsor .gombok`), tehat a korabbi inline `gap` nem is ervenyesult - a
* gombok kozott csak a sortoresbol szarmazo szokoz volt. */
.eszkozsor {
display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--koz-belso);
}
/* Ami kattinthato, de nem gomb (sor a listaban, nev a csempen). */
.kattinthato-szoveg { cursor: pointer; }
.feltetel {
margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--vonal);
font-size: .86rem; color: var(--tinta-halk);
}
/* Kepernyoolvasonak megvan, szemmel nem latszik. */
/* VIZUALISAN REJTETT, de a képernyőolvasónak ott van. Két néven élt
ugyanez a hat deklaráció (`.rejtett-cimke` egy űrlapmező címkéjéhez,
a `.rejtett-szoveg` egy gomb magyarázatához) — a kettő ugyanaz. */
.rejtett-cimke, .rejtett-szoveg {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#eredmeny:not(:empty) { margin-top: 30px; }
/* A nyomtatott kimutatas ne vigyen feleslegeset a papirra. */
@media print {
.gomb, .kereso, .halk-lablec, .jelkep { display: none !important; }
body { background: var(--lap); background-image: none; }
/* Nyomtatasban a halvany `--vonal` eltunik; a masodlagos szoveg szine
viszont meg latszik, es nem viszi el a figyelmet a tartalomrol. */
.kartya { box-shadow: none; border-color: var(--tinta-halk); }
}
/* ------------------------------------------- nyomtatando partnerlista
*
* A kepernyon NEM latszik; nyomtataskor viszont CSAK ez latszik. A lapot a
* `partnerek.js` epiti fel a szurt talalatbol, a `` kozvetlen
* gyerekekent - ezert tud minden mas testveret elrejteni.
*
* TINTA-TAKAREKOS, szandekosan: vonalak, nem hatterszinek. A bongeszok
* alapbol ugyis kikapcsoljak a hatterek nyomtatasat, tehat egy zebracsikos
* tablazat a legtobb nyomtaton egyszeruen eltunne - a hajszalvonal viszont
* mindig kijon. (Ugyanaz a dontes, mint a jelenleti iven.) */
.nyomtatas-lap { display: none; }
@media print {
@page { size: A4 portrait; margin: 14mm 12mm 16mm; }
body.nyomtatas-mod > *:not(.nyomtatas-lap) { display: none !important; }
body.nyomtatas-mod .nyomtatas-lap { display: block; }
body.nyomtatas-mod { background: var(--ny-lap); }
.nyomtatas-lap { color: var(--ny-tinta); font-size: 9.5pt; line-height: 1.35; }
.ny-fej {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 20px; padding-bottom: 8px; margin-bottom: 12px;
border-bottom: 1.5px solid var(--ny-tinta);
}
.ny-fej h1 { font-size: 15pt; margin: 0 0 2px; letter-spacing: -.01em; }
.ny-szuro { margin: 0; font-size: 9pt; color: var(--ny-halk); }
.ny-meta { text-align: right; font-size: 9pt; color: var(--ny-halk); }
.ny-meta .ny-db { font-weight: 700; color: var(--ny-tinta); }
.ny-figyelem {
margin: 0 0 12px; padding: 6px 9px; font-size: 9pt; font-weight: 600;
border: 1px solid var(--ny-tinta);
}
.ny-tabla { width: 100%; border-collapse: collapse; }
/* A FEJLEC MINDEN LAPON MEGISMETLODIK. Enelkul a masodik laptol nem
derulne ki, melyik oszlop micsoda. */
.ny-tabla thead { display: table-header-group; }
.ny-tabla th {
text-align: left; font-size: 8pt; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
padding: 0 6px 5px; border-bottom: 1px solid var(--ny-tinta);
}
.ny-tabla td {
padding: 5px 6px; vertical-align: top;
border-bottom: .5pt solid var(--ny-vonal);
}
/* EGY SOR NE TORJON KET LAP KOZE. */
.ny-tabla tr { break-inside: avoid; page-break-inside: avoid; }
.ny-tabla .ny-nev { font-weight: 600; }
.ny-tabla .ny-ceg { font-size: 8pt; color: var(--ny-halvany); }
.ny-tabla .ny-szam { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Az oszlopszelesseg: a nev kapja a helyet, a tobbi annyit, amennyi kell. */
.ny-tabla th:nth-child(1) { width: 38%; }
.ny-tabla th:nth-child(2) { width: 16%; }
.ny-tabla th:nth-child(3) { width: 13%; }
.ny-tabla th:nth-child(4) { width: 16%; }
.ny-tabla th:nth-child(5) { width: 17%; }
}
/* ================================================================== Vet-Profil CRM */
/* Fejlec: a logo, a nezetvalto es a felhasznalo egy sorban. Mobilon torik. */
.fejlec {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 14px 0 16px; margin-bottom: var(--koz);
border-bottom: 1px solid var(--vonal);
}
.fejlec .jelkep { margin: 0; height: 34px; }
.fejlec nav { display: flex; gap: 6px; flex-wrap: wrap; }
.fejlec nav a {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px; border-radius: 999px; text-decoration: none;
font-size: .88rem; font-weight: 600; color: var(--tinta-halk);
}
.fejlec nav a:hover { background: var(--arany-halk); color: var(--tinta); }
.fejlec nav a.aktiv { background: var(--arany); color: var(--lap); }
.fejlec .ki { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* A KILEPES ASZTALI GEPEN CSAK IKON. Felirattal a menusor melle mar nem fert
ki, es sajat sorba tort - egy teljes sav ment el ra. A nev es a szerep a
gomb `title`-jeben van. */
.fejlec .ki .ki-szoveg { display: none; }
/* A szurosav: kereso + legordulok. Mobilon egymas ala kerul. */
/* SZUROSAV — a Partnerek es az Interakciok lap tetejen.
*
* EGY BETUMERET AZ EGESZ SAVRA. Korabban haromfele mereté volt egymas
* mellett: a mezok es a legordulok 1rem-esek (az `input`/`select`
* alapszabalybol), a darabszam .84, a valasztogombok .86. Egy sorban allo
* elemek harom mereté rendetlennek latszik, es a sav a lap legnagyobb
* betumeretevel indult - holott ez nem tartalom, hanem VEZERLES: azt
* mondja meg, MIT latunk, nem azt, amit latunk.
*
* A meret a savon all, nem elemenkent: az `input`/`select` `font: inherit`-et
* kap, tehat innen orokli. Igy egy uj szurofajta magatol beleillik. */
.szurosav {
display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
margin-bottom: 16px;
font-size: .88rem;
}
.szurosav input, .szurosav select { font-size: inherit; }
.szurosav input { padding: 9px 12px; }
.szurosav input[type=search] { flex: 1 1 240px; width: auto; }
/* A LEGORDULO KET DOLOGRA UGYEL:
1. A JOBB OLDALI 40 KEPPONT a nyile (lasd a `select` alapszabalyt). A
`padding` ROVIDITES ezt felulirna, es a szoveg a nyil ala futna -
pontosan ez tortent a „Minden elégedettség"-gel.
2. A TARTALMAHOZ IGAZODIK, es NEM zsugorodik. Korabban `flex: 0 1 170px`
allt itt: a 170 keppontos alap a leghosszabb feliratnak mar keves volt,
a `shrink: 1` pedig meg tovabb is engedte. A helyet a keresomezo adja at
(`flex: 1 1 240px`) - az zsugorodjon, mert abban GEPEL az ember, nem
olvas: egy levagott beirt szo kevesbe zavaro, mint egy levagott cimke. */
.szurosav select { width: auto; flex: 0 0 auto; padding: 9px 40px 9px 12px; }
.szurosav .db { color: var(--tinta-halk); white-space: nowrap; }
/* SZERKESZTETT SOR az interakciolistan. A ceruza nyitja; a mezok azonnal
* mentenek, amint elhagyod oket - nincs kulon „Mentes" gomb, amit el lehetne
* felejteni megnyomni. A sarga hatter jelzi, hogy ez a sor most nyitva van. */
tr.szerkesztve { background: var(--arany-halk); }
tr.szerkesztve td { vertical-align: top; }
tr.szerkesztve input, tr.szerkesztve select, tr.szerkesztve textarea {
width: 100%; min-width: 90px; margin: 0; font-size: .86rem; padding: 6px 8px;
}
tr.szerkesztve textarea { min-width: 200px; resize: vertical; }
/* A ceruza oszlopa keskeny, es a gomb csak a soron allva latszik erosen -
* kulonben minden sor vegen egy figyelmet vivo ikon ulne. */
.ceruza-cella { width: 1%; white-space: nowrap; text-align: right; }
.ceruza-cella .gomb-x { opacity: .35; transition: opacity .12s; }
tr:hover .ceruza-cella .gomb-x,
tr.szerkesztve .ceruza-cella .gomb-x { opacity: 1; }
/* TEENDO-SOR. Ugyanaz a felepites, mint az ajanlasnal: pipa balra, szoveg
* kozepen, allapotjelveny jobbra - a ket lista egymas alatt all a lapon, es
* ket kulonbozo rajz ott zavaro lenne. */
.teendo {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 0; border-top: 1px solid var(--vonal);
}
.teendo:first-of-type { border-top: none; }
/* A jelveny nem zsugorodik, es a tobbsoros sor tetejehez igazodik. */
.teendo .jelveny, .kedvezmeny > .jelveny { flex: none; margin-top: 2px; }
.teendo.elvetve { opacity: .4; transition: opacity .4s; }
/* A TEENDO SOR ELEJE: ora, ami az egerre PIPARA valt - mint egy to-do
* listan. Az ora azt mondja, „ez meg var rad"; a pipa azt, „ide kattints, es
* kesz". Ket ikon egymason, es a CSS valt kozottuk.
*
* A JELOLONEGYZET OTT MARAD, csak nem latszik (`opacity: 0`, teljes meretben
* a cimken belul). MIERT: a billentyuzet es a kepernyoolvaso azt talalja meg,
* es a kattintast is az kezeli - egy sajat rajzolt kapcsolo mindkettot
* elvesztene. A cimke `position: relative`, a mezo `absolute`: igy a teljes
* felulet kattinthato marad. */
.teendo-pipa {
position: relative; display: flex; align-items: center; flex: none;
width: 20px; height: 20px; cursor: pointer; color: var(--tinta-halvany);
}
.teendo-pipa input {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: pointer; margin: 0;
}
.teendo-pipa .ikon { position: absolute; font-size: 1.25em; transition: opacity .12s; }
.teendo-kesz { opacity: 0; color: var(--zold); }
/* A PIPA A SOR EGESZERE reagal, nem csak a kis negyzetre: a teendo egyetlen
* cselekveshez tartozik, tehat az egesz sor legyen a cel. */
.teendo:hover .teendo-ora,
.teendo-pipa input:focus-visible ~ .teendo-ora { opacity: 0; }
.teendo:hover .teendo-kesz,
.teendo-pipa input:focus-visible ~ .teendo-kesz { opacity: 1; }
.teendo-pipa input:focus-visible ~ .teendo-kesz { outline: 2px solid var(--arany); border-radius: 4px; }
/* Kipipalva: a pipa vegleg ott marad, amig a sor eltunik. */
.teendo-pipa input:checked ~ .teendo-ora { opacity: 0; }
.teendo-pipa input:checked ~ .teendo-kesz { opacity: 1; }
/* A partnerlista sorai kattinthatok - jelezzuk is. */
tbody tr.kattinthato { cursor: pointer; }
td .nev { font-weight: 700; }
td .halk { color: var(--tinta-halk); font-size: .84rem; }
/* Statusz-jelvenyek. A szinek jelentest hordoznak: az „Aktív" zold, az
* „Inaktív" piros, a ket kozbenso allapot semleges arany. */
/* Az `aktiv`/`inaktiv`/`felkutatott` szine a fenti kozos allapotszinekbol jon. */
.jelveny.puhitas { background: var(--arany-halk); color: var(--arany-sotet); }
/* Elegedettseg: nem jelveny, csak szines pont + szoveg - ne vigye el a
* figyelmet a statuszrol, ami fontosabb. */
.kedv { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kedv-pont { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kedv.nincs { color: var(--tinta-halk); }
.kedv.nincs::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
flex: none; background: var(--vonal);
}
/* Elegedettseg-skala. A gombok 34px magasak: ujjal is eltalalhato legyen a
telefonon, ahol az uzletkoto tenylegesen hasznalja. */
.kedv-skala { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kedv-veg { font-size: 1.15rem; line-height: 1; }
.kedv-fok {
width: 34px; height: 34px; border-radius: var(--iv-apro); flex: none;
border: 1px solid var(--vonal); background: var(--lap); color: var(--tinta);
font: inherit; font-weight: 600; cursor: pointer;
}
.kedv-fok:hover { border-color: var(--tinta-halk); }
.kedv-fok.aktiv { color: var(--lap); }
/* ============================================ az elégedettség öt színe
*
* A SZIN A STILUSLAPON DOL EL, NEM A JS-BEN. Korábban a `kozos.js`
* `KEDV_SZIN` térképe olvasta ki a tokeneket, és `element.style.color`-ként
* tette rá — így a paletta KÉT helyen élt, és egy arculatváltásnál a
* második biztosan elmaradt volna. Most a JS annyit mond, HANYAS a fok
* (`.kedv-3`), a színt innen kapja.
*
* Ugyanez a skála gombjain: azok amúgy is hordják a `data-fok`-ot. */
.kedv-1 { color: var(--kedv-1); }
.kedv-2 { color: var(--kedv-2); }
.kedv-3 { color: var(--kedv-3); }
.kedv-4 { color: var(--kedv-4); }
.kedv-5 { color: var(--kedv-5); }
.kedv-fok.aktiv[data-fok="1"] { background: var(--kedv-1); border-color: var(--kedv-1); }
.kedv-fok.aktiv[data-fok="2"] { background: var(--kedv-2); border-color: var(--kedv-2); }
.kedv-fok.aktiv[data-fok="3"] { background: var(--kedv-3); border-color: var(--kedv-3); }
.kedv-fok.aktiv[data-fok="4"] { background: var(--kedv-4); border-color: var(--kedv-4); }
.kedv-fok.aktiv[data-fok="5"] { background: var(--kedv-5); border-color: var(--kedv-5); }
/* AMI TUL REGEN VOLT, vagy amiből túl sok van. Négy helyen állt ugyanez
* `element.style.color = "var(--piros)"` alakban (60 napja fel nem keresett
* partner, 120 napja néma üzletkötő, 50-nél több elmaradás, hiányzó gazda) —
* egy jelentés, egy osztály. */
.figyelmeztet { color: var(--piros); }
/* A JELOLONEGYZET ES A CIMKEJE egy sorban, az ablakban. Négy inline stílus
* állt itt (`width`, `display`, `gap`, `align-items`) egyetlen elemen. */
.jelolo-cimke { display: inline-flex; align-items: center; gap: 8px; }
.jelolo-cimke input[type=checkbox] { width: auto; }
/* A CEGNEV, AMI UGYANAZ, MINT AZ UZLETNEV: halványan, mert nem hoz újat. */
.azonos-nev { opacity: .55; }
/* Torlo X a partnerlista vegen. Halvany, amig ra nem visz az eger: egy
veletlen kattintas evek elozmenyet vinne, ezert ne hivja magara a szemet. */
.torles-cella { width: 40px; text-align: right; }
.gomb-x {
/* 28 keppont: a `.gomb-buborek` (30) es a `.kedv-fok` (34) mellett all a
lapon, tehat ugyanazt az ivet kapja - 6 kepponttal szogletesebb volt naluk. */
width: 28px; height: 28px; border-radius: var(--iv-apro); padding: 0;
border: 1px solid transparent; background: none; cursor: pointer;
color: var(--tinta-halk); font-size: 1.15rem; line-height: 1;
}
tr:hover .gomb-x { border-color: var(--vonal); }
/* KETOSZLOPOS LAPRACS: szeles kepernyon 3:2, mobilon egy oszlop. Az adatlap
* es a kezdolap ugyanaz az elrendezes - csak a toresi pont ter el (lasd ott),
* mert a kezdolap jobb oszlopa keskenyebb tartalmat visz. */
.adatlap, .dash-racs {
display: grid; gap: var(--koz); align-items: start;
grid-template-columns: minmax(0,3fr) minmax(0,2fr);
}
/* UGYANAZ A ZAR, mint a `#tartalom`-nal: a sav mar le van korlatozva
(`minmax(0, …)`), de a benne allo OSZLOP alap minimuma `auto` - azon
keresztul meg mindig ki tudna tolni. */
.adatlap > *, .dash-racs > * { min-width: 0; }
/* A ket oszlop MAGA IS racs (lasd a `#tartalom`-nal): enelkul a kartyak
* fuggolegesen osszeernek, vizszintesen viszont van kozuk - az szemre
* elbillenti a lapot. */
@media (max-width: 860px) { .adatlap { grid-template-columns: 1fr; } }
.adatlap .kartya { padding: 20px; }
.adatlap h2 { font-size: 1.02rem; margin-bottom: 14px; }
/* Alsorok (kapcsolattarto, cim) egy-egy dobozban. */
/* KARTYAFEJLEC: cim balra, gomb jobbra, FUGGOLEGESEN EGY VONALBAN.
*
* MIERT KULON OSZTALY: eddig het helyen allt ugyanaz a beagyazott stilus
* (`border:none;padding:0;margin-bottom:12px`) egy `.alsor`-on. Az `.alsor`
* viszont `flex-start`-ot hasznal - ott tobbsoros szoveg all -, es ettol a
* cim melletti gomb felcsuszott a cim TETEJE melle, nem a kozepehez. */
.kartya-fej {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-bottom: var(--koz-belso);
}
.kartya-fej h2, .kartya-fej h3 { margin: 0; }
/* A KARTYA CIME UGYANANNYIRA ALLJON A TARTALMATOL, akar `.kartya-fej`-ben
van, akar csupaszon. A ket irast a kod tortenete hozta (20 csupasz h2 es 14
`.kartya-fej` all ma a felületen), a KULONBSEG viszont latszik: az Admin
lapon a „Uzletkotok ebben a honapban" cime szorosabban ult a tablajan, mint
a „Jelenleti ivek"-e a magaen. Ugyanaz a token vezeti mindkettot, tehat egy
helyen allithato. */
.kartya > h2 { margin-bottom: var(--koz-belso); }
.alsor {
display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
padding: 12px 0; border-top: 1px solid var(--vonal);
}
.alsor:first-of-type { border-top: none; padding-top: 0; }
.alsor .szoveg { flex-basis: 160px; }
.alsor .cim-nev { font-weight: 600; }
.alsor .gombok { margin-left: auto; display: flex; gap: 6px; flex: none; }
/* Interakcio-sorok a partner adatlapjan. */
.esemeny { padding: 12px 0; border-top: 1px solid var(--vonal); }
.esemeny:first-of-type { border-top: none; }
.esemeny .fej { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.esemeny .datum { font-weight: 700; font-variant-numeric: tabular-nums; }
.esemeny .torzs { font-size: .92rem; }
/* Modalis ablak: uj partner, kapcsolattarto, cim. */
.fatyol {
position: fixed; inset: 0; background: rgba(35,33,33,.45);
display: grid; place-items: center; padding: 16px; z-index: 50;
}
.ablak {
background: var(--lap); border-radius: var(--iv); box-shadow: var(--arnyek);
padding: 24px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
}
.ablak h2 { margin-bottom: 16px; }
/* A cim ALATT allo magyarazat: mi tortenik a mentessel a mezokon TUL. */
.ablak-leiras {
margin: -8px 0 16px; font-size: .88rem; color: var(--tinta-halk);
line-height: 1.45;
}
.ablak .talp { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
/* Ures allapot: ne egy ures tablazat fogadja a felhasznalot. */
.ures { text-align: center; padding: 40px 20px; color: var(--tinta-halk); }
textarea {
width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem;
color: var(--tinta); background: var(--lap); border: 1px solid var(--vonal);
border-radius: var(--iv-kicsi); resize: vertical; min-height: 84px;
}
/* Jelolonegyzet-racs a markakhoz. */
.jelolok { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.jelolok label { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: .9rem; margin: 0; }
.jelolok input { width: 17px; height: 17px; accent-color: var(--arany); margin: 0; }
/* Mobilon a tablazat kevesebb oszlopot mutat: a marka es a gazda kimarad,
* mert azok a nev es a statusz mellett masodlagosak. */
@media (max-width: 700px) {
.lapos-el { display: none; }
th, td { padding: 10px 8px; }
}
/* ------------------------------------------------- interakció rögzítése */
/* Ez a képernyő MOBILRA készült: az üzletkötő az autóban ülve, egy kézzel
* használja. Nagy célfelületek, kevés gépelés. */
.rogzito { max-width: 640px; margin: 0 auto; }
.rogzito > label { margin-top: 18px; }
.rogzito > label:first-child { margin-top: 0; }
.partner-valaszto { position: relative; }
.talalatok {
border: 1px solid var(--vonal); border-radius: var(--iv-kicsi); margin-top: 6px;
overflow: hidden; background: var(--lap);
}
.talalat {
display: flex; gap: 4px; flex-direction: column; align-items: flex-start;
width: 100%; padding: 12px 14px; border: none; border-top: 1px solid var(--vonal);
background: var(--lap); font: inherit; text-align: left; cursor: pointer;
}
.talalat:first-child { border-top: none; }
.talalat:hover { background: var(--arany-halk); }
.talalat.uj { color: var(--arany-sotet); font-weight: 600; }
/* A kiválasztott partner: kiemelve, hogy egy pillantásra látszódjon, kihez
* rögzít - a rossz partnerhez írt jegyzet később nehezen található meg. */
.valasztott {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-radius: var(--iv-kicsi); margin-top: 6px;
background: var(--arany-halk); border: 1px solid var(--arany-vonal);
}
.gyorsvalaszto { margin-top: 18px; }
.gombsor { display: flex; gap: 8px; flex-wrap: wrap; }
/* A SOR SZOVEGES RESZE. Hat helyen allt ugyanez a ket deklaracio (teendo,
* ajanlas, kedvezmeny, valasztott, lista-tetel) - ket helyen szo szerint
* KETSZER, ugyanarra a szelektorra.
*
* A `min-width: 0` nem dísz: nelkule a flex elem nem megy a tartalma ala, es
* egy hosszu e-mail cim vagy partnernev kilogatja a kartyat. Flexen kivul
* mindket deklaracio hatastalan, tehat nem art ott, ahol nem kell. */
.szoveg, .cel-nev { flex: 1 1 auto; min-width: 0; }
/* EGY SORBAN, MOBILON IS. A rogzito harom gyorsvalasztoja terepen, fel kezzel
* hasznalando: ha az ot elegedettsegi fok ket sorba torik, a hatodik gomb
* mar a hivelyk alatt van, es melle lehet nyulni. Ezert `nowrap`, egyenlo
* szeles gombok (`flex: 1 1 0`), es keskeny kepernyon szukebb belso margo.
*
* A `min-width: 0` NELKUL a flex elem nem menne a tartalma ala, es a sor
* megis kilogna - ugyanaz a csapda, mint a partner adatlap racsanal. */
.gombsor-elegedettseg, .gombsor-tipus {
flex-wrap: nowrap;
}
.gombsor-elegedettseg .valasztogomb,
.gombsor-tipus .valasztogomb { flex: 1 1 0; min-width: 0; }
@media (max-width: 620px) {
.gombsor-elegedettseg, .gombsor-tipus { gap: 6px; }
.gombsor-elegedettseg .valasztogomb,
.gombsor-tipus .valasztogomb {
padding: 12px 4px; font-size: .84rem; gap: 4px;
}
/* A tipus SZOVEGE tordelhetetlen („szemelyes"), ezert keskeny kepernyon
* inkabb zsugorodjon, mint hogy szetfeszitse a sort. */
.gombsor-tipus .valasztogomb { font-size: .78rem; }
.gombsor-tipus .valasztogomb .ikon { width: 1em; height: 1em; }
}
/* A LEGKESKENYEBB telefonokon (320 pont korul) a tipusnal az ikon a szoveg
* FOLE kerul: egy sorban ott mar nem fer el a „szemelyes". Meret szerint
* szamolva 340 pont alatt szuk a sor; 360 ponton mar kenyelmesen elfer,
* ezert ott marad a vizszintes elrendezes. */
@media (max-width: 340px) {
.gombsor-tipus .valasztogomb {
flex-direction: column; gap: 2px; padding: 9px 2px; font-size: .72rem;
}
}
/* Ujjal is eltalálható: legalább 44px magas, ahogy a mobil irányelvek kérik. */
.valasztogomb {
/* IKON + SZOVEG egy sorban, kozepre zarva. Az ikon a szoveg MELLE kerul,
* nem helyette: terepen a rajz gyorsabban megtalalhato, de a jelentest a
* szo hordozza. */
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
flex: 1 1 auto; min-height: 46px; padding: 12px 18px;
font: inherit; font-weight: 600; font-size: .92rem;
color: var(--tinta); background: var(--lap);
border: 1px solid var(--vonal); border-radius: 999px; cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.valasztogomb:hover { background: var(--arany-halk); }
.valasztogomb.bejelolt {
background: var(--arany); border-color: var(--arany); color: var(--lap);
}
/* A `teljes-gomb` (diktálás, közelemben) ikonja is a szöveg mellé kerül. */
.gomb.teljes-gomb { gap: 9px; }
.gomb.nagy {
width: 100%; margin-top: 24px; padding: 17px 30px; font-size: 1.05rem;
}
.rogzito textarea { min-height: 130px; }
.rogzito .sugo { margin-top: 6px; }
/* A szűrősávban a nézetválasztó gombok ne nyúljanak szét. */
/* A meret a savbol orokli (lasd `.szurosav`) - itt csak a forma. */
.szurosav .valasztogomb { flex: 0 0 auto; min-height: 38px; padding: 8px 16px; }
/* ------------------------------------------------------------- forgalom */
.nagy-szam {
font-size: 1.9rem; font-weight: 700; line-height: 1.1;
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
/* Havi sávok. Nincs diagram-könyvtár: egy 300 partneres CRM-hez nem érdemes. */
.havi { display: grid; gap: 5px; margin-top: 18px; }
.havi-sor { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.havi-cimke { flex: none; width: 56px; color: var(--tinta-halk); font-variant-numeric: tabular-nums; }
/* A „További 6 hónap" a havi lista alatt KÖZÉPEN: a diagram szimmetrikus,
* egy balra tapadó gomb elbillentené. A méretét a `kicsi` adja - ugyanaz,
* mint az „Adatok" kártya Szerkesztés gombján. */
.havi-tobb { display: block; margin: 16px auto 0; }
.havi-sav { flex: 1 1 auto; height: 8px; background: var(--hatter); border-radius: 999px; overflow: hidden; }
.havi-kitolt { display: block; height: 100%; background: var(--arany); border-radius: 999px; }
.havi-ertek { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
/* ================================================== üzletkötői dashboard */
/* A nagy gomb legfelül: ez a leggyakoribb művelet, ujjal is eltalálható. */
.gomb.nagy.uj-interakcio { margin: 0 0 22px; font-size: 1.1rem; padding: 20px; }
@media (max-width: 900px) { .dash-racs { grid-template-columns: 1fr; } }
/* Mindket oszlop racs (lasd a `#tartalom`-nal). NEVESITVE, nem `> div`-vel:
* a kezdolapon a bal oldalon KOZVETLENUL egy kartya all, azt nem szabad
* raccsa tenni. */
.honap { margin-bottom: 20px; }
.honap-fej { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.honap-fej h2 { margin: 0; }
.csempek { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }
@media (max-width: 520px) { .csempek { grid-template-columns: 1fr; gap: 8px; } }
.csempe { background: var(--hatter); border-radius: var(--iv-kozep); padding: 16px; text-align: center; }
/* A szam es a mellette allo valtozas-jelveny EGY SORBAN, kozepen. Korabban a
* jelveny kulon sorba kerult, es a harom soros csempe a racsban a
* szomszedjait is megnyujtotta. */
.csempe-szam {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 1.8rem; font-weight: 700; line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.csempe-szam .valtozas { margin-left: 0; }
.csempe-cimke { font-size: .8rem; color: var(--tinta-halk); margin-top: 3px; }
.csempe-extra {
font-weight: 700; color: var(--arany-sotet);
font-size: .8rem; margin-top: 1px;
}
/* Havi forgalom a vezetői lapon: a csík MAGA a szám háttere.
*
* A KITOLTES SZINE ARANY, nem piros. A hónap 1-jén mindenki 0% közelében áll -
* egy piros sáv minden hónap elején riasztana, holott csak annyi történt, hogy
* új hónap kezdődött. Az ítéletet a százalék-jelvény hordozza (zöld/piros), a
* csík csak azt mutatja, hol tartunk. Zöld akkor lesz, ha MÁR TÖBB, mint
* amennyi az előző hónap egésze volt - az valódi hír. */
.forgalom-sav {
position: relative; overflow: hidden;
background: var(--hatter); border-radius: var(--iv-kozep);
}
/* A `--arany-halk` a `--hatter`-en alig latszana (#FBF1E1 a #FBF9F6-on), ezert
* a csik a HALVANY ARANY VONAL szinet kapja - az mar elvalik a sinjetol. */
.forgalom-toltes {
position: absolute; top: 0; bottom: 0; left: 0;
background: var(--arany-vonal);
}
.forgalom-toltes.tobb { background: var(--zold-kozep); }
.forgalom-tartalom { position: relative; padding: 16px 18px; }
/* A szam balra, a valtozas JOBBRA - igy a jelveny jobb szele egy vonalba esik
* az alatta allo „előző hónap: … Ft" veget. Ugyanaz a `space-between` es
* ugyanaz a szulo-belmargó tartja a ket sort egy tengelyen. */
.forgalom-fej {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
}
.forgalom-fej .valtozas { margin-left: 0; }
.forgalom-szam {
font-size: 1.8rem; font-weight: 700; line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.forgalom-alj {
display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
font-size: .8rem; color: var(--tinta-halk); margin-top: 5px;
}
.forgalom-elozo { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
.forgalom-szam { font-size: 1.5rem; }
}
/* Célsáv. A szaggatott jel ott áll, ahol a hónap arányában tartani kellene -
* ettől lesz méltányos a visszajelzés. */
.celsav { margin-top: 16px; }
.celsav-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.celsav-cim { font-weight: 600; font-size: .9rem; }
.celsav-ertek { font-size: .86rem; color: var(--tinta-halk); font-variant-numeric: tabular-nums; }
.celsav-sin { position: relative; height: 14px; background: var(--hatter); border-radius: 999px; overflow: visible; }
.celsav-kitolt { height: 100%; background: var(--arany); border-radius: 999px; transition: width .4s ease; }
.celsav-kitolt.kesz { background: var(--zold); }
.celsav-kitolt.lemarad { background: var(--piros); }
.celsav-jel { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta-halk); opacity: .55; }
.celsav-alsó { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: .82rem; }
.celsav-szazalek { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Ajánlások: a bal szélen színes sáv jelzi a sürgősséget. */
/* A SOR KIEMELESE LEVEGOT KAP. A vizszintes belso margo a `margin`-nal
* kifele van huzva, tehat a szoveg ugyanott kezdodik, mint eddig - csak a
* kiemeles er tullra rajta. Enelkul a halvany arany hatter pontosan a betuk
* szelen vagott, es odacsapottnak latszott. */
.ajanlas, .lista-tetel {
display: flex; align-items: center; gap: 12px;
width: calc(100% + 24px); margin-left: -12px; margin-right: -12px;
padding: 13px 12px; border: none; border-top: 1px solid var(--vonal);
background: none; font: inherit; text-align: left; cursor: pointer;
color: inherit; text-decoration: none; border-radius: var(--iv-kicsi);
}
/* A valaszto vonal a BELSO margon belul huzodjon, kulonben a kerekitett
* sarkokon tullogna. */
.ajanlas, .lista-tetel { background-clip: padding-box; }
.ajanlas:first-of-type, .lista-tetel:first-of-type { border-top: none; }
.ajanlas:hover, .lista-tetel:hover { background: var(--arany-halk); }
/* A PARTNER NEVE FELKOVER. Ez a sor ket dolgot mond: KIT keressek fel, es
MIERT - a nev a dontes, az indoklas a magyarazat. Azonos vastagsaggal a
ket mondat osszefolyt, es a listat vegig kellett olvasni ahhoz, hogy a
nevek kivaljanak. (Ugyanaz a 700-as, mint a `.kedvezmeny .cim-nev`-nel.) */
.ajanlas .cim-nev { font-weight: 700; }
.surgos { width: 4px; align-self: stretch; border-radius: 999px; flex: none; min-height: 34px; }
.surgos.s1 { background: var(--piros); }
.surgos.s2 { background: var(--arany-sotet); }
.surgos.s3 { background: var(--arany); }
.surgos.s4 { background: var(--vonal); }
.lista-tetel .nyil { color: var(--tinta-halk); font-size: 1.3rem; flex: none; }
.lista-tetel.halk { cursor: default; }
.lista-tetel.halk:hover { background: none; }
.kedvezmeny { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--vonal); }
.kedvezmeny:first-of-type { border-top: none; }
/* A CIM FELKOVER: az uzletkoto ezt mondja ki telefonon, a leiras csak a
* reszlet mellette. Az `.alsor .cim-nev` 600-as - itt 700, mert ez a doboz
* egyetlen kiemelt eleme. A tobbsoros sor miatt a jelveny felulra igazodik. */
.kedvezmeny .cim-nev { font-weight: 700; }
.kedvezmeny { align-items: flex-start; }
/* A listára felvevő doboz: a keresőmező a LAPON nyílik, nem ablakban.
Ugyanaz a `.kartya` váz, csak szűkebb belső margóval - egyetlen mező van
benne, és egy 26 képpontos keret körülötte üresnek látszana. */
.lista-felvevo { padding: 14px 16px; margin-bottom: var(--koz); }
.lista-felvevo label { display: block; margin-bottom: 8px; }
/* A BEEPITETT (dinamikus) lista karyaja. Ugyanaz a `.kartya`, csak
megkulonboztetve: ezt nem az uzletkoto rakta ossze, es nem is szerkesztheto. */
.epitett-lista { border-style: dashed; }
/* A kezdolapi medal-racs KESKENYEBB: harom erem all egymas mellett a bal
oszlopban, tehat kisebb minimum kell, mint a Kituntetesek lapon. */
.medal-racs.kicsi { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
/* HIANYOS ADATLAP jelzese a partnerlistan. Ez valtotta le a kezdolap
„adatlap-vadaszat" dobozat: a jelzes odakerult, AHOL JAVITANI IS LEHET. */
.nev-sor { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nev-sor .nev { min-width: 0; }
.hianyjel {
flex: none; width: 15px; height: 15px; color: var(--piros); cursor: help;
}
/* CSAK A KEPERNYOOLVASONAK. A maszkos ikon `aria-hidden`, a `title` buborek
pedig erintokepernyon el sem erheto - enelkul a hiany annak, aki nem latja
a kepet, egyaltalan nem letezne. A `clip` a bevett mod: a szoveg ott van a
fanan, csak nem foglal helyet. */
/* ------------------------------------------------------------- térkép
*
* NINCS CSEMPE ES NINCS TERKEP-KONYVTAR - sajat SVG. Az orszag korvonala a
* `terkep-adat.js`-bol jon (183 pont), a pontok a partnerek koordinatajabol.
*
* A HAROM JELLEMZO: a gazda kezdobetuje a korben, a statusz a szinben, a
* meret az atmeroben. A statusz-szinek UGYANAZOK, amiket a jelvenyek
* hasznalnak - az uzletkoto mar ismeri oket, nem kell ujratanulnia. */
/* `relative`: a felugro ablak es a nagyito gombok EHHEZ igazodnak. */
.terkep-doboz { padding: 12px; position: relative; }
.terkep {
display: block; width: 100%; height: auto;
/* A `touch-action` MOBILON DONTI EL, ki kapja az ujjat: a bongeszo vagy mi.
*
* ALAPBOL `pan-y`, mert egyszeres nagyitasban NINCS mit huzni - ha itt
* `none` allna, a telefonon a terkepen kezdett fuggoleges simitas semmit
* nem csinalna, es a felhasznalo nem tudna legorgetni a jelmagyarazatig.
* A ket ujjal valo csippentest a `pan-y` nem viszi el, azt tovabbra is mi
* kapjuk.
*
* BENAGYITVA a `terkep.js` `none`-ra allitja: onnantol az egy ujjal valo
* huzas MOZGATJA a terkepet, es azt nem szabad gorgetesnek venni. */
touch-action: pan-y;
cursor: grab;
}
.terkep:active { cursor: grabbing; }
/* A CSEMPEK LEGALUL. A `crispEdges` a szomszedos csempek kozotti hajszalcsikot
szunteti meg: a bongeszo igy nem simitja el a szeleket. */
.terkep-csempek image { image-rendering: -webkit-optimize-contrast; }
.terkep-hatar path {
fill: var(--hatter); stroke: var(--vonal);
/* A VONAL VASTAGSAGA KEPPONTBAN. A `viewBox` szukitesevel nagyitunk, ezert
egy fix `stroke-width` otszazszoros nagyitasban otszazszor vastagabb
csikka hizna. Az `--egyseg-px` (SVG-egyseg egy keppontra) a `terkep.js`
`nezetFrissit`-jebol jon. */
stroke-width: calc(1.2 * var(--egyseg-px, 0.5));
stroke-linejoin: round;
}
/* CSEMPEKKEL A KITOLTES ELTUNIK, es csak az orszaghatar vekony vonala marad:
a papirszinu folt kulonben eltakarna a terkepet. Az osztalyt az ELSO
betoltott csempe teszi ki - ha egy sem jon meg, a korvonal marad, es a lap
ugy is hasznalhato terkep. */
.terkep.csempes .terkep-hatar path { fill: none; }
/* A NAGYITAS VEZERLOJE a rajz sarkaban lebeg. A kozepso gomb egyszerre
kijelzo („3,2x") es alaphelyzet-gomb: nyolcszoros nagyitasban egy sarokban
konnyu elveszni.
A 34 keppontos magassag NEM uj meret: ugyanaz, mint a `.kedv-fok`-e, a
pirula-iv pedig a `.gomb`-e. */
.terkep-vezerlo {
position: absolute; top: 20px; right: 20px; display: flex;
background: var(--lap); border: 1px solid var(--vonal);
border-radius: 999px; box-shadow: var(--arnyek); overflow: hidden;
}
.terkep-vezerlo button {
min-width: 34px; height: 34px; padding: 0 9px; border: 0; background: none;
font: inherit; font-weight: 600; font-size: .88rem; color: var(--tinta);
cursor: pointer;
}
.terkep-vezerlo button + button { border-left: 1px solid var(--vonal); }
.terkep-vezerlo button:hover:not([disabled]) { background: var(--arany-halk); }
.terkep-vezerlo button[disabled] { opacity: .4; cursor: default; }
.terkep-pont { cursor: pointer; }
.terkep-pont circle {
stroke: var(--lap); stroke-width: 1.5;
/* ATLATSZO: Budapesten negyven pont esik egymasra: tomor korokkel a felso
eltakarna az osszes alatta levot, es a suruseg sem latszana. */
fill-opacity: .82;
}
.terkep-pont text {
font-size: 9px; font-weight: 700; fill: var(--lap);
pointer-events: none; user-select: none;
}
/* A TELEPULESKOZEPRE esett pont nem a bolt ajtaja. Szaggatott korvonal: egy
pontosnak latszo, de kozelito hely rosszabb, mint egy bevallottan
kozelito. */
.terkep-pont.kozelito circle { stroke-dasharray: 3 2; }
.terkep-pont:hover circle { fill-opacity: 1; stroke: var(--tinta); }
.terkep-pont:focus-visible { outline: none; }
.terkep-pont:focus-visible circle { stroke: var(--arany); stroke-width: 3; }
/* A HAROM ALLAPOTSZIN. Ugyanaz a harom, ami a `.jelveny`-eken all. */
.terkep-pont.aktiv circle { fill: var(--zold); }
.terkep-pont.inaktiv circle { fill: var(--piros); }
.terkep-pont.potencialis circle { fill: var(--tinta-halk); }
/* A FELUGRO ABLAK. HTML, nem SVG: igy a hosszu cegnev tordelheto, a gomb
* billentyuzetrol elerheto, es a nagyitas nem torzitja el a szoveget.
*
* NEGY ADAT all rajta - cegnev, kinek a partnere, idei forgalma, statusz -,
* es egy gomb az adatlapra. A buborek TAJEKOZTAT, nem helyettesiti az
* adatlapot: ha tobb kellene, egy kattintassal ott van. */
.terkep-buborek {
position: absolute; z-index: 3; width: max-content; max-width: 300px;
min-width: 244px;
/* A `translate(-50%)` teszi a pont FOLE kozepre; a fuggoleges eltolast a
JS adja hozza (a pont fole vagy ala). */
transform: translate(-50%, -100%);
display: grid; gap: 6px; padding: 12px 14px;
background: var(--lap); border: 1px solid var(--vonal);
border-radius: var(--iv-kozep); box-shadow: var(--arnyek);
}
.terkep-buborek.alul { transform: translate(-50%, 0); }
.terkep-buborek-fej {
display: flex; align-items: flex-start; gap: 10px; justify-content: space-between;
}
/* `min-width: 0` a racsban/flexben nem disz: enelkul egy hosszu cegnev
kilogatna a buborekot a kartyabol. */
.terkep-buborek-azonos { min-width: 0; }
.terkep-buborek-nev { font-size: .98rem; line-height: 1.3; }
.terkep-buborek-hely {
font-size: .76rem; color: var(--tinta-halk); margin-top: 2px;
}
/* A bezaro X-nek nincs koze a torleshez: a `.gomb-x` piros lebegese itt
rombolast igerne. */
.terkep-buborek .gomb-x { flex: none; margin: -4px -6px 0 0; }
.terkep-buborek .gomb-x:hover {
background: var(--semleges); color: var(--tinta); border-color: var(--vonal);
}
.terkep-buborek-gazda { font-size: .8rem; color: var(--tinta-halk); }
/* A KET SZAM UGYANAZON A CSEMPEN, ami a kezdolapon all - nem szuletik
negyedik alak ugyanarra. Csak a MERETE mas: a kezdolapi 1,8rem-es szam egy
300 keppontos buborekban ket sorba torne. */
.terkep-buborek .csempek {
grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 0;
}
.terkep-buborek .csempe { padding: 10px 8px; }
.terkep-buborek .csempe-szam { font-size: 1rem; }
.terkep-buborek .csempe-cimke { font-size: .7rem; line-height: 1.25; }
.terkep-buborek .gomb { margin-top: 2px; justify-self: start; }
/* A CSUCS a pontra mutat. A `--csucs` akkor nem nulla, ha a buborekot a
kartya szelen vissza kellett szoritani - ilyenkor a doboz marad bent, es
csak a csucs csuszik a pont fole. */
.terkep-buborek-csucs {
position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px;
transform: translateX(calc(-50% + var(--csucs, 0px))) rotate(45deg);
background: var(--lap);
border-right: 1px solid var(--vonal); border-bottom: 1px solid var(--vonal);
}
.terkep-buborek.alul .terkep-buborek-csucs {
bottom: auto; top: -5px;
border: 0; border-left: 1px solid var(--vonal); border-top: 1px solid var(--vonal);
}
/* AZ UJ CIMEK FELRAKASA - csak a vezetonek, a szurosav jobb szelen. A `.db`
szamlalo utan all, tehat az `auto` margo elvalasztja a szuroktol. */
.terkep-geokod {
display: flex; align-items: center; gap: 10px; margin-left: auto;
}
.terkep-geokod .halk-apro { margin-top: 0; }
/* MERETARANY es FORRASMEGJELOLES a rajz also ket sarkaban. A lepteket nem
udvariassagbol irjuk ki: otszazszoros nagyitasi tartomanyban maskepp nem
sejtheto, mekkora tavot latunk. A forrasmegjeloles pedig az OSM ODbL
licencenek FELTETELE, nem dijszabas. */
.terkep-leptek {
position: absolute; left: 22px; bottom: 20px;
display: flex; align-items: center; gap: 7px; pointer-events: none;
}
.terkep-leptek-vonal {
height: 7px; border: 1px solid var(--tinta-halk); border-top: 0;
background: color-mix(in srgb, var(--lap) 70%, transparent);
}
.terkep-leptek-cimke {
font-size: .72rem; color: var(--tinta-halk); font-variant-numeric: tabular-nums;
}
.terkep-forras {
position: absolute; right: 22px; bottom: 18px;
font-size: .68rem; color: var(--tinta-halk); pointer-events: none;
background: color-mix(in srgb, var(--lap) 70%, transparent);
padding: 1px 6px; border-radius: var(--iv-apro);
}
.terkep-jelmagyarazat { margin-top: 12px; display: grid; gap: 8px; }
.terkep-jel-sor {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-size: .82rem; color: var(--tinta-halk);
}
.terkep-jel { display: inline-flex; align-items: center; gap: 6px; }
.terkep-korong {
display: inline-block; flex: none; border-radius: 50%;
width: var(--sugar, 14px); height: var(--sugar, 14px);
border: 1.5px solid var(--lap);
}
.terkep-korong.aktiv { background: var(--zold); }
.terkep-korong.inaktiv { background: var(--piros); }
.terkep-korong.potencialis { background: var(--tinta-halk); }
/* AZ EVI SZABADSAG ALLASA. Ugyanaz az alak, mint a kezdolapi csempeknel: egy
nagy szam es alatta a cimke - ne szulessen negyedik valtozat ugyanarra.
Csak halkabb, mert ez nem a lap fo mondanivaloja. */
.szabadsag-egyenleg {
display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline;
margin: 2px 0 10px;
}
.szabadsag-egyenleg > div { display: grid; }
.szabadsag-egyenleg strong {
font-size: 1.15rem; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.szabadsag-egyenleg span { font-size: .76rem; color: var(--tinta-halk); }
.szabadsag-egyenleg .kiemelt strong { color: var(--zold); }
.szabadsag-egyenleg .halk-apro { margin-top: 0; align-self: center; }
/* ------------------------------------------------- jelenléti ívek
A munkaltato NEVE valasztja el a ket csoportot: ket kulon lista helyett
egy lista ket fejleccel - igy a honapvalaszto egy marad. */
.jelenleti-lista { display: grid; }
.jelenleti-fejlec {
font-size: .78rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--tinta-halk);
margin: 12px 0 2px; padding-bottom: 4px;
border-bottom: 1px solid var(--vonal);
}
.jelenleti-fejlec:first-child { margin-top: 4px; }
/* NEV + LEIRAS EGYMAS ALATT, a gombok jobbra. Szuk oszlopban ez az egyetlen
elrendezes, ami nem torik szet: a szovegblokk zsugorodhat (`min-width: 0`),
a gombok nem. */
.jelenleti-lista .alsor { align-items: center; gap: 12px; padding: 10px 0; }
.jelenleti-szoveg { flex: 1 1 auto; min-width: 0; }
.jelenleti-szoveg .cim-nev { line-height: 1.3; }
/* A HALK CIMKE a listasorokban: nem tolja lejjebb a sort, es nem nyulik.
Harom listanal all ugyanez - egy szabaly mindharomra. */
.jelenleti-lista .halk-apro,
.terkep-kor-lista .halk-apro,
.terkep-kor-utvonal .halk-apro { margin-top: 0; flex: none; }
/* ------------------------------------------------- szállítási kör
*
* A KORBE VALASZTOTT PONT nem uj szint kap, hanem GYURUT: a szin mar foglalt
* (statusz), es egy negyedik statuszszinnek nezne ki. A gyuru viszont
* egyertelmuen ravitel, nem tulajdonsag. */
/* A KORBE VALASZTOTT PONT NARANCS (a felhasznalo kerese). A szin ITT
FELULIRJA A STATUSZT, es ez szandekos: tervezes kozben az a kerdes, hogy
benne van-e a korben - hogy aktiv-e, azt a lista es a buborek ugyis
megmondja. Ugyanaz a narancs, ami az utvonal vonala, tehat a megallo es a
vonal osszetartozasa magatol latszik.
A STROKE-WIDTH SIMA SZAM, nem `--egyseg-px`-szel szorzott. A pontok egy
`scale(egysegPerPx)` csoportban ulnek (`terkepPontHelyez`), tehat a
csoporton BELUL a keppont mar keppont - a szorzas ketszer skalazna, es a
gyuru benagyitva eltunt volna. A hatarvonal azert szoroz, mert AZ nincs
skalazott csoportban. */
.terkep-pont.korben circle {
fill: var(--arany-sotet);
stroke: var(--lap); stroke-width: 2;
fill-opacity: 1;
}
/* A SORSZAM a gazda betuje HELYETT all (lasd `terkepPont`), ezert kell, hogy
olvashato legyen a narancson. */
.terkep-pont.korben text { font-weight: 700; fill: var(--lap); }
/* AZ UTVONAL. Az `--egyseg-px` ugyanaz a szorzo, ami a hatarvonalnal: a vonal
vastagsaga KEPPONTBAN ertendo, kulonben benagyitva savva hizna. */
.terkep-utvonal {
fill: none; stroke: var(--arany-sotet);
stroke-width: calc(3.5 * var(--egyseg-px, 0.5));
stroke-linejoin: round; stroke-linecap: round;
opacity: .85; pointer-events: none;
}
.terkep-kor { margin-top: var(--koz); display: grid; gap: var(--koz-belso); }
.terkep-kor-fej {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* A KIVALASZTAS LISTAJA - meg nem utvonal, ezert nincs sorszamozva. */
.terkep-kor-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.terkep-kor-lista li {
display: flex; align-items: center; gap: 10px;
padding: 7px 0; border-bottom: 1px solid var(--vonal); min-width: 0;
}
.terkep-kor-lista li:last-child { border-bottom: 0; }
.terkep-kor-lista .nev {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; font-size: .92rem;
}
.terkep-kor-le {
flex: none; border: 0; background: none; cursor: pointer;
color: var(--tinta-halk); font-size: 1.1rem; line-height: 1;
padding: 2px 6px; border-radius: var(--iv-apro);
}
.terkep-kor-gombok { display: flex; gap: 10px; flex-wrap: wrap; }
.terkep-kor-eredmeny { display: grid; gap: 10px; }
/* A KET SZAM NAGYBAN: ezert nezi meg a felhasznalo a lapot. */
.terkep-kor-szamok { display: flex; gap: 28px; flex-wrap: wrap; }
.terkep-kor-szamok strong {
display: block; font-size: 1.5rem; line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.terkep-kor-szamok .halk-apro { margin-top: 2px; }
/* A MEGTERVEZETT SORREND. Itt MAR sorszamozott, mert itt a sorrend a
tartalom - a lerakat viszont nem kap szamot, az nem megallo. */
.terkep-kor-utvonal { margin: 0; padding: 0 0 0 26px; display: grid; }
.terkep-kor-utvonal li {
display: flex; align-items: baseline; gap: 10px;
padding: 5px 0; min-width: 0; font-size: .92rem;
}
.terkep-kor-utvonal li.lerakat {
list-style: none; margin-left: -26px; font-weight: 600;
}
.terkep-kor-utvonal .nev {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap;
}
.terkep-kor-utvonal .km {
flex: none; font-variant-numeric: tabular-nums; color: var(--tinta-halk);
font-size: .82rem;
}
.terkep-kor .uzenet { margin: 0; }
/* ------------------------------------------------------------- medálok
*
* A MINTA AZ APPLE ACTIVITY: a megszerzett érem SZÍNESEN áll, a meg nem
* szerzett ugyanott, ugyanakkorán, de szürkén. A szürke érem megmutatja a
* CÉLT - elrejtve az ember nem tudná, mi felé menne.
*
* A SZÜRKÍTÉS `filter`-rel, nem külön szürke képpel: hat medálból tizenkettő
* fájl lenne, és az első átrajzolásnál a felük elavulna. */
.medal-racs {
display: grid; gap: 12px; margin-top: 14px;
/* `auto-fit`, NEM `auto-fill`. A kettő között az a különbség, hogy mi
történik a ÜRESEN MARADT sávokkal: az `auto-fill` meghagyja őket, tehát
három érem egy széles dobozban a bal szélre szorul, és mellette tenyérnyi
üres hely marad. Az `auto-fit` összehúzza az üres sávokat, így a meglévő
kártyák kitöltik a sort.
A 150 keppontos minimum marad: az a legkisebb, amin a 96-os erem, a cim
es egy rovid mondat elfer - 360-as telefonon igy is ketto fer egymas
melle, csak szeles kepernyon nem marad lyuk a sor vegen. */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.medal-kartya {
display: flex; flex-direction: column; align-items: center; gap: 8px;
min-width: 0; padding: 16px 12px 14px; text-align: center;
background: var(--lap); border: 1px solid var(--vonal);
border-radius: var(--iv-kozep); cursor: pointer;
font: inherit; color: inherit;
transition: border-color .12s, background .12s;
}
.medal-kartya:hover { border-color: var(--arany-vonal); background: var(--arany-halk); }
/* A KEP DOBOZA relativ: a darabszam-jelveny a sarkara ul, a halados gyuru
pedig rakerul. A meretet a JS adja (`--erem`), mert a kezdolapon kisebb
erem all, mint a Kituntetesek lapon. */
.medal-kep {
position: relative; line-height: 0;
width: var(--erem, 96px); height: var(--erem, 96px);
}
.medal-kep img { width: 100%; height: 100%; display: block; }
/* A HALADAS-GYURU. Kordiagram az erem KORUL, nem sav alatta: igy egy targyat
latni, nem kettot - es a kor alaku eremhez a kor alaku jelzo illik.
*
* A `conic-gradient` a kitoltes, a `mask` pedig KILYUKASZTJA a kozepet, hogy
* csak a gyuru maradjon. A ket `mask` sor (elotag nelkul es `-webkit-`) a
* regebbi iOS-Safari miatt kell - ott az uzletkotok fele nezi.
*
* A `from -90deg`: a kor a TETEJEN kezdodjon, ne jobb oldalt. Egy oratol azt
* varja az ember, hogy tizenkettonel indul. */
.medal-gyuru {
position: absolute; inset: -7px; border-radius: 50%;
background: conic-gradient(from -90deg, var(--arany) 0
calc(var(--kesz, 0) * 1turn), var(--vonal) 0);
/* A MASZKBAN CSAK AZ ATLATSZOSAG SZAMIT, a szin maga nem: ami atlatszo,
az kilyukad, ami tomor, az latszik. Ezert `currentColor` - igy nincs
beegetett hexa a stiluslapon (a `:root`-on kivul egy sem all). */
-webkit-mask: radial-gradient(closest-side, transparent 0 calc(100% - 5px),
currentColor calc(100% - 5px));
mask: radial-gradient(closest-side, transparent 0 calc(100% - 5px),
currentColor calc(100% - 5px));
}
.medal-gyuru.kesz { background: conic-gradient(var(--zold) 0 1turn); }
/* AMI MEG NINCS MEG: szurken es halvanyan. A `grayscale` egyedul tul elenk
maradna - a hat medal hat kulonbozo szurkeje ugyanugy versengene a
figyelemert, mint szinesen. */
/* AMI MEG NINCS MEG: szurken es halvanyan - de a GYURU szines marad, mert
epp az mondja meg, mennyi van hatra. Ha az is elszurkulne, a lap nem
mutatna celt, csak hianyt. */
.medal-kep.nincs-meg img { filter: grayscale(1); opacity: .38; }
/* HANYSZOR kapta meg. Csak egy folott latszik (lasd `medalKartya`). */
.medal-db {
position: absolute; right: -2px; bottom: 2px;
min-width: 26px; padding: 2px 7px;
background: var(--arany); color: var(--lap);
border: 2px solid var(--lap); border-radius: 999px;
font-size: .74rem; font-weight: 700; line-height: 1.3;
font-variant-numeric: tabular-nums;
}
.medal-nev {
font-size: .84rem; font-weight: 700; line-height: 1.3;
min-width: 0; overflow-wrap: anywhere;
}
.medal-kartya:not(.megvan) .medal-nev { color: var(--tinta-halk); }
.medal-uzenet {
font-size: .78rem; line-height: 1.4; color: var(--tinta-halk);
min-width: 0; overflow-wrap: anywhere;
}
.medal-uzenet.jo { color: var(--zold); font-weight: 600; }
/* A reszletek ablaka. Ugyanaz a `.ablak` vaz, kozepre zart tartalommal:
itt egy erem all a tetejen, nem egy urlap. */
.medal-ablak { text-align: center; }
.medal-ablak h2 { margin: 10px 0 6px; }
.medal-ablak p { margin: 0 0 12px; line-height: 1.55; }
.medal-nagy { margin: 0 auto 4px; }
.medal-alkalom-cim {
margin: 16px 0 8px; font-size: .78rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-halk);
}
.medal-alkalmak { display: grid; gap: 2px; text-align: left; }
.medal-alkalom {
display: flex; align-items: baseline; gap: 10px;
padding: 8px 0; border-top: 1px solid var(--vonal); font-size: .9rem;
}
.medal-alkalom:first-child { border-top: none; }
.medal-alkalom-mikor { font-weight: 600; min-width: 0; }
/* --------------------------------------------------------------- diktálás */
.diktalo { margin-top: 10px; }
.diktalo-gomb { min-height: 46px; }
/* Felvétel közben lüktet: egy pillantásra látszik, hogy megy. */
.diktalo-gomb.felvesz {
background: var(--piros); border-color: var(--piros); color: var(--lap);
animation: lüktet 1.4s ease-in-out infinite;
}
@keyframes lüktet { 50% { opacity: .72; } }
.diktalo-allapot { margin-left: 12px; font-size: .88rem; font-variant-numeric: tabular-nums; }
.diktalo-allapot.aktiv { color: var(--arany-sotet); font-weight: 600; }
.diktalo-allapot.jo { color: var(--zold); }
.diktalo-allapot.hiba { color: var(--piros); }
/* Kis kijelzőn a gomb és az állapot egymás alá kerül. */
@media (max-width: 420px) {
.diktalo-gomb { width: 100%; }
.diktalo-allapot { display: block; margin: 8px 0 0; }
}
/* ------------------------------------------------------------ motivacio */
/* Az Aktivitasi gyuru mintaja: rovid mondat, nagy jel, kattinthato ha
partnerre mutat. A lap tetejen all, mert ez az elso, amit el kell olvasni. */
.motivacio { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.motiv {
display: flex; gap: 12px; align-items: center;
padding: 12px 16px; border-radius: var(--iv-kozep);
background: var(--lap); border: 1px solid var(--vonal);
}
.motiv-jel { font-size: 1.3rem; line-height: 1; flex: none; }
.motiv-szoveg { font-size: 0.97rem; line-height: 1.45; }
.motiv.kattinthato { cursor: pointer; }
.motiv.kattinthato:hover { border-color: var(--tinta-halk); }
.motiv-siker { background: var(--zold-halk); border-color: var(--zold-vonal); }
.motiv-kozel { background: var(--arany-halk); border-color: var(--arany-vonal); }
.motiv-tipp { background: var(--lap); }
.motiv-naplo { background: var(--piros-halk); border-color: var(--piros-vonal); }
@media (max-width: 620px) { .motiv { padding: 11px 13px; } }
/* Ajanlas-sor: a szoveg kattinthato, a vegen a pipa. A sor azert nem ,
mert gombba nem tehető masik gomb. */
/* A BUBOREK ES A PIPA EGY VONALBAN. Mindketto 30x30-as dobozban ul, kozepre
* igazitva - eddig a buborek gombkent, a pipa cimkekent viselkedett, es
* ket kulonbozo magassagon alltak. */
.ajanlas-pipa {
display: flex; align-items: center; justify-content: center;
flex: none; width: 30px; height: 30px; margin: 0;
}
.ajanlas-pipa input {
width: 20px; height: 20px; accent-color: var(--zold); cursor: pointer; margin: 0;
}
.ajanlas.elvetve { opacity: 0.4; transition: opacity 0.4s; }
/* Valasz az ajanlasra. A mezo a sor ALATT all, teljes szelessegben - egy sorba
zsufolva a partnernevvel telefonon semmi nem ferne el. */
.ajanlas-valasz { display: flex; gap: 8px; padding: 0 0 12px 22px; }
.ajanlas-valasz.rejtve { display: none; }
/* Buborek ikon: alapbol halvany, nyitott allapotban kiemelve. Tiz ajanlas
alatt tiz nyitott beviteli mezo tobbet zavarna, mint amennyit hasznal. */
.gomb-buborek {
display: flex; align-items: center; justify-content: center;
flex: none; width: 30px; height: 30px; padding: 0; margin: 0;
border: 1px solid transparent; border-radius: var(--iv-apro); background: none;
cursor: pointer; font-size: .95rem; line-height: 1; opacity: .45;
}
.ajanlas:hover .gomb-buborek { opacity: .8; }
.gomb-buborek:hover { background: var(--arany-halk); border-color: var(--vonal); }
.gomb-buborek.nyitva {
opacity: 1; background: var(--arany-halk); border-color: var(--arany);
}
.ajanlas-valasz input {
flex: 1 1 auto; min-width: 0; padding: 8px 10px; font: inherit;
border: 1px solid var(--vonal); border-radius: var(--iv-kicsi);
background: var(--lap);
}
.ajanlas-valasz input::placeholder { color: var(--tinta-halk); }
.ajanlas-valasz button { flex: none; }
@media (max-width: 620px) { .ajanlas-valasz { padding-left: 0; } }
/* --------------------------------------------- rogzito lap: egyseges gombok */
/* A rogzito lapon MINDEN gomb (es a datumvalaszto) egyforma: azonos
szelesseg es magassag, kozepre igazitva. Egy eltero meretu elem a sorban
azonnal rendetlennek latszik - telefonon meg inkabb, ahol egymas ALATT
allnak vegig. */
.rogzito-gombsor {
display: flex; flex-direction: column; align-items: center;
gap: 8px; margin: 18px 0 0;
}
.rogzito-gombsor .kozepre { align-self: center; margin: 0; }
.teljes-gomb {
width: 100%; max-width: 340px; min-height: 46px;
display: flex; align-items: center; justify-content: center;
text-align: center;
}
/* A datumvalaszto natív elem: a bongeszo sajat belso igazitasat felul kell írni. */
input[type="date"].teljes-gomb {
padding: 10px 14px; font: inherit; border: 1px solid var(--vonal);
border-radius: var(--iv-kicsi); background: var(--lap); color: var(--tinta);
}
.rogzito-gombsor .diktalo-allapot { margin: 0; }
/* A fejlecben a logo es a „CRM" szo egyutt egy kattinthato egyseg. */
.fejlec-nev { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.fejlec-crm {
font-weight: 700; font-size: 1.05rem; letter-spacing: .04em;
color: var(--tinta-halk);
}
@media (max-width: 620px) { .fejlec-crm { display: none; } }
/* Valtozasjelzo a csempeken (Google Analytics mintajara). */
/* A NYÍL ÉS A SZÁZALÉK EGY SORBAN MARAD. A csempe számsora flexbox, tehát a
* jelvény is flex-elem: alapból zsugorodhat a tartalma alá, és a keskeny
* oszlopban a „▲ 1400%" a nyílra meg a számra tört szét. */
.valtozas {
display: inline-block; flex: none; white-space: nowrap;
margin-left: 8px; font-size: .78rem; font-weight: 700;
padding: 2px 7px; border-radius: 999px; vertical-align: middle;
}
/* A `no`/`csokken` szine is a kozos allapotszinekbol - lasd a `.jelveny`-nel. */
.valtozas.nulla { background: var(--hatter); color: var(--tinta-halk); }
/* Negyedeves celok: EGYMAS ALATT, nev balra, osszeg jobbra. */
.cel-lista { display: flex; flex-direction: column; }
.cel-sor {
display: flex; justify-content: space-between; align-items: baseline;
gap: 14px; padding: 11px 0; border-top: 1px solid var(--vonal);
}
.cel-sor:first-child { border-top: none; }
.cel-gombok { display: flex; gap: 2px; flex: none; margin-left: 6px; }
.cel-gombok .gomb-x { opacity: 0; }
.cel-sor:hover .cel-gombok .gomb-x { opacity: .6; }
.cel-gombok .gomb-x:hover { opacity: 1; }
.cel-ertek { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------- listák */
.lista-racs { display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lista-racs .kartya { cursor: pointer; }
.lista-racs .kartya:hover { border-color: var(--arany); }
.lista-racs h2 { font-size: 1rem; margin-bottom: 6px; }
/* KÖZÉPRE ZÁRT LISTAKÁRTYA. Egy tengely: cím, jelvény, darabszám. A
`min-height` azért kell, hogy az egy- és a kétsoros cím mellett is
egyforma magasak legyenek — a rácsban a nyújtás egyébként a legmagasabbhoz
igazít, és a többi alatt tenyérnyi üres hely marad. */
.lista-kartya {
display: flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center; gap: 8px; min-height: 132px;
}
.lista-kartya h2 { margin: 0; line-height: 1.35; }
.lista-kartya p { margin: 0; }
/* Sajat oszlop fejlece: a torlo X csak raviteskor lathato. */
.sajat-oszlop { white-space: nowrap; }
.sajat-oszlop .gomb-x { opacity: 0; margin-left: 4px; vertical-align: middle; }
.sajat-oszlop:hover .gomb-x { opacity: .6; }
.gomb-x.kicsi { width: 20px; height: 20px; font-size: .95rem; }
/* Helyben szerkesztheto cella: egy kutatolistat menet kozben tolt ki az
ember, nem parbeszedablakon keresztul. */
input.cella {
/* Ugyanaz az iv, mint a sor vegen allo `.gomb-x`-e: a ket elem EGY SORBAN
van a listatablazatban, es ket kulonbozo sarok ott azonnal latszik. */
width: 100%; min-width: 110px; padding: 6px 8px; font: inherit;
font-size: .9rem; border: 1px solid transparent;
border-radius: var(--iv-apro);
background: transparent; color: var(--tinta);
}
input.cella:hover { border-color: var(--vonal); }
input.cella:focus { border-color: var(--arany); background: var(--lap); outline: none; }
input.cella.mentve { border-color: var(--zold); background: var(--zold-halk); }
/* Kattinthato statuszjelveny es a legordulo. A menu FIX pozicioju, mert a
jelveny tablazatcellaban ul, ahol az overflow levagna egy sima abszolut
legordulot. */
.jelveny.valthato { cursor: pointer; border: 1px solid transparent; }
.jelveny.valthato:hover { border-color: currentColor; }
.jelveny.valthato:focus-visible { outline: 2px solid var(--arany); outline-offset: 2px; }
.allapot-menu {
position: fixed; z-index: 70; display: flex; flex-direction: column; gap: 2px;
padding: 6px; border-radius: var(--iv-kozep); background: var(--lap);
border: 1px solid var(--vonal); box-shadow: var(--arnyek);
}
.allapot-elem {
display: flex; align-items: center; padding: 5px 8px; border: none;
background: none; border-radius: var(--iv-apro); cursor: pointer; text-align: left;
}
.allapot-elem:hover { background: var(--arany-halk); }
.allapot-elem.mostani { background: var(--hatter); }
.allapot-elem.mostani::after { content: "✓"; margin-left: 8px; color: var(--zold); }
/* ------------------------------------------------- vezetoi kezdolap */
/* Az uzletkotok EGYMAS MELLETT szeles kepernyon, egymas ALATT mobilon. */
.uzletkoto-racs {
display: grid; gap: var(--koz);
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
@media (max-width: 760px) { .uzletkoto-racs { grid-template-columns: 1fr; } }
.alcim-kicsi {
font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
color: var(--tinta-halk); font-weight: 700; margin: 18px 0 8px;
}
/* Gepi szoveg: dolt, hogy latszodjon, nem ember irta. */
.gepi-szoveg { line-height: 1.55; font-style: italic; color: var(--tinta); }
.halk-apro { font-size: .76rem; color: var(--tinta-halk); margin-top: 6px; }
.javaslat {
padding: 12px 0; border-top: 1px solid var(--vonal); line-height: 1.5;
}
.javaslat:first-of-type { margin-top: 12px; }
.javaslat .cim-nev { font-weight: 700; }
/* A PIPA A CIM MELLETT ul, nem alatta: az a sor mondja meg, mirol van szo,
* tehat ott kell tudni lezarni. A `baseline` a cimhez igazitja - a jelolo
* kozepre huzva a felkover cimhez kepest csuszottnak latszana. */
.javaslat-fej {
display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
}
.javaslat-fej input[type="checkbox"] { flex: none; cursor: pointer; }
/* AZ ELINTEZETT HALKAN OTT MARAD a lenyithato sor mogott: a pipa nem torles,
* es egy felrekattintas utan is elo kell tudni venni. */
.javaslat.kesz { opacity: .55; }
.javaslat.kesz .cim-nev { text-decoration: line-through; }
.javaslat-elintezett .javaslat:first-of-type { margin-top: 0; }
/* A „Miért" es a „Teendo" szo helyett ikon: a ket cimke minden javaslatnal
* megismetlodott, es egyutt annyi helyet vitt el, mint maga a mondat. Az ikon
* a sor ELEJEN ul, a szoveg mellette - tobb soros mondatnal is egy oszlopban. */
.javaslat-sor { display: flex; align-items: baseline; gap: 8px; }
.javaslat-sor + .javaslat-sor { margin-top: 3px; }
.javaslat-ikon { flex: none; align-self: center; }
.szamsor { margin: 8px 0 0 18px; padding: 0; font-size: .88rem;
color: var(--tinta-halk); line-height: 1.6; }
details > summary { cursor: pointer; margin-top: 12px; font-size: .85rem; }
/* ------------------------------------------------- mobil menu es gomb */
/* A hamburger CSAK keskeny kepernyon latszik. Szelesen a menu vegig kint
van - ott van hely ra, es egy kattintassal kevesebb. */
.menu-gomb {
display: none; margin-left: auto; width: 42px; height: 42px; flex: none;
border: 1px solid var(--vonal); border-radius: var(--iv-kozep); background: var(--lap);
font-size: 1.15rem; line-height: 1; cursor: pointer; color: var(--tinta);
}
.menu-gomb:hover { background: var(--arany-halk); }
@media (max-width: 760px) {
.menu-gomb { display: block; }
.fejlec { gap: 10px; padding: 10px 0 12px; margin-bottom: 16px; }
/* A menu alapbol OSSZECSUKVA. Nyitva teljes szelessegu lista, mert egy
sorba tordelt gombsor ujjal nehezen talalhato el. */
.fejlec nav {
display: none; order: 10; width: 100%; flex-direction: column; gap: 2px;
padding-top: 8px; border-top: 1px solid var(--vonal);
}
.fejlec.menu-nyitva nav { display: flex; }
.fejlec nav a { padding: 12px 14px; border-radius: var(--iv-kicsi); font-size: .95rem; }
/* A felhasznalo neve es a kilepes a menube kerul, nem a fejlec sorba. */
.fejlec .ki { order: 11; width: 100%; margin-left: 0; display: none; }
.fejlec.menu-nyitva .ki {
display: flex; justify-content: space-between;
padding-top: 10px; border-top: 1px solid var(--vonal);
}
/* A LENYITOTT MENUBEN FELIRAT IS: ott van hely, es egy magányos ikon a
menupontok kozott talalos kerdes lenne. */
.fejlec.menu-nyitva .ki .ki-szoveg { display: inline; }
}
/* Uj interakcio: mobilon nagy KOR ALAKU gomb a kepernyo aljan. Terepen,
fel kezzel ez a legkonnyebben eltalalhato hely - a lap tetejere gorgetes
nelkul is eleretheto. Szelesen marad a szoveges gomb a lap tetejen. */
.uj-kor-doboz {
display: none; position: fixed; z-index: 60;
right: max(18px, env(safe-area-inset-right));
bottom: calc(18px + env(safe-area-inset-bottom));
flex-direction: column; align-items: center; gap: 6px;
}
/* A felirat a gomb FOLE kerul, nem melle: mellette a keskeny kepernyon
elfogyna a hely, folotte viszont barmilyen szelessegnel elfer. */
.uj-kor-cimke {
padding: 4px 10px; border-radius: 999px;
background: var(--tinta); color: var(--lap);
font-size: .74rem; font-weight: 700; white-space: nowrap;
box-shadow: 0 2px 8px rgba(35,33,33,.18);
}
.uj-kor {
width: 64px; height: 64px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: none; background: var(--arany); color: var(--lap);
font-size: 2rem; line-height: 1; cursor: pointer;
box-shadow: 0 6px 20px rgba(35,33,33,.22);
}
.uj-kor:active { transform: scale(.95); }
@media (max-width: 760px) {
.uj-kor-doboz { display: flex; }
.uj-interakcio { display: none; }
}
/* ==================== stratégiai sáv (vezetői kezdőlap) ====================
*
* A kereskedelmi igazgató döntési képe. Öt blokk, KÉT OSZLOPBAN, párosával:
*
* Hol tartunk | Merre megyünk - a helyzet
* Ki marad ki | Bírjuk-e - a két, emberre bontott táblázat
* Interakciók havonta (teljes szélesség)
*
* MIERT NEM `auto-fit`. Azzal a bongeszo szamolja ki az oszlopszamot, es
* harmat csinalt belole - a ket TABLAZAT viszont nem fer el harmadnyi
* helyen, es kilogott a kartyabol. A parok itt tartalmi parok, nem
* helykitoltes: fix ket oszlop a helyes, mert a TARTALOM kerte, nem a keperno.
*
* SZÍN CSAK ÁLLAPOTRA. Az arany a kiemelés dolga, itt viszont nincs mit
* kiemelni - minden szám egyformán fontos. A piros és a zöld ÁLLÍT valamit
* (visszaesés, előrelépés), a többi semleges marad. */
.strat .strat-racs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 30px;
}
.strat-blokk { min-width: 0; }
.strat-szeles { grid-column: 1 / -1; }
.strat-blokk h3 {
font-size: .82rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--tinta-halk); margin: 0 0 14px;
}
.strat-labjegyzet {
font-size: .76rem; color: var(--tinta-halk); margin: 10px 0 0; line-height: 1.45;
}
/* --- tölcsér --- */
.tolcser-sor {
display: grid; grid-template-columns: 6.2rem 1fr 2.2rem 3.6rem;
align-items: center; gap: 8px; padding: 3px 0;
}
.tolcser-nev { font-size: .8rem; color: var(--tinta-halk); }
.tolcser-sav {
height: 9px; background: var(--semleges); border-radius: 999px; overflow: hidden;
}
.tolcser-sav i { display: block; height: 100%; border-radius: 999px; background: var(--tinta-halvany); }
.tolcser-sav i.st-aktív { background: var(--zold); }
.tolcser-sav i.st-puhítás { background: var(--arany); }
.tolcser-sav i.st-inaktív { background: var(--arany-vonal); }
.tolcser-sav i.st-bezárt { background: var(--piros-vonal); }
.tolcser-db { font-weight: 700; font-size: .86rem; text-align: right; }
/* Az AKTÍV a cél-állapot: a neve és a száma is zöld, mint a sávja. */
.tolcser-sor.kiemelt .tolcser-nev,
.tolcser-sor.kiemelt .tolcser-db { color: var(--zold); }
.tolcser-ft { font-size: .76rem; color: var(--tinta-halk); text-align: right; }
/* --- mozgás --- */
.mozgas-sor {
display: flex; justify-content: space-between; align-items: center;
padding: 7px 0; border-top: 1px solid var(--vonal);
}
.mozgas-sor:first-of-type { border-top: 0; }
.mozgas-nev { font-size: .88rem; font-weight: 500; }
.mozgas-szamok { display: flex; gap: 10px; font-size: .86rem; }
.mozgas-szamok .elore { color: var(--zold); }
.mozgas-szamok .hatra { color: var(--arany-sotet); }
.mozgas-szamok .kilepett { color: var(--piros); }
/* --- táblázatok (lefedettség, terhelés) ---
*
* `table-layout: fixed`, mert enelkul a tablazat a fejlecek MIN-CONTENT
* szelessegere nyilik, es kilog a racscellabol - a `width:100%` ezt nem
* akadalyozza meg. Fix elrendezessel a fejlec TORIK, es a tabla a helyen
* marad. */
.strat-tabla { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .84rem; }
.strat-tabla th {
text-align: right; font-size: .66rem; font-weight: 700; letter-spacing: .02em;
text-transform: uppercase; color: var(--tinta-halk);
padding: 0 0 6px 8px; vertical-align: bottom; line-height: 1.3;
hyphens: auto;
}
.strat-tabla th:first-child, .strat-tabla td.nev { text-align: left; width: 5.6rem; }
.strat-tabla td {
text-align: right; padding: 6px 0 6px 8px; border-top: 1px solid var(--vonal);
font-variant-numeric: tabular-nums;
}
.strat-tabla td.nev { font-weight: 500; }
/* A RIASZTÁS NEM DÍSZ: csak ott áll, ahol van kimaradt partner. Nullára
* semleges marad - a piros nulla értelmetlen, és elkoptatja a jelzést. */
.strat-tabla td.riaszt { color: var(--piros); font-weight: 700; }
/* --- trend ---
*
* EGY RÁCS tartja a neveket, az oszlopokat ES a honapcimkeket. Korabban
* harom kulon flex-sor volt, sajat margoval - azok kulon-kulon jok voltak,
* egymas alatt viszont elcsusztak. Egy racsban a cimke definicio szerint az
* oszlopa alatt all. */
.trend-racs {
display: grid; grid-template-columns: 4.6rem minmax(0, 1fr);
gap: 7px 10px; align-items: center;
}
.trend-nev { font-size: .8rem; color: var(--tinta-halk); }
.trend-rajz { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
/* `align-self: stretch` es nem `height:100%`: a flex-elem sajat magassaga
* igy biztosan a sorhoz igazodik, fuggetlenul attol, mit orokol. */
.trend-osz { flex: 1 1 0; align-self: stretch; display: flex; align-items: flex-end; }
.trend-osz i {
display: block; width: 100%; background: var(--vonal);
border-radius: 3px 3px 0 0; min-height: 2px;
}
/* AZ IMPORTÁLT ÉS A SAJÁT ADAT KÜLÖN LÁTSZIK. A halvány oszlopok Notionból
* jönnek: azt mutatják, ki mennyit dokumentált, nem azt, ki mennyit dolgozott.
* Egy szín alatt a kettő hazudna. */
.trend-osz.eles i { background: var(--arany); }
.trend-cimkek { display: flex; gap: 3px; font-size: .62rem; color: var(--tinta-halvany); }
.trend-cimkek span { flex: 1 1 0; text-align: center; overflow: hidden; }
@media (max-width: 860px) {
.strat .strat-racs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.trend-cimkek { display: none; }
}
/* ==================== verseny (üzletkötői kezdőlap) ====================
*
* A KIEMELÉS ARANNYAL, de nem harsányan: arany keret és halk arany háttér,
* nem tömör szín. A kartya a lap tetejen all - ez ELO allas, nem dekoracio,
* mint a lezart idoszakra jaro medal. */
.verseny-doboz {
border-color: var(--arany-vonal);
background: linear-gradient(var(--arany-halk), var(--lap) 70%);
}
.verseny-fej { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.verseny-fej h2 { margin: 0; }
.verseny-idoszak {
font-size: .74rem; color: var(--tinta-halk); background: var(--lap);
border: 1px solid var(--arany-vonal); border-radius: 999px; padding: 2px 11px;
}
.verseny-racs {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.verseny-kartya {
background: var(--lap); border: 1px solid var(--vonal);
border-radius: var(--iv-kozep); padding: 14px 18px;
}
.verseny-cim { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.verseny-cim h3 { margin: 0; font-size: 1.02rem; }
.verseny-sugo {
width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%;
border: 1px solid var(--vonal); background: var(--hatter);
color: var(--tinta-halk); font-size: .72rem; font-weight: 700;
cursor: pointer; line-height: 1; padding: 0;
}
.verseny-sugo:hover { border-color: var(--arany); color: var(--tinta); }
.verseny-sor {
display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
gap: 10px; padding: 6px 0; border-top: 1px solid var(--vonal);
}
.verseny-sor:first-of-type { border-top: 0; }
.verseny-nev { font-size: .88rem; }
/* A HETI SZAM A TET: az all nagyban. A havi halkabban mellette - az a
* hatter, ami megmutatja, hogy egy jo het kiugras volt-e vagy forma. */
.verseny-het { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.verseny-honap { font-size: .72rem; color: var(--tinta-halk); }
/* AKI VEZET. Nullanal SENKI nem vezet - a het elejen a „te vezetsz 0-val"
* nevetseges lenne, es elkoptatna a jelzest. */
.verseny-sor.vezet .verseny-nev { font-weight: 700; }
.verseny-sor.vezet .verseny-het { color: var(--arany-sotet); }
/* --- a rögzítő lap két versenymezője --- */
.verseny-mezok {
border: 1px solid var(--arany-vonal); background: var(--arany-halk);
border-radius: var(--iv-kozep); padding: 12px 14px; margin: 4px 0 14px;
display: flex; flex-direction: column; gap: 10px;
}
/* `flex-wrap`: hosszu cimke mobilon torhet a jelolo ala, ne loghasson ki. */
.verseny-pipa {
display: flex; align-items: center; gap: 10px; cursor: pointer; flex-wrap: wrap;
}
.verseny-pipa input { width: 18px; height: 18px; accent-color: var(--arany-sotet); }
/* AMI MEGVAN: halvanyabb, de NEM eltuntetve - az uzletkoto lassa, hogy ez a
* pont ennel a partnernel mar megvan, ne azt higgye, elromlott valami. */
.verseny-pipa.megvolt { color: var(--tinta-halk); cursor: default; }
/* SZŰK KÖZ a −/szám/+ hármas között: azok egy vezérlő, nem három. A címkét
* a saját `margin-right: auto` tolja el tőlük. */
.verseny-szamlalo { display: flex; align-items: center; gap: 6px; }
.verseny-cimke { margin-right: auto; font-size: .9rem; }
.verseny-ertek {
min-width: 2ch; text-align: center; font-size: 1.1rem; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.gomb.apro { padding: 4px 12px; font-size: 1rem; line-height: 1.2; }
/* --- trend: a forgalom vonala az oszlopok fölött --- */
.trend-fej {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
margin-bottom: 14px;
}
.trend-fej h3 { margin: 0; }
.trend-jelmagy { display: flex; gap: 14px; font-size: .7rem; color: var(--tinta-halk); }
.trend-jelmagy span { display: flex; align-items: center; gap: 5px; }
.trend-jelmagy span::before { content: ""; display: block; }
.jm-oszlop::before { width: 9px; height: 9px; border-radius: 2px; background: var(--arany); }
.jm-vonal::before { width: 14px; height: 2px; background: var(--tinta); }
/* `relative`: az SVG EHHEZ igazodik, es igy fedi pontosan az oszlopokat. */
.trend-rajz { position: relative; }
.trend-penz {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; overflow: visible;
}
/* A VONAL VASTAGSAGA KEPPONTBAN marad: a `viewBox` nyujtasa kulonben
* vizszintesen elkenne, fuggolegesen elvekonyitana. */
.trend-penz polyline {
fill: none; stroke: var(--tinta); stroke-width: 1.5px;
stroke-linejoin: round; stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
/* Helyben szerkesztheto legordulo egy tablazatcellaban: keret nelkul ul a
sorban, es csak akkor erosodik meg, ha rajta allsz. Egy teljes urlapmezo
itt harsany lenne - a tablazat sorai a fontosak, nem a vezerlok. */
.halk-valaszto {
font: inherit; color: inherit; background: none; border: 1px solid transparent;
border-radius: var(--iv-apro); padding: 2px 22px 2px 6px; cursor: pointer;
appearance: none; background-image: var(--nyil-le);
background-repeat: no-repeat; background-position: right 6px center;
}
.halk-valaszto:hover:not(:disabled) { border-color: var(--vonal); background-color: var(--hatter); }
.halk-valaszto:disabled { opacity: .5; cursor: default; }
/* A havi cel szerkeszto mezoje: a helyen marad, ahol a szam allt, es
ugyanolyan szeles - igy a sor nem ugrik meg szerkesztes kozben. */
.cel-mezo {
width: 9rem; text-align: right; font: inherit;
padding: 4px 8px; border: 1px solid var(--arany); border-radius: var(--iv-apro);
background: var(--lap); color: var(--tinta);
}
/* ------------------------------------------------------- kanban-tábla (teendők)
*
* A `teendok.js` tábla-nézete. A szerződés ehhez a részhez SZŰKÍTETT
* színkészletet ír elő: csak --arany, --tinta, --vonal, --lap, --hatter,
* --zold, --piros, --semleges, --iv, --iv-kozep, --arnyek. A halvány
* szöveghez ezért itt NEM születik új token - a meglévő `.halk` /
* `.halk-apro` osztályt kapja meg az elem, azok már viszik a
* `--tinta-halk`-ot, csak nem EBBEN a szakaszban vannak deklarálva.
*
* A fejléc, a gomb, a fátyol/ablak, a törlő-X és a szerkesztő-ceruza a
* MEGLÉVŐ `.kartya-fej` / `.gomb` / `.fatyol` / `.ablak` / `.gomb-x` /
* `.tolo` osztályára épül - itt csak az új rész: az oszlop, a kártya, a
* húzás helyjelölője és a részletnézet belső listái.
*/
/* AZ OSZLOPOK KITOLTIK A LAPOT. Korabban 280 keppont fix szelesseguek voltak,
* es egy szeles keperyon a negy oszlop utan tenyernyi ures hely maradt jobbra
* - a tabla „odabiggyesztettnek" latszott a lap bal szelen.
*
* `align-items: stretch`: az oszlopok EGYFORMA MAGASAK, a leghosszabbhoz
* igazodva. Kulonben a ket-kartyas oszlop fele akkora, mint a hatkartyas, es
* a fogado teruletuk is annyival kisebb - huzas kozben ez a kulonbseg
* zavaro, mert oda kell celozni, ahol epp van hely. */
/* TOBB TABLA EGYMAS ALATT (a vezetoi Teendok lapon). A szakaszok kozott
nagyobb koz kell, mint egy tablan belul: a szem igy latja, hol er veget
Flora tablaja es hol kezdodik Ildikoe. */
.teendo-szakasz + .teendo-szakasz { margin-top: calc(var(--koz) * 2); }
.kanban-tabla {
display: flex; align-items: stretch; gap: var(--koz);
overflow-x: auto; padding-bottom: 4px;
}
.kanban-oszlop {
display: flex; flex-direction: column; gap: 10px;
/* NO, DE NEM SZUKUL A HASZNALHATATLANSAGIG: a `min-width` az a hatar,
* ahol egy kartyacim meg ket sorban elfer. Az alatt a `tabla` vizszintesen
* gorgethetove valik (`overflow-x: auto`), nem preseli ossze a tartalmat. */
flex: 1 1 0; min-width: 240px;
background: var(--semleges); border-radius: var(--iv); padding: 14px;
}
/* A FOLYAMATBAN MELEGEBB, A KÉSZ ZÖLD. A ház halk-háttér tokenjeit
* használjuk, nem új színt: ugyanaz a két családjelölés, ami a jelvényeknél
* és a szalagoknál is az „épp zajlik" és a „megvan" állapotot jelenti.
*
* AZ OSZTÁLYT A NÉV ADJA (lásd `teendokOszlopOsztaly`), nem egy adatbázis-
* mező: a gazda átnevezheti az oszlopokat, és egy tárolt szín egy átnevezés
* után hazudna. Aki „Folyamatban"-ra vagy „Doing"-ra nevez egy oszlopot, az
* ezt is várja tőle. */
.kanban-oszlop.folyamatban { background: var(--arany-halk); }
.kanban-oszlop.kesz { background: var(--zold-halk); }
/* A LAP-SZINU jelveny a `--semleges` oszlophatterrol valik el - ha a
* hattervel egyezne, a darabszam eltunne a nev mellett. */
.kanban-darabszam {
background: var(--lap); color: var(--tinta); border-radius: 999px;
padding: 1px 9px; font-size: .78rem; font-weight: 700;
}
.kanban-kartyak { display: flex; flex-direction: column; gap: 8px; }
.kanban-kartya {
background: var(--lap); border: 1px solid var(--vonal);
border-radius: var(--iv-kozep); box-shadow: var(--arnyek);
padding: 10px 12px; cursor: pointer;
}
.kanban-kartya:hover { border-color: var(--arany); }
/* A FELVETT KARTYA HALVANYUL - a celhely (`.kanban-hely`) ugyanekkor NYIT
* HELYET, lasd ott. Ket kulon atmenet, egyutt adjak a huzas-animaciot. */
.kanban-kartya.huzva { opacity: .35; transition: opacity .15s ease; }
.kanban-kartya-cim { font-weight: 600; }
.kanban-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.kanban-ures { padding: 4px 2px; }
/* A KÁRTYA TÖRLŐ ×-E a jobb felső sarokban áll, csak rávitelre látható -
* ugyanaz a minta, mint a `.sajat-oszlop .gomb-x`-é és a `.cel-gombok
* .gomb-x`-é: alapból átlátszó, a kártya hoverére vagy fókuszára félig, a
* gomb saját hoverére/fókuszára teljesen. A `:focus-within` KELL a
* billentyűzetes eléréshez - Tabbal a gombra állva a kártya maga sosem kap
* `:hover`-t, csak a benne álló gomb kap fókuszt. */
.kanban-kartya { position: relative; }
.kanban-kartya .gomb-x { position: absolute; top: 6px; right: 6px; opacity: 0; }
.kanban-kartya:hover .gomb-x,
.kanban-kartya:focus-within .gomb-x { opacity: .6; }
.kanban-kartya .gomb-x:hover,
.kanban-kartya .gomb-x:focus { opacity: 1; }
/* A DOBAS VARHATO HELYE. Ejtes ELOTT ez mutatja, hova esne a kartya -
* `max-height` es `opacity` no 0-rol, mert az `auto` magassag nem
* animalhato CSS-ben. A `.mutat` osztalyt a JS a beszuras UTANI keretben
* teszi ra (lasd `teendokOszlop`), kulonben a bongeszo egy lepesben
* rajzolna ki a nyitott allapotot, es nem lenne mit animalni. */
.kanban-hely {
max-height: 0; opacity: 0; overflow: hidden;
border: 2px dashed var(--arany); border-radius: var(--iv-kozep);
background: var(--semleges);
transition: max-height .15s ease, opacity .15s ease;
}
.kanban-hely.mutat { max-height: 64px; opacity: 1; }
.ablak.kanban-ablak { width: min(640px, 100%); }
.kanban-cim { flex: 1 1 auto; min-width: 0; }
.kanban-leiras { white-space: pre-wrap; }
.kanban-pipa-lista { display: flex; flex-direction: column; gap: 4px; }
.kanban-pipa-sor { display: flex; align-items: center; gap: 8px; }
.kanban-pipa-szoveg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kanban-pipa-szoveg.kesz { text-decoration: line-through; }
.kanban-uj-pipa { display: flex; gap: 8px; margin-top: 6px; }
.kanban-uj-pipa input { flex: 1 1 auto; min-width: 0; }
.kanban-melleklet-lista { display: flex; flex-direction: column; gap: 6px; }
.kanban-melleklet-sor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kanban-feltoltes { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.kanban-melleklet-nev { color: var(--arany); font-weight: 600; }
/* --- kommentek: üzenetváltás-buborékok ---
*
* A SAJÁT ARANY, A MÁSIKÉ SEMLEGES. Az arany a márka egyetlen erős hangja, és
* itt van is mit kiemelni: a beszélgetésben az a fogódzó, hogy melyik oldal
* kié. A vonalas elválasztás elmarad — a buborékok maguk elválnak. */
.kanban-buborek-sor {
display: flex; flex-direction: column; align-items: flex-start;
margin-bottom: 10px;
}
.kanban-buborek-sor.sajat { align-items: flex-end; }
.kanban-buborek {
max-width: 78%; padding: 8px 13px; border-radius: 18px;
background: var(--semleges); color: var(--tinta);
}
/* A SAROK A SAJÁT OLDALÁN TÖRIK MEG. Ez a „farok" a beszélgető-buborékok
* jele: a lekerekítés ott marad el, ahonnan a szó jön. */
.kanban-buborek-sor.sajat .kanban-buborek {
background: var(--arany); border-bottom-right-radius: 5px;
}
.kanban-buborek-sor:not(.sajat) .kanban-buborek { border-bottom-left-radius: 5px; }
.kanban-buborek-nev {
font-size: .72rem; font-weight: 700; color: var(--tinta-halk);
margin-bottom: 2px;
}
/* `pre-wrap`: a beírt sortörés megmarad, de a hosszú sor tördelődik. A
* `break-word` a szóközt nem tartalmazó hosszú láncok (link) miatt kell. */
.kanban-buborek-szoveg { white-space: pre-wrap; overflow-wrap: break-word; }
.kanban-buborek-ido {
font-size: .68rem; color: var(--tinta-halvany); margin: 2px 6px 0;
}
.kanban-uj-komment { margin-top: 10px; }
/* MOBILON EGYMAS ALA - a 760-as toreset hasznaljuk ujra (STILUS.md 6.
* szakasz): ott valt szukebbre a fejlec is, tehat mar amugy is athangolt
* nezet fogadja az egy oszlopba rendezett oszlopokat. */
@media (max-width: 760px) {
.kanban-tabla { flex-direction: column; overflow-x: visible; }
.kanban-oszlop {
flex: 1 1 auto; width: 100%; min-width: 0;
}
}
/* A teendo-tabla KEZDOLAPRA AGYAZVA (az ugyintezonel). A kartyanak mar van
cime es kerete, ezert a lap sajat fejlece es kerete elmarad - kulonben ket
keret ulne egymasban, es ket cim allna egymas alatt. */
.teendo-beagyazott .admin-fej h1 { font-size: 1.25rem; }
.teendo-beagyazott .kanban-tabla { padding-bottom: 0; }
/* ------------------------------------------------------------ kézikönyvek */
/* A HÁROM KÉZIKÖNYV választója a kutatólisták kártya-rajzát kapja
* (`.lista-racs` + `.lista-kartya`) - annak semmi saját stílus nem kell.
* Ami új: az olvasólap két oszlopa (`kezikonyvOlvaso()` a `kezikonyvek.js`-
* ben adja mindkét nézetnek, a bejelentkezettnek és a megosztottnak is), a
* fejléc ikongombjai és a keresés kiemelése. */
/* KERET NÉLKÜLI IKONGOMB, Apple-módra - a jobb felső sarokban a megosztás és
* a nyomtatás. NEM a `.gomb-x`: az ráviteltre PIROSRA vált, mert ott mindig
* törlésről van szó - itt semleges műveletről, tehát csak erősödik. A 28
* képpont a `.gomb-x` mérete, nem új szám: egy ikongombnak nem kell saját. */
.ikon-gomb {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; padding: 0;
border: none; background: none; border-radius: var(--iv-apro);
color: var(--tinta-halk); cursor: pointer;
}
.ikon-gomb:hover, .ikon-gomb:focus-visible {
color: var(--tinta); background: var(--hatter);
}
.kezikonyv-fej-ikonok { display: flex; gap: 4px; margin-left: auto; }
/* KÉT OSZLOP: a jegyzék szűk és rögzített, a szöveg viszi a maradékot. Az
* `.adatlap` 3:2 aránya itt nem illik - saját szabály, nem közös vele. */
.kezikonyv-lap {
display: grid; gap: var(--koz); align-items: start;
grid-template-columns: minmax(160px, 210px) minmax(0, 1fr);
}
@media (max-width: 860px) {
.kezikonyv-lap { grid-template-columns: 1fr; }
.kezikonyv-jegyzek { position: static; }
}
.kezikonyv-jegyzek {
display: flex; flex-direction: column; gap: 2px;
position: sticky; top: 20px;
}
.kezikonyv-jegyzek-elem {
display: block; width: 100%; text-align: left; font: inherit;
padding: 8px 10px; border: none; background: none;
border-radius: var(--iv-apro); color: var(--tinta-halk); cursor: pointer;
}
.kezikonyv-jegyzek-elem:hover { background: var(--arany-halk); color: var(--tinta); }
/* AKTÍV SZAKASZ: ugyanaz a két szín, mint a kiválasztott partneré
(`.talalat.uj`), csak vastagabb súllyal - itt egy TARTÓS állapotot jelöl,
nem egy pillanatnyi találatot. */
.kezikonyv-jegyzek-elem.aktiv {
background: var(--arany-halk); color: var(--arany-sotet); font-weight: 700;
}
.kezikonyv-tartalom { min-width: 0; }
.kezikonyv-szakasz + .kezikonyv-szakasz {
margin-top: var(--koz); padding-top: var(--koz); border-top: 1px solid var(--vonal);
}
/* A KERESÉS TALÁLATÁBAN kiemelt szó - saját tokenes szín, nem a böngésző
alap sárgája (az beégetett rendszerszín lenne, arculat nélkül). */
mark { background: var(--arany-halk); color: inherit; border-radius: 3px; padding: 0 2px; }
/* --- kézikönyv: táblázat, alcím, kép, link --- */
/* A PARTNER NELKULI LISTASOR OSSZEKOTOJE. A kereso a NEV CELLABAN nyilik
ki, nem kulon ablakban: a sor helyben marad, es latszik, MELYIKROL van szo.
A felso koz elvalasztja a nevtol. */
.sor-koto { margin-top: 8px; min-width: 220px; }
.kk-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.kk-tabla th {
text-align: left; font-weight: 700; padding: 8px 12px 8px 0;
border-bottom: 1px solid var(--vonal); white-space: nowrap;
}
.kk-tabla td {
padding: 8px 12px 8px 0; border-top: 1px solid var(--vonal);
vertical-align: top;
}
/* AZ ELSO OSZLOP A KERDES (problema, fogalom), a tobbi a valasz - ezert
kap hangsulyt es nem torik szet. */
.kk-tabla td:first-child { font-weight: 500; white-space: nowrap; }
/* A `###`-bol lett alcim: felkover sor, nem cimsor. Sajat terkoz, hogy a
bekezdesektol elvaljon, de a szakaszcimnel halkabb maradjon. */
.kk-alcim { margin: 18px 0 6px; }
.kk-kep {
display: block; max-width: 100%; height: auto; margin: 14px 0;
border: 1px solid var(--vonal); border-radius: var(--iv-kozep);
}
.kk-link { color: var(--arany-sotet); text-decoration: underline; }
.kk-link:hover { color: var(--tinta); }