/* Min profil-siden — kort med bruker-info + tenant-tilganger.

   Hold den lett: ikke for mye visuell støy. Headeren er bilde + navn,
   så lister og handlinger. Etterligner kort-mønsteret fra oversikt-siden. */

.profil-kort {
  display: flex;
  align-items: center;
  gap: var(--avstand-4);
  padding: var(--avstand-4);
  background: var(--farge-overflate);
  border: 1px solid var(--farge-kant);
  border-radius: var(--radius-stor);
  margin-bottom: var(--avstand-4);
}

.profil-kort__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--farge-primary);
  color: var(--farge-primary-tekst);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.profil-kort__tekst {
  min-width: 0;
  flex: 1;
}

.profil-kort__navn {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 2px 0;
}

.profil-kort__epost {
  font-size: var(--font-base);
  color: var(--farge-tekst-dempet);
  margin: 0;
}

.profil-kort__kilde {
  margin: var(--avstand-2) 0 0 0;
  font-size: var(--font-liten);
  color: var(--farge-tekst-svak);
  line-height: 1.4;
}

.profil-seksjon {
  margin-bottom: var(--avstand-5);
}

.profil-seksjon__tittel {
  font-size: var(--font-base);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--farge-tekst-svak);
  margin: 0 0 var(--avstand-3) 0;
}

.profil-handlinger {
  display: flex;
  gap: var(--avstand-2);
  flex-wrap: wrap;
}

/* Uthev aktiv tenant i tilganger-tabellen. */
.profil-tenant--aktiv td {
  background: var(--farge-overflate);
  font-weight: 500;
}

/* Generisk merke-stil for "Aktiv"-badgen — fallback hvis ikke merke.css
   har en primary-variant. */
.merke--primary {
  display: inline-block;
  padding: 2px 8px;
  background: var(--farge-primary);
  color: var(--farge-primary-tekst);
  border-radius: var(--radius);
  font-size: var(--font-liten);
  font-weight: 500;
  vertical-align: middle;
}