/* ============================================================
   Industrikran Norge - Design tokens
   ============================================================ */
:root {
  --color-brand-navy:       #002554;
  --color-brand-gold:       #f1b434;
  --color-brand-gold-dark:  #e5a535;

  --color-bg-page:          #eeeeee;
  --color-bg-card:          #ffffff;
  --color-bg-sidebar:       #002554;

  --color-text-primary:     #1a1a1a;
  --color-text-secondary:   #333333;
  --color-text-light:       #ffffff;
  --color-text-muted:       #888888;

  --color-border:           #dddddd;
  --color-success:          #2e7d32;
  --color-warning:          #f59e0b;
  --color-danger:           #c62828;

  --font-family-base:       'Inter', 'Segoe UI', Arial, sans-serif;
  --font-size-xs:           0.75rem;
  --font-size-sm:           0.875rem;
  --font-size-base:         1rem;
  --font-size-lg:           1.125rem;
  --font-size-xl:           1.25rem;
  --font-size-2xl:          1.5rem;
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   32px;
  --spacing-2xl:  48px;

  --border-radius-sm:   4px;
  --border-radius-md:   8px;
  --border-radius-lg:   12px;
  --shadow-card:        0 1px 4px rgba(0,0,0,0.10);
  --shadow-elevated:    0 4px 12px rgba(0,0,0,0.15);

  /* Maalte hoyder paa de klebrige lagene. Toppbaren staar oeverst, fanelinja rett
     under, og tabellhodene under der igjen. */
  --h-topbar:  63px;
  /* Settes i JS fra faktisk hoyde paa toppbar + noekkeltall + faner. */
  --h-klebrig: 200px;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-family-base);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
.page-wrap { width: 100%; }

/* Synlig fokusmarkering for tastaturnavigasjon */
:focus-visible { outline: 3px solid var(--color-brand-gold); outline-offset: 2px; border-radius: var(--border-radius-sm); }

/* --- Toppbanner --- */
/* Innholdet i banneret er justert mot samme bredde som siden under (.topbar-inner.wide på brede sider). */
.topbar {
  background: var(--color-brand-navy);
  color: var(--color-text-light);
  border-bottom: 3px solid var(--color-brand-gold);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0, 37, 84, 0.25);
}
.topbar-inner {
  max-width: 900px; margin: 0 auto; padding: 10px var(--spacing-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); flex-wrap: wrap;
}
.topbar-inner.wide { max-width: 1680px; }
.topbar .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--color-text-light); }
.topbar .logo-img { height: 40px; width: auto; display: block; }
.topbar .brand-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.25); }
.topbar .brand-title { display: flex; flex-direction: column; line-height: 1.25; font-weight: var(--font-weight-bold); font-size: var(--font-size-base); }
.topbar .brand-title small {
  font-weight: var(--font-weight-normal); font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.75); letter-spacing: 0.06em; text-transform: uppercase;
}
.topbar-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar .admin-link {
  color: var(--color-text-light); text-decoration: none; font-size: var(--font-size-sm);
  border: 1px solid rgba(255,255,255,0.35); padding: 7px 14px; border-radius: var(--border-radius-sm);
  transition: background 0.15s, border-color 0.15s;
}
.topbar .admin-link:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); }

@media (max-width: 640px) {
  .topbar { position: static; } /* banneret bruker flere rader på mobil - sticky ville spist for mye skjerm */
  .topbar-inner { padding: 8px var(--spacing-md); }
  .topbar .logo-img { height: 32px; }
  .topbar .brand-divider { height: 28px; }
  .topbar .brand-title { font-size: var(--font-size-sm); }
}

.page-wrap { max-width: 900px; margin: 0 auto; padding: var(--spacing-lg); }
/* Selgervisningen brukes paa PC med god plass. 1200 px tvang ABUS-tabellen med 13
   kolonner til vannrett scrolling; med 1680 far den plass. */
.page-wrap.wide { max-width: 1680px; }

.card {
  background: var(--color-bg-card);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); color: var(--color-brand-navy); margin: 0 0 var(--spacing-sm); }
h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); color: var(--color-brand-navy); margin: 0 0 var(--spacing-md); }
h3 { font-size: var(--font-size-lg); color: var(--color-brand-navy); margin: 0 0 var(--spacing-sm); }
p.lead { color: var(--color-text-secondary); margin-top: 0; }

