/* ========================================
   Sidebar: concepts list, tree filter, tree navigation, badges
   (split from main.css, PLAN-165 D9)
   ======================================== */

/* Sidebar — flat, as docs.bitmark.cloud (PLAN-274 D5): no tint, no
   border; plain 14 px links; the current item in the link colour, bold.
   Thin dividers only between the blocks.
   ---------------------------------------- */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* No underlines anywhere in the sidebar, hover included: the link colour
   alone marks a hovered or current item (base.css underlines a:hover). */
.sidebar a,
.sidebar a:hover {
  text-decoration: none;
}

/* Sidebar Concepts: the concept pages, at the top of the sidebar
   ---------------------------------------- */
.sidebar-concepts {
  border-bottom: 1px solid var(--color-border);
}

.sidebar-concepts ul {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
}

/* PLAN-287 D7: calm links; the current page on a tint. */
.sidebar-concept {
  display: block;
  margin: 0 var(--space-2);
  padding: 5px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.sidebar-concept:hover {
  color: var(--color-text);
  background-color: var(--color-bg-subtle);
  text-decoration: none;
}

.sidebar-concept.active {
  color: var(--color-primary);
  background-color: var(--color-accent-tint);
  font-weight: 600;
}

/* Reference heading: names the filter and tree below it as the reference
   index — a small capitals label in the heading colour.
   ---------------------------------------- */
.sidebar-heading {
  margin: 0;
  padding: var(--space-4) var(--space-4) 0;
  font-size: 11px;
  font-weight: 600;
  line-height: var(--line-height-normal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

/* Tree Filter
   ---------------------------------------- */
.tree-filter {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-heading + .tree-filter {
  padding-top: var(--space-2);
}

.tree-filter-input {
  width: 100%;
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast);
}

/* A clear focus ring (WCAG 2.4.7). */
.tree-filter-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.tree-filter-input::placeholder {
  color: var(--color-text-light);
}

/* Tree Navigation
   ---------------------------------------- */
.tree {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

/* No-JS fallback inside the tree placeholder: the section index links
   (PLAN-275 D7) */
.tree-noscript {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
}

.tree-noscript a {
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Section roots (PLAN-275 D1): a little air between them. */
.tree-root + .tree-root {
  margin-top: var(--space-1);
}

.tree-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tree-node {
  user-select: none;
}

.tree-node.filtered-out {
  display: none;
}

.tree-node-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4);
  cursor: pointer;
}

/* The chevron sits at the right of the row, after the count, and points
   down when open (PLAN-274 D5). tree.js still writes ▸/▾ into the icon;
   the glyph is hidden and drawn as a border chevron instead. */
.tree-toggle {
  order: 3;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tree-toggle:hover {
  color: var(--color-link);
}

.toggle-icon {
  font-size: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}

.tree-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(45deg);
}

/* Leaves no longer line up with a left-hand toggle. */
.tree-node-spacer {
  display: none;
}

.tree-node-link {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-node-link:hover {
  color: var(--color-link);
  text-decoration: none;
}

/* The current page: the node's OWN anchor only — a group page marks its
   group node active (tree.js), and the leaves beneath it must not light up
   with it. */
.tree-node.active > .tree-node-content > .tree-node-link,
.tree-node.active > .tree-node-content > .tree-node-label {
  color: var(--color-link);
  font-weight: 700;
}

.tree-children {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: var(--space-3);
  display: none;
}

.tree-node.expanded > .tree-children {
  display: block;
}

/* Entity Badges
   ---------------------------------------- */
.entity-badge {
  flex-shrink: 0;
  padding: 1px var(--space-2);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  letter-spacing: 0.025em;
}

/* Derived brand scale (indigo tints + neutral slate), not a rainbow —
   badges appear only in mixed-type trees. All pairs ≥ 4.5:1. */
.badge-bit {
  background-color: #27187e;
  color: #ffffff;
}

.badge-card {
  background-color: #4a3aad;
  color: #ffffff;
}

.badge-tag {
  background-color: #b1a7f2;
  color: #000000;
}

.badge-side {
  background-color: #475569;
  color: #ffffff;
}

.badge-variant {
  background-color: #334155;
  color: #ffffff;
}

/* Counts beside tree groups and tag-table section headings */
.tab-count {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

/* Grouped bits tree (PLAN-162 C)
   ---------------------------------------- */
/* A group heading in the bits tree links to that group's page (PLAN-176 D3),
   so it is an anchor, not the inert span it used to be: no `cursor: default`,
   and the underline is suppressed the way every other tree link's is. The
   chevron beside it still does the expanding. */
.tree-node-label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

a.tree-node-label:hover,
a.tree-node-label:focus-visible {
  color: var(--color-link);
}

.tree-node.has-children > .tree-node-content .tab-count {
  margin-left: auto;
}