/* SO-OEPNV-PlanerPRO · Dual fullscreen + visible neon scrollbars · 2026-08-30
   LAST stylesheet by design.
   - Website fullscreen remains a normal vertically scrollable document.
   - Map fullscreen alone locks page scrolling until the X is pressed.
   - Scrollbars stay easy to find in both light and classic green themes. */

:root{
  --so-scroll-thumb:#00f07a;
  --so-scroll-thumb-hover:#00ff88;
  --so-scroll-track:#071b12;
  --so-scroll-edge:#003f26;
}
html[data-theme="light"]{
  --so-scroll-thumb:#00d96f;
  --so-scroll-thumb-hover:#00f07a;
  --so-scroll-track:#dfe9e4;
  --so-scroll-edge:#005c35;
}

html,
body,
*{
  scrollbar-width:auto!important;
  scrollbar-color:var(--so-scroll-thumb) var(--so-scroll-track)!important;
}
*::-webkit-scrollbar{
  display:block!important;
  width:13px!important;
  height:13px!important;
}
*::-webkit-scrollbar-track{
  background:var(--so-scroll-track)!important;
}
*::-webkit-scrollbar-thumb{
  background:var(--so-scroll-thumb)!important;
  border:2px solid var(--so-scroll-edge)!important;
  border-radius:999px!important;
  min-height:44px;
}
*::-webkit-scrollbar-thumb:hover{
  background:var(--so-scroll-thumb-hover)!important;
}
*::-webkit-scrollbar-corner{
  background:var(--so-scroll-track)!important;
}

/* The global topbar button is the WEBSITE fullscreen control, including on phones. */
.pro-topbar .fullscreen-button{
  display:inline-flex;
}

/* Browser fullscreen / focus fallback must NEVER turn the app into a non-scrollable 100vh shell. */
html:fullscreen,
html:-webkit-full-screen{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  height:auto!important;
  min-height:100%!important;
}
body.site-fullscreen-active:not(.map-fullscreen-active),
body.app-focus:not(.map-fullscreen-active){
  position:static!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  min-height:100svh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch;
}
body.site-fullscreen-active:not(.map-fullscreen-active) .page-shell,
body.app-focus:not(.map-fullscreen-active) .page-shell{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
/* Full website really means all page content remains reachable, including the footer. */
body.app-focus .site-footer{
  display:block!important;
}

/* Keep the fixed mobile navigation usable while allowing the document beneath it to scroll. */
@media(max-width:900px){
  .pro-topbar .topbar-actions{
    gap:.3rem;
    flex-wrap:nowrap;
  }
  .pro-topbar .fullscreen-button,
  .pro-topbar .theme-toggle{
    min-width:44px;
    min-height:44px;
  }
  body.site-fullscreen-active:not(.map-fullscreen-active),
  body.app-focus:not(.map-fullscreen-active){
    padding-bottom:calc(96px + env(safe-area-inset-bottom) + var(--browser-bottom-gap,0px))!important;
  }
  body.site-fullscreen-active:not(.map-fullscreen-active) .page-shell,
  body.app-focus:not(.map-fullscreen-active) .page-shell{
    padding-bottom:calc(112px + env(safe-area-inset-bottom) + var(--browser-bottom-gap,0px))!important;
  }
  body.site-fullscreen-active:not(.map-fullscreen-active) .site-footer,
  body.app-focus:not(.map-fullscreen-active) .site-footer{
    margin-bottom:calc(82px + env(safe-area-inset-bottom) + var(--browser-bottom-gap,0px));
  }
  /* Some mobile browsers draw overlay scrollbars and ignore width; scrolling itself remains available. */
  *::-webkit-scrollbar{width:11px!important;height:11px!important}
}

/* Only map fullscreen intentionally freezes the page beneath the map. */
body.map-fullscreen-active{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}