/* portalApp -- authenticated dashboard: left sidebar + content (app_<lang>.tpl chrome).
   All brand values come from the --hg-* tokens (rebrand-safe). */
.hgapp-body { margin: 0; background: var(--hg-bg); color: var(--hg-body); }

.hgapp-shell { display: flex; min-height: 100vh; align-items: stretch; }

/* ---- sidebar ---- */
.hgapp-sidebar {
	width: 250px; flex-shrink: 0; box-sizing: border-box;
	background: var(--hg-ink); color: #fff;
	display: flex; flex-direction: column;
	padding: 20px 14px; position: sticky; top: 0; height: 100vh;
}
.hgapp-logo {
	font-family: var(--hg-font-head); font-weight: 700; font-size: 1.4rem;
	color: #fff !important; text-decoration: none; letter-spacing: -0.02em;
	padding: 6px 10px 22px;
}
.hgapp-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hgapp-navlink {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 12px; border-radius: 10px;
	color: rgba(255, 255, 255, .75); text-decoration: none; font-weight: 500;
	transition: background .15s ease, color .15s ease;
}
.hgapp-navlink i { width: 18px; text-align: center; font-size: .95rem; }
.hgapp-navlink:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.hgapp-navlink.is-active { background: var(--hg-primary); color: #fff; }

/* ---- user box (sidebar bottom) ---- */
.hgapp-userbox {
	display: flex; align-items: center; gap: 8px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 14px; margin-top: 14px;
}
.hgapp-user { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex: 1; min-width: 0; }
.hgapp-avatar {
	width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
	background: var(--hg-primary); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.hgapp-username { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hgapp-logout { color: rgba(255, 255, 255, .65); text-decoration: none; padding: 8px 9px; border-radius: 8px; flex-shrink: 0; }
.hgapp-logout:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---- language switcher (i18n F2, pixel design) ---- */
.hgapp-langswitch { position: relative; flex-shrink: 0; }
.hgapp-lang-btn {
	display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
	background: transparent; border: 0; border-radius: 8px; cursor: pointer;
	color: rgba(255, 255, 255, .75); font: inherit; font-size: .82rem; font-weight: 600;
}
.hgapp-lang-btn:hover, .hgapp-lang-btn.is-open { background: rgba(255, 255, 255, .1); color: #fff; }
.hgapp-lang-btn i.fa-globe { font-size: .9rem; }
.hgapp-lang-btn .hgapp-lang-caret { font-size: .65rem; opacity: .7; transition: transform .15s ease; }
.hgapp-lang-btn.is-open .hgapp-lang-caret { transform: rotate(180deg); }
.hgapp-lang-menu {
	position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 40;
	min-width: 170px; margin: 0; padding: 6px; list-style: none;
	background: #fff; border: 1px solid var(--hg-line); border-radius: 10px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.hgapp-langswitch.is-open .hgapp-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hgapp-lang-opt {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
	border: 0; background: none; text-align: left; font: inherit; font-size: .87rem; font-weight: 500;
	color: var(--hg-body); padding: 9px 10px; border-radius: 7px; cursor: pointer;
}
.hgapp-lang-opt:hover { background: var(--hg-bg); color: var(--hg-ink); }
.hgapp-lang-opt.is-active { color: var(--hg-ink); font-weight: 700; }
.hgapp-lang-opt .fa-check { color: var(--hg-primary); font-size: .78rem; }
.hgapp-lang-opt .hgapp-lang-opt-code { font-size: .72rem; color: var(--hg-muted); font-weight: 600; margin-left: auto; margin-right: 4px; }
.hgapp-lang-opt.is-active .hgapp-lang-opt-code { color: var(--hg-muted); }

/* ---- content ---- */
.hgapp-content { flex: 1; min-width: 0; padding: 32px 36px; }
.hgapp-panel { max-width: 1080px; }
#hgApp { min-height: 200px; }

/* ---- responsive: sidebar -> top bar on small screens ---- */
@media (max-width: 768px) {
	.hgapp-shell { flex-direction: column; }
	.hgapp-sidebar {
		width: 100%; height: auto; position: static;
		flex-direction: row; align-items: center; gap: 8px;
		padding: 10px 14px; overflow-x: auto;
	}
	.hgapp-logo { padding: 0 12px 0 4px; }
	.hgapp-nav { flex-direction: row; flex: 1; gap: 2px; overflow-x: auto; }
	.hgapp-navlink span { display: none; }
	.hgapp-navlink { padding: 10px 12px; }
	.hgapp-userbox { border-top: 0; padding-top: 0; margin-top: 0; border-left: 1px solid rgba(255,255,255,.12); padding-left: 10px; }
	.hgapp-username { display: none; }
	.hgapp-lang-btn .hgapp-lang-code { display: none; }
	.hgapp-lang-menu { bottom: auto; top: calc(100% + 8px); right: 0; }
	.hgapp-content { padding: 20px 16px; }
}

/* ---- Statisztikák (aggregate overview) ---- */
.hgapp-h1 { font-family: var(--hg-font-head); color: var(--hg-ink); font-size: 1.5rem; margin: 0 0 24px; display: flex; align-items: center; gap: 10px; }
.hgapp-h1 i { color: var(--hg-primary); }
.hgapp-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.hgapp-stat {
	background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius);
	padding: 20px 22px; display: flex; flex-direction: column; gap: 4px;
}
.hgapp-stat-num { font-family: var(--hg-font-head); font-weight: 700; font-size: 1.9rem; color: var(--hg-ink); }
.hgapp-stat-label { font-size: .9rem; color: var(--hg-muted); }
.hgapp-stat--up .hgapp-stat-num { color: var(--hg-success); }
.hgapp-stat--down .hgapp-stat-num { color: var(--hg-danger); }
.hgapp-stat--degraded .hgapp-stat-num { color: var(--hg-warning); }
.hgapp-empty { margin-top: 24px; color: var(--hg-muted); }

/* --- f48 r2: header + site selector --- */
.hgapp-stats-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.hgapp-stats-head .hgapp-h1 { margin: 0; }
.hgapp-scope { display: flex; align-items: center; gap: 10px; }
.hgapp-scope-label { font-size: .88rem; color: var(--hg-muted); }
.hgapp-scope-select {
	font: inherit; padding: 8px 34px 8px 12px; border: 1px solid var(--hg-line);
	border-radius: 10px; background: #fff; color: var(--hg-ink); cursor: pointer;
	appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M3 4.5 6 8l3-3.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
.hgapp-scope-select:focus { outline: none; border-color: var(--hg-primary); box-shadow: 0 0 0 .2rem rgba(13,148,136,.15); }

/* --- clickable cards --- */
.hgapp-stat--btn, .hgapp-stat--link {
	font: inherit; text-align: left; text-decoration: none; cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.hgapp-stat--btn:hover, .hgapp-stat--link:hover { border-color: var(--hg-primary); box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.hgapp-stat--btn:active, .hgapp-stat--link:active { transform: translateY(1px); }
.hgapp-stat--btn:focus-visible, .hgapp-stat--link:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }
.hgapp-stat-go { font-size: .72em; margin-left: 4px; opacity: .5; }
.hgapp-stats-grid.is-loading { opacity: .5; pointer-events: none; }

/* --- drill-down list --- */
.hgapp-drill { margin-top: 22px; background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: 20px 22px; }
.hgapp-drill-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hgapp-drill-title { font-family: var(--hg-font-head); font-size: 1.1rem; color: var(--hg-ink); margin: 0; }
.hgapp-drill-close { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--hg-muted); cursor: pointer; padding: 0 6px; }
.hgapp-drill-close:hover { color: var(--hg-ink); }
.hgapp-drill-empty, .hgapp-drill-loading { color: var(--hg-muted); margin: 6px 0; }
.hgapp-drill-table { width: 100%; border-collapse: collapse; }
.hgapp-drill-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hg-muted); font-weight: 600; text-align: left; padding: 6px 10px 8px; border-bottom: 1px solid var(--hg-line); }
.hgapp-drill-table td { padding: 10px; border-bottom: 1px solid var(--hg-line); vertical-align: top; font-size: .92rem; }
.hgapp-drill-table tr:last-child td { border-bottom: 0; }
.hgapp-drill-url { color: var(--hg-muted); font-size: .82rem; }
.hgapp-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .76rem; font-weight: 600; color: #fff; text-transform: capitalize; }
.hgapp-badge--up { background: var(--hg-success); }
.hgapp-badge--down { background: var(--hg-danger); }
.hgapp-badge--degraded { background: var(--hg-warning); }

/* --- 30-day chart --- */
.hgapp-chart-wrap { margin-top: 26px; background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: 22px 24px; }
.hgapp-chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.hgapp-chart-title { font-family: var(--hg-font-head); font-size: 1.1rem; color: var(--hg-ink); margin: 0; }
.hgapp-metrics { display: inline-flex; border: 1px solid var(--hg-line); border-radius: 10px; overflow: hidden; }
.hgapp-metric { font: inherit; font-size: .84rem; border: 0; background: #fff; color: var(--hg-body); padding: 8px 14px; cursor: pointer; border-right: 1px solid var(--hg-line); }
.hgapp-metric:last-child { border-right: 0; }
.hgapp-metric:hover { background: var(--hg-bg); }
.hgapp-metric.is-active { background: var(--hg-primary); color: #fff; }
.hgapp-chart { width: 100%; }
.hgapp-svg { width: 100%; height: auto; display: block; }
.hgapp-grid { stroke: var(--hg-line); stroke-width: 1; }
.hgapp-ylab, .hgapp-xlab { fill: var(--hg-muted); font-size: 10px; font-family: inherit; }
.hgapp-bar { fill: var(--hg-primary); opacity: .82; cursor: pointer; }
.hgapp-bar:hover { opacity: 1; }
.hgapp-bar.is-sel { fill: var(--hg-ink); opacity: 1; }
.hgapp-chart-empty { color: var(--hg-muted); text-align: center; padding: 40px 0; }
.hgapp-chart-detail { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: var(--hg-body); min-height: 1.2em; }
.hgapp-detail-day { font-weight: 600; color: var(--hg-ink); }
.hgapp-detail-item b { font-weight: 600; color: var(--hg-ink); }

@media (max-width: 575.98px) {
	.hgapp-drill { padding: 14px 16px; overflow-x: auto; }
	.hgapp-chart-wrap { padding: 16px; }
}
/* ---- dashboard chrome (Bootstrap 5 defaults -> hg-tokens; shared across all panels: --
   Weboldalak, Profil, Elofizetes, Szamlak. Panel-agnostic, no page-specific hacks.) ---- */
.hgapp-content .btn-primary {
	--bs-btn-bg: var(--hg-primary); --bs-btn-border-color: var(--hg-primary);
	--bs-btn-hover-bg: var(--hg-primary-dark); --bs-btn-hover-border-color: var(--hg-primary-dark);
	--bs-btn-active-bg: var(--hg-primary-dark); --bs-btn-active-border-color: var(--hg-primary-dark);
	--bs-btn-disabled-bg: var(--hg-primary); --bs-btn-disabled-border-color: var(--hg-primary);
	--bs-btn-focus-shadow-rgb: 13, 148, 136;
}
.hgapp-content .btn-outline-danger {
	--bs-btn-color: var(--hg-danger); --bs-btn-border-color: var(--hg-danger);
	--bs-btn-hover-bg: var(--hg-danger); --bs-btn-hover-border-color: var(--hg-danger);
}
.hgapp-content .btn-outline-warning {
	--bs-btn-color: var(--hg-warning); --bs-btn-border-color: var(--hg-warning);
	--bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--hg-warning); --bs-btn-hover-border-color: var(--hg-warning);
}
.hgapp-content .btn-outline-secondary {
	--bs-btn-color: var(--hg-body); --bs-btn-border-color: var(--hg-line);
	--bs-btn-hover-bg: var(--hg-bg); --bs-btn-hover-color: var(--hg-ink); --bs-btn-hover-border-color: var(--hg-line);
}
.hgapp-content .btn-link { --bs-btn-color: var(--hg-primary); --bs-btn-hover-color: var(--hg-primary-dark); }

/* status badges -- semantic meaning (up/down/degraded) kept, colors token-driven for rebrand-safety */
.hgapp-content .badge.text-bg-success { background-color: var(--hg-success) !important; }
.hgapp-content .badge.text-bg-danger { background-color: var(--hg-danger) !important; }
.hgapp-content .badge.text-bg-warning { background-color: var(--hg-warning) !important; color: #fff !important; }
.hgapp-content .badge.text-bg-secondary { background-color: var(--hg-muted) !important; }

/* panel cards + table polish */
.hgapp-content h4 { font-family: var(--hg-font-head); color: var(--hg-ink); font-size: 1.15rem; }
.hgapp-content h4 i { color: var(--hg-primary); font-size: .95em; }
.hgapp-content .card { border-color: var(--hg-line); border-radius: var(--hg-radius); }
.hgapp-content .hg-panel { background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: 24px; }
.hgapp-content .table { --bs-table-striped-bg: var(--hg-bg); margin-bottom: 0; }
.hgapp-content .table > thead > tr > th {
	font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
	color: var(--hg-muted); font-weight: 600; border-bottom-color: var(--hg-line);
	padding-bottom: 10px;
}
.hgapp-content .table > tbody > tr > td { border-color: var(--hg-line); padding-top: 12px; padding-bottom: 12px; }
.hgapp-content .table > tbody > tr:hover > td { background-color: var(--hg-bg); }
.hgapp-content .form-control:focus, .hgapp-content .form-select:focus {
	border-color: var(--hg-primary); box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .15);
}

@media (max-width: 575.98px) {
	.hgapp-content .hg-panel-list > .d-flex { flex-wrap: wrap; gap: 10px; }
	.hgapp-content .hg-panel { padding: 16px; }
}

/* ---- Profil panel (narrow form column; monitor/stats panels stay 1080) ---- */
.hgapp-panel--narrow { max-width: 720px; }
.hgapp-panel__head { margin-bottom: 24px; }
.hgapp-panel__head h1 { font-family: var(--hg-font-head); font-size: 1.6rem; color: var(--hg-ink); margin: 0 0 4px; }
.hgapp-panel__sub { color: var(--hg-muted); margin: 0; }
.hg-profil { background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: 26px; }
.hg-profil__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hg-profil__section { font-family: var(--hg-font-head); font-weight: 600; color: var(--hg-ink); margin: 20px 0 6px; padding-top: 14px; border-top: 1px solid var(--hg-line); }
.hg-help { display: block; font-size: .82rem; color: var(--hg-muted); margin-top: 4px; }
.hg-profil .hg-btn { margin-top: 8px; }

/* ---- Danger zone ---- */
.hg-danger { margin-top: 28px; background: #fff; border: 1px solid #fecaca; border-radius: var(--hg-radius); padding: 24px; }
.hg-danger h2 { font-family: var(--hg-font-head); font-size: 1.15rem; color: #b91c1c; margin: 0 0 6px; }
.hg-danger p { color: var(--hg-body); font-size: .92rem; margin: 0 0 14px; }
.hg-btn--danger { background: #b91c1c; color: #fff; border: 0; }
.hg-btn--danger:hover { background: #991b1b; color: #fff; }
.hg-btn--danger:disabled { opacity: .6; cursor: default; }

@media (max-width: 620px) {
	.hg-profil__grid { grid-template-columns: 1fr; }
}

/* ---- Ötletláda (idea box) ---------------------------------------------- */
.hg-idea-form { margin-bottom: 8px; }
.hg-idea-gate {
	display: flex; align-items: center; gap: 12px;
	background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
	border-radius: var(--hg-radius); padding: 16px 18px; margin-bottom: 8px; font-weight: 600;
}
.hg-idea-gate i { font-size: 1.1rem; }
.hg-idea-list { margin-top: 32px; }
.hg-idea-list__title { font-family: var(--hg-font-head); color: var(--hg-ink); font-size: 1.15rem; margin: 0 0 16px; }
.hg-idea-item {
	background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius);
	padding: 16px 18px; margin-bottom: 14px;
}
.hg-idea-item__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hg-idea-item__subject { font-weight: 700; color: var(--hg-ink); }
.hg-idea-item__meta { font-size: .82rem; color: var(--hg-muted); margin: 4px 0 10px; }
.hg-idea-item__body { color: var(--hg-body); white-space: normal; }
.hg-idea-item__reply {
	margin-top: 14px; padding: 12px 14px; background: #ecfdf5;
	border-left: 4px solid var(--hg-success); border-radius: 8px;
}
.hg-idea-item__reply-label { font-weight: 700; color: #065f46; margin-bottom: 4px; font-size: .85rem; }
.hg-idea-badge { font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.hg-idea-badge--new { background: #fef3c7; color: #92400e; }
.hg-idea-badge--answered { background: #d1fae5; color: #065f46; }
.hg-idea-badge--closed { background: #e5e7eb; color: #374151; }
.hg-idea-empty { color: var(--hg-muted); }

/* type selector (bug / idea) + list kind tag */
.hg-idea-kind { display: flex; gap: 10px; flex-wrap: wrap; }
.hg-idea-kind__opt {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	border: 1px solid var(--hg-line); border-radius: 10px; padding: 8px 16px; font-weight: 600;
	color: var(--hg-body); background: #fff; user-select: none;
}
.hg-idea-kind__opt input { accent-color: var(--hg-primary); }
.hg-idea-kind__opt:has(input:checked) { border-color: var(--hg-primary); background: rgba(13,148,136,.06); color: var(--hg-ink); }
.hg-idea-kind-tag { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-right: 8px; text-transform: uppercase; letter-spacing: .3px; }
.hg-idea-kind-tag--bug { background: #fee2e2; color: #991b1b; }
.hg-idea-kind-tag--idea { background: #dbeafe; color: #1e40af; }