/**
 * Shell layout: fixed header + MFE area below. Scroll stays inside #mfe-root.
 * Exports --bsc-shell-header-height and --bsc-mfe-height for MFE chrome.
 */
:root {
  --bsc-shell-header-height: 4rem; /* 64px */
  --bsc-mfe-height: calc(100dvh - var(--bsc-shell-header-height));
}

html {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

#header-root {
  position: relative;
  z-index: 10050;
  flex: 0 0 var(--bsc-shell-header-height);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}

#mfe-root {
  position: relative;
  z-index: 0;
  flex: 0 0 var(--bsc-mfe-height);
  height: var(--bsc-mfe-height);
  max-height: var(--bsc-mfe-height);
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/** Active single-spa app root: fill #mfe-root (avoid body scroll / bleed-through). */
#mfe-root > * {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}