/* Boot gate — prevents an unstyled flash while per-component CSS files
   are fetched by injectStyles(). index.html sets html.app-booting; once
   <iot-app> has rendered and fonts are ready, main.js drops the class
   and the shell fades in. */
html.app-booting {
  background: var(--color-bg-soft);
}
html.app-booting iot-app {
  opacity: 0;
}
iot-app {
  opacity: 1;
  transition: opacity 0.1s ease-out;
}

iot-app {
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  /* Single auto column constrained to the viewport width — without an
     explicit grid-template-columns, the implicit column sizes to its
     contents' min-content, which lets wide rows (data tables, long
     device names) push the shell wider than the viewport on phones.
     The minmax(0, 1fr) lets the column shrink below content
     min-content so descendants must obey the viewport. */
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 100dvh;
  block-size: 100dvh;
  padding-inline-start: var(--safe-left);
  padding-inline-end: var(--safe-right);

  main.iot-app__main {
    grid-row: 2;
    overflow: auto;
    /* Reserve space for the vertical scrollbar even when the page
       isn't long enough to need one. Without this, switching between
       a short page (no scrollbar) and a long page (scrollbar) shifts
       all centered content by ~15px because the scrollbar steals
       width from the viewport. */
    scrollbar-gutter: stable;
    min-inline-size: 0;
    /* Single root vertical scroll container per spec §5.1; views
       must not introduce nested overflow:auto. Padding-bottom honors
       the keyboard offset so sticky action bars stay above the OSK. */
    padding-block-end: var(--keyboard-offset);
  }

  /* Login phase has no header/footer — collapse the empty grid rows
     so the wrapper main occupies the full viewport. */
  &[data-phase="login"] {
    grid-template-rows: 1fr;

    .iot-app__login-wrapper {
      background-image: url("/core/static/assets/images/soolo-login-background.svg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      @media (prefers-reduced-motion: reduce) {
        background-image: url("/core/static/assets/images/soolo-login-background-still.svg");
      }
    }
  }

  &[data-phase="booting"],
  &[data-phase="loading"],
  &[data-phase="error"] {
    grid-template-rows: 1fr;
  }

  .iot-app__loading,
  .iot-app__login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
    overflow: auto;
  }
}

/* Low-end hardware and non-Chromium browsers (Safari, Firefox, Edge) get
   the still background — the inline script in index.html sets this
   attribute before CSS evaluates so there is no flicker. */
html[data-low-end="true"] iot-app[data-phase="login"] .iot-app__login-wrapper {
  background-image: url("/core/static/assets/images/soolo-login-background-still.svg");
}