/* ============================================================
   tcsidebarv1.css — TribeCity Sidebar (Cloudflare-style)
   ------------------------------------------------------------
   Owns the visual treatment for the shared .tc-vnav vertical
   nav used by /admin/* sidebars and /hut/profile sidebar.

   Loaded AFTER tribecityv2.css in head.tpl so the rules here
   win on same specificity. We deliberately re-declare the
   .tc-vnav-item, .tc-vnav li.active>.tc-vnav-item, etc. so
   the older "full brand fill on active" treatment in
   tribecityv2.css (section 7, lines ~395-487) is fully
   replaced and the admin-shell inline override block in
   adminLayout.tpl is no longer required.

   Visual targets (matched against Cloudflare dashboard sidebar):
   - Section headers: bold, dark, mixed-case (NOT small-caps muted)
   - Inactive rows: plain text, neutral icon, no chrome
   - Active rows: VERY subtle — soft surface-alt bg + bold weight,
     no left-border accent, no brand-color fill, no shadow
   - Hover: even softer bg, no jiggle, no transform
   - Icons stay neutral (text-muted), no brand color even on active
   ============================================================ */

/* ---- Container ------------------------------------------- */
.tc-vnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* ---- Item (default / inactive) --------------------------- */
.tc-vnav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--tc-font);
  line-height: 1.4;
  color: #575765;
  text-decoration: none;
  letter-spacing: -0.4px;
  border-radius: 6px;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.05s ease, color 0.05s ease;
}

/* Icon column — fixed 18px slot keeps label X alignment stable across rows.
   font-size shrinks the visual glyph without changing layout. */
.tc-vnav-item i {
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
  font-size: 14px;
  color: var(--tc-text-muted);
  transition: color 0.05s ease;
}

/* ---- Hover ---------------------------------------------- */
.tc-vnav-item:hover,
.tc-vnav-item:focus {
  background-color: rgba(0, 0, 0, 0.025);
  color: var(--tc-text);
  text-decoration: none;
  /* No translateX — explicit 0 to defeat the leftover
     `.tc-vnav-item:hover { transform: translateX(3px) }` rule in
     tribecityv2.css that would otherwise leak through. */
  transform: translateX(0);
}

/* ---- Active --------------------------------------------- */
/* Cloudflare-style: minimal. Slightly darker bg than hover, bold weight,
   neutral text/icon. No left-border accent, no brand fill, no shadow. */
.tc-vnav-item.active,
.tc-vnav li.active > .tc-vnav-item,
.tc-vnav li.active > .tc-vnav-item:hover,
.tc-vnav li.active > .tc-vnav-item:focus,
.tc-vnav-item.active:hover,
.tc-vnav-item.active:focus {
  background-color: rgba(0, 0, 0, 0.035);
  color: var(--tc-text);
  font-weight: 400;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  text-decoration: none;
}

.tc-vnav-item.active i,
.tc-vnav li.active > .tc-vnav-item i {
  color: var(--tc-text);
}

/* ---- Danger variant (Leave Tribe, etc.) ----------------- */
.tc-vnav-item.tc-vnav-danger {
  color: var(--tc-danger);
  background-color: #fef2f2;
}
.tc-vnav-item.tc-vnav-danger i {
  color: var(--tc-danger);
}
.tc-vnav-item.tc-vnav-danger:hover {
  background-color: #fef2f2;
  color: var(--tc-danger);
}
.tc-vnav li.active > .tc-vnav-item.tc-vnav-danger,
.tc-vnav li.active > .tc-vnav-item.tc-vnav-danger:hover,
.tc-vnav li.active > .tc-vnav-item.tc-vnav-danger:focus,
.tc-vnav-item.tc-vnav-danger.active,
.tc-vnav-item.tc-vnav-danger.active:hover {
  background-color: #fef2f2;
  color: var(--tc-danger);
}
.tc-vnav li.active > .tc-vnav-item.tc-vnav-danger i,
.tc-vnav-item.tc-vnav-danger.active i {
  color: var(--tc-danger);
}

/* ---- Group label (section header) ----------------------- */
/* Bold, dark, mixed-case — matches Cloudflare "Observe / Build /
   Protect & Connect" pattern. NOT small caps. Controller now
   supplies Title Case keys ('Tribe', 'People', 'Content & Moderation',
   …) so no text-transform is needed. */
