/* Flis — klikkbar boks med fargerikt ikon, tittel og kort beskrivelse.
 * Brukes på /innstillinger og /innstillinger/tenant/integrasjoner som
 * navigasjons-mål til underseksjoner. Ligger naturlig i admin-modus
 * (se docs/05-frontend.md §1.1).
 *
 * Layout: horisontalt grid — ikon til venstre, tittel og beskrivelse i en
 * vertikal blokk til høyre. Inspirert av referansebildet 2026-06-17.
 * Markup er uendret fra opprinnelig (kun CSS-justering):
 *
 *   <a class="flis" href="/...">
 *     <span class="flis__ikon flis__ikon--blå"><svg .../></span>
 *     <h3 class="flis__tittel">Tittel <span class="flis__merke">Kommer</span></h3>
 *     <p class="flis__beskrivelse">Kort forklaring</p>
 *   </a>
 */

.flis-rad {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--avstand-4);
  margin: 0 0 var(--avstand-5) 0;
}

.flis-seksjon {
  margin-bottom: var(--avstand-6);
}
.flis-seksjon:last-child {
  margin-bottom: 0;
}
.flis-seksjon__tittel {
  font-size: var(--font-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--farge-tekst-svak);
  margin: 0 0 var(--avstand-3) 0;
}

.flis {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "ikon tittel"
    "ikon beskrivelse";
  column-gap: var(--avstand-4);
  row-gap: var(--avstand-1);
  padding: var(--avstand-4);
  background: var(--farge-bakgrunn);
  border: 1px solid var(--farge-kant);
  border-radius: var(--radius-stor);
  text-decoration: none;
  color: var(--farge-tekst);
  cursor: pointer;
  box-shadow: var(--skygge-svak);
  transition: border-color 0.12s ease-out, transform 0.12s ease-out, box-shadow 0.12s ease-out;
  min-height: 88px;
}
.flis:hover {
  text-decoration: none;
  color: var(--farge-tekst);
  border-color: var(--farge-kant-sterk);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.flis:focus-visible {
  outline: 2px solid var(--farge-primary);
  outline-offset: 2px;
}

.flis--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.flis--disabled:hover {
  transform: none;
  box-shadow: var(--skygge-svak);
  border-color: var(--farge-kant);
}

.flis__ikon {
  grid-area: ikon;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: #ffffff;
  flex: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.flis__ikon svg {
  width: 24px;
  height: 24px;
}

.flis__tittel {
  grid-area: tittel;
  align-self: end;
  font-size: var(--font-stor);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--avstand-2);
  line-height: 1.25;
}

.flis__beskrivelse {
  grid-area: beskrivelse;
  align-self: start;
  font-size: var(--font-base);
  color: var(--farge-tekst-dempet);
  line-height: 1.45;
  margin: 0;
}

.flis__merke {
  display: inline-block;
  font-size: var(--font-liten);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--farge-overflate);
  color: var(--farge-tekst-svak);
  border: 1px solid var(--farge-kant);
}

/* Fargevarianter — bruker rot-paletten fra tokens.css. */
.flis__ikon--blå       { background: var(--rot-1); }
.flis__ikon--teal      { background: var(--rot-2); }
.flis__ikon--lilla     { background: var(--rot-3); }
.flis__ikon--oransje   { background: var(--rot-4); }
.flis__ikon--magenta   { background: var(--rot-5); }
.flis__ikon--rød       { background: var(--rot-6); }
.flis__ikon--grønn     { background: var(--rot-7); }
.flis__ikon--grå       { background: var(--rot-8); }
.flis__ikon--brun      { background: var(--rot-9); }