/* Weneva Rapport: portalen.
   Rolig og lett: hvit og lys grå bakgrunn, navy tekst, byråets farger som CSS-variabler.
   Ytelse: ingen backdrop-filter, ingen loopende animasjoner, bare korte overganger. */

:root {
  /* Byråets farger. Overskrives fra /api/meg i app.js (brukMerkevare). */
  --primar: #212738;
  --primar-pa: #ffffff;
  --primar-hover: #383d4c;
  --primar-tint: #d3d4d7;
  --aksent: #cb1f27;
  --aksent-pa: #ffffff;
  --aksent-tekst: #cb1f27;
  --aksent-ui: #cb1f27;
  --aksent-tint: #fcf0f0;
  --aksent-linje: #ea9ea2;
  /* Periode B i sammenligningen (dempet blå). Regnes ut fra primærfargen i app.js. */
  --sammenlign: #58789f;
  --sammenlign-pa: #ffffff;
  --sammenlign-tint: #dfe6ee;

  --bg: #f5f6f8;
  --flate: #ffffff;
  --flate-2: #fafbfc;
  --linje: #e2e5eb;
  --linje-sterk: #cdd2db;
  --tekst: #1b2233;
  --dempet: #596173;
  --svak: #6b7385;

  --ok: #1e7b3c;
  --ok-tint: #e9f5ed;
  --ok-linje: #b9dfc6;
  --feil: #b3191f;
  --feil-tint: #fcecec;
  --feil-linje: #f1c2c4;
  --advarsel: #7a5000;
  --advarsel-tint: #fdf4e3;
  --advarsel-linje: #f0d9a8;
  --info-tint: #eef2f8;
  --info-linje: #d3dcea;

  --radius: 12px;
  --radius-liten: 8px;
  --skygge: 0 1px 2px rgba(27, 34, 51, 0.05), 0 1px 3px rgba(27, 34, 51, 0.04);
  --skygge-hev: 0 6px 20px rgba(27, 34, 51, 0.12);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-merke: "Exo", var(--font);
  --bredde: 1180px;
  --kant: 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* hidden må alltid vinne over display på klasser. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
  font-weight: 600;
  color: var(--tekst);
}
h1 {
  font-size: 26px;
  letter-spacing: -0.015em;
}
h2 {
  font-size: 18px;
  letter-spacing: -0.005em;
}
h3 {
  font-size: 15px;
}
p {
  margin: 0;
}

a {
  color: var(--tekst);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--aksent-tekst);
}

:focus-visible {
  outline: 3px solid var(--primar);
  outline-offset: 2px;
}
h1:focus,
main:focus {
  outline: none;
}

.skjult {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hopp {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  background: var(--primar);
  color: var(--primar-pa);
  padding: 10px 14px;
  border-radius: var(--radius-liten);
  font-weight: 600;
  text-decoration: none;
}
.hopp:focus {
  top: 12px;
  color: var(--primar-pa);
}

.tall {
  font-variant-numeric: tabular-nums;
}

/* ---------- Knapper ---------- */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-liten);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.knapp:disabled,
.knapp[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.knapp-primar {
  background: var(--primar);
  color: var(--primar-pa);
}
.knapp-primar:hover:not(:disabled) {
  background: var(--primar-hover);
  color: var(--primar-pa);
}
.knapp-sekundar {
  background: var(--flate);
  color: var(--tekst);
  border-color: var(--linje-sterk);
}
.knapp-sekundar:hover:not(:disabled) {
  background: var(--bg);
  color: var(--tekst);
}
.knapp-tekst {
  background: transparent;
  color: var(--tekst);
  padding: 0 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.knapp-tekst:hover:not(:disabled) {
  color: var(--aksent-tekst);
}
.knapp-fare {
  background: var(--flate);
  color: var(--feil);
  border-color: var(--feil-linje);
}
.knapp-fare:hover:not(:disabled) {
  background: var(--feil-tint);
  color: var(--feil);
}
.knapp-fare-fylt {
  background: var(--feil);
  color: #fff;
}
.knapp-fare-fylt:hover:not(:disabled) {
  background: #951419;
  color: #fff;
}
.knapp-stor {
  min-height: 48px;
  padding: 0 24px;
  font-size: 16px;
}
.knapp-liten {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13.5px;
}
.knapp-ikon {
  font-size: 1.1em;
  line-height: 1;
}
.knapperad {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ---------- Skjema ---------- */

.felt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.felt > label,
.felt-etikett {
  font-weight: 600;
  font-size: 14px;
}
.valgfritt {
  font-weight: 400;
  color: var(--dempet);
}
.inndata,
.felt input[type="text"],
.felt input[type="email"],
.felt input[type="tel"],
.felt input[type="password"],
.felt input[type="search"],
.felt select {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  background: var(--flate);
  color: var(--tekst);
  font: inherit;
  font-size: 15px;
}
.inndata:focus,
.felt input:focus,
.felt select:focus {
  outline: none;
  border-color: var(--primar);
  box-shadow: 0 0 0 3px var(--primar-tint), 0 0 0 1px var(--primar);
}
.felt input[aria-invalid="true"] {
  border-color: var(--feil);
}
.hjelp {
  font-size: 13.5px;
  color: var(--dempet);
  line-height: 1.5;
}
.hemmelig-rad {
  display: flex;
  gap: 8px;
}
.hemmelig-rad input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}
.felt-rad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.fargefelt {
  display: flex;
  gap: 8px;
  align-items: center;
}
.fargefelt input[type="color"] {
  width: 48px;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  background: var(--flate);
  cursor: pointer;
  flex: none;
}
.fargefelt input[type="text"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
}

/* ---------- Varsler, piller, toast ---------- */

.varsel {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-liten);
  border: 1px solid var(--info-linje);
  background: var(--info-tint);
  font-size: 14.5px;
}
.varsel + .varsel {
  margin-top: 10px;
}
.varsel-ikon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #4a5875;
  margin-top: 1px;
}
.varsel-innhold {
  flex: 1;
  min-width: 0;
}
.varsel-innhold strong {
  display: block;
  margin-bottom: 2px;
}
.varsel-ok {
  background: var(--ok-tint);
  border-color: var(--ok-linje);
}
.varsel-ok .varsel-ikon {
  background: var(--ok);
}
.varsel-feil {
  background: var(--feil-tint);
  border-color: var(--feil-linje);
}
.varsel-feil .varsel-ikon {
  background: var(--feil);
}
.varsel-advarsel {
  background: var(--advarsel-tint);
  border-color: var(--advarsel-linje);
}
.varsel-advarsel .varsel-ikon {
  background: var(--advarsel);
}

