/*
 * UI v2 — account screens (design "Mondigo képernyőterv 3": 30 Számok,
 * 31 Beállítások, 32 Vállalkozás, 37 Segítség, 38 Profil és jelszó,
 * 39 Fiók törlése). Served and injected only with QQ_UI_V2; every selector is
 * scoped under html.ui-v2 (tools/ui-v2-flag-contract_test). The components
 * come from mg.css; this file holds only the page layout and what mg.css has
 * no component for (horizontal result bars, the loss-reason bars, the people
 * list, the red delete button).
 *
 * Money is never animated: no rule here transitions or animates an amount.
 */

/* ---- the v2 pages replace the established stats and settings content ---- */
/* :where() keeps this at #view-* specificity, so the host rule below wins. */
html.ui-v2 body.v2-account #view-stats > :where(:not(#v2-account-stats)),
html.ui-v2 body.v2-account #view-settings > :where(:not(#v2-account-settings)) { display: none !important; }
/* A v2 row that keeps an established setting shows exactly that card. */
html.ui-v2 body.v2-account #view-settings > details.v2-acc-host { display: block !important; margin: 0; padding: 0 16px 24px; border: 0; background: transparent; }
html.ui-v2 body.v2-account #view-settings > details.v2-acc-host > summary { display: none !important; }
html.ui-v2 body.v2-account #view-settings > details.v2-acc-host > .settings-group-body { display: flex !important; flex-direction: column; gap: 12px; padding: 0; }
html.ui-v2 body.v2-account #view-settings > details.v2-acc-host > .settings-group-body > :not(.v2-acc-show) { display: none !important; }
html.ui-v2 body.v2-account #view-settings:not(.hidden) { display: block; }
html.ui-v2 body.v2-account #view-stats:not(.hidden),
html.ui-v2 body.v2-account #view-settings:not(.hidden) { background: var(--mg-bg-page); min-height: calc(100vh - 140px); }
/* Full-bleed like the design while one of these views is the visible one. */
html.ui-v2 body.v2-account main:has(> #view-stats:not(.hidden)),
html.ui-v2 body.v2-account main:has(> #view-settings:not(.hidden)) { padding-left: 0; padding-right: 0; }

html.ui-v2 .v2-account-root { display: block; background: transparent; }
html.ui-v2 .v2-account-root button,
html.ui-v2 .v2-account-root input,
html.ui-v2 .v2-account-root select { font-family: inherit; }
html.ui-v2 .v2-account-root a:focus-visible,
html.ui-v2 .v2-account-root button:focus-visible,
html.ui-v2 .v2-account-root input:focus-visible,
html.ui-v2 .v2-account-root select:focus-visible,
html.ui-v2 .v2-account-root summary:focus-visible,
html.ui-v2 .v2-account-root [tabindex="-1"]:focus-visible { outline: 3px solid var(--mg-focus-ring); outline-offset: 2px; }
html.ui-v2 .v2-account-root h1[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

html.ui-v2 .v2-acc-scr { max-width: var(--mg-content-max); margin: 0 auto; padding-bottom: var(--mg-space-24); display: flex; flex-direction: column; color: var(--mg-text-primary); }
html.ui-v2 .v2-acc-head { padding: var(--mg-space-6) var(--mg-space-20) 0; display: flex; flex-direction: column; gap: var(--mg-space-4); }
html.ui-v2 .v2-acc-head--sub { padding-top: var(--mg-space-4); gap: var(--mg-space-6); }
html.ui-v2 .v2-acc-gap { margin-top: var(--mg-space-12); }
html.ui-v2 .v2-acc-scr > .mg-card,
html.ui-v2 .v2-acc-scr > .mg-rows,
html.ui-v2 .v2-acc-scr > .mg-notice,
html.ui-v2 .v2-acc-scr > .mg-btn-sec,
html.ui-v2 .v2-acc-scr > .v2-acc-plan,
html.ui-v2 .v2-acc-scr > form > .mg-card,
html.ui-v2 .v2-acc-scr > form > .mg-notice,
html.ui-v2 #v2-stats-body > * { margin-left: var(--mg-space-16); margin-right: var(--mg-space-16); }
html.ui-v2 .v2-acc-pad { padding-left: var(--mg-space-14); padding-right: var(--mg-space-14); }
html.ui-v2 .v2-acc-loading { font-size: 15px; color: var(--mg-text-muted); padding: var(--mg-space-16) 0; }
html.ui-v2 .v2-acc-retry { margin-top: var(--mg-space-12); width: auto; }

/* Top bar of the inner screens: back, centred title, a balancing spacer. A screen
   without its own big heading puts its title under the bar instead (title-1, D4). */
html.ui-v2 .v2-acc-toptitle { margin: 0; font-size: 15px; font-weight: 600; text-align: center; flex: 1; min-width: 0; }
html.ui-v2 .v2-acc-topspace { width: var(--mg-touch-min); flex: none; }

/* ---- 30 Számok ---- */
html.ui-v2 #v2-stats-body { display: flex; flex-direction: column; gap: var(--mg-space-12); margin-top: var(--mg-space-14); }
html.ui-v2 .v2-acc-kpis .mg-kpi__value { overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .v2-acc-card { margin: 0; display: flex; flex-direction: column; gap: var(--mg-space-10); padding: var(--mg-space-16); }
html.ui-v2 .v2-acc-card--list { padding: var(--mg-space-14) 0 var(--mg-space-4); gap: var(--mg-space-4); }
html.ui-v2 .v2-account-root .v2-acc-card__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--mg-text-primary); }
html.ui-v2 .v2-acc-card__sub { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mg-text-muted); }
html.ui-v2 figure.v2-acc-card { margin-left: var(--mg-space-16); margin-right: var(--mg-space-16); }

html.ui-v2 .v2-acc-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mg-space-12); }
html.ui-v2 .v2-acc-hbar { display: flex; flex-direction: column; gap: var(--mg-space-6); }
html.ui-v2 .v2-acc-hbar__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mg-space-10); font-size: 14px; }
html.ui-v2 .v2-acc-hbar__name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
html.ui-v2 .v2-acc-hbar__meta { color: var(--mg-text-muted); }
html.ui-v2 .v2-acc-hbar__track { display: flex; height: 14px; min-width: 8px; }
html.ui-v2 .v2-acc-hbar__seg { flex-basis: 0; min-width: 4px; height: 100%; }
html.ui-v2 .v2-acc-hbar__seg:first-child { border-radius: var(--mg-radius-xs) 0 0 var(--mg-radius-xs); }
html.ui-v2 .v2-acc-hbar__seg:last-child { border-radius: 0 var(--mg-radius-xs) var(--mg-radius-xs) 0; }
html.ui-v2 .v2-acc-hbar__seg:only-child { border-radius: var(--mg-radius-xs); }
html.ui-v2 .v2-acc-hbar__seg + .v2-acc-hbar__seg { border-left: 2px solid var(--mg-bg-card); }
html.ui-v2 .v2-acc-hbar__seg.s1 { background: var(--mg-viz-1); }
/* #1025 point 5: the DS --mg-viz-4 (ink-300, 1.78:1 on white) fails the 3:1 graphics
   contrast; here "lost" uses the DS control-border grey (slate-500, 3.43:1), legend included. */
