/**
 * Dashboard scroll — single document scroll surface (especially mobile tools).
 * NEVER set overflow-x: clip/hidden together with overflow-y: visible on #output
 * or tool shells — CSS computes overflow-y:auto and traps scroll with blank space.
 */

html.cpn-dashboard-root,
html.cpn-dashboard-root body {
  background-color: var(--dash-bg-deep, #0b1120);
  overflow-y: auto;
}

html.cpn-dashboard-root .dashboard-wrapper {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

html.cpn-dashboard-root .main,
html.cpn-dashboard-root #output,
html.cpn-dashboard-root #toolPanel,
html.cpn-dashboard-root #output > .section-wrapper,
html.cpn-dashboard-root #output .cpn-dark-tool-shell,
html.cpn-dashboard-root #output .pra-dark-shell,
html.cpn-dashboard-root #output .app-description,
html.cpn-dashboard-root #toolPanel .section-wrapper,
html.cpn-dashboard-root #toolPanel .cpn-dark-tool-shell,
html.cpn-dashboard-root #toolPanel .pra-dark-shell,
html.cpn-dashboard-root #toolPanel .app-description {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  -webkit-overflow-scrolling: auto !important;
}

html.cpn-dashboard-root .main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: auto !important;
}

html.cpn-dashboard-root #output {
  display: block !important;
  flex: none !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-height: 0 !important;
}

html.cpn-dashboard-root #toolPanel,
html.cpn-dashboard-root #toolPanel[data-active-tool] {
  display: block !important;
  min-height: 0 !important;
  background: transparent !important;
}

html.cpn-dashboard-root #toolsHubShell.is-hub-hidden,
html.cpn-dashboard-root #toolsHubShell[hidden] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

@media (max-width: 768px) {
  html.cpn-dashboard-root,
  html.cpn-dashboard-root body {
    height: auto !important;
    min-height: 100%;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  html.cpn-dashboard-root .dashboard-wrapper,
  html.cpn-dashboard-root .main,
  html.cpn-dashboard-root #output,
  html.cpn-dashboard-root #output .section-wrapper,
  html.cpn-dashboard-root #output .cpn-dark-tool-shell,
  html.cpn-dashboard-root #output .pra-dark-shell {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  html.cpn-dashboard-root body.cpn-in-tool-view .main,
  html.cpn-dashboard-root body[data-current-tool]:not([data-current-tool=""]) .main {
    display: block !important;
  }

  html.cpn-dashboard-root body.cpn-in-tool-view #output,
  html.cpn-dashboard-root body[data-current-tool]:not([data-current-tool=""]) #output {
    display: block !important;
    flex: none !important;
    overflow: visible !important;
    padding-bottom: calc(var(--dash-bottom-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
  }

  html.cpn-dashboard-root .cpn-dash-header-zone {
    position: relative !important;
    top: auto !important;
  }

  html.cpn-dashboard-root #toolPanel #toolStatusSummaryBar.engine-card-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  html.cpn-dashboard-root #toolPanel #toolStatusSummaryBar .engine-card {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
  }
}

@media (min-width: 769px) {
  html.cpn-dashboard-root,
  html.cpn-dashboard-root body {
    height: auto !important;
    min-height: 100vh;
    overflow-y: auto !important;
  }

  html.cpn-dashboard-root .dashboard-wrapper {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-left: var(--dash-sidebar-w, 196px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html.cpn-dashboard-root .main {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  html.cpn-dashboard-root #output {
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.cpn-dashboard-root .sidebar,
  html.cpn-dashboard-root #navigation_bar.sidebar,
  html.cpn-dashboard-root #navigation_bar.cpn-sidebar--desktop-pinned {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--dash-sidebar-w, 196px) !important;
    z-index: 300 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    transform: none !important;
  }
}