@CHARSET "UTF-8";
/* ============================================================
   QualitySoft Helpdesk — modern frontend (service hibajegy-lista)
   Minden szabaly a .qs-app wrapper ala van scope-olva, hogy a
   login / client / admin oldalak stilusat NE valtoztassa meg.
   Markaszinek a szamvitelirendszer.hu palettajabol.
   ============================================================ */

.qs-app {
	--qs-blue:        #006496; /* szamvitelirendszer.hu fo markakek */
	--qs-blue-dark:   #023A55;
	--qs-blue-bright: #29abe2; /* Uj Hibajegy gomb (prompt szerint) */
	--qs-topbar-light:#1a8fc9; /* topbar vilagosabb kek resze (gyorskereso) */
	--qs-amber:       #FFC107;
	--qs-text:        #2b3034;
	--qs-muted:       #8a9099;
	--qs-border:      #e3e7ea;
	--qs-row-line:    #eef0f2;
	--qs-row-hover:   #e9eef3;
	--qs-sidebar-bg:  #f5f5f5;

	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #ffffff;
	color: var(--qs-text);
	font-family: "Segoe UI", "Open Sans", system-ui, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.4;
}
.qs-app *,
.qs-app *::before,
.qs-app *::after { box-sizing: border-box; }

.qs-app a { color: var(--qs-blue); text-decoration: none; }
.qs-app a:hover { text-decoration: underline; }

/* ---------- Gyorskereso (a fejlec_bottom-ban, vilagos #E5EFF4 alapon) ---------- */
.qs-search { flex: 0 1 300px; position: relative; display: flex; align-items: center; }
.qs-search svg {
	position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; color: #9aa0a6; pointer-events: none;
}
.qs-app .qs-search input {
	width: 100%; height: 34px;
	border: 1px solid #c5d3dc; border-radius: 6px;
	padding: 0 12px 0 34px;
	font-family: inherit; font-size: 13px; color: #333; background: #ffffff;
}
.qs-app .qs-search input:focus { outline: none; border-color: var(--qs-blue); box-shadow: 0 0 0 2px rgba(0,100,150,.15); }

/* ---------- Body (sidebar + content) ---------- */
.qs-bodywrap { flex: 1 1 auto; display: flex; min-height: 0; }

