/* Kanokphan HF05FQ · mobile topbar containment; only presentation, no module changes.
   The legacy compact 48px desktop navbar used nowrap!important below 1080px.
   Keep the original navigation nodes / permissions, but make them a tap-open drawer. */
.posx-mobile-menu-toggle { display:none; }
@media screen and (max-width:1100px) {
  html[data-posx-theme] .app > .topbar {
    position:sticky!important;
    top:0!important;
    z-index:1200!important;
    box-sizing:border-box!important;
    height:auto!important;
    min-height:0!important;
    width:100%!important;
    max-width:100vw!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    padding:7px 10px 6px!important;
    overflow:visible!important;
  }
  html[data-posx-theme] .app > .topbar .topbar-start {
    position:static!important;
    display:flex!important;
    width:100%!important;
    height:36px!important;
    min-height:36px!important;
    flex:0 0 36px!important;
    align-items:center!important;
    justify-content:space-between!important;
    overflow:visible!important;
    gap:8px!important;
  }
  html[data-posx-theme] .app > .topbar .posx-topbrand {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100% - 100px)!important;
    height:34px!important;
    padding:0!important;
    overflow:hidden!important;
  }
  html[data-posx-theme] .app > .topbar .posx-topbrand strong {font-size:15px!important;line-height:1.1!important;}
  html[data-posx-theme] .app > .topbar .posx-topbrand small {display:block!important;font-size:8px!important;line-height:1.2!important;}
  html[data-posx-theme] .app > .topbar .posx-mobile-menu-toggle {
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    min-width:84px!important;
    height:36px!important;
    gap:7px!important;
    padding:0 10px!important;
    border:1px solid rgba(255,255,255,.33)!important;
    border-radius:9px!important;
    color:var(--theme-top-text,#f0fff9)!important;
    background:rgba(255,255,255,.10)!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
  }
  html[data-posx-theme="light"] .app > .topbar .posx-mobile-menu-toggle {
    color:var(--theme-top-text,#17364c)!important;
    border-color:#cadbd5!important;
    background:#f1f7f5!important;
  }
  .posx-mobile-menu-toggle .posx-mobile-menu-icon {font-size:19px;line-height:1;}
  html[data-posx-theme] .app > .topbar.posx-mobile-nav-open .posx-mobile-menu-toggle {background:rgba(255,255,255,.23)!important;}
  html[data-posx-theme] .app > .topbar .rightnav {
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:32px!important;
    height:auto!important;
    flex:0 0 auto!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding:0 0 2px!important;
    margin:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    white-space:nowrap!important;
  }
  html[data-posx-theme] .app > .topbar .rightnav::-webkit-scrollbar {display:none;}
  html[data-posx-theme] .app > .topbar .rightnav > *,
  html[data-posx-theme] .app > .topbar .rightnav > button {flex-shrink:0!important;}
  html[data-posx-theme] .app > .topbar .identity-stack {
    box-sizing:border-box!important;
    flex:0 0 154px!important;
    width:154px!important;
    min-width:154px!important;
    max-width:154px!important;
    height:32px!important;
    padding:2px 6px!important;
    margin:0!important;
    order:-100!important;
  }
  html[data-posx-theme] .app > .topbar .identity-stack .branch,
  html[data-posx-theme] .app > .topbar .identity-stack .userlabel {display:block!important;}
  html[data-posx-theme] .app > .topbar .rightnav > button,
  html[data-posx-theme] .app > .topbar .rightnav .theme-switcher-btn {
    box-sizing:border-box!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    width:auto!important;
    min-width:30px!important;
    font-size:11px!important;
    padding:0 9px!important;
  }
  /* Theme picker must escape the horizontally scrollable utility row. */
  html[data-posx-theme] .app > .topbar .theme-switcher-menu {
    position:fixed!important;
    top:92px!important;
    right:8px!important;
    left:auto!important;
    z-index:1350!important;
    box-sizing:border-box!important;
    width:min(238px,calc(100vw - 16px))!important;
    max-height:calc(100dvh - 106px)!important;
    overflow-y:auto!important;
  }
  /* Keep security / logout button names readable instead of replacing with tiny glyphs. */
  html[data-posx-theme] .app > .topbar #security-account-btn,
  html[data-posx-theme] .app > .topbar .logout {font-size:11px!important;width:auto!important;}
  html[data-posx-theme] .app > .topbar #security-account-btn::after,
  html[data-posx-theme] .app > .topbar .logout::after {content:none!important;}

  html[data-posx-theme] .app > .topbar #top-navigation {
    position:absolute!important;
    top:100%!important;
    left:0!important;
    z-index:1210!important;
    box-sizing:border-box!important;
    display:none!important;
    width:min(360px,100vw)!important;
    max-width:100vw!important;
    min-width:0!important;
    max-height:calc(100dvh - 91px)!important;
    padding:8px!important;
    margin:0!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:3px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:var(--theme-top,#0f513f)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-top:0!important;
    border-radius:0 0 13px 0!important;
    box-shadow:0 16px 40px rgba(5,25,19,.27)!important;
  }
  html[data-posx-theme] .app > .topbar.posx-mobile-nav-open #top-navigation {display:flex!important;}
  html[data-posx-theme] .app > .topbar #top-navigation .navitem {
    box-sizing:border-box!important;
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex:0 0 auto!important;
    display:block!important;
  }
  html[data-posx-theme] .app > .topbar #top-navigation .navbutton {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:43px!important;
    height:auto!important;
    padding:7px 11px!important;
    margin:0!important;
    gap:9px!important;
    white-space:normal!important;
    text-align:left!important;
    font-size:13px!important;
  }
  html[data-posx-theme] .app > .topbar #top-navigation .navbutton .caret {margin-left:auto!important;}
  html[data-posx-theme] .app > .topbar #top-navigation .navbutton .navgroup-code,
  html[data-posx-theme] .app > .topbar #top-navigation .navbutton .menu-count {display:inline-grid!important;}
  html[data-posx-theme] .app > .topbar #top-navigation .dropdown {
    box-sizing:border-box!important;
    position:static!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    display:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    max-height:none!important;
    margin:0 0 7px!important;
    padding:6px!important;
    border-radius:9px!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html[data-posx-theme] .app > .topbar #top-navigation .navitem:hover > .dropdown,
  html[data-posx-theme] .app > .topbar #top-navigation .navitem:focus-within > .dropdown {display:none!important;}
  html[data-posx-theme] .app > .topbar #top-navigation .navitem.menu-open > .dropdown {display:block!important;}
  html[data-posx-theme] .app > .topbar #top-navigation .dropitem {
    box-sizing:border-box!important;
    min-height:43px!important;
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    font-size:12px!important;
  }
  html[data-posx-theme] .app > .topbar #top-navigation .navitem.menu-open > .navbutton {background:rgba(255,255,255,.19)!important;color:#fff!important;}
  html[data-posx-theme="light"] .app > .topbar #top-navigation {background:#fff!important;border-color:#d5e4e0!important;}
  html[data-posx-theme="light"] .app > .topbar #top-navigation .navbutton {color:#294c43!important;}
  html[data-posx-theme="light"] .app > .topbar #top-navigation .navitem.menu-open > .navbutton {background:#e7f4ef!important;color:#164c3b!important;}
}
@media screen and (max-width:380px) {
  html[data-posx-theme] .app > .topbar {padding-inline:8px!important;}
  html[data-posx-theme] .app > .topbar .identity-stack {width:138px!important;min-width:138px!important;max-width:138px!important;flex-basis:138px!important;}
  html[data-posx-theme] .app > .topbar .posx-mobile-menu-toggle {min-width:76px!important;padding:0 8px!important;}
}