.pille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  background: #eef0f3;
  color: #454c5c;
}
.pille::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.pille-ok {
  background: var(--ok-tint);
  color: var(--ok);
}
.pille-feil {
  background: var(--feil-tint);
  color: var(--feil);
}
.pille-jobber {
  background: var(--advarsel-tint);
  color: var(--advarsel);
}
.pille-noytral::before {
  display: none;
}

.merkelapp {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: #eef0f3;
  color: #454c5c;
}

.toaster {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: var(--radius-liten);
  background: var(--tekst);
  color: #fff;
  box-shadow: var(--skygge-hev);
  font-size: 14.5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.vis {
  opacity: 1;
  transform: none;
}
.toast-feil {
  background: var(--feil);
}

/* ---------- Innlogging ---------- */

.innlogging {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--flate);
}
.innlogging-merke {
  background: #1b2233;
  color: #e9ecf2;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.innlogging-merke .weneva-logo {
  width: 210px;
  height: auto;
  filter: brightness(0) invert(1);
}
.innlogging-tekst h2 {
  color: #fff;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 440px;
  margin-bottom: 24px;
}
.innlogging-punkter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 440px;
}
.innlogging-punkter li {
  display: flex;
  gap: 12px;
  color: #c9cfdb;
  font-size: 15px;
}
.innlogging-punkter li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 2px;
  background: #b9875f;
}
.innlogging-fot {
  color: #8f97a8;
  font-size: 13px;
}
.innlogging-skjema {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--bg);
}
.innlogging-kort {
  width: 100%;
  max-width: 400px;
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: 16px;
  padding: 36px 32px 28px;
  box-shadow: var(--skygge);
}
.innlogging-kort .weneva-logo-mobil {
  display: none;
  width: 170px;
  height: auto;
  margin-bottom: 28px;
}
.innlogging-kort h1 {
  font-size: 24px;
  margin-bottom: 6px;
}
.innlogging-kort .ingress {
  color: var(--dempet);
  margin-bottom: 26px;
}
.innlogging-kort .knapp-primar {
  width: 100%;
  margin-top: 6px;
}
.innlogging-hjelp {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--dempet);
  text-align: center;
}
.skjemafeil {
  margin-bottom: 16px;
}

/* ---------- App: lasting og topp ---------- */

.lasteskjerm {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--dempet);
  font-size: 15px;
}

.topp {
  background: var(--flate);
  border-bottom: 1px solid var(--linje);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topp-indre {
  max-width: var(--bredde);
  margin: 0 auto;
  padding: 0 var(--kant);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.merke {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--tekst);
  min-width: 0;
  flex: none;
}
.byra-logo {
  display: block;
  max-height: 34px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.byra-navn {
  font-weight: 600;
  font-size: 14.5px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.merke-skille {
  width: 1px;
  height: 28px;
  background: var(--linje-sterk);
}
.weneva-logo {
  display: block;
  height: 22px;
  width: auto;
}
.hovednav {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.hovednav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 64px;
  padding: 0 12px;
  color: var(--dempet);
  font-weight: 500;
  font-size: 14.5px;
  text-decoration: none;
}
.hovednav a:hover {
  color: var(--tekst);
}
.hovednav a[aria-current="page"] {
  color: var(--tekst);
  font-weight: 600;
}
.hovednav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--aksent-ui);
}

.brukermeny {
  position: relative;
  margin-left: auto;
  flex: none;
}
.bruker-knapp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: var(--flate);
  color: var(--tekst);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.bruker-knapp:hover {
  background: var(--bg);
}
.bruker-knapp::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--dempet);
  border-bottom: 2px solid var(--dempet);
  transform: rotate(45deg) translateY(-3px);
  margin: 0 4px 0 2px;
}
.initialer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primar);
  color: var(--primar-pa);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.bruker-navn {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bruker-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 260px;
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge-hev);
  padding: 8px;
  z-index: 30;
}
.bruker-info {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--linje);
  font-size: 13.5px;
  color: var(--dempet);
  overflow-wrap: anywhere;
}
.bruker-info strong {
  color: var(--tekst);
  font-size: 14.5px;
}
.bruker-panel a,
.bruker-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tekst);
  font: inherit;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
}
.bruker-panel a:hover,
.bruker-panel button:hover {
  background: var(--bg);
  color: var(--tekst);
}

