/* App sidebar, new layout (flag new_sidebar; js/views/sidebar.js adds
   body.sb2). Every rule is scoped under body.sb2, so with the flag off the app
   looks exactly as before. Colors come from the app's theme tokens, so light,
   dark and the Settings › Appearance choice all work. */
body.sb2 {
  --sb-w: 232px;
  --sb-w-collapsed: 64px;
  --sb-icon: var(--text-secondary);
  --sb-active: var(--neutral-wash);
  --sb-hover: color-mix(in srgb, var(--neutral-wash) 55%, transparent);
}

body.sb2 .sidebar {
  width: var(--sb-w);
  padding: 0;
  gap: 0;
  background: var(--surface-1);
  transition: width .18s ease;
}
body.sb2 .side-brand { display: none; }

/* Brand card */
body.sb2 .bswitch { margin: 0; padding: 16px 14px 0; }
body.sb2 .bswitch-btn {
  gap: 11px; padding: 10px 12px; border-radius: 11px;
  border-color: var(--grid); background: var(--surface-1);
}
body.sb2 .bswitch-btn .bmark { width: 34px; height: 34px; border-radius: 8px; font-size: 15px; }
body.sb2 .bswitch-btn .bmark .fav-mark { width: 34px; height: 34px; border-radius: 8px; }
body.sb2 .sb2-bt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; gap: 1px; text-align: left; }
body.sb2 .sb2-bt small { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
body.sb2 .sb2-bt .bname { font-size: 15.5px; font-weight: 600; color: var(--text-primary); }
body.sb2 .bswitch-btn .chev { color: var(--text-secondary); width: 14px; height: 14px; }

/* Before the brands load, the card keeps its place so the nav below doesn't move. */
#brandSwitch.bs-wait { visibility: hidden; }

/* Brand menu */
body.sb2 .bmenu { left: 14px; right: auto; width: 300px; padding: 8px; }
body.sb2 .sb2-search {
  width: 100%; border: 1px solid var(--grid); border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 13.5px; background: var(--surface-1); color: var(--text-primary);
}
body.sb2 .sb2-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
body.sb2 .sb2-mh { display: flex; justify-content: space-between; margin: 10px 6px 4px; font-size: 12px; color: var(--text-muted); }
body.sb2 .sb2-mono { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
body.sb2 .bmenu-item { padding: 7px 6px; }
body.sb2 .bmenu-item.bmenu-current { background: var(--sb-active); }
body.sb2 .bmenu-item .viewing-pill { display: none; }
body.sb2 .sb2-v { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
body.sb2 .sb2-chk { margin-left: auto; width: 14px; flex: none; font-size: 13px; color: var(--text-primary); text-align: center; }
body.sb2 .sb2-v + .sb2-chk { margin-left: 4px; }
body.sb2 .bmenu-new, body.sb2 .bmenu-addws { color: var(--text-primary); font-weight: 500; }
body.sb2 .bmenu-divider { margin: 6px 0; }

/* Nav */
body.sb2 .sb2-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
  padding: 18px 14px 12px;
}
body.sb2 .sb2-body { scrollbar-width: thin; scrollbar-color: var(--grid) transparent; }
body.sb2 .sb2-body.sb2-clip {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}
body.sb2 .side-section {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-primary); padding: 16px 10px 8px;
}
/* No "General" title on the first group (Fede: a template catch-all). */
body.sb2 .sb2-body > .side-section:first-child { display: none; }
body.sb2 .sb2-morebtn { display: none; }
/* The breadcrumb shows the view name only, without the "General /" root. */
body.sb2 .crumb { font-size: 0; }
body.sb2 .crumb > span { display: none; }
body.sb2 .crumb b { font-size: 12.5px; }
body.sb2 .side-item { gap: 11px; padding: 9px 10px; border-radius: 9px; font-size: 14px; color: var(--text-secondary); }
body.sb2 .side-item svg { width: 18px; height: 18px; color: var(--sb-icon); opacity: 1; }
body.sb2 .side-item.active { background: var(--sb-active); color: var(--text-primary); font-weight: 500; }
body.sb2 .side-item.active svg { color: var(--text-primary); }
body.sb2 .side-item:not(.active):hover { background: var(--sb-hover); }
body.sb2 .side-spacer { min-height: 20px; }

/* Footer: profile row, then the GenSig mark and the collapse button */
body.sb2 .sb2-foot { border-top: 1px solid var(--grid); padding: 14px 16px; background: var(--surface-2); }
body.sb2 .sb2-prof-wrap { position: relative; }
body.sb2 .sb2-prof {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; border-radius: 9px; padding: 6px 4px; margin-bottom: 6px;
  text-align: left; color: inherit; font: inherit; cursor: pointer;
}
body.sb2 .sb2-prof:hover, body.sb2 .sb2-prof[aria-expanded="true"] { background: var(--sb-hover); }
body.sb2 .sb2-av {
  width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--text-primary); color: var(--surface-1);
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
body.sb2 .sb2-av img { width: 100%; height: 100%; object-fit: cover; }
body.sb2 .sb2-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
body.sb2 .sb2-pt b, body.sb2 .sb2-pt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sb2 .sb2-pt b { font-size: 14px; font-weight: 600; color: var(--text-primary); }
body.sb2 .sb2-pt small { font-size: 12.5px; color: var(--text-secondary); }
body.sb2 .sb2-more { color: var(--text-secondary); font-size: 16px; }
body.sb2 .sb2-pmenu {
  position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 30; min-width: 200px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-pop); padding: 6px;
}
body.sb2 .sb2-pmenu :is(button, a) {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--text-primary); cursor: pointer;
}
body.sb2 .sb2-pmenu :is(button, a):hover { background: var(--sb-hover); }
body.sb2 .sb2-pmenu a { box-sizing: border-box; text-decoration: none; }
body.sb2 .sb2-pmenu [hidden] { display: none; }
body.sb2 .sb2-row { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }
body.sb2 .sb2-mark {
  display: flex; align-items: center; gap: 7px; padding-left: 4px;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary);
}
body.sb2 .sb2-mark svg { width: 21px; height: 17px; }
body.sb2 .sb2-hide {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  background: none; border: 0; border-radius: 7px; color: var(--text-secondary); cursor: pointer;
}
body.sb2 .sb2-hide svg { width: 18px; height: 18px; }
body.sb2 .sb2-hide:hover { background: var(--sb-hover); color: var(--text-primary); }

