/* A `site-*.css` sorozat 3. tagja - lásd site-base.css fejlécét a betöltési
   sorrendről. */
/* ---------- Portál app-váz (portal.html) - mindig kinyitott sidebar ---------- */
.portal-shell { display: flex; min-height: 100vh; }

/* "a jelenlegi menü helyett: üveghatás
   (glassmorphism), lebegő panel, enyhe blur, ikon + szöveg, aktív elem
   arany fénycsík" - a sidebar mostantól egy ténylegesen LEBEGŐ panel (nem
   a képernyő szélére tapadó, teljes magasságú sáv): margó minden oldalról,
   lekerekített sarkok, erős blur + finom szegély, hogy átlásson rajta a
   háttér fényfoltjaira. */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  margin: 14px 0 14px 14px;
  border-radius: var(--radius-lg);
  /* a felhasználó jelezte, hogy a bal oldali menü
     háttere KÉKES, nem egyezik a Dashboard-kártyák/grafikonok mögötti
     háttérrel. Az ok: itt egy kézzel beírt, navy-kék `rgba(8, 20, 37, .85)`
     maradt bent, miközben a 42. pontban a rendszer teljes hue-mentesítése
     megtörtént (`--bg-deep: #07080B`, `--panel: rgba(18, 19, 25, .92)`).
     Ez volt az UTOLSÓ kék folt a Portálon. Mostantól ugyanaz a semleges
     panel-szín, mint minden más kártyánál - csak áttetszőbben, hogy a
     lebegő/üveghatás (backdrop-filter) megmaradjon. */
  background: var(--sidebar-bg);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--overlay-line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 14px;
  height: calc(100vh - 28px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.sidebar-logo { font-size: 17px; color: var(--wordmark); padding: 20px 18px 16px; border-bottom: 1px solid var(--overlay-line); margin-bottom: 8px; display: flex; align-items: center; gap: 9px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px; }
.sidebar-nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; color: var(--text-muted);
  padding: 10px 12px; border-radius: 10px; font-size: 13.5px; cursor: pointer; margin-bottom: 2px;
  position: relative; transition: background .15s, color .15s;
}
.sidebar-nav button .nav-icon { flex-shrink: 0; width: 17px; height: 17px; opacity: .75; transition: opacity .15s; }
.sidebar-nav button:hover { background: var(--overlay-1); color: var(--text); }
.sidebar-nav button:hover .nav-icon { opacity: 1; }
.sidebar-nav button.active { background: linear-gradient(90deg, rgba(217, 128, 61, 0.16), transparent); color: var(--text); font-weight: 600; }
.sidebar-nav button.active .nav-icon { opacity: 1; }
/* A design brief mintája: "▌ Fiókom" - egy vastag, izzó arany csík az
   aktív elem előtt, nem a korábbi vékony 2.5px vonal. */
.sidebar-nav button.active::before {
  content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 4px;
  background: linear-gradient(180deg, var(--primary-bright), var(--primary));
  border-radius: 3px; box-shadow: var(--glow-gold);
}
.sidebar-nav button .nav-badge { margin-left: auto; font-family: var(--font-mono); font-size: 10px; background: rgba(217, 128, 61, 0.16); color: var(--signal); padding: 1px 7px; border-radius: 999px; }
.sidebar-nav-divider { height: 1px; background: var(--overlay-line); margin: 10px 8px; }

/* A sötét/világos váltó a Kijelentkezés mellett, a `.sidebar-account`
   sorban él (nem a `.sidebar-nav` belseje), ezért saját, teljes leírást
   kap az Értesítések-gomb ikon-stílusát követve (`.sidebar-notif-btn`
   mintája). A két SVG közül mindig csak az egyik látszik: sötét módban a
   nap (= "kattints a világosra váltáshoz"), világosban a hold - CSAK
   CSS-sel, nincs hozzá ikon-cserélő JS. */
.theme-toggle-nav {
  position: relative; background: none; border: 1px solid var(--border); color: var(--text-muted);
  width: 42px; height: 42px; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.theme-toggle-nav .nav-icon { width: 18px; height: 18px; }
.theme-toggle-nav:hover { color: var(--text); border-color: var(--primary); }
.theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: block; }

