/*
 * Bruktmesse – felles stil.
 *
 * Klubbens marineblå er grunnfargen. Varekoden vises som en hengelapp i gult, slik den henger
 * på varen på messa; det er det eneste sterke innslaget. Alt annet er stille og lett å lese for
 * frivillige som står i kø ved disken. Skriften (Atkinson Hyperlegible) er laget for lesbarhet.
 */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonter/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonter/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --marine: #07366f;
  --marine-dyp: #042550;
  --is: #e9f0f7;
  --sno: #f8fafc;
  --hvit: #ffffff;
  --blekk: #13202f;
  --grafitt: #566476;
  --strek: #c9d5e2;
  --lapp: #ffcd2e;
  --lapp-kant: #d9a800;
  --ok: #17663f;
  --ok-bak: #e3f3ea;
  --feil: #a8231a;
  --feil-bak: #fbe9e7;

  --skrift: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-liten: 4px;
  --r: 8px;
  --luft: 1rem;
  --maks: 72rem;
}

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

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

body {
  margin: 0;
  background: var(--sno);
  color: var(--blekk);
  font-family: var(--skrift);
  font-size: 1.0625rem;
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--marine); text-underline-offset: .15em; }
a:hover { color: var(--marine-dyp); }

:focus-visible {
  outline: 3px solid var(--lapp);
  outline-offset: 2px;
}

[hidden] { display: none !important; }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- ramme ---------- */

.topp {
  background: var(--marine);
  color: var(--hvit);
}
.topp__innhold {
  max-width: var(--maks);
  margin: 0 auto;
  padding: .75rem var(--luft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
}
.topp a { color: inherit; text-decoration: none; }
.klubbnavn { font-weight: 700; font-size: 1.125rem; display: flex; align-items: center; gap: .75rem; }
.klubbnavn__tekst { display: block; }
.klubblogo { height: 2.5rem; width: auto; max-width: 8rem; object-fit: contain; background: var(--hvit); border-radius: var(--r-liten); padding: .15rem; }
.klubbnavn small { display: block; font-weight: 400; font-size: .875rem; opacity: .8; }
.hovednav { display: flex; gap: .25rem; flex-wrap: wrap; }
.hovednav a {
  padding: .4rem .75rem;
  border-radius: var(--r-liten);
}
.hovednav a:hover, .hovednav a[aria-current="page"] { background: rgba(255, 255, 255, .14); }
.bruker { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .9375rem; }
.bruker form { margin: 0; }
.bruker .rolle { opacity: .75; margin-left: .35rem; }
.bruker button {
  font: inherit;
  color: var(--hvit);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-liten);
  padding: .3rem .7rem;
  cursor: pointer;
}
.bruker button:hover { background: rgba(255, 255, 255, .14); }

main {
  max-width: var(--maks);
  margin: 0 auto;
  padding: 1.5rem var(--luft) 4rem;
}

/* ---------- meldinger ---------- */

.melding, .feil {
  border-radius: var(--r);
  padding: .75rem 1rem;
  margin: 0 0 1.25rem;
  border-left: 4px solid;
}
.melding { background: var(--ok-bak); border-color: var(--ok); }
.feil { background: var(--feil-bak); border-color: var(--feil); }
.melding p:last-child, .feil p:last-child { margin: 0; }

/* ---------- skjema ---------- */

label { display: block; font-weight: 700; margin-bottom: .3rem; }
.hjelp { display: block; font-weight: 400; color: var(--grafitt); font-size: .9375rem; }

input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"], select, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--hvit);
  border: 1px solid var(--strek);
  border-radius: var(--r-liten);
  padding: .6rem .75rem;
  min-height: 2.75rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--marine); }

.felt { margin-bottom: 1rem; }
.rad { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.avkryss { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin-bottom: .6rem; }
.avkryss input { flex: none; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--marine); }

fieldset { border: 1px solid var(--strek); border-radius: var(--r); padding: .75rem 1rem .25rem; margin: 0 0 1rem; }
legend { font-weight: 700; padding: 0 .35rem; }