html.ui-v2 .mg-chart.v2-acc-card { --mg-viz-4: var(--mg-border-control); }
html.ui-v2 .v2-acc-hbar__seg.s4 { background: var(--mg-viz-4); }

html.ui-v2 .v2-acc-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mg-space-10); }
html.ui-v2 .v2-acc-reasons li { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) auto; gap: var(--mg-space-10); align-items: center; font-size: 14px; }
html.ui-v2 .v2-acc-reasons__name { overflow-wrap: anywhere; }
html.ui-v2 .v2-acc-reasons__bar { display: block; height: 10px; border-radius: 5px; background: var(--mg-border-control); }
html.ui-v2 .v2-acc-reasons__bar.is-top { background: var(--mg-text-secondary); }
html.ui-v2 .v2-acc-reasons b { font-weight: 700; min-width: 2ch; text-align: right; }

html.ui-v2 .v2-acc-people { list-style: none; margin: 0; padding: 0; }
html.ui-v2 .v2-acc-people li { display: flex; align-items: flex-start; gap: var(--mg-space-12); padding: var(--mg-space-10) var(--mg-space-14); border-top: 1px solid var(--mg-divider); }
html.ui-v2 .v2-acc-people__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.ui-v2 .v2-acc-people__name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
html.ui-v2 .v2-acc-people__meta,
html.ui-v2 .v2-acc-people__contact { font-size: 14px; color: var(--mg-text-muted); overflow-wrap: anywhere; }
html.ui-v2 .v2-acc-people__tel { display: inline-flex; align-items: center; min-height: var(--mg-touch-min); color: var(--mg-action); font-weight: 600; text-decoration: none; }