/* `position: relative` KELL ide (nem csak a gomb-sorra) - a
   `.sidebar-notif-dropdown` felfelé nyílik (`bottom: calc(100% + 8px)`), a
   száz százalékos érték a LEGKÖZELEBBI pozicionált őshöz igazodik. */
.sidebar-account { border-top: 1px solid var(--overlay-line); padding: 14px 20px; position: relative; }
.sidebar-account-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sidebar-account-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(145deg, var(--primary-bright), var(--primary));
  color: #241505; font-family: var(--font-display); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* Portál V3 - profilkép (ha van feltöltve) minden monogram-avatar helyén -
   lásd portal-core.js renderAvatarInto. */
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-account .account-name { font-size: 13px; font-weight: 600; margin-bottom: 0; word-break: break-word; }

/* az új, böngészős elrendezés-szuit tárta fel:
   TABLET szélességben (768-1024px, ahol még az ASZTALI elrendezés fut, mert
   a mobil töréspont 720px) a Dashboard és a Chat oldalra csúszott
   (976px > 768px). Ok: a `.portal-main` flex-gyermek, aminek az
   alapértelmezett `min-width:auto` értéke MEGTILTJA, hogy a tartalma alá
   zsugorodjon - így a 320px-es oldalsáv + a nem zsugorodó tartalom együtt
   szélesebb lett a képernyőnél. A `min-width: 0` a flexbox szabványos
   megoldása erre. (Ugyanaz a hibaosztály, mint a kártyák hosszú szövegénél
   - lásd a job-card szabályokat.) */
.portal-main { flex: 1; min-width: 0; padding: 28px 32px; max-width: 1400px; }
.portal-view { display: none; }
.portal-view.active { display: block; }

/* lásd portal.html ugyanezen javítás
   magyarázatát: a mockup .mtopbar mintája, EGYETLEN közös elemként. */
.portal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.portal-topbar h2 { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0; }
.portal-topbar-icon svg { width: 19px; height: 19px; color: var(--primary-bright); display: block; }
.portal-topbar-who { font-size: 12.5px; color: var(--text-muted); }
.portal-topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.idle-countdown-display { font-size: 11px; color: var(--text-muted); }

/* Zászlós nyelvváltó - a mesterkontroll-landing.php (WordPress) fejlécének
   mintája, portál-oldali színtokenekkel. SAJÁT RAJZOLÁSÚ SVG-k, nem emoji -
   ugyanaz az indok, mint a landing kommentjében: az emoji-zászlók
   platformonként (főleg Windows) másképp, vagy egyáltalán nem jelennek meg. */
.mk-lang-switch { display: flex; align-items: center; gap: 8px; }
.mk-lang-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 100px; border: 1px solid var(--border); background: none; cursor: pointer;
  color: var(--text-muted); opacity: .72; transition: opacity .15s, border-color .15s, color .15s;
}
.mk-lang-btn:hover { opacity: 1; border-color: var(--glass-border); color: var(--text); }
.mk-lang-btn.is-active { opacity: 1; border-color: var(--primary-bright); color: var(--primary-bright); }
.mk-lang-btn svg { display: block; border-radius: 2.5px; }
.mk-lang-code { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }

/* a .portal-main korábbi 1000px-es
   plafonja széles (1440px+) képernyőn nagy, üres sávot hagyott jobbra - a
   bento-rácsos nézetek (feladatkiírások, szerződések, árlistám stb.) nem
   tudták kitölteni a helyet. A plafon 1400px-re nőtt, DE a tisztán egy-
   oszlopos ŰRLAP-kártyák (feladat/visszajelzés/értékelés-beküldés, a Fiókom
   varázsló lépései) saját, olvasható szélesség-korlátot kapnak - egy 1400px
   széles szövegmező/textarea használhatatlanul nyúlna el. */
