/*
 * Base — reset, typografi og noen gjenbrukbare basiskomponenter (.knapp, .lenke).
 * App-shell og komponentspesifikke klasser ligger i komponenter/*.css.
 */

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

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-familie);
  font-size: var(--font-base);
  line-height: var(--linje-hoyde);
  color: var(--farge-tekst);
  background: var(--farge-bakgrunn);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--avstand-3);
  line-height: var(--linje-hoyde-tett);
  font-weight: 600;
}
h1 { font-size: var(--font-overskrift); }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

p { margin: 0 0 var(--avstand-3); }

a { color: var(--farge-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-main {
  padding: var(--avstand-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.seksjon {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* Smal-variant: for content-orienterte sider (profil, hjelp, innstillinger-
   detalj) der lesbarhet og ro slår tett-dataviz. Default-seksjonen er 100%
   bredde fordi de fleste sidene er dataviz (tabeller, matriser) som trenger
   plass. Smal kommer som modifier-klasse, ikke ny default. */
.seksjon--smal {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.lenke {
  color: var(--farge-tekst-dempet);
  text-decoration: none;
  font-size: var(--font-base);
}
.lenke:hover { color: var(--farge-tekst); text-decoration: underline; }
/* Lenke-stilet knapp (JS-handling som ser ut som lenke) — nullstill knapp-chrome. */
button.lenke {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.knapp {
  display: inline-flex;
  align-items: center;
  gap: var(--avstand-2);
  padding: var(--avstand-1) var(--avstand-3);
  font: inherit;
  font-size: var(--font-base);
  background: var(--farge-overflate);
  color: var(--farge-tekst);
  border: var(--kant);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: var(--linje-hoyde-tett);
  height: 26px;
  white-space: nowrap;
}
.knapp:hover { background: var(--farge-overflate-hover); border-color: var(--farge-kant-sterk); }
.knapp:disabled { opacity: 0.5; cursor: not-allowed; }

.knapp--primary {
  background: var(--farge-primary);
  color: var(--farge-primary-tekst);
  border-color: var(--farge-primary);
}
.knapp--primary:hover {
  background: var(--farge-primary-hover);
  border-color: var(--farge-primary-hover);
}

.felt {
  display: inline-flex;
  align-items: center;
  padding: var(--avstand-1) var(--avstand-2);
  font: inherit;
  font-size: var(--font-base);
  background: var(--farge-bakgrunn);
  color: var(--farge-tekst);
  border: var(--kant);
  border-radius: var(--radius);
  height: 26px;
  line-height: var(--linje-hoyde-tett);
}
.felt:focus {
  outline: none;
  border-color: var(--farge-primary);
}
.felt--sok { min-width: 14rem; }

/* Full bredde — brukes i modaler og skjema-rader.
   Setter display:block så høyde ikke kollapser med inline-flex. */
.felt--full {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Textarea trenger litt mer plass og normal linjehøyde. */
textarea.felt {
  height: auto;
  line-height: 1.5;
  padding: var(--avstand-2);
  resize: vertical;
}

/* Select med samme padding som tekstfelt; native pil. */
select.felt {
  height: 28px;
  padding-right: var(--avstand-2);
  cursor: pointer;
}

/* Color-picker. */
.felt--farge {
  width: 48px;
  height: 28px;
  padding: 2px;
  cursor: pointer;
}

.ikonknapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  color: var(--farge-tekst-dempet);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.ikonknapp:hover {
  background: var(--farge-overflate-hover);
  color: var(--farge-tekst);
}
.ikonknapp svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.ikonknapp [data-ikon] { display: none; }
.ikonknapp[data-tema="auto"] [data-ikon="auto"] { display: block; }
.ikonknapp[data-tema="lys"] [data-ikon="lys"] { display: block; }
.ikonknapp[data-tema="mork"] [data-ikon="mork"] { display: block; }

.kodeboks {
  margin-top: var(--avstand-3);
  padding: var(--avstand-3);
  background: var(--farge-overflate);
  border: var(--kant);
  border-radius: var(--radius);
  font-family: var(--font-monospace);
  font-size: var(--font-liten);
  line-height: var(--linje-hoyde-tett);
  white-space: pre-wrap;
  overflow-x: auto;
}

.dempet { color: var(--farge-tekst-dempet); }
.svak { color: var(--farge-tekst-svak); }
.tall { font-variant-numeric: tabular-nums; }