/* ---------- Innhold og oppsett ---------- */

.innhold {
  max-width: var(--bredde);
  margin: 0 auto;
  padding: 32px var(--kant) 80px;
}
.sidetopp {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.sidetopp-tekst {
  min-width: 0;
}
.sidetopp p {
  color: var(--dempet);
  margin-top: 6px;
  max-width: 640px;
}
.tilbake {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--dempet);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.tilbake::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 3px;
}
.tilbake:hover {
  color: var(--tekst);
}

.kort {
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: 24px;
  min-width: 0;
}
.kort + .kort {
  margin-top: 20px;
}
.ansatt-oppsett > .kort + .kort,
.innstillinger-oppsett > .kort + .kort {
  margin-top: 0;
}
.kort-topp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.kort-topp p {
  color: var(--dempet);
  font-size: 14px;
  margin-top: 2px;
}
.kort-del {
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid var(--linje);
}
.del-tittel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.del-tittel h3 {
  font-size: 15px;
}
.del-tittel .hjelp {
  font-size: 13px;
}

.tom {
  text-align: center;
  padding: 48px 24px;
}
.tom h2 {
  margin-bottom: 8px;
}
.tom p {
  color: var(--dempet);
  max-width: 420px;
  margin: 0 auto 20px;
}
.tom-ikon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: var(--aksent-tint);
  border: 1px solid var(--aksent-linje);
  display: grid;
  place-items: center;
  color: var(--aksent-tekst);
  font-weight: 700;
  font-size: 20px;
}
.tom-liten {
  padding: 28px 16px;
}
.tom-liten p {
  margin-bottom: 0;
}
.laster {
  color: var(--dempet);
  padding: 24px 0;
}

/* ---------- Klientliste ---------- */

.verktoylinje {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.verktoylinje .inndata {
  max-width: 340px;
}
.klientliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.klient-rad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  text-decoration: none;
  color: var(--tekst);
  transition: border-color 0.15s;
}
.klient-rad:hover {
  border-color: var(--linje-sterk);
  color: var(--tekst);
}
.klient-rad:hover .pil {
  border-color: var(--tekst);
}
.klient-navn {
  font-weight: 600;
  font-size: 15.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.klient-meta {
  color: var(--dempet);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.klient-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.klient-status .hjelp {
  font-size: 12.5px;
  white-space: nowrap;
}
.pil {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--svak);
  border-top: 2px solid var(--svak);
  transform: rotate(45deg);
  margin-right: 4px;
}

.system-flis {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--font-merke);
  font-weight: 700;
  font-size: 17px;
  background: #f1f2f4;
  color: #596173;
}
.system-flis.stor {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  font-size: 22px;
}
.system-flis[data-system="duett"] {
  background: #e8eefb;
  color: #2b4c9b;
}
.system-flis[data-system="tripletex"] {
  background: #e4f3ef;
  color: #1d6b5c;
}
.system-flis[data-system="poweroffice"] {
  background: #efeafa;
  color: #5b3c9e;
}
.system-flis[data-system="fiken"] {
  background: #e9f4e4;
  color: #3b7a2a;
}
.system-flis[data-system="demo"] {
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ---------- Ny klient: systemvalg ---------- */

.steg-tittel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 16px;
}
.steg-nr {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primar);
  color: var(--primar-pa);
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
legend {
  padding: 0;
}
.systemvalg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.system-kort {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  min-height: 150px;
  background: var(--flate);
  border: 1.5px solid var(--linje);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.system-kort:hover {
  border-color: var(--linje-sterk);
}
.system-kort input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.system-kort:has(input:focus-visible) {
  outline: 3px solid var(--primar);
  outline-offset: 2px;
}
.system-kort:has(input:checked) {
  border-color: var(--aksent-ui);
  background: var(--aksent-tint);
}
.system-kort:has(input:checked)::after {
  content: "\2713";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--aksent-ui);
  color: var(--aksent-pa);
}
.system-kort-navn {
  font-weight: 600;
  font-size: 16px;
}
.system-kort-tekst {
  font-size: 13.5px;
  color: var(--dempet);
}
.system-kort.utilgjengelig {
  cursor: not-allowed;
  background: var(--flate-2);
  border-style: dashed;
}
.system-kort.utilgjengelig .system-flis {
  filter: grayscale(1);
  opacity: 0.6;
}
.system-kort.utilgjengelig .system-kort-navn {
  color: var(--dempet);
}
.grunn {
  margin-top: auto;
  font-size: 12.5px;
  color: var(--advarsel);
  font-weight: 500;
}

