@font-face {
  font-family: 'Enphase Visuelt';
  src: url('/assets/assets/fonts/EnphaseVisuelt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Enphase Visuelt';
  src: url('/assets/assets/fonts/EnphaseVisuelt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
}

html,
body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  overflow: hidden !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  font-family: 'Enphase Visuelt', Arial, sans-serif;
}

#splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#splash.light {
  background-color: #ffffff;
}

#splash.dark {
  background-color: #262627;
}

#splash .loader {
  width: 36px;
  height: 36px;
  animation: spin 1s linear infinite;
}

#splash .loader svg {
  width: 100%;
  height: 100%;
}

#splash img {
  width: 140px;
  margin-top: 24px;
  display: none;
}

#splash .app-name {
  margin-top: 12px;
  padding: 12px 24px;
  background-color: #F37321;
  color: #ffffff;
  font-size: 40px;
  font-weight: 400;
  display: none;
}

#splash.hidden {
  display: none;
}

.flutter-loader,
#flutter-loading-progress {
  display: none !important;
}

/* Strictly locks CanvasKit elements inside the parent iframe dimensions */
flt-glass-pane,
flt-embedding-host,
flutter-view {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* On Android WebViews where flutter-view has no shadowRoot, these elements
   leak into light DOM with zero size. Force them to fill the viewport. */
flt-scene-host,
flt-scene,
flt-canvas-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Accessibility / announcement elements should not affect layout */
flt-announcement-host,
flt-semantics-placeholder {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

flt-glass-pane canvas,
flutter-view canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Flutter creates a <p aria-hidden="true"> with line-height: 9999px for text
   measurement. Without shadow DOM isolation this leaks into light DOM and
   expands the page to 300K+ px, pushing the canvas out of the viewport.
   Also target flt-ruler-host which wraps this element in some Flutter versions. */
p[aria-hidden="true"],
flt-ruler-host {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  contain: strict !important;
  pointer-events: none !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}