/* Explicit tree hierarchy for portal navigation */

.navigation-v3 {
  gap: 10px;
}

.navigation-v3 .nav-group {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}

.navigation-v3 .nav-group-toggle {
  min-height: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.navigation-v3 .nav-group.has-active-descendant > .nav-group-toggle,
.navigation-v3 .nav-group:not(.collapsed) > .nav-group-toggle {
  background: linear-gradient(90deg, rgba(32, 114, 251, 0.15), rgba(32, 114, 251, 0.045));
  color: #eef5ff;
}

.navigation-v3 .nav-group-body {
  margin: 0 !important;
  padding: 6px 7px 9px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.035);
}

.nav-folder {
  position: relative;
  margin: 2px 0;
}

.nav-folder-children {
  display: grid;
  gap: 2px;
  margin: 2px 0 3px 17px;
  padding-left: 11px;
  border-left: 1px solid rgba(111, 153, 222, 0.22);
}

.nav-folder-children::before {
  display: none !important;
}

.nav-folder-row,
.nav-folder-toggle {
  position: relative;
}

.nav-folder-row::before,
.nav-folder-toggle::before,
.navigation-v3 .nav-document-item::after {
  position: absolute;
  top: 50%;
  left: -12px;
  width: 10px;
  height: 1px;
  background: rgba(111, 153, 222, 0.25);
  content: '';
}

.nav-folder[data-tree-depth='0'] > .nav-folder-row::before,
.nav-folder[data-tree-depth='0'] > .nav-folder-toggle::before,
.navigation-v3 .nav-document-item[data-tree-depth='0']::after {
  display: none;
}

.nav-folder-row {
  grid-template-columns: minmax(0, 1fr) 32px;
  padding-left: 0 !important;
}

.nav-folder-toggle {
  width: 100% !important;
  margin-left: 0 !important;
}

.nav-folder-link,
.nav-folder-toggle {
  min-height: 38px;
  border: 1px solid transparent;
}

.nav-folder[data-tree-depth='0'] > .nav-folder-row .nav-folder-link,
.nav-folder[data-tree-depth='0'] > .nav-folder-toggle {
  min-height: 42px;
  border-color: rgba(86, 139, 230, 0.16);
  background: rgba(36, 70, 127, 0.2);
  color: #f2f6ff;
}

.nav-folder[data-tree-depth='0'] > .nav-folder-row .nav-folder-label,
.nav-folder[data-tree-depth='0'] > .nav-folder-toggle .nav-folder-label {
  font-size: 13.2px;
  font-weight: 790;
}

.nav-folder[data-tree-depth='1'] > .nav-folder-row .nav-folder-link,
.nav-folder[data-tree-depth='1'] > .nav-folder-toggle {
  min-height: 38px;
  border-color: rgba(93, 145, 235, 0.1);
  background: rgba(32, 114, 251, 0.055);
  color: #dbe8fb;
}

.nav-folder[data-tree-depth='1'] > .nav-folder-row .nav-folder-label,
.nav-folder[data-tree-depth='1'] > .nav-folder-toggle .nav-folder-label {
  font-size: 12.6px;
  font-weight: 735;
}

.nav-folder[data-tree-depth='2'] > .nav-folder-row .nav-folder-link,
.nav-folder[data-tree-depth='2'] > .nav-folder-toggle {
  min-height: 35px;
  color: #c5d0e2;
}

.nav-folder.has-active-descendant > .nav-folder-row .nav-folder-link,
.nav-folder.has-active-descendant > .nav-folder-toggle {
  border-color: rgba(95, 153, 255, 0.22);
  background: linear-gradient(90deg, rgba(32, 114, 251, 0.19), rgba(32, 114, 251, 0.065));
  color: #fff;
}

.nav-folder.has-active-descendant > .nav-folder-row .nav-folder-icon,
.nav-folder.has-active-descendant > .nav-folder-toggle .nav-folder-icon {
  background: #4f91ff;
  box-shadow: 0 0 0 4px rgba(32, 114, 251, 0.12);
}

.nav-folder.has-active-descendant > .nav-folder-row .nav-folder-icon::before,
.nav-folder.has-active-descendant > .nav-folder-toggle .nav-folder-icon::before {
  background: #78aaff;
}

.navigation-v3 .nav-document-item {
  width: 100% !important;
  min-height: 34px;
  margin-left: 0 !important;
  padding: 7px 9px 7px 10px;
  border: 1px solid transparent;
}

.navigation-v3 .nav-document-item[data-tree-depth='1'],
.navigation-v3 .nav-document-item[data-tree-depth='2'],
.navigation-v3 .nav-document-item[data-tree-depth='3'] {
  position: relative;
}

.navigation-v3 .nav-document-item:hover {
  border-color: rgba(111, 153, 222, 0.1);
}

.navigation-v3 .nav-document-item.active {
  border-color: rgba(84, 145, 255, 0.28);
  background: linear-gradient(90deg, rgba(32, 114, 251, 0.3), rgba(32, 114, 251, 0.1));
  box-shadow: inset 3px 0 0 #69a2ff;
}

.nav-folder-chevron-button,
.nav-folder-chevron {
  color: #8ba1c3;
}

.nav-folder[data-tree-depth='0'] > .nav-folder-row .nav-folder-chevron-button,
.nav-folder[data-tree-depth='0'] > .nav-folder-toggle .nav-folder-chevron {
  color: #a8c7fb;
}

@media (max-width: 780px) {
  .navigation-v3 .nav-group-body {
    padding: 7px 8px 10px !important;
  }

  .nav-folder-children {
    margin-left: 15px;
    padding-left: 9px;
  }
}