/* --- Stepper --- */
.stepper { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--spacing-lg); }
.stepper .step {
  flex: 1; min-width: 86px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--spacing-sm) 4px; text-align: center;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  border-bottom: 3px solid var(--color-border); color: var(--color-text-muted);
  transition: border-color 0.15s, color 0.15s;
}
.stepper .step-num {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: var(--font-weight-bold);
  background: var(--color-bg-card); border: 2px solid var(--color-border); color: var(--color-text-muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stepper .step.active { border-color: var(--color-brand-gold); color: var(--color-brand-navy); font-weight: var(--font-weight-bold); }
.stepper .step.active .step-num { background: var(--color-brand-gold); border-color: var(--color-brand-gold); color: var(--color-brand-navy); }
.stepper .step.done { border-color: var(--color-brand-navy); color: var(--color-brand-navy); }
.stepper .step.done .step-num { background: var(--color-brand-navy); border-color: var(--color-brand-navy); color: #fff; }
.stepper .step.clickable { cursor: pointer; }
.stepper .step.clickable:hover { color: var(--color-brand-navy); border-color: var(--color-brand-gold); }
.stepper .step.clickable:hover .step-num { border-color: var(--color-brand-gold); }

.cart-indicator {
  background: #eaf1fb; border: 1px solid #b9d1f0; color: #1a4fa0; border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-md); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium); cursor: pointer;
}
.cart-indicator:hover { background: #dcebfa; }

.topbar button.home-link {
  background: transparent; color: var(--color-text-light); border: 1px solid rgba(255,255,255,0.35);
  padding: 7px 14px; border-radius: var(--border-radius-sm); font-size: var(--font-size-sm);
  font-family: var(--font-family-base); cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.topbar button.home-link:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); }

.topbar .cart-link {
  background: var(--color-brand-gold); color: var(--color-brand-navy); border: none;
  padding: 8px 16px; border-radius: var(--border-radius-sm); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm); font-family: var(--font-family-base); cursor: pointer;
  transition: background 0.15s;
}
.topbar .cart-link:hover { background: var(--color-brand-gold-dark); }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 37, 84, 0.55); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.modal-card {
  background: #fff; border-radius: var(--border-radius-md); max-width: 720px; width: 100%;
  padding: var(--spacing-lg); max-height: calc(100vh - 80px); overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); }
.modal-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--color-text-muted); padding: 0 4px; }
.modal-close:hover { color: var(--color-text-primary); }

.cart-item { border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: var(--spacing-md); margin-bottom: var(--spacing-md); }
.cart-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-md); flex-wrap: wrap; }

.price-breakdown { list-style: none; margin: var(--spacing-sm) 0 0; padding: 0; font-size: var(--font-size-sm); }
.price-breakdown li {
  display: flex; justify-content: space-between; gap: var(--spacing-md);
  padding: 4px 0; border-bottom: 1px dashed var(--color-border); color: var(--color-text-secondary);
}
.price-breakdown li:last-child { border-bottom: none; }
.breakdown-jump { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.breakdown-jump:hover { color: var(--color-brand-navy); }

/* --- Choice grid (radio-like cards) --- */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.choice-card {
  border: 2px solid var(--color-border); border-radius: var(--border-radius-md);
  padding: var(--spacing-md); cursor: pointer; background: var(--color-bg-card);
  position: relative; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.choice-card:hover { border-color: var(--color-brand-gold); box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
.choice-card.selected { border-color: var(--color-brand-navy); background: #f3f6fa; }
.choice-card.selected::after {
  content: "✓"; position: absolute; bottom: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--color-brand-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: var(--font-weight-bold);
}
.choice-card .title { font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: 2px; }
.choice-card .subtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.choice-card.has-thumb { padding-top: var(--spacing-sm); }
.choice-thumb { display: block; height: 90px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto var(--spacing-sm); }
.choice-price {
  display: flex; align-items: baseline; gap: 6px; margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm); border-top: 1px solid var(--color-border);
}
.choice-price-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.choice-price-value { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-brand-navy); }
.choice-price-vat { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.choice-card.selected .choice-price { border-top-color: var(--color-brand-gold); }
.badge-recommended {
  position: absolute; top: -10px; right: 10px; background: var(--color-brand-gold);
  color: var(--color-brand-navy); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  padding: 2px 8px; border-radius: 10px;
}
.badge-quote { display: inline-block; background: var(--color-warning); color: #fff; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); padding: 2px 8px; border-radius: 10px; margin-left: 6px; }

/* --- Forms --- */
label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); margin-bottom: 4px; color: var(--color-text-secondary); }
.required-star { color: var(--color-danger); font-weight: var(--font-weight-bold); }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
input[type="date"], input[type="url"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; padding: var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
  font-size: var(--font-size-base); font-family: var(--font-family-base); margin-bottom: var(--spacing-md); background: #fff;
  /* Fast hoyde: date og file har egne standardhoyder i nettleseren (38/40/42 px), og
     uten dette star feltene i samme rad med ulik hoyde. */
  height: 40px; box-sizing: border-box;
}
textarea { height: auto; min-height: 80px; }
/* Fil-feltet er en inline-kontroll med egen grunnlinje - uten display:block staar
   det noen piksler hoyere enn naboene i samme rad. */
input[type="file"] { display: block; padding: 7px var(--spacing-sm); line-height: 24px; }
/* align-items: end bunnstiller hver celle, saa feltene staar paa linje selv naar en
   etikett gaar over to linjer. Uten dette hopper feltene opp og ned. */
.form-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-md); align-items: end;
}
/* Hver celle er etikett over kontroll, med kontrollraden laast til 40 px nederst.
   Da staar feltene paa nayaktig samme linje uansett om etiketten gaar over to linjer
   eller kontrollen har sin egen standardhoyde (date og file har det). */