.ny-klient-skjema {
  max-width: 640px;
}
.sikker-merknad {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--dempet);
  margin: 4px 0 20px;
}
.las {
  flex: none;
  position: relative;
  width: 14px;
  height: 11px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--dempet);
}
.las::before {
  content: "";
  position: absolute;
  left: 2.5px;
  top: -6px;
  width: 9px;
  height: 8px;
  border: 2px solid var(--dempet);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
}

/* ---------- Klientdetaljer ---------- */

.klient-hode {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.klient-hode-tekst {
  flex: 1;
  min-width: 0;
}
.klient-hode h1 {
  overflow-wrap: anywhere;
}
.klient-hode .klient-meta {
  white-space: normal;
  margin-top: 4px;
  font-size: 14px;
}
.klient-oppsett {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.sidekolonne {
  display: grid;
  gap: 20px;
}
.sidekolonne .kort + .kort {
  margin-top: 0;
}
.fakta {
  margin: 0;
  display: grid;
  gap: 12px;
}
.fakta div {
  display: grid;
  gap: 2px;
}
.fakta dt {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dempet);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fakta dd {
  margin: 0;
  font-size: 14.5px;
  overflow-wrap: anywhere;
}
.nokkel-maske {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}
.innfelt {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--linje);
  border-radius: var(--radius-liten);
  background: var(--flate-2);
}
.innfelt .felt:last-of-type {
  margin-bottom: 14px;
}
.resultat:not(:empty) {
  margin-top: 14px;
}
.foretaksliste {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.foretaksliste label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--linje);
  border-radius: var(--radius-liten);
  background: var(--flate);
  cursor: pointer;
}
.foretaksliste input {
  margin-top: 4px;
  accent-color: var(--aksent-ui);
}
.foretaksliste .hjelp {
  display: block;
}

/* ---------- Periode-slider ---------- */

.periode {
  --tommel: 26px;
  /* Fargen på spennet og håndtakene. Periode A og B i en sammenligning får hver sin. */
  --spor: var(--aksent-ui);
  --spor-tint: var(--aksent-tint);
  --spor-pa: var(--aksent-pa);
}
.periode-a {
  --spor: var(--primar);
  --spor-tint: var(--primar-tint);
  --spor-pa: var(--primar-pa);
}
.periode-b {
  --spor: var(--sammenlign);
  --spor-tint: var(--sammenlign-tint);
  --spor-pa: var(--sammenlign-pa);
}
.periode-merkelapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--spor);
  color: var(--spor-pa);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.periode-lesning {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 14px;
}
.periode-lesning strong {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.periode-antall {
  color: var(--dempet);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.periode-spor {
  position: relative;
  height: 44px;
  touch-action: pan-y;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.periode-linje {
  position: absolute;
  left: calc(var(--tommel) / 2);
  right: calc(var(--tommel) / 2);
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: var(--linje);
}
.periode-valgt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--fra-pst, 0%);
  width: calc(var(--til-pst, 100%) - var(--fra-pst, 0%));
  min-width: 2px;
  border-radius: 3px;
  background: var(--spor);
}
.periode-spor input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.periode-spor input[type="range"]::-webkit-slider-runnable-track {
  height: 44px;
  background: transparent;
  border: 0;
}
.periode-spor input[type="range"]::-moz-range-track {
  height: 44px;
  background: transparent;
  border: 0;
}
.periode-spor input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--tommel);
  height: var(--tommel);
  margin-top: calc((44px - var(--tommel)) / 2);
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--spor);
  box-shadow: 0 1px 3px rgba(27, 34, 51, 0.25);
  cursor: grab;
  transition: box-shadow 0.15s;
}
.periode-spor input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--tommel);
  height: var(--tommel);
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--spor);
  box-shadow: 0 1px 3px rgba(27, 34, 51, 0.25);
  cursor: grab;
}
.periode-spor input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--flate), 0 0 0 6px var(--primar);
}
.periode-spor input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--flate), 0 0 0 6px var(--primar);
}
.periode-spor input[type="range"].aktiv-tommel::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px var(--spor-tint), 0 1px 3px rgba(27, 34, 51, 0.25);
}
.periode-spor input[type="range"].aktiv-tommel::-moz-range-thumb {
  box-shadow: 0 0 0 6px var(--spor-tint), 0 1px 3px rgba(27, 34, 51, 0.25);
}
.periode-spor.drar,
.periode-spor.drar input[type="range"]::-webkit-slider-thumb {
  cursor: grabbing;
}
.periode-skala {
  position: relative;
  height: 34px;
  margin: 0 calc(var(--tommel) / 2);
}
.periode-merke {
  position: absolute;
  top: 0;
  width: 1px;
  height: 5px;
  background: var(--linje-sterk);
  transform: translateX(-0.5px);
}
.periode-merke.aar-start {
  height: 11px;
  width: 1.5px;
  background: var(--svak);
}
.periode-aar {
  position: absolute;
  top: 13px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dempet);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}
