/* Prismatrise — tjeneste × organisasjon-matrise med beløp i hver celle.
   Tett Excel-aktig visning. Sticky første kolonne(r), sticky toppe rad,
   sticky bunn-rad (totaler), sticky høyre kolonne (tjeneste-total).

   Strukturen er en vanlig <table> i en scroll-container. Sticky-positioning
   plasserer cellen relativt til nærmeste rullbare forelder. */

.prismatrise-wrap {
  /* Tar tilgjengelig høyde i hovedinnholdet. Krever at parent
     (.seksjon) har flex og min-height: 0 så vi får skikkelig scroll. */
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--farge-kant);
  border-radius: var(--radius);
  background: var(--farge-bakgrunn);
}

.prismatrise {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content; /* Lar tabellen bli så bred den må — scroll-container scroller */
  min-width: 100%;
  font-size: var(--font-base);
  font-variant-numeric: tabular-nums;
}

.prismatrise th,
.prismatrise td {
  padding: 6px 10px;
  white-space: nowrap;
  border-right: 1px solid var(--farge-radkant);
  border-bottom: 1px solid var(--farge-radkant);
  background: var(--farge-bakgrunn);
}

.prismatrise thead th {
  background: var(--farge-overflate);
  font-weight: 500;
  color: var(--farge-tekst-dempet);
  border-bottom: 1px solid var(--farge-kant-sterk);
  font-size: var(--font-liten);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Tallcelle — høyrejustert + tabular nums. */
.prismatrise .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Tom-celle markeres dempet så øyet hopper over den. */
.prismatrise .num--null {
  color: var(--farge-tekst-svak);
}

/* Sticky-kolonner krever faste bredder for at `left:` skal kunne summere
   opp riktig posisjon. Endrer du --prismatrise-kat-bredde, må også
   left: <samme verdi> på __tjeneste-cellen stemme. */
:root {
  --prismatrise-kat-bredde: 6rem;
  --prismatrise-tjeneste-bredde: 18rem;
}

/* Første kolonne (kategori-path) — smal, dempet, sticky venstre. */
.prismatrise__kategori {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--farge-bakgrunn);
  color: var(--farge-tekst-svak);
  font-family: var(--font-monospace);
  font-size: var(--font-liten);
  border-right: 1px solid var(--farge-kant);
  width: var(--prismatrise-kat-bredde);
  min-width: var(--prismatrise-kat-bredde);
  max-width: var(--prismatrise-kat-bredde);
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Andre kolonne (tjeneste-navn) — den klikkbare. Sticky til venstre,
   høyere z-index så den ligger over data-celler ved horisontal scroll.
   `left` må matche kat-bredden eksakt. */
.prismatrise__tjeneste {
  position: sticky;
  left: var(--prismatrise-kat-bredde);
  z-index: 3;
  background: var(--farge-bakgrunn);
  font-weight: 500;
  border-right: 1px solid var(--farge-kant);
  width: var(--prismatrise-tjeneste-bredde);
  min-width: var(--prismatrise-tjeneste-bredde);
  max-width: var(--prismatrise-tjeneste-bredde);
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.prismatrise__tjeneste:hover {
  background: var(--farge-overflate-hover);
}

/* Tjenestens leverandør-undertekst inni tjeneste-cellen. */
.prismatrise__tjeneste-leverandor {
  display: block;
  font-size: var(--font-liten);
  font-weight: normal;
  color: var(--farge-tekst-svak);
  margin-top: 1px;
}

/* Header-celler for de to venstre sticky-kolonnene må også være sticky
   til venstre — ikke bare topp — så hjørnet ligger over alt. */
.prismatrise thead .prismatrise__kategori,
.prismatrise thead .prismatrise__tjeneste {
  z-index: 4; /* Over data-rad-sticky-kolonner */
  background: var(--farge-overflate);
}

/* Org-kolonne-headere er klikkbare → åpne OrganisasjonDetalj. */
.prismatrise__org-header {
  cursor: pointer;
}
.prismatrise__org-header:hover {
  background: var(--farge-overflate-hover);
}
.prismatrise__org-kortnavn {
  font-weight: 600;
  color: var(--farge-tekst);
  font-size: var(--font-base);
}
.prismatrise__org-navn {
  display: block;
  font-size: var(--font-liten);
  font-weight: normal;
  color: var(--farge-tekst-svak);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 1px;
}

/* Total-kolonnen helt til høyre — sticky til høyre. */
.prismatrise__total-kol {
  position: sticky;
  right: 0;
  background: var(--farge-overflate);
  font-weight: 600;
  border-left: 1px solid var(--farge-kant-sterk);
  z-index: 2;
}
.prismatrise thead .prismatrise__total-kol {
  z-index: 4;
}

/* Total-rad nederst — sticky til bunn. */
.prismatrise__total-rad td {
  position: sticky;
  bottom: 0;
  background: var(--farge-overflate);
  font-weight: 600;
  border-top: 1px solid var(--farge-kant-sterk);
  z-index: 2;
}
/* Hjørnene må over hverandre — bunn-venstre/bunn-høyre høyere enn vanlige sticky. */
.prismatrise__total-rad .prismatrise__kategori,
.prismatrise__total-rad .prismatrise__tjeneste {
  z-index: 4;
}
.prismatrise__total-rad .prismatrise__total-kol {
  z-index: 5; /* Hjørnet bunn-høyre — over alt */
  background: var(--farge-primary);
  color: var(--farge-primary-tekst);
}

/* Advarsel om mangler fordeling — gul-toned rad-bakgrunn på første sticky-celler.
   Backend setter `mangler_fordeling=true` når Σvekt != 1,000000. */
.prismatrise__rad--mangler-fordeling .prismatrise__kategori,
.prismatrise__rad--mangler-fordeling .prismatrise__tjeneste {
  background: rgba(217, 119, 6, 0.08);
}
.prismatrise__rad--mangler-fordeling .prismatrise__tjeneste::after {
  content: ' ⚠';
  color: var(--farge-varsel);
}

/* Hover på en rad uthever hele raden — krever at vi kan farge sticky-celler òg. */
.prismatrise tbody tr:hover td:not(.prismatrise__total-kol) {
  background: var(--farge-overflate-hover);
}
.prismatrise tbody tr:hover .prismatrise__kategori,
.prismatrise tbody tr:hover .prismatrise__tjeneste {
  background: var(--farge-overflate-hover);
}

/* Tom-tilstand når ingen tjenester finnes. */
.prismatrise-tom {
  padding: var(--avstand-5);
  text-align: center;
  color: var(--farge-tekst-svak);
}
.prismatrise-tom__tittel {
  font-size: var(--font-stor);
  color: var(--farge-tekst);
  margin-bottom: var(--avstand-2);
}

/* Toolbar-spesifikke kontroller for prismatrise. */
.prismatrise-toolbar {
  display: flex;
  align-items: center;
  gap: var(--avstand-2);
}
.prismatrise-toolbar__dato {
  width: 9rem;
}

/* Hint-tekst under tabellen om hva ⚠-merket betyr. */
.prismatrise__legend {
  margin-top: var(--avstand-2);
  font-size: var(--font-liten);
  color: var(--farge-tekst-svak);
}
.prismatrise__legend span {
  margin-right: var(--avstand-4);
}