.form-row > div { display: grid; grid-template-rows: 1fr 40px; align-content: end; }
.form-row > div > :last-child { margin-bottom: 0; }
.form-row > div > label { align-self: end; }

/* Bredde etter innhold, ikke bare full cellebredde. En dato trenger ikke 780 piksler
   selv om det er plass - da ser skjemaet uryddig ut paa store skjermer. */
input[type="date"] { max-width: 190px; }
input[type="number"] { max-width: 200px; }
input[type="file"] { max-width: 440px; }
.felt-kort input, .felt-kort select { max-width: 220px; }
/* Negativ marg kun naar hjelpeteksten faktisk folger et skjemafelt - ellers la den seg
   OVER felt som ikke har bunnmarg, som fil-velgeren. */
.help-text { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 0; margin-bottom: var(--spacing-md); }
input + .help-text, select + .help-text, textarea + .help-text { margin-top: -10px; }

/* --- Trakt i statistikken -------------------------------------------------
   Stolpene gjor frafallet mellom stegene lesbart med ett blikk. Tallet staar ved
   siden av - en stolpe alene er et inntrykk, ikke en maaling. */
.trakt { list-style: none; margin: var(--spacing-md) 0 0; padding: 0; }
.trakt li {
  display: grid; grid-template-columns: 150px 1fr 110px; align-items: center;
  gap: var(--spacing-md); padding: 5px 0; font-size: var(--font-size-sm);
}
.trakt-navn { color: var(--color-text-secondary); }
.trakt-stolpe { background: var(--color-bg-page); border-radius: 4px; height: 18px; overflow: hidden; }
.trakt-stolpe > span { display: block; height: 100%; background: var(--color-brand-navy); border-radius: 4px; }
.trakt-tall { text-align: right; font-weight: var(--font-weight-medium); color: var(--color-brand-navy); white-space: nowrap; }
.trakt-tall small { font-weight: var(--font-weight-normal); color: var(--color-text-muted); }
@media (max-width: 640px) {
  .trakt li { grid-template-columns: 1fr 80px; }
  .trakt-stolpe { grid-column: 1 / -1; }
}

/* Postnummer trenger plass til fire siffer, poststed til et bynavn. En auto-fit-rad
   ville gitt dem like mye. */
.adresse-rad { display: grid; grid-template-columns: 140px 1fr; gap: var(--spacing-md); }
@media (max-width: 480px) { .adresse-rad { grid-template-columns: 1fr; } }
/* Poststed er laast naar det er bekreftet av oppslaget - da skal det se bekreftet ut,
   ikke ut som et felt kunden har glemt aa fylle ut. */
.adresse-rad input[readonly] {
  background: #f3f6fa; border-color: var(--color-border); color: var(--color-text-primary);
  font-weight: var(--font-weight-medium); cursor: default;
}
.help-text.felt-feil { color: var(--color-danger); }

/* Avkrysning med klikkbar etikett - hele linja er treffflate, ikke bare ruta. */
.avkrysning {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  margin-bottom: var(--spacing-md); font-weight: var(--font-weight-normal);
  color: var(--color-text-primary); font-size: var(--font-size-base);
}
.avkrysning input[type="checkbox"] {
  width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0;
  accent-color: var(--color-brand-navy); cursor: pointer;
}

/* Etiketten finnes for skjermlesere, men overskriften rett over sier det samme visuelt. */
.visuelt-skjult {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.number-stepper { display: flex; align-items: stretch; gap: 8px; max-width: 280px; margin-bottom: var(--spacing-md); }
.number-stepper input[type="number"] { margin-bottom: 0; text-align: center; -moz-appearance: textfield; }
.number-stepper input[type="number"]::-webkit-outer-spin-button,
.number-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.number-stepper-btn {
  flex-shrink: 0; width: 48px; font-size: 22px; font-weight: var(--font-weight-bold); line-height: 1;
  border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); background: #fff;
  color: var(--color-brand-navy); cursor: pointer;
}
.number-stepper-btn:hover:not(:disabled) { background: var(--color-bg-page); border-color: var(--color-brand-gold); }
.number-stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* --- Buttons --- */
.btn-primary, .btn-secondary, .btn-export {
  border-radius: var(--border-radius-sm); padding: var(--spacing-sm) var(--spacing-lg);
  font-weight: var(--font-weight-bold); cursor: pointer; font-size: var(--font-size-base); border: none;
}
.btn-primary { background: var(--color-brand-gold); color: var(--color-brand-navy); }
.btn-primary:hover { background: var(--color-brand-gold-dark); }
.btn-primary:disabled { background: #ddd; color: #999; cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--color-brand-navy); border: 1.5px solid var(--color-brand-navy); }
.btn-secondary:hover { background: var(--color-brand-navy); color: #fff; }
.btn-export { background: #fff; color: var(--color-brand-navy); border: 1.5px solid var(--color-brand-navy); font-weight: var(--font-weight-medium); }
.btn-export:hover { background: var(--color-brand-navy); color: #fff; }
.actions-row { display: flex; justify-content: space-between; margin-top: var(--spacing-lg); gap: var(--spacing-sm); }

/* --- Product summary card --- */
.summary-card { border: 2px solid var(--color-brand-navy); border-radius: var(--border-radius-md); padding: var(--spacing-lg); }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm) var(--spacing-lg); margin: var(--spacing-md) 0; }
.summary-grid dt { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.summary-grid dd { margin: 0 0 var(--spacing-sm); font-weight: var(--font-weight-medium); }
.price-tag { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-brand-navy); }
.price-tag small { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); color: var(--color-text-muted); display: block; }
.quote-notice { background: #fff8e1; border: 1px solid var(--color-warning); color: #7a5900; border-radius: var(--border-radius-sm); padding: var(--spacing-sm) var(--spacing-md); margin: var(--spacing-md) 0; font-size: var(--font-size-sm); }

/* --- Tables --- */
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
th {
  background: var(--color-brand-navy); color: var(--color-text-light);
  padding: var(--spacing-sm) var(--spacing-md); text-align: left;
  position: sticky; top: var(--h-klebrig, 140px); z-index: 10;
}
td { padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border); }
tbody tr:nth-child(even) { background: var(--color-bg-page); }
tr:hover td { background: rgba(241, 180, 52, 0.14); }
/* Ingen indre scroll: tabellen vokser, og siden scrolles. To scrollfelt oppa
   hverandre var forvirrende, og en indre overflow hadde dessuten brutt de klebrige
   tabellhodene - sticky virker kun mot naermeste scrollende forelder.
   Under 1200 px faar den vannrett scroll tilbake som nodloesning. */
.table-scroll { border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); }
/* Rammen folger tabellen naar den hugger innholdet - ellers star en tom ramme
   ut til hoyre for siste kolonne. */