/* The email and Sign out move from the top bar to the profile row. */
body.sb2 #userAvatar, body.sb2 #userEmail, body.sb2 #logoutBtn { display: none; }

/* Collapsed: brand favicon, main nav icons, avatar and the panel button. */
body.sb2.sb2-collapsed .sidebar { width: var(--sb-w-collapsed); }
body.sb2.sb2-collapsed .bswitch { padding: 18px 0 0; display: flex; justify-content: center; }
body.sb2.sb2-collapsed .bswitch-btn { width: auto; padding: 4px; border-color: transparent; }
body.sb2.sb2-collapsed .sb2-bt,
body.sb2.sb2-collapsed .bswitch-btn .chev,
body.sb2.sb2-collapsed .side-item > span,
body.sb2.sb2-collapsed [data-sb2="acct"],
body.sb2.sb2-collapsed .sb2-body > .side-item:not([data-sb2="core"]):not(.sb2-morebtn),
body.sb2.sb2-collapsed .sb2-pt,
body.sb2.sb2-collapsed .sb2-more,
body.sb2.sb2-collapsed .sb2-mark { display: none; }
body.sb2.sb2-collapsed .sb2-body { align-items: center; padding: 12px 0 8px; }
body.sb2.sb2-collapsed .side-item { justify-content: center; padding: 8px; }
/* Collapsed: the six core icons, then "More" (expands the bar). Each group
   label becomes a short hairline so the icons read in groups. */
body.sb2.sb2-collapsed .sb2-morebtn { display: flex; }
body.sb2.sb2-collapsed .side-section {
  width: 16px; height: 1px; padding: 0; margin: 7px auto; flex: none;
  font-size: 0; line-height: 0; overflow: hidden; background: var(--baseline);
}
body.sb2.sb2-collapsed .sb2-body > .side-section:first-child { display: none; }
body.sb2.sb2-collapsed .sb2-foot { display: flex; flex-direction: column; align-items: center; padding: 10px 0; background: none; }
body.sb2.sb2-collapsed .sb2-prof { width: auto; justify-content: center; margin: 0 0 8px; padding: 4px; }
body.sb2.sb2-collapsed .sb2-row { padding-top: 0; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  body.sb2 .sidebar { transition: none; }
}

/* The sidebar is sticky, so it is its own stacking layer: without a z-index the
   brand menu (z 30 inside it) paints under later sticky blocks such as the
   Settings sub-nav. Below modals (50); the phone drawer sets its own. */
body.sb2 .sidebar { z-index: 20; }
body.sb2 .sb2-adminnav[hidden] { display: none; }