/* Hovering a menu item that is not the open page: icon stays light blue (the open page rules further down win). */
body .sidebar nav>a:not(.active):hover .icon,body .app-sidebar nav>a:not(.active):hover .icon{color:#a5d9eb!important}
/* Canonical sidebar styles, loaded last on every page. */
body .sidebar,body .app-sidebar{box-sizing:border-box!important;width:218px!important;min-width:218px!important;flex:0 0 218px!important;padding:32px 17px!important;background:#000!important;border-right:1px solid rgba(255,255,255,.055)!important;color:#d2d8db!important}
body .sidebar .sidebar-brand,body .app-sidebar .sidebar-brand{display:block!important;line-height:1.6!important}
body .sidebar .sidebar-logo,body .app-sidebar .sidebar-logo{display:block!important;width:100%!important;max-width:140px!important;height:auto!important;object-fit:contain!important}
body .sidebar nav,body .app-sidebar nav{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:5px!important;margin-top:58px!important}
body .sidebar nav>a,body .app-sidebar nav>a{box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:13px!important;min-height:44px!important;padding:13px 12px!important;margin:0!important;border:0!important;border-radius:9px!important;font:400 14px/1.25 Arial,Helvetica,sans-serif!important;color:#d2d8db!important;text-decoration:none!important;white-space:normal!important;transform:none!important;transition:background-color .15s,color .15s!important}
body .sidebar nav>a:hover:not(.active),body .app-sidebar nav>a:hover:not(.active){background:rgba(165,217,235,.14)!important;color:#fff!important}
body .sidebar nav>a.active,body .app-sidebar nav>a.active{background:#a5d9eb!important;color:#000!important;font-weight:400!important}
body .sidebar nav>a .icon,body .app-sidebar nav>a .icon,body .sidebar nav>a svg,body .app-sidebar nav>a svg{display:block!important;width:18px!important;height:18px!important;min-width:18px!important;flex:0 0 18px!important}
body .sidebar .finance-sidebar-subnav,body .app-sidebar .finance-sidebar-subnav{display:none!important}
body.finance-open .sidebar .finance-sidebar-subnav,body.shipping-open .sidebar .finance-sidebar-subnav,body.payroll-open .sidebar .finance-sidebar-subnav{display:flex!important;flex-direction:column!important;gap:2px!important;padding:2px 0 8px 20px!important}
body .sidebar .finance-sidebar-subnav>a{display:block!important;padding:9px 10px!important;border-radius:9px!important;color:#d2d8db!important;font-size:12px!important;text-decoration:none!important}
@media(max-width:700px){body .app-sidebar{width:100%!important;min-width:0!important;flex:auto!important;padding:12px 15px!important}body .app-sidebar nav{flex-direction:row!important;overflow-x:auto!important;margin-top:12px!important}body .app-sidebar .sidebar-logo{width:96px!important}}

/* Keep menu geometry identical across page transitions, including selected rows. */
body .sidebar nav>a,body .app-sidebar nav>a{height:50px!important;min-height:50px!important;max-height:50px!important;flex:0 0 50px!important;overflow:hidden!important;align-content:center!important}
body .sidebar nav>a:nth-of-type(3),body .app-sidebar nav>a:nth-of-type(3){height:58px!important;min-height:58px!important;max-height:58px!important;flex-basis:58px!important}
body .sidebar nav>a.active,body .app-sidebar nav>a.active{outline:0!important;box-shadow:none!important}
body .sidebar .finance-sidebar-subnav>a,body .app-sidebar .finance-sidebar-subnav>a{color:#a5d9eb!important;font-size:13px!important;font-weight:400!important;line-height:1.35!important}
body .sidebar .finance-sidebar-subnav>a:hover,body .app-sidebar .finance-sidebar-subnav>a:hover{color:#fff!important;background:rgba(165,217,235,.16)!important}
body .sidebar .finance-sidebar-subnav>a.active,body .app-sidebar .finance-sidebar-subnav>a.active{background:#a5d9eb!important;color:#000!important}

/* Staff uses the same sidebar geometry; only its positioning differs because it is a separate document. */
body .app-sidebar{position:fixed!important;inset:0 auto 0 0!important;overflow-y:auto!important;z-index:20!important}
body>.shell{margin-left:218px!important;max-width:none!important}
body .sidebar .sidebar-brand,body .app-sidebar .sidebar-brand{font-size:13px!important;font-weight:400!important;letter-spacing:normal!important}
body .sidebar .sidebar-home-logo,body .app-sidebar .sidebar-home-logo{display:block!important;margin:0!important;padding:0!important;line-height:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
body .sidebar .sidebar-logo,body .app-sidebar .sidebar-logo{vertical-align:top!important}
@media(max-width:700px){body .app-sidebar{position:static!important;inset:auto!important}body>.shell{margin-left:0!important}}

/* Sales submenu sits immediately under Sales, never beneath Finance. */
body .sidebar .sales-sidebar-subnav,body .app-sidebar .sales-sidebar-subnav{display:none!important}
body.sales-v1-open .sidebar .sales-sidebar-subnav{display:flex!important;flex-direction:column!important;gap:2px!important;padding:2px 0 8px 20px!important}
body .sidebar .sales-sidebar-subnav>a,body .app-sidebar .sales-sidebar-subnav>a{display:block!important;padding:9px 10px!important;border-radius:9px!important;color:#a5d9eb!important;font:400 13px/1.35 Arial,Helvetica,sans-serif!important;text-decoration:none!important}
body .sidebar .sales-sidebar-subnav>a:hover{color:#fff!important;background:rgba(165,217,235,.16)!important}
body .sidebar .sales-sidebar-subnav>a.active{background:#a5d9eb!important;color:#000!important}

/* Keep sidebar fixed and menus within its viewport, with compact child rows. */
body #protected-app .sidebar{position:sticky!important;top:0!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overscroll-behavior:contain!important}
body #protected-app .sidebar nav{margin-top:24px!important;gap:2px!important}
body #protected-app .sidebar nav>a{height:44px!important;min-height:44px!important;max-height:44px!important;flex:0 0 44px!important;padding:9px 10px!important}
body #protected-app .sidebar nav>a[href="#inpro"],body #protected-app .sidebar nav>a[href="/#inpro"]{height:52px!important;min-height:52px!important;max-height:52px!important;flex-basis:52px!important}
body #protected-app .sidebar .sales-sidebar-subnav,body #protected-app .sidebar .finance-sidebar-subnav{padding-top:0!important;padding-bottom:3px!important;gap:0!important}
body #protected-app .sidebar .sales-sidebar-subnav>a,body #protected-app .sidebar .finance-sidebar-subnav>a{padding:6px 10px!important;font-size:12px!important;line-height:1.25!important}


/* Unified Sales and Finance navigation, matching Finance's active and hover behavior. */
body.sales-v1-open .sidebar nav>a[href="#sales"],
body.sales-v1-open .sidebar nav>a[href="#sales"].active,
body.finance-open .sidebar nav>a[href="#finance"],
body.finance-open .sidebar nav>a[href="#finance"].active,
body.shipping-open .sidebar nav>a[href="#finance"],body.payroll-open .sidebar nav>a[href="#finance"]{
  background:#a5d9eb!important;color:#000!important;
}
/* The icon on the highlighted parent stays dark so it does not disappear into the blue. */
body.sales-v1-open .sidebar nav>a[href="#sales"] .icon,
body.finance-open .sidebar nav>a[href="#finance"] .icon,
body.shipping-open .sidebar nav>a[href="#finance"] .icon,body.payroll-open .sidebar nav>a[href="#finance"] .icon{color:#000!important}
body .sidebar .sales-sidebar-subnav>a.active,
body .sidebar .finance-sidebar-subnav>a.active{
  background:#a5d9eb!important;color:#000!important;
}
body .sidebar .sales-sidebar-subnav>a:not(.active):hover,
body .sidebar .finance-sidebar-subnav>a:not(.active):hover{
  background:#1b2528!important;color:#fff!important;
}
/* Restore breathing room between the logo and first navigation item. */
body #protected-app .sidebar nav,
body .app-sidebar nav{margin-top:64px!important}
@media(max-width:700px){body .app-sidebar nav{margin-top:16px!important}}

/* Staff Access uses the same sidebar spacing and row geometry as the main OS. */
body .app-sidebar nav{margin-top:64px!important;gap:2px!important}
body .app-sidebar nav>a{height:44px!important;min-height:44px!important;max-height:44px!important;flex:0 0 44px!important;padding:9px 10px!important}
body .app-sidebar nav>a:nth-of-type(3){height:52px!important;min-height:52px!important;max-height:52px!important;flex-basis:52px!important}
@media(max-width:700px){body .app-sidebar nav{margin-top:16px!important;gap:5px!important}body .app-sidebar nav>a{flex:0 0 auto!important}}

/* Count submenu (Movement, Daily Count): shown while Count is open, styled like Sales/Finance. */
body .sidebar .count-sidebar-subnav,body .app-sidebar .count-sidebar-subnav,body .sidebar .tasks-sidebar-subnav,body .app-sidebar .tasks-sidebar-subnav{display:none!important}
body.count-open .sidebar .count-sidebar-subnav,body.tasks-open .sidebar .tasks-sidebar-subnav{display:flex!important;flex-direction:column!important;gap:0!important;padding:0 0 3px 20px!important}
body .sidebar .tasks-sidebar-subnav>a,body .sidebar .count-sidebar-subnav>a{display:block!important;padding:6px 10px!important;border-radius:9px!important;color:#a5d9eb!important;font:400 12px/1.25 Arial,Helvetica,sans-serif!important;text-decoration:none!important}
body .sidebar .count-sidebar-subnav>a:not(.active):hover{background:#1b2528!important;color:#fff!important}
body .sidebar .count-sidebar-subnav>a.active{background:#a5d9eb!important;color:#000!important}
body.count-open .sidebar nav>a[href="#count"],body.count-open .sidebar nav>a[href="#count"].active{background:#a5d9eb!important;color:#000!important}

/* My Portal: highlighted like the other pages; Home is never highlighted while another page is open (owner 25 Oct 2026). */
body.portal-open:not(.payroll-open) .sidebar nav>a[href="#portal"],body.portal-open:not(.payroll-open) .sidebar nav>a[href="/#portal"],body.tasks-open .sidebar nav>a[href="#tasks"],body.tasks-open .sidebar nav>a[href="/#tasks"]{background:#a5d9eb!important;color:#000!important}
body.tasks-open .sidebar nav>a[href="#tasks"] .icon{color:#000!important}
body.portal-open:not(.payroll-open) .sidebar nav>a[href="#portal"] .icon,body.portal-open:not(.payroll-open) .sidebar nav>a[href="/#portal"] .icon,body.count-open .sidebar nav>a[href="#count"] .icon{color:#000!important}
body:is(.portal-open,.tasks-open,.inventory-open,.count-open,.listings-open,.inpro-open,.sales-v1-open,.finance-open,.shipping-open) .sidebar nav>a[href="/"].active:not(:hover){background:transparent!important;color:#fff!important}
body:is(.portal-open,.tasks-open,.inventory-open,.count-open,.listings-open,.inpro-open,.sales-v1-open,.finance-open,.shipping-open) .sidebar nav>a[href="/"].active .icon{color:inherit!important}
/* One hover for every main link. */
body .sidebar nav>a:not(.active):hover{background:rgba(165,217,235,.16)!important;color:#fff!important}

/* Sub-menus (Sales, Finance, Count): the selected item uses its own colour, so it stands apart from the light-blue parent. */
body .sidebar :is(.sales-sidebar-subnav,.finance-sidebar-subnav,.count-sidebar-subnav,.tasks-sidebar-subnav)>a.active{background:#2B4A56!important;color:#fff!important;font-weight:600!important;box-shadow:none!important}
body .sidebar :is(.sales-sidebar-subnav,.finance-sidebar-subnav,.count-sidebar-subnav,.tasks-sidebar-subnav)>a:not(.active):hover{background:#1b2528!important;color:#fff!important}
/* Sidebar focus: no browser ring after a click; a thin square line only for keyboard users. */
body .sidebar a:focus,body .app-sidebar a:focus{outline:none!important;box-shadow:none!important}
body .sidebar a:focus-visible,body .app-sidebar a:focus-visible{outline:2px solid #A5D9EB!important;outline-offset:-2px!important;border-radius:9px!important}
/* The open page's link stays light blue with a black icon even while hovered or clicked
   (the hover rule above was winning, leaving a dark box with a black icon — owner 26 Oct 2026). */
body:is(.portal-open):not(.payroll-open) .sidebar nav>a:is([href="#portal"],[href="/#portal"]),body:is(.portal-open):not(.payroll-open) .sidebar nav>a:is([href="#portal"],[href="/#portal"]):hover,
body:is(.tasks-open) .sidebar nav>a:is([href="#tasks"],[href="/#tasks"]),body:is(.tasks-open) .sidebar nav>a:is([href="#tasks"],[href="/#tasks"]):hover,
body:is(.count-open) .sidebar nav>a:is([href="#count"],[href="/#count"]),body:is(.count-open) .sidebar nav>a:is([href="#count"],[href="/#count"]):hover,
body .sidebar nav>a.active:not([href="/"]):hover,body .sidebar nav>a[aria-current="page"]:not([href="/"]):hover{background:#a5d9eb!important;color:#000!important}
body:is(.portal-open):not(.payroll-open) .sidebar nav>a:is([href="#portal"],[href="/#portal"]) .icon,
body:is(.tasks-open) .sidebar nav>a:is([href="#tasks"],[href="/#tasks"]) .icon,
body:is(.count-open) .sidebar nav>a:is([href="#count"],[href="/#count"]) .icon,
body .sidebar nav>a.active:not([href="/"]) .icon{color:#000!important}
/* Client Management (owner 29 Oct 2026): sub-menu like Tasks / Count, open while the page is open. */
body .sidebar .clients-sidebar-subnav,body .app-sidebar .clients-sidebar-subnav{display:none!important}
body.clients-open .sidebar .clients-sidebar-subnav{display:flex!important;flex-direction:column!important;gap:0!important;padding:0 0 3px 20px!important}
body .sidebar .clients-sidebar-subnav>a{display:block!important;padding:6px 10px!important;border-radius:9px!important;color:#a5d9eb!important;font:400 12px/1.25 Arial,Helvetica,sans-serif!important;text-decoration:none!important}
body .sidebar .clients-sidebar-subnav>a:not(.active):hover{background:#1b2528!important;color:#fff!important}
body .sidebar .clients-sidebar-subnav>a.active{background:#2B4A56!important;color:#fff!important;font-weight:600!important}
body.clients-open .sidebar nav>a[href="#clients"],body.clients-open .sidebar nav>a[href="#clients"].active{background:#a5d9eb!important;color:#000!important}
body.clients-open .sidebar nav>a[href="#clients"] .icon{color:#000!important}
body.clients-open .sidebar nav>a[href="/"].active:not(:hover){background:transparent!important;color:#fff!important}
/* Client Management page: light page like Finance. */
body.clients-open .main > :not(#clients-view):not(.collection-logo-home-link){display:none!important}
body.clients-open #protected-app .main{padding:40px clamp(20px,5vw,72px) 60px!important;background:#f6f9fb!important;color:#101820;min-height:100vh}
body.clients-open::before{display:none!important}
body.clients-open .main>.collection-logo-home-link{display:none!important}
body.clients-open #clients-heading{color:#101820;font:700 32px/1.15 Arial,Helvetica,sans-serif}
@media(max-width:600px){body.clients-open #protected-app .main{padding:25px 16px 110px!important}}

/* Inventory sub-menu (owner 30 Oct): All Watches · New Watch Submission · Listings, open on any of the three pages. */
body .sidebar .inventory-sidebar-subnav,body .app-sidebar .inventory-sidebar-subnav{display:none!important}
body:is(.inventory-open,.inpro-open,.listings-open) .sidebar .inventory-sidebar-subnav{display:flex!important;flex-direction:column!important;gap:0!important;padding:0 0 3px 20px!important}
body .sidebar .inventory-sidebar-subnav>a{display:block!important;padding:6px 10px!important;border-radius:9px!important;color:#a5d9eb!important;font:400 12px/1.25 Arial,Helvetica,sans-serif!important;text-decoration:none!important}
body .sidebar .inventory-sidebar-subnav>a:not(.active):hover{background:#1b2528!important;color:#fff!important}
body .sidebar .inventory-sidebar-subnav>a.active{background:#2B4A56!important;color:#fff!important;font-weight:600!important}
body:is(.inpro-open,.listings-open) .sidebar nav>a[href="#inventory"]{background:#a5d9eb!important;color:#000!important}
body:is(.inpro-open,.listings-open) .sidebar nav>a[href="#inventory"] .icon{color:#000!important}

/* One look for every main link (owner 30 Oct): the icon is always the same colour as its words.
   Not open: soft grey words and icon · hover: white · open page: black on light blue (rules above).
   Home goes back to the same soft grey while another page is open. */
body .sidebar nav>a:not(.active) .icon,body .app-sidebar nav>a:not(.active) .icon,
body .sidebar nav>a:not(.active) svg,body .app-sidebar nav>a:not(.active) svg{color:inherit!important}
body .sidebar nav>a:not(.active):hover .icon,body .app-sidebar nav>a:not(.active):hover .icon{color:inherit!important}
body:is(.portal-open,.tasks-open,.inventory-open,.count-open,.listings-open,.inpro-open,.sales-v1-open,.finance-open,.shipping-open,.clients-open,.payroll-open) .sidebar nav>a[href="/"].active:not(:hover){background:transparent!important;color:#d2d8db!important}
body:is(.portal-open,.tasks-open,.inventory-open,.count-open,.listings-open,.inpro-open,.sales-v1-open,.finance-open,.shipping-open,.clients-open,.payroll-open) .sidebar nav>a[href="/"].active .icon{color:inherit!important}
/* Logo centred in the sidebar with breathing space above it (owner 1 Nov) */
body .sidebar .sidebar-brand,body .app-sidebar .sidebar-brand{padding-top:18px!important;text-align:center!important}
body .sidebar .sidebar-home-logo,body .app-sidebar .sidebar-home-logo{display:block!important;width:fit-content!important;margin:0 auto!important}
body .sidebar .sidebar-logo,body .app-sidebar .sidebar-logo{margin:0 auto!important}
@media(max-width:700px){body .sidebar .sidebar-brand,body .app-sidebar .sidebar-brand{padding-top:6px!important}}