/* The existing #nav owns the only row. Reuse every route/action button.
 * Narrow windows scroll horizontally; labels and touch targets never collapse.
 */
html#tr-management-layout body:not(.customer-direct) .app > .side {
 position:static!important;inset:auto!important;width:100%!important;height:auto!important;max-height:none!important;
 display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;gap:0;overflow:visible!important;
 padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))!important;
}
html#tr-management-layout body:not(.customer-direct) .side > #nav {
 display:flex!important;flex-direction:row;flex-wrap:nowrap!important;align-items:center;gap:4px!important;
 flex:1 1 auto;width:100%;height:auto!important;min-width:0;margin:0!important;
 overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;
 scrollbar-width:thin;scroll-padding-inline:8px;-webkit-overflow-scrolling:touch;grid-template-rows:none!important;
}
html#tr-management-layout body:not(.customer-direct) .side #nav button {
 display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;
 flex:0 0 auto;min-width:44px;max-width:none;height:48px!important;min-height:48px!important;width:auto!important;margin:0!important;
 padding:10px 9px!important;font-size:14px!important;white-space:nowrap!important;
 overflow:visible;overflow-wrap:normal;word-break:normal;text-overflow:clip;text-align:left;line-height:1.25!important;
}
html#tr-management-layout body:not(.customer-direct) .side #nav button span:not(.nav-unread) {
 display:inline!important;white-space:nowrap!important;
}
html#tr-management-layout body:not(.customer-direct) .side #nav button i {flex:none;width:auto!important;font-size:17px!important}
html#tr-management-layout body:not(.customer-direct) #nav > [data-page="impostazioni"] {margin-left:auto!important}
html#tr-management-layout body:not(.customer-direct) #nav [hidden] {display:none!important}
html#tr-management-layout body:not(.customer-direct) #nav button:focus-visible {outline:2px solid #e9ad2e;outline-offset:-2px}
html#tr-management-layout body:not(.customer-direct) #nav .nav-unread {position:static;transform:none;flex:none;margin-left:0}
html#tr-management-layout body:not(.customer-direct) .side > .shift {margin-top:0}
html#tr-management-layout body:not(.customer-direct) .app > .main {margin-left:0!important;width:100%!important;min-width:0;max-width:100%!important}
/* Retain the established full navigation instead of the former iPad second bar. */
html#tr-management-layout body:not(.customer-direct) .ipad-bottom-nav,
html#tr-management-layout body:not(.customer-direct) .ipad-more-menu,
html#tr-management-layout body:not(.customer-direct) .ipad-more-backdrop {display:none!important}
html#tr-management-layout.ipad-navigation[data-ipad-role="cashier"] body:not(.customer-direct) {padding-bottom:0!important}

html#tr-management-layout body:not(.customer-direct) #trMoreNav {display:flex;align-items:center;flex:0 0 auto;min-width:0;height:48px}
html#tr-management-layout body:not(.customer-direct) #nav #trMoreToggle[aria-expanded="true"] {background:#ffffff24;border-color:#e9ad2e}
html#tr-management-layout body:not(.customer-direct) #nav #trMoreToggle .tr-more-arrow {font-size:12px!important}
/* Native popover uses the top layer, so #nav's horizontal overflow cannot clip it.
 * Fixed positioning is also retained as a fallback for older browsers.
 */
html#tr-management-layout body:not(.customer-direct) #trChannelActions {
 position:fixed;inset:auto;margin:0;padding:8px;box-sizing:border-box;z-index:200;
 /* Own the block size instead of retaining the native popover's fit-content
  * sizing with stretchable grid tracks. Only the viewport caps this column.
  * Items retain their existing touch height and never share spare vertical space.
  */
 height:auto;min-height:0;
 display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:6px;
 width:260px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;
 overscroll-behavior:contain;border:1px solid #ffffff55;border-radius:12px;
 background:#153957;color:#fff;box-shadow:0 10px 28px #102a3e45;
}
html#tr-management-layout body:not(.customer-direct) #trChannelActions[popover]:not(:popover-open) {display:none}
html#tr-management-layout body:not(.customer-direct) #nav #trChannelActions > button {
 justify-content:flex-start;width:100%!important;min-width:0;padding:10px 12px!important;
 color:inherit;background:#ffffff0d;border:1px solid #ffffff26;border-radius:9px;
}