/* Shared workspace interaction layer. It intentionally owns only shell
   scrolling and one-time visual entrance motion; module visual systems keep
   ownership of their own cards, tables, forms, and business states. */

@media (min-width: 721px) {
  body[data-production-page="app"] {
    height: 100dvh;
    overflow: hidden;
  }

  body[data-production-page="app"] .app-shell,
  body:not(.production-app-page):has(#sidebar) .app-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body[data-production-page="app"] .sidebar,
  body:not(.production-app-page):has(#sidebar) .sidebar {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-production-page="app"] .main-nav,
  body:not(.production-app-page):has(#sidebar) .main-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 181, 253, .42) transparent;
  }

  body[data-production-page="app"] .workspace,
  body:not(.production-app-page):has(#sidebar) .workspace {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-production-page="app"] .content,
  body:not(.production-app-page):has(#sidebar) .content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
  }

}

/* The authenticated production shell deliberately changes to its mobile
   drawer at 768px. Keep this desktop viewport contract above that boundary
   so it never captures the mobile document scroll. */
@media (min-width: 769px) {
  .production-app-page,
  .production-app-root,
  .production-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .production-sidebar {
    min-height: 0;
    overflow: hidden;
  }

  .production-navigation,
  .production-content {
    scroll-behavior: smooth;
  }
}

.main-nav,
.production-navigation {
  scrollbar-gutter: stable;
}

.main-nav :is(.nav-item, .production-nav-item),
.production-navigation :is(.nav-item, .production-nav-item) {
  scroll-margin-block: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  html.workspace-motion-ready [data-workspace-motion] {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 360ms ease, transform 420ms cubic-bezier(.2, .75, .25, 1);
    transition-delay: calc(var(--workspace-motion-index, 0) * 42ms);
    will-change: opacity, transform;
  }

  html.workspace-motion-ready [data-workspace-motion].is-workspace-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }

  html.workspace-motion-ready :is(.workspace-panel, .command-center-panel, .production-workspace-panel, .campaign-detail-panel):hover {
    transition: box-shadow 180ms ease, border-color 180ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.workspace-motion-ready [data-workspace-motion],
  html.workspace-motion-ready [data-workspace-motion].is-workspace-revealed {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .main-nav,
  .production-navigation,
  body[data-production-page="app"] .content,
  .production-content {
    scroll-behavior: auto;
  }
}