/* Kom-i-gang-veiviser — floating-kort nederst til høyre med stegs-sjekkliste.
   Vises automatisk når tenanten er tom, og kan hentes opp igjen fra
   bruker-dropdownen ("Vis kom-i-gang"). */

.kom-i-gang {
  position: fixed;
  bottom: var(--avstand-4);
  right: var(--avstand-4);
  width: 360px;
  max-width: calc(100vw - var(--avstand-4) * 2);
  background: var(--farge-bakgrunn);
  border: 1px solid var(--farge-kant);
  border-radius: var(--radius-stor);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 80;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, right 0.18s ease-out;
}
.kom-i-gang[data-aktiv="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* Når sticky side-panel er åpent — flytt kortet til venstre for panelet
   så det ikke havner under. Samme variabel som body bruker. */
body[data-side-panel-sticky="true"] .kom-i-gang {
  right: calc(var(--side-panel-bredde) + var(--avstand-4));
}

@media (max-width: 720px) {
  body[data-side-panel-sticky="true"] .kom-i-gang {
    right: var(--avstand-4);
  }
}

@media (prefers-color-scheme: dark) {
  .kom-i-gang {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

.kom-i-gang__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--avstand-2);
  padding: var(--avstand-3) var(--avstand-4);
  border-bottom: 1px solid var(--farge-kant);
}
.kom-i-gang__tittel {
  font-size: var(--font-stor);
  font-weight: 600;
  margin: 0;
}
.kom-i-gang__progresjon {
  font-size: var(--font-liten);
  color: var(--farge-tekst-svak);
  margin: 2px 0 0 0;
}
.kom-i-gang__lukk {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  color: var(--farge-tekst-svak);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.kom-i-gang__lukk:hover {
  background: var(--farge-overflate-hover);
  color: var(--farge-tekst);
}

.kom-i-gang__steg-liste {
  list-style: none;
  margin: 0;
  padding: var(--avstand-2) 0;
}

.kom-i-gang__steg {
  display: flex;
  align-items: center;
  gap: var(--avstand-3);
  padding: var(--avstand-2) var(--avstand-4);
  border-bottom: 1px solid var(--farge-radkant);
}
.kom-i-gang__steg:last-child {
  border-bottom: 0;
}

.kom-i-gang__steg-nummer {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--farge-overflate);
  color: var(--farge-tekst-svak);
  font-size: var(--font-liten);
  font-weight: 600;
  border: 1px solid var(--farge-kant);
}

.kom-i-gang__steg--ferdig .kom-i-gang__steg-nummer {
  background: var(--farge-ok);
  color: var(--farge-primary-tekst);
  border-color: var(--farge-ok);
}
.kom-i-gang__steg--aktiv .kom-i-gang__steg-nummer {
  background: var(--farge-primary);
  color: var(--farge-primary-tekst);
  border-color: var(--farge-primary);
}
.kom-i-gang__steg--blokkert .kom-i-gang__steg-nummer {
  opacity: 0.4;
}

.kom-i-gang__steg-tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kom-i-gang__steg-tekst strong {
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--farge-tekst);
}
.kom-i-gang__steg-tekst small {
  font-size: var(--font-liten);
  color: var(--farge-tekst-svak);
  line-height: 1.4;
}
.kom-i-gang__steg--blokkert .kom-i-gang__steg-tekst strong,
.kom-i-gang__steg--blokkert .kom-i-gang__steg-tekst small {
  opacity: 0.5;
}

.kom-i-gang__steg-status {
  flex-shrink: 0;
  font-size: var(--font-liten);
  color: var(--farge-ok);
  font-weight: 500;
}
.kom-i-gang__steg-status.dempet {
  color: var(--farge-tekst-svak);
}

.kom-i-gang__steg .knapp {
  flex-shrink: 0;
}

.kom-i-gang__ferdig {
  padding: var(--avstand-3) var(--avstand-4);
  margin: 0;
  background: var(--farge-overflate);
  border-top: 1px solid var(--farge-kant);
  text-align: center;
  font-size: var(--font-base);
  color: var(--farge-tekst);
}