/* ──────────────────────────────────────────────────────────────────────────
   Eden side navigation — collapsible groups and an icon-rail mode.
   Shared by accounts/base.html and portal_base.html. Both size the sidebar
   from --sidebar-w, so the rail simply narrows that variable.
   ────────────────────────────────────────────────────────────────────────── */

/* Animate only after first paint, so a saved state never visibly "snaps". */
.sidenav-ready .sidebar { transition: width .2s ease, padding .2s ease; }

/* ── Collapsible groups ─────────────────────────────────────────────────── */
.sid-group { display: flex; flex-direction: column; }
.sid-group:not(:has(.nav-link)) { display: none; }

.sid-group-hdr {
  all: unset; box-sizing: border-box; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: .4rem; width: 100%;
  font-family: 'JetBrains Mono', monospace; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.34);
  padding: .55rem .7rem .3rem; margin-top: .3rem; border-radius: 5px;
  transition: color .15s ease, background .15s ease;
}
.sid-group:first-child .sid-group-hdr { margin-top: 0; }
.sid-group-hdr:hover { color: rgba(255,255,255,.75); background: rgba(255,255,255,.04); }
.sid-group-hdr:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.sid-group-hdr .sid-chev { margin-left: auto; font-size: .68rem; transition: transform .2s ease; }
.sid-group.closed .sid-group-hdr .sid-chev { transform: rotate(-90deg); }

/* Link count, shown only while a group is closed. */
.sid-count {
  display: none; font-size: .58rem; letter-spacing: 0;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.6);
  border-radius: 10px; padding: .02rem .38rem;
}
.sid-group.closed .sid-count { display: inline-block; }
/* Amber dot on a closed group that contains the page you're on. */
.sid-group.closed.has-active .sid-group-hdr::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
  order: 3;
}

/* Height animation without measuring: a one-row grid that folds to 0fr. */
.sid-group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease; }
.sid-group-body > .sid-group-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: .1rem; }
.sid-group.closed .sid-group-body { grid-template-rows: 0fr; }

/* ── Collapse-sidebar toggle ────────────────────────────────────────────── */
.sid-collapse {
  all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; margin-top: auto; border-radius: 6px;
  color: rgba(255,255,255,.42); font-size: .8rem; font-family: 'DM Sans', sans-serif;
  transition: background .15s ease, color .15s ease;
}
.sid-footer + .sid-collapse, .sid-footer ~ .sid-collapse { margin-top: .35rem; }
.sid-collapse:hover { background: rgba(255,255,255,.08); color: #fff; }
.sid-collapse:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.sid-collapse i { font-size: .95rem; width: 1rem; flex-shrink: 0; transition: transform .2s ease; }
.sid-collapse kbd {
  margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: .6rem;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.12); border-radius: 3px; padding: 0 .3rem;
}

/* ── Rail mode (desktop only; mobile keeps its own nav) ─────────────────── */
@media (min-width: 992px) {
  html.sidenav-collapsed { --sidebar-w: 64px; }
  html.sidenav-collapsed .sidebar { padding-left: .5rem !important; padding-right: .5rem !important; }

  /* Hide labels without touching markup: text collapses, icons keep their rem size. */
  html.sidenav-collapsed .sidebar .nav-link,
  html.sidenav-collapsed .sidebar .sid-collapse {
    font-size: 0 !important; gap: 0 !important; justify-content: center; padding: .6rem 0 !important;
  }
  html.sidenav-collapsed .sidebar .nav-link i,
  html.sidenav-collapsed .sidebar .sid-collapse i { font-size: 1.05rem; opacity: .85; }
  html.sidenav-collapsed .sid-collapse i { transform: rotate(180deg); }
  html.sidenav-collapsed .sid-collapse kbd,
  html.sidenav-collapsed .sidebar .dropdown-toggle::after,
  html.sidenav-collapsed .sidebar .sid-callout { display: none !important; }

  /* Group headers and plain section labels become thin dividers. */
  html.sidenav-collapsed .sid-group-hdr,
  html.sidenav-collapsed .sidebar .sid-section {
    font-size: 0 !important; padding: 0 !important; height: 1px; min-height: 1px;
    background: rgba(255,255,255,.1); margin: .55rem .5rem !important; pointer-events: none;
  }
  html.sidenav-collapsed .sid-group-hdr > *,
  html.sidenav-collapsed .sid-group.closed .sid-count,
  html.sidenav-collapsed .sid-group.closed.has-active .sid-group-hdr::after { display: none !important; }
  html.sidenav-collapsed .sid-group:first-child .sid-group-hdr { display: none; }

  /* Every icon stays reachable in the rail, whatever the group state. */
  html.sidenav-collapsed .sid-group.closed .sid-group-body { grid-template-rows: 1fr; }
}