.table-scroll:has(.table-kompakt) { width: fit-content; max-width: 100%; }
@media (max-width: 1200px) {
  .table-scroll { overflow-x: auto; }
  th { position: static; }
  /* Paa smale skjermer brytes noekkeltallene til flere rader, og blokken ville spist
     over 40 % av hoyden. Da er det bedre at den scroller med. */
  .admin-topp { position: static; }
}

/* Tabeller med mange kolonner - ABUS-prislista har 13, maaltabellen enda flere.
   Strammere celler og tall som ikke brytes gjor at de faar plass uten sidescroll.
   Overflowen over beholdes som sikkerhetsnett paa smale skjermer. */
/* width: auto - med 100 % ble overskuddsplassen fordelt mellom kolonnene, og
   tabellen fikk store tomrom mellom smale tall. Na hugger kolonnene innholdet. */
.table-kompakt { width: auto; font-size: var(--font-size-sm); }
.table-kompakt th, .table-kompakt td { padding: 7px 12px; white-space: nowrap; }
.table-kompakt td:first-child, .table-kompakt th:first-child { padding-left: var(--spacing-md); }

/* --- Admin --- */
.login-box { max-width: 380px; margin: 80px auto; }
/* Noekkeltall og faner staar stille mens innholdet scrolles - som en blokk, ikke hver
   for seg. Trenger ugjennomsiktig bakgrunn, ellers ville radene synes gjennom.
   Hoyden varierer (kortene brytes paa smale skjermer), saa den maales i JS. */