/* The established disclosure labels ("Megnyitom") and chevron are the legacy look; the table toggle is a plain link. */
html.ui-v2 .v2-account-root details > summary { position: static; padding-right: 0; list-style: none; }
html.ui-v2 .v2-account-root details > summary::-webkit-details-marker { display: none; }
html.ui-v2 .v2-account-root details > summary::before,
html.ui-v2 .v2-account-root details > summary::after { content: none !important; display: none !important; }

/* ---- 31 Beállítások ---- */
html.ui-v2 .v2-acc-who { margin-top: var(--mg-space-14); display: flex; align-items: center; gap: var(--mg-space-12); padding: var(--mg-space-14); }
html.ui-v2 .v2-acc-who__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.ui-v2 .v2-acc-who__name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
html.ui-v2 .v2-acc-who__meta { font-size: 14px; color: var(--mg-text-muted); overflow-wrap: anywhere; }
html.ui-v2 .v2-acc-plan { margin-top: var(--mg-space-10); padding: var(--mg-space-4) var(--mg-space-6) var(--mg-space-4) var(--mg-space-14); border-radius: var(--mg-radius-card); background: var(--mg-own-tint); border: 1px solid var(--mg-green-200); display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-10); min-height: 56px; }
html.ui-v2 .v2-acc-plan.is-warn { background: var(--mg-review-tint); border-color: var(--mg-review); }
html.ui-v2 .v2-acc-plan__text { font-size: 14px; font-weight: 600; color: var(--mg-own-text); }
html.ui-v2 .v2-acc-plan.is-warn .v2-acc-plan__text { color: var(--mg-review-text); }
html.ui-v2 .v2-acc-plan__link { font-size: 15px; color: var(--mg-text-primary); text-decoration: none; }
html.ui-v2 .v2-acc-plan__link .mg-row__chev { width: 16px; height: 16px; color: currentColor; }
html.ui-v2 .v2-acc-rows > li { list-style: none; }
html.ui-v2 .v2-acc-rows .mg-row { min-height: 56px; }
html.ui-v2 .v2-acc-rows .mg-row__icon { border-radius: var(--mg-radius-input); }
html.ui-v2 .v2-acc-inforow { cursor: default; }
/* A long saved text (e.g. the warranty) stays a two-line summary. */
html.ui-v2 .v2-acc-rows .mg-row__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.ui-v2 .v2-acc-scr > .mg-rows-title { margin: var(--mg-space-20) var(--mg-space-20) var(--mg-space-8); }
html.ui-v2 .v2-acc-scr--legacy { padding-bottom: var(--mg-space-8); }

