/**
 * Software CRM - Clean Viewport & Layout Architecture
 * Production borderless mobile app layout (100dvh, responsive, zero phone borders/bezels)
 */

/* Viewport and App Container */
.app-viewport-wrapper {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: var(--bg-app);
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.phone-simulator {
  width: 100%;
  max-width: 460px;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg-app);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Hide any fake simulator hardware elements & mock toolbars */
.phone-notch,
.camera-lens,
.sim-status-bar,
.mockup-toolbar,
.mobile-demo-pill,
.mobile-demo-sheet,
.showcase-grid-view {
  display: none !important;
}

/* Screen Scroller & Layering Container */
.screen-scroller {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-app);
}

/* Individual App Screens */
.app-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  pointer-events: none;
  z-index: 1;
  padding-bottom: 74px; /* Space for persistent bottom navigation */
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.28s ease,
              border-radius 0.28s ease;
  will-change: transform, opacity;
}

.app-screen::-webkit-scrollbar {
  display: none;
}

/* Screen without bottom padding (e.g. login) */
.app-screen.no-bottom-bar {
  padding-bottom: 0;
}

/* Responsive Overrides on Real Phones (< 640px) */
@media (max-width: 640px) {
  .app-viewport-wrapper {
    background: var(--bg-app) !important;
    padding: 0 !important;
  }
  .phone-simulator {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  .crm-nav-header,
  .screen-action-bar {
    padding-top: max(14px, env(safe-area-inset-top)) !important;
  }
}