/* Tre-tabell — modifier for .tabell som rendrer hierarki med expand/collapse. */

.tre-rad__navn {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.tre-rad__knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--farge-tekst-dempet);
  padding: 0;
  margin-right: var(--avstand-1);
  vertical-align: middle;
  flex: none;
}
.tre-rad__knapp:hover { color: var(--farge-tekst); }

.tre-rad__knapp::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform 0.1s ease;
}

.tre-rad[aria-expanded="true"] > td .tre-rad__knapp::before {
  transform: rotate(90deg);
}

/* Hele raden er klikkbar (åpner profil) → pek-cursor over cellene,
 * ikke tekstmarkering. Chevron-knappen beholder sin egen cursor. */
.tre-rad--klikkbar > td { cursor: pointer; }

.tre-rad__knapp--blad {
  cursor: default;
}
.tre-rad__knapp--blad::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border: 0;
  border-radius: 50%;
  background: var(--farge-tekst-svak);
  transform: none;
}

.tre-rad__sti {
  font-family: var(--font-monospace);
  font-size: var(--font-liten);
  color: var(--farge-tekst-svak);
  font-variant-numeric: tabular-nums;
  margin-right: var(--avstand-2);
  min-width: 36px;
  text-align: right;
  flex: none;
}

.tre-rad__type {
  font-size: 10px;
  color: var(--farge-tekst-svak);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: var(--avstand-2);
  background: var(--farge-overflate);
  padding: 1px 5px;
  border-radius: 2px;
  flex: none;
}

.tre-rad[data-type="fagsystem"] > td:first-child {
  font-style: italic;
}

/* --- Hierarki-vekt --- */

/* Fargestripe til venstre på første celle — fargekoder rot-familien.
   Brukes som visuelt anker når man scroller gjennom mange rader. */
.tre-rad > td:first-child {
  position: relative;
  border-left: 3px solid transparent;
}
.tre-rad[data-rot="1"] > td:first-child { border-left-color: var(--rot-1); }
.tre-rad[data-rot="2"] > td:first-child { border-left-color: var(--rot-2); }
.tre-rad[data-rot="3"] > td:first-child { border-left-color: var(--rot-3); }
.tre-rad[data-rot="4"] > td:first-child { border-left-color: var(--rot-4); }
.tre-rad[data-rot="5"] > td:first-child { border-left-color: var(--rot-5); }
.tre-rad[data-rot="6"] > td:first-child { border-left-color: var(--rot-6); }
.tre-rad[data-rot="7"] > td:first-child { border-left-color: var(--rot-7); }
.tre-rad[data-rot="8"] > td:first-child { border-left-color: var(--rot-8); }
.tre-rad[data-rot="9"] > td:first-child { border-left-color: var(--rot-9); }

/* Rot-rader (niva 0): fet, litt større, dempet bakgrunn, seksjonsstrek over */
.tre-rad[data-niva="0"] > td {
  background: var(--farge-overflate);
  font-weight: 500;
}
.tre-rad[data-niva="0"]:hover > td {
  background: var(--farge-overflate-hover);
}
.tre-rad[data-niva="0"] > td:first-child {
  font-weight: 700;
  font-size: 14px;
}
.tre-rad[data-niva="0"] .tre-rad__sti {
  color: var(--farge-tekst);
  font-weight: 700;
}

/* Seksjonsstrek over hver rot (unntatt den første) */
.tre-rad[data-niva="0"]:not(:first-child) > td {
  border-top: 2px solid var(--farge-kant-sterk);
}

/* Niva 2+ får dempet sti-tekst slik at niva 1 og niva 2 visuelt skiller seg */
.tre-rad[data-niva="2"] .tre-rad__sti,
.tre-rad[data-niva="3"] .tre-rad__sti {
  opacity: 0.7;
}