/* UI v2 — app shell over the established header (.top) and bottom nav (#nav).
   The legacy elements and their handlers stay; only their look follows the
   design system (BottomNav, CompanyHeader, decisions D4, D7, D8). Every
   selector is scoped under html.ui-v2. */
html.ui-v2 body { background: var(--mg-bg-page); color: var(--mg-text-primary); padding-bottom: calc(var(--mg-nav-height) + env(safe-area-inset-bottom, 0px)); }

/* Header: light bar, wordmark left, free-send chip and avatar right. */
html.ui-v2 header.top { background: var(--mg-bg-page); color: var(--mg-text-primary); border-bottom: 0; min-height: 56px; padding: 0 16px 0 20px; gap: 10px; }
html.ui-v2 header.top .brand-organizer-mark { display: none; }
html.ui-v2 header.top .logo { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--mg-text-primary); }
html.ui-v2 header.top .logo .go { color: var(--mg-green-700); }
html.ui-v2 header.top .who { display: none; }
html.ui-v2 .v2-shell-right { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
html.ui-v2 .v2-shell-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--mg-done-tint); color: var(--mg-own-text); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
/* display:inline-flex above would win over the hidden attribute: an empty pill (W6 N9). */
html.ui-v2 .v2-shell-chip[hidden], html.ui-v2 .v2-shell-right[hidden] { display: none; }
html.ui-v2 .v2-shell-chip.is-warn { background: var(--mg-yellow-100); color: var(--mg-yellow-800); }
html.ui-v2 .v2-shell-av { width: 48px; height: 48px; padding: 4px; border: 0; background: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
html.ui-v2 .v2-shell-av span { width: 40px; height: 40px; border-radius: 50%; background: var(--mg-done-tint); color: var(--mg-own-text); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
html.ui-v2 .v2-shell-av:focus-visible { outline: 3px solid var(--mg-ink-950); outline-offset: 0; }

/* Bottom nav: 72px + safe area, five 48px+ items, active = action colour + bold. */
html.ui-v2 nav.tabs { height: calc(var(--mg-nav-height) + env(safe-area-inset-bottom, 0px)); background: var(--mg-bg-card); border-top: 1px solid var(--mg-border-card); box-shadow: none; padding-bottom: env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; }
html.ui-v2 nav.tabs.hidden { display: none; }
html.ui-v2 nav.tabs button { min-height: var(--mg-touch-min); gap: 4px; padding: 0 2px; color: var(--mg-text-muted); font-size: 12px; font-weight: 500; font-family: inherit; }
html.ui-v2 nav.tabs button .ic { font-size: inherit; background: none !important; padding: 0 !important; transform: none !important; }
html.ui-v2 nav.tabs button .nav-icon { width: 24px; height: 24px; stroke-width: 2; }
html.ui-v2 nav.tabs button[aria-current="page"] { color: var(--mg-action); font-weight: 700; background: none; }
html.ui-v2 nav.tabs button[aria-current="page"]::before { content: none; }
html.ui-v2 nav.tabs button:focus-visible { outline: 3px solid var(--mg-ink-950); outline-offset: -3px; }
html.ui-v2 nav.tabs button:active { transform: scale(.98); }
@media (hover: hover) { html.ui-v2 nav.tabs button:hover:not([aria-current="page"]) { background: var(--mg-bg-subtle); color: var(--mg-text-primary); } }
html.ui-v2 nav.tabs .nav-label { white-space: nowrap; }

/* Desktop (≥900px): one white top bar, the nav inline with an underline. */
@media (min-width: 900px) {
  html.ui-v2 body { padding-bottom: 0; }
  html.ui-v2 header.top { background: var(--mg-bg-card); min-height: 64px; padding: 0 24px; }
  html.ui-v2 nav.tabs { position: sticky; top: 0; height: 56px; display: flex; gap: 4px; max-width: none; border-radius: 0; border-top: 0; border-bottom: 1px solid var(--mg-border-card); padding: 0 24px; background: var(--mg-bg-card); }
  html.ui-v2 nav.tabs button { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 0 14px; font-size: 15px; font-weight: 600; color: var(--mg-text-secondary); border-bottom: 3px solid transparent; }
  html.ui-v2 nav.tabs button .nav-icon { width: 20px; height: 20px; }
  html.ui-v2 nav.tabs button[aria-current="page"] { border-bottom-color: var(--mg-action); background: none; }
}
@media (prefers-reduced-motion: reduce) { html.ui-v2 nav.tabs button:active { transform: none; } }
/* The established editor hides the nav on phones while a draft is open; on the
   v2 Main screen it stays, so Ajánlatok is one tap away with a draft open. */
@media (max-width: 899px) { html.ui-v2 body.v2-flow.v2-main.mq-editing nav.tabs:not(.hidden) { display: grid; } }