/* Kundeskjermen — biler, dekkhotell, venteliste og bedriftskunder.
 *
 * Arket eier INGEN nye farger og ingen ny kortform. Kortet er `--navy2` med
 * `--border-strong` og `--r-md`, som `.np-oppf-rad` og `.np-innst-bolk`; det
 * som åpner seg inne i et kort er `--fill-subtle` med `--border-faint`, som
 * `.np-oppf-kort`. Huset har ÉN kortform, og en femte skjerm skal ikke finne
 * opp en ny.
 *
 * TO TING ER NYE HER, og begge følger av at skjermen er et OPPSLAGSVERK og
 * ikke en arbeidsliste:
 *
 *   1. FANESTRIPA. Fire faner, ikke sju som i Innstillinger — derfor BRYTER
 *      den i stedet for å rulle sideveis. Innstillinger måtte løse rulling,
 *      maskering og «dra fanen fram» med både CSS og JS fordi sju faner er
 *      642 px; fire korte faner får plass på to linjer på 320 px, og en
 *      stripe som bryter har ingen skjult høyrekant å avsløre.
 *   2. DEKKTABELLEN. Åtte kolonner får ikke plass på 320 px uansett hva man
 *      gjør, og å brekke dem til kort ødelegger det tabellen er til for: å
 *      lese ÉN kolonne nedover mens man går langs reolen. Den ruller derfor
 *      sideveis i sin egen ramme, som statistikkens `.np-sx-tabellramme`.
 *      Sida selv ruller aldri sideveis.
 *
 * Ingen `--elev-card` på listekortene. Skyggen er laget for å løfte ETT kort
 * fram fra flata; på 24 kort i strekk løfter den ingenting og blir bare 24
 * uskarpe kanter nedover sida. Samme beslutning som i oppfølgingslista.
 */

.np-kunde {
  margin: 6px 0 0;
}

/* ── Hodet ───────────────────────────────────────────────────────────────── */
.np-kunde-hode {
  margin-bottom: 14px;
}
.np-kunde-hode h2 {
  margin: 0;
  font-family: var(--np-font-display);
  font-size: var(--np-t-xl);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-tett);
  color: var(--white);
}
.np-kunde-hode p {
  margin: 6px 0 0;
  max-width: 74ch;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}

/* ── Fanestripa ──────────────────────────────────────────────────────────
   Den VALGTE fanen har FORM i tillegg til farge: en is-strek under. Bare en
   fargeendring ville vært usynlig for den som ikke ser is (WCAG 1.4.1).
   Streken er en `inset box-shadow` og ikke en `border-bottom`: en ramme ville
   flyttet teksten 3 px opp på den valgte fanen, og da hopper hele stripa når
   man bytter fane. */
.np-kunde-faner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.np-kunde-fane {
  font-family: inherit;
  font-size: var(--np-t-md);
  font-weight: 600;
  line-height: var(--np-lh-kort);
  /* 24 px er WCAG 2.2 § 2.5.8 sitt gulv for enhver peker, ikke bare
     berøring. Polstringa gir ~38 px her, men gulvet står så en framtidig
     stramming ikke kan gå under det uten å bli merket. */
  min-height: 24px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-btn) var(--r-btn) 0 0;
  background: none;
  color: var(--silver);
  cursor: pointer;
}
.np-kunde-fane:hover:not(.valgt) {
  background: var(--fill-subtle);
  color: var(--offwhite);
}
.np-kunde-fane.valgt {
  color: var(--white);
  font-weight: 700;
  background: var(--fill-subtle);
  box-shadow: inset 0 -3px 0 var(--ice);
}

/* ── Søkefeltet ──────────────────────────────────────────────────────────
   Lupa ligger INNE i `<label>`, så den følger feltet når rada bryter. Samme
   grep som søket i kalenderen. */
.np-kunde-sokrad {
  margin-bottom: 10px;
}
.np-kunde-sokfelt {
  display: block;
  position: relative;
  max-width: 420px;
}
.np-kunde-lupe {
  position: absolute;
  left: 11px;
  /* Loddrett midt i feltet uansett tekststørrelse: `top: 50%` og halve seg
     selv tilbake. `svg.ikn` er 1em, og 1em her er `--np-t-felt`. */
  top: 50%;
  transform: translateY(-50%);
  color: var(--silver);
  pointer-events: none;
}
.np-kunde-sokfelt .np-felt {
  margin-top: 0;
  padding-left: 34px;
}
.np-kunde-teller {
  margin: 0 0 10px;
  font-size: var(--np-t-xs);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}

/* ── Lista med biler ─────────────────────────────────────────────────────── */
.np-kunde-liste,
.np-kunde-bedrifter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* INGEN `overflow: hidden` HER, selv om kortet har et barn med egen bakgrunn
   som stikker ut i hjørnene. Husets fokusring er `outline: 2px` med
   `outline-offset: 2px` (panel.css:139), og knappen fyller kortet helt ut til
   ramma — en klippende forelder ville spist ringa på alle fire sider, og da
   ser den som styrer med tastatur ikke hvor hen står. Hjørnene løses i stedet
   der de oppstår: knappen og kortet under den runder hver sin ende. */