#job-create-card, #view-feedback .card, #reviews-form-card, #customer-review-form-card,
.wizard-step-panel { max-width: 640px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.manual-pricing-title { font-weight: 600; margin-bottom: 8px; }
.manual-pricing-row .btn-sm { margin-top: 10px; margin-right: 8px; }
.pricing-saved-tag { color: var(--signal); margin-left: 8px; }

/* Naptár - elérhetőség (10.8 pont) - saját, egyszerű hónap-rács, nincs
   külső naptár-könyvtár, konzisztens a projekt "nincs build-lépés"
   vanilla JS elvével. */
.calendar-nav { display: flex; justify-content: space-between; margin-bottom: 14px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; border: 1px solid var(--border);
  background: var(--glass); color: var(--text);
}
.calendar-day.available { background: rgba(77, 255, 178, 0.18); border-color: var(--success-dim); color: var(--success); }
.calendar-day.unavailable { background: rgba(255, 96, 96, 0.14); border-color: rgba(255, 96, 96, 0.4); color: #ff8080; }
.calendar-day.past { opacity: 0.35; cursor: default; }
.calendar-day.empty { visibility: hidden; cursor: default; }
.calendar-legend { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--text-muted); align-items: center; }
.calendar-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.calendar-swatch.available { background: rgba(77, 255, 178, 0.4); }
.calendar-swatch.unavailable { background: rgba(255, 96, 96, 0.4); }
.calendar-swatch.unset { background: var(--glass); border: 1px solid var(--border); }
/* a felhasználó jelzése: a Dashboard/listák mobilon
   oldalra csúsztathatók. MÉRÉSSEL (Playwright, 390px viewport) feltárt ok:
   a Feladatkiírás-kártyák meta-sorában lévő `<span>`-ek `display:flex`
   gyermekek, és a flexbox alapértelmezett `min-width:auto` miatt NEM
   zsugorodnak a tartalmuk alá - egyetlen hosszú, szóköz nélküli szöveg
   (hosszú városnév, beillesztett URL, összefüggő karakterlánc) így
   korlátlanul szélesre nyújtja a kártyát, és vele az egész oldalt.
   A `min-width:0` engedi a zsugorodást, az `overflow-wrap:anywhere` pedig
   tördeli a szóköz nélküli szöveget is. Ez NEM csak elméleti eset: a
   végponti tesztfuttató injekciós tesztje (20 000 karakteres mező) épp ezt
   a hibát hozta felszínre, 223 148 px-es oldalszélességgel. */
.job-card, .job-card-meta, .contract-card, .chat-list-item, .mk-pricing-card { min-width: 0; }
.job-card-meta > *, .contract-card > *, .chat-list-item > * { min-width: 0; }
.job-card-title, .job-card-meta span, .chat-list-item .chat-list-name,
.chat-list-item .chat-list-preview, .contract-card-title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 720px) {
  .portal-shell { flex-direction: column; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  /* "Bottom Navigation - az App Store
     és Play Store alkalmazások ma már szinte mind ezt használják". A
     korábbi kör a menüt egy görgethető, VÍZSZINTES pill-sorrá alakította a
     tartalom TETEJÉN - ez működött, de nem natív app-érzetű. Most a
     `.sidebar-nav` (a logó/fiók-sáv NÉLKÜL) egy FIX, alul rögzített,
     üveghatású sávvá válik - ikon+felirat, vízszintesen görgethető, ha a
     szerepkörtől függően sok elem fér bele. A `.sidebar` maga (logó + a
     korábbi kompakt fiók-sor) a tartalom FELETT marad, normál dokumentum-
     folyásban - a bejelentkezési/kijelentkezési infó nem tűnik el. */
  .sidebar {
    position: static; height: auto; width: 100%; margin: 0; border-radius: 0;
    border: none; border-bottom: 1px solid var(--overlay-line-strong); background: var(--panel);
    /* KRITIKUS mobil-hiba gyökér-oka: a `backdrop-
       filter` egy CSS-specifikáció szerinti mellékhatásaként ÚJ
       "containing block"-ot hoz létre a `position:fixed` LESZÁRMAZOTTAK
       számára - mivel a `.sidebar-nav` (lásd lent, fixed+bottom:0, az alsó
       ikonsor) a `.sidebar` GYERMEKE a DOM-ban, a (desktop-szabályból
       öröklődő, itt korábban nem felülírt) blur miatt a "bottom:0" nem a
       viewport aljához, hanem a `.sidebar` fejléc-sáv aljához igazodott -
       emiatt az alsó navigáció ténylegesen a KÉPERNYŐ TETEJÉN jelent meg,
       pontosan átfedve a "Kijelentkezés" gombbal (mérésekkel megerősítve:
       getBoundingClientRect a nav-ot y≈57-123px-nél mutatta egy 812px
       magas viewportban, bottom:0 helyett - a böngésző DevTools-ában is,
       nem csak MAUI-ban, tehát ez sosem volt MAUI-specifikus hiba). A
       `backdrop-filter: none` EXPLICIT felülírás kell, mert a mobil media
       query önmagában NEM törli a 303. sori desktop-szabály blur-jét, csak
       kiegészíti - egy CSS-tulajdonság csak akkor "tűnik el", ha valaki
       kifejezetten felülírja. Helyette tömörebb, átlátszatlanabb
       háttérszín adja a "lebegő sáv" hatást blur nélkül is. */
    backdrop-filter: none;
  }
  .sidebar-nav {
    display: flex; overflow-x: auto; gap: 4px; padding: 8px calc(8px + env(safe-area-inset-left, 0)) calc(8px + env(safe-area-inset-bottom, 0)) 8px;
    -webkit-overflow-scrolling: touch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--sidebar-nav-bg); backdrop-filter: blur(24px) saturate(140%);
    border-top: 1px solid var(--overlay-line-strong); box-shadow: var(--shadow-lg);
  }
  .sidebar-nav button {
    flex-direction: column; align-items: center; gap: 3px; width: auto; min-width: 58px; flex-shrink: 0;
    white-space: nowrap; margin-bottom: 0; padding: 7px 8px; font-size: 10.5px; border-radius: 12px;
  }
  .sidebar-nav button .nav-icon { width: 19px; height: 19px; }
  .sidebar-nav button .nav-badge { position: absolute; top: 2px; right: 10px; margin-left: 0; }
  .sidebar-nav button.active::before {
    left: 50%; top: -2px; bottom: auto; right: auto; width: 20px; height: 3px; transform: translateX(-50%);
    border-radius: 3px 3px 0 0;
  }
  .sidebar-nav-divider { display: none; }
  /* A "Beszélgetések" nézet mobilon "össze van nyomva" - a valódi ok nem
     a chat-elrendezés, hanem hogy a névvel/próbaidő-badge-dzsel/demo-
     szöveggel/GYIK-linkkel/teljes szélességű Kijelentkezés-gombbal a
     sidebar-account BLOKK önmagában 4-5 egymás alatti sort foglalt a
     képernyő tetején, MÉG a tényleges tartalom (pl. a chat-panel) előtt -
     ez szorította "csíkra" az utána következő nézetet egy kis mobil-
     kijelzőn. Most egy kompakt, 2-soros elrendezés: 1. sor = név + jelvény,
     2. sor = GYIK-link + (jobbra igazított, nem többé teljes szélességű)
     Kijelentkezés gomb; a próbaidő/demo-szöveg egy 3., kisebb betűs sor,
     ami csak akkor jelenik meg, ha van tartalma. */
  .sidebar-account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 16px; }
  .sidebar-account .account-name { margin-bottom: 0; font-size: 12.5px; }
  .sidebar-account #sidebar-role-badge { margin-bottom: 0 !important; }
  .sidebar-account #sidebar-trial-info { flex-basis: 100%; margin-bottom: 0 !important; font-size: 11px !important; order: 3; }
  .sidebar-account a.link-button { margin-bottom: 0 !important; width: auto; }
  .sidebar-account .btn-block { width: auto; padding: 6px 14px; margin-left: auto; }
  .sidebar-logo { padding: 14px 16px; margin-bottom: 0; }
  /* Az alsó padding a fix bottom-nav (lásd fent, .sidebar-nav) magassága
     alá nyúlik, hogy a tartalom sose bújjon alá. */
  .portal-main { padding: 18px 16px calc(var(--mobile-nav-height) + 18px + env(safe-area-inset-bottom, 0px)); }
  .landing-header { padding: 16px 18px; flex-wrap: wrap; gap: 10px; }
  .hero { padding: 40px 18px 24px; }
  .hero h1 { font-size: 27px; }

  /* Szélesebb táblázatok (feladatlisták, felhasználók stb.) vízszintesen
     görgethetők legyenek, ne törjék szét/vigyék oldalra az egész oldalt. */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* Mobilon natív chat-app mintát követ: alapból CSAK a lista látszik, egy
     beszélgetésre koppintva CSAK az üzenet-panel jelenik meg (teljes
     szélességben), a fejlécben lévő "← Vissza" gombbal lehet visszaváltani.
     Ezt a `.conversation-open` osztály vezérli (lásd portal-chat.js
     openConversation/closeChatConversation). */
  .chat-layout { grid-template-columns: 1fr; height: auto; border: none; }
  .chat-list-col { border-right: none; }
  /* a beszélgetés-LISTA (nem a megnyitott
     beszélgetés) mobilon BELSŐ görgetést használt (`flex:1; overflow-y:auto`)
     egy auto-magasságú szülőben: emiatt a lista a képernyő aljáig nyúlt, és
     az utolsó elem törlés-gombja (✕) a fix alsó menü alá került,
     elérhetetlenül (mérve 360x740-en: gomb 692-709px, menü teteje 674px).
     Mobilon természetesebb (és biztonságosabb), ha a lista egyszerűen
     folyik, és az EGÉSZ oldal görgethető - így a `.portal-main` alsó
     térköze (ami a menü magasságát tartalmazza) megvédi az utolsó elemet. */
  .chat-list { overflow-y: visible; flex: none; }
  /* A lista alján garantált térköz, hogy az utolsó beszélgetés sorának
     törlés-gombja se kerülhessen a fix menü alá - a `.portal-main` alsó
     térköze itt nem elég, mert a chat-panel saját (grid/flex) elrendezése
     nem mindig hosszabbítja meg a görgethető dokumentumot. */
  .chat-layout { padding-bottom: calc(var(--mobile-nav-height) + 8px); }
  .chat-layout.conversation-open .chat-list-col { display: none; }

  /* a felhasználó jelzése: "Chat felület mobilon
     használhatatlan, van már beszélgetés, de semmi nem látszik".
     MÉRÉSSEL feltárt ok (Playwright, 390x844 viewport): a panel `75vh`
     FIX magasságot kapott, és NORMÁL dokumentum-folyásban ült - a nézet
     teteje 262px-nél kezdődött, így a panel alja 262+633 = 895px-re esett,
     a 844px-es képernyőn TÚL. A beviteli sor (📷 gomb + szövegmező +
     Küldés) 822-895px között volt, azaz teljesen a fix alsó menü ALATT/
     mögött - a felhasználó fizikailag nem tudott üzenetet írni.
     A `75vh` bármilyen értékre állítása csak tüneti kezelés lenne, mert a
     panel TETEJÉNEK pozíciója nézetenként/szerepkörönként változik.
     Megoldás: megnyitott beszélgetésnél a panel teljes képernyős, FIX
     pozíciójú réteg, ami pontosan a fix alsó menü FÖLÖTT ér véget - így a
     magassága sosem függ attól, mi van fölötte. Ez egyben a natív mobil
     chat-alkalmazások mintája is (a visszalépést a panel fejlécében lévő
     "← Vissza" gomb adja, ami már korábban is létezett). */
  .chat-layout.conversation-open .chat-messages {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
    height: auto;
    z-index: 55;
    background: var(--bg);
    border: none;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* A belső görgetés a lista dolga marad (flex:1 + overflow-y:auto), a
     beviteli sor pedig a panel alján, mindig elérhető helyen. */
  .chat-layout.conversation-open .chat-message-list { min-height: 0; }
  .chat-back-btn {
    background: none; border: none; color: var(--signal); cursor: pointer;
    font-size: 13px; font-weight: 600; padding: 0; margin-right: 10px;
  }
  .chat-bubble { max-width: 85%; }

  /* iOS Safari a 16px-nél kisebb betűméretű input-mezőkre fókuszáláskor
     automatikusan ránagyít (zoom) az oldalra - ez volt a fő oka annak, hogy
     a Portál használhatatlanul "nem reszponzívnak" tűnt telefonon minden
     olyan nézetnél, ahol be kellett gépelni valamit (keresés, feladat-
     kiírás, Fiókom stb.) - nem egy konkrét oldal volt hibás, hanem MINDEN
     form-mező. */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    font-size: 16px;
  }

  /* A 2-lépéses Fiókom-varázsló fül-sora keskeny képernyőn összepréselődött
     - a felirat helyett elég csak a lépés-számot mutatni. */
  .wstep .label { display: none; }
  .wstep { justify-content: center; }
}

