/* portal-rail.css -- 1072 (Andy, 14.10.2026): THE SHARED SIDEBAR STANDARD.
   One sidebar behaviour for every page wearing the portal frame: today the homepage (index.html, its
   own .sidebar) and the Stock Room Overview (portal-shell.js, .oxs-sidebar). Andy's brief:
     - expanded: 240px (was ~336px), Brand Black, the same purple active state, icons, order and roles;
       compact horizontal padding, icons on one line, long labels wrap to two lines at the SAME size,
       "Soon" badges sit after the label text instead of squeezing it;
     - collapsed: a 64px icon-only rail, same items and order, centred icons, clear active background,
       labels / section headings / "Soon" hidden visually but kept for screen readers; full-name
       tooltips on hover and keyboard focus ("Coming soon" on placeholders), drawn outside the
       sidebar's scroll box so they are never clipped;
     - a "Collapse menu" / "Expand menu" control at the top, remembered per browser on desktop;
     - phones and small windows (<=1080px) keep the existing hamburger drawer exactly as it was
       (336px wide), and never show the rail -- the desktop preference does not touch the drawer.
   Nothing here does anything until a sidebar carries data-oxs-rail. Width comes from the page's own
   variable (--side-w on the homepage, --oxs-side-w in the frame), so the dark strip behind a sticky
   sidebar and the workspace beside it move with it: the workspace really gets the released space.
   Classes on <html> (set by portal-rail.js before first paint):
     oxs-rail-narrow    -> width 64px (animates)
     oxs-rail-collapsed -> icon-only content (labels hidden, icons centred)
   On expand the width grows first and the labels return when it lands, so text never wraps into a
   64px column mid-animation. */

@property --oxs-side-w{syntax:"<length>";inherits:true;initial-value:240px}
@property --side-w{syntax:"<length>";inherits:true;initial-value:240px}

/* ---- widths (html:root beats each page's own :root, whatever the load order) ---- */
html:root{--oxs-side-w:240px;--side-w:240px}
html:root.oxs-rail-narrow{--oxs-side-w:64px;--side-w:64px}
@media (max-width:1080px){
  /* the drawer: exactly the pre-1072 width, whatever the desktop preference says */
  html:root,html:root.oxs-rail-narrow{--oxs-side-w:336px;--side-w:336px}
}

@media (max-width:1080px){
  /* the drawer keeps its pre-1072 look: "Soon" pinned to the right edge of the row */
  [data-oxs-rail] :is(.nav-label,.oxs-nav-label):has(.soon,.oxs-soon){display:flex;align-items:center}
  [data-oxs-rail] :is(.nav-label,.oxs-nav-label) :is(.soon,.oxs-soon){margin-left:auto}
}

/* the control and the tooltip exist only on desktop */
.oxs-rail-toggle{display:none}
.oxs-rail-tip{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;max-width:280px;
  background:#0D0024;color:#F9F7FF;border:1px solid rgba(249,247,255,.22);border-radius:8px;
  padding:8px 12px;font:600 14px/1.35 "Instrument Sans",Aptos,Calibri,Arial,sans-serif;
  box-shadow:0 8px 24px rgba(13,0,36,.28);white-space:nowrap}
.oxs-rail-tip[hidden]{display:none}
.oxs-rail-tip small{display:block;font-weight:400;font-size:13px;color:#D7CFE6}

@media (min-width:1081px){
  /* brief transition (only while toggling, never on page load); reduced motion = instant */
  html.oxs-rail-anim{transition:--oxs-side-w .18s ease,--side-w .18s ease}

  /* ---- expanded: compact, icons at x=20px in BOTH states so nothing jumps sideways ---- */
  [data-oxs-rail]{padding-left:8px;padding-right:8px;padding-top:16px;scrollbar-width:thin;scrollbar-color:rgba(249,247,255,.25) transparent}
  [data-oxs-rail] :is(.nav-item,.oxs-nav-item){gap:12px;padding:12px}
  [data-oxs-rail] :is(.nav-label,.oxs-nav-label){overflow-wrap:break-word;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  [data-oxs-rail] :is(.nav-label,.oxs-nav-label) :is(.soon,.oxs-soon){display:inline-block;margin-left:2px;vertical-align:1px;line-height:1.2;white-space:nowrap}
  [data-oxs-rail] :is(.nav-group-label,.oxs-nav-group){padding:0 12px 8px}
  [data-oxs-rail] :is(.nav-sep,.oxs-nav-sep){margin:12px 4px}

  [data-oxs-rail] .oxs-rail-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:0 0 8px;padding:10px 12px;
    border:0;border-radius:8px;background:rgba(249,247,255,.06);color:#D7CFE6;cursor:pointer;text-align:left;
    font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;box-sizing:border-box}
  [data-oxs-rail] .oxs-rail-toggle:hover{background:rgba(249,247,255,.12);color:#F9F7FF}
  [data-oxs-rail] .oxs-rail-toggle:focus-visible{outline:3px solid #F9F7FF;outline-offset:-3px}
  [data-oxs-rail] .oxs-rail-toggle svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  [data-oxs-rail] .oxs-rail-toggle .oxs-rail-in{display:none}
  html.oxs-rail-collapsed [data-oxs-rail] .oxs-rail-toggle .oxs-rail-in{display:inline}
  html.oxs-rail-collapsed [data-oxs-rail] .oxs-rail-toggle .oxs-rail-out{display:none}

  /* ---- collapsed: the 64px icon rail ---- */
  html.oxs-rail-collapsed [data-oxs-rail]{overflow-x:hidden;scrollbar-width:none}
  html.oxs-rail-collapsed [data-oxs-rail]::-webkit-scrollbar{display:none}
  html.oxs-rail-collapsed [data-oxs-rail] :is(.nav-item,.oxs-nav-item),
  html.oxs-rail-collapsed [data-oxs-rail] .oxs-rail-toggle{justify-content:center;gap:0;width:48px;padding:12px;position:relative}
  /* labels, the Tools heading and the toggle's words: gone from the eye, kept for screen readers */
  html.oxs-rail-collapsed [data-oxs-rail] :is(.nav-label,.oxs-nav-label,.nav-group-label,.oxs-nav-group,.oxs-rail-tl){
    position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;
    overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}
  html.oxs-rail-collapsed [data-oxs-rail] :is(.soon,.oxs-soon,.ext,.oxs-ext){display:none !important}
  html.oxs-rail-collapsed [data-oxs-rail] :is(.nav-sep,.oxs-nav-sep){margin:12px 8px}
}
@media (min-width:1081px) and (prefers-reduced-motion:reduce){ html.oxs-rail-anim{transition:none} }