/* ---- 31 › Telefon (#1064/#1065): install, notifications, devices ---- */
html.ui-v2 .v2-acc-rows .mg-row--switch[aria-disabled="true"] { cursor: progress; }
html.ui-v2 .v2-acc-rows .v2-acc-subhead { padding: var(--mg-space-10) var(--mg-space-14) var(--mg-space-4); font-size: 13px; font-weight: 700; color: var(--mg-text-muted); }
html.ui-v2 .v2-acc-device { cursor: default; padding-right: var(--mg-space-6); }
html.ui-v2 .v2-acc-device .mg-link { flex: none; }
html.ui-v2 body.v2-acc-on-sheet { overflow: hidden; }
html.ui-v2 #v2-acc-sheet, html.ui-v2 #v2-acc-sheet * { box-sizing: border-box; }
html.ui-v2 #v2-acc-sheet :focus-visible { outline: 3px solid var(--mg-focus-ring); outline-offset: 2px; }
html.ui-v2 .v2-acc-backdrop { position: fixed; inset: 0; z-index: var(--mg-z-backdrop); overflow-y: auto; }
html.ui-v2 .v2-acc-sheet { max-height: 92vh; overflow-y: auto; }
html.ui-v2 .v2-acc-sheet .mg-sheet__title:focus { outline: none; }
html.ui-v2 .v2-acc-steps { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--mg-space-10); font-size: 16px; line-height: 1.45; color: var(--mg-text-primary); }
html.ui-v2 .v2-acc-sheet-note { margin: 0; line-height: 1.45; }

/* ---- 32 Vállalkozás, 38, 39: forms ---- */
html.ui-v2 .v2-acc-form { display: flex; flex-direction: column; }
html.ui-v2 .v2-acc-fields { display: flex; flex-direction: column; gap: var(--mg-space-14); padding: var(--mg-space-16); }
html.ui-v2 .v2-acc-scr > .v2-acc-fields:first-of-type,
html.ui-v2 .v2-acc-form > .v2-acc-fields:first-child { margin-top: var(--mg-space-6); }
html.ui-v2 .v2-acc-grid { gap: var(--mg-space-10); }
html.ui-v2 .v2-acc-hint--warn { color: var(--mg-review-text); font-weight: 600; }
html.ui-v2 .v2-acc-fields .mg-input[readonly] { background: var(--mg-bg-sunken); border-color: var(--mg-ink-200); color: var(--mg-text-secondary); }
html.ui-v2 .v2-acc-fields select.mg-input { appearance: auto; }
html.ui-v2 .v2-acc-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--mg-text-on-tint); }
html.ui-v2 .v2-acc-fields .mg-hint { margin: 0; line-height: 1.45; }
html.ui-v2 .v2-acc-preview { display: flex; align-items: center; gap: var(--mg-space-10); padding: var(--mg-space-14); flex-wrap: wrap; }
html.ui-v2 .v2-acc-logo { width: 48px; height: 48px; flex: none; border-radius: var(--mg-radius-sm); background: var(--mg-ink-950); color: var(--mg-white); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; overflow: hidden; }
html.ui-v2 .v2-acc-logo img { width: 100%; height: 100%; object-fit: cover; background: var(--mg-white); }
html.ui-v2 .v2-acc-preview__main { flex: 1; min-width: 10em; display: flex; flex-direction: column; }
html.ui-v2 .v2-acc-preview__name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
html.ui-v2 .v2-acc-preview__meta { font-size: 14px; color: var(--mg-text-muted); }
html.ui-v2 .v2-acc-preview__acts { display: flex; align-items: center; gap: var(--mg-space-4); flex-wrap: wrap; }
html.ui-v2 .v2-acc-foot { margin: var(--mg-space-20) var(--mg-space-16) 0; display: flex; flex-direction: column; gap: var(--mg-space-6); }
html.ui-v2 .v2-acc-foot .mg-btn[aria-disabled="true"] { pointer-events: none; }
html.ui-v2 .v2-acc-center { justify-content: center; font-size: 15px; font-weight: 600; }
html.ui-v2 .v2-acc-wide { width: auto; }