@media (max-width: 420px) {
  /* A legkeskenyebb telefonokon (pl. iPhone SE, ~375px) a sidebar-nav
     pilledbe zsúfolt hosszú menüfeliratok és a kártya-belső térközök
     további szűkítése szükséges, hogy ne kelljen vízszintesen görgetni a
     TARTALMAT is (csak a menüt, ami szándékos). */
  /* a felhasználó jelzése: "mindegyik menüben a menü
     aljáig nem tudok lemenni, mintha valami fogná". MÉRÉSSEL feltárt ok:
     ez a `padding` RÖVIDÍTÉS felülírta a 720px-es blokkban gondosan
     kiszámolt ALSÓ térközt (`calc(--mobile-nav-height + 18px + safe-area)`),
     és 14px-re állította - a fix alsó navigációs sáv így ~66px-nyi
     tartalmat takart el MINDEN nézet alján, minden 420px-nél keskenyebb
     telefonon (iPhone SE/13 mini és sok Android). Mérve: a "Fiók törlése"
     gomb alja 815px-nél volt, a menü teteje 778px-nél - azaz a gomb
     teljesen a menü alatt, elérhetetlenül.
     A vízszintes térköz szűkítése maradhat, de az alsó térközt MEG KELL
     tartani - ezért itt is explicit, ugyanabból a változóból számolva. */
  .portal-main { padding: 14px 12px calc(var(--mobile-nav-height) + 14px + env(safe-area-inset-bottom, 0px)); }
  .card { padding: 14px; }
  .modal-box { padding: 16px; }
}

