/* Integrasjon- og mapping-kort.
   Brukes på /innstillinger/tenant/integrasjoner-undersidene. Mer luftig enn
   .kort (KPI-boks) siden hver rad har egne handlinger og status. */

.integrasjon-liste,
.mapping-liste {
  display: flex;
  flex-direction: column;
  gap: var(--avstand-3);
}

.integrasjon-kort {
  background: var(--farge-bakgrunn);
  border: var(--kant);
  border-radius: var(--radius-stor);
  padding: var(--avstand-3) var(--avstand-4);
  display: flex;
  flex-direction: column;
  gap: var(--avstand-2);
}

.integrasjon-kort__topp {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--avstand-3);
}

.integrasjon-kort__navn {
  font-size: var(--font-stor);
  font-weight: 600;
  margin: 0 0 4px 0;
}

.integrasjon-kort__meta {
  font-size: var(--font-base);
  color: var(--farge-tekst-dempet);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.integrasjon-kort__melding {
  font-size: var(--font-base);
  color: var(--farge-tekst-dempet);
  padding: var(--avstand-2) var(--avstand-3);
  background: var(--farge-overflate);
  border-radius: var(--radius);
  border-left: 3px solid var(--farge-kant-sterk);
  font-family: var(--font-monospace);
  font-size: var(--font-liten);
  white-space: pre-wrap;
  word-break: break-word;
}

.integrasjon-kort__fot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--avstand-3);
  padding-top: var(--avstand-2);
  border-top: 1px solid var(--farge-kant);
  flex-wrap: wrap;
}

.integrasjon-kort__handlinger {
  display: flex;
  gap: var(--avstand-2);
  flex-wrap: wrap;
}

/* Status-merker — pill-form med fargeprikk. Matcher .kritikalitet-mønsteret
   (subtil tonal bakgrunn, ingen border) men med rundere form. */
.merke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  font-size: var(--font-liten);
  font-weight: 500;
  border-radius: 999px;
  line-height: 1.5;
  white-space: nowrap;
}
.merke::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.merke--ok {
  background: rgba(22, 163, 74, 0.12);
  color: var(--farge-ok);
}
.merke--feil {
  background: rgba(220, 38, 38, 0.12);
  color: var(--farge-feil);
}
.merke--dempet {
  background: var(--farge-overflate);
  color: var(--farge-tekst-dempet);
}
.merke--dempet::before {
  background: var(--farge-tekst-svak);
}
.merke--ardoq {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}

@media (prefers-color-scheme: dark) {
  .merke--ok   { background: rgba(22, 163, 74, 0.22); color: #4ade80; }
  .merke--feil { background: rgba(220, 38, 38, 0.22); color: #fca5a5; }
}

/* Inline kodeboks brukt for org-label, workspace-id osv. */
.kodeboks-inline {
  font-family: var(--font-monospace);
  font-size: var(--font-liten);
  background: var(--farge-overflate);
  padding: 1px 6px;
  border-radius: var(--radius);
  border: 1px solid var(--farge-kant);
}