/* Floating label for rail icons. Lives on <body>: the sidebar scrolls, so an
   in-sidebar tooltip would be clipped by its overflow. */
#sidenav-tip {
  position: fixed; z-index: 1200; pointer-events: none;
  background: #1a1208; color: #fff; font-family: 'DM Sans', sans-serif; font-size: .78rem;
  padding: .32rem .6rem; border-radius: 5px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(26,18,8,.25);
  opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease;
}
#sidenav-tip.on { opacity: 1; transform: none; }
#sidenav-tip::before {
  content: ''; position: absolute; left: -4px; top: 50%; margin-top: -4px;
  border: 4px solid transparent; border-left: 0; border-right-color: #1a1208;
}

@media (prefers-reduced-motion: reduce) {
  .sidenav-ready .sidebar, .sid-group-body, .sid-group-hdr .sid-chev, .sid-collapse i, #sidenav-tip { transition: none !important; }
}

/* Right-to-left: the rail tooltip opens to the left, arrow on its right edge. */
#sidenav-tip.rtl::before { left: auto; right: -4px; border-left: 4px solid #1a1208; border-right: 0; }
[dir="rtl"] .sid-collapse i.bi-chevron-double-left { transform: scaleX(-1); }
[dir="rtl"] html.sidenav-collapsed .sid-collapse i, html[dir="rtl"].sidenav-collapsed .sid-collapse i { transform: none; }
[dir="rtl"] .sid-group.closed .sid-group-hdr .sid-chev { transform: rotate(90deg); }

/* Language switcher styling now lives in theme.css, with the appearance
   toggle, so both controls stay identical. */

/* On phones the sidebar is a drawer, not a rail: keep it full width there. */
@media (max-width: 991.98px) {
  html.sidenav-collapsed .sidebar.offcanvas-lg { width: var(--bs-offcanvas-width, 272px); padding: .9rem .65rem !important; }
  html.sidenav-collapsed .sidebar.offcanvas-lg .nav-link { font-size: .875rem !important; gap: .6rem !important; justify-content: flex-start; padding: .5rem .7rem !important; }
  html.sidenav-collapsed .sidebar.offcanvas-lg .sid-group-hdr { font-size: .62rem !important; padding: .55rem .7rem .3rem !important; height: auto; background: none; margin: .3rem 0 0 !important; }
  html.sidenav-collapsed .sidebar.offcanvas-lg .sid-group-hdr > * { display: revert; }
  html.sidenav-collapsed .sidebar.offcanvas-lg .sid-section { font-size: .62rem !important; height: auto; background: none; padding: .5rem .7rem .3rem !important; }
}

/* Mobile drawer menu: the same collapsible groups as the desktop sidebar,
   but on a light background. */
#mobileNav .sid-group-hdr {
  color: var(--muted); background: none; width: 100%; border: none;
  font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .6rem .45rem .3rem; display: flex; align-items: center; gap: .4rem; text-align: left;
}
#mobileNav .sid-group-hdr:hover { color: var(--forest); }
#mobileNav .sid-chev { margin-left: auto; font-size: .6rem; transition: transform .18s ease; }
#mobileNav .sid-group.closed .sid-chev { transform: rotate(-90deg); }
#mobileNav .sid-count { font-size: .6rem; opacity: .6; }