.admin-topp {
  position: sticky; top: var(--h-topbar); z-index: 30;
  background: var(--color-bg-page);
  padding-top: var(--spacing-sm);
  /* Dekker bredden av .page-wrap sin padding, sa ingenting glipper ut i kanten. */
  margin: 0 calc(-1 * var(--spacing-lg)); padding-left: var(--spacing-lg); padding-right: var(--spacing-lg);
}
.tabs {
  display: flex; gap: 4px; margin-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-border);
}
.tabs button { background: none; border: none; padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-size-base); cursor: pointer; color: var(--color-text-secondary); border-bottom: 3px solid transparent; }
.tabs button.active { color: var(--color-brand-navy); font-weight: var(--font-weight-bold); border-color: var(--color-brand-gold); }
.tabs button:disabled { color: var(--color-text-muted); opacity: 0.5; cursor: not-allowed; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.rates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-md); }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.stat-card { background: var(--color-brand-navy); color: #fff; border-radius: var(--border-radius-md); padding: var(--spacing-md); text-align: center; }
.stat-card .value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-brand-gold); }
.stat-card .label { font-size: var(--font-size-xs); }
.lead-row { cursor: pointer; }
.lead-detail { display: none; background: #f9fafb; }
.lead-detail.open { display: table-row; }
/* Detaljraden er en hel utfoldet visning inne i en celle, ikke en tabellcelle med et
   tall. Uten dette arver innholdet white-space: nowrap fra .table-kompakt td, og lange
   verdier - strømtilførsel, flensbredde, adresser - renner ut over nabokolonnen i
   stedet for å brytes. */
.lead-detail > td { white-space: normal; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.pill.ok { background: #e3f2e6; color: var(--color-success); }
.pill.quote { background: #fff3cd; color: #7a5900; }
.pill-toggle {
  display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold); border: none; cursor: pointer; font-family: var(--font-family-base);
}
.pill-toggle.new { background: #e0ecfb; color: #1a4fa0; }
.pill-toggle.new:hover { background: #cbe0f8; }
.pill-toggle.in_progress { background: #fff3cd; color: #7a5900; }
.pill-toggle.in_progress:hover { background: #ffe9a3; }
.pill-toggle.done { background: #e3f2e6; color: var(--color-success); }
.pill-toggle.done:hover { background: #cdead2; }
.pill-toggle.archive { background: var(--color-bg-page); color: var(--color-text-secondary); }
.pill-toggle.archive:hover { background: #e2e2e2; }
.pill-toggle.danger { background: #fdecea; color: var(--color-danger); margin-left: 6px; }
.pill-toggle.danger:hover { background: #fad4d0; }

/* --- Brosjyrebanner (kompakt infolinje over konfiguratoren) --- */
.brochure-banner { display: flex; gap: var(--spacing-md); align-items: center; flex-wrap: wrap; padding: var(--spacing-md) var(--spacing-lg); }
.brochure-banner img { width: 56px; border-radius: var(--border-radius-sm); box-shadow: var(--shadow-card); display: block; }
.brochure-banner .help-text { margin: 2px 0 0; }

/* --- Løpende prisoppsummering nederst i hvert steg --- */
.price-footer { border-left: 4px solid var(--color-brand-gold); position: relative; }
.price-footer .price-footer-label {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px;
}
.price-footer .price-footer-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-brand-navy); }

/* Mens en ny pris hentes staar den forrige igjen, nedtonet. Kun gjennomsiktighet endres
   - ingen skjulte eller tomme elementer - saa hoyden staar stille og innholdet under
   ikke hopper for hvert tastetrykk. */
.price-footer.oppdaterer .price-footer-value,
.price-footer.oppdaterer .price-breakdown { opacity: 0.45; transition: opacity 0.12s; }
/* «oppdaterer …» staar UTENFOR tekstflyten. Inne i overskriften gjorde det at linjen
   brakk i to, og kortet vokste 36 px hver gang en pris ble hentet - nettopp hoppingen
   nedtoningen skulle bli kvitt. */
.price-footer-oppdaterer {
  position: absolute; top: var(--spacing-lg); right: var(--spacing-lg);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-normal);
  letter-spacing: normal; text-transform: none; color: var(--color-text-muted);
}
.price-footer-venter {
  font-size: var(--font-size-base); font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}
.price-footer-feil { font-size: var(--font-size-base); color: var(--color-danger); }

/* --- Footer --- */
.site-footer { background: var(--color-brand-navy); color: rgba(255,255,255,0.75); margin-top: auto; }
.site-footer .footer-inner { max-width: 1200px; margin: 0 auto; padding: var(--spacing-md) var(--spacing-lg); font-size: var(--font-size-sm); text-align: center; }
.site-footer a { color: var(--color-brand-gold); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .summary-grid { grid-template-columns: 1fr; }
  .stepper .step { min-width: 70px; }
}

/* ============================================================
   Måltegninger (js/maal-viewer.js + js/dimensions-view.js)
   ============================================================ */
.maal-layout { display: flex; gap: var(--spacing-lg); align-items: flex-start; }
.maal-drawing-col { flex: 1 1 46%; min-width: 0; position: sticky; top: 80px; } /* under sticky toppbanner */
.maal-table-col { flex: 1 1 54%; min-width: 0; }
@media (max-width: 900px) {
  .maal-layout { flex-direction: column; }
  .maal-drawing-col { position: static; width: 100%; }
}

.maal-toggle-row { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.maal-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; width: fit-content; }
.maal-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.maal-switch-track {
  position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--color-border);
  transition: background 0.15s; flex-shrink: 0;
}
.maal-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform 0.15s;
}
.maal-switch input:checked + .maal-switch-track { background: var(--color-brand-navy); }
.maal-switch input:checked + .maal-switch-track::after { transform: translateX(18px); }
.maal-switch-label { font-weight: var(--font-weight-medium); color: var(--color-text-primary); }

.topbar .topbar-user {
  font-size: var(--font-size-sm); color: rgba(255,255,255,0.75);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar button.admin-link {
  background: transparent; font-family: var(--font-family-base); cursor: pointer; line-height: normal;
}
@media (max-width: 640px) { .topbar .topbar-user { display: none; } }

/* Logg ut skal ikke se ut som navigasjonslenkene ved siden av. */
.topbar .admin-link.logg-ut {
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.78);
  margin-left: 4px;
}
.topbar .admin-link.logg-ut:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* Tilgangsstyring */
.tilgang-nyrad {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto;
  gap: var(--spacing-md);
  align-items: end;
  margin-bottom: var(--spacing-sm);
}
.tilgang-nyrad input, .tilgang-nyrad select { margin-bottom: 0; }
#tilgang-table select { margin-bottom: 0; padding: 6px 8px; font-size: var(--font-size-sm); }
@media (max-width: 640px) {
  .tilgang-nyrad { grid-template-columns: 1fr; align-items: stretch; }
}

/* --- Fremheving av bestillingsskjemaet ---------------------------------------
   Etter at en talje er lagt i handlekurven scrolles skjemaet fram og feltene far
   et kort glimt. Uten dette havnet kunden over kurven og sa ikke at skjemaet under
   er det som faktisk sender bestillingen. */
#bestillingsskjema {
  /* Toppbaren er sticky - uten dette havner overskriften under den ved scrolling. */
  scroll-margin-top: 80px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  border: 1px solid transparent;
}
#bestillingsskjema.fremhevet {
  animation: skjema-glimt 2s ease-out;
}
#bestillingsskjema.fremhevet input,
#bestillingsskjema.fremhevet textarea {
  animation: felt-glimt 2s ease-out;
}
@keyframes skjema-glimt {
  0%, 15% { box-shadow: 0 0 0 3px rgba(241, 180, 52, 0.55); border-color: var(--color-brand-gold); }
  100%    { box-shadow: var(--shadow-card); border-color: transparent; }
}
@keyframes felt-glimt {
  0%, 15% { border-color: var(--color-brand-gold); background: #fffaf0; }
  100%    { border-color: var(--color-border); background: #fff; }
}

/* Blinking kan vaere ubehagelig eller utlose reaksjoner. Da star rammen stille i stedet. */
@media (prefers-reduced-motion: reduce) {
  #bestillingsskjema.fremhevet { animation: none; border-color: var(--color-brand-gold); }
  #bestillingsskjema.fremhevet input,
  #bestillingsskjema.fremhevet textarea { animation: none; }
}

/* Steg foran kunden som er utfylt og dermed klikkbare. Ikke merket «ferdig» - de er
   ikke passert - men de skal se ut som noe man kan trykke paa. */
.stepper .step.aapen { color: var(--color-text-secondary); border-bottom-color: #c9ced6; }
.stepper .step.aapen .step-num { border-color: #c9ced6; color: var(--color-text-secondary); }
.stepper .step.clickable:hover { color: var(--color-brand-navy); border-bottom-color: var(--color-brand-gold); }

/* Behandlingsstatus settes fra nedtrekk, ikke ved a klikke gjennom en syklus.
   Fargen folger statusen, som de gamle pillene, sa lista fortsatt kan skannes raskt. */
.status-velger {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 4px 26px 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-base);
  cursor: pointer;
  margin-bottom: 0;
  width: auto;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.status-velger.new        { background-color: #e0ecfb; color: #1a4fa0; }
.status-velger.in_progress{ background-color: #fff3cd; color: #7a5900; }
.status-velger.done       { background-color: #e3f2e6; color: var(--color-success); }
.status-velger:hover      { border-color: var(--color-border); }
.status-velger:focus-visible { outline: 2px solid var(--color-brand-gold); outline-offset: 1px; }

/* Sperret valg i nedtrekket skal se sperret ut. */
.status-velger option:disabled { color: var(--color-text-muted); }

/* Kampanjebanner over konfiguratoren. Bildet bestemmer hoyden - da slipper admin
   aa treffe et bestemt format, og et hvilket som helst banner ser riktig ut. */
.kampanje { display: block; margin-bottom: var(--spacing-md); line-height: 0; }
a.kampanje { cursor: pointer; }
.kampanje-bilde {
  display: block; width: 100%; height: auto;
  border-radius: var(--border-radius-md); box-shadow: var(--shadow-card);
}
a.kampanje:hover .kampanje-bilde { box-shadow: var(--shadow-elevated); }

/* --- Produktgalleri nederst paa kundesiden ---------------------------------
   Hvit flate i full bredde under den graa konfiguratoren, med innholdet begrenset
   til samme bredde som resten av siden. Kortene er like hoye uansett bildeformat:
   bildet faar en fast hoyde og beskjaeres, saa raden ikke blir taggete naar admin
   laster opp bilder i ulike stoerrelser. */
.produktgalleri { background: var(--color-bg-card); border-top: 1px solid var(--color-border); }
.produktgalleri-inner { max-width: 900px; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-lg); }
.produktgalleri h2 { margin-bottom: var(--spacing-xs); }
.produktgalleri .lead { margin-bottom: var(--spacing-lg); }
.produktgrid {
  display: grid; gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.produktkort {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--color-border); border-radius: var(--border-radius-md);
  overflow: hidden; background: var(--color-bg-card);
}
.produktkort img { display: block; width: 100%; height: 170px; object-fit: cover; }
.produktkort-tittel {
  padding: var(--spacing-sm) var(--spacing-md); font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy); font-size: var(--font-size-sm);
}
a.produktkort { transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
a.produktkort:hover {
  border-color: var(--color-brand-gold); box-shadow: var(--shadow-elevated); transform: translateY(-2px);
}

/* Forhaandsvisningen i Innstillinger viser galleriet slik kunden faar se det, paa
   samme hvite flate. Rammen gjor det tydelig at det er en visning, ikke selve siden. */
.produkt-forhandsvisning {
  border: 1px dashed var(--color-border); border-radius: var(--border-radius-md);
  background: var(--color-bg-card); margin-top: var(--spacing-sm);
}
.produkt-forhandsvisning .produktgalleri-inner { padding: var(--spacing-lg); max-width: none; }
.produkt-forhandsvisning .produktgalleri-inner h2 { font-size: var(--font-size-lg); }
.produkt-miniatyr {
  display: block; width: 90px; height: 56px; object-fit: cover;
  border-radius: var(--border-radius-sm); border: 1px solid var(--color-border);
}
.produkt-valgt-bilde {
  display: block; max-width: 260px; margin: var(--spacing-sm) 0 var(--spacing-md);
  border-radius: var(--border-radius-md); border: 1px solid var(--color-border);
}
.sortering-felt { width: 90px; margin-bottom: 0; }
/* Raden som redigeres skal vaere lett aa finne igjen naar blikket gaar fra skjemaet
   over og ned i tabellen. */
.rad-redigeres > td { background: #fff8e1; }
.rad-redigeres > td:first-child { box-shadow: inset 3px 0 0 var(--color-brand-gold); }
.form-row.produkt-rad { grid-template-columns: minmax(220px, 2fr) minmax(200px, 2fr) 130px minmax(240px, 1fr); }
@media (max-width: 1100px) {
  .form-row.produkt-rad { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* Kampanjeadministrasjon */
.kampanje-forhandsvisning {
  display: block; max-width: 100%; margin: var(--spacing-sm) 0 var(--spacing-md);
  border-radius: var(--border-radius-md); border: 1px solid var(--color-border);
}
.kampanje-miniatyr {
  display: block; width: 110px; height: 40px; object-fit: cover;
  border-radius: var(--border-radius-sm); border: 1px solid var(--color-border);
}
.kampanje-status {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); white-space: nowrap;
}
.kampanje-status.aktiv    { background: #e3f2e6; color: var(--color-success); }
.kampanje-status.planlagt { background: #e0ecfb; color: #1a4fa0; }
.kampanje-status.slutt    { background: var(--color-bg-page); color: var(--color-text-muted); }
#k-bilde { margin-bottom: 4px; }

/* Prisendringer skal vaere lette aa se: opp er det som koster kunden mer. */
.pris-opp { color: var(--color-danger); font-weight: var(--font-weight-bold); white-space: nowrap; }
.pris-ned { color: var(--color-success); font-weight: var(--font-weight-bold); white-space: nowrap; }
.kampanje-status.feil { background: #fdecea; color: var(--color-danger); }

/* --- Innloggingsskjermen ------------------------------------------------------
   Et merkevaremoment, ikke et skjema pa gra bakgrunn. Navy flate, logoen i hvitt
   og gull som eneste aksent - samme uttrykk som resten av IKN. */
/* En display-regel i CSS vinner over hidden-attributtet fra nettleseren. Uten dette
   ble «Logg ut» staende synlig paa innloggingsskjermen selv med hidden satt. */
[hidden] { display: none !important; }

.login-skjerm {
  position: fixed; inset: 0;
  background: var(--color-brand-navy);
  display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-lg);
  overflow-y: auto;
  z-index: 60; /* toppbaren er skjult mens denne vises */
}
.login-kort {
  background: var(--color-bg-card);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  padding: var(--spacing-2xl) var(--spacing-xl);
  max-width: 420px; width: 100%;
  text-align: center;
  border-top: 4px solid var(--color-brand-gold);
}
/* Logoen er hvit og ville forsvunnet pa hvitt kort - navy flate bak den. */
.login-logo {
  display: block; height: 38px; width: auto; margin: 0 auto var(--spacing-lg);
  background: var(--color-brand-navy);
  padding: 14px 20px; border-radius: var(--border-radius-md);
  box-sizing: content-box;
}
.login-merkelapp {
  display: block; font-size: 0.7rem; font-weight: var(--font-weight-extrabold);
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--color-brand-gold); margin-bottom: 6px;
}
.login-kort h1 {
  font-size: var(--font-size-2xl); margin: 0 0 var(--spacing-sm);
}
.login-ingress {
  color: var(--color-text-secondary); margin: 0 0 var(--spacing-lg); line-height: 1.6;
}
.login-feil {
  color: var(--color-danger); font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md); min-height: 0;
}
.login-feil:not(:empty) {
  background: #fdecea; border-radius: var(--border-radius-sm);
  padding: 10px 14px; text-align: left;
}
.login-knapp {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 0.85rem 1.5rem; font-size: var(--font-size-base);
}
.ms-rutenett { width: 18px; height: 18px; flex-shrink: 0; }
.login-hjelp {
  margin: var(--spacing-lg) 0 0; font-size: var(--font-size-sm);
  color: var(--color-text-muted); line-height: 1.7;
}
.login-hjelp a { color: var(--color-brand-navy); }

@media (max-width: 480px) {
  .login-kort { padding: var(--spacing-xl) var(--spacing-md); }
}

/* Kampanjeskjemaet: navn faar plassen, resten tar det de trenger. Uten eksplisitte
   spor ville auto-fit gitt datofeltene like mye plass som navnefeltet. */
.form-row.kampanje-rad { grid-template-columns: minmax(220px, 2fr) minmax(200px, 2fr) 190px 190px minmax(240px, 1fr); }
.form-row.prisliste-rad { grid-template-columns: 260px minmax(260px, 1fr); justify-content: start; }
@media (max-width: 1100px) {
  .form-row.kampanje-rad, .form-row.prisliste-rad { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* Filtrene ligger i kolonneoverskriftene i stedet for som store felt over tabellen.
   De skal ikke ha skjemastilene - der er 40 px hoyde og hvit bakgrunn riktig, her ville
   det gjort tabellhodet dobbelt saa hoyt og gitt hvit tekst paa hvitt felt.
   Selektoren maa naevne input: input[type="text"] i skjemastilene veier tyngre enn
   klassen alene, og vant foer dette. */
input.kolonnefilter {
  display: block; width: 100%; margin: 5px 0 0;
  height: 24px; padding: 2px 6px; box-sizing: border-box;
  font-size: var(--font-size-xs); font-family: var(--font-family-base);
  font-weight: var(--font-weight-normal);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--border-radius-sm);
  background: rgba(255, 255, 255, 0.12); color: #fff;
}
input.kolonnefilter:hover { background: rgba(255, 255, 255, 0.18); }
input.kolonnefilter:focus {
  outline: 2px solid var(--color-brand-gold); outline-offset: 0;
  background: #fff; color: var(--color-text-primary);
}
/* Feltet staar paa den morkebla tabellraden, saa hjelpeteksten maa lysnes -
   nettleserens standard graa forsvinner mot bakgrunnen. */
input.kolonnefilter::placeholder { color: rgba(255, 255, 255, 0.6); }
input.kolonnefilter:focus::placeholder { color: var(--color-text-secondary); }
/* Holder kolonner uten filter like hoye som de med. */
.kolonnefilter-tom { display: block; height: 24px; margin-top: 5px; }
th { vertical-align: top; }

/* Sorteringsknappen ER kolonneoverskriften. Ser ut som tekst, men er en knapp -
   da faar den tastaturfokus og skjermlesere forstar at den kan trykkes. */
.kol-sorter {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; font: inherit; font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.kol-sorter:hover { color: var(--color-brand-gold); }
.kol-sorter.aktiv { color: var(--color-brand-gold); }
.kol-sorter:focus-visible { outline: 2px solid var(--color-brand-gold); outline-offset: 2px; }
.kol-pil { margin-left: 5px; font-weight: var(--font-weight-normal); }
.kol-tittel-fast { display: block; font-weight: var(--font-weight-bold); white-space: nowrap; }

/* Dommen over en tolket prisliste: blir prisene de samme som for?
   Den skal vaere umulig aa overse, og umulig aa forveksle med hverandre - derfor
   farge OG overskrift, ikke bare farge. */
.pris-dom {
  margin: var(--spacing-md) 0; padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-md); border-left: 5px solid;
}
.pris-dom h3 { margin: 0 0 6px; font-size: var(--font-size-lg); }
.pris-dom p { margin: 4px 0; }
.pris-ok { background: #eef7ee; border-left-color: var(--color-success); }
.pris-ok h3 { color: #1d6f2b; }
.pris-avvik { background: #fdf4e3; border-left-color: var(--color-brand-gold); }
.pris-avvik h3 { color: #8a5a00; }

/* Gammel pris strykes, ny staar uthevet - to tall ved siden av hverandre uten
   forklaring er lett aa lese feil vei. */
.pris-foer { text-decoration: line-through; color: var(--color-text-secondary); }
.pris-etter { font-weight: var(--font-weight-bold); }
.pris-rad-endret td { background: #fdf4e3; }

/* Kontrollene som holder: en grønn linje tar lite plass og sier at noen faktisk sjekket.
   Brister de, overtar .pris-avvik-blokken. */
.avstemming-ok {
  margin: var(--spacing-sm) 0; color: #1d6f2b; font-weight: var(--font-weight-medium);
}

/* Avhukingen ligger rett over Godkjenn-knappen, ikke oppe i avviksboksen - den som
   skal ta ansvaret, skal lese setningen i det hen strekker seg etter knappen. */
.avstemming-bekreft {
  display: block; margin: var(--spacing-md) 0; padding: var(--spacing-sm) var(--spacing-md);
  background: #fdf4e3; border-left: 4px solid var(--color-brand-gold);
  border-radius: var(--border-radius-sm); cursor: pointer;
}
.avstemming-bekreft input { margin-right: 8px; }

.tillegg-tittel { margin: var(--spacing-lg) 0 6px; font-size: var(--font-size-base); }
.tillegg-tittel .help-text { font-weight: var(--font-weight-normal); }
/* Kjettingsamlerne hører til raden over, ikke til tabellen - derfor innrykk og egen
   bakgrunn, så de ikke leses som søsken av seriene. */
.tillegg-underrad > td { padding: 0 0 0 var(--spacing-lg); background: var(--color-bg-subtle, #f7f7f7); }
.tillegg-underrad table { margin: 6px 0; }

.pl-sammendrag {
  cursor: pointer; font-weight: var(--font-weight-bold); color: var(--color-brand-navy);
  padding: var(--spacing-sm) 0;
}