.knapper { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .5rem; }

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .55rem 1.1rem;
  font: inherit;
  font-weight: 700;
  border-radius: var(--r-liten);
  border: 1px solid var(--marine);
  background: var(--marine);
  color: var(--hvit);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.knapp:hover { background: var(--marine-dyp); color: var(--hvit); }
.knapp--stille { background: var(--hvit); color: var(--marine); }
.knapp--stille:hover { background: var(--is); color: var(--marine-dyp); }
.knapp--fare { background: var(--hvit); color: var(--feil); border-color: var(--feil); }
.knapp--fare:hover { background: var(--feil-bak); color: var(--feil); }

/* Søke- og skannerfeltet er stort og alltid først i fokus. */
.skann {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.skann input {
  font-size: 1.375rem;
  min-height: 3.5rem;
  border-width: 2px;
  border-color: var(--marine);
}
.skann .knapp { min-height: 3.5rem; }

/* ---------- flater og tabeller ---------- */

.flate {
  background: var(--hvit);
  border: 1px solid var(--strek);
  border-radius: var(--r);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.flate > h2:first-child { margin-top: 0; }

.to-kolonner { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .to-kolonner { grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr); align-items: start; }
}

.tabell-ramme { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--strek); vertical-align: top; }
th { font-size: .875rem; color: var(--grafitt); font-weight: 700; }
td.tall, th.tall { text-align: right; white-space: nowrap; }
tbody tr:hover { background: var(--is); }
tr.ny { background: #fff7d6; }
/* Rad med tall og knapper, og under den en rad med forklaring (Administrasjon → Provisjon). */
tr.hovedrad td { border-bottom: 0; padding-bottom: .2rem; }
td.beskrivelse { padding-top: 0; }
tfoot td { font-weight: 700; border-bottom: 0; }

.fakta { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0; }
.fakta dt { color: var(--grafitt); }
.fakta dd { margin: 0; }

.merke {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--is);
  color: var(--marine);
  white-space: nowrap;
}
.merke--solgt { background: var(--ok-bak); color: var(--ok); }

.dempet { color: var(--grafitt); }

/* ---------- varekode som hengelapp ---------- */

.lapp {
  --hull: .32em;
  position: relative;
  display: inline-block;
  padding: .15em .6em .15em 1.3em;
  background: var(--lapp);
  color: var(--blekk);
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
  clip-path: polygon(.7em 0, 100% 0, 100% 100%, .7em 100%, 0 50%);
}
.lapp::before {
  content: "";
  position: absolute;
  left: .55em;
  top: 50%;
  width: var(--hull);
  height: var(--hull);
  margin-top: calc(var(--hull) / -2);
  border-radius: 50%;
  background: var(--sno);
  box-shadow: inset 0 0 0 1px var(--lapp-kant);
}
a.lapp:hover { color: var(--blekk); background: #ffd84f; }
.lapp--stor { font-size: 1.75rem; }

/* ---------- hovedmeny ---------- */

.messe-topp { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; margin-bottom: 1.25rem; }
.messe-topp h1 { margin: 0; }
.nokkeltall { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.nokkeltall li { color: var(--grafitt); }
.nokkeltall strong { display: block; font-size: 1.5rem; color: var(--blekk); font-variant-numeric: tabular-nums; }

.oppgaver { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); padding: 0; margin: 0 0 1.5rem; list-style: none; }
.oppgaver a {
  display: block;
  height: 100%;
  padding: 1.1rem 1.25rem;
  background: var(--hvit);
  border: 1px solid var(--strek);
  border-left: 6px solid var(--marine);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--blekk);
}
.oppgaver a:hover { background: var(--is); }
.oppgaver strong { display: block; font-size: 1.25rem; color: var(--marine); margin-bottom: .2rem; }
.oppgaver span { color: var(--grafitt); }

/* ---------- innlogging ---------- */

