/* Home Assistant embed — stabiele site-topbar in normale layout-flow */
:root {
  --bp-ha-nav-h: 58px;
  --bp-site-topbar-h: 48px;
  --bp-embed-topbar-h: var(--bp-site-topbar-h);
}

html.embed,
html.embed body {
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  touch-action: manipulation;
  box-sizing: border-box !important;
}

/* iframe is al ingekort door HA — geen extra body-padding (voorkomt top-clip) */
html.embed body {
  padding-bottom: 0 !important;
}

/* Expliciete grid: vaste topbar-rij + content — nooit margin-top op .app */
html.embed .app {
  display: grid !important;
  grid-template-columns: minmax(300px, 320px) minmax(0, 1fr) !important;
  grid-template-rows: var(--bp-site-topbar-h, 48px) minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.embed.embed-has-topbar .app,
html.embed.embed-has-site-topbar .app {
  margin-top: 0 !important;
  padding-top: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* Legacy mini-bar uit op pagina's met echte site-topbar (diagram, home, docs) */
html.embed.embed-has-site-topbar #bytepro-embed-topbar {
  display: none !important;
}

/* BytePro site-topbar — in grid-flow, niet sticky (sticky faalt bij overflow:hidden) */
html.embed .header.site-topbar,
html.embed .app .header.site-topbar,
html.embed .site-topbar.site-topbar--sticky,
html.embed .vps-topbar {
  display: flex !important;
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  top: auto !important;
  z-index: 900 !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  height: var(--bp-site-topbar-h, 48px) !important;
  min-height: var(--bp-site-topbar-h, 48px) !important;
  max-height: none !important;
  padding: 6px 12px !important;
  gap: 8px !important;
  overflow: visible !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--card) !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

html.embed .site-topbar__sub {
  display: none !important;
}

html.embed .site-topbar__links {
  display: flex !important;
  flex-wrap: nowrap;
  margin-left: 4px;
}

html.embed .site-topbar__auth {
  margin-left: auto;
  flex-shrink: 0;
}

html.embed .site-topbar__title {
  font-size: 0.9rem !important;
}

html.embed .header__logo,
html.embed .site-topbar__logo {
  width: 32px !important;
  height: 32px !important;
  font-size: 10px !important;
}

@media (min-width: 640px) {
  html.embed .site-nav-toggle {
    display: none !important;
  }
}

html.embed .sidebar,
html.embed .sidebar.sidebar--diagram {
  grid-row: 2 !important;
  grid-column: 1 !important;
  max-height: none !important;
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html.embed .viewport {
  grid-row: 2 !important;
  grid-column: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

html.embed .host-layout,
html.embed .page,
html.embed .vps-page {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

html.embed .home-page,
html.embed body.docs-page {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.embed .home-page > .site-topbar,
html.embed body.docs-page > .site-topbar {
  flex: 0 0 var(--bp-site-topbar-h, 48px) !important;
}

html.embed .home-page > .home,
html.embed body.docs-page > :not(.site-topbar):not(.site-nav-overlay) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

html.embed .modal-overlay {
  z-index: 2000;
}

html.embed .modal-overlay.is-open {
  display: flex !important;
}

html.embed .site-nav-overlay.is-open {
  z-index: 3000 !important;
}

html.embed .diagram-toolbar {
  position: fixed !important;
  top: calc(var(--bp-site-topbar-h, 48px) + 8px) !important;
  right: 12px !important;
  left: auto !important;
  z-index: 200 !important;
}

html.embed .diagram-io-btns {
  position: fixed !important;
  bottom: calc(var(--bp-ha-nav-h, 58px) + 12px) !important;
  right: 12px !important;
  z-index: 200 !important;
}

html.embed .edge-route-toolbar {
  position: fixed !important;
  z-index: 200 !important;
}

html.embed .site-nav-drawer__body {
  overflow-y: auto;
  max-height: calc(100% - 80px);
  padding-bottom: calc(var(--bp-ha-nav-h, 58px) + 12px);
}

html:not(.embed) #bytepro-embed-topbar {
  display: none !important;
}

/* ── Home Assistant iframe: 100vh/100dvh = browser viewport, niet iframe ── */
html.embed.embed-ha-frame {
  --bp-iframe-h: 100%;
  height: var(--bp-iframe-h, 100%) !important;
  max-height: var(--bp-iframe-h, 100%) !important;
}

html.embed.embed-ha-frame,
html.embed.embed-ha-frame body {
  overflow: hidden !important;
  height: var(--bp-iframe-h, 100%) !important;
  max-height: var(--bp-iframe-h, 100%) !important;
  min-height: 0 !important;
  scroll-behavior: auto !important;
}

html.embed.embed-ha-frame .app {
  grid-template-rows: minmax(0, 1fr) !important;
  padding-top: var(--bp-site-topbar-h, 36px) !important;
  height: var(--bp-iframe-h, 100%) !important;
  min-height: 0 !important;
  max-height: var(--bp-iframe-h, 100%) !important;
  box-sizing: border-box !important;
}

html.embed.embed-ha-frame.embed-has-site-topbar .app {
  margin-top: 0 !important;
  padding-top: var(--bp-site-topbar-h, 48px) !important;
}

html.embed.embed-ha-frame .header.site-topbar,
html.embed.embed-ha-frame .app .header.site-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1100 !important;
  grid-row: unset !important;
  grid-column: unset !important;
  height: var(--bp-site-topbar-h, 48px) !important;
  min-height: var(--bp-site-topbar-h, 48px) !important;
  max-height: var(--bp-site-topbar-h, 48px) !important;
  transform: none !important;
  margin: 0 !important;
}

html.embed.embed-ha-frame .sidebar,
html.embed.embed-ha-frame .sidebar.sidebar--diagram {
  grid-row: 1 !important;
  grid-column: 1 !important;
}

html.embed.embed-ha-frame .viewport {
  grid-row: 1 !important;
  grid-column: 2 !important;
}

html.embed.embed-ha-frame .diagram-toolbar {
  top: calc(var(--bp-site-topbar-h, 48px) + 6px) !important;
}

/* ── HA iframe: ultra-compact topbar (36px) ── */
html.embed.embed-ha-frame.embed-compact-topbar {
  --bp-site-topbar-h: 36px;
  --bp-embed-topbar-h: 36px;
}

html.embed.embed-ha-frame.embed-compact-topbar .header.site-topbar,
html.embed.embed-ha-frame.embed-compact-topbar .app .header.site-topbar,
html.embed.embed-ha-frame.embed-compact-topbar .site-topbar.site-topbar--sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 34px !important;
  max-height: 38px !important;
  padding: 0 10px !important;
  gap: 4px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  z-index: 1200 !important;
  transform: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .site-topbar__sub,
html.embed.embed-ha-frame.embed-compact-topbar .site-nav-toggle {
  display: none !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .header__logo,
html.embed.embed-ha-frame.embed-compact-topbar .site-topbar__logo {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .site-topbar__brand {
  gap: 0 !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .site-topbar__title {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .site-topbar__links {
  gap: 2px !important;
  margin-left: 2px !important;
  flex-shrink: 0 !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .site-topbar__link {
  padding: 2px 6px !important;
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
  border-radius: 4px !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .site-topbar__link[data-nav-id="home"] {
  display: none !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .site-topbar__auth {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .site-topbar__auth .site-auth-btn,
html.embed.embed-ha-frame.embed-compact-topbar .site-topbar__auth a {
  display: none !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .header__stats {
  display: none !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .app {
  padding-top: var(--bp-site-topbar-h, 36px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .viewport {
  height: 100% !important;
  min-height: 0 !important;
}

html.embed.embed-ha-frame.embed-compact-topbar .diagram-toolbar {
  top: calc(var(--bp-site-topbar-h, 36px) + 6px) !important;
}

/* Fallback: topbar buiten beeld → force fixed + padding */
html.embed.embed-ha-frame.embed-topbar-forced-compact {
  --bp-site-topbar-h: 36px;
  --bp-embed-topbar-h: 36px;
}

html.embed.embed-ha-frame.embed-topbar-forced-compact .app {
  padding-top: 36px !important;
}

html.embed.embed-ha-frame.embed-topbar-forced-compact .header.site-topbar,
html.embed.embed-ha-frame.embed-topbar-forced-compact .app .header.site-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  z-index: 1200 !important;
  transform: none !important;
  margin: 0 !important;
}