/*
 * Freva Data Browser embed; host-side layout only.
 */

/* Full-bleed: drop Material's content max-width / centering on this page. */
body.waterpark-databrowser-page .md-main__inner,
body.waterpark-databrowser-page .md-content,
body.waterpark-databrowser-page .md-content__inner {
  max-width: none;
  margin: 0;
}

body.waterpark-databrowser-page .md-content__inner {
  padding: 0;
  min-height: 0;
}
body.waterpark-databrowser-page .md-content__inner > h1:first-child {
  display: none;
}
body.waterpark-databrowser-page .md-content__inner::before {
  display: none;
}

/* TODO: fix in upstream. The widget's internal layers, sticky list head run to very
   high z-indexes while Material's header sits at 2. Without a stacking context of
   its own the mount shares Material's, and those layers paint over the nav.
   `isolation` contains them; `z-index: 0` keeps the region under the header. */
body.waterpark-databrowser-page .md-main {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* The page-level layer the terminal window and the File Inspector mount into.
   Fixed and viewport-sized, so the widget gives a window that drags
   anywhere on the page, docks at the bottom of the SCREEN, and maximizes to the
   whole viewport. */
#waterpark-databrowser-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
#waterpark-databrowser-overlay > * {
  pointer-events: auto;
}

/* The pick bar sits at the bottom of the WIDGET */
body.waterpark-databrowser-page .freva-db .pickbar {
  position: fixed;
}

/* 2. Mount sizing */
.waterpark-databrowser-wrapper {
  width: 100%;
}
body.waterpark-databrowser-page #databrowser-mount {
  display: block;
  width: 100%;
  max-width: 100%;
  /* --wp-chrome is header + sticky tab bar, measured by waterpark-chrome.js.
     --md-header-height alone misses the tab bar, which left the mount about
     48px taller than its space: the document then scrolled by that much and
     every wheel event that bottomed out inside the widget dragged it. */
  height: calc(100dvh - var(--wp-chrome, 96px));
  min-height: 680px;
  overflow: hidden;
  /* Material sets overscroll-behavior nowhere, so without this a scroll that
     reaches the end of one of the widget's inner lists chains to the page. */
  overscroll-behavior: contain;
}

/* Belt and braces: with nothing to scroll, the chain has nowhere to go even
   if the height is a pixel or two out. Above the mount's own floor only, so
   a short window can still reach the bottom of the app. */
@media screen and (min-height: 680px) {
  body.waterpark-databrowser-page {
    overflow: hidden;
  }
}

body.waterpark-databrowser-page .md-sidebar__scrollwrap {
  overscroll-behavior: contain;
}

/* Accent to Waterpark dominant colour (teal `--md-primary-fg-color`). */
body.waterpark-databrowser-page .freva-db {
  --accent: var(--md-primary-fg-color, #009688);
  --accent-2: var(--md-primary-fg-color--dark, #00695c);
}

/* Loader error fallback */
.waterpark-databrowser-error {
  margin: 2rem auto;
  max-width: 40rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
  border-left: 4px solid var(--md-primary-fg-color, #009688);
  border-radius: 6px;
  color: var(--md-default-fg-color, #333);
  background: var(--md-default-bg-color, #fff);
  font-size: 0.8rem;
}