.notice-box { background: rgba(217, 128, 61, 0.1); border: 1px solid var(--signal, #D9803D); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; }

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 100px; padding: 4px 10px; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.chip button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 0; }

.field-hint { font-size: 12px; color: var(--text-muted); margin: -4px 0 8px; }
/* a fenti -4px felső margó a
   "címke alatti" esetre volt szabva, de ahol a súgó-szöveg KÖZVETLENÜL egy
   `select`/`input`/`textarea` UTÁN áll (pl. Árlistám két legördülője, ahol a
   `.field` div-en belül nincs külön wrapper a kettő közt), a mezőnek NINCS
   saját alsó margója, ezért a negatív érték a szöveget szinte a mező
   szegélyére húzta ("rácsúszott"). Itt felülírjuk pozitívra, KIZÁRÓLAG erre
   a szomszédsági mintára szűkítve - a címke alatti eredeti eset változatlan. */
select + .field-hint, input + .field-hint, textarea + .field-hint { margin-top: 8px; }

/* Meg nem tekintett ajánlattal rendelkező feladatkiírás-sor kiemelése -
   lásd portal-search-jobs.js loadJobsView/updateJobsBadge. */
tr.row-highlight { background: rgba(217, 128, 61, 0.08); }
tr.row-highlight:hover { background: rgba(217, 128, 61, 0.14); }

/* A felhasználó kérése: színkód a szerződés/TIG/ajánlat-listákban - zöld =
   lezárt/jóváhagyott, piros = elutasítva/megszakadt, sárga = folyamatban
   (már van rá válasz), sima = teljesen új, még senki nem reagált. A
   row-highlight (élő badge-jelzés) EGYÜTT is előfordulhat ezekkel, ezért a
   háttérszín-erősséget alacsonyan tartjuk, hogy a szövegek olvashatók
   maradjanak. */
tr.row-status-approved { background: rgba(63, 174, 106, 0.12); }
tr.row-status-approved:hover { background: rgba(63, 174, 106, 0.18); }
tr.row-status-rejected { background: rgba(192, 57, 43, 0.12); }
tr.row-status-rejected:hover { background: rgba(192, 57, 43, 0.18); }
tr.row-status-pending { background: rgba(217, 128, 61, 0.12); }
tr.row-status-pending:hover { background: rgba(217, 128, 61, 0.18); }

.status-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin: 8px 0 4px; }
.status-legend span { display: inline-flex; align-items: center; gap: 6px; }
.status-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.status-legend .sw.approved { background: #3fae6a; }
.status-legend .sw.rejected { background: #c0392b; }
.status-legend .sw.pending { background: #e3a856; }
.status-legend .sw.new { background: transparent; border: 1px solid var(--border); }

/* Egymás után álló önálló gombok/mezők (pl. az árlista-lépés "Sablon
   letöltése" + fájl-input + "Feltöltés" hármasa) - JAVÍTVA: korábban ezeknek
   nem volt közös térköz-szabályuk, ezért vizuálisan összeértek/átfedtek. */
.stacked-actions { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.stacked-actions .btn { align-self: flex-start; }

.dual-listbox { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.dual-listbox-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dual-listbox-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.dual-listbox-select { width: 100%; height: 220px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; background: var(--surface-sunken); color: var(--text); font-size: 13px; }
.dual-listbox-select option { padding: 4px 6px; border-radius: 4px; }
.dual-listbox-controls { display: flex; flex-direction: column; gap: 6px; }
.dual-listbox-controls .btn { min-width: 44px; padding: 6px 8px; }
@media (max-width: 640px) {
  .dual-listbox { grid-template-columns: 1fr; }
  .dual-listbox-controls { flex-direction: row; justify-content: center; }
}

.chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; height: 520px; box-shadow: var(--shadow-md); }
.chat-list-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--glass); }
/* input.chat-search-input (nem csak .chat-search-input) kell, hogy
   specificitásban felülüsse a globális input[type="text"] { width: 100% }
   szabályt - enélkül a 10px margó ELLENÉRE 100% szélességű maradt a mező,
   ami pontosan a margó kétszeresével (20px) túllógott a saját sávján. */
input.chat-search-input { margin: 10px; width: auto; max-width: calc(100% - 20px); box-sizing: border-box; }
.chat-list { flex: 1; overflow-y: auto; }
.chat-list-item { padding: 13px 14px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; transition: background .12s; }
.chat-list-item:hover, .chat-list-item.active { background: rgba(217, 128, 61, 0.1); }
/* A felhasználó kérése: az olvasatlan beszélgetés sora egyértelműen
   kiemelve legyen a listában, ne csak egy alig látható pont jelezze. */
.chat-list-item.unread { background: rgba(217, 128, 61, 0.14); border-left: 3px solid var(--primary-bright); }
.chat-list-item.unread:hover { background: rgba(217, 128, 61, 0.2); }
.chat-list-item-unread-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--primary); color: #241505; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.chat-list-item-name { font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.chat-list-item-topic { color: var(--signal); font-size: 11px; margin-top: 2px; }
/* A felhasználó kérése: beszélgetés törlési lehetősége a listából - halvány
   "✕" gomb, csak hoverre/fókuszra erősödik fel, hogy ne domináljon a soron. */
.chat-list-item-delete {
  background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer;
  padding: 2px 6px; border-radius: 4px; opacity: 0.5; line-height: 1;
}
.chat-list-item-delete:hover { opacity: 1; color: var(--danger); background: rgba(255, 95, 126, 0.12); }
.chat-list-item-date { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.chat-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; background: var(--glass); }
/* a felhasználó jelezte: "sok üzenet esetén nincs
   görgetés, nem jelenik meg görgő". UGYANAZ a hibaosztály, mint a korábbi
   elrendezési hibáknál (lásd SPECIFIKACIO.md 63.4): a `.chat-messages` a
   `.chat-layout` GRID-elem gyermeke, és a grid/flex elemek alapértelmezett
   `min-height: auto` értéke MEGTILTJA, hogy a tartalmuk alá zsugorodjanak.
   Emiatt a panel az ÖSSZES üzenet magasságára nőtt (túlnyúlva a 520px-es
   konténeren, amit az `overflow:hidden` levágott), a belső listának pedig
   sosem lett korlátos magassága - így nem is volt mit görgetni.
   A `min-height: 0` mindkét szinten kell: a panelen, hogy beférjen a
   konténerbe, és a listán, hogy az `overflow-y: auto` ténylegesen életbe
   lépjen. */
.chat-messages { display: flex; flex-direction: column; min-height: 0; }
.chat-message-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-bubble { max-width: 70%; padding: 9px 13px; border-radius: 14px; border-bottom-left-radius: 4px; font-size: 13px; line-height: 1.45; background: var(--panel-2); align-self: flex-start; box-shadow: var(--shadow-sm); }
.chat-bubble.mine { background: linear-gradient(180deg, var(--primary-bright), var(--primary)); color: #241505; align-self: flex-end; border-radius: 14px; border-bottom-right-radius: 4px; border-bottom-left-radius: 14px; box-shadow: 0 8px 20px -12px rgba(217, 128, 61, 0.6); }
/* A felhasználó kérése: a saját küldött üzeneteknél egy Messenger-szerű
   "elküldve"/"olvasva" jelzés (✓ / ✓✓), csak a SAJÁT buborékokon - a
   partneré nem kap ilyen jelzést, hiszen az ő szemszögéből nem releváns. */
.chat-bubble-status { display: block; font-size: 10px; margin-top: 3px; opacity: 0.7; text-align: right; }
/* A felhasználó kérése: kép küldése a chat-ben - a szöveg-buborékkal azonos
   keretben, de a szöveg-padding helyett a kép tölti ki (max-width korlátozva,
   hogy ne törje szét a chat-panel szélességét). */
.chat-bubble.chat-bubble-image { padding: 4px; background: var(--panel-2); }
.chat-bubble-image-el { display: block; max-width: 240px; max-height: 240px; border-radius: 10px; cursor: zoom-in; object-fit: cover; }
.chat-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); align-items: center; }