/* ---- 37 Segítség ---- */
html.ui-v2 .v2-acc-help { display: flex; flex-direction: column; gap: var(--mg-space-10); padding: var(--mg-space-16); margin-top: var(--mg-space-20); }
html.ui-v2 .v2-acc-help .mg-btn,
html.ui-v2 .v2-acc-help .mg-btn-sec { text-decoration: none; }
html.ui-v2 .v2-acc-help__note { text-align: center; font-size: 14px; color: var(--mg-text-muted); overflow-wrap: anywhere; }

/* ---- 39 Fiók törlése ---- */
html.ui-v2 .v2-acc-dl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mg-space-10); }
html.ui-v2 .v2-acc-dl li { display: flex; gap: var(--mg-space-10); align-items: flex-start; font-size: 15px; line-height: 1.4; }
html.ui-v2 .v2-acc-dl__x { color: var(--mg-danger); display: inline-flex; margin-top: 2px; }
html.ui-v2 .v2-acc-fields .mg-check { padding-top: 0; padding-bottom: 0; }
html.ui-v2 .v2-acc-fields .mg-check__input { top: 0; }
html.ui-v2 .v2-acc-danger-btn { min-height: var(--mg-cta-height); width: 100%; border: none; border-radius: var(--mg-radius-control); background: var(--mg-danger); color: var(--mg-white); font-size: 17px; font-weight: 700; cursor: pointer; transition: transform var(--mg-motion-fast) var(--mg-ease-standard); }
html.ui-v2 .v2-acc-danger-btn:disabled { background: var(--mg-action-disabled); color: var(--mg-on-action-disabled); cursor: not-allowed; }
html.ui-v2 .v2-acc-danger-btn:active:not(:disabled) { transform: scale(.98); }
@media (hover: hover) {
  html.ui-v2 .v2-acc-danger-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--mg-danger), var(--mg-ink-950) 6%); }
}

@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .v2-acc-danger-btn,
  html.ui-v2 .v2-account-root .mg-row { transition: none; }
  html.ui-v2 .v2-acc-danger-btn:active:not(:disabled) { transform: none; }
}

/* Settings sections: one column on the phone. */
html.ui-v2 .v2-acc-sect > .mg-rows { margin: 0 var(--mg-space-16); }

/* ---- Desktop (≥1024 px): use the width (audit §7 lesson 4) ---- */
@media (min-width: 1024px) {
  html.ui-v2 .v2-acc-scr[data-screen="home"],
  html.ui-v2 #v2-account-stats .v2-acc-scr { max-width: 1040px; }
  html.ui-v2 #v2-stats-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  html.ui-v2 #v2-stats-body > .v2-acc-kpis { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.ui-v2 #v2-stats-body > #v2-stats-customers,
  html.ui-v2 #v2-stats-body > .mg-notice,
  html.ui-v2 #v2-stats-body > .v2-acc-retry,
  html.ui-v2 #v2-stats-body > .v2-acc-loading,
  html.ui-v2 #v2-stats-body > #v2-stats-none { grid-column: 1 / -1; }
  html.ui-v2 #v2-stats-body > figure.v2-acc-card { margin-right: 0; }
  html.ui-v2 #v2-stats-body > #v2-stats-loss { margin-left: 0; }
  html.ui-v2 #v2-stats-customers .v2-acc-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ui-v2 .v2-acc-sects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--mg-space-16); padding: 0 var(--mg-space-16); align-items: start; }
  html.ui-v2 .v2-acc-sect > .mg-rows { margin: 0; }
  html.ui-v2 .v2-acc-sect > .mg-rows-title { margin-left: var(--mg-space-4); margin-right: var(--mg-space-4); }
  html.ui-v2 .v2-acc-scr[data-screen="home"] > .v2-acc-who,
  html.ui-v2 .v2-acc-scr[data-screen="home"] > .v2-acc-plan,
  html.ui-v2 .v2-acc-scr[data-screen="home"] > .mg-rows { max-width: 528px; }
  html.ui-v2 .v2-acc-scr[data-screen="business"] { max-width: 760px; }
  html.ui-v2 .v2-acc-form > .v2-acc-fields:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-14) var(--mg-space-16); align-items: start; }
}