/* ==========================================================================
   Sidebar
   Three bands: brand pinned at the top, a scrolling middle that holds the
   navigation and every tool, and a utility strip pinned at the bottom. Only
   the middle scrolls, so the brand and the account never drift away.
   ========================================================================== */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;               /* the middle band scrolls, not the whole rail */
  /* No `position` here: main.css pins the rail with `position: fixed`, and
     this file loads after it, so declaring one silently unpins the sidebar
     and lets it stretch to the full document height. `fixed` is already a
     containing block for the decorative foot. */
}

/* ── Brand ──────────────────────────────────────────────────────────────── */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--glass-border);
  flex: none;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  display: block;
}
.brand-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand .bt {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text);
  white-space: nowrap;
}
.brand .bs {
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ── The scrolling middle ───────────────────────────────────────────────── */
.nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 10px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border-strong) transparent;
}
.nav-scroll::-webkit-scrollbar { width: 8px; }
.nav-scroll::-webkit-scrollbar-thumb {
  background: var(--glass-border-strong);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ── Items ──────────────────────────────────────────────────────────────── */
.sidebar .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 1px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .13s var(--ease), color .13s var(--ease);
}
.sidebar .nav-item .icon {
  width: 17px;
  height: 17px;
  flex: none;
  stroke-width: 1.9;
  opacity: .85;
}
.nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar .nav-item:hover { background: var(--glass); color: var(--text); }
.sidebar .nav-item:hover .icon { opacity: 1; }
.sidebar .nav-item:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
}

/* Current page: tinted, plus a rail on the leading edge so it reads even
   for anyone who cannot separate the tint from the ground. */
.sidebar .nav-item.active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}
.sidebar .nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.sidebar .nav-item.active .icon { opacity: 1; color: var(--accent-strong); }

/* ── Section labels ─────────────────────────────────────────────────────── */
.sidebar .nav-label {
  padding: 16px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── Tool groups ────────────────────────────────────────────────────────── */
.nav-group-title { width: 100%; }
.nav-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--glass);
  border-radius: 99px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.nav-caret {
  display: grid;
  place-items: center;
  flex: none;
  transform: rotate(-90deg);      /* pointing right when closed */
  transition: transform .18s var(--ease);
  color: var(--text-faint);
}
.nav-caret .icon { width: 14px; height: 14px; }
.nav-group.open .nav-caret { transform: rotate(90deg); }

.nav-sub {
  display: none;
  padding: 2px 0 6px 12px;
  margin-left: 19px;
  border-left: 1px solid var(--glass-border);
}
.nav-group.open .nav-sub { display: block; }

.nav-sub-item {
  display: block;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12.8px;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .13s var(--ease), color .13s var(--ease);
}
.nav-sub-item:hover { background: var(--glass); color: var(--text); }
.nav-sub-item:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.nav-sub-item.active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}

/* ── Utility strip ──────────────────────────────────────────────────────── */
.sidebar-foot {
  flex: none;
  padding: 10px;
  border-top: 1px solid var(--glass-border);
  background: var(--glass);
}
.sb-notif-badge {
  margin-left: auto;
  flex: none;
  background: var(--danger);
  color: #fff;
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
}
.sb-files-row { padding: 2px 2px 0; }
.sb-files-row .nav-label { padding: 6px 10px 2px; }

.sb-user-card { padding: 8px 2px 2px; }
.sb-user-logged {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
}
.sb-avatar {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.sb-user-name {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Collapsed rail ─────────────────────────────────────────────────────────
   Icons only. The tool groups cannot be shown 70px wide, so they are hidden
   rather than squashed into something unreadable. */
.shell.collapsed .sidebar .brand { justify-content: center; padding-inline: 8px; }
.shell.collapsed .sidebar .brand-name,
.shell.collapsed .sidebar .nav-text,
.shell.collapsed .sidebar .nav-count,
.shell.collapsed .sidebar .nav-caret,
.shell.collapsed .sidebar .nav-label,
.shell.collapsed .sidebar .nav-sub,
.shell.collapsed .sidebar .sb-user-name,
.shell.collapsed .sidebar .sb-files-row { display: none; }
.shell.collapsed .sidebar .nav-item { justify-content: center; padding: 10px; gap: 0; }
.shell.collapsed .sidebar .nav-item.active::before { left: -6px; }
.shell.collapsed .sidebar .sb-user-logged { justify-content: center; padding: 8px; }

/* ── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-item,
  .nav-sub-item,
  .nav-caret { transition: none; }
}

/* ── Decorative foot ─────────────────────────────────────────────────────────
   The supplied artwork is composed with its subject in the corners and an
   empty middle, so stretching it across the whole rail shows nothing but pale
   wash -- at 270px wide a `cover` crop lands entirely in that empty middle.
   It is used instead as a flourish anchored to the foot, framed on the
   document cluster, and masked so it has faded to nothing well before it
   reaches any navigation text. The art is near-white, so the dark rail gets
   far less of it than the light one. */
.sidebar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 190px;
  background: url("../images/sidebar-art.webp") no-repeat bottom center / cover;
  pointer-events: none;           /* it is decoration; never eat a click */
  z-index: 0;
  /* Measured ceiling: above .14 the near-white art lifts the rail enough to
     push --text-dim under 4.5:1 for any nav item scrolled over it. */
  opacity: .12;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 65%);
          mask-image: linear-gradient(to bottom, transparent, #000 65%);
}
/* Light puts dark text on a white rail, so the pastel can carry at full
   strength -- --text-dim still measures 7.6:1 over the brightest pixel. */
html[data-theme="light"] .sidebar::after { opacity: .85; }

/* The rail's own contents sit above the flourish. */
.sidebar > * { position: relative; z-index: 1; }

/* At 70px there is no room for it to read as anything but noise. */
.shell.collapsed .sidebar::after { display: none; }