.hurtigvalg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.hurtig {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--linje-sterk);
  background: var(--flate);
  color: var(--tekst);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.hurtig:hover:not(:disabled) {
  background: var(--bg);
}
.hurtig[aria-pressed="true"] {
  background: var(--primar);
  border-color: var(--primar);
  color: var(--primar-pa);
}
.periode-b .hurtig[aria-pressed="true"] {
  background: var(--sammenlign);
  border-color: var(--sammenlign);
  color: var(--sammenlign-pa);
}
.hurtig:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Sammenlign med en annen periode ---------- */

.sammenlign {
  margin-top: 18px;
}
.sammenlign-bryter {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1.5px solid var(--linje);
  border-radius: var(--radius-liten);
  background: var(--flate-2);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.sammenlign-bryter:hover {
  border-color: var(--linje-sterk);
}
.sammenlign-bryter:has(.bryter-input:checked) {
  border-color: var(--linje-sterk);
  background: var(--flate);
}
.sammenlign-bryter:has(.bryter-input:focus-visible) {
  outline: 3px solid var(--primar);
  outline-offset: 2px;
}
/* Avkrysningen ligger usynlig over bryteren, så tastatur og skjermleser bruker den vanlige. */
.bryter-input {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 40px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bryter {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: #878f9f;
  transition: background-color 0.15s;
}
.bryter::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(27, 34, 51, 0.3);
  transition: transform 0.15s;
}
.bryter-input:checked + .bryter {
  background: var(--primar);
}
.bryter-input:checked + .bryter::after {
  transform: translateX(16px);
}
.sammenlign-bryter-tittel {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  padding-top: 2px;
}
.sammenlign-bryter-tekst {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dempet);
}
.sammenlign-del {
  margin-top: 20px;
}
.sml-oppsummering {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--info-linje);
  border-radius: var(--radius-liten);
  background: var(--info-tint);
}
.sml-par {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-weight: 500;
}
.sml {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sml-bokstav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}
.sml-a .sml-bokstav {
  background: var(--primar);
  color: var(--primar-pa);
}
.sml-b .sml-bokstav {
  background: var(--sammenlign);
  color: var(--sammenlign-pa);
}
.sml-mot {
  color: var(--dempet);
  font-weight: 400;
}
.sml-info {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--tekst);
}
.sml-info li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.sml-info li + li {
  margin-top: 4px;
}
.sml-info-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--dempet);
  color: var(--dempet);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.periode-feil {
  margin-top: 10px;
  color: var(--feil);
  font-size: 14px;
  font-weight: 500;
}
.periode-en {
  color: var(--dempet);
  font-size: 14px;
}

/* ---------- Seksjonsvalg ---------- */

.seksjoner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.seksjon-kort {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px 14px 12px;
  border: 1.5px solid var(--linje);
  border-radius: var(--radius-liten);
  background: var(--flate-2);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.seksjon-kort:hover {
  border-color: var(--linje-sterk);
}
.seksjon-kort:not(:has(input:checked)) .seksjon-tittel {
  color: var(--dempet);
}
.seksjon-kort input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--aksent-ui);
  cursor: pointer;
}
.seksjon-kort:has(input:checked) {
  border-color: var(--linje-sterk);
  background: var(--flate);
  box-shadow: inset 3px 0 0 var(--aksent-ui);
}
.seksjon-kort:has(input:focus-visible) {
  outline: 3px solid var(--primar);
  outline-offset: 2px;
}
.seksjon-kort input:focus-visible {
  outline: none;
}
.seksjon-tittel {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
}
.seksjon-tekst {
  display: block;
  font-size: 13px;
  color: var(--dempet);
  margin-top: 3px;
  line-height: 1.45;
}

.lag-rapport-fot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
.ai-merknad {
  font-size: 13px;
  color: var(--dempet);
  max-width: 460px;
}

/* ---------- Fremdrift ---------- */

.fremdrift {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flate-2);
}
.fremdrift-topp {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.fremdrift-topp p {
  color: var(--dempet);
  font-size: 14px;
}
.fremdrift-prosent {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fremdrift-linje {
  height: 8px;
  border-radius: 4px;
  background: var(--linje);
  overflow: hidden;
}
.fremdrift-fyll {
  height: 100%;
  width: var(--fremdrift, 0%);
  border-radius: 4px;
  background: var(--aksent-ui);
  transition: width 0.4s ease-out;
}
.fremdrift.ferdig .fremdrift-fyll {
  background: var(--ok);
}
.fremdrift.feilet .fremdrift-fyll {
  background: var(--feil);
}
.steg {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.steg li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--svak);
  line-height: 1.35;
}
.steg-punkt {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--linje-sterk);
  background: var(--flate);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: transparent;
}
.steg li.gjort {
  color: var(--tekst);
}
.steg li.gjort .steg-punkt {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.steg li.naa {
  color: var(--tekst);
  font-weight: 600;
}
.steg li.naa .steg-punkt {
  border-color: var(--aksent-ui);
  box-shadow: 0 0 0 4px var(--aksent-tint);
  background: radial-gradient(circle, var(--aksent-ui) 0 4px, var(--flate) 5px);
}
.steg li.stoppet {
  color: var(--feil);
  font-weight: 600;
}
.steg li.stoppet .steg-punkt {
  background: var(--feil);
  border-color: var(--feil);
  color: #fff;
}
.fremdrift-melding {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--dempet);
}
.fremdrift .knapperad {
  margin-top: 18px;
}

