/* =====================================================================
   AIM rail collapse — the house way a sidebar collapses (v2, 01/10/2026)
   Pair with aim-rail-collapse.js, which tags the shell with rc-* classes
   (works on both .rail/.nav and .sidebar/.nav-item dialects) and wraps nav text in .lbl.

   Behaviour (from the reference reel Steven picked):
   - Width springs to an icon rail; icons never move sideways.
   - Labels fade out first; on expand the width opens first, then labels fade back in.
   - Rows keep their vertical position: group headers keep their height and swap to a short rule.
   - Active row stays filled; count tags shrink to a dot on the icon.
   - Brand wordmark swaps to the AIM reticle mark.
   - Round chevron toggle rides the rail's right edge in both states.
   Desktop only (>=761px). Below that the app's own hamburger drawer is untouched.

   Per-app geometry (set on :root in the app's own CSS; defaults = mgmt):
     --rc-w      expanded rail column    (mgmt 248px · employees 256px)
     --rc-pad    rail side padding        (16px · 14px)
     --rc-npad   nav row side padding     (10px · 12px)
     --rc-icon   nav icon size            (17px · 18px)
     --rc-mark-top  reticle top offset in the brand row (6px · 10px · eco 5px)
     --rc-rail-bg   rail colour, rings the badge dot   (#16120E · eco #0B1F13)
   Brand colour comes from --aim-brand (green under .aim-eco).
   The JS adds html.rc-drawer while the rail is a phone drawer; collapse is off then.
   Collapsed width = 2 x (pad + npad) + icon, which is what holds the icons still.
   ===================================================================== */

.rc-toggle,.rc-tip,.rc-mark{display:none}

@media (min-width:761px){
  html{--rc-min:calc(2 * (var(--rc-pad,16px) + var(--rc-npad,10px)) + var(--rc-icon,17px))}

  html .rc-app{grid-template-columns:var(--rc-w,248px) 1fr;transition:grid-template-columns .34s cubic-bezier(.32,.72,0,1)}
  html.rail-min .rc-app{grid-template-columns:var(--rc-min) 1fr}
  .rc-rail{overflow-x:hidden}
  .rc-rail .rc-nav{white-space:nowrap}

  /* labels: on expand, wait for the width to open, then fade in */
  .rc-rail .lbl{display:inline-block;transition:opacity .2s ease .1s,transform .28s cubic-bezier(.32,.72,0,1) .06s}
  .rc-rail .rc-hide{transition:opacity .2s ease .1s}
  .rc-rail .rc-grp{position:relative;white-space:nowrap;transition:color .2s ease .1s}
  .rc-rail .rc-grp::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1px;margin:0 0 0 -9px;background:currentColor;color:#C9C4BD;opacity:0;transition:opacity .15s}

  /* collapsed: labels leave first and fast */
  html.rail-min .rc-rail .lbl{opacity:0;transform:translateX(-6px);transition:opacity .1s ease,transform .18s ease}
  html.rail-min .rc-rail .rc-hide{opacity:0;pointer-events:none;transition:opacity .1s ease}
  html.rail-min .rc-rail .rc-grp{color:transparent;transition:color .1s ease}
  html.rail-min .rc-rail .rc-grp::after{opacity:.35;transition:opacity .2s ease .12s}
  /* no scrollbar gutter eating the icon rail; wheel and trackpad still scroll */
  html.rail-min .rc-rail{scrollbar-width:none}
  html.rail-min .rc-rail::-webkit-scrollbar{display:none}

  /* brand: wordmark -> reticle mark, centred over the icon column */
  .rc-rail .rc-brand{position:relative}
  .rc-rail .rc-mark{display:block;position:absolute;left:calc(var(--rc-npad,10px) + var(--rc-icon,17px) / 2 - 11px);top:var(--rc-mark-top,6px);width:22px;height:22px;
    color:var(--aim-brand,#FF8220);opacity:0;pointer-events:none;transform:scale(.6) rotate(-90deg);transition:opacity .15s ease,transform .3s cubic-bezier(.32,.72,0,1)}
  html.rail-min .rc-rail .rc-mark{opacity:1;transform:none;transition:opacity .2s ease .06s,transform .45s cubic-bezier(.32,.72,0,1) .04s}

  /* count tags become a dot on the icon */
  html.rail-min .rc-rail .rc-tag:not([hidden]){position:absolute;left:calc(var(--rc-npad,10px) + var(--rc-icon,17px) - 4px);top:5px;
    width:9px;height:9px;min-width:0;padding:0;margin:0;font-size:0;line-height:0;border-radius:50%;
    background:var(--aim-brand,#FF8220);box-shadow:0 0 0 2px var(--rc-rail-bg,#16120E)}
  html.rail-min .rc-rail .rc-tag.muted{display:none}

  /* footer: avatar stays, the action buttons stack under it */
  html.rail-min .rc-rail .rc-foot{flex-direction:column;align-items:center;gap:6px;padding-left:0;padding-right:0}
  html.rail-min .rc-rail .rc-foot .rc-hide{position:absolute;width:1px;height:1px;overflow:hidden}
  html.rail-min .rc-rail .rc-foot .out{margin-left:0}

  /* the toggle: a round chevron riding the rail's right edge */
  .rc-toggle{display:flex;position:fixed;z-index:60;top:24px;left:calc(var(--rc-w,248px) - 13px);width:26px;height:26px;border-radius:50%;
    align-items:center;justify-content:center;padding:0;cursor:pointer;
    background:#fff;color:#16120E;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 10px rgba(0,0,0,.28);
    transition:left .34s cubic-bezier(.32,.72,0,1),transform .15s ease,box-shadow .15s ease}
  .rc-toggle:hover{transform:scale(1.1);box-shadow:0 4px 14px rgba(0,0,0,.34),0 0 0 3px color-mix(in srgb,var(--aim-brand,#FF8220) 30%,transparent)}
  html.rc-drawer .rc-toggle{display:none}
  .rc-toggle:focus-visible{outline:2px solid var(--aim-brand,#FF8220);outline-offset:2px}
  .rc-toggle svg{width:14px;height:14px;transition:transform .34s cubic-bezier(.32,.72,0,1)}
  html.rail-min .rc-toggle{left:calc(var(--rc-min) - 13px)}
  html.rail-min .rc-toggle svg{transform:rotate(180deg)}

  /* hover label for collapsed rows */
  .rc-tip{display:block;position:fixed;z-index:70;pointer-events:none;padding:6px 10px;border-radius:7px;
    background:#16120E;color:#F4F1EC;font-weight:600;font-size:12.5px;line-height:1.2;white-space:nowrap;
    box-shadow:0 6px 20px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
    opacity:0;transform:translate(-4px,-50%);transition:opacity .12s ease,transform .18s cubic-bezier(.32,.72,0,1)}
  .rc-tip.on{opacity:1;transform:translate(0,-50%)}
  .rc-tip .rc-tip-n{margin-left:8px;padding:1px 6px;border-radius:999px;background:var(--aim-brand,#FF8220);color:#16120E;font-size:10.5px}

  /* first paint restores the saved state with no animation */
  html.rc-noanim *{transition:none !important}
}

@media (prefers-reduced-motion:reduce){
  .rc-app,.rc-rail *,.rc-toggle,.rc-toggle svg,.rc-tip{transition:none !important}
}