/* Perspektiv-velger — org-tre i header-dropdown (docs/14 §2.5).
   Sammenleggbart tre + søk + mappe-ikoner + truncate. */

/* Bredere meny så avdelingsnavn får plass. */
.dropdown__meny--bred {
  min-width: 22rem;
  max-width: 28rem;
}

/* Truncate aktivt perspektiv-navn på knappen i headeren. */
.dropdown[data-dropdown="perspektiv"] .dropdown__verdi {
  display: inline-block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.perspektiv__sok-rad {
  padding: var(--avstand-1) var(--avstand-3) var(--avstand-2);
}
.perspektiv__sok {
  width: 100%;
}

.perspektiv__tre {
  max-height: 22rem;
  overflow-y: auto;
}

.perspektiv__rad {
  display: flex;
  align-items: center;
}

/* Chevron — egen knapp som ikke lukker menyen. Trekant via border. */
.perspektiv__chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  color: var(--farge-tekst-dempet);
}
.perspektiv__chevron::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.12s ease;
}
.perspektiv__chevron.er-utvidet::before {
  transform: rotate(90deg);
}
.perspektiv__chevron--blad {
  cursor: default;
}

/* Navne-knappen fyller resten av raden. Arver .dropdown__valg, men flex + tett. */
.perspektiv__valg {
  display: flex;
  align-items: center;
  gap: var(--avstand-2);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--avstand-1) var(--avstand-2);
  border-radius: var(--radius);
}
.perspektiv__ikon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--farge-tekst-dempet);
}
.perspektiv__navn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perspektiv__valg.er-aktiv {
  background: var(--farge-overflate);
  font-weight: 600;
}

.perspektiv__tom {
  padding: var(--avstand-2) var(--avstand-3);
}