/* ---------- Historikk ---------- */

.historikk {
  list-style: none;
  margin: 0;
  padding: 0;
}
.historikk li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--linje);
}
.historikk li:first-child {
  border-top: 0;
  padding-top: 0;
}
.historikk-periode {
  font-weight: 600;
}
.historikk-meta {
  font-size: 13px;
  color: var(--dempet);
}
.historikk-feil {
  font-size: 13px;
  color: var(--feil);
  margin-top: 2px;
}
.historikk .knapperad {
  justify-content: flex-end;
  gap: 6px;
}

/* ---------- Ansatte ---------- */

.ansatt-oppsett {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}
.ansattliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ansattliste > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--linje);
}
.ansattliste > li:first-child {
  border-top: 0;
  padding-top: 0;
}
.ansattliste .initialer {
  width: 38px;
  height: 38px;
  font-size: 13px;
  background: #e9ecf2;
  color: #3a4256;
}
.ansatt-navn {
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ansatt-meta {
  font-size: 13px;
  color: var(--dempet);
  overflow-wrap: anywhere;
}
.ansatt-handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.ansatt-handlinger select {
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-liten);
  background: var(--flate);
  font: inherit;
  font-size: 13.5px;
  color: var(--tekst);
}
.ansattliste .inaktiv .ansatt-navn,
.ansattliste .inaktiv .initialer {
  opacity: 0.55;
}
.passordboks {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}
.passordboks code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border-radius: var(--radius-liten);
  background: var(--flate);
  border: 1px solid var(--ok-linje);
  user-select: all;
  overflow-wrap: anywhere;
}

/* ---------- Innstillinger ---------- */