/* MÉRÉSSEL feltárt, régóta meglévő specificitás/sorrend-hiba: a fenti
   asztali `.chat-layout`/`.chat-messages` szabályok a stíluslapban KÉSŐBB
   állnak, mint a `@media (max-width: 720px)` blokk mobil-felülírásai -
   azonos specificitás mellett a KÉSŐBBI nyer, tehát mobilon is az asztali
   érték (520px magasság/overflow:hidden, illetve `.chat-messages`
   display:flex) maradt érvényben. Ez okozta egyrészt, hogy a lista fix
   magasságúra vágódott (az utolsó sor törlés-gombja a fix alsó menü alá
   csúszott), másrészt hogy a nem-megnyitott üzenetpanel (a "Válassz egy
   beszélgetést" fejléccel) is látszott a lista ALATT, összenyomva a
   keresőmezőt és a listát.
   A javítás egy, az asztali szabályok UTÁN elhelyezett mobil-blokk - így
   nem kell `!important`, és nem kell az egész stíluslapot átrendezni.
   A `.chat-layout-3col` változatot is fedi, mert azt a Megrendelő nézete
   használja. */
@media (max-width: 720px) {
  .chat-layout,
  .chat-layout.chat-layout-3col {
    height: auto;
    overflow: visible;
  }
  .chat-messages { display: none; }
}
.chat-input-row input[type="text"] { flex: 1; }
.chat-attach-btn { padding: 8px 11px; font-size: 16px; line-height: 1; flex-shrink: 0; }

.iframe-preview { width: 100%; height: 380px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }