/* Dokumentasjons-statusmatrise (sider/dokumentasjon.js). Scopet til .dok-*.
 * Gjenbruker .tabell/.felt/.knapp/.lenke + design-tokens. */

.dok-wrap {
  overflow: auto;
  max-height: calc(100vh - 9rem);
}

.dok-matrise {
  border-collapse: separate;
  border-spacing: 0;
}

/* Sticky header (begge rader) + sticky første kolonne */
.dok-matrise thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--farge-overflate);
}
.dok-matrise thead tr:nth-child(2) th {
  top: 24px; /* = gruppe-radens høyde, så type-raden stacker rett under */
}
.dok-hjorne, .dok-tjeneste {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--farge-bakgrunn);
  text-align: left;
  min-width: 16rem;
  max-width: 22rem;
}
.dok-hjorne { z-index: 3; background: var(--farge-overflate); }

.dok-gruppe {
  text-align: center;
  font-size: var(--font-liten);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--farge-tekst-dempet);
  border-bottom: var(--kant);
  border-left: var(--kant);
}
/* Korte kolonne-koder (full navn som tooltip). Smale, ensartede kolonner. */
.dok-type {
  font-size: var(--font-liten);
  font-weight: 600;
  white-space: nowrap;
  width: 3.2rem;
  min-width: 3.2rem;
  max-width: 3.2rem;
  vertical-align: bottom;
  text-align: center;
}

.dok-tjeneste__navn { display: block; }
.dok-tjeneste__kat { display: block; font-size: var(--font-liten); }

/* Celler */
.dok-celle {
  text-align: center;
  cursor: pointer;
  position: relative;
  width: 3.2rem;
  user-select: none;
}
.dok-celle:hover { outline: 2px solid var(--farge-primary); outline-offset: -2px; }
.dok-celle:focus-visible { outline: 2px solid var(--farge-primary); outline-offset: -2px; }
.dok-sym { font-weight: 700; font-size: var(--font-base); }

/* Luft som matcher prismatrise. .tabell-basen tvinger padding:0 + height:30px på
 * td — vi overstyrer med kvalifiserte selektorer (.dok-matrise td.X) som vinner
 * på spesifisitet, så radene får samme pust som prismatrise. */
.dok-matrise td.dok-tjeneste { height: auto; padding: 7px 10px; }
.dok-matrise td.dok-celle    { height: auto; padding: 7px 6px; }
.dok-matrise th.dok-type     { padding: 6px 6px; }
.dok-matrise th.dok-gruppe   { height: 24px; padding: 3px var(--avstand-1); }
.dok-antall {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 9px;
  color: var(--farge-tekst-dempet);
}

/* Statusfarger — tint bakgrunn + tydelig symbolfarge. Gjenbruker token-farger. */
.dok-status--ok       { background: rgba(22, 163, 74, 0.12);  color: var(--farge-ok, #16a34a); }
.dok-status--snart,
.dok-status--revisjon { background: rgba(217, 119, 6, 0.15);  color: #b45309; }
.dok-status--utlopt,
.dok-status--mangler  { background: rgba(220, 38, 38, 0.15);  color: #b91c1c; }
.dok-status--ingen    { color: var(--farge-tekst-svak, var(--farge-kant-sterk)); }

/* Status-merke i side-panel */
.dok-status-merke {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  font-size: var(--font-liten);
  font-weight: 600;
  margin-right: var(--avstand-2);
}

/* Side-panel: dokument-kort + skjema */
.dok-panel { display: flex; flex-direction: column; gap: var(--avstand-3); }
.dok-kort {
  border: var(--kant);
  border-radius: var(--radius);
  padding: var(--avstand-3);
  display: flex;
  flex-direction: column;
  gap: var(--avstand-2);
}
.dok-kort__topp { display: flex; align-items: center; gap: var(--avstand-1); }
.dok-kort__meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--avstand-3); font-size: var(--font-liten); }
.dok-kort__meta dt { color: var(--farge-tekst-dempet); }
.dok-kort__meta dd { margin: 0; }
.dok-kort__handlinger { display: flex; gap: var(--avstand-2); }

.dok-skjema { display: flex; flex-direction: column; gap: var(--avstand-2); margin-top: var(--avstand-3); border-top: var(--kant); padding-top: var(--avstand-3); }
.dok-skjema__tittel { margin: 0; font-size: var(--font-stor, 15px); }
.dok-skjema__handlinger { display: flex; gap: var(--avstand-2); }
.dok-skjema .felt-gruppe { display: flex; flex-direction: column; gap: 2px; }
.dok-skjema .felt-gruppe > span { font-size: var(--font-liten); color: var(--farge-tekst-dempet); }