.innstillinger-oppsett {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}
.logo-felt {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.logo-forhand {
  width: 160px;
  height: 72px;
  border: 1px dashed var(--linje-sterk);
  border-radius: var(--radius-liten);
  display: grid;
  place-items: center;
  background: var(--flate-2);
  overflow: hidden;
  font-size: 12.5px;
  color: var(--svak);
  text-align: center;
  padding: 6px;
}
.logo-forhand img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.fil-knapp {
  position: relative;
  overflow: hidden;
}
.fil-knapp input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.fil-knapp:has(input:focus-visible) {
  outline: 3px solid var(--primar);
  outline-offset: 2px;
}
.forhand {
  position: sticky;
  top: 88px;
}
.forhand-ark {
  border: 1px solid var(--linje);
  border-radius: var(--radius-liten);
  overflow: hidden;
  background: #fff;
}
.forhand-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 3px solid var(--forhand-aksent, #cb1f27);
}
.forhand-topp img {
  max-height: 36px;
  max-width: 130px;
  object-fit: contain;
}
.forhand-tittel {
  font-family: var(--font-merke);
  font-weight: 700;
  font-size: 17px;
  color: var(--forhand-primar, #212738);
  line-height: 1.2;
}
.forhand-under {
  font-size: 12px;
  color: var(--dempet);
}
.forhand-kropp {
  padding: 16px 18px;
  display: grid;
  gap: 10px;
}
.forhand-tall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.forhand-tall div {
  border: 1px solid var(--linje);
  border-radius: 6px;
  padding: 8px 10px;
  border-left: 3px solid var(--forhand-aksent, #cb1f27);
}
.forhand-tall span {
  display: block;
  font-size: 11px;
  color: var(--dempet);
}
.forhand-tall strong {
  font-size: 15px;
  color: var(--forhand-primar, #212738);
}
.forhand-strek {
  height: 7px;
  border-radius: 4px;
  background: #eef0f3;
}
.forhand-strek.kort-strek {
  width: 70%;
}
.forhand-fot {
  padding: 10px 18px;
  border-top: 1px solid var(--linje);
  font-size: 11px;
  color: var(--dempet);
  overflow-wrap: anywhere;
}

/* ---------- Mine innstillinger (signatur og passord) ---------- */
/* Ingen av klassene her brukes sammen med hidden-attributtet, bortsett fra der [hidden] øverst vinner. */

.meg-oppsett {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas:
    "signatur forhand"
    "passord forhand";
  gap: 20px;
  align-items: start;
}
.meg-oppsett > .kort + .kort {
  margin-top: 0;
}
.meg-signatur {
  grid-area: signatur;
}
.meg-forhand {
  grid-area: forhand;
}
.meg-passord {
  grid-area: passord;
}
.passord-skjema {
  max-width: 440px;
}
.lagret-boks:not(:empty) {
  margin-top: 16px;
}
.signatur-merknad {
  margin-top: 14px;
}

/* Forhåndsvisning: bunnen av en rapport (lys grå flate, hvitt kort, bunnlinje). */
.sig-forhand {
  border: 1px solid var(--linje);
  border-radius: var(--radius-liten);
  overflow: hidden;
  background: #f5f5f5;
  color: #1b2233;
}
.sig-forhand-flate {
  padding: 16px 14px 18px;
  display: grid;
  gap: 8px;
}
.sig-forhand-flate .forhand-strek {
  background: #e6e7ea;
}
.sig-forhand-kort {
  margin-top: 6px;
  background: #fff;
  border-radius: 10px;
  padding: 16px 16px 14px;
  min-width: 0;
}
.sig-forhand-tittel {
  font-family: var(--font-merke);
  font-weight: 600;
  font-size: 13.5px;
  color: #1b2233;
}
.sig-forhand-tittel::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 7px 0 10px;
  background: var(--forhand-aksent, #cb1f27);
}
.sig-forhand-navn {
  font-family: var(--font-merke);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--forhand-primar, #212738);
  overflow-wrap: anywhere;
}
.sig-forhand-stilling {
  font-size: 13px;
  color: #5c606b;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.sig-forhand-kontakt {
  margin: 12px 0 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.sig-forhand-kontakt div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
}
.sig-forhand-kontakt dt {
  color: #5c606b;
}
.sig-forhand-kontakt dd {
  margin: 0;
  font-weight: 600;
  color: var(--forhand-primar, #212738);
  text-decoration: underline;
  text-decoration-color: #b9bdc6;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.sig-forhand-byra {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #ededed;
  font-size: 12.5px;
  color: #5c606b;
  overflow-wrap: anywhere;
}
.sig-forhand-fot {
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid var(--linje);
  font-size: 11px;
  color: var(--dempet);
  overflow-wrap: anywhere;
}

/* Hint på Lag rapport når signaturen ikke er lagt inn. */
.signatur-hint {
  align-items: center;
  margin-top: 20px;
}
.signatur-hint .varsel-innhold {
  margin: 0;
}
.signatur-hint .knapp {
  flex: none;
}

/* ---------- Dialog ---------- */

.dialog {
  width: min(460px, calc(100vw - 32px));
  border: 0;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--skygge-hev);
  color: var(--tekst);
}
.dialog::backdrop {
  background: rgba(27, 34, 51, 0.45);
}
.dialog h2 {
  margin-bottom: 10px;
}
.dialog p {
  color: var(--dempet);
  margin-bottom: 22px;
}
.dialog .knapperad {
  justify-content: flex-end;
}

/* ---------- Del med klient ---------- */
/* Alle klasser her som får display, vikes for [hidden] (regelen øverst har !important). */

.del-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.del-hode {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.del-hode h2 {
  margin: 0 0 8px;
}
.del-lukk {
  flex: none;
  width: 40px;
  height: 40px;
  margin: -8px -8px 0 0;
  border: 0;
  border-radius: var(--radius-liten);
  background: transparent;
  color: var(--dempet);
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.del-lukk:hover {
  background: var(--bg);
  color: var(--tekst);
}
.dialog p.del-intro {
  margin-bottom: 18px;
}
.del-varighet {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  min-width: 0;
}
.del-varighet legend {
  padding: 0;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}
.del-valg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.del-valg-kort {
  position: relative;
  cursor: pointer;
}
.del-valg-kort input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.del-valg-kort span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--linje-sterk);
  border-radius: 999px;
  background: var(--flate);
  color: var(--tekst);
  font-weight: 500;
  font-size: 14px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.del-valg-kort:hover span {
  border-color: var(--primar);
}
.del-valg-kort input:checked + span {
  background: var(--primar);
  border-color: var(--primar);
  color: var(--primar-pa);
}
.del-valg-kort input:focus-visible + span {
  outline: 3px solid var(--primar);
  outline-offset: 2px;
}
.del-dialog .knapperad {
  justify-content: flex-start;
}
.del-dialog > .del-fot {
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--linje);
}
.del-feil {
  margin-top: 14px;
}
.del-ny {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--ok-linje);
  border-radius: var(--radius-liten);
  background: var(--ok-tint);
}
.del-ny .felt-etikett {
  display: block;
  margin-bottom: 6px;
}
.del-kopier-rad {
  display: flex;
  gap: 8px;
}
.del-kopier-rad .del-url {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
}
.dialog .del-ny p.hjelp {
  margin: 8px 0 0;
  color: var(--tekst);
}
.del-aktive {
  margin-top: 22px;
}
.del-aktive h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.del-aktive h3:focus {
  outline: none;
}
.dialog .del-aktive p {
  margin: 0;
}
.del-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.del-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--linje);
}
.del-liste li:first-child {
  border-top: 0;
}
.del-liste-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.del-slutt {
  font-weight: 600;
  font-size: 14.5px;
}
.del-liste .hjelp {
  overflow-wrap: anywhere;
}
.del-liste .knapp {
  flex: none;
}
.lenke-oversikt {
  margin-top: 20px;
}
.lenke-oversikt .kort-topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.lenke-velg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.lenke-velg input[type="checkbox"] {
  margin-top: 3px;
  flex: none;
}

@media (max-width: 480px) {
  .del-dialog {
    padding: 20px 16px;
  }
  .del-kopier-rad {
    flex-direction: column;
  }
  .del-liste li {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Smal skjerm ---------- */

@media (max-width: 1000px) {
  .klient-oppsett,
  .ansatt-oppsett,
  .innstillinger-oppsett {
    grid-template-columns: minmax(0, 1fr);
  }
  .meg-oppsett {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "signatur"
      "forhand"
      "passord";
  }
  .forhand {
    position: static;
  }
  /* Klient som ikke er klar: vis Tilkobling først på smal skjerm. */
  .klient-oppsett.ikke-klar .sidekolonne {
    order: -1;
  }
}

@media (max-width: 900px) {
  .innlogging {
    grid-template-columns: minmax(0, 1fr);
  }
  .innlogging-merke {
    display: none;
  }
  .innlogging-kort .weneva-logo-mobil {
    display: block;
  }
}

@media (max-width: 760px) {
  :root {
    --kant: 16px;
  }
  .topp-indre {
    flex-wrap: wrap;
    gap: 0 12px;
    min-height: 0;
    padding-top: 10px;
  }
  .merke {
    flex: 1;
    min-height: 44px;
  }
  .byra-logo {
    max-width: 110px;
    max-height: 28px;
  }
  .byra-navn {
    max-width: 120px;
  }
  .weneva-logo {
    height: 18px;
  }
  .bruker-navn {
    display: none;
  }
  .hovednav {
    order: 3;
    flex-basis: 100%;
    margin: 4px -8px 0;
  }
  .hovednav a {
    min-height: 44px;
    padding: 0 8px;
  }
  .hovednav a[aria-current="page"]::after {
    left: 8px;
    right: 8px;
  }
  .innhold {
    padding-top: 22px;
  }
  h1 {
    font-size: 22px;
  }
  .kort {
    padding: 18px 16px;
  }
  .felt input[type="text"],
  .felt input[type="email"],
  .felt input[type="tel"],
  .felt input[type="password"],
  .felt input[type="search"],
  .felt select,
  .inndata {
    font-size: 16px;
  }
  .knapp {
    min-height: 44px;
  }
  .knapp-liten {
    min-height: 38px;
  }
  .felt-rad {
    grid-template-columns: minmax(0, 1fr);
  }
  .klient-rad {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px;
  }
  .klient-rad .klient-status {
    grid-column: 2 / 4;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    text-align: left;
  }
  .klient-rad .pil {
    grid-row: 1;
    grid-column: 3;
  }
  .verktoylinje .inndata {
    max-width: none;
  }
  .systemvalg {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .system-kort {
    min-height: 0;
    padding: 14px;
  }
  .seksjoner {
    grid-template-columns: minmax(0, 1fr);
  }
  .steg {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .steg li {
    flex-direction: row;
    align-items: center;
  }
  .historikk li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .historikk .knapperad {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .ansattliste > li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ansatt-handlinger {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .lag-rapport-fot .knapp-stor {
    width: 100%;
  }
  .innlogging-kort {
    padding: 28px 20px 22px;
  }
}

@media (max-width: 480px) {
  .signatur-hint {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  /* Teksten tar hele linjen ved siden av ikonet, så knappen havner under teksten. */
  .signatur-hint .varsel-innhold {
    flex: 1 1 calc(100% - 34px);
  }
  .signatur-hint .knapp {
    margin-left: 34px;
  }
  /* Fire lenker i menyen (admin) får plass på én linje. Blir det for trangt, ruller menyen
     sidelengs for seg selv, ikke hele siden. */
  .hovednav {
    gap: 2px;
    margin: 4px -5px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hovednav::-webkit-scrollbar {
    display: none;
  }
  .hovednav a {
    padding: 0 5px;
    font-size: 13.5px;
    white-space: nowrap;
  }
  .hovednav a[aria-current="page"]::after {
    left: 5px;
    right: 5px;
  }
  /* Fokusringen tegnes innenfor lenken, så den ikke kuttes av menyen som kan rulle. */
  .hovednav a:focus-visible {
    outline-offset: -3px;
  }
}

@media (max-width: 420px) {
  .systemvalg {
    grid-template-columns: minmax(0, 1fr);
  }
  .periode-lesning strong {
    font-size: 18px;
  }
  /* Punktet mellom periode og antall blir hengende alene når linjen brytes. */
  .periode-lesning > .periode-antall[aria-hidden="true"] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

@media print {
  .topp,
  .toaster {
    display: none;
  }
}

/* Beskjeder øverst på en side */
.kort-flash {
  margin-bottom: 20px;
}
.ansatt-oppsett {
  margin-top: 16px;
}