.tc-vnav .tc-vnav-group {
  list-style: none;
  margin: 18px 0 4px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tc-text-light);
  pointer-events: none;
}
.tc-vnav .tc-vnav-group:first-child {
  margin-top: 2px;
}

/* ---- Toggle parents with sub-lists (Cloudflare-style) --- */
/* Parents with children render with a chevron icon on the right;
   click toggles .expanded on the <li>. Server pre-applies .expanded
   when currentPage matches the parent or any of its children. */

/* Chevron — points right by default, rotates to point down on .expanded. */
.tc-vnav-chevron {
  margin-left: auto;
  font-size: 14px;
  color: var(--tc-text-light);
  transition: transform 0.18s ease, color 0.05s ease;
}
.tc-vnav > li.expanded > .tc-vnav-item .tc-vnav-chevron {
  transform: rotate(90deg);
}
.tc-vnav > li.tc-vnav-has-children > .tc-vnav-item:hover .tc-vnav-chevron {
  color: var(--tc-text);
}

/* Label takes remaining space so chevron sits flush right. */
.tc-vnav-label {
  flex: 1;
  min-width: 0;
}

/* Sub-list: collapsed by default via max-height:0; expands on .expanded.
   The vertical separator is drawn via ::before at the parent icon's
   vertical axis (x=19px = padding-left:10 + half-icon-width:9). */
.tc-vnav-sub {
  list-style: none;
  /* No padding, no outer margin — both would render visible space even
     when max-height:0 (browser quirks around max-height + padding+border).
     Spacing above first / below last sub-item is added via :first-child /
     :last-child margins on the <li> below — those ARE inside the overflow
     box so they get clipped when collapsed. */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.tc-vnav > li.expanded > .tc-vnav-sub {
  max-height: 600px;
}
.tc-vnav-sub::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background-color: var(--tc-border-light);
}
/* Push each sub <li> well past the vertical line so there's real
   breathing room between the line and the sub-item's bg edge.
   Line sits at x=19; li starts at x=28 → 9px gap. */
.tc-vnav-sub > li {
  margin-left: 28px;
}
/* Breathing room above first sub-item / below last sub-item.
   These margins live INSIDE the overflow:hidden container so they
   are clipped to invisible when the parent is collapsed. */
.tc-vnav-sub > li:first-child {
  margin-top: 5px;
}
.tc-vnav-sub > li:last-child {
  margin-bottom: 5px;
}
.tc-vnav-sub-item {
  display: block;
  /* padding-left: 12px puts text at li-start(28) + 12 = 40px from <a> edge,
     exactly matching parent text X (parent: padding-left:10 + icon:18 + gap:12).
     Top/bottom 9px matches parent .tc-vnav-item padding. */
  padding: 9px 10px 9px 12px;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--tc-font);
  color: #575765;
  text-decoration: none;
  letter-spacing: -0.4px;
  border-radius: 6px;
  transition: background-color 0.05s ease, color 0.05s ease;
}
.tc-vnav-sub-item:hover,
.tc-vnav-sub-item:focus {
  background-color: rgba(0, 0, 0, 0.025);
  color: var(--tc-text);
  text-decoration: none;
  /* No translateX — operator removed the hover shift. */
}
.tc-vnav-sub li.active > .tc-vnav-sub-item,
.tc-vnav-sub li.active > .tc-vnav-sub-item:hover,
.tc-vnav-sub li.active > .tc-vnav-sub-item:focus {
  background-color: rgba(0, 0, 0, 0.035);
  color: var(--tc-text);
  font-weight: 400;
}

/* ---- Separator (used by bodyHutProfile.tpl) ------------- */
.tc-vnav-sep {
  height: 1px;
  margin: 8px 10px;
  background-color: var(--tc-border-light);
  list-style: none;
  padding: 0;
  border: none;
}

/* ---- Mobile -------------------------------------------- */
@media (max-width: 768px) {
  .tc-vnav {
    gap: 6px;
  }
  .tc-vnav-item {
    padding: 9px 12px;
    font-size: 14px;
  }
  .tc-vnav .tc-vnav-group {
    margin: 14px 0 4px;
  }
}