/* Tjeneste-profilside (sider/tjeneste-profil.js): statisk metadata-sidebar +
 * hovedinnhold med faner (Knytninger / Blokkdiagram).
 * Scopet til faner, profil- og blokk-klassene. */

/* --- Layout: sidebar (metadata) + hovedinnhold (faner) ---
 * Fyller seksjonens høyde (samme mønster som data-modus-tabellene: flex:1 +
 * min-height:0, intern scroll). Begge kolonner strekker seg til bunnen, så
 * skillelinjen og diagrammet bruker hele plassen uten å scrolle hele siden. */
.profil-layout {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: var(--avstand-4);
  flex: 1;
  min-height: 0;
}
/* Skillelinje, ikke boks: bare border-right (jf. Robert — færre bokser). */
.profil-sidebar {
  border-right: var(--kant);
  padding: 0 var(--avstand-4) var(--avstand-2) 0;
  overflow: auto;
}
.profil-hoved { min-width: 0; display: flex; flex-direction: column; min-height: 0; }

/* Aktiv fane fyller resten av høyden; lange lister scroller internt her
 * (ikke hele siden). Diagrammet flekser til å fylle (override under). */
.profil-fane { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.diagram-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.profil-fane .blokk-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.profil-fane .blokk-viewport { flex: 1; min-height: 0; height: auto; }

/* Inline tjeneste-redigering i Koblinger-fanen (gjenbrukt TjenesteDetalj).
 * Seksjon-stilene (.side-panel__seksjon*) er BEM og gjelder uansett container;
 * her trengs bare meldings-/fotnote-styling siden vi ikke er i et slide-over. */
.tjeneste-inline__meldinger:empty { display: none; }
.tjeneste-inline__topp { display: flex; justify-content: flex-end; margin-bottom: var(--avstand-3); }
/* Felles kolonne-struktur for kobling-tabellene (dokumenter/prosesser): navn +
 * status i samme posisjon/bredde → ser strukturert ut på tvers. Status-kolonnen
 * havner på samme x kun hvis kolonnen(e) ETTER status er like brede i begge
 * tabellene — derfor får meta (type) og handling samme bredde. */
.tabell--koblinger { table-layout: fixed; width: 100%; }
.tabell--koblinger .kol-status { width: 9rem; }
.tabell--koblinger .kol-meta,
.tabell--koblinger .kol-handling { width: 9rem; }
.tabell--koblinger td { overflow: hidden; text-overflow: ellipsis; }

/* Mer luft mellom seksjonene i profilens faner → tydeligere at de er separate. */
.profil-fane .side-panel__seksjon { margin-bottom: var(--avstand-6); }
.profil-fane .side-panel__seksjon:last-child { margin-bottom: 0; }

/* Ressurs-navn med liten avatar foran (ressurser/avhengigheter-radene). */
.kobling-navn { display: inline-flex; align-items: center; gap: var(--avstand-2); min-width: 0; }
.kobling-navn__tekst { min-width: 0; }
.tjeneste-inline__fotnote {
  display: flex;
  gap: var(--avstand-2);
  justify-content: flex-end;
  padding-top: var(--avstand-3);
  margin-top: var(--avstand-3);
  border-top: var(--kant);
}
.tjeneste-inline__fotnote[hidden] { display: none; }
.profil-undertjenester { margin: 0; padding-left: var(--avstand-4); }
.profil-undertjenester li { padding: 1px 0; }

/* «Sentrert/tilbake»-linje vises over canvaset kun når man har utforsket vekk. */
.diagram-senter { display: flex; align-items: center; gap: var(--avstand-3); }

/* Canvas-omslag: diagram fyller, kontrollene flyter oppå i hjørnene
 * (Relasjoner øverst venstre; zoom-pillen øverst høyre ligger i komponenten). */
.diagram-omslag { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Relasjons-kontroll: flytende knapp øverst venstre + dropdown (degrees + filtre). */
.diagram-kontroll { position: absolute; top: var(--avstand-2); left: var(--avstand-2); z-index: 3; }
.diagram-kontroll__knapper { display: flex; gap: var(--avstand-2); }
/* Avrundet, hvit (flytende) knapp — samme høyde + look som zoom-pillen. */
.diagram-kontroll .knapp {
  height: 36px;
  background: var(--farge-flytende);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.diagram-kontroll__oppfrisk { width: 36px; padding: 0; justify-content: center; font-size: var(--font-base); }
.diagram-kontroll__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 5;
  width: 15rem;
  padding: var(--avstand-3);
  background: var(--farge-flytende);
  border: var(--kant);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.diagram-kontroll__tittel {
  margin: 0 0 var(--avstand-1);
  font-size: var(--font-liten);
  font-weight: 600;
  color: var(--farge-tekst-dempet);
}
.diagram-kontroll__tittel:not(:first-child) { margin-top: var(--avstand-3); }
.diagram-kontroll__rad { display: flex; align-items: center; justify-content: space-between; gap: var(--avstand-2); padding: 3px 0; }
.diagram-kontroll__slider { display: inline-flex; align-items: center; gap: var(--avstand-2); }
.diagram-kontroll__slider input[type="range"] { width: 6.5rem; accent-color: var(--farge-primary); }
.diagram-kontroll__verdi { min-width: 1ch; text-align: right; font-variant-numeric: tabular-nums; }
.diagram-kontroll__sjekk { display: flex; align-items: center; gap: var(--avstand-2); padding: 3px 0; cursor: pointer; }
.diagram-kontroll__prikk { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Sidebar-topp: avatar (initialer-fallback) + navn + type, sentrert. */
.profil-sidebar__topp {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--avstand-1);
  padding-bottom: var(--avstand-3);
  margin-bottom: var(--avstand-3);
  border-bottom: var(--kant);
}
.profil-sidebar__navn { font-weight: 600; }
.profil-sidebar__type { font-size: var(--font-liten); color: var(--farge-tekst-dempet); text-transform: capitalize; }

/* Status-prikker nederst i sidebaren (samme språk som tabellen). */
.profil-merker {
  margin-top: var(--avstand-3);
  padding-top: var(--avstand-3);
  border-top: var(--kant);
  display: flex;
  flex-direction: column;
  gap: var(--avstand-2);
}
.profil-merkerad { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.profil-merkerad__etikett { color: var(--farge-tekst-dempet); font-size: var(--font-liten); }
.profil-merkerad__tall { font-variant-numeric: tabular-nums; }

/* Smal skjerm: stable sidebar over innholdet i normal flyt (ingen full-høyde-
 * fyll — siden scroller naturlig). Sidebar får under-strek i stedet for høyre. */
@media (max-width: 56rem) {
  .profil-layout { display: block; flex: none; min-height: 0; }
  .profil-sidebar {
    border-right: 0;
    border-bottom: var(--kant);
    padding: 0 0 var(--avstand-3);
    margin-bottom: var(--avstand-3);
    overflow: visible;
  }
  .profil-fane { display: block; overflow: visible; }
  .profil-fane .blokk-wrap { display: block; }
  .profil-fane .blokk-viewport { height: 60vh; min-height: 320px; }
}

/* --- Faner (generisk nok til gjenbruk; flyttes til egen komponent hvis flere sider trenger det) --- */
.faner {
  display: flex;
  gap: var(--avstand-1);
  border-bottom: var(--kant);
  margin-bottom: var(--avstand-4);
}
.fane {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--avstand-2) var(--avstand-3);
  font: inherit;
  color: var(--farge-tekst-dempet);
  cursor: pointer;
}
.fane:hover { color: var(--farge-tekst); }
.fane--aktiv { color: var(--farge-tekst); border-bottom-color: var(--farge-primary); font-weight: 600; }
.fane:focus-visible { outline: 2px solid var(--farge-primary); outline-offset: 2px; }

/* --- Metadata i sidebaren: etikett over verdi (stablet — passer smal kolonne) --- */
.profil-egenskaper { margin: 0; display: flex; flex-direction: column; gap: var(--avstand-2); }
.profil-egenskap dt { color: var(--farge-tekst-dempet); font-size: var(--font-liten); }
.profil-egenskap dd { margin: 2px 0 0; }

/* Blokkdiagram-stiler ligger i komponenter/blokkdiagram.css (gjenbrukbar komponent). */