.innlogging { max-width: 24rem; margin: 3rem auto; }
.innlogging h1 { font-size: 1.75rem; }

/* ---------- passord som vises én gang ---------- */

.passord {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--hvit);
  border: 2px dashed var(--marine);
  border-radius: var(--r);
  padding: .5rem 1rem;
  display: inline-block;
  user-select: all;
}

@media (max-width: 40rem) {
  h1 { font-size: 1.625rem; }
  .bruker { margin-left: 0; }
  .skann { flex-direction: column; }
}

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

/* ---------- selgerens side ---------- */

.smal { max-width: 40rem; }
details.flate > summary { cursor: pointer; font-weight: 700; }
details.flate[open] > summary { margin-bottom: 1rem; }

/* ---------- innlevering og kasse ---------- */

input.smalt-tall { width: 5.5rem; min-height: 2.5rem; text-align: right; }
td input[type="checkbox"] { width: 1.4rem; height: 1.4rem; accent-color: var(--marine); }
.selgernummer { font-size: 1.25rem; }
.selgernummer strong { font-size: 2rem; display: inline-block; margin-left: .35rem; }
.knapper--tett { gap: .35rem; flex-wrap: nowrap; justify-content: flex-end; }
.knapper--tett form { margin: 0; }
.knapper--tett .knapp { min-height: 2.25rem; padding: .3rem .7rem; }
.knapp--stor { font-size: 1.25rem; min-height: 3.5rem; padding: .75rem 1.5rem; width: 100%; }
.knapp:disabled { opacity: .45; cursor: not-allowed; }
.totalboks form { margin: 0 0 .75rem; }
.totalboks .knapp--stille { width: 100%; }
.total { font-size: 2.75rem; font-weight: 700; line-height: 1.1; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.betaling { text-align: center; }
.betaling p { margin-left: auto; margin-right: auto; }
.referanse {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: .18em;
  padding: .35rem 1rem;
  border: 3px solid var(--marine);
  border-radius: var(--r);
  display: inline-block;
  margin: .25rem 0 1.5rem;
}
.vippsnummer { font-size: 1.5rem; }
.merke--fare { background: var(--feil-bak); color: var(--feil); }
@media (min-width: 60rem) {
  .to-kolonner--lik { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- steg 4: kontroll, henting, kasserer, regnskap ---------- */

:root { --varsel: #8a5a00; --varsel-bak: #fff4d6; }
.utfall { border-left: 6px solid var(--strek); border-radius: var(--r-liten); padding: .75rem 1rem; margin: 0 0 1.25rem; }
.utfall p { margin: 0 0 .25rem; }
.utfall__overskrift { font-size: 1.5rem; font-weight: 700; }
.utfall--fare { background: var(--feil-bak); border-color: var(--feil); color: var(--feil); }
.utfall--varsel { background: var(--varsel-bak); border-color: var(--varsel); }
.merke--varsel { background: var(--varsel-bak); color: var(--varsel); }
.filter { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end; margin: 0 0 1.25rem; }
.filter .felt { margin: 0; }
.filter select { min-width: 14rem; }
.filter .avkryss { margin: 0 0 .6rem; }
td.negativ { color: var(--feil); }
tr.overstreket td { color: var(--grafitt); text-decoration: line-through; }
.knapper--luft { margin-bottom: 1.25rem; }
h3.mellomrom { margin-top: 1.5rem; }
.fakta + p, .fakta + .flate { margin-top: 1rem; }
.oppgjorstall { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.oppgjorstall li { color: var(--grafitt); }
.oppgjorstall strong { display: block; font-size: 1.5rem; color: var(--blekk); font-variant-numeric: tabular-nums; }
@media print {
  .topp, .skann, .filter, form, .knapper { display: none !important; }
  main { padding: 0; max-width: none; }
  .flate { border: 0; padding: 0; box-shadow: none; }
}

/* ---------- steg 6: administrasjon ---------- */

input.fargevelger { width: 5rem; height: 2.75rem; padding: .2rem; }
.logoforhand { max-height: 5rem; max-width: 16rem; }
.kategorirad { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.kategorirad input[type="text"] { width: auto; flex: 1; min-width: 10rem; }
.kategorirad .avkryss { margin: 0; }
tr.inaktiv td { color: var(--grafitt); }
td.detaljer { font-size: .8125rem; word-break: break-word; max-width: 28rem; }

/* ---------- varelisten ---------- */
.filter { display: grid; gap: 0 1rem; grid-template-columns: minmax(14rem, 2fr) repeat(2, minmax(10rem, 1fr)) auto; align-items: end; }
.filter .knapper { margin-bottom: 1rem; }
.filter .avkryss { grid-column: 1 / -1; }
@media (max-width: 48rem) { .filter { grid-template-columns: 1fr; } }
.statusfilter { display: flex; flex-wrap: wrap; gap: .4rem; }
.statusfilter a.merke { text-decoration: none; border: 1px solid transparent; }
.statusfilter a.merke:hover { border-color: var(--marine); }
.merke--valgt { background: var(--marine); color: #fff; }
.vareliste th a { color: inherit; text-decoration: none; }
.vareliste th a:hover { text-decoration: underline; }
.vareliste th[aria-sort="ascending"], .vareliste th[aria-sort="descending"] { color: var(--marine); }

/* ---------- betalingsmåte i kassen ---------- */
.utfall--ok { background: var(--ok-bak); border-color: var(--ok); }
.betalingsvalg { border: 0; padding: 0; margin: 0 0 1rem; text-align: left; }
.betalingsvalg legend { font-weight: 700; margin-bottom: .5rem; }
.betalingsvalg__valg { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; margin-bottom: .4rem;
  border: 1px solid var(--strek); border-radius: .5rem; background: #fff; cursor: pointer; }
.betalingsvalg__valg input { margin-top: .25rem; }
.betalingsvalg__valg span { display: flex; flex-direction: column; }
.betalingsvalg__valg:has(input:checked) { border-color: var(--marine); box-shadow: 0 0 0 2px var(--marine) inset; }
.betalingsvalg__valg--kommer { opacity: .6; cursor: default; }
.betalingsvalg__standard { margin-top: .5rem; }

/* Hentemeldinger: tekstene slik selgeren ser dem */
.meldingstekst { white-space: pre-wrap; background: var(--is); border-radius: var(--r-liten); padding: .5rem .75rem; margin: .25rem 0; max-width: 40rem; }

/* ---------- prisforslag ---------- */

.prisforslag {
  background: var(--is);
  border-left: 4px solid var(--marine);
  border-radius: var(--r);
  padding: .6rem .9rem;
  margin: -.25rem 0 1rem;
  font-size: .9375rem;
}

/* ---------- plattformadministrasjon (superadmin) ---------- */

/* Mørk topp, så det aldri er tvil om at du er i superadmin og ikke i en klubb. */
.topp--plattform { background: #26313d; }
.qr-ramme svg { display: block; max-width: 100%; height: auto; border: 1px solid var(--strek); border-radius: var(--r-liten); }
.plattform pre { background: var(--is); padding: .75rem 1rem; border-radius: var(--r-liten); overflow-x: auto; }

/* Plattformstøtte inne i en klubb. */
.stotte { background: var(--varsel-bak); border-bottom: 2px solid var(--varsel); }
.stotte p { max-width: var(--maks); margin: 0 auto; padding: .5rem var(--luft); font-weight: 700; }
.datatabell th a { color: inherit; white-space: nowrap; }
.datatabell td { white-space: nowrap; font-size: .9375rem; }
.datafelt { padding-bottom: .5rem; border-bottom: 1px solid var(--is); }
.datafelt textarea, .dataskjema textarea { width: 100%; font: inherit; }
.dataverdi { margin: 0; overflow-wrap: anywhere; }
.historikk { padding-left: 1.1rem; }
.historikk li { margin-bottom: .4rem; }