.qs-sidebar {
	flex: 0 0 48px; width: 48px;
	background: var(--qs-sidebar-bg);
	border-right: 1px solid var(--qs-border);
	display: flex; flex-direction: column; align-items: center;
	padding-top: 10px; gap: 4px;
}
.qs-app .qs-sidebar a {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	color: #7a828b; border-radius: 8px; text-decoration: none;
	position: relative;            /* a CSS-tooltiphez */
}
.qs-app .qs-sidebar a:hover { background: #e9ecef; color: var(--qs-blue); }
.qs-app .qs-sidebar a.active { color: var(--qs-blue-bright); background: #e1f3fb; }
.qs-sidebar svg { width: 20px; height: 20px; }

/* Megbizhato CSS-tooltip a sidebar ikonokhoz (a nativ title helyett, ami idozitesi
   gondok miatt gyakran nem jelent meg) -> raallva AZONNAL megjelenik es nem tunik el. */
.qs-app .qs-sidebar a::after {
	content: attr(aria-label);
	position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
	background: #2b3034; color: #fff;
	padding: 5px 9px; border-radius: 5px;
	font-size: 12px; line-height: 1; white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
	opacity: 0; pointer-events: none; transition: opacity .1s ease;
	z-index: 100;
}
.qs-app .qs-sidebar a:hover::after { opacity: 1; }

.qs-content { flex: 1 1 auto; overflow: auto; padding: 6px 24px 28px; min-width: 0; }

/* ---------- Greeting ---------- */
.qs-greeting { display: flex; align-items: center; gap: 14px; padding: 10px 2px; }   /* az ikon alatt/folott 10px */
.qs-greeting .badge {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.qs-greeting .badge img { width: 64px; height: 64px; display: block; }
.qs-greeting-page { color: var(--qs-muted); font-weight: 400; }   /* az oldal neve a nev mogott */
.qs-greeting h1 {
	font-size: 22px; font-weight: 300; color: #3a3f44;
	margin: 0; padding: 0; font-family: inherit;
}

/* ---------- Tabs (statuszok) ---------- */
.qs-tabs {
	display: flex; flex-wrap: wrap; align-items: stretch;
	gap: 2px; border-bottom: 1px solid var(--qs-border);
}
.qs-tab {
	padding: 10px 18px; font-size: 13px; color: var(--qs-muted);
	cursor: pointer; background: transparent;
	border: 1px solid transparent; border-bottom: none;
	display: inline-flex; align-items: center; gap: 7px;
	border-radius: 4px 4px 0 0; user-select: none;
}
.qs-tab svg { width: 14px; height: 14px; opacity: .8; }
.qs-tab:hover { color: var(--qs-blue); }
.qs-tab.active {
	color: #222; font-weight: 700; background: #ffffff;
	border-color: var(--qs-border); margin-bottom: -1px;
}
.qs-tab .tab-count {
	color: #ffffff; background: #c2c8ce; border-radius: 10px;
	font-size: 11px; font-weight: 700; padding: 1px 7px; line-height: 1.5;
}
.qs-tab-add {
	margin-left: 6px; align-self: center;
	background: var(--qs-blue-bright); color: #fff;
	width: 26px; height: 26px; border-radius: 4px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px; line-height: 1; cursor: pointer;
}
.qs-tab-add:hover { background: #1f97c9; color: #fff; text-decoration: none; }

/* ---------- Filter bar ---------- */
.qs-filterbar {
	display: flex; align-items: center; gap: 10px;
	background: #fafafa; border: 1px solid var(--qs-border); border-top: none; border-bottom: none;
	padding: 9px 12px;
}
.qs-app .qs-filterbar select {
	width: auto; min-width: 190px; height: 30px;
	border: 1px solid #cfd4d9; border-radius: 4px; background: #ffffff;
	font-family: inherit; font-size: 12px; color: #3a3f44; padding: 0 8px;
}
/* "Befejezettek is" checkbox a szurosavban */
.qs-app .qs-filterbar .qs-check-finished { font-size: 12px; color: #3a3f44; white-space: nowrap; cursor: pointer; }
.qs-app .qs-filterbar input[type="checkbox"] { width: auto; min-width: 0; height: auto; margin: 0 5px 0 0; vertical-align: middle; cursor: pointer; }
.qs-app .qs-btn-new {
	background: var(--qs-blue-bright); color: #ffffff;
	border: none; border-radius: 4px; height: 30px;
	width: auto; padding: 0 16px; margin: 0;
	font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
	display: inline-flex; align-items: center;
}
.qs-app .qs-btn-new:hover { background: #1f97c9; color: #fff; text-decoration: none; }

.qs-filter-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.qs-count { color: var(--qs-muted); font-size: 12px; white-space: nowrap; }
.qs-app .qs-icon-btn { color: #aab0b6; cursor: pointer; display: inline-flex; }
.qs-app .qs-icon-btn:hover { color: var(--qs-blue); }
.qs-app .qs-icon-btn.active { color: var(--qs-blue-bright); }
.qs-icon-btn svg { width: 18px; height: 18px; }

/* ---------- Ticket table (oszlopok + statuszszinek valtozatlanok) ---------- */
.qs-app table.topicList {
	width: 100%; margin: 0; border: none; border-collapse: collapse;
	table-layout: auto;             /* AUTO: szukos helynel az oszlopok zsugorodhatnak (1. oszlop utan a tobbi is ad helyet) */
	background: #ffffff; font-family: inherit; font-size: 12.5px;
}
/* table-layout: fixed -> a szelessegek PONTOSAN ervenyesulnek. Az ELSO oszlop (auto)
   nyeli el a maradek helyet (atmeretezeskor ez valtozik), a tobbi fix px szelessegu. */
.qs-app table.topicList th.topicName { width: auto; min-width: 140px; }   /* 1. oszlop: rugalmas, de eddig zsugorodik, utana a tobbi ad helyet */
.qs-app table.topicList th:nth-child(2), .qs-app table.topicList td:nth-child(2) { width: 120px; white-space: normal; }   /* QsNet azonosito - tordelheto fejlec, hogy zsugorodhasson */
.qs-app table.topicList th:nth-child(3), .qs-app table.topicList td:nth-child(3) { width: 115px; }   /* Tema letrehozas */
.qs-app table.topicList th:nth-child(4), .qs-app table.topicList td:nth-child(4) { width: 240px; }   /* Ugyfel neve (fix) */
.qs-app table.topicList th:nth-child(5), .qs-app table.topicList td:nth-child(5) { width: 120px; white-space: normal; }   /* Utolso modositas - tordelheto fejlec+cella, hogy zsugorodhasson */
.qs-app table.topicList th:nth-child(6), .qs-app table.topicList td:nth-child(6) { width: 90px; }    /* Prioritas */
.qs-app table.topicList th:nth-child(7), .qs-app table.topicList td:nth-child(7) { width: 200px; }   /* Statusz (~1.5x) */
.qs-app table.topicList th:nth-child(8), .qs-app table.topicList td:nth-child(8) { width: 110px; }   /* Kezelo (~1.5x) */
.qs-app table.topicList th:last-child,   .qs-app table.topicList td:last-child  { width: 95px; white-space: normal; }     /* Atvesz - tordelheto, hogy zsugorodhasson */
.qs-app table.topicList th {
	background: #fafafa; background-image: none;       /* a fejlec a tab+szurosav csoport szine */
	color: var(--qs-blue); font-size: 12px; font-weight: 600;
	text-align: left; padding: 11px 8px;
	border-bottom: 1px solid var(--qs-border); white-space: nowrap;
}
/* a csoport korvonala a fejlecre is kiterjed: oldalso vonal a szelso cellakon */
.qs-app table.topicList th:first-child { border-left: 1px solid var(--qs-border); }
.qs-app table.topicList th:last-child  { border-right: 1px solid var(--qs-border); }
/* a tablazat ket szele: ugyanaz a vonal vegig az adatsorokon is */
.qs-app table.topicList td:first-child { border-left: 1px solid var(--qs-border); }
.qs-app table.topicList td:last-child  { border-right: 1px solid var(--qs-border); }
/* a tablazat alja is ugyanezzel a vonallal zarul (az utolso sor also szegelye) */
.qs-app table.topicList tr:last-child td { border-bottom: 1px solid var(--qs-border); }
.qs-app table.topicList td {
	background: #ffffff; color: #3a3f44;
	font-size: 12.5px; padding: 9px 8px;
	border-bottom: 1px solid var(--qs-border);
	vertical-align: top;
}
/* minden masodik sor halvanyszurke (zebra) */
.qs-app table.topicList tr.row2 td { background: #f3f6f9; }

/* Tomor nezet (hamburger valto) */
.qs-app.qs-compact table.topicList th { padding: 7px 8px; }
.qs-app.qs-compact table.topicList td { padding: 3px 8px; font-size: 12px; }
.qs-app.qs-compact svg.qs-bug-i { width: 12px; height: 12px; }

/* 1. oszlop fuggo behuzas: a tordelt (2.+) sorok a szoveg kezdetehez igazodnak (bogar ikon 14px + 6px margo = 20px),
   mintha minden sorban lenne ikon. A padding-left a szoveg kezdete, a negativ text-indent csak az 1. sort huzza vissza (ikon a szelre). */
.qs-app table.topicList td:first-child { padding-left: 28px; text-indent: -20px; }   /* 8px alap + 20px ikon */
.qs-app.qs-compact table.topicList td:first-child { padding-left: 26px; text-indent: -18px; }   /* compact: ikon 12px + 6px margo */
.qs-app table.topicList tbody tr:hover td,
.qs-app table.topicList tr:hover td { background: var(--qs-row-hover); }

.qs-app table.topicList td a {
	color: var(--qs-blue); font-family: inherit; font-size: 12.5px;
	font-weight: 600; text-decoration: none;
}
.qs-app table.topicList td a:hover { text-decoration: underline; }

.qs-app table.topicList td.qs-status { font-weight: 400; }   /* nowrap levéve: a statusz oszlop is zsugorodhat (tordelodik szukos helyen) */

/* ---------- Lezart temak tabla (.closedList): 6 oszlop, sajat szelessegek ----------
   Felulirja az aktiv lista nth-child szelessegeit (magasabb specifikussag: 2 osztaly+:nth-child).
   Az 1. oszlop (.topicName) tovabbra is auto + min-width 140px az aktiv szabalybol. */
.qs-app table.topicList.closedList th:nth-child(2), .qs-app table.topicList.closedList td:nth-child(2) { width: 150px; }                      /* QsNet azonosito */
.qs-app table.topicList.closedList th:nth-child(3), .qs-app table.topicList.closedList td:nth-child(3) { width: 240px; white-space: normal; } /* Ugyfel neve */
.qs-app table.topicList.closedList th:nth-child(4), .qs-app table.topicList.closedList td:nth-child(4) { width: 120px; text-align: center; }  /* Uzenetek szama */
.qs-app table.topicList.closedList th:nth-child(5), .qs-app table.topicList.closedList td:nth-child(5) { width: 150px; }                      /* Kezelo */
.qs-app table.topicList.closedList th:last-child,    .qs-app table.topicList.closedList td:last-child  { width: 90px; }                       /* Utolso uzenet - keskeny, a datum/ido ket sorba tordel */
.qs-app table.topicList.closedList td.qs-lastmsg { white-space: nowrap; color: var(--qs-muted); }                                              /* a ket sor (datum / ido) ne tordeljon tovabb */

/* ---------- Chunkolt szovegkereses haladasjelzo (js/closedTopicSearch.js) ---------- */
.qs-app .qs-search-progress { margin: 0 0 10px; }
.qs-app .qs-search-bar { height: 6px; background: var(--qs-border); border-radius: 3px; overflow: hidden; }
.qs-app .qs-search-bar-fill { height: 100%; width: 0; background: var(--qs-blue-bright); transition: width .2s ease; }
.qs-app .qs-search-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 13px; color: var(--qs-muted); }
.qs-app .qs-search-cancel {
	flex: 0 0 auto; border: 1px solid var(--qs-border); background: #fff; color: var(--qs-blue-dark);
	font-size: 12px; padding: 4px 12px; border-radius: 4px; cursor: pointer; line-height: 1.4;
}
.qs-app .qs-search-cancel:hover:not(:disabled) { border-color: var(--qs-blue); color: var(--qs-blue); }
.qs-app .qs-search-cancel:disabled { opacity: .55; cursor: default; }

.qs-user { color: var(--qs-blue); display: inline-flex; align-items: center; gap: 5px; }
.qs-user svg { width: 13px; height: 13px; color: #9aa0a6; flex: 0 0 auto; }

.qs-bug { color: #c9a227; margin-right: 5px; font-size: 12px; }
.qs-app svg.qs-bug-i { width: 14px; height: 14px; color: #b3b8be; vertical-align: -2px; margin-right: 6px; flex: 0 0 auto; }
.qs-attach img { vertical-align: middle; opacity: .7; margin-left: 4px; }

/* ---------- Pager ---------- */
.qs-app .pager {
	text-align: center; margin: 16px 0 0; padding: 10px 0;
	font-size: 12px; color: var(--qs-muted);
}
.qs-app .pager a {
	display: inline-block; padding: 5px 12px; margin: 0 6px;
	border: 1px solid var(--qs-border); border-radius: 4px;
	color: var(--qs-blue); background: #fff;
}
.qs-app .pager a:hover { background: #f0f6f9; color: var(--qs-blue-dark); text-decoration: none; }
.qs-app .pager a.hidden { visibility: hidden; }

/* ============================================================
   szamvitelirendszer.hu fejlec_top — 1:1 a site main.css-ebol
   (a felso szlogen + termek-link csik a #006496 hatteren,
    bal oldali ferde #023A55 diszelemmel)
   ============================================================ */
.fejlec_top {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	width: 100%;
	height: 41px;
	margin: 0px;
	padding: 0px;
	background: #006496;
}
.fejlec_top:after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0;
	width: calc(36% - 130px);   /* >1700px: balra a logoval (170px), majd +40px jobbra -> 130px */
	height: 41px;
	background: #023A55;
	transform: skew(-30deg);
	transform-origin: top;
}
.fejlec_top_inner {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;            /* teljes szelesseg: a tartalom a sidebar (48px) jobb szeletol indul */
	height: auto;
	margin: 0;
	padding-right: 24px;
	z-index: 2;
}
.fejlec_szlogen {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	align-content: center;
	width: auto;
	flex: 0 0 auto;
	height: auto;
	margin: 0 0 0 48px;     /* a szlogen a bal ikonsav (48px) jobb szelenel kezdodik */
	padding: 0px;
}
.fejlec_szlogen_txt {
	position: relative;
	display: flex;
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 10px 0px;
	color: #FFFFFF;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 0.9em;
}
.fejlec_linkek {
	position: relative;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: flex-end;
	width: auto;
	flex: 1 1 auto;
	height: auto;
}
.fejlec_linkek_txt {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-content: center;
	align-items: center;
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 10px 0px;
	color: #FFFFFF;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.9em;
}
.fejlec_linkek_txt a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
	width: auto;
	height: auto;
	margin: 0px 8px;
	padding: 0px;
	color: #FFFFFF;
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1em;
	transition: color 0.25s;
	cursor: pointer;
}
.fejlec_linkek_txt a:hover { color: #DDDDDD; }
.fejlec_linkek_txt a:last-of-type { margin-right: 0px; }

/* illesztes a .qs-app layouthoz: font-size: 16px -> a site body-javal egyezo alap,
   hogy az em-ben megadott szlogen/link meretek (0.9em ~ 14.4px) ugyanakkorak legyenek
   mint az eredetin (a .qs-app 13px-es alapja kulonben 11.7px-re zsugoritana).
   A .fejlec_row a .qs-app oszlop-flexben ne zsugorodjon; a fejlec_top/bottom sor-wrap
   flexben (.fejlec_row) van, ezert NINCS rajtuk flex-basis (a width:100% tordeli oket). */
.qs-app .fejlec_row { flex: 0 0 auto; }
.qs-app .fejlec_top { font-size: 16px; }
.qs-app .fejlec_linkek_txt a:hover { text-decoration: none; }

/* ============================================================
   szamvitelirendszer.hu fejlec_bottom — 1:1 a site main.css-ebol
   (vilagos #E5EFF4 alap, bal oldali FEHER (#FFFFFF) ferde diszelem;
    benne: logo + HelpDesk felirat + gyorskereso)
   ============================================================ */
.fejlec_row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--qs-border);   /* a fejlec_bottom alja: folytonos szurke vonal (a ferde sav nem takarja) */
}
.fejlec_bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	width: 100%;
	height: 70px;
	margin: 0;
	padding: 0;
	background: #E5EFF4;
}
.fejlec_bottom:after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0;
	width: calc(32% - 240px);   /* >1700px: ferde sav balra: logo (170px) + 70px */
	height: 70px;
	background: #FFFFFF;
	transform: skew(-30deg);
	transform-origin: top;
}
.fejlec_bottom_inner {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;            /* teljes szelesseg: a logo a sidebar (48px) jobb szeletol indul */
	height: 70px;
	margin: 0;
	padding-right: 24px;
	z-index: 2;
}
/* A logo-zona szelessege = a feher ferde sav szelessege -> a HelpDesk a sav utan kezdodik.
   A logo KEP a zonan belul 48px-rol indul (a bal ikonsav jobb szele). */
.fejlec_logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	align-content: center;
	width: calc(32% - 240px);   /* >1700px: a logo-zona (HelpDesk kezdete) koveti a ferde savot */
	flex: 0 0 auto;
	height: auto;
	margin: 0;
	padding: 0;
}
.fejlec_logo_img { width: 140px; margin-top: 5px; margin-left: 48px; display: block; }  /* uj logo (aranya 2.53) -> 140px = ~55px magas, mint korabban */

/* a site fejlec_main_menu-je helyett: HelpDesk felirat + gyorskereso */
.fejlec_hd {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 1 1 auto;
	width: auto;
	height: 70px;
}
.fejlec_hd_title {
	color: #006496;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 1.25em;
	white-space: nowrap;
	margin-left: 20px;           /* a ferde sav (logo-zona) utan 20px-re kezdodik */
}
.qs-app .fejlec_hd .qs-search { margin-left: 30px; }   /* a kereso a HelpDesk felirat mogott, 30px-szel */
/* QsNet azonosito mezo: rovid (a szoveg utan ~10px), nagyitoikon nelkul, 10px-szel kozelebb az elso mezohoz (30->20) */
.qs-app .fejlec_hd .qs-search.qs-search-qsnet { flex: 0 0 auto; margin-left: 20px; }
.qs-app .fejlec_hd .qs-search.qs-search-qsnet input { width: 128px; padding: 0 10px; }
.qs-app .fejlec_bottom { font-size: 16px; }

/* ============================================================
   Reszponziv "folyamatos" zsugorodas (szamvitelirendszer.hu metodus):
   fluid %-os szelessegek + max-width belso konteneer + lepcsos breakpointok,
   amik a ferde :after szelesseget es a betumereteket allitjak; 990px alatt
   a felso ferde eltunik es a sorok fuggolegesen tordelodnek.
   ============================================================ */
@media screen and (max-width: 1700px) {
	.fejlec_top:after { width: calc(33.5% - 100px); }     /* +40px jobbra (140-40) */
	.fejlec_bottom:after { width: calc(30% - 210px); }    /* 30px-szel jobbra (240-30) */
	.fejlec_logo { width: calc(30% - 210px); }            /* HelpDesk koveti a ferde savot */
}
@media screen and (max-width: 1600px) {
	.fejlec_bottom:after { width: max(calc(28% - 210px), 230px); }  /* nem csuszhat a logo ala (logo 140px) */
	.fejlec_logo { width: max(calc(28% - 210px), 230px); }          /* HelpDesk koveti a savot */
}
@media screen and (max-width: 1500px) {
	.fejlec_top:after { width: calc(33% - 80px); }        /* +40px jobbra (120-40) */
	.fejlec_szlogen_txt { font-size: 0.85em; }
	.fejlec_linkek_txt { font-size: 0.85em; }
	.fejlec_bottom:after { width: max(calc(25% - 190px), 215px); }  /* nem csuszhat a logo ala (logo 125px) */
	.fejlec_logo { width: max(calc(25% - 190px), 215px); }          /* HelpDesk koveti a savot */
	.fejlec_logo_img { width: 125px; }
}
@media screen and (max-width: 1400px) {
	.fejlec_linkek_txt a:last-of-type { display: none; }
	.fejlec_linkek_txt span { display: none; }
	.fejlec_top:after { width: calc(36% - 60px); }        /* +40px jobbra (100-40) */
	.fejlec_bottom:after { width: max(calc(23% - 170px), 200px); }  /* nem csuszhat a logo ala (logo 110px) */
	.fejlec_logo { width: max(calc(23% - 170px), 200px); }          /* HelpDesk koveti a savot */
	.fejlec_logo_img { width: 110px; }
}
@media screen and (max-width: 1300px) {
	.fejlec_top:after { width: 36%; }      /* 1300px alatt NINCS csokkentes -> eredeti elrendezes */
	.fejlec_bottom:after { width: 188px; } /* lagy atmenet: a sav tovabb tapad a logohoz (1300-as lepcso lagyitva) */
	.fejlec_logo { width: 188px; }         /* HelpDesk koveti a savot */
	.fejlec_szlogen_txt { font-size: 0.75em; }
	.fejlec_linkek_txt a { font-size: 0.85em; }
	.fejlec_logo_img { width: 100px; }
	.fejlec_hd_title { font-size: 1.1em; }
}
@media screen and (max-width: 1100px) {
	.fejlec_szlogen_txt { font-size: 0.7em; }
	.fejlec_linkek_txt label { display: none; }
	.fejlec_linkek_txt a { font-size: 0.9em; }
	.fejlec_linkek_txt a:nth-last-of-type(2) { display: none; }
	.fejlec_linkek_txt a:nth-last-of-type(3) { margin-right: 0px; }
	.fejlec_bottom { height: 60px; }
	.fejlec_bottom:after { width: 175px; height: 60px; }  /* tovabb tapad a logohoz (lagy lepcso) */
	.fejlec_bottom_inner { height: 60px; }
	.fejlec_logo { width: 175px; }
	.fejlec_logo_img { width: 90px; }
	.fejlec_hd { height: 60px; }
	.fejlec_hd_title { font-size: 1em; }
}
@media screen and (max-width: 990px) {
	.fejlec_top { height: auto; }
	.fejlec_top:after { width: 100%; transform: none; }
	.fejlec_top_inner { flex-wrap: wrap; }
	.fejlec_szlogen { width: 100%; margin-left: 0; justify-content: center; }
	.fejlec_szlogen_txt { font-size: 0.9em; justify-content: center; }
	.fejlec_linkek { width: 100%; }
	.fejlec_linkek_txt { font-size: 0.9em; justify-content: center; }
	.fejlec_linkek_txt a { font-size: 0.9em; font-weight: 500; }
	.fejlec_bottom { height: 80px; }
	.fejlec_bottom:after { width: 35%; height: 80px; }
	.fejlec_bottom_inner { height: 80px; }
	.fejlec_logo { width: 35%; }
	.fejlec_logo_img { width: 115px; }
	.fejlec_hd { height: 80px; }
	.fejlec_hd_title { font-size: 1em; }
}
@media screen and (max-width: 700px) {
	.fejlec_linkek { display: none; }
	.fejlec_bottom:after { width: 45%; }
	.fejlec_logo { width: 45%; }
}
@media screen and (max-width: 600px) {
	.fejlec_szlogen_txt { justify-content: center; }
	.fejlec_bottom:after { width: 55%; }
	.fejlec_logo { width: 55%; }
	.fejlec_hd_title { display: none; }   /* nagyon keskeny: csak a kereso marad */
	.qs-app .qs-search { flex-basis: 180px; }
}
@media screen and (max-width: 400px) {
	.fejlec_bottom:after { width: 65%; }
	.fejlec_logo { width: 65%; }
}

/* =====================================================================
   Service detail / urlap oldalak (.qs-app): hibajegy-nezet + urlapok.
   A basic.css globalis elem-szabalyait (INPUT/TEXTAREA/SELECT width:440px,
   A, stb.) a .qs-app-scope nagyobb specifikussaggal felulirja.
   ===================================================================== */

/* ---------- Cim sor (greeting alatt) ---------- */
.qs-app .qs-page-title { margin: 4px 2px 14px; font-size: 20px; font-weight: 600; color: var(--qs-blue-dark); }
.qs-app .qs-page-title .qs-page-sub { color: var(--qs-muted); font-weight: 400; }

/* ---------- Hibajegy kapcsolat-meta (email / tel / QsNet) ---------- */
.qs-app ul.qs-topic-meta {
	display: flex; flex-wrap: wrap; gap: 6px 26px; list-style: none;
	margin: 0 0 16px; padding: 12px 16px;
	background: #f5f8fa; border: 1px solid var(--qs-border); border-radius: 6px; font-size: 13px;
}
.qs-app ul.qs-topic-meta li { color: var(--qs-text); }
.qs-app ul.qs-topic-meta b { color: var(--qs-blue-dark); font-weight: 600; margin-right: 4px; }

/* ---------- Uzenetszal ---------- */
.qs-app ul.qs-thread { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.qs-app ul.qs-thread > li { display: flex; gap: 14px; align-items: flex-start; }   /* bal: info-div, jobb: szoveg-buborek */
/* bal oldali info-div: a 3 adat egymas alatt, tomor sortavval */
.qs-app ul.qs-thread .messageInfo { flex: 0 0 120px; display: flex; flex-direction: column; gap: 0; line-height: 1.3; padding-top: 0; }
/* a kezelo-nev a szal info-divben: a teteen */
.qs-app ul.qs-thread .messageInfo .name { font-weight: 700; color: var(--qs-blue-dark); font-size: 13px; line-height: 1.3; }
.qs-app ul.qs-thread .messageInfo .date,
.qs-app ul.qs-thread .messageInfo .readed { color: var(--qs-muted); font-size: 12px; }
.qs-app ul.qs-thread > li.status_3 .messageInfo b { color: #c0392b; font-weight: 600; }
/* jobb oldali szoveg-buborek (a keret/forma a <p>-n, kuldo szerinti bal szegely) */
.qs-app ul.qs-thread p {
	flex: 1 1 auto; margin: 0; padding: 10px 14px;
	border: 1px solid var(--qs-border); border-left: 4px solid var(--qs-blue);
	border-radius: 8px; background: #fff;
	font-size: 13.5px; line-height: 1.55; color: var(--qs-text);
}
.qs-app ul.qs-thread > li.client p    { border-left-color: var(--qs-amber); background: #fffdf6; }  /* ugyfel uzenete */
.qs-app ul.qs-thread > li.status_3 p  { border-left-color: var(--qs-muted); background: #f6f7f8; color: #c0392b; }  /* belso uzenet: pirosas szoveg */

/* ---------- Csatolt fajlok ---------- */
.qs-app ul.qs-files { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qs-app ul.qs-files li {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid var(--qs-border); border-radius: 4px; padding: 5px 10px; font-size: 12.5px; background: #fff;
}
.qs-app ul.qs-files a.qs-file-del { color: #c0392b; font-weight: 700; }

/* ---------- Urlapok ---------- */
.qs-app .qs-form { max-width: 800px; }   /* alap 800px, de szukebb ablaknal egyutt zsugorodik (block + max-width) */
.qs-app .qs-form ul { list-style: none; margin: 0; padding: 0; }
.qs-app .qs-form > ul > li { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.qs-app .qs-form label { font-size: 12px; font-weight: 600; color: var(--qs-blue-dark); width: auto; float: none; padding: 0; }   /* padding:0 -> a regi form.css "FORM UL LABEL" 10px-et semlegesiti */
.qs-app .qs-form input[type="text"],
.qs-app .qs-form input[type="password"],
.qs-app .qs-form textarea,
.qs-app .qs-form select {
	width: 100%; max-width: 100%; box-sizing: border-box;
	border: 1px solid #cfd4d9; border-radius: 4px; padding: 8px 10px;
	font-family: inherit; font-size: 13px; color: var(--qs-text); background: #fff;
}
.qs-app .qs-form textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.qs-app .qs-form input[type="text"]:focus,
.qs-app .qs-form textarea:focus,
.qs-app .qs-form select:focus { outline: none; border-color: var(--qs-blue); box-shadow: 0 0 0 2px rgba(0,100,150,.15); }
.qs-app .qs-form input[type="file"] { font-size: 12px; }
.qs-app .qs-form input[type="checkbox"] { width: auto; margin: 0 6px 0 0; vertical-align: middle; }

/* szuk mezok (pl. perc, rovid szam) */
.qs-app .qs-form input.qs-input-narrow { width: 80px; }
/* egy soros, tobb-kontrolos sor (pl. munka kezdete + raforditas) */
.qs-app .qs-form li.qs-row-inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.qs-app .qs-form li.qs-row-inline label { margin: 0; }

/* cimke-balra valtozat (valaszurlap): a cimsor a kontroll ELOTT, balra */
.qs-app .qs-form-inline > ul > li:not(.qs-row-inline) { flex-direction: row; align-items: flex-start; gap: 14px; }
/* cimke-oszlop: balra igazitva, fuggolegesen KOZEPRE (a szalaknal a nev a teteen marad);
   ugyanaz a kek (var(--qs-blue-dark)) mint a kezelo-nevnel, sajat szabalybol */
.qs-app .qs-form-inline > ul > li:not(.qs-row-inline) > label {
	flex: 0 0 120px; align-self: center; text-align: left; margin: 0; padding: 0;
	font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--qs-blue-dark);
}
.qs-app .qs-form-inline > ul > li > textarea,
.qs-app .qs-form-inline > ul > li > select,
.qs-app .qs-form-inline > ul > li > input[type="text"],
.qs-app .qs-form-inline > ul > li > input[type="file"] { flex: 1 1 auto; width: auto; max-width: none; }   /* kitolti az urlap (800px) jobb oldalat */
.qs-app .qs-form-inline > ul > li > .qs-actions { margin-left: 134px; }   /* gombok a kontroll-oszlop ala igazitva */
/* a nagy valasz-szovegmezo ugyanolyan buborek-keret, mint az uzenetek */
.qs-app .qs-form-inline > ul > li > textarea { border: 1px solid var(--qs-border); border-left: 4px solid var(--qs-blue); border-radius: 8px; }

/* gomb-sor: szelesebb gombok, tobb terkoz kozottuk */
.qs-app .qs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 6px; }
.qs-app .qs-btn {
	border: none; border-radius: 4px; background: var(--qs-blue-bright); color: #fff;
	font-family: inherit; font-size: 13px; font-weight: 700; padding: 11px 36px; cursor: pointer; width: auto;
}
.qs-app .qs-btn:hover { background: #1f9ad1; }
.qs-app .qs-btn-secondary {
	border: 1px solid #cfd4d9; border-radius: 4px; background: #fff; color: var(--qs-blue-dark);
	font-family: inherit; font-size: 13px; padding: 11px 34px; cursor: pointer; width: auto;
}
.qs-app .qs-btn-secondary:hover { border-color: var(--qs-blue); color: var(--qs-blue); }
.qs-app a.qs-btn-ghost { color: var(--qs-muted); font-size: 13px; align-self: center; }
.qs-app a.qs-btn-ghost:hover { color: var(--qs-blue); text-decoration: underline; }
.qs-app .qs-checkbox-inline { display: inline-flex; align-items: center; font-size: 13px; color: var(--qs-text); }

/* hibauzenetek */
.qs-app .qs-form-errors { margin: 14px 0; padding: 10px 16px; border: 1px solid #f3c2c2; background: #fcecec; border-radius: 6px; }
.qs-app .qs-form-errors ul { list-style: disc; margin: 0; padding-left: 20px; }
.qs-app .qs-form-errors li { color: #c0392b; font-size: 13px; }

/* tobb urlap egy oldalon (giveTopic): elvalaszto */
.qs-app .qs-form + .qs-form { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--qs-border); }

/* infotip (uj hibajegy: PrintScreen sugo) */
.qs-app #infotip { max-width: 800px; margin: 14px 0 0; padding: 12px 16px; background: #f5f8fa; border: 1px solid var(--qs-border); border-radius: 6px; font-size: 12.5px; line-height: 1.5; color: var(--qs-muted); }

/* =====================================================================
   Kliens-portal specifikus elemek (.qs-app)
   ===================================================================== */

/* kliens lista-tablak (mas oszlopok mint a service): a service nth-child
   szelessegek/behuzas felulirasa -> tartalom-alapu auto layout */
.qs-app table.topicList.clientList th:nth-child(n),
.qs-app table.topicList.clientList td:nth-child(n) { width: auto; white-space: normal; }
.qs-app table.topicList.clientList td:first-child { padding-left: 10px; text-indent: 0; }

/* onallo szurosav (kliens aktiv lista): nincs folotte tab-sor -> felul+oldalt keret,
   alul nincs keret/terkoz, hogy a topiclista fejlecevel egybeolvadjon */
.qs-app .qs-filterbar.qs-bar-solo { border: 1px solid var(--qs-border); border-bottom: none; border-radius: 6px 6px 0 0; margin-bottom: 0; }

/* uj tema: probléma-jelleg valaszto lista */
.qs-app .qs-choice-list { list-style: none; margin: 0; padding: 0; max-width: 640px; display: flex; flex-direction: column; gap: 10px; }
.qs-app .qs-choice-list li { margin: 0; }
.qs-app .qs-choice-list a {
	display: block; padding: 14px 18px; border: 1px solid var(--qs-border); border-left: 4px solid var(--qs-blue-bright);
	border-radius: 8px; background: #fff; color: var(--qs-blue-dark); font-size: 14px; font-weight: 600;
}
.qs-app .qs-choice-list a:hover { background: #f0f8fd; border-left-color: var(--qs-blue); }

/* radio-csoport az urlapokon (igen/nem) */
.qs-app .qs-form .qs-radios { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.qs-app .qs-form .qs-radios label { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; font-size: 13px; color: var(--qs-text); }
.qs-app .qs-form .qs-radios input[type="radio"] { width: auto; margin: 0; }

/* urlap-jegyzet (pl. lista-sablon kozbulso szovege) */
.qs-app .qs-form-note { margin: 0; font-size: 13px; font-style: italic; color: var(--qs-muted); }

/* =====================================================================
   Auth oldalak (login / elfelejtett jelszo): kozepre igazitott kartya
   ===================================================================== */
.qs-app .qs-auth-wrap { flex: 1 1 auto; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; background: #eef3f6; }
.qs-app .qs-auth-card {
	width: 100%; max-width: 420px; background: #fff;
	border: 1px solid var(--qs-border); border-radius: 10px; padding: 28px;
	box-shadow: 0 8px 28px rgba(2,58,85,.08);
}
.qs-app .qs-auth-card h1 { margin: 0 0 6px; font-size: 20px; font-weight: 600; font-family: "Poppins", sans-serif; color: #006496; text-align: center; }
.qs-app .qs-auth-card .qs-auth-sub { margin: 0 0 20px; font-size: 13px; color: var(--qs-muted); text-align: center; }
.qs-app .qs-auth-card .qs-form { max-width: none; }
.qs-app .qs-auth-card .qs-actions { display: block; margin-top: 8px; }
.qs-app .qs-auth-card .qs-actions .qs-btn { width: 100%; padding: 11px 0; }
.qs-app .qs-auth-error { margin: 0 0 16px; padding: 10px 14px; border: 1px solid #f3c2c2; background: #fcecec; border-radius: 6px; color: #c0392b; font-size: 13px; }
.qs-app a.qs-auth-link { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--qs-blue); }
.qs-app .qs-auth-note { margin: 14px 0 0; font-size: 12px; color: var(--qs-muted); line-height: 1.5; }
.qs-app .qs-form input[readonly] { background: #eef1f3; color: var(--qs-muted); }

/* login kartya: ikonos + helyorzos mezok (ugyfelkapu-stilus) */
.qs-app .qs-auth-field { position: relative; margin-bottom: 14px; }
.qs-app .qs-auth-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #9aa0a6; pointer-events: none; }
.qs-app .qs-auth-field input {
	width: 100%; height: 46px; box-sizing: border-box;
	border: 1px solid #cfd4d9; border-radius: 8px; padding: 0 14px 0 44px;
	font-family: inherit; font-size: 14px; color: var(--qs-text); background: #fff;
}
.qs-app .qs-auth-field input:focus { outline: none; border-color: var(--qs-blue); box-shadow: 0 0 0 3px rgba(0,100,150,.12); }
.qs-app .qs-auth-field input::placeholder { color: #9aa0a6; }
.qs-app .qs-auth-submit { width: 100%; padding: 13px 0; margin-top: 4px; font-size: 14px; }

/* login kartya: magasabb, kozepre igazitott tartalom + logo felul kozepen.
   A logo es a mezo/gomb-blokk azonos szelessegu (240px) es kozepre igazitott
   -> bal szeluk egy vonalban. */
.qs-app .qs-auth-card-login { text-align: center; padding: 44px 32px 40px; }
.qs-app .qs-auth-logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 auto 20px; }
/* a cim ugyanaz a font/szin mint a fejlec_hd_title ("HelpDesk" a top-bottom savban) */
.qs-app .qs-auth-card-login h1 { margin: 0 0 60px; color: #006496; font-family: "Poppins", sans-serif; font-weight: 600; }   /* +40px res a h1 alatt */
.qs-app .qs-auth-card-login .qs-auth-form { width: 240px; max-width: 100%; margin: 0 auto; text-align: left; }
/* a mezok es a gomb pontosan azonos szelessegure (240px, blokk + 100%) */
.qs-app .qs-auth-card-login .qs-auth-field { display: block; width: 100%; margin-bottom: 34px; }   /* 2. mezo 20px-szel lejjebb (14 -> 34) */
.qs-app .qs-auth-card-login .qs-auth-field input { display: block; width: 100%; }
.qs-app .qs-auth-card-login .qs-auth-submit { display: block; width: 100%; margin-top: 60px; }     /* gomb a helyen marad (80 -> 60, ellensulyozza a +20-at) */

/* ============================================================
   Markazott megerosito dialogus
   A htmx:confirm esemenyt elkapva felulirjuk a bongeszo natur
   confirm() ablakat. A markup-ot a qsConfirm.js a .qs-app ala
   injektalja, igy a fenti CSS-valtozok (--qs-*) oroklodnek.
   ============================================================ */
.qs-app .qs-confirm-overlay {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(2, 58, 85, .45);
	animation: qs-confirm-fade .12s ease-out;
}
@keyframes qs-confirm-fade { from { opacity: 0; } to { opacity: 1; } }
.qs-app .qs-confirm-card {
	width: 100%; max-width: 380px;
	background: #fff; border-radius: 12px; overflow: hidden;
	box-shadow: 0 14px 44px rgba(2, 58, 85, .28);
	animation: qs-confirm-pop .14s ease-out;
}
@keyframes qs-confirm-pop {
	from { transform: translateY(10px) scale(.98); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
.qs-app .qs-confirm-head {
	display: flex; align-items: center; gap: 11px;
	padding: 20px 22px 0;
	font-size: 16px; font-weight: 700; color: var(--qs-blue-dark);
}
.qs-app .qs-confirm-ico {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
	background: var(--qs-amber); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 17px; font-weight: 800; line-height: 1;
}
.qs-app .qs-confirm-body {
	padding: 12px 22px 20px;
	font-size: 14px; line-height: 1.5; color: var(--qs-text);
}
.qs-app .qs-confirm-actions {
	display: flex; justify-content: flex-end; gap: 12px;
	padding: 14px 22px; background: #f6f8fa; border-top: 1px solid var(--qs-border);
}
.qs-app .qs-confirm-btn {
	border: none; border-radius: 6px; font-family: inherit;
	font-size: 13px; font-weight: 700; padding: 9px 22px; cursor: pointer;
}
.qs-app .qs-confirm-cancel { background: #fff; border: 1px solid #cfd4d9; color: var(--qs-blue-dark); }
.qs-app .qs-confirm-cancel:hover { border-color: var(--qs-blue); color: var(--qs-blue); }
.qs-app .qs-confirm-ok { background: #c0392b; color: #fff; }
.qs-app .qs-confirm-ok:hover { background: #a93226; }