/*
  IPOO screen-system hard reset
  Purpose: keep exactly one screen active at a time and prevent splash/addresses from leaking into the app after startup.
  This file is intentionally loaded after main.css so it wins even when earlier CSS is malformed.
*/

#shell .screen,
#shell .screen.active,
#shell .screen:not(.active) {
  box-sizing: border-box;
}

#shell {
  position: fixed !important;
  left: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: min(430px, 100vw) !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

.screen {
  position: fixed !important;
  inset: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: min(430px, 100vw) !important;
  max-width: 100vw !important;
  display: none !important;
  flex-direction: column !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: var(--md-surface, #ffffff) !important;
  z-index: 1 !important;
  overflow: hidden !important;
  transition: opacity 0.28s cubic-bezier(.4,0,.2,1), visibility 0.28s cubic-bezier(.4,0,.2,1);
}

.screen.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 5 !important;
}

.screen:not(.active) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#splash-screen {
  position: fixed !important;
  inset: 0 !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--splash-bg, #0d0600) !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

#splash-screen.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* Development guard: a .scroll must be a direct child of .screen or it is highlighted visually. */
.screen > *:not(.scroll):not(.top-app-bar):not(.chip-row):not([id$="-filters"]) .scroll,
.screen > *:not(.scroll):not(.top-app-bar):not(.chip-row):not([id$="-filters"]) .scroll-body {
  outline: 4px solid red !important;
}

.screen > *:not(.scroll):not(.top-app-bar):not(.chip-row):not([id$="-filters"]) .scroll::before,
.screen > *:not(.scroll):not(.top-app-bar):not(.chip-row):not([id$="-filters"]) .scroll-body::before {
  content: "⚠ .scroll is nested inside a wrapper — it must be a direct child of .screen" !important;
  display: block !important;
  background: #cc1f1f !important;
  color: #ffffff !important;
  font: 12px/1.2 monospace !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
}

.screen > .top-app-bar,
.screen > .chip-row,
.screen > [id$="-filters"] {
  flex: 0 0 auto !important;
}

#shell .screen > .scroll,
#screen-home .scroll,
#screen-products .scroll,
#screen-detail .scroll,
#sc-catpage .scroll,
#sc-addresses .scroll,
#sc-profile .scroll,
#sc-orders .scroll,
#sc-orders .ord-panels,
#screen-success .success-scroll,
.screen > .scroll,
.screen > .scroll-body,
.screen > .ord-panels,
.screen > .success-scroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Keep global bottom sheets inert until openSheet() adds .open. */
#shell > .sheet-bg {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 100 !important;
}

#shell > .sheet-bg.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#shell > .sheet-bg > .sheet {
  width: 100% !important;
  max-height: calc(100dvh - 60px) !important;
  transform: translateY(100%) !important;
}

#shell > .sheet-bg.open > .sheet {
  transform: translateY(0) !important;
}

#sc-addresses,
#sc-profile,
#sc-help,
#sc-language,
#sc-loyalty,
#sc-notif,
#sc-orders,
#sc-receipt,
#screen-home,
#screen-products,
#screen-detail,
#sc-catpage,
#screen-cart,
#screen-checkout,
#screen-success {
  background: var(--md-surface, #ffffff) !important;
}