/*
 * Hergroup-ON alkalmazás-váz -- SZERKEZET, nem arculat (a színek/betűk innen a
 * brand.css tokenjeit használják, nem újat definiálnak). Cél: "rendszer, nem egy
 * lap" -- állandó bal sáv, ragadós felső sáv, teljes szélességű tartalmi terület.
 * (6962bde3, alkalmazás-váz kör, 2026-09-15 -- store/briefs/hergroup-on-alkalmazas-vaz.md)
 */

html, body { height: 100%; }
body { margin: 0; overflow: hidden; }

.shell {
  display: grid;
  grid-template-columns: 68px 236px 1fr;
  height: 100vh;
}

/* ---------- keskeny ikon-sáv (bal szélen) ---------- */
.icon-rail {
  background: var(--hg-keret);
  border-right: 1px solid var(--surface-3);
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;  /* 126096ae: as the module menu below -- the padding inside the 100vh (was 30 px over) */
  overflow-y: auto;
  padding: 14px 6px 16px;
}
.icon-rail .side-logo { padding: 2px 0 14px; text-align: center; }
/* b44e6864: the mark alone, the rail's width with a small margin (rail 68 px - 2 x 6 px padding = 56 px) */
.icon-rail .side-logo img { width: 52px; height: auto; display: inline-block; }
.icon-nav { display: flex; flex-direction: column; gap: 4px; align-items: center; }

/* Verziószám-jelvény (b4caf959) -- a bal sáv ALJÁRA tolva (margin-top:auto a
   .icon-rail flex-column szülőben), diszkrét, nem a tartalom elé tolakodó. */
.version-badge {
  margin-top: auto; padding-top: 10px; text-align: center; font-size: 9px;
  color: var(--text-mid); line-height: 1.5; cursor: default;
}
.version-badge .vb-env { text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.version-badge .vb-ver { font-family: monospace; }
.icon-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 100%; padding: 8px 2px; border-radius: 6px;
  text-decoration: none; color: var(--text-mid); cursor: default;
}
/* ed395df1 / Péter 2639: "amelyik ablak épp nyitva van az más színnel jelenjen meg a sávon, a
   monday.com-on látszik hogy kék színt kap, amire az egeret viszem az pedig maradhat szürke" --
   the open item (module, menu entry, tab) light blue (the brand navy's light tint), the hovered
   one light grey, the rest without a background. */
