/* SGS Suite side menu: one grouped menu in every app (markup comes from xnav.php, behaviour from sgs-suite-nav.js).
   Loaded AFTER each app's own stylesheet. Everything is scoped to .sx-nav so it never touches the rest of the page.
   Collapsed menu = the <html> element has a class ending in -sbc (ls-sbc, rp-sbc, iv-sbc, tr-sbc, ig-sbc, bl-sbc): icons only. */
.sx-nav{display:flex;flex-direction:column;gap:1px;padding-bottom:12px}
.sx-nav .sx-sec{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#9fb0a6;padding:12px 12px 4px;white-space:nowrap;user-select:none;-webkit-user-select:none}
.sx-nav a{position:relative;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;color:#dfe7e2;font-size:14px;line-height:1.35;text-decoration:none;white-space:nowrap;font-weight:400}
.sx-nav a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.sx-nav a.on{background:#F2B705;color:#1f2a24;font-weight:600}
.sx-nav a.on:hover{background:#F2B705;color:#1f2a24}
.sx-nav .sx-ic{flex:none}
.sx-nav .sx-lb{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sx-nav .sx-chev{margin-left:auto;display:flex;line-height:0;transition:transform .15s;opacity:.7}
.sx-nav .sx-chev .sx-ic{width:16px;height:16px}
.sx-nav .sx-g.open > .sx-gh .sx-chev{transform:rotate(90deg)}
.sx-nav .sx-g.cur > .sx-gh{color:#fff;font-weight:600}
.sx-nav .sx-sub{display:none;flex-direction:column;gap:1px;margin:1px 0 6px 21px;padding-left:9px;border-left:1px solid rgba(255,255,255,.16)}
.sx-nav .sx-g.open > .sx-sub{display:flex}
.sx-nav .sx-sub a{padding:6px 10px;font-size:13.5px;color:#c9d6ce}
.sx-nav .sx-sub a:hover{color:#fff}
.sx-nav .sx-sub a.on{color:#1f2a24}
.sx-nav .sx-bdg{margin-left:auto;background:#b3261e;color:#fff;border-radius:9px;font-size:11px;font-weight:600;padding:0 6px;line-height:17px}
/* collapsed: icons only, the app you are in is the gold one, names appear as the app's own tooltip */
html[class*="-sbc"] .sx-nav .sx-sec{display:block;height:1px;margin:6px 8px;padding:0;background:rgba(255,255,255,.15);font-size:0;color:transparent;overflow:hidden}
html[class*="-sbc"] .sx-nav .sx-lb,html[class*="-sbc"] .sx-nav .sx-chev,html[class*="-sbc"] .sx-nav .sx-sub,html[class*="-sbc"] .sx-nav .sx-g.open > .sx-sub{display:none !important}
html[class*="-sbc"] .sx-nav a{padding:8px 12px}
html[class*="-sbc"] .sx-nav .sx-g.cur > .sx-gh{background:#F2B705;color:#1f2a24}
html[class*="-sbc"] .sx-nav .sx-bdg{position:absolute;top:2px;right:2px;margin:0;font-size:10px;padding:0 5px;display:inline-block}
/* phones: Products turns its side menu into one scrollable row. Show Work, the pages of the app you are in, and Account in that row (the other four apps hide the side menu on phones and keep their own phone bar) */
@media(max-width:860px){
  .ls-side .sx-nav{flex-direction:row;align-items:center;gap:2px;padding:0}
  .ls-side .sx-nav .sx-sec,.ls-side .sx-nav .sx-g:not(.cur),.ls-side .sx-nav .sx-g.cur > .sx-gh{display:none !important}
  .ls-side .sx-nav .sx-g.cur,.ls-side .sx-nav .sx-g.cur > .sx-sub,html[class*="-sbc"] .ls-side .sx-nav .sx-g.cur > .sx-sub{display:contents !important}
  .ls-side .sx-nav a{flex:none;padding:8px 10px;gap:6px;font-size:13px}
  html[class*="-sbc"] .ls-side .sx-nav .sx-lb{display:inline !important}
}
/* collapsed menu: the pop-up panel with an app's pages (built by sgs-suite-nav.js, lives on <body>) */
.sx-fly{position:fixed;z-index:99999;min-width:200px;max-width:260px;padding:6px;background:#1d2b24;border:1px solid rgba(255,255,255,.14);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:1px;margin-left:6px;font:14px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif}
.sx-fly::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:8px}
.sx-fly a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;color:#dfe7e2;text-decoration:none;white-space:nowrap;font-weight:400}
.sx-fly a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.sx-fly a.on{background:#F2B705;color:#1f2a24;font-weight:600}
.sx-fly a.sx-fly-t{font-weight:700;color:#fff;padding:6px 10px 8px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.14);border-radius:7px 7px 0 0}
.sx-fly .sx-lb{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sx-fly .sx-bdg{margin-left:auto;background:#b3261e;color:#fff;border-radius:9px;font-size:11px;font-weight:600;padding:0 6px;line-height:17px}
.sx-fly .sx-ic,.sx-fly .sx-chev{display:none}
/* notice on an older page that now lives in one place for every app */
.sx-moved{background:#FFF4D6;border:1px solid #ecd48a;border-radius:10px;padding:10px 14px;margin:0 0 14px;font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#3d3200}
.sx-moved a{color:#7a4f00;font-weight:600;text-decoration:underline;margin:0 6px}
.sx-moved span{color:#7a6a2a;font-size:13px}
/* ONE brand block at the top of the side menu, identical in every app and page (the apps' own logo rules differed in size and colour): icon + "SGS Ecommerce" */
.sx-brandhd{height:48px !important;min-height:48px !important}
a.sx-brand{display:flex !important;align-items:center !important;gap:8px !important;min-width:0 !important;color:#fff !important;font-family:inherit !important;font-weight:700 !important;font-size:15px !important;line-height:1.2 !important;letter-spacing:0 !important;white-space:nowrap !important;text-decoration:none !important}
a.sx-brand:hover,a.sx-brand:hover b{color:#fff !important;text-decoration:none !important}
a.sx-brand img{width:28px !important;height:28px !important;border-radius:6px !important;background:#fff !important;padding:2px !important;flex:none !important;object-fit:contain}
a.sx-brand b{font-size:15px !important;font-weight:700 !important;font-family:inherit !important;letter-spacing:0 !important}
a.sx-brand span{color:#F2B705 !important;font-size:inherit !important;font-weight:inherit !important}
html[class*="-sbc"] .sx-brandhd{height:auto !important}
html[class*="-sbc"] a.sx-brand b{display:none !important}