/*
 * Sidebar nav (PD-29980).
 *
 * LAYOUT/TYPE come from the formulary design mockup's `.side` block
 * (link_formulary_part1-3_mockups.html): 218px wide, 18px/40px padding, 13px/800
 * group headings, 12.5px links, a 30px link indent.
 *
 * COLOURS come from `@ideon-api/ideon-ui`'s `src/tailwind-preset.ts` -- the org
 * palette shared with vericred /admin and auth's SPA -- NOT from the mockup,
 * whose magenta is not the brand magenta (see
 * docs/knowledge/decisions/0011-*.md). Worth knowing: the pre-PD-29980 active
 * colour was already exactly magenta-50, so that role does not move here.
 *
 * Tokens live in this file rather than application.css because the nav is their
 * only consumer -- PD-29980 deliberately stops at the nav, so a chrome-wide
 * token block would have no other reader.
 */
:root {
  --nav: #050516;        /* ideon-ui gray-black -- its own Sidebar's background */
  --nav-item: #D5D6DC;   /* ideon-ui gray-50    -- its NavItem default text */
  --nav-head: #ffffff;
  --nav-active: #EF89F8; /* ideon-ui magenta-50 -- unchanged from before */
  /* ideon-ui's NavItem hovers with `bg-white/5` -- a translucent wash rather than a
     fixed hex, so it holds up on any sidebar background. */
  --nav-hover: rgba(255, 255, 255, 0.05);
}

nav.site {
  background-color: var(--nav);
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  /* Mockup `.side`: 218px wide, 18px top / 40px bottom padding, no side padding
     (each row carries its own horizontal padding so hover bands span full width).
   *
   * `flex: none` is load-bearing, not decoration. `body` is a flex row and
   * `.main-content` asks for `width: 100%`, so without it the sidebar is a
   * shrinkable flex item and settles ~30px under its declared width -- the
   * pre-PD-29980 rule declared 290px and actually rendered ~240px. */
  flex: none;
  width: 218px;
  padding: 18px 0 40px;
  transition: width 200ms ease;

  /* No `white-space: nowrap`, deliberately -- the mockup's `.side a` doesn't set
     it, and at 290px the old sidebar could afford it while 218px cannot.
     "Network Active Date Extensions" needs ~187px against 170px of content width
     (218 - 30px indent - 18px right padding), so nowrap clipped its last
     character and gave the sidebar horizontal overflow. */
  a {
    color: var(--nav-item);
    text-decoration: none;
    font-size: 12.5px;

    &:hover {
      text-decoration: none;
    }

    /* Colour only, NOT weight. The mockup's `.side a.active` also sets
       font-weight 700, but ideon-ui shipped that and reverted it in 0.4.2: a
       heavier active label is wide enough to re-wrap a multi-word item, shifting
       every item below it on navigation. Their fix was to carry the active state
       on colour alone. Contrast here is 9.24:1, so colour is not the only cue
       being relied on for legibility. */
    &.active {
      color: var(--nav-active);
    }
  }

  .nav-group {
    /* Mockup `.side h5` */
    span.label {
      display: block;
      color: var(--nav-head);
      font-size: 13px;
      font-weight: 800;
      padding: 12px 18px 4px;
    }

    /* Mockup `.side a`. The only other `.nav-page` is the Log out link, which has no
       inner span (it hovers via `.nav-session` below), so this covers every grouped
       link and nothing else. */
    .nav-page span {
      display: block;
      padding: 4px 18px 4px 30px;

      &:hover {
        background-color: var(--nav-hover);
      }
    }
  }

  .nav-root {
    flex-grow: 0;
    margin: 0;
  }

  .nav-pages {
    flex-grow: 1;
  }

  .nav-session {
    flex-grow: 0;
    margin: 15px 0;
    padding: 0 15px;
    text-align: right;

    &:hover {
      background-color: var(--nav-hover);
    }
  }
}

/* Brand: the mockup replaces the character image with a bare `LI<span>N</span>K`
   wordmark. PD-29980 keeps the character (an explicit ticket requirement) and
   sets the wordmark beside it, so the brand carries both. Mockup `.side .logo`
   supplies the type; the flex row and image size are ours, sized so a 218px
   sidebar fits image + wordmark on one line. */
nav.site .navbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px 16px;
}

nav.site .brand-wordmark {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--nav-head);

  /* The mockup accents the N only. */
  span {
    color: var(--nav-active);
  }
}

/* Collapsed sidebar: Stimulus toggles `collapsed` on <body>; the inline
   head script toggles `sidebar-collapsed` on <html> before first paint
   (FOUC guard). Both rules describe the same state. */
body.collapsed nav.site,
html.sidebar-collapsed nav.site {
  width: 0;
  overflow: hidden;
  /* Zero the padding too: with the sidebar's own 18px/40px padding, width:0
     alone would leave a visible dark strip where 290px-era margins left none. */
  padding: 0;
}

.nav-collapse {
  flex-grow: 0;
  margin: 0 0 15px;
  padding: 0 15px;
  text-align: right;
}

.nav-collapse-btn,
.sidebar-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
}

.nav-collapse-btn {
  color: var(--nav-item);
}

.nav-collapse-btn:hover {
  background-color: var(--nav-hover);
}

.sidebar-expand-btn {
  align-self: flex-start;
  color: var(--nav);
  position: sticky;
  top: 0;
}