:root { --hg-aktiv-hatter: #E3EDF8;
  /* 9fbb5a0c: the theme tokens (core/temak.py) -- the defaults are the light theme, i.e. what was here before */
  --hg-lap-hatter: var(--d-hatter); --hg-keret: var(--surface-white);
  --hg-kiemel: var(--brand-navy); --hg-kiemel-szoveg: #fff; --hg-aktiv-szoveg: var(--brand-navy);
  /* 9443f5e2: a FILLED control (a primary button, a pressed chip, a label) -- the theme's dark colour with white text;
     the Sötét theme, whose --brand-navy is a light text colour, sets its own pair */
  --hg-tele: var(--brand-navy); --hg-tele-szoveg: #fff; }
.icon-item.active { color: var(--hg-aktiv-szoveg); cursor: pointer; background: var(--hg-aktiv-hatter); }
/* 975c09be, Péter 4659: "ha ráviszem az egeret [...] kiemeli egy kerettel és háttérszínnel" -- the module menu's own
   hover (.mm-item:hover): the light grey fill and the #C9CED6 border, drawn inside (no layout shift); the open module
   keeps its blue fill and gets the border too, so the two stay apart. Keyboard focus the same. Not on the "terv" items. */
a.icon-item { cursor: pointer; }
a.icon-item:hover, a.icon-item:focus-visible { background: var(--surface-1, #f5f6f8); color: var(--text-dark);
  box-shadow: inset 0 0 0 1px #C9CED6; outline: none; }
a.icon-item.active:hover, a.icon-item.active:focus-visible { background: var(--hg-aktiv-hatter); color: var(--hg-aktiv-szoveg); }
/* 975c09be: the module menu hidden / shown again (desktop; the phone keeps its drawer). The .shell is a fixed grid
   (68px 236px 1fr): the hidden menu's column goes too, else .main would fall into the 236 px one (7f56e2e1). */
.mm-rejto, .mm-nyito { border: 1px solid var(--surface-3); background: var(--surface-white); color: var(--text-mid);
  border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1; padding: 4px 7px; }
.mm-rejto:hover, .mm-nyito:hover, .mm-rejto:focus-visible, .mm-nyito:focus-visible { background: var(--surface-1, #f5f6f8);
  color: var(--text-dark); border-color: #C9CED6; }
.module-menu { position: relative; }
.mm-rejto { position: absolute; top: 12px; right: 10px; z-index: 1; }
.mm-nyito { display: none; margin: 8px auto 0; }
@media (min-width: 761px) {
  html.mm-rejtve .module-menu { display: none; }
  html.mm-rejtve .shell { grid-template-columns: 68px 1fr; }
  html.mm-rejtve .mm-nyito { display: block; }
}
@media (max-width: 760px) { .mm-rejto { display: none; } }
.icon-item .icon-badge {
  width: 26px; height: 26px; border-radius: 7px; background: var(--surface-1, #eef0f2);
  color: var(--text-mid); font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center;
}
.icon-item.active .icon-badge { background: var(--hg-kiemel); color: var(--hg-kiemel-szoveg); }
.icon-item .icon-label { font-size: 9px; text-align: center; line-height: 1.15; }
.icon-item.nincs-epitve { opacity: .55; }

/* ---------- modul-menü sáv (a kiválasztott modul tartalma) ---------- */
.module-menu {
  background: var(--hg-keret);
  border-right: 1px solid var(--surface-3);
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* 126096ae, Péter (Telegram 3520): "oldalsó sávban nem tudok teljesen legörgetni nem látszik az alja" -- measured:
     100vh + the 2 x 16 px padding made the box 32 px taller than the window (752 at 720), so its last 32 px stayed
     under the window's bottom edge; the padding goes inside the height */
  box-sizing: border-box;
  overflow-y: auto;
  padding: 16px 12px;
}
.mm-head { margin-bottom: 10px; }
.mm-line { font-family: "Oswald", sans-serif; font-size: 15px; color: var(--text-dark); }
.mm-sub { font-size: 11px; color: var(--text-mid); margin-top: 1px; }
.mm-board {
  font-size: 12.5px; color: var(--text-dark); font-weight: 600;
  padding: 8px 10px; margin-bottom: 12px; background: var(--hg-aktiv-hatter); color: var(--hg-aktiv-szoveg); border-radius: 6px;  /* Péter 2639: the open project, blue */
}
/* ed395df1, Péter 2652/2655: the open projects as windows -- one group each, the tabs indented with a faint
   vertical line (brand tint on the active project, grey on the others); the active title blue (2639). */
.pa-lista { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.pa-fej { display: flex; align-items: center; gap: 2px; border-radius: 6px; padding: 2px 2px 2px 0; }
.pa-nyil, .pa-x { background: none; border: 0; cursor: pointer; color: var(--text-mid); font-size: 12px;
  width: 20px; height: 24px; padding: 0; flex: none; border-radius: 4px; }
.pa-nyil:disabled { cursor: default; opacity: .5; }
.pa-x { font-size: 15px; line-height: 1; }
.pa-nyil:not(:disabled):hover, .pa-x:hover { color: var(--text-dark); background: rgba(0, 0, 0, .06); }
.pa-cim { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px;
  font-weight: 600; color: var(--text-dark); text-decoration: none; padding: 6px 2px; }
/* 18b85d9a, Péter 2936: "az oldalso savban a fuggoleges vonal nem kell" -- the indent stays, the line is gone */
.pa-fulek { margin: 4px 0 0 10px; padding-left: 6px; }
.mm-item[hidden] { display: none; }  /* 18b85d9a: an offer's 04-14 tabs (views._sections_context) */
.mm-item.mm-alpont { margin-left: 16px; }  /* 5bbdd5a6: Beszerzés / Logisztika under Projektek */
/* cccc4b30: a menu item with collapsible sub-items -- the open project's ▾ / ▸ at the front, inside the item's own
   bubble (beside it, the bubble came out shorter than the others: measured on the picture) */
.mm-fej { position: relative; }
.mm-fej > .mm-item { padding-left: 24px; }
.mm-fej > .mm-nyil { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); z-index: 1; }
.mm-alcsoport[hidden] { display: none; }
/* 91fdd0b0, Péter 2873: "A megnyitott projekt cimsoranak mas szine legyen mint a megnyitott lapnak" -- the open
   project's title row is a header (the table headers' navy, white text), the open tab stays light blue. Péter 2876:
   "mindegyik menupontnak, es projektnek is alapbol legyen valamilyen buborek kerete halvany kitoltessel" -- every
   item of the column is a bubble: rounded frame, faint fill; hover grey, the open tab light blue. */
.pa-fej { border: 1px solid var(--surface-3, #e1e4e8); background: #FAFBFC; padding: 1px 2px 1px 0; }
.pa-fej:hover { background: var(--surface-1, #f5f6f8); border-color: #C9CED6; }
.pa-aktiv > .pa-fej, .pa-aktiv > .pa-fej:hover { background: var(--hg-kiemel); border-color: var(--hg-kiemel); }
.pa-aktiv .pa-cim { color: var(--hg-kiemel-szoveg); }
.pa-aktiv .pa-nyil, .pa-aktiv .pa-x { color: color-mix(in srgb, var(--hg-kiemel-szoveg) 85%, transparent); }
.pa-aktiv .pa-nyil:not(:disabled):hover, .pa-aktiv .pa-x:hover { color: var(--hg-kiemel-szoveg); background: color-mix(in srgb, var(--hg-kiemel-szoveg) 15%, transparent); }
.mm-section-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-mid);
  font-weight: 700; padding: 0 4px 6px;
}
.mm-nav { display: flex; flex-direction: column; gap: 4px; }  /* 91fdd0b0: bubbles need air between them */
.mm-item {
  display: flex; align-items: center; padding: 6px 9px; border-radius: 6px;
  border: 1px solid var(--surface-3, #e1e4e8); background: #FAFBFC;  /* 91fdd0b0, Péter 2876: a bubble, faint fill */
  font-size: 12.5px; color: var(--text-mid); text-decoration: none;
}
.mm-item:hover { background: var(--surface-1, #f5f6f8); color: var(--text-dark); border-color: #C9CED6; }
/* 76beb949, Péter 3374: the tab card's progress (the tab's own %, core/lap_csik.py). 9963e060, Péter 3609: "Úgy csináld a
   csíkokat hogy a teljes kártyát töltse ki, ne csak a kártya alján legyen egy vékony csík" -- the fill is the card's whole
   face, left to right by the %, UNDER the label (the card is its own stacking context, the fill sits at z-index -1: above
   the card's background, below its text). Complete = a deeper green and a green border; the open tab keeps its navy
   border, bold label and a navy bar on its left edge, as the fill covers its background. */
.mm-item { position: relative; overflow: hidden; isolation: isolate; }
.mm-item .lap-csik { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mm-item .lap-csik > i { display: block; height: 100%; background: #D4EFE4; }
.mm-item .lap-csik.lap-csik-kesz > i { background: #B4E3CE; }
.mm-item:has(.lap-csik-kesz) { border-color: #5DB896; }
/* an inset box-shadow is painted with the background, i.e. under the fill (measured: hidden at 6.7%) -- a positioned bar */
.mm-item[aria-current="page"]:has(.lap-csik)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--hg-kiemel); pointer-events: none; }
/* 90533f30: the Projektek row is a button (it only opens its group) -- the same look as the links */
button.mm-item { width: 100%; box-sizing: border-box; font-family: inherit; cursor: pointer; text-align: left; }
.mm-item[aria-current="page"], .mm-item[aria-current="page"]:hover { background: var(--hg-aktiv-hatter); color: var(--hg-aktiv-szoveg); font-weight: 700;
  border-color: color-mix(in srgb, var(--hg-aktiv-szoveg) 35%, transparent); }
.mm-item .cnt { margin-left: auto; font-size: 10px; color: var(--text-mid); }
/* 6c1b284e -- a nyitott feladat-szám ELTÉRŐ színt kap (a többi szekció
   "összes sor" jelentésétől megkülönböztetve). Csak akkor alkalmazódik, ha
   VAN nyitott (count_kiemelt + count is not None) -- nulla nyitottnál a
   sablon ezt az osztályt nem is teszi ki, tehát nincs szín, nincs szám. */
.mm-item.mm-item-nyitott { color: #8A6300; font-weight: 600; }
.mm-item.mm-item-nyitott:hover { background: #FEF7E3; color: #6B5300; }
.mm-item .cnt.cnt-nyitott {
  background: #FEF7E3; color: #6B5300; border: 1px solid #F0DFA0;
  border-radius: 10px; padding: 1px 6px; font-weight: 700;
}

.pill {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 700;
}
/* Szemantikus pill-színek -- SZÁNDÉKOSAN nem a márkazöld, hogy egy státusz-jelzés
   sose keveredjen a márkaszínnel (ugyanaz az elv, mint a rács ütközés-jelzésénél). */
.pill.idle  { background: #EDEFEE; color: #606060; }
.pill.progress { background: #E3F2FD; color: #0B4A8B; }
.pill.warn  { background: #FEF7E3; color: #8A6300; }
.pill.ok    { background: #DCF1EF; color: #1F6B57; }
/* 4652c091, 2026-09-21: a "Szerz. típusa" (contract_type) HÁROM csoportja --
   a gazda képén látott hármas logika (Alapszerződés kiemelt / Költség
   figyelmeztető / Pótmunka semleges) ÁTVÉVE, az árnyalatok a SAJÁT
   palettánkból (a Sheets chip-színei az XLSX-ből nem olvashatók ki, l. a
   kártya-komment). A "Pótmunka NN" a MEGLÉVŐ `.pill.idle`-t kapja (fent),
   nem önálló osztályt -- a brief saját javaslata, mert pontosan ugyanaz a
   jelentés (semleges, egységes). `--brand-navy` és a `.data-table
   td.elt-nagy`-nál MÁR használt erős vörös (#C0121C, szekcio_felmeres.html)
   -- konzisztens a meglévő palettával, nem új szín kitalálva. */
.pill.szerz-alap { background: var(--hg-tele); color: var(--hg-tele-szoveg); }
.pill.szerz-koltseg { background: #C0121C; color: #fff; }

/* ---------- jobb oldal ---------- */
.main { min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px; min-height: 52px;
  background: var(--hg-keret); border-bottom: 1px solid var(--surface-3);
  flex: none;
}
/* 9fbb5a0c: the crumb is gone from the top bar (Péter 3732) */

.global-search { position: relative; width: 260px; }
.global-search .gs-input {
  width: 100%; box-sizing: border-box; padding: 6px 10px; font-size: 12.5px;
  border: 1px solid var(--surface-3); border-radius: 4px; font-family: inherit;
  color: var(--text-dark); background: var(--surface-white);
}
.global-search .gs-input:focus { outline: none; border-color: var(--brand-navy); }
.global-search .gs-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--surface-white); border: 1px solid var(--surface-3); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); max-height: 260px; overflow-y: auto;
}
.global-search .gs-result {
  display: block; padding: 7px 10px; font-size: 12.5px; color: var(--text-dark);
  text-decoration: none; border-bottom: 1px solid var(--surface-3);
}
.global-search .gs-result:last-child { border-bottom: none; }
.global-search .gs-result:hover { background: var(--surface-1, #f5f6f8); }
.global-search .gs-empty { padding: 7px 10px; font-size: 12px; color: var(--text-mid); }

/* Projekteken átívelő kereső (351f5509) -- a fenti .global-search KÜLÖN widgetje,
   a projekten belüli gyorskereső mellett, nem helyette. */
.global-search-all { position: relative; }
.gk-btn {
  background: none; border: 1px solid var(--surface-3); border-radius: 4px;
  padding: 5px 9px; cursor: pointer; font-size: 14px; line-height: 1;
}
.gk-btn:hover { border-color: var(--brand-navy); }
.gk-panel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 41; width: 360px;
  background: var(--surface-white); border: 1px solid var(--surface-3); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); padding: 8px;
}
.gk-input {
  width: 100%; box-sizing: border-box; padding: 6px 10px; font-size: 12.5px;
  border: 1px solid var(--surface-3); border-radius: 4px; font-family: inherit;
  color: var(--text-dark); background: var(--surface-white);
}
.gk-input:focus { outline: none; border-color: var(--brand-navy); }
.gk-error { margin-top: 6px; padding: 7px 10px; font-size: 12px; color: #a33; background: #fdf2f2; border-radius: 4px; }
.gk-results { margin-top: 6px; max-height: 320px; overflow-y: auto; }
.gk-result {
  display: block; padding: 7px 10px; font-size: 12px; color: var(--text-dark);
  text-decoration: none; border-bottom: 1px solid var(--surface-3);
}
.gk-result:last-child { border-bottom: none; }
.gk-result:hover { background: var(--surface-1, #f5f6f8); }
.gk-r-top { font-size: 12.5px; }
.gk-r-bottom { font-size: 11px; color: var(--text-mid); margin-top: 2px; }
.gk-empty { padding: 7px 10px; font-size: 12px; color: var(--text-mid); }

/* Összetett szűrő (438c8d0d) -- a gk-panel alján, kinyitható. */
.gk-adv-toggle {
  display: block; width: 100%; text-align: left; margin-top: 8px; padding: 5px 4px;
  background: none; border: none; border-top: 1px solid var(--surface-3);
  color: var(--text-mid); font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.gk-adv { margin-top: 6px; }
.gk-adv-row { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; }
.gk-adv-row select {
  font-size: 12px; padding: 4px; border: 1px solid var(--surface-3); border-radius: 4px;
  font-family: inherit; flex: 0 0 auto;
}
.gk-adv-row input {
  font-size: 12px; padding: 4px 6px; border: 1px solid var(--surface-3); border-radius: 4px;
  font-family: inherit; flex: 1 1 auto; min-width: 0;
}
.gk-adv-row button {
  border: none; background: none; color: var(--text-mid); cursor: pointer; font-size: 14px;
  padding: 0 4px; flex: 0 0 auto;
}
.gk-adv-btns { display: flex; gap: 6px; margin-top: 4px; }
.gk-adv-btns button {
  border: 1px solid var(--surface-3); background: var(--surface-white); border-radius: 4px;
  padding: 5px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.gk-adv-btns button:hover { border-color: var(--brand-navy); }

.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text-dark); }
.topbar .who form { margin: 0; }
/* 9fbb5a0c, Péter (Telegram 3732, his monday picture 3727): the right side -- bell, help, the module grid, the profile;
   the undo / redo icons on the left */
.topbar .sav-jobb { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topbar .sav-jobb form { margin: 0; }
.sav-ikon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: none; color: var(--brand-navy); cursor: pointer; text-decoration: none; }
.sav-ikon:hover, .sav-ikon[aria-expanded="true"] { background: var(--d-hatter, #F3F4F8); }
.sav-ikon svg { width: 19px; height: 19px; }
.sav-profil { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--hg-kiemel); color: var(--hg-kiemel-szoveg);
  font: 700 12.5px/1 inherit; font-family: inherit; letter-spacing: .02em; cursor: pointer; margin-left: 4px; }
.sav-profil:hover, .sav-profil[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--d-keret, #E6E8EE); }
/* 3e7ddbd2, Péter 4405: a profile picture in place of the monogram -- the header's button and every avatar
   (core/templatetags/hg_avatar.py: the place keeps its own size class; the picture fills its round box) */
.sav-profil-kep { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.van-kep { overflow: hidden; padding: 0 !important; background: var(--surface-3, #E6E8EE) !important; }
.van-kep > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* the upload control (_profilkep_vezerlo.html): the avatar large, the buttons beside it */
.pk-vezerlo { display: flex; align-items: center; gap: 14px; }
.pk-gombok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pk-avatar, .pk-avatar-kicsi { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
  color: #fff; font-weight: 700; }
.pk-avatar { width: 64px; height: 64px; font-size: 22px; }
.pk-avatar-kicsi { width: 32px; height: 32px; font-size: 12px; }
.pk-avatar.av0, .pk-avatar-kicsi.av0 { background: #1F6B57; } .pk-avatar.av1, .pk-avatar-kicsi.av1 { background: #0086C0; }
.pk-avatar.av2, .pk-avatar-kicsi.av2 { background: #A25DDC; } .pk-avatar.av3, .pk-avatar-kicsi.av3 { background: #E2445C; }
.pk-avatar.av4, .pk-avatar-kicsi.av4 { background: #FDAB3D; } .pk-avatar.av5, .pk-avatar-kicsi.av5 { background: #037F4C; }
.pk-avatar.av6, .pk-avatar-kicsi.av6 { background: #579BFC; } .pk-avatar.av7, .pk-avatar-kicsi.av7 { background: #784BD1; }
.pk-allapot { font-size: 12.5px; color: var(--text-mid); }
.pk-cella .pk-vezerlo { gap: 8px; }
.pk-cella .pk-gombok { flex-wrap: nowrap; gap: 4px; white-space: nowrap; }
.pk-cella .pk-gombok button { padding: 3px 9px; font-size: 12px; }
.pk-cella .pk-allapot:empty { display: none; }
.pk-allapot.hiba { color: var(--d-hiba, #C42B1C); }
.sav-lenyilo { position: relative; }
.sav-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; min-width: 220px; padding: 8px;
  background: var(--surface-white); border: 1px solid var(--d-keret, #E6E8EE); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 46, 94, .16); }
.sav-panel[hidden] { display: none; }
.sav-panel-cim { padding: 6px 10px 8px; font-weight: 700; font-size: 13px; color: var(--text-dark); }
.sav-panel-cim small { display: block; font-weight: 400; color: var(--text-mid); font-size: 11.5px; margin-top: 2px; }
.sav-modulok { width: 300px; }
.sav-modul-racs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.sav-modul { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; font-size: 12.5px;
  color: var(--text-dark); text-decoration: none; }
a.sav-modul:hover { background: var(--d-hatter, #F3F4F8); }
.sav-modul .icon-badge { width: 28px; height: 28px; border-radius: 8px; background: var(--hg-kiemel); color: var(--hg-kiemel-szoveg);
  font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.sav-modul.nincs-epitve { color: var(--text-mid); cursor: default; }
.sav-modul.nincs-epitve .icon-badge { background: var(--surface-1, #eef0f2); color: var(--text-mid); }
.sav-modul-nev { min-width: 0; line-height: 1.2; }
.sav-modul small { display: block; font-size: 10.5px; color: var(--text-mid); }
.sav-menupont { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: 13px; color: var(--text-dark); text-decoration: none; cursor: pointer; }
.sav-menupont:hover { background: var(--d-hatter, #F3F4F8); }
.sav-menupont.sav-alpont { padding-left: 22px; font-size: 12.5px; }  /* 975c09be: the admin pages under Beállítások */
.hg-globalis-vissza .hg-vissza-ikon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--brand-navy); }
.hg-globalis-vissza .hg-vissza-ikon:not(:disabled):hover { background: var(--d-hatter, #F3F4F8); }
.hg-globalis-vissza .hg-vissza-ikon:disabled { opacity: .35; }
.hg-globalis-vissza .hg-vissza-ikon svg { width: 19px; height: 19px; }
/* 9fbb5a0c, Péter (Telegram 3732): "Keress bármire..." -- one field, the filter built in (hg-felso-sav.js) */
.hg-kereso { position: relative; flex: 0 1 460px; min-width: 200px; margin: 0 auto; }
.hg-kereso-mezo { width: 100%; box-sizing: border-box; height: 38px; padding: 0 44px 0 38px; border: 1px solid var(--d-keret, #E6E8EE);
  border-radius: 999px; background: var(--d-hatter, #F3F4F8); font: inherit; font-size: 13.5px; color: var(--text-dark); }
.hg-kereso-mezo:focus { outline: none; border-color: var(--brand-navy); background: var(--surface-white); }
.hg-kereso-nagyito { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--text-mid); pointer-events: none; }
.hg-kereso-szuro-gomb { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--brand-navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hg-kereso-szuro-gomb:hover, .hg-kereso-szuro-gomb[aria-expanded="true"] { background: var(--d-keret, #E6E8EE); }
.hg-kereso-szuro-gomb svg { width: 17px; height: 17px; }
.hg-kereso-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 46; max-height: min(70vh, 560px); overflow-y: auto;
  padding: 8px; background: var(--surface-white); border: 1px solid var(--d-keret, #E6E8EE); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 46, 94, .16); }
.hg-kereso-panel[hidden] { display: none; }
.hg-kereso-cim { padding: 6px 8px 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mid); }
.hg-kereso-cim small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hg-kereso-csoport + .hg-kereso-csoport, .hg-kereso-szuro + #hg-kereso-talalatok:not(:empty) { border-top: 1px solid var(--d-keret, #E6E8EE); margin-top: 6px; padding-top: 4px; }
.hg-kereso-talalat { display: block; padding: 7px 8px; border-radius: 8px; color: var(--text-dark); text-decoration: none; font-size: 13px; }
.hg-kereso-talalat:hover { background: var(--d-hatter, #F3F4F8); }
.hg-kereso-al { font-size: 11.5px; color: var(--text-mid); margin-top: 2px; }
.hg-kereso-ures { padding: 6px 8px; font-size: 12.5px; color: var(--text-mid); }
.hg-kereso-szuro-sor { display: flex; gap: 6px; padding: 3px 8px; }
.hg-kereso-szuro-sor select, .hg-kereso-szuro-sor input { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--d-keret, #E6E8EE); border-radius: 8px; }
.hg-kereso-szuro-sor input { flex: 1; min-width: 0; }
.hg-kereso-szuro-x { border: 0; background: none; color: #C42B1C; font-size: 16px; cursor: pointer; padding: 0 6px; }
.hg-kereso-szuro-gombok { display: flex; gap: 8px; padding: 6px 8px 4px; }
/* the bar is outside .content, so the new-look button rule does not reach these two: the same pill, Szűrés filled */
.hg-kereso-szuro-gombok button { border-radius: 999px; background: var(--d-kartya, #fff); border: 1px solid var(--d-keret, #E6E8EE); color: var(--brand-navy);
  padding: 5px 14px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.hg-kereso-szuro-gombok button:hover { border-color: var(--brand-navy); }
#hg-kereso-szuro-futtat { background: var(--hg-kiemel); border-color: var(--hg-kiemel); color: var(--hg-kiemel-szoveg); }
.topbar .who button {
  background: none; border: 1px solid var(--surface-3); border-radius: 4px;
  padding: 5px 10px; cursor: pointer; font-size: 11px; text-transform: uppercase;
  letter-spacing: .02em; color: var(--text-dark); font-family: inherit;
}
.topbar .who button:hover { border-color: var(--brand-navy); }

/* Tipográfiai lépcső 2. foka: a tartalmi terület saját szekció-címe -- kisebb, mint a
   projektnév, de még mindig Oswald, a `.section-title` zöld-vonal motívumával. */
.content .section-title { font-size: 14px; margin: 0 0 16px; }

/* Levegő -- a gazda "Excel-érzésnek" nevezte a szoros elrendezést. A tartalmi terület
   külső margója itt nőtt 18/20px-ről 26/28px-re. */
.content { flex: 1; min-height: 0; overflow: auto; padding: 26px 28px; }
/* A rács-lap MAGA kezeli a görgetését (Tabulator belső scroll, hogy a fejléc/azonosító
   oszlop ragadjon) -- itt a külső .content görgetése csak duplikálná azt. */
.content.content-grid { display: flex; flex-direction: column; overflow: hidden; }

/* A rács kártyában ül (fehér felület, keret, árnyék, lekerekített sarok), és a kártya
   ott ér véget, ahol az adat -- nem tölti ki a maradék képernyőt (a Tabulator saját
   `maxHeight` opciója, nem `height`, lásd tetelsorok.html). Tabulator SAJÁT szürke
   kerete/háttere (`.tabulator{background:#888;border:1px solid #999}`, a vendorolt
   tabulator.min.css-ből mérve) itt le van véve, hogy ne legyen dupla keret. */
.grid-card {
  background: var(--surface-white);
  border: 1px solid var(--surface-3);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,46,94,.06), 0 8px 20px -14px rgba(0,46,94,.22);
  overflow: hidden;
}
.grid-card .tabulator { background: transparent; border: none; font-family: inherit; }

/* A rács súgója -- a `fx` magyarázat ÚJ helye: vékony sáv a kártya tetején, a
   KIJELÖLT cellához kötve (JS: cellClick/cellEditing), NEM a lap fejlécében teljes
   szélességben, ahogy korábban állt (ez volt a képen a legnagyobb zajforrás). */
.grid-helpbar {
  font-size: 11.5px; color: var(--text-mid);
  padding: 8px 14px; border-bottom: 1px solid var(--surface-3);
  background: var(--surface-1);
  min-height: 14px;
}

/* ---------- oszlopcsoport-kapcsolók (chip) ---------- */
.csop-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  border: 1px solid var(--surface-3); background: var(--surface-white);
  border-radius: 100px; padding: 4px 12px; font-size: 11.5px; cursor: pointer;
  color: var(--text-mid); font-family: inherit;
}
.chip[aria-pressed="true"] { border-color: var(--brand-navy); color: var(--brand-navy); font-weight: 700; }
.chip:disabled { opacity: .45; cursor: default; }
.chip.chip-preset { background: var(--surface-1); font-weight: 600; }
.chipsep { width: 1px; align-self: stretch; background: var(--surface-3); margin: 0 2px; }

/* ---------- üres-állapot (a kilenc meg nem épített szekció) ---------- */
.ures-allapot {
  border: 1px dashed var(--surface-3); border-radius: 6px;
  padding: 48px 24px; text-align: center; color: var(--text-mid);
  max-width: 480px; margin: 40px auto;
}
.ures-allapot .cim { font-family: "Oswald", sans-serif; text-transform: uppercase;
  letter-spacing: .02em; color: var(--text-dark); font-size: 15px; margin-bottom: 8px; }
.ures-allapot .le { font-size: 13px; line-height: 1.5; }

/* ---------- adat-táblázat (szekció-feltöltés kör, 2026-09-16) ---------- */
/* A `.grid-card`-ot (fehér felület, keret, árnyék) plain <table>-höz is használjuk --
   nem Tabulator-specifikus, csak a keretezés közös. */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; padding: 10px 14px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-mid); border-bottom: 1px solid var(--surface-3);
  background: var(--surface-1);
}
.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--surface-3); color: var(--text-dark); }
.data-table tbody tr:last-child td { border-bottom: none; }
.empty-list-note { padding: 18px 14px; color: var(--text-mid); font-size: 13px; text-align: center; }

/* c7423648, 2026-09-17: LÁTHATÓ, TARTÓS figyelmeztetés hiányzó árfolyamra --
   a gazda kifejezett kérése: ne egy eltűnő üzenet legyen. Megosztott a
   02_Kalkuláció/03_Eredménykimutatás/10_Szerződés lapok között. */
.arfolyam-figyelmezteto { background: #fdeceb; border: 1px solid #e0a080; border-radius: 6px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; color: #b23; }

/* Szerkeszthető cellák egy .data-table-ben (6c1b284e, 11_Feladatok) --
   ugyanaz a bemeneti stílus, mint a .kv-grid-é, hogy a lap egységesnek
   hasson a rendszer többi részével. */
.data-table input[type="text"], .data-table input[type="date"], .data-table select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--surface-3); border-radius: 4px;
  padding: 5px 7px; font: inherit; font-size: 12.5px; color: var(--text-dark);
  background: var(--surface-white);
}
.data-table input:focus, .data-table select:focus { outline: none; border-color: var(--brand-navy); }

/* ac2ed93c, 2026-09-23: oszlopszélesség-állítás ÁLTALÁNOSAN, MINDEN
   `.data-table`-en -- l. `_shell.html` a JS-ért (`autoOszlopSzelessegInit`).
   Ugyanaz a vizuális minta, mint a KÉT korábbi, kézzel épített helyen
   (11_Alvállalkozói szerződések `.alv-oszlop-fogantyu`, 05_Felmérések
   `.felm-oszlop-fogantyu`) -- azok VÁLTOZATLANOK maradtak, ez egy ÚJ,
   megosztott osztálynév, hogy a kettő ne ütközzön. */
table.auto-oszlop-fix { table-layout: fixed; }
/* fa3b5af5, 2026-09-23: SZÁNDÉKOS CSERE -- a korábbi nowrap+ellipsis
   (egysoros, levágott szöveg) helyett SORTÖRÉS, Google Sheets-mintára
   ("ha csökkentem az oszlop szélességet, a tartalom törjön sorba"). Az
   ellipszis-viselkedés EMIATT megszűnik -- ez a gazda kifejezett kérése,
   nem regresszió. `<input>`/`<select>` mezőket ez NEM érinti (azok a
   böngésző natív korlátja miatt sosem törnek sorba, l. a szkript
   docstringje) -- a `td` sortörés a SIMA SZÖVEGES celláknál látszik.
   `overflow-wrap: anywhere` -- nem csak szóközöknél tör, mert néhány
   mezőnk (pl. azonosítók) hosszú, szóköz nélküli karakterlánc lehet. */
table.auto-oszlop-fix th { position: relative; white-space: normal; overflow-wrap: anywhere; }
table.auto-oszlop-fix td { white-space: normal; overflow-wrap: anywhere; }
/* 8db996d1: a table marked `data-szohataron` (the Felmérés block and archive) breaks between words
   only, like the Felmérés table: the script keeps every column at least its longest word wide,
   so a word breaks only past 320px; a hyphenated word is one `.hg-nowrap` piece. */
table.auto-oszlop-fix[data-szohataron] th, table.auto-oszlop-fix[data-szohataron] td { overflow-wrap: break-word; }
.hg-nowrap { white-space: nowrap; }
.auto-oszlop-fogantyu { position: absolute; top: 0; right: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 2; }
.auto-oszlop-fogantyu:hover, .auto-oszlop-fogantyu.aktiv { background: var(--brand-navy); opacity: .5; }
/* fa3b5af5: sor-magasság fogantyú -- a `tbody` minden sorának ELSŐ celláján,
   a sor ALSÓ szélén, vízszintes húzó csík (ugyanaz a vizuális minta, mint
   az oszlop-fogantyú, csak `row-resize` kurzorral és a cella ALJÁN). */
.auto-sormagassag-fogantyu { position: absolute; left: 0; right: 0; bottom: -3px; height: 6px;
  cursor: row-resize; z-index: 2; }
.auto-sormagassag-fogantyu:hover, .auto-sormagassag-fogantyu.aktiv { background: var(--brand-navy); opacity: .5; }

/* Felelős-választó jelölőnégyzet-lista (6c1b284e) -- a korábbi <select multiple>
   olvashatatlan volt (görgetni kellett 3 opcióhoz is); ez sima checkbox-lista,
   nincs hozzá új könyvtár. */
.felelos-lista { display: flex; flex-direction: column; gap: 3px; }
.felelos-lista label {
  display: flex; align-items: center; gap: 5px; font-size: 12.5px;
  color: var(--text-dark); white-space: nowrap; cursor: pointer;
}

.subhead {
  font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .02em;
  font-size: 11.5px; font-weight: 700; color: var(--brand-navy);
  margin: 22px 0 8px; padding: 0 2px;
}
.subhead:first-child { margin-top: 0; }

/* ---------- kulcs-érték rács (adatlap) ---------- */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; }
.kv-grid .kv { padding: 12px 16px; border-bottom: 1px solid var(--surface-3); border-right: 1px solid var(--surface-3); }
.kv-grid .kv .k { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-mid); margin-bottom: 3px; }
.kv-grid .kv .v { font-size: 14px; color: var(--text-dark); }
/* a61b4570, 2026-09-21 13:54/13:57/14:11-es gazdai kérés ("az alapadatok
   egymás alá kerüljenek"): MÓDOSÍTÓ osztály, NEM a `.kv-grid` alapszabály
   módosítva -- azt a `.kv-grid` HAT sablonban él (mérve), a gazda kérése
   viszont csak a 00_Projekt/01_Dokumentum/10_Vállalkozói szerződés lapok
   "alapadat" blokkjára vonatkozott. Az utolsó `.kv` jobb szegélyét is el
   kell venni, különben egyoszlopos elrendezésben egy felesleges függőleges
   vonal maradna a jobb szélen (a `border-right` a `.kv-grid .kv` szabályból
   örökölt, itt nem releváns, ha nincs szomszéd oszlop). */
.kv-grid-egyoszlopos { grid-template-columns: 1fr; }
.kv-grid-egyoszlopos .kv { border-right: none; }
/* 1a896d04, Péter (Telegram 2735): "00,01,04 lapokon is húzd összébb a sor szélességeket ugyanúgy mint
   ahogy az eredménykimutatás lapon" -- the one-column data blocks of the 00 / 01 / 04: label on the left,
   its value or field right next to it, the block at most 640 px wide (the Eredménykimutatás is 480-720).
   edb2d0fc (Péter 2747): the 02 Árfolyam block and the 10 summary too. */
.kv-grid.kv-grid-sorok { max-width: 640px; }
.kv-grid-sorok .kv { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 8px 16px; }
.kv-grid-sorok .kv .k { margin-bottom: 0; }

/* ---------- napló-lista (előzmények) ---------- */
.log-row { display: flex; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--surface-3); font-size: 12.5px; align-items: baseline; }
.log-row:last-child { border-bottom: none; }
.log-row .idopont { color: var(--text-mid); font-size: 11px; white-space: nowrap; width: 130px; flex: none; }
.log-row .ki { color: var(--brand-navy); font-weight: 600; width: 110px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-row .entitas { color: var(--text-mid); width: 140px; flex: none; }
.log-row .valtozas { color: var(--text-dark); }
.log-row .valtozas .mezo { color: var(--text-mid); }
.log-row .valtozas .regi { text-decoration: line-through; color: #b23; }
.log-row .valtozas .uj { color: #1F6B57; font-weight: 600; }

/* ---------- projekt-fejléc (fül-független, 6962bde3, 2026-09-16) ---------- */
.project-header { flex: none; padding: 18px 28px 16px; background: var(--surface-white); border-bottom: 1px solid var(--surface-3); }
.ph-title { font-family: "Oswald", sans-serif; text-transform: uppercase; font-weight: 700;
  font-size: 22px; letter-spacing: .02em; color: var(--text-dark); margin: 0 0 6px; }
.ph-sub { font-size: 12.5px; color: var(--text-mid); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ph-sub .dot { color: var(--surface-3); }
.ph-metrics { display: flex; flex-wrap: wrap; border: 1px solid var(--surface-3); border-radius: 6px; overflow: hidden; }
.ph-metric { flex: 1 1 130px; min-width: 130px; padding: 8px 14px; border-right: 1px solid var(--surface-3); border-bottom: 1px solid var(--surface-3); }
.ph-metric:last-child { border-right: none; }
.ph-metric.empty { background: var(--surface-1); }
.ph-metric .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-mid); }
.ph-metric .v { font-family: "Oswald", sans-serif; font-size: 15px; color: var(--text-dark); margin-top: 2px; }
.ph-metric .v.na { color: var(--text-mid); font-family: inherit; font-size: 12px; font-weight: 400; cursor: help; }
.ph-metric .v a { color: var(--brand-navy); text-underline-offset: 3px; }  /* 45e9444d: the "Lezárt, átvezetve ide" tile */

.ph-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* 42214a4c: the collapse switch left of the title; collapsed (html.ph-csukva, set in the <head>) only the top row stays */
.ph-cim-sor { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ph-csuko { flex: none; width: 28px; height: 28px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--surface-3);
  background: var(--surface-white); color: var(--brand-navy); font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.ph-csuko:hover { background: var(--surface-1); }
html.ph-csukva #ph-reszletek { display: none; }
html.ph-csukva .ph-csuko { transform: rotate(-90deg); }
.uj-megjelenes .ph-csuko { box-shadow: none; }
.ph-top .ph-title { margin: 0; }
.ph-actions { flex: none; }
.ph-close-btn {
  background: var(--hg-tele); color: var(--hg-tele-szoveg); border: none; border-radius: 4px;
  padding: 8px 16px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.ph-close-btn:hover { opacity: .9; }

/* ---------- részfolyamat-idővonal (a32a6903, 2026-09-16; legördülő: 5bfe8e4d) ---------- */
.ph-timeline { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; }
.ph-seg {
  flex: 1 1 0; min-width: 110px; padding: 7px 10px; border-radius: 6px;
  border: 1px solid var(--surface-3); font: inherit; text-align: left; cursor: pointer;
}
.ph-seg-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.ph-seg-felelos { font-size: 11px; margin-top: 2px; }
.ph-seg-progress { font-family: "Oswald", sans-serif; font-size: 13px; margin-top: 3px; }
.ph-seg-lezart { background: var(--surface-1, #eef0f2); color: var(--text-mid); }
.ph-seg-lezart .ph-seg-label { color: var(--text-mid); }
.ph-seg-aktualis { background: #E3F2FD; border-color: #0B4A8B; color: #0B4A8B; }
.ph-seg-aktualis .ph-seg-label { color: #0B4A8B; }
.ph-seg-hatralevo { background: var(--surface-white); color: var(--text-mid); }
.ph-seg-hatralevo .ph-seg-label { color: var(--text-dark); }
.ph-seg:hover { border-color: var(--brand-navy); }

/* Legördülő panel -- NEM modális, az idővonal ALATT nyílik (5bfe8e4d), és
   CSAK AKKORA, amekkora a tartalma (c86a083b, 2026-09-16 -- a gazda: "ne
   legyen feleslegesen teljes oldalszélesség"). `width: fit-content` +
   `max-width: 100%` (a SAJÁT konténeréhez, nem egy kitalált px-szám) --
   MÉRVE (saját render-mérő eszköz, 66c40a47, 2026-09-16): egy fix 560px
   felső korlát ÖNMAGA okozott volna pont olyan hibát, mint amit javítunk --
   a "Garancia" fázis leghosszabb lépésneve (pl. "Garanciális feladatokhoz
   kapcsolódó szállítások kezelése") a táblát 660px szélesre kényszerítette,
   ami a fix korlát ALATT vízszintes görgetést igényelt volna, holott a
   panelnek MÉG BŐVEN lett volna helye a sávon belül. `max-width: 100%` a
   tartalomhoz igazodik felfelé IS, nem csak lefelé, és a JS-es klemmelés
   (l. _shell.html) gondoskodik róla, hogy a sáv jobb szélén túl se nőjön.
   `overflow-x: auto` csak végső biztosíték egy nagyon keskeny nézeten. */
.ph-timeline-panel {
  margin-top: 10px; border: 1px solid var(--surface-3); border-radius: 6px;
  background: var(--surface-white); max-height: 360px; overflow-y: auto;
  width: fit-content; max-width: 100%; overflow-x: auto;
}
/* LÁTHATÓ görgetősáv (marveen visszamérése a screenshotról, 2026-09-16): a
   `max-height` + `overflow-y: auto` a Garancia-panel utolsó sorát (48.) félbe
   vágva mutatta, LÁTHATÓ görgetőcsík NÉLKÜL -- headless Chromiumban (és sok
   asztali környezetben) az alap görgetősáv keskeny "overlay" stílusú, csak
   hover/görgetés közben látszik, tehát a képen simán "elveszett tartalomnak"
   nézett ki, nem "görgess lejjebb"-nek. Ez a szabály mindig látható, vékony
   sávot kényszerít ki -- a max-height marad (egy 11 soros fázisnál, pl.
   Kivitelezés, a panel így sem nő a teljes lap magasságáig), csak a jelzés
   lesz észrevehető. */
.ph-timeline-panel { scrollbar-width: thin; }
.ph-timeline-panel::-webkit-scrollbar { width: 9px; height: 9px; }
.ph-timeline-panel::-webkit-scrollbar-track { background: transparent; }
.ph-timeline-panel::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 5px; }
.ph-timeline-panel::-webkit-scrollbar-thumb:hover { background: var(--text-mid); }
.ph-panel-table { width: auto; }
.ph-panel-table th, .ph-panel-table td { white-space: nowrap; }
.ph-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--surface-3); background: var(--surface-1);
}
.ph-panel-title { font-family: "Oswald", sans-serif; font-size: 14px; color: var(--text-dark); text-transform: uppercase; }
.ph-panel-felelos { font-size: 12px; color: var(--text-mid); display: flex; align-items: center; gap: 6px; }
.ph-panel-felelos select { font-size: 12px; padding: 4px 6px; border: 1px solid var(--surface-3); border-radius: 4px; }
.ph-panel-table td.seq { color: var(--text-mid); font-size: 11px; width: 30px; }
.ph-panel-table select {
  border: 1px solid var(--surface-3); border-radius: 4px; padding: 4px 6px;
  font: inherit; font-size: 12px; color: var(--text-dark); background: var(--surface-white);
}
select.just-saved, input.just-saved, textarea.just-saved { background: #DCF1EF; transition: background 1s; }

/* Szerkeszthető kv-mezők -- eredetileg csak a 00_Projekt-en (msg 866), most
   megosztva, mert a 01_Dokumentum is kapott ilyet (c86a083b, 2026-09-16). */
.kv-grid .v input, .kv-grid .v select, .kv-grid .v textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--surface-3); border-radius: 4px;
  padding: 5px 7px; font: inherit; font-size: 12.5px; color: var(--text-dark);
  background: var(--surface-white);
}
.kv-grid .v textarea { resize: vertical; min-height: 44px; }
.kv-grid .v input:focus, .kv-grid .v select:focus, .kv-grid .v textarea:focus { outline: none; border-color: var(--brand-navy); }
.kv-grid .v .ro { color: var(--text-mid); cursor: default; }

/* ---------- értesítés-harang (a32a6903, 2026-09-16) ---------- */
.notif-bell { position: relative; }
.notif-bell-btn {
  position: relative; background: none; border: 1px solid var(--surface-3); border-radius: 4px;
  padding: 5px 10px; cursor: pointer; font-size: 14px; color: var(--text-dark); font-family: inherit;
}
.notif-bell-btn:hover { border-color: var(--brand-navy); }
.notif-bell-btn.sav-ikon { border: 0; border-radius: 50%; padding: 0; }  /* 9fbb5a0c: an icon as the others on the right */
.uj-megjelenes .notif-bell-btn.sav-ikon { border-radius: 50%; }
.notif-count {
  position: absolute; top: -6px; right: -6px; background: #C0121C; color: #fff;
  border-radius: 100px; font-size: 10px; font-weight: 700; padding: 1px 5px; line-height: 1.3;
}
.notif-list {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; width: 300px;
  background: var(--surface-white); border: 1px solid var(--surface-3); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); max-height: 360px; overflow-y: auto;
}
.notif-item { padding: 9px 12px; border-bottom: 1px solid var(--surface-3); font-size: 12px; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: #E3F2FD; }
.notif-subject { font-weight: 600; color: var(--text-dark); }
.notif-body { color: var(--text-mid); margin-top: 2px; }
.notif-meta { color: var(--text-mid); font-size: 10.5px; margin-top: 4px; }
.notif-meta button { background: none; border: none; color: var(--brand-navy); cursor: pointer; font-size: 10.5px; padding: 0; text-decoration: underline; }
.notif-empty { padding: 12px; color: var(--text-mid); font-size: 12px; text-align: center; }

/* 7c34d9cd, 2026-09-24: rács-nagyítás vezérlő ([−] [NN%] [+]), a
   `racs-nagyitas.js` építi fel. Minden Tabulator-os tételsor-rácson közös. */
.racs-nagyitas { display: inline-flex; align-items: stretch; border: 1px solid var(--surface-3);
  border-radius: 4px; background: var(--surface-white); overflow: hidden; }
.racs-nagyitas button { border: none; background: none; font-family: inherit; font-size: 12px;
  cursor: pointer; padding: 5px 10px; color: var(--text-dark); }
.racs-nagyitas .racs-nagyitas-ertek { min-width: 50px; border-left: 1px solid var(--surface-3);
  border-right: 1px solid var(--surface-3); font-variant-numeric: tabular-nums; }
.racs-nagyitas button:hover:not(:disabled) { background: var(--surface-1); color: var(--brand-navy); }
.racs-nagyitas button:disabled { opacity: .35; cursor: default; }
/* the page's top-right corner: grid zoom (+ Teljes képernyő on the grids); from tetelsorok.html,
   5512fc42: shared with the Felmérés */
.racs-sarok { position: absolute; top: 0; right: 28px; z-index: 3;
  display: flex; align-items: center; gap: 8px; height: 26px; }
.racs-sarok .teljeskepernyo-gomb, .racs-sarok .racs-nagyitas button { padding-top: 3px; padding-bottom: 3px; }

/* Teljes képernyő mode -- moved here from tetelsorok.html by 3cbff551 (Péter, Telegram 3141: the 07, 10, 11, 12 get it
   too); the button and its JS: _teljeskepernyo_gomb.html + teljeskepernyo.js. */
/* 7f56e2e1, 2026-09-18: teljes képernyős mód -- a bal sáv (icon-rail +
   module-menu) és a fejléc-blokkok (topbar + project-header) elrejtése,
   hogy a rácsnak több hely jusson.
   MÉRVE, ELSŐ PRÓBÁLKOZÁSRA HIBÁSAN: a `.shell` NEM flexbox, hanem CSS
   GRID, FIX oszlop-szélességgel (`grid-template-columns: 68px 236px 1fr`,
   app-shell.css). A `.main`-en NINCS explicit `grid-column`, tehát
   implicit auto-placement dönti el, melyik oszlopba kerül -- ha az első
   két gyerek (icon-rail, module-menu) `display:none`-t kap, az auto-
   placement a `.main`-t az ELSŐ (68px-es!) oszlopba tenné, nem a
   harmadikba. Élesben mérve: a rács egy 68px-es, hasznavehetetlenül
   keskeny sávba szorult. A javítás a `.shell` saját oszlop-sablonját
   írja át EGY oszlopra, nem az egyes gyerek-elemeket bújtatja -- így a
   `.main` implicit auto-placement-je a MARADÉK (egyetlen) oszlopba esik,
   ami a teljes szélességet kapja. */
/* a33875e8, Péter (Telegram 2667): "a legfelső fejléc meg kellene maradjon akkor is ha teljes
   képernyőre rakom ... így tudom abból a nézetből is a visszavonás gombot használni" -- the
   .topbar (Visszavonás / Újra, search, bell) stays; the rest is hidden as before. */
body.teljeskepernyo-04 .icon-rail,
body.teljeskepernyo-04 .module-menu,
body.teljeskepernyo-04 .project-header {
  display: none !important;
}
body.teljeskepernyo-04 .shell {
  grid-template-columns: 1fr !important;
}
.teljeskepernyo-gomb {
  border: 1px solid var(--surface-3); background: var(--surface-white); color: var(--text-dark);
  border-radius: 4px; padding: 6px 10px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.teljeskepernyo-gomb:hover { border-color: var(--brand-navy); }
/* 3cbff551: a tab title with the button at its right end (10, 11, 12). A flex row, not the absolute .racs-sarok of the
   grids: the 11's and 12's titles are long, and at 390 px an absolute button sat on the title (measured); here it
   wraps under it instead. */
.lap-cim-sor { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; column-gap: 12px; }
.lap-cim-sor > .racs-sarok { position: static; }

/* ------------------------------------------------------------------------
   Sor-kiemelés egérrel, monday.com mintájára -- cea739d2, Péter, 2026-10-13
   (Telegram 2109, kép: docs/sor-hover-monday-peter-2026-10-13.jpg): halvány
   háttér + kék, lekerekített keret az egér alatti soron, a TELJES rendszerben.
   EGY token-pár, minden soros lista és rács ezt használja:
   - a `.data-table` táblák (projektlista, Kapcsolattartók, Legördülők,
     Feladatok, Felmérés, Költségek, 05/10/11 stb.), a hibajegy-lista sorai;
   - a Tabulator-rácsok (03, 06, 05);
   - 589627b5: a kulcs-érték sorok, a napló-sorok és az üzenőfal bejegyzései.
   A háttér félig ÁTTETSZŐ RÉTEG (`background-image`), nem háttérszín-csere:
   a csíkozás, a cellák állapot-színei és a kijelölt cella átlátszanak rajta.
   A keret `outline`, nem `border`: semmi nem mozdul el egy képpontot sem.
   ------------------------------------------------------------------------ */
:root {
  --sor-hover-reteg: rgba(29, 78, 137, .06);
  --sor-hover-keret: #3876CA;
  /* 012600c5, 2026-10-13, Péter (Telegram 2195): the 03 grid's Kalkuláció 1-4 blocks
     in the old Google Sheet's colours. Read from the Sheet's own XLSX export
     (01_ELŐKÉSZÍTÉS, xl/styles.xml fills, not from a photo): header = row 1 fill,
     body = the tinted (even) row, the other rows are white. */
  --kalk1-fejlec: #F46524; --kalk1-torzs: #FFE6DD;
  --kalk2-fejlec: #F7CB4D; --kalk2-torzs: #FEF8E3;
  --kalk3-fejlec: #26A69A; --kalk3-torzs: #DDF2F0;
  --kalk4-fejlec: #CCA677; --kalk4-torzs: #F8F2EB;
}
.data-table tbody tr:hover {
  outline: 1px solid var(--sor-hover-keret);
  outline-offset: -1px;
}
.data-table tbody tr:hover > td {
  background-image: linear-gradient(var(--sor-hover-reteg), var(--sor-hover-reteg)) !important;
}
/* 589627b5, 2026-10-13, Péter (Telegram 2136): "a 02 lapon a munkadíjnál jó,
   viszont az árfolyamnál nem". Not only tables are rows: every element that is
   drawn as stacked, separated rows gets the same highlight -- the key-value rows
   (`.kv`, the 00/01/02/05/10/Feladatok/Logisztika data blocks, Árfolyam), the
   change-log rows (`.log-row`, Előzmények) and the message-wall posts
   (`.uzenofal-sor`). Found by effect: the classes that draw the row separators. */
/* 68ab9945, Péter (Telegram 2165): "a partner adatbázison hiába viszem rá a sorokra
   ott nem működik még". There the company card is the row (133 of 197 have no
   contact table), and on Legördülő listák each collapsible technical list. A card
   is highlighted only while the pointer is NOT on one of its own table rows, so a
   contact row never shows two frames at once. */
.hib-sor:hover,
.kv-grid .kv:hover,
.log-row:hover,
.uzenofal-sor:hover,
.ceg:hover:not(:has(tbody tr:hover)),
details.muszaki:hover:not(:has(tbody tr:hover)) {
  outline: 1px solid var(--sor-hover-keret);
  outline-offset: -1px;
  background-image: linear-gradient(var(--sor-hover-reteg), var(--sor-hover-reteg));
}
/* Tabulator: a sorra egy átlátszó, kattintást átengedő réteg kerül (a rögzített,
   sticky oszlopok fölé is, z-index 11 felett). A csoport-fejléc (pótmunka-box) és
   az összesítő sor nem kap kiemelést. */
.tabulator-row:not(.tabulator-group):not(.tabulator-calcs):hover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  background: var(--sor-hover-reteg);
  border: 1px solid var(--sor-hover-keret);
  border-radius: 4px;
}

/* ffe3f477 / 30fb41cb: block title band over non-group columns (ALAPADATOK, KIVITEL) --
   drawn by `RacsSavCim.frissit` (racs-nagyitas.js), which copies the look of the grid's
   own group title into the --hg-sav-* variables. right:-1px covers the column borders
   inside the band so it reads as one; the last column of the block keeps its border. */
.tabulator .tabulator-header .tabulator-col.hg-sav { overflow: visible; }
.tabulator .tabulator-header .tabulator-col.hg-sav::before {
  content: ""; position: absolute; top: 0; left: 0; right: -1px; height: var(--hg-csoport-sav, 22px);
  background: var(--hg-sav-hatter, #e6e6e6); border-bottom: var(--hg-sav-vonal, 1px solid #aaa);
  box-sizing: border-box; z-index: 1; pointer-events: none;
}
.tabulator .tabulator-header .tabulator-col.hg-sav.hg-sav-utolso::before { right: 0; }
.tabulator .tabulator-header .tabulator-col.hg-sav-cim { z-index: 3; }
.tabulator .tabulator-header .tabulator-col.hg-sav-cim::after {
  content: attr(data-sav-cim); position: absolute; top: 0; left: 0; height: var(--hg-csoport-sav, 22px);
  display: flex; align-items: center; padding: var(--hg-sav-padding, 0 4px); white-space: nowrap;
  font-family: var(--hg-sav-font-family, inherit); font-weight: var(--hg-sav-font-weight, 700);
  font-size: var(--hg-sav-font-size, inherit); color: var(--hg-sav-szin, inherit);
  text-transform: var(--hg-sav-transform, none); letter-spacing: var(--hg-sav-betukoz, normal);
  z-index: 2; pointer-events: none;
}
/* The column's own title must sit BELOW the band. On the 03/06 the titles are already
   bottom-aligned; on the 05 (Tabulator default) they sit at the top and the band label
   covered them -- measured on the 05 screenshot after 45f16db. */
.tabulator .tabulator-header .tabulator-col.hg-sav > .tabulator-col-content { padding-top: calc(var(--hg-csoport-sav, 22px) + 2px) !important; }
/* 1f510a34, Péter (Telegram 2277): the band label needs `overflow: visible` on the column,
   but then a narrowed column let its own title and header filter paint over the neighbour
   (measured: Konsz. jel / Helyiség / Követelmény / Fal típusa on 03, + Kivitel on 06). The
   column's own content is clipped; only the band (::before/::after) may span. */
.tabulator .tabulator-header .tabulator-col.hg-sav > .tabulator-col-content { overflow: hidden; }

/* ---------- f17d8385: ONE table look everywhere (Péter, Telegram 2534/2536) ----------
   "tetszik a felmérés lapon a műszaki tartalom megjelenítése ... a fejléc két színből áll és
   középre van sorolva a felső sáv ... a cellákban is minden érték középre van rendezve
   függőlegesen és vízszintesen is" -- "mindenhol így kérem a táblázatokat".
   The Felmérés table is the pattern: a dark (navy) block band with white, centred titles over
   a light column header, and every cell centred both ways. Here once, for the plain HTML
   tables (.data-table) and the Tabulator grids (03/06/07/08, 04); the pages keep no copy.
   Exceptions, on purpose: the Kalkuláció 1-4 blocks keep their own header colours (their
   identity, Péter 2195), and long free text (textarea, a list of changes) stays left-aligned. */
/* 75a04d09, Péter (Telegram 3771 / 3773 / 3775, with his Sheet's picture): "a rácsokon ... lévő blokkok fejléce mind a
   képen látható színnel legyenek színezve ne a jelenlegi sötétkékkel" -- "és mindenhol a felső és alsó fejléc sor is
   ugyanezzel a színnel legyen". The picture's colour, measured to the pixel: #4DD0E1 (rgb 77,208,226, the Sheet's
   cyan). Both header rows of a two-row header (the band and the field names); the text colour is ONE variable
   (--tabla-sav-szoveg: white would be 1,84:1 on this cyan, the brand navy is 7,36:1 -- Péter 3862: "B", the navy). The Kalkuláció 1-4
   and Ajtószett blocks keep their own colours (pinned below). */
:root { --tabla-sav: #4DD0E1; --tabla-sav-szoveg: var(--brand-navy); --tabla-fej: var(--tabla-sav); --tabla-fej-szoveg: var(--tabla-sav-szoveg); }

/* plain HTML tables */
.data-table th, .data-table td { text-align: center; vertical-align: middle; }
.data-table thead tr:not(:last-child) th[colspan], .data-table th.tabla-sav, .data-table th.felm-blokk-fej {
  background: var(--tabla-sav); color: var(--tabla-sav-szoveg); text-align: center;
  font-family: "Oswald", sans-serif; font-size: 11.5px; letter-spacing: .03em; }
/* 75a04d09: a two-row header (a band row over the field names; a filter row -- hg-szuro's .hg-szuro-sor, the project
   list's own .szuro-sor -- does not count) -- every header cell of it in the header colour, bold; a one-row header
   stays as it was */
.data-table thead:has(> tr:not(.hg-szuro-sor):not(.szuro-sor) + tr:not(.hg-szuro-sor):not(.szuro-sor)) > tr:not(.hg-szuro-sor):not(.szuro-sor) > th {
  background: var(--tabla-fej); color: var(--tabla-fej-szoveg); font-weight: 700; }
/* the grids' sort arrows on the header colour: the vendor's #bbb / #666 vanish on it -- the header text colour, the
   unsorted one faint */
/* (:root: the vendor's stylesheet comes after this one on the grid pages, its rules have the same weight) */
:root .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow,
:root .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: color-mix(in srgb, var(--tabla-fej-szoveg) 40%, transparent); }

:root .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--tabla-fej-szoveg); }

:root .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-top-color: var(--tabla-fej-szoveg); }
.data-table td input:not([type=checkbox]):not([type=radio]):not([type=file]), .data-table td select {
  text-align: center; text-align-last: center; }
.data-table td textarea, .data-table td.tabla-balra, .data-table td .tabla-balra { text-align: left; }
/* c2a01145, Péter (Telegram 2685): "ez a tábla is szétcsúszott" -- a label / value table (the
   Eredménykimutatás) under the "every cell centred" rule of f17d8385: the label stood centred in a
   full-width column, ~800 px from its amount. A `tabla-kulcs-ertek` table: label left, amount right,
   as wide as its content (480-720 px). d292fd3e (Péter 2706): the section rows (one cell over both
   columns) are left-aligned too, in line with the label column (they are a last-child as well, hence
   the :not([colspan]) on the amount rule). */
.data-table.tabla-kulcs-ertek { width: auto; min-width: 480px; max-width: 720px; }
.data-table.tabla-kulcs-ertek td:first-child { text-align: left; }
.data-table.tabla-kulcs-ertek td:last-child:not([colspan]) { text-align: right; white-space: nowrap; padding-left: 32px; }
.data-table.tabla-kulcs-ertek td[colspan] { text-align: left; }

/* Tabulator grids: the group (block) header is the band, the column header the light row */
.tabulator .tabulator-header .tabulator-col-group > .tabulator-col-content { background: var(--tabla-sav); }
.tabulator .tabulator-header .tabulator-col-group > .tabulator-col-content .tabulator-col-title {
  color: var(--tabla-sav-szoveg); text-align: center;
  line-height: 1.35; overflow: visible; }  /* measured: an 11px box clipped "MÉRET" (accent, descent) */
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group) .tabulator-col-content { background: var(--tabla-fej); }
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group) .tabulator-col-title { text-align: center; }
/* 75a04d09: the Kalkuláció 1-4 blocks keep their text as it was (band white, column titles dark) whatever the header
   text colour is (their background is their own, tetelsorok.html) */
.tabulator .tabulator-header .tabulator-col-group:is(.hg-k1, .hg-k2, .hg-k3, .hg-k4) > .tabulator-col-content .tabulator-col-title { color: #fff; }
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group):is(.hg-k1, .hg-k2, .hg-k3, .hg-k4) .tabulator-col-content .tabulator-col-title { color: var(--text-dark); }
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group) .tabulator-col-content { justify-content: center; }
/* 084b4ecc, Péter (Telegram 3189): "03 lapon azonosító oszlop szélességét nem tudom állítani". MEASURED: a frozen
   column's resize handle is `position: sticky` with z-index 11 (the vendor's), the same as the frozen column after it,
   which comes later in the DOM and so paints over it -- elementFromPoint on the Kész, row-icon, Azonosító, Konsz. jel
   handles hit the next column's header, not the handle. One step above the frozen columns, only for those sticky
   handles (a scrolling column's handle stays as it was).
   1087238a: this rule had been put INSIDE the selector list of the cell rule below (ab09b8b), so every body cell got
   z-index 12 -- a scrolling cell painted over the frozen columns (elementFromPoint on a frozen cell hit the scrolled
   one) -- and the scrolling cells lost their centring. It stands on its own now. */
.tabulator .tabulator-headers > .tabulator-col-resize-handle[style*="sticky"] { z-index: 12; }
/* cells: centred both ways (Tabulator's own cell is an inline-block with the text at the top) */
.tabulator .tabulator-row .tabulator-cell,
.tabulator .tabulator-row .tabulator-cell.tabulator-frozen {  /* the vendor's frozen rule is as specific and later */
  display: inline-flex; align-items: center; justify-content: center; text-align: center; }
/* the band title of a non-group block (ALAPADATOK, KIVITEL -- `RacsSavCim`) centred over its
   whole band: the width of the band comes from `--hg-sav-szel` (racs-nagyitas.js) */
.tabulator .tabulator-header .tabulator-col.hg-sav-cim::after { width: var(--hg-sav-szel, auto); justify-content: center; box-sizing: border-box; }
/* 53fa2de1 follow-up: spanning the frozen edge, the title is drawn over the frozen column's edge line, which ran
   through its letters (measured on the live 02: "ALAPA|DATOK"). The band colour behind the title (not over the
   band's bottom line) keeps the line below the band only. */
.tabulator .tabulator-header .tabulator-col.hg-sav-cim::after {
  background: linear-gradient(var(--hg-sav-hatter, #e6e6e6), var(--hg-sav-hatter, #e6e6e6)) top / 100% calc(100% - 1px) no-repeat; }

/* ac85b06e: the 03's choice cell -- the value (wrapped) and the ▾ that opens the list -- shared by
   the grids (enumCellContent) and the Felmérés (hg-lista.js); moved here from tetelsorok.html.
   The value is centred (f17d8385), the arrow keeps its place at the right. */
.musz-listan-kivul { border-bottom: 2px dashed #b23 !important; }
.musz-enum-cella { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; }
.musz-enum-szoveg { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.musz-enum-nyil { flex: none; color: var(--text-mid); font-size: calc(10px * var(--rz, 1)); line-height: 1; cursor: pointer; padding: 2px; }
.musz-enum-nyil:hover { color: var(--brand-navy); }

/* ---------- e801e72d: readable headers; amounts right (Péter, Telegram 2566) ----------
   "valami miatt még mindig nehezebben lehet kiolvasni a fejléc szövegét mint a cellákban lévő
   szöveget" -- the column titles were 10px, uppercase, grey (#606060), pushed left by the ▾.
   Now: 12.5px (the cells are 13-14px), bold, normal case, the dark text colour (#363636), centred,
   wrapped instead of cut ("…"); the ▾ filter sits UNDER the title, full width. The band title
   13px. "kalkulációban az összegek maradjanak jobbra zártak, többi lehet középre": amount columns
   (.hg-penz on the grids, the computed amounts on the 02) right, everything else centred. */
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group) .tabulator-col-content .tabulator-col-title {
  font-size: calc(12.5px * var(--rz, 1)); font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--tabla-fej-szoveg); white-space: normal; overflow-wrap: normal; line-height: 1.25; text-align: center; }  /* 75a04d09: the header text colour */
/* 1581: the vendor pads a sortable title 25px on the RIGHT only (room for the ▲▼), so a centred
   title sat 5px from the left edge and 31px from the right ("balra állnak"). The ▲▼ is absolute,
   12px wide, 9px in from the column edge: 16px on BOTH sides keeps it clear and the text centred. */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:not(.tabulator-col-group) .tabulator-col-content .tabulator-col-title {
  padding-left: calc(16px * var(--rz, 1)); padding-right: calc(16px * var(--rz, 1)); }
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group) .tabulator-col-content {
  flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 3px; }
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group) .tabulator-col-content > .tabulator-col-title-holder { width: 100%; }
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group) .tabulator-col-content > .tabulator-header-filter { width: 100%; margin-top: 0; }
.tabulator .tabulator-header .tabulator-col.tabulator-col-group > .tabulator-col-content .tabulator-col-title {
  font-size: calc(13px * var(--rz, 1)); letter-spacing: .04em;
  /* 1581: uppercase Oswald puts the Á/Ó accent above the 1.35 line box, and the vendor title is
     overflow:hidden, so at 1x "KALKULÁCIÓ" read as "KALKULACIO". A taller line box keeps the accent. */
  line-height: 1.7; }
.tabulator .tabulator-row .tabulator-cell.hg-penz,
.tabulator .tabulator-calcs-holder .tabulator-cell.hg-penz { justify-content: flex-end; text-align: right; }
.data-table th {
  font-size: 12.5px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-dark); }
.data-table td[data-szamolt], .data-table td.tabla-penz { text-align: right; }

/* ---------- aa5a3142: the "↶ Visszavonás" / "↷ Újra" buttons (hg-visszavonas.js) ---------- */
.hg-vissza-gombok { display: inline-flex; gap: 6px; flex: none; }
.hg-vissza-btn { border: 1px solid var(--brand-navy); background: var(--surface-white); color: var(--brand-navy);
  border-radius: 4px; padding: 3px 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hg-vissza-btn:hover:not(:disabled) { background: var(--hg-tele); color: var(--hg-tele-szoveg); }
.hg-vissza-btn:disabled { opacity: .4; cursor: default; }

/* ---------- c4b058df: the "?" next to the project name -> this tab's knowledge-base chapter ---------- */
.ph-sugo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none;
  border: 1.5px solid var(--brand-navy); border-radius: 50%; color: var(--brand-navy); font-weight: 700; font-size: 13px;
  text-decoration: none; margin-left: 8px; }
.ph-sugo:hover { background: var(--hg-tele); color: var(--hg-tele-szoveg); }
/* bb45ea24: the global pair sits in the header, before the bell */
.hg-globalis-vissza { display: inline-flex; align-items: center; margin-right: 8px; }
.hg-globalis-vissza .hg-vissza-btn { font-size: 12px; padding: 4px 9px; }

/* ---------- d5c296ae: telefon (<= 760 px) ----------
   Péter 2889: "szukseg lenne egy telefonos applikaciora is". The common first step of a native app and an installable
   web app: the program usable on a phone. Everything below is inside the media query, so a desktop (1280/1600 px)
   gets no rule from it; the menu button is display:none there. Layout on a phone:
   - the icon rail + module menu are a drawer from the left (the menu button top-left, a shade behind it);
   - the topbar wraps (9fbb5a0c: no breadcrumb any more);
   - the whole right side (.main) scrolls: the project header scrolls away, the content area keeps a full-screen
     height with its own scrolling -- the 03-style grids size themselves to it (maxHeight "100%"), so they stay as on
     a desktop, wide and scrollable sideways (the brief: do not re-lay the grids). */
.menu-gomb { display: none; }
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .icon-rail, .module-menu { position: fixed; top: 0; bottom: 0; z-index: 70; transform: translateX(-100vw);
    transition: transform .22s ease; box-shadow: 4px 0 18px rgba(0, 46, 94, .18); }
  .icon-rail { left: 0; width: 68px; box-sizing: border-box; }
  .module-menu { left: 68px; width: min(260px, calc(100vw - 68px)); box-sizing: border-box; height: 100vh; overflow-y: auto; }
  html.menu-nyitva .icon-rail, html.menu-nyitva .module-menu { transform: none; }
  .menu-takaro { position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, .35); }
  .menu-takaro[hidden] { display: none; }
  .menu-gomb { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 6px; left: 6px;
    z-index: 65; width: 40px; height: 40px; padding: 0; border: 1px solid var(--surface-3); border-radius: 8px;
    background: var(--surface-white); color: var(--brand-navy); cursor: pointer; }
  .menu-gomb svg { width: 22px; height: 22px; }

  .main { height: 100vh; height: 100dvh; overflow-y: auto; display: block; }
  .topbar { flex-wrap: wrap; gap: 6px; padding: 6px 8px; min-height: 52px; }
  .topbar > :first-child { margin-left: 46px; min-height: 40px; }  /* room for the fixed menu button, on the first row only */
  .hg-globalis-vissza { margin-right: 0; }
  .hg-globalis-vissza .hg-vissza-btn { padding: 4px 7px; }
    .global-search, .hg-kereso { order: 10; flex: 1 1 100%; width: auto; margin: 0; }
  .topbar .sav-jobb { gap: 2px; }
  .gk-panel { width: min(360px, calc(100vw - 16px)); }
  .project-header { padding: 12px 12px 10px; }
  .ph-top { flex-wrap: wrap; }
  .ph-metric { flex: 1 1 40%; min-width: 0; padding: 6px 10px; }  /* two per row (content-box: + padding + border) */
  /* --tb-h: the sticky topbar's measured height (_bal_sav.html), so the content fills exactly the rest */
  .content { padding: 14px 10px; height: calc(100vh - var(--tb-h, 0px)); height: calc(100dvh - var(--tb-h, 0px)); box-sizing: border-box; }
  .main > .content:first-child { padding-top: 56px; }
}

/* ---------- c213d53c: the bubbly look (design-tervezet-2), rolled out by page group ----------
   Péter 2945 ("buborek szeru blokkok ... minden ablak sarka le van kerekitve"), 2958/2959 ("batrabb", "monday szerubb"),
   2971 ("Na ez mar jol nez ki de a tablazatok fejleceinek a szinet ne valtoztasd meg"). Rolled out by page group with the
   body class `uj-megjelenes` (rounds 1-4: the project pages; round 5: the rest). Now every page has it: _shell.html
   sets it by default (a new project page gets it too), the 7 standalone page templates set it on their own <body>.
   Only looks: no element or behaviour changes. Table headers (Tabulator group/column headers, <th>) keep their colour,
   and the controls inside grids and table headers keep their shape. Tokens: brand.css. Text on teal/coral is navy. */
body.uj-megjelenes { background: var(--hg-lap-hatter); }
.uj-megjelenes .topbar { border-bottom: 0; box-shadow: 0 1px 0 var(--d-keret); }
.uj-megjelenes .global-search .gs-input { border-radius: var(--r-pirula); border: 1px solid var(--d-keret); background: var(--d-hatter); padding: 9px 16px; }
.uj-megjelenes .gk-btn, .uj-megjelenes .notif-bell-btn, .uj-megjelenes .topbar .who button,
.uj-megjelenes .hg-globalis-vissza .hg-vissza-btn:not(.hg-vissza-ikon) { border-radius: var(--r-pirula); }

.uj-megjelenes .project-header { margin: 20px 28px 0; border: 0; border-radius: var(--r-kartya); box-shadow: var(--d-arnyek); padding: 24px 28px 20px; }
.uj-megjelenes .ph-title { font-size: 30px; letter-spacing: .01em; }
.uj-megjelenes .ph-metrics { border: 0; border-radius: 0; overflow: visible; gap: 10px; }
/* Péter 2977: "A buborek szelei ne legyenek ilyen szinesek hanem sima legyen" -- one-colour bubbles, no coloured edges */
.uj-megjelenes .ph-metric { border: 0; border-radius: var(--r-kis); background: var(--d-fej); padding: 10px 16px; }
.uj-megjelenes .ph-metric.empty { background: var(--d-hatter); }
.uj-megjelenes .ph-metric .v:not(.na) { font-size: 17px; }  /* the "— nincs adat" placeholder keeps its small style */
.uj-megjelenes .ph-timeline { gap: 8px; }
.uj-megjelenes .ph-seg { border-radius: var(--r-pirula); border: 0; background: var(--d-fej); box-shadow: inset 0 0 0 1px var(--d-keret); }
.uj-megjelenes .ph-seg-aktualis, .uj-megjelenes .ph-seg-aktualis .ph-seg-label, .uj-megjelenes .ph-seg-aktualis .ph-seg-felelos,
.uj-megjelenes .ph-seg-aktualis .ph-seg-progress { background: var(--d-turkiz); color: #002E5E; box-shadow: none; }  /* 9443f5e2: navy on the turquoise in every theme (= --brand-navy of Világos) */
.uj-megjelenes .ph-seg-aktualis .ph-seg-label, .uj-megjelenes .ph-seg-aktualis .ph-seg-felelos, .uj-megjelenes .ph-seg-aktualis .ph-seg-progress { background: none; }
.uj-megjelenes .ph-seg-lezart { background: var(--d-turkiz-h); }

/* cards: no border, a soft shadow, rounder; no coloured stripes or edges (Péter 2971: table headers; 2977: plain bubbles) */
.uj-megjelenes .content { padding: 28px; }
.uj-megjelenes .grid-card, .uj-megjelenes .doc-upload, .uj-megjelenes .ures-allapot { border: 0; border-radius: var(--r-kartya); box-shadow: var(--d-arnyek); background: var(--d-kartya); }
/* round 3, measured on live (11): a card that scrolls sideways ITSELF has its scrollbar on its bottom edge -- a 22 px
   corner would cut up to ~22 px off the bar's ends (today's 8 px: ~4 px). Those cards, and cards whose last child is a
   sideways scroller, keep today's 8 px bottom corners. */
.uj-megjelenes .grid-card.alv-gorgeto,
.uj-megjelenes .grid-card:has(> :is(.alv12-doboz, .felm-mod-gorgeto, .alv-gorgeto, [style*="overflow-x"]):last-child) {
  border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.uj-megjelenes .content .section-title { font-size: 20px; }
/* the project list's metric cards keep their 4 px meaning edge from before the redesign (green / dark green / red /
   yellow, coloured by projekt_lista.html's own .m-* rules) -- marveen 1781: an existing visible element stays unless
   Péter names it; his 2977 photo was of the project header's bubbles */
.uj-megjelenes .mutato { border: 0; border-left: 4px solid var(--surface-3); border-radius: var(--r-kartya); box-shadow: var(--d-arnyek); padding: 18px 22px; }
.uj-megjelenes .mutato .v { font-size: 30px; }
.uj-megjelenes .data-table td { padding-top: 13px; padding-bottom: 13px; border-bottom-color: #EEF0F4; }
.uj-megjelenes .data-table tbody tr:hover td { background: #F8FAFC; }
.uj-megjelenes .kv-grid .kv { border-color: #EEF0F4; }

/* controls: pills -- not inside the grids and not in table headers */
.uj-megjelenes .content button:not(.tabulator button):not(th button):not(.ph-seg):not(.racs-nagyitas-gomb):not(.racs-nagyitas-ertek) { border-radius: var(--r-pirula); }
.uj-megjelenes .content button:not([class]):not(.tabulator button):not(th button) { background: var(--d-kartya); border: 1px solid var(--d-keret);
  color: var(--brand-navy); padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--d-arnyek-kicsi); }
/* round 2: buttons in table rows (e.g. the 03 Verziók: Véglegesít / Visszatölt / Törlés) -- the same calm look, smaller;
   an inline colour (Törlés's red) still wins */
.uj-megjelenes .content td button:not(.tabulator button) { background: var(--d-kartya); border: 1px solid var(--d-keret); color: var(--brand-navy);
  padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: var(--d-arnyek-kicsi); }
.uj-megjelenes .content td button:not(.tabulator button):hover:not(:disabled) { border-color: var(--brand-navy); }
.uj-megjelenes .content button:not([class]):not(.tabulator button):not(th button):disabled { color: #A0A8B8; background: var(--d-hatter); box-shadow: none; cursor: default; }
.uj-megjelenes .content :is(select, input[type=text], input[type=date], input[type=url], input[type=number], input[type=search]):not(.tabulator *):not(th *) {
  border-radius: var(--r-pirula); border: 1px solid var(--d-keret); padding-left: 14px; padding-right: 14px; background-color: var(--d-kartya); }  /* 9443f5e2: the token (#fff in Világos) */
.uj-megjelenes .content textarea:not(.tabulator *) { border-radius: var(--r-kis); border: 1px solid var(--d-keret); }
.uj-megjelenes .content :is(select, input, textarea):not(.tabulator *):not(th *):focus { outline: 3px solid var(--d-turkiz-h); border-color: var(--d-turkiz); }
.uj-megjelenes .chip { border-radius: var(--r-pirula); border: 0; background: var(--d-kartya); box-shadow: inset 0 0 0 1px var(--d-keret); padding: 7px 16px; }
.uj-megjelenes .chip[aria-pressed="true"] { background: var(--hg-tele); color: var(--hg-tele-szoveg); box-shadow: none; }
.uj-megjelenes .chip.chip-preset { background: var(--d-lila-h); color: var(--d-lila); box-shadow: none; }
.uj-megjelenes .racs-sarok, .uj-megjelenes .racs-nagyitas, .uj-megjelenes .teljeskepernyo-gomb { border-radius: var(--r-pirula); }
.uj-megjelenes .pill { border-radius: var(--r-pirula); padding: 4px 12px; font-weight: 700; }
.uj-megjelenes .pill.idle { background: var(--d-semleges); color: #fff; }
.uj-megjelenes .pill.progress { background: var(--d-info); color: #fff; }
.uj-megjelenes .pill.warn { background: var(--d-figy); color: #fff; }
.uj-megjelenes .pill.ok { background: var(--d-ok); color: #fff; }
@media (max-width: 760px) {
  .uj-megjelenes .project-header { margin: 12px 10px 0; padding: 16px 14px; }
  .uj-megjelenes .ph-title { font-size: 22px; }
  .uj-megjelenes .ph-metric { flex: 1 1 30%; padding: 8px 10px; }  /* two per row: the padding is outside the basis */
  .uj-megjelenes .content { padding: 14px 10px; }
  .uj-megjelenes .main > .content:first-child { padding-top: 56px; }
  /* d5c296ae: iOS Safari zooms the page into a form field under 16 px when it gets the focus (measured: the 12's and
     the 06's fields were 12.5-13.3 px). The grids' editors keep their own size (a grid cell is its own layout). */
  .content input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .content select, .content textarea,
  .hib-form-lebego input, .hib-form-lebego select, .hib-form-lebego textarea { font-size: 16px !important; }
  /* !important: the pages' own field sizes (06 table 12.5 px, the 12's form 13 px) are more specific */
  .content .tabulator input, .content .tabulator select, .content .tabulator textarea { font-size: inherit !important; }
}

/* ------------------------------------------------------------------------
   9fbb5a0c, Péter (Telegram 3732): "különböző megjelenítés témákat ... a hátteret tudja változtatni, valamint a
   megjelenítendő színeket" -- the user's theme (core/temak.py) on <html data-hg-tema>. A theme sets the FRAME only, as
   monday's colour themes: the page background, the two side bars, the top bar and the highlight colour (the tokens at
   the top of this file, whose defaults are the light theme). The cards and the grids keep their colours in every theme.
   ------------------------------------------------------------------------ */
html[data-hg-tema="smaragd"] { --hg-lap-hatter: #E2F0EA; --hg-keret: #F4FAF7; --hg-kiemel: #0D6B52; --hg-aktiv-hatter: #D2ECE1; --hg-aktiv-szoveg: #0D6B52; }
html[data-hg-tema="egkek"]   { --hg-lap-hatter: #E2EBF6; --hg-keret: #F5F8FC; --hg-kiemel: #1D5AA0; --hg-aktiv-hatter: #D5E3F5; --hg-aktiv-szoveg: #1D5AA0; }
html[data-hg-tema="szilva"]  { --hg-lap-hatter: #EEE6ED; --hg-keret: #FBF7FA; --hg-kiemel: #804B75; --hg-aktiv-hatter: #EFDFEB; --hg-aktiv-szoveg: #6E3F64; }

/* Éjjel: a dark frame, the work area stays light. Inside the frame the text and surface tokens are re-set, so what is
   built on them (menus, the search field, the drop-down panels of the top bar) turns dark by itself; the frame's fixed
   colours (the menu bubbles, the tab progress fill, the open-task count) get a dark pair here. */
html[data-hg-tema="ejjel"] { --hg-lap-hatter: #E6EAF0; --hg-keret: #13213A; --hg-kiemel: #5AC0A0; --hg-kiemel-szoveg: #002E5E;
  --hg-aktiv-hatter: #1F3B4A; --hg-aktiv-szoveg: #8FE3C8; }
html[data-hg-tema="ejjel"] :is(.icon-rail, .module-menu, .topbar) {
  --text-dark: #E7ECF3; --text-mid: #AEB9C9; --brand-navy: #E7ECF3;
  --surface-white: #13213A; --surface-1: #1C2C47; --surface-3: #2D4060;
  --d-hatter: #1C2C47; --d-keret: #2D4060; --d-kartya: #13213A; color-scheme: dark; }
html[data-hg-tema="ejjel"] .topbar { box-shadow: none; }
html[data-hg-tema="ejjel"] :is(.mm-item, :not(.pa-aktiv) > .pa-fej) { background: #182640; }
html[data-hg-tema="ejjel"] :is(.mm-item, :not(.pa-aktiv) > .pa-fej):hover { border-color: #3E5478; }
html[data-hg-tema="ejjel"] .pa-nyil:not(:disabled):hover, html[data-hg-tema="ejjel"] .pa-x:hover { background: rgba(255, 255, 255, .08); }
html[data-hg-tema="ejjel"] .mm-item .lap-csik > i { background: #1E4A43; }
html[data-hg-tema="ejjel"] .mm-item .lap-csik.lap-csik-kesz > i { background: #23604F; }
html[data-hg-tema="ejjel"] .mm-item:has(.lap-csik-kesz) { border-color: #3E9C7C; }
html[data-hg-tema="ejjel"] .mm-item.mm-item-nyitott { color: #F2C14E; }
html[data-hg-tema="ejjel"] .mm-item.mm-item-nyitott:hover { background: #3A3220; color: #F7D98A; }
html[data-hg-tema="ejjel"] .notif-item.unread { background: #1F3350; }
html[data-hg-tema="ejjel"] .hg-kereso-mezo::placeholder { color: var(--text-mid); }

/* ------------------------------------------------------------------------
   9443f5e2, Péter (Telegram 3810): "teljesen sötét munkaterületet is szeretnék, illetve az egyes témáknál ne csak a
   hátteret változtassa hanem a gombokat betűket stb-t is. a rácson belüli színezések minden esetben maradjanak az alap
   beállítás szerintiek, az soha ne változzon."
   1. Every theme also sets the work area's tokens: the text, the headings / buttons / links (--brand-navy), the borders,
      the light surfaces (the blocks' headers, the fields). The blocks stay white in the light themes.
   2. Sötét: the frame as Éjjel, and the work area dark too (dark blocks, light text, light buttons).
   3. The grids (Tabulator), the tables (.data-table) and their own pop-ups (the list editor, the filter list) get the
      light theme's tokens back (brand.css :root, the same values -- core.tests pins them), their text colour and an
      opaque light background, so what they show is the light theme's in every theme. Világos is not touched by any of it.
   ------------------------------------------------------------------------ */
html[data-hg-tema="smaragd"] { --brand-navy: #0B5A45; --text-dark: #22352E; --text-mid: #4B5F56; --text-light: #33473F;
  --surface-1: #EDF5F0; --surface-2: #EDF5F0; --surface-3: #D3E6DB; --d-keret: #D3E6DB; --d-fej: #EEF7F2; }
html[data-hg-tema="egkek"] { --brand-navy: #174C8A; --text-dark: #22303F; --text-mid: #4B5A6D; --text-light: #334255;
  --surface-1: #EDF2F9; --surface-2: #EDF2F9; --surface-3: #D4E0EF; --d-keret: #D4E0EF; --d-fej: #EFF4FA; }
html[data-hg-tema="szilva"] { --brand-navy: #6E3F64; --text-dark: #35293A; --text-mid: #625560; --text-light: #4A3C47;
  --surface-1: #F5EDF3; --surface-2: #F5EDF3; --surface-3: #E6D6E2; --d-keret: #E6D6E2; --d-fej: #F8F1F6; }
html[data-hg-tema="ejjel"] { --brand-navy: #13213A; --text-dark: #26303F; --text-mid: #536072; --text-light: #3A4558;
  --surface-1: #EDF0F5; --surface-2: #EDF0F5; --surface-3: #D7DEE8; --d-keret: #D7DEE8; --d-fej: #EEF1F6; }

html[data-hg-tema="sotet"] { --hg-lap-hatter: #0E1726; --hg-keret: #13213A; --hg-kiemel: #5AC0A0; --hg-kiemel-szoveg: #002E5E;
  --hg-aktiv-hatter: #1F3B4A; --hg-aktiv-szoveg: #8FE3C8;
  --text-dark: #E7ECF3; --text-mid: #AEB9C9; --text-light: #C9D2DE; --brand-navy: #DCE6F2;
  --surface-white: #16223A; --surface-1: #1D2B46; --surface-2: #1D2B46; --surface-3: #2D4060;
  --d-hatter: #0E1726; --d-kartya: #16223A; --d-keret: #2D4060; --d-fej: #1B2942; color-scheme: dark; }
html[data-hg-tema="sotet"] { --hg-tele: #5AC0A0; --hg-tele-szoveg: #0B1F2E; }
/* the frame: the Éjjel rules (above) with the same colours */
html[data-hg-tema="sotet"] :is(.icon-rail, .module-menu, .topbar) { --surface-white: #13213A; --d-kartya: #13213A; }
html[data-hg-tema="sotet"] .topbar { box-shadow: none; }
html[data-hg-tema="sotet"] :is(.mm-item, :not(.pa-aktiv) > .pa-fej) { background: #182640; }
html[data-hg-tema="sotet"] :is(.mm-item, :not(.pa-aktiv) > .pa-fej):hover { border-color: #3E5478; }
html[data-hg-tema="sotet"] .pa-nyil:not(:disabled):hover, html[data-hg-tema="sotet"] .pa-x:hover { background: rgba(255, 255, 255, .08); }
html[data-hg-tema="sotet"] .mm-item .lap-csik > i { background: #1E4A43; }
html[data-hg-tema="sotet"] .mm-item .lap-csik.lap-csik-kesz > i { background: #23604F; }
html[data-hg-tema="sotet"] .mm-item:has(.lap-csik-kesz) { border-color: #3E9C7C; }
html[data-hg-tema="sotet"] .mm-item.mm-item-nyitott { color: #F2C14E; }
html[data-hg-tema="sotet"] .mm-item.mm-item-nyitott:hover { background: #3A3220; color: #F7D98A; }
html[data-hg-tema="sotet"] .notif-item.unread { background: #1F3350; }
html[data-hg-tema="sotet"] ::placeholder { color: #8D99AB; }
/* a field's text is the browser's field colour (not inherited): outside the grids and tables the theme's text colour */
html[data-hg-tema="sotet"] :is(select, input, textarea):not(.tabulator *):not(table.data-table *):not(.tabulator-popup-container *):not(.hg-szuro-pop *) {
  color: var(--text-dark); }

/* the app's dialogs (hg-ablak.js, <dialog>): fields and the option hover on the dark surface */
html[data-hg-tema="sotet"] :is(.hg-ablak, dialog) :is(input, select, textarea):not(table.data-table *) { background-color: var(--surface-1); border-color: var(--surface-3); }
html[data-hg-tema="sotet"] .hg-ablak-opcio { border-color: var(--surface-3); }
html[data-hg-tema="sotet"] .hg-ablak-opcio:is(:hover, :focus-visible) { background: #1F3B4A; }

/* 3. the grids, the tables and their pop-ups: the light theme, whatever the theme */
html[data-hg-tema]:not([data-hg-tema="vilagos"]) :is(.tabulator, table.data-table, .tabulator-popup-container, .hg-szuro-pop) {
  --brand-navy: #002E5E; --text-dark: #363636; --text-mid: #606060; --text-light: #404040;
  --surface-white: #FFFFFF; --surface-1: #F2F2F2; --surface-2: #F1F1F1; --surface-3: #E8E8E8;
  --d-hatter: #F3F4F8; --d-kartya: #FFFFFF; --d-keret: #E6E8EE; --d-fej: #F7F8FB;
  --tabla-sav-szoveg: #002E5E; --tabla-fej-szoveg: #002E5E; --hg-tele: #002E5E; --hg-tele-szoveg: #FFFFFF;
  color: #363636; color-scheme: light; }
html[data-hg-tema]:not([data-hg-tema="vilagos"]) :is(.tabulator, table.data-table) { background-color: #FFFFFF; }