.np-kunde-kort,
.np-kunde-bedrift {
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.np-kunde-kort.apen,
.np-kunde-bedrift.apen {
  border-color: var(--border-hover);
}

/* HELE KORTHODET ER TRYKKFLATA, ikke en liten pil til høyre. Man sikter på
   skiltet, ikke på en chevron på 14 px.
   Rutenettet er tre spalter: innhold, innhold, chevron. Chevronen spenner
   begge tekstradene, så den står loddrett midt i hodet uansett hvor mange
   linjer navnet tar. */
.np-kunde-knapp {
  display: grid;
  width: 100%;
  gap: 2px 12px;
  padding: 12px 14px;
  border: 0;
  /* Hover-flata må følge kortets hjørner, ellers stikker et rett hjørne ut
     under det runde. Samme token som kortet — det ene pikselet ramma tar, er
     ikke til å se. */
  border-radius: var(--r-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.np-kunde-knapp:hover {
  background: var(--fill-subtle);
}
/* Er kortet åpent, er det kortet under som runder nedre ende. */
.np-kunde-kort.apen > .np-kunde-knapp,
.np-kunde-bedrift.apen > .np-kunde-knapp {
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.np-kunde-kort > .np-kunde-knapp {
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "skilt  merke  kip"
    "eier   tlf    kip"
    "nokkel nokkel nokkel";
}
.np-kunde-bedrift > .np-kunde-knapp {
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "navn   kontakt kip"
    "avtale tlf     kip"
    "nokkel nokkel  nokkel";
}
/* `min-width: 0` på hver celle: uten den nekter en grid-celle å bli smalere
   enn sitt eget innhold, og en lang eiers navn presser rutenettet bredere enn
   skjermen. Da ruller SIDA sideveis, som er den ene feilen dette arket ikke
   har lov til å lage. */
.np-kunde-knapp > * {
  min-width: 0;
}

/* ── OG `min-width: 0` VAR IKKE NOK PÅ BEDRIFTSKORTET ───────────────────
 *
 * `min-width: 0` lar CELLA krympe. Den sier ingenting om hvor stor SPORET
 * blir — og det er sporene som fordeler bredden. Med
 * `grid-template-columns: auto 1fr auto` får `auto`-sporet sin `max-content`
 * FØRST, og `1fr` får det som eventuelt er igjen. Er det ingenting igjen,
 * blir det null.
 *
 * MÅLT på 320 px, normal tekst, bedriftsfanen: spor 1 tok hele bredden til
 * «Salgsklargjøring, faktureres per bil», og kontaktcella ble 0 px bred.
 * Kontaktnavnet og telefonnummeret sto da malt UTENFOR cella si — «Nina
 * Skarphagen» skåret av kortkanten, og «33 47 08 15» stablet som fire tall
 * under hverandre. Cellene har `overflow: visible`, så overflyten arvet seg
 * hele veien opp: `li` 315 px i en beholder på 278, og dokumentet 336 px i
 * et vindu på 320. SIDA RULLET SIDEVEIS — nøyaktig den ene feilen kommentaren
 * over sier at dette arket ikke har lov til å lage.
 *
 * Det var ikke bare 320: sveipen fant sidrulling på 320 i alle tre
 * tekststørrelsene, på 360 og 375 ved «stor» og «størst», og på 390 ved
 * «størst». Og på 390 i NORMAL tekst, der sida ikke rullet, brakk
 * telefonnummeret likevel i to linjer — et telefonnummer delt over to linjer
 * er ikke trangt, det er uleselig.
 *
 * TO SPALTER KREVER, målt med `width: max-content` på hver celle og lagt
 * sammen med mellomrom, chevron og polstring (verste av de fire kortene,
 * «Raveien Bruktbil»):
 *
 *   normal   218 + 110 + 15 + 24 + 28 = 395  →  vindu 437 px
 *   stor     244 + 123 + 17 + 24 + 28 = 436  →  vindu 478 px
 *   størst   273 + 137 + 19 + 24 + 28 = 481  →  vindu 523 px
 *
 * Under det skal kortet ha ÉN spalte: firmanavn, avtale, kontakt, telefon
 * under hverandre, med chevronen fortsatt til høyre over alle fire.
 *
 * ÉN GRENSE OG IKKE TRE: 523 er kravet ved største tekst, og det er det
 * tallet som må holde. En egen grense per tekststørrelse (slik menylinja i
 * `demo-tillegg.css` har) ville spart to rader høyde i båndet 437–522 px ved
 * normal tekst — men i det båndet finnes ingen telefon. Telefonene stopper på
 * 430, og 523 og oppover er nettbrett. Menylinja har grensene sine fordi den
 * står på HVER skjerm i HVER bredde; dette kortet står på én fane.
 *
 * Rekkefølgen i stabelen er firma → avtale → kontakt → telefon: det som
 * identifiserer kunden først, det man ringer sist. Den er den samme som
 * leseretninga i to spalter, bare brettet ned. */
@media (max-width: 522.98px) {
  .np-kunde-bedrift > .np-kunde-knapp {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "navn    kip"
      "avtale  kip"
      "kontakt kip"
      "tlf     kip"
      "nokkel  nokkel";
  }
}
.np-kunde-skilt {
  grid-area: skilt;
  font-size: var(--np-t-lg);
  font-weight: 700;
  /* Skiltet er det man leter etter, og det leses tegn for tegn. Litt luft
     mellom tegnene gjør «O» mot «0» og «I» mot «1» lettere å skille — samme
     grunn som at `.np-root` slår på `zero` og `cv05` i fonten. */
  letter-spacing: 0.04em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.np-kunde-merke {
  grid-area: merke;
  align-self: baseline;
  font-size: var(--np-t-sm);
  color: var(--silver);
}
.np-kunde-eier {
  grid-area: eier;
  font-size: var(--np-t-sm);
  font-weight: var(--v-halvfet);
  color: var(--offwhite);
}
.np-kunde-tlf {
  grid-area: tlf;
  font-size: var(--np-t-sm);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-kunde-nokkel {
  grid-area: nokkel;
  margin-top: 4px;
  font-size: var(--np-t-xs);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-kunde-knapp > .np-kip {
  grid-area: kip;
  align-self: center;
}
.np-kunde-bnavn {
  grid-area: navn;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--np-t-md);
  font-weight: 700;
  color: var(--white);
}
.np-kunde-bikon,
.np-kunde-sumikon,
.np-kunde-h3ikon {
  color: var(--ice-tekst);
}
.np-kunde-bkontakt {
  grid-area: kontakt;
  align-self: baseline;
  font-size: var(--np-t-sm);
  color: var(--offwhite);
}
.np-kunde-bavtale {
  grid-area: avtale;
  font-size: var(--np-t-sm);
  color: var(--silver);
}

/* ── Bilkortet og bedriftskortet ─────────────────────────────────────────── */
.np-kunde-bilkort,
.np-kunde-bedriftkort {
  padding: 12px 14px 14px;
  background: var(--fill-subtle);
  border-top: 1px solid var(--border-faint);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.np-kunde-h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: var(--np-t-sm);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
  color: var(--silver);
}
/* Den andre overskrifta i bilkortet («Alt bilen har vært inne til») står rett
   under handlingsrada og trenger luft over seg. Den første gjør ikke. */
.np-kunde-handling + .np-kunde-h3 {
  margin-top: 16px;
}
.np-kunde-h4 {
  margin: 0 0 4px;
  font-size: var(--np-t-md);
  font-weight: 700;
  color: var(--white);
}

/* ── Anbefalt neste behandling ───────────────────────────────────────────
   Den forfalte raden har en is-stolpe langs venstre kant OG sin egen setning
   («skulle vært inne …»). Stolpa er et ekko av ordet, ikke bæreren av det. */
.np-kunde-neste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.np-kunde-nesterad {
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-kort);
  color: var(--silver);
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.np-kunde-nesterad.forfalt {
  color: var(--offwhite);
  border-left-color: var(--ice);
}

/* ── Handlingsrada ───────────────────────────────────────────────────────
   «Ring» er primærhandlinga her som i oppfølginga, og paret er det samme.
   MÅLT der: «Ring» er 61 px og «Legg inn time» 122 px — den FYLTE knappen ble
   den smaleste på kortet, og formen sa dermed det motsatte av fargen. Gulvet
   på 112 px er valgt av naboen og ikke av smak (stil-oppfolging.css:188).

   Her står det bak et knekkpunkt, og det er forskjellen fra oppfølginga: de
   to knappene bor inne i et bilkort som ligger inne i et kort, med 28 px
   polstring på hver side. På 320 px i største tekst ville to gulv på 112
   pluss gapet tatt mer enn linja har igjen, og da brekker paret i stedet for
   å rette seg opp. Under 560 px er knappene sine egne bredder — der får de
   plass ved siden av hverandre uansett. */
.np-kunde-handling {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
@media (min-width: 560px) {
  .np-kunde-handling > .np-btn {
    min-width: 112px;
    text-align: center;
  }
}

/* ── Historikken på bilen ────────────────────────────────────────────────── */
.np-kunde-timer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.np-kunde-time {
  padding: 8px 0;
  border-top: 1px solid var(--border-faint);
}
.np-kunde-time:first-child {
  border-top: 0;
  padding-top: 0;
}
/* Fire felt på én rad over 630 px: dato, tjeneste, pris, status. Datospalta
   har fast bredde i `ch` så kolonnen står i lodd nedover lista — det er den
   man skanner. Under 630 px er det ikke plass til fire, og da deler de seg i
   to rader der datoen og statusen hører sammen (når var bilen her, hvor står
   jobben) og tjenesten og prisen hører sammen. */
.np-kunde-time-topp {
  display: grid;
  grid-template-columns: 12ch 1fr auto auto;
  grid-template-areas: "dato tj pris status";
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: var(--np-t-sm);
  color: var(--offwhite);
}
.np-kunde-time-dato {
  grid-area: dato;
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-kunde-time-tj {
  grid-area: tj;
  font-weight: var(--v-halvfet);
}
.np-kunde-time-pris {
  grid-area: pris;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.np-kunde-time-topp .np-status {
  grid-area: status;
  /* `.np-status` har `margin-left: auto` i panel.css for flex-rader. I et
     rutenett gjør den ingenting, men nullstilles så den ikke overlever en
     framtidig endring av spaltene. */
  margin-left: 0;
  align-self: center;
}
@media (max-width: 630px) {
  .np-kunde-time-topp {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "dato status"
      "tj   pris";
  }
}
.np-kunde-time-under,
.np-kunde-time-tillegg {
  margin: 2px 0 0;
  font-size: var(--np-t-xs);
  color: var(--silver);
}
.np-kunde-time-tillegg {
  color: var(--ice-tekst);
}
/* Det interne notatet er verkstedets egen beskjed til seg selv, ikke kundens
   tekst. Samme form som `.np-notat` i detaljkortet: en is-stolpe langs
   venstrekanten sier «dette er skrevet av oss». */
.np-kunde-time-notat {
  margin: 6px 0 0;
  padding: 6px 10px;
  font-size: var(--np-t-xs);
  color: var(--offwhite);
  background: var(--fill-subtle);
  border-left: 2px solid var(--ice);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ── Bildene ─────────────────────────────────────────────────────────────
   Demoen har ingen bildefiler, og en ødelagt bilderamme leser som at panelet
   mistet bildet. Ruta er derfor tegnet som det den er: en PLASS med et
   kameraikon og en etikett. Stiplet kant, fordi stiplet er husets eneste
   «her skal det komme noe»-form. */
.np-kunde-bilder {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.np-kunde-bilde {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Ganget med `--np-skala` og ikke et fast tall: ruta bærer en etikett, og
     etiketten vokser med tekststørrelsen. En fast rute ville klippet «Etter 3»
     på største tekst. */
  width: calc(64px * var(--np-skala));
  height: calc(64px * var(--np-skala));
  border: 1px dashed var(--border-hover);
  border-radius: var(--r-sm);
  background: var(--navy25);
  color: var(--silver);
}
.np-kunde-bildeikon {
  font-size: var(--np-t-lg);
}
.np-kunde-bildetekst {
  font-size: var(--np-t-mikro);
  font-weight: 600;
}
.np-kunde-bildenote {
  margin: 10px 0 0;
  font-size: var(--np-t-xs);
  color: var(--silver);
}

/* ── Dekkhotellet ────────────────────────────────────────────────────────── */
.np-kunde-dekktopp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.np-kunde-sum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--np-t-md);
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

/* Filterpiller. Samme form som oppfølgingas, av samme grunn: en rad med
   piller der den valgte er fylt, og tallet står PÅ pilla — et filter som ikke
   sier hvor mye det skjuler, er et filter man ikke tør trykke på. */
.np-kunde-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.np-kunde-filterknapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--fill-subtle);
  color: var(--silver);
  font: inherit;
  font-size: var(--np-t-sm);
  font-weight: 600;
  cursor: pointer;
}
.np-kunde-filterknapp:hover:not(.valgt) {
  border-color: var(--border-hover);
  color: var(--offwhite);
}
/* Valgt er is-fyll med MØRK etikett — husregelen for fylte aksentflater.
   Hvit tekst på is måler 1,9:1 og er husforbud. */
.np-kunde-filterknapp.valgt {
  background: var(--ice-fyll);
  border-color: var(--ice-fyll);
  color: var(--navy);
  font-weight: 700;
}
.np-kunde-tall {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.np-kunde-filterknapp.valgt .np-kunde-tall {
  opacity: 0.6;
}

.np-kunde-tabellramme {
  overflow-x: auto;
  border: 1px solid var(--border-faint);
  border-radius: var(--r-sm);
}
.np-kunde-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--np-t-sm);
  font-variant-numeric: tabular-nums;
}
.np-kunde-tabell th,
.np-kunde-tabell td {
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-faint);
}
.np-kunde-tabell thead th {
  /* KLEBRIG HODE BLE PRØVD OG VIRKER IKKE HER, og det er verdt en linje så
     neste som savner det slipper å finne det ut på nytt: en beholder med
     `overflow-x: auto` regner om `overflow-y` fra `visible` til `auto`, og da
     er den selv rulleflata `position: sticky` måler seg mot. Beholderen har
     ingen høyde, altså ingen loddrett rulling inni seg, og hodet fester seg
     aldri. Et tak på høyden ville gitt en rulleflate inni en rulleflate —
     verre på telefon enn et hode som ruller bort. */
  background: var(--navy2);
  color: var(--silver);
  font-size: var(--np-t-mikro);
  font-weight: 600;
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
}
.np-kunde-tabell tbody th,
.np-kunde-tabell tbody td {
  color: var(--offwhite);
  font-weight: 400;
}
.np-kunde-hylle {
  color: var(--white);
  font-weight: 700;
}
.np-kunde-tabell tbody tr:hover {
  background: var(--fill-subtle);
}

/* MØNSTERDYBDEN — fire tall, og det svakeste hjulet avgjør.
   Fargen på tallet er et EKKO. Merket ved siden av bærer ordet, fordi fire
   tall ved siden av hverandre er akkurat der en rød nyanse på ett av dem
   forsvinner i en tabell man skanner (WCAG 1.4.1). */
 /* INGEN `display: flex` på denne cella. Den er en `<td>`, og et
    flex-rutenett på en tabellcelle tar den ut av tabellayouten — spaltene
    nedover slutter å stå i lodd, som er hele grunnen til at dette er en
    tabell. Tallene er `inline-block` i stedet, og cella har et gulv så
    merket «Anbefalt bytte» ikke rykker kolonnen bredere på 53 av radene. */
.np-kunde-dybde {
  min-width: 22ch;
}
.np-kunde-mm {
  display: inline-block;
  min-width: 4ch;
  margin-right: 6px;
  text-align: right;
}
.np-kunde-mm.lav {
  color: var(--warn);
  font-weight: var(--v-halvfet);
}
.np-kunde-mm.under {
  color: var(--bad-text);
  font-weight: 700;
}
.np-kunde-dekkmerke {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--np-t-mikro);
  font-weight: var(--v-halvfet);
  white-space: nowrap;
}
.np-kunde-dekkmerke.lav {
  color: var(--warn);
  /* Gul har ingen `--warn-bg` i tokensettet, og en ny farge skal ikke
     oppfinnes her. `--fill-subtle` er husets nøytrale tonede flate, og ordet
     bærer betydningen uansett. */
  background: var(--fill-subtle);
}
.np-kunde-dekkmerke.under {
  color: var(--bad-text);
  background: var(--bad-bg);
}
/* Rada er tonet, ikke farget: raden skal kunne leses, og en full rød rad
   ville gjort de andre sju kolonnene vanskeligere å lese enn de trenger. */
.np-kunde-rad-under > * {
  background: var(--bad-bg);
}

.np-kunde-hjelp {
  margin: 10px 0 0;
  max-width: 74ch;
  font-size: var(--np-t-xs);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}
/* Står hjelpelinja ØVERST i en bolk (ventelista og bedriftene forklarer seg
   før lista), skal den ha luft under seg og ikke over. */
.np-kunde-innhold > .np-kunde-hjelp:first-child {
  margin: 0 0 12px;
}

/* ── Ventelista ──────────────────────────────────────────────────────────── */
.np-kunde-vente {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.np-kunde-venterad {
  padding: 12px 14px;
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.np-kunde-ventehvem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.np-kunde-ventehvem b {
  font-size: var(--np-t-md);
  font-weight: 700;
  color: var(--white);
}
/* Hvor fleksibel kunden er, er hele grunnen til rekkefølgen i lista, så den
   står som et merke og ikke som en setning. Is = «denne kan du ringe nå»,
   sølv = «denne kan vente» — samme to-deling som oppfølgingas merker, og
   ORDET står i merket. */
.np-kunde-flex {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--np-t-mikro);
  font-weight: var(--v-halvfet);
  color: var(--silver);
  background: var(--fill-subtle);
}
.np-kunde-flex.nar {
  color: var(--ice-tekst);
  background: var(--ice-bg);
}
.np-kunde-ventedata {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: var(--np-t-sm);
}
.np-kunde-ventetj {
  font-weight: var(--v-halvfet);
  color: var(--offwhite);
}
.np-kunde-ventebil {
  color: var(--silver);
}
.np-kunde-ventetid {
  margin: 6px 0 0;
  font-size: var(--np-t-xs);
  color: var(--silver);
}

/* ── Fakturaunderlaget ───────────────────────────────────────────────────── */
.np-kunde-underlag {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--navy25);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
}
.np-kunde-underlagtopp {
  margin: 0 0 10px;
  font-size: var(--np-t-sm);
  color: var(--silver);
}
.np-kunde-underlagliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Fem felt per linje: dato, bil, tjeneste, referanse, pris. Prisen er
   høyrestilt med tabulærtall — en liste med beløp man skal kunne summere med
   øyet, og summen står rett under. */
.np-kunde-underlagliste li {
  display: grid;
  grid-template-columns: 12ch minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 2px 10px;
  font-size: var(--np-t-sm);
  color: var(--offwhite);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-faint);
}
.np-kunde-ulddato,
.np-kunde-uldref {
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-kunde-uldpris {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.np-kunde-underlagsum {
  margin: 10px 0 0;
  font-size: var(--np-t-md);
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
/* Under 630 px er fem spalter ikke fem spalter. Dato og pris hører sammen
   (når, hvor mye), bilen og tjenesten under, og referansen sist — den leses
   bare når noen spør etter den. */
@media (max-width: 630px) {
  .np-kunde-underlagliste li {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "dato pris"
      "bil  bil"
      "tj   ref";
  }
  .np-kunde-ulddato { grid-area: dato; }
  .np-kunde-uldpris { grid-area: pris; }
  .np-kunde-uldbil { grid-area: bil; }
  .np-kunde-uldtj { grid-area: tj; }
  .np-kunde-uldref { grid-area: ref; text-align: right; }
}

/* ── Tomme tilstander og forbeholdet ─────────────────────────────────────── */
.np-kunde-tom {
  margin: 8px 0 0;
  max-width: 68ch;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}
.np-kunde-merknad {
  margin: 22px 0 0;
  max-width: 78ch;
  font-size: var(--np-t-xs);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}
.np-kunde-merknad b {
  color: var(--offwhite);
}

/* ── Berøring ────────────────────────────────────────────────────────────
   Husets gulv er 44 px på telefon. `.np-btn` og `.np-btn.liten` er alt der
   fra demo-tillegg.css; de to kontrollene dette arket eier er det ikke. */
@media (pointer: coarse) {
  .np-kunde-fane,
  .np-kunde-filterknapp {
    min-height: 44px;
  }
}

/* ── Papir ───────────────────────────────────────────────────────────────
 * To utskrifter, ikke én:
 *
 *   1. STÅR ET FAKTURAUNDERLAG ÅPENT er det underlaget man vil ha på arket.
 *      `.underlag-apent` settes på seksjonen av `NB.deler.kunder`, og da
 *      skjules alt annet — fanestripa, de andre bedriftene, merknaden.
 *      Uten dette ville en Ctrl+P gitt fire bedriftsrader og en fanestripe
 *      rundt den ene lista man faktisk skulle sende.
 *   2. ELLERS skrives lista man står i — dekkhotellet er det som faktisk
 *      skrives ut i et verksted, og da skal knapper og filtre bort.
 */
@media print {
  .np-kunde-faner,
  .np-kunde-sokrad,
  .np-kunde-filter,
  .np-kunde-handling,
  .np-kunde-dekktopp .np-btn,
  .np-kunde-merknad {
    display: none !important;
  }
  .np-kunde-hode h2,
  .np-kunde-h4,
  .np-kunde-skilt,
  .np-kunde-bnavn,
  .np-kunde-ventehvem b,
  .np-kunde-hylle,
  .np-kunde-sum,
  .np-kunde-underlagsum {
    color: #000;
  }
  .np-kunde-hode p,
  .np-kunde-teller,
  .np-kunde-merke,
  .np-kunde-eier,
  .np-kunde-tlf,
  .np-kunde-nokkel,
  .np-kunde-hjelp,
  .np-kunde-tom,
  .np-kunde-ventedata,
  .np-kunde-ventetid,
  .np-kunde-underlagtopp,
  .np-kunde-underlagliste li,
  .np-kunde-tabell tbody th,
  .np-kunde-tabell tbody td,
  .np-kunde-tabell thead th {
    color: #333;
  }
  .np-kunde-kort,
  .np-kunde-bedrift,
  .np-kunde-venterad,
  .np-kunde-underlag {
    background: none;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
  }
  .np-kunde-bilkort,
  .np-kunde-bedriftkort {
    background: none;
    border-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .np-kunde-tabellramme {
    overflow: visible;
    border-color: #666;
  }
  .np-kunde-tabell thead th {
    background: none;
    border-color: #666;
  }
  .np-kunde-tabell tr {
    break-inside: avoid;
  }
  /* Merket bærer ordet, så det overlever i svart — og den tonede flata bak
     det er blekk uten betydning på papir. */
  .np-kunde-dekkmerke,
  .np-kunde-flex {
    background: none;
    color: #000;
    border: 1px solid #666;
  }
  .np-kunde-rad-under > * {
    background: none;
  }
  .np-kunde-mm.lav,
  .np-kunde-mm.under {
    color: #000;
    font-weight: 700;
    text-decoration: underline;
  }
  /* Bilderutene er en plassholder på skjermen og blir en tom firkant på
     papir. Etiketten sier alt som skal sies. */
  .np-kunde-bilder {
    display: none !important;
  }

  .np-kunde.underlag-apent .np-kunde-hode,
  .np-kunde.underlag-apent .np-kunde-knapp,
  .np-kunde.underlag-apent .np-kunde-timer,
  .np-kunde.underlag-apent .np-kunde-innhold > .np-kunde-hjelp {
    display: none !important;
  }
  /* Bedriften uten underlag har ingenting igjen å vise når hodet er skjult;
     lar vi den stå, blir arket fire tomme rammer og én liste. */
  .np-kunde.underlag-apent .np-kunde-bedrift:not(.apen) {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   KUNDEFANA — OMBYGGET 25.09.2026
   ════════════════════════════════════════════════════════════════════════
   Skjermen var bil-sentrisk: skiltet i 30 px øverst i et kort med ramme, og
   navnet under i 13. MÅLT på 1 440 px: 113 px per kort, 13 kunder synlige på
   1 800 px, og null signal om hvem som trengte noe.

   Radformen er ARBEIDSKØENS, med vilje — to lister i samme produkt skal ikke
   ha hver sin form. Klassene under er derfor tegnet mot de samme målene som
   `.np-oppf-rad`, og filterpillene, tomteksten og «Vis flere» er lånt
   ORDRETT fra stil-oppfolging.css i stedet for å tegnes på nytt.

   Reglene står SIST i arket og overstyrer den gamle kortformen der navnene
   er gjenbrukt (`.np-kunde-liste`). Bilkortet er urørt — det var aldri
   problemet; problemet var at man måtte kjenne skiltet for å komme dit. */

.np-kunde {
  --kd-kol: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1.6fr);
  --kd-handling: 150px;
  --kd-pad: 14px;
}

/* Søkefeltet og «Ny kunde» på samme linje: søket er det man gjør hundre
   ganger, knappen er det man gjør én gang i uka, og de skal ikke være like
   brede. Knappen krymper til innholdet. */
.np-kunde-topprad {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}
.np-kunde-topprad .np-kunde-sokfelt {
  flex: 1 1 auto;
  min-width: 0;
}
.np-kunde-nyknapp {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── NY KUNDE ─────────────────────────────────────────────────────────── */
.np-kunde-ny {
  margin: 0 0 14px;
  padding: 16px 18px;
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.np-kunde-nyfelt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
@media (min-width: 760px) {
  .np-kunde-nyfelt {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.np-kunde-nyknapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
/* Duplikatvarselet er en OPPLYSNING og ikke en feil: kunden finnes, og det
   er en god ting å få vite før man lager nummer to. Is-stolpe, ikke rød. */
.np-kunde-dup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 14px 0 0;
  padding: 9px 13px;
  background: var(--ice-bg);
  border-left: 2px solid var(--ice);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--np-t-sm);
  color: var(--offwhite);
}
.np-kunde-dup button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ice);
  text-decoration: underline;
  cursor: pointer;
}

/* ── FILTERRADA ───────────────────────────────────────────────────────── */
.np-kunde-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* ── LISTA ────────────────────────────────────────────────────────────── */
.np-kunde-kolonnehode {
  display: grid;
  grid-template-columns: var(--kd-kol) var(--kd-handling);
  gap: 14px;
  padding: 0 var(--kd-pad) 6px;
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-caps);
  text-transform: uppercase;
  color: var(--silver);
}
@media (max-width: 899.98px) {
  .np-kunde-kolonnehode {
    display: none;
  }
}
/* `gap: 0` med delelinjer: 25 rader à 10 px mellomrom er 250 px ren luft, og
   en liste man skanner nedover leses raskere med en strek enn med et hopp. */
.np-kunde .np-kunde-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--navy2);
}
.np-kunde-rad {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kd-handling);
  align-items: center;
  gap: 14px;
  padding: 0 var(--kd-pad) 0 0;
  border-top: 1px solid var(--border-faint);
  background: none;
  transition: background 0.12s ease;
}
.np-kunde .np-kunde-liste > .np-kunde-rad:first-child {
  border-top: 0;
}
.np-kunde-rad:hover {
  background: var(--navy25);
}
.np-kunde-rad.apen {
  background: var(--ice-bg);
}
/* STATUS SOM KANT, og bare der den betyr noe. «Aktiv» har ingen kant: det
   normale skal ikke ha et merke, ellers er alt merket og ingenting er det. */
.np-kunde-rad::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}
.np-kunde-rad[data-status="kommende"]::before { background: var(--ice); }
.np-kunde-rad[data-status="oppfolging"]::before { background: var(--warn); }
.np-kunde-rad[data-status="ny"]::before { background: var(--green); }

.np-kunde-aapne {
  display: grid;
  grid-template-columns: var(--kd-kol);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 11px 0 11px var(--kd-pad);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.np-kunde-hvem {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* `text-overflow` og ikke bryting: raden skal ha samme høyde uansett hvor
   langt navnet er. Hele navnet står i skuffen. */
.np-kunde-navn,
.np-kunde-kontakt,
.np-kunde-kjt,
.np-kunde-steg {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-kunde-navn {
  font-size: var(--np-t-md);
  font-weight: 700;
  line-height: var(--np-lh-kort);
  color: var(--white);
}
.np-kunde-kontakt {
  font-size: var(--np-t-xs);
  line-height: var(--np-lh-kort);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-kunde-kjt {
  font-size: var(--np-t-sm);
  color: var(--silver);
}
.np-kunde-sist {
  display: flex;
  flex-direction: column;
  font-size: var(--np-t-sm);
  color: var(--silver);
  font-variant-numeric: tabular-nums;
}
.np-kunde-sist small {
  font-size: var(--np-t-xs);
  color: var(--silver);
  opacity: 0.8;
}
/* NESTE STEG ER DEN ANDRE TINGEN ØYET SKAL TREFFE, etter navnet. Offwhite og
   halvfet mot sølv rundt — samme vekt som navnet, men ikke hvit, så kolonne
   én fortsatt er den første. */
.np-kunde-steg {
  font-size: var(--np-t-sm);
  font-weight: var(--v-halvfet);
  color: var(--offwhite);
}
.np-kunde-steg.kommende { color: var(--ice-tekst); }
.np-kunde-steg.oppfolging { color: var(--warn); }
.np-kunde-steg.mangler { color: var(--bad-text); }
.np-kunde-steg.borte { color: var(--silver); }

.np-kunde-knapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.np-kunde-knapper a {
  text-decoration: none;
  flex: 0 0 auto;
}
/* Statusmerket bærer ORDET sitt. Farge alene er ikke identitet (WCAG 1.4.1),
   og tre kantfarger uten ord er tre farger ingen husker. */
.np-kunde-status {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  font-size: var(--np-t-mikro);
  font-weight: 700;
  color: var(--silver);
  white-space: nowrap;
}
.np-kunde-status.kommende { border-color: var(--ice); color: var(--ice); }
.np-kunde-status.oppfolging { border-color: var(--warn); color: var(--warn); }
.np-kunde-status.ny { border-color: var(--green); color: var(--green); }

.np-kunde-epost a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--ice-tekst);
  text-decoration: none;
  word-break: break-all;
}
.np-kunde-epost a:hover { text-decoration: underline; }
.np-kunde-mangler {
  margin: 0;
  font-size: var(--np-t-sm);
  color: var(--silver);
}

/* ── MOBIL: EGEN FORM, IKKE EN KLEMT TABELL ───────────────────────────── */
@media (max-width: 899.98px) {
  .np-kunde-rad {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .np-kunde-aapne {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2px 12px;
    padding: 11px 14px 8px;
  }
  .np-kunde-hvem { grid-column: 1; grid-row: 1; }
  /* Sist inne står ØVERST til høyre: det er tallet som avgjør hvilken av to
     like rader man tar først, og øyet leser toppen av et kort. */
  .np-kunde-sist {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-end;
    text-align: right;
  }
  .np-kunde-kjt { grid-column: 1 / -1; grid-row: 2; margin-top: 5px; }
  .np-kunde-steg {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 4px;
    font-size: var(--np-t-md);
    white-space: normal;
  }
  /* Knappene får egen linje, HØYRESTILT. «Ring» strekkes ikke i full bredde
     — tre skjermfylte is-flater under hverandre roper like høyt, og da roper
     ingen av dem. `space-between` sto her først, og med bare én knapp på de
     fleste radene endte den alene i VENSTRE kant med hele raden tom til
     høyre. Høyre kant er dessuten der tommelen er. */
  .np-kunde-knapper {
    justify-content: flex-end;
    padding: 0 14px 11px;
  }
  .np-kunde-knapper .np-btn {
    min-width: 116px;
    text-align: center;
  }
}
@media (max-width: 480px) {
  /* Søket tar hele bredden; knappen faller under og tar BARE plassen sin.
     Full bredde sto her først, og en is-fylt flate over hele skjermen for
     noe man gjør én gang i uka er sterkere enn søket man gjør hundre ganger
     om dagen. Den er høyrestilt av samme grunn som knappene i radene. */
  .np-kunde-topprad {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .np-kunde-topprad .np-kunde-sokfelt {
    flex: 1 1 100%;
  }
  .np-kunde-nyknapp {
    flex: 0 0 auto;
  }
}

@media print {
  .np-kunde-topprad,
  .np-kunde-filter,
  .np-kunde-knapper,
  .np-kunde-ny,
  .np-skuff,
  .np-skuff-bak {
    display: none !important;
  }
  .np-kunde .np-kunde-liste {
    border: 0;
    border-radius: 0;
    background: none;
  }
  .np-kunde-rad {
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 1px solid #ccc;
    break-inside: avoid;
  }
  .np-kunde-rad::before { display: none; }
  .np-kunde-navn, .np-kunde-steg { color: #000; }
  .np-kunde-kontakt, .np-kunde-kjt, .np-kunde-sist { color: #333; }
}

@media (pointer: coarse) {
  .np-kunde-epost a,
  .np-kunde-dup button {
    min-height: 44px;
  }
}

/* ── ÉN «RING», MEN «LEGG INN TIME» PER BIL ──────────────────────────────
   Bilkortet bærer sine egne «Ring» og «Legg inn time». Inne i skuffen står de
   samme to i bunnlinja, og fire knapper for to handlinger er to for mange.

   MEN BARE «RING» ER EN EKTE GJENTAKELSE: telefonnummeret er det samme
   uansett hvilken bil kortet gjelder. «Legg inn time» er DET IKKE — den
   forvelger tjenesten bilen skal inn til neste gang, og en kunde med to biler
   har to ulike svar. Bunnlinjas «Ny booking» er kunden, kortets er bilen.

   Første utgave skjulte hele raden med `display: none`, og da sto `kunder:time`
   i markupen uten å kunne trykkes — `benk.py` meldte den som aldri nåbar.
   En knapp som finnes og ikke virker er verre enn ingen knapp. */
.np-skuff .np-kunde-handling > a {
  display: none;
}

/* Radhøyda var 88 px. Navnet og telefonen er to linjer, «sist inne» to, og
   11 px polstring over og under gjorde resten. 9 px gir 82 og mister
   ingenting — teksten har samme linjehøyde, det er bare lufta rundt som er
   strammet. Arbeidskøen står på 64 fordi den har ÉN linje i hver celle. */
.np-kunde-aapne {
  padding-top: 9px;
  padding-bottom: 9px;
}