/* Dronekontroll – lyst tema som standard, mørkt som valg (Konto), mobil først.
   Temaet settes paa <html data-tema="mork"> av et lite skript i <head>, foer
   CSS-en tegnes, saa siden ikke blinker lyst foer den blir moerk. */
:root {
  /* color-scheme styrer nettleserens egne kontroller (kalenderikon, nedtrekk,
     rullefelt). Den MAA foelge temaet, ellers forsvinner datoikonet. */
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #f1f4f8;
  --line: #e3e6eb;
  --text: #161a22;
  --muted: #5d6675;
  --accent: #1769c2;
  --accent-2: #124e8f;        /* lenker, overskrifter, tall – maa lese paa hvitt */
  --on-accent: #ffffff;       /* tekst paa aksentflater */
  --accent-soft: rgba(23,105,194,.08);
  --hover: rgba(0,0,0,.025);
  --ok: #1d7f48;
  --warn: #a16207;
  --bad: #c62828;
  --info: #1769c2;
  --tg0: #2e7d4f; --tg1: #b58f16; --tg2: #d3691c; --tg3: #c62828; --tgiu: #6b7280;
  --radius: 8px;
  --tap: 44px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-tema="mork"] {
  color-scheme: dark;
  --bg: #0f1115;
  --panel: #151821;
  --panel-2: #1c2030;
  --line: #252a36;
  --text: #e6e9ef;
  --muted: #9aa3b2;
  --accent: #7cc4ff;
  --accent-2: #b5dcff;
  --on-accent: #0f1115;
  --accent-soft: rgba(124,196,255,.10);
  --hover: rgba(255,255,255,.03);
  --ok: #4ade80;
  --warn: #facc15;
  --bad: #f87171;
  --info: #7cc4ff;
  --tgiu: #4b5563;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.45; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.35rem; } h2 { font-size: 1.1rem; color: var(--accent-2); } h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.grow { flex: 1 1 auto; }
.right { margin-left: auto; }
.center { text-align: center; }

/* ---------- layout */
#app { min-height: 100vh; display: flex; flex-direction: column; }
header.topbar { position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--line); padding: 0 .75rem; height: 52px; display: flex; align-items: center; gap: .75rem; }
header.topbar .brand { font-weight: 700; color: var(--accent); white-space: nowrap; }
header.topbar nav { display: none; gap: .25rem; }
header.topbar #user-email { display: none; }
@media (min-width: 900px) { header.topbar #user-email { display: inline; } }
header.topbar nav a { padding: .45rem .7rem; border-radius: var(--radius); color: var(--text); min-height: 36px; display: inline-flex; align-items: center; }
header.topbar nav a:hover { background: var(--panel-2); text-decoration: none; }
/* Aktiv side skal synes paa avstand: aksentflate, ikke samme graa som hover */
header.topbar nav a.active, header.topbar nav a.active:hover { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
main { flex: 1; padding: .75rem; padding-bottom: calc(var(--tap) + 1.5rem); max-width: 1200px; width: 100%; margin: 0 auto; }
nav.bottombar { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--tap) + 8px); background: var(--panel); border-top: 1px solid var(--line); display: flex; z-index: 20; }
nav.bottombar a, nav.bottombar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-size: .7rem; min-height: var(--tap); gap: 2px; }
nav.bottombar button { background: none; border: 0; border-radius: 0; padding: 0; font: inherit; font-size: .7rem; cursor: pointer; }
nav.bottombar a .ico, nav.bottombar button .ico { font-size: 1.15rem; line-height: 1; }
nav.bottombar a.active, nav.bottombar button.active { color: var(--accent); font-weight: 600; box-shadow: inset 0 3px 0 var(--accent); background: var(--panel-2); }
/* «Mer»-arket ligger rett over bunnlinja */
.mer-meny { position: fixed; inset: 0; bottom: calc(var(--tap) + 8px); z-index: 19; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: flex-end; }
.mer-meny.hidden { display: none; }
.mer-ark { background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; min-width: 60%; padding: .35rem 0; }
.mer-ark a { display: flex; align-items: center; min-height: var(--tap); padding: 0 1.1rem; color: var(--text); }
.mer-ark a.hidden { display: none; }
.mer-ark a:hover { background: var(--panel-2); text-decoration: none; }
.mer-ark a.active { color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); background: var(--panel-2); }
@media (min-width: 900px) {
  header.topbar nav { display: flex; }
  nav.bottombar, .mer-meny { display: none !important; }
  main { padding: 1.25rem; padding-bottom: 2rem; }
}

/* ---------- komponenter */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem; margin-bottom: .75rem; }
.card h2 { margin-top: 0; }
.grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .75rem; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .75rem; }
.kpi .v { font-size: 1.4rem; font-weight: 700; color: var(--accent-2); }
.kpi .l { font-size: .75rem; color: var(--muted); }

button, .btn { font-family: var(--font); font-size: .9rem; min-height: var(--tap); padding: 0 .9rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
button:hover, .btn:hover { border-color: var(--accent); text-decoration: none; }
button.primary, .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
button.danger { border-color: var(--bad); color: var(--bad); }
button.ok { border-color: var(--ok); color: var(--ok); }
button.sm, .btn.sm { min-height: 36px; font-size: .8rem; padding: 0 .6rem; }
button:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea { font-family: var(--font); font-size: .95rem; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .6rem; min-height: var(--tap); width: 100%; }
textarea { min-height: 80px; resize: vertical; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }
/* Hele datofeltet skal se ut som noe man trykker paa, ikke bare ikonet */
input[type="date"], input[type="datetime-local"], input[type="month"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
.field { margin-bottom: .6rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: .5rem .75rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span2 { grid-column: span 2; } }

.badge { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.accent { border-color: var(--accent); color: var(--accent-2); }
.badge.ok { border-color: var(--ok); color: var(--ok); }
.badge.warn { border-color: var(--warn); color: var(--warn); }
.badge.bad { border-color: var(--bad); color: var(--bad); }
.badge.info { border-color: var(--info); color: var(--info); }
.tg { display: inline-block; min-width: 3.2em; text-align: center; padding: .1rem .4rem; border-radius: 4px; font-weight: 700; font-size: .75rem; color: #fff; }
.tg.TG0 { background: var(--tg0); } .tg.TG1 { background: var(--tg1); color: #111; } .tg.TG2 { background: var(--tg2); } .tg.TG3 { background: var(--tg3); } .tg.TGIU, .tg.none { background: var(--tgiu); }

table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: var(--hover); }
.table-wrap { overflow-x: auto; }

.list { display: flex; flex-direction: column; gap: .5rem; }
.item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; display: flex; gap: .6rem; align-items: center; min-height: var(--tap); color: var(--text); }
.item:hover { border-color: var(--accent); text-decoration: none; }
.item .nr { color: var(--accent); font-weight: 700; min-width: 3.2em; }
.item .title { font-weight: 600; }
.item .sub { color: var(--muted); font-size: .78rem; }
.item .meta { margin-left: auto; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: .75rem; }
.tabs a { padding: .6rem .8rem; color: var(--muted); white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.tabs a:hover { text-decoration: none; color: var(--text); }

.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.filters select, .filters input { width: auto; min-width: 140px; }
.filters .bryter { display: flex; align-items: center; gap: .4rem; min-height: var(--tap);
  padding: 0 .6rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--muted); cursor: pointer; white-space: nowrap; }
.filters .bryter:hover { border-color: var(--accent); color: var(--text); }
.filters .bryter input { min-width: 0; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.filters .bryter:has(input:checked) { color: var(--text); border-color: var(--accent); }

/* Seksjoner naar lista grupperes paa kommune */
.kommune { display: flex; flex-direction: column; gap: .5rem; }
.kommune + .kommune { margin-top: 1.1rem; }
.kommune > h3 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .1rem;
  color: var(--accent-2); border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.kommune > h3 .small { margin-left: auto; font-size: .74rem; font-weight: 400; }

.map-img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }

/* bilder */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .4rem; }
.photo-grid.stor { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.photo-grid .ph { position: relative; aspect-ratio: 4/3; background: var(--panel-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; }
.photo-grid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid .ph .tag { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff; font-size: .65rem; padding: 1px 5px; border-radius: 3px; }
.photo-grid .ph .rep { position: absolute; right: 4px; top: 4px; background: var(--accent); color: var(--on-accent); font-size: .65rem; padding: 1px 5px; border-radius: 3px; font-weight: 700; }
.photo-grid .ph.selected { outline: 2px solid var(--accent); }

.gjennomgang { gap: .6rem; align-items: center; flex-wrap: wrap; }
.gjennomgang-bar { flex: 1; min-width: 120px; max-width: 320px; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.gjennomgang-bar > div { height: 100%; border-radius: 999px; transition: width .2s; }
.gjennomgang-ferdig { font-weight: 700; color: var(--ok); border: 2px solid var(--ok); padding: .15rem .7rem; border-radius: 999px; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 50; display: flex; flex-direction: column; }
.lightbox .img { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: .5rem; position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; }
.lightbox .lb-teller { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(0,0,0,.65); color: #fff; font-weight: 700; font-size: 1.05rem; padding: .3rem .8rem; border-radius: 999px; pointer-events: none; }
.lightbox .img.zoomet { cursor: grab; }
.lightbox .img.zoomet:active { cursor: grabbing; }
.lightbox .img img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.lightbox .panel { background: var(--panel); border-top: 1px solid var(--line); padding: .6rem .75rem; max-height: 45vh; overflow: auto; }
@media (min-width: 900px) { .lightbox { flex-direction: row; } .lightbox .panel { width: 380px; max-height: none; border-top: 0; border-left: 1px solid var(--line); } }

/* import */
.drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 1.5rem; text-align: center; color: var(--muted); cursor: pointer; }
.drop.over { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
.progress { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); width: 0; transition: width .2s; }
/* Ukjent lengde (forberedelser): en bit som glir frem og tilbake */
.progress.venter > div { width: 35%; transition: none; animation: venter 1.1s ease-in-out infinite alternate; }
@keyframes venter { from { margin-left: 0; } to { margin-left: 65%; } }
@media (prefers-reduced-motion: reduce) { .progress.venter > div { animation: none; width: 100%; opacity: .45; } }
.group { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; margin-bottom: .5rem; background: var(--panel); }
.group .thumbs { display: flex; gap: .3rem; overflow-x: auto; padding: .3rem 0; }
/* Grupper som GPS ikke kunne avgjore, eller som mangler prosjekt */
.group.maa-sees { border-color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
.group .row + .row { margin-top: .4rem; }
.group .row { flex-wrap: wrap; }
.group .thumbs.alle { flex-wrap: wrap; overflow-x: visible; }
.group .th { position: relative; display: inline-block; flex: none; line-height: 0; }
.group .th.utl-gps img { outline: 3px solid #d93a2b; outline-offset: -3px; }
.group .th.utl-ut img { outline: 3px dashed #e8a200; outline-offset: -3px; }
.group .th select.flytt { position: absolute; right: 2px; bottom: 2px; width: auto; max-width: 3.2rem; padding: 0 .1rem; font-size: .7rem; line-height: 1.3; opacity: .55; }
.group .th:hover select.flytt, .group .th select.flytt:focus { opacity: 1; }
.group .thumbs img { height: 64px; border-radius: 3px; border: 1px solid var(--line); }

/* Knappene i slippfeltet - tre veier inn, og paa telefon maa de vaere store
   nok til aa treffes med tommelen mens man staar ute */
.drop .valg { justify-content: center; margin-top: .8rem; }
.drop .valg button { min-height: var(--tap); }
.drop .valg button.primary { border-color: var(--accent); }
/* Vis alle miniatyrene i en stor gruppe - resten dekodes foerst her */
.group .mer { margin-top: .2rem; }
/* Tips-boks: raad, ikke en feil, saa den skal ikke rope */
.hint { margin-top: .8rem; padding: .6rem .8rem; border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: var(--radius); color: var(--muted); font-size: .82rem; line-height: 1.45; }
.hint strong { color: var(--text); }

/* sjekkliste */
.check { display: flex; gap: .6rem; align-items: center; min-height: var(--tap); padding: .3rem .4rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.check.done { color: var(--muted); text-decoration: line-through; }

/* login */
.login { max-width: 380px; margin: 12vh auto; }

/* toasts */
#toasts { position: fixed; top: 60px; right: 12px; z-index: 100; display: flex; flex-direction: column; gap: .4rem; }
.toast { background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--info); padding: .6rem .8rem; border-radius: var(--radius); opacity: 0; transform: translateY(-6px); transition: all .25s; max-width: 320px; }
.toast.show { opacity: 1; transform: none; }
.toast-ok { border-left-color: var(--ok); } .toast-error { border-left-color: var(--bad); } .toast-warn { border-left-color: var(--warn); }

/* ---------- rapport (lys, A4) */
body.report-mode { background: #fff; color: #111; }
.report { max-width: 210mm; margin: 0 auto; background: #fff; color: #111; padding: 14mm; font-family: Arial, Helvetica, sans-serif; font-size: 10.5pt; line-height: 1.4; }
.report h1 { font-size: 22pt; color: #1f3864; margin: 0 0 .3rem; }
.report h2 { font-size: 14pt; color: #1f3864; margin: 1.2rem 0 .5rem; border-bottom: 2px solid #d9e1f2; padding-bottom: .2rem; }
.report h3 { font-size: 11.5pt; margin: .9rem 0 .4rem; color: #1f3864; }
.report table { font-size: 9pt; }
.report th { background: #d9e1f2; color: #111; text-transform: none; letter-spacing: 0; font-size: 9pt; border: 1px solid #bfbfbf; }
.report td { border: 1px solid #bfbfbf; }
.report tr:hover td { background: transparent; }
.report .tg { color: #fff; }
.report .cover { min-height: 240mm; display: flex; flex-direction: column; justify-content: center; }
.report .cover .sub { font-size: 14pt; color: #444; margin-bottom: 2rem; }
.report .cover table td:first-child { font-weight: 600; width: 34%; background: #f5f5f5; }
.report .photos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.report .photos figure { margin: 0; break-inside: avoid; }
.report .photos.tre { grid-template-columns: repeat(3, 1fr); }
.report .rapport-kart-flate { height: 150mm; width: 100%; border: 1px solid #bfbfbf; background: #eee; }
.report .photos img { width: 100%; height: auto; border: 1px solid #bfbfbf; }
.report .photos figcaption { font-size: 8.5pt; color: #444; margin-top: .2rem; }
.report .muted { color: #666; }
.report .page-break { break-before: page; }
.report .kart-boble { display: grid; gap: .35rem; font-size: 9.5pt; }
.report .kart-boble img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.report .kart-boble button { justify-self: start; }
/* Mobil: rapporten fyller skjermen, brede tabeller kan rulles sidelengs, bilder i én kolonne */
@media screen and (max-width: 700px) {
  .report { padding: 4vw; font-size: 10pt; }
  .report h1 { font-size: 17pt; }
  .report h2 { font-size: 13pt; }
  .report .cover { min-height: 0; }
  .report table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .report .photos, .report .photos.tre { grid-template-columns: 1fr; }
  .report .rapport-kart-flate { height: 65vh; }
  .report-toolbar { flex-wrap: wrap; }
}
.report .tg.TG1 { color: #111; }
.report-toolbar { position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--line); padding: .5rem .75rem; display: flex; gap: .5rem; z-index: 30; }
@media print {
  body { background: #fff; }
  header.topbar, nav.bottombar, .report-toolbar, #toasts { display: none !important; }
  main { padding: 0; max-width: none; }
  .report { padding: 0; max-width: none; }
  .report h2 { break-after: avoid; }
  table, figure { break-inside: avoid; }
  .report .rapport-kart-flate { height: 170mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 14mm; }
}

/* ---------------------------------------------------------------- kart */
#map { height: 60vh; min-height: 340px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); z-index: 0; }
.pin { background: none; border: 0; }
.pin svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.dot { width: .72rem; height: .72rem; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.35); flex: none; }
.legend { flex-wrap: wrap; gap: .9rem; }
.legend label { cursor: pointer; }

/* Leaflet-popupen følger temaet */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.leaflet-popup-content { margin: .7rem .8rem; font-family: var(--font); font-size: .82rem; line-height: 1.45; }
.leaflet-container { font-family: var(--font); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.pin-pop p { margin: .4rem 0; }
.pin-pop .btn { margin-top: .6rem; }
.pin-thumb:empty { display: none; }
.pin-thumb img { width: 100%; border-radius: var(--radius); margin-top: .5rem; display: block; }

/* ---------------------------------------------------------------- zoom */
.zoom-verktoy { position: absolute; left: .6rem; bottom: .6rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  background: rgba(10,10,12,.82); border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem .5rem; z-index: 2; }
.zoom-verktoy button { min-height: 30px; padding: 0 .55rem; }
.zoom-verktoy .muted { white-space: nowrap; }
@media (max-width: 700px) { .zoom-verktoy .muted:last-child { display: none; } }

.zoom-vis { flex-direction: column !important; }
.zoom-vis .zoom-topp { background: var(--panel); border-bottom: 1px solid var(--line); padding: .5rem .75rem; gap: .6rem; flex-wrap: wrap; }
.zoom-vis .img { padding: 0; }

/* bildestripe i kartnaalen */
.pin-bilder { display: flex; gap: .3rem; overflow-x: auto; margin-top: .5rem; }
.pin-bilder img { height: 62px; border-radius: 3px; border: 1px solid var(--line); cursor: zoom-in; flex: none; }
.pin-bilder:empty { display: none; }

/* Tellerne over oppdragslista er ogsaa filterknapper. De maa se ut som noe du
   kan trykke paa, og vise hvilken som staar paa - uten at fargen alene baerer
   informasjonen (kanten og aria-pressed gjoer ogsaa jobben). */
.kpi-knapp { font: inherit; text-align: left; cursor: pointer; flex: 1 1 86px;
             transition: border-color .15s, background .15s; }
.kpi-knapp:hover { border-color: var(--accent); }
.kpi-knapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi-knapp.valgt { border-color: var(--accent); background: var(--accent-soft); }
.kpi-knapp.valgt .kpi-tall { color: var(--accent-2); }

/* Prosjektnummeret foran navnet: samme bredde paa sifrene, saa lista staar
   rett naar den sorteres paa nummer */
.pnr { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); margin-right: .35rem; }

/* ---------------------------------------------------------------- oppdragsstatus */
/* Fire steg kunden forstaar. Fargen baerer ikke informasjonen alene - teksten
   staar i merket, saa den leses likt med fargeblindhet og i utskrift. */
.status { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem;
          white-space: nowrap; border: 1px solid var(--line); color: var(--muted); }
.status.info { border-color: var(--info); color: var(--info); }
.status.warn { border-color: var(--warn); color: var(--warn); }
.status.ok   { border-color: var(--ok);   color: var(--ok); }
.status.bad  { border-color: var(--bad);  color: var(--bad); }

/* Et oppdrag uten ferdig rapport er ikke en lenke. Da skal det heller ikke se
   ut som en - ingen peker, ingen hover. */
.item.oppdrag { display: flex; gap: .6rem; align-items: center; }
div.item.oppdrag { cursor: default; }
.oppdrag-tekst { min-width: 0; }
.oppdrag-tekst strong { display: block; overflow-wrap: anywhere; }
.svar { margin-top: .3rem; padding-left: .6rem; border-left: 2px solid var(--line); color: var(--muted); }

/* Ny bestilling paa forsiden din */
a.card.varsel { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
                border-left: 3px solid var(--accent); text-decoration: none; }
a.card.varsel:hover { border-color: var(--accent); }

/* En bestilling til behandling */
.bestilling { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem; margin-bottom: .6rem; background: var(--panel); }
.bestilling + .bestilling { margin-top: .4rem; }
.bestilling .fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .2rem .8rem; margin-top: .4rem; }
.bestilling input.nr { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- kundemodus */
body.kundemodus #topnav,
body.kundemodus #bottomnav,
body.kundemodus #mer-meny { display: none !important; }
body.kundemodus main#view { padding-bottom: 1.5rem; }

/* nøkkeltall øverst i kunderapporten */
.kpi-rad { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.kpi { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .85rem; min-width: 86px; }
.kpi-tall { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.kpi-navn { font-size: .72rem; color: var(--muted); }

/* bildegalleri i kunderapporten */
#k-bilder { display: flex; flex-wrap: wrap; gap: .4rem; }
#k-bilder img { height: 96px; border-radius: 3px; border: 1px solid var(--line); cursor: zoom-in; }
/* Delt lenke: bare logoen i toppen. Den skal ikke lokke vaktmester/styret inn
   på innloggingssiden, og e-post/Logg ut hører ikke hjemme der. Innloggede
   kunder kan trykke på logoen for å komme tilbake til rapportene sine. */
body.delt-modus .brand { pointer-events: none; }
body.delt-modus header.topbar .right { display: none !important; }
/* Kunde-toppen: logo til venstre, Konto/Logg ut til høyre, også på smal skjerm */
body.kundemodus header.topbar { justify-content: space-between; }
body.kundemodus header.topbar .right { margin-left: auto; flex-wrap: nowrap; gap: .5rem; }
body.kundemodus header.topbar .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Fire tellere pakker seg 3+1 paa telefon og ser skjevt ut. To og to staar penere. */
@media (max-width: 520px) {
  .kpi-rad { display: grid; grid-template-columns: repeat(2, 1fr); }
  .kpi-rad .kpi { min-width: 0; }
}

/* Oppsummering av feil og mangler (kunderapport) */
.feil-og-mangler ul { margin: .3rem 0 .2rem; padding-left: 1.1rem; }
.feil-og-mangler li { margin-bottom: .35rem; }
.fm-gruppe { border-left: 3px solid var(--line); padding-left: .7rem; margin-top: .8rem; border-radius: 0; }
.fm-gruppe h3 { margin: 0; font-size: .95rem; }
.fm-bad { border-left-color: var(--bad); }
.fm-warn { border-left-color: var(--warn); }
.fm-info { border-left-color: var(--info); }

/* Forhaandsvisning av kunderapporten paa Deling-fanen */
.forhandsvisning { border: 2px dashed var(--accent); border-radius: var(--radius); padding: .6rem; margin-top: .6rem; background: var(--bg); }
.forhandsvisning-merke { display: inline-block; margin-bottom: .5rem; }
.sjekk-liste { list-style: none; padding: 0; margin: .4rem 0; }
.sjekk-liste li { padding: .25rem 0; border-bottom: 1px solid var(--line); }
.sjekk-liste li:last-child { border-bottom: 0; }
.sjekk-kode { font: inherit; padding: .05rem .4rem; margin: .1rem 0; border-radius: 6px; border: 1px solid #e0a400; background: rgba(232,184,0,.12); color: inherit; cursor: pointer; }
.sjekk-kode:hover, .sjekk-kode.aktiv { background: #e8b800; color: #111; }
.sjekk-fiks { margin: .5rem 0 .3rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.sjekk-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .4rem; }
.sjekk-bilde { padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: none; color: inherit; cursor: pointer; text-align: left; }
.sjekk-bilde:hover { border-color: var(--accent); }
.sjekk-bilde img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #0002; }
.sjekk-bilde span { display: block; font-size: .75rem; padding: .15rem .3rem; }
.sjekk-kart { height: 300px; border-radius: 8px; }

/* Forrige/neste-piler oppaa bildet i bildevisningen */
.bildepil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 56px; height: 96px; padding: 0; border-radius: var(--radius);
  font-size: 3rem; line-height: 1; color: #fff; cursor: pointer;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; }
.bildepil:hover { background: rgba(0,0,0,.7); border-color: var(--accent); color: var(--accent-2); }
.bildepil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bildepil[hidden] { display: none; }
.bildepil-venstre { left: .6rem; }
.bildepil-hoyre { right: .6rem; }
@media (max-width: 700px) { .bildepil { width: 44px; height: 72px; font-size: 2.3rem; } }

/* ---------------------------------------------------------------- lyst tema: småjusteringer
   Det mørke temaet hadde ikke behov for skygge; på hvitt skiller en svak
   skygge kortene fra bakgrunnen bedre enn en kraftigere kant. */
:root:not([data-tema="mork"]) .card,
:root:not([data-tema="mork"]) .item,
:root:not([data-tema="mork"]) .kpi { box-shadow: 0 1px 2px rgba(16,24,40,.05); }
:root:not([data-tema="mork"]) .mer-meny { background: rgba(16,24,40,.25); }

/* Temavalget på Konto-siden: to store flater man trykker på */
.tema-valg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.tema-valg label { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: .6rem;
  border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--text); font-size: .9rem; }
.tema-valg label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tema-valg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tema-valg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tema-prove { height: 56px; border-radius: 4px; border: 1px solid var(--line); display: flex; overflow: hidden; }
.tema-prove i { display: block; }
.tema-prove .lys-side { width: 30%; background: #ffffff; border-right: 1px solid #e3e6eb; }
.tema-prove .lys-flate { flex: 1; background: #f6f7f9; }
.tema-prove .mork-side { width: 30%; background: #151821; border-right: 1px solid #252a36; }
.tema-prove .mork-flate { flex: 1; background: #0f1115; }

/* ---------------------------------------------------------------- retning 1: sidemeny
   Paa PC faar ansatte menyen som en fast kolonne til venstre, slik at kartet
   og lista faar hele bredden ved siden av. Kunder og delte lenker har bare
   Konto/Logg ut, og beholder toppstripa. Den interne rapporten (A4) faar samme
   sidemeny, saa menyen ikke hopper til toppen naar du aapner en rapport. */
@media (min-width: 900px) {
  body:not(.kundemodus) #app { flex-direction: row; align-items: stretch; }
  body:not(.kundemodus) header.topbar {
    position: sticky; top: 0; height: 100vh; width: 220px; flex: none;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: 1.1rem .75rem; border-bottom: 0; border-right: 1px solid var(--line);
  }
  body:not(.kundemodus) header.topbar .brand { padding: .2rem .6rem 1rem; font-size: 1.05rem; }
  body:not(.kundemodus) header.topbar nav { flex-direction: column; gap: .15rem; }
  body:not(.kundemodus) header.topbar nav a { min-height: 40px; padding: 0 .75rem; border-radius: var(--radius); }
  body:not(.kundemodus) header.topbar nav a.active { box-shadow: none; }
  /* Skillelinje foer admin-sidene */
  body:not(.kundemodus) header.topbar nav a[data-nav="priser"] { margin-top: .6rem; position: relative; }
  body:not(.kundemodus) header.topbar nav a[data-nav="priser"]::before {
    content: ""; position: absolute; left: .4rem; right: .4rem; top: -.4rem; border-top: 1px solid var(--line); }
  body:not(.kundemodus) header.topbar .right {
    margin: auto 0 0; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .6rem; border-top: 1px solid var(--line); }
  body:not(.kundemodus) header.topbar #user-email { overflow-wrap: anywhere; }
  body:not(.kundemodus) main { max-width: 1500px; min-width: 0; }
}

/* ---------------------------------------------------------------- retning 1: kart ved lista
   Oversikten (ansatte) og «Mine oppdrag» (kunde): kartet og lista side om side
   paa bred skjerm, kartet over lista paa telefon. Kartet staar fast mens lista ruller. */
.kart-og-liste { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; }
.kart-og-liste > .kol-kart { flex: 3 1 420px; min-width: 0; position: sticky; top: .75rem; }
.kart-og-liste > .kol-liste { flex: 2 1 360px; min-width: 0; }
.oversiktskart { height: calc(100vh - 4.5rem); min-height: 380px; max-height: 860px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); z-index: 0; }
.kart-og-liste .legend { margin-top: .45rem; }
@media (max-width: 899px) {
  .kart-og-liste > .kol-kart { position: static; flex-basis: 100%; }
  .oversiktskart { height: 240px; min-height: 0; }
}
body.kundemodus .oversiktskart { height: 520px; }
@media (max-width: 899px) { body.kundemodus .oversiktskart { height: 300px; } }
/* Raden i lista som hoerer til naalen du peker paa */
.item.fremhevet { border-color: var(--accent); background: var(--accent-soft); }
/* Oversikten for ansatte: bredere side, og merkene i lista i faste kolonner
   (forslag, bilder, AI, gjennomgått, status, publisert) så de står under hverandre */
.item .meta.kolonner > span:empty { display: none; }
@media (min-width: 1200px) {
  body:not(.kundemodus) main:has(.ansatt-oversikt) { max-width: none; }
  .kart-og-liste.ansatt-oversikt { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(0, 68rem); }
  .ansatt-oversikt .item .meta.kolonner { display: grid; grid-template-columns: 5.6rem 5.6rem 6.2rem 6.2rem 7.8rem 6.6rem; gap: .35rem; flex-wrap: nowrap; }
  .ansatt-oversikt .item .meta.kolonner > span { display: flex; justify-content: flex-start; min-width: 0; }
  .ansatt-oversikt .item .meta.kolonner .badge { white-space: nowrap; }
  .ansatt-oversikt .item .title, .ansatt-oversikt .item .sub { overflow-wrap: anywhere; }
  /* Sorteringsknappene rett over kolonnene */
  main:has(.ansatt-oversikt) #sortbar { display: none !important; }
  .ansatt-oversikt .liste-hode { display: flex; gap: .6rem; align-items: center; padding: 0 .8rem .35rem; border: 1px solid transparent;
    position: sticky; top: 0; z-index: 2; background: var(--bg); }
  .ansatt-oversikt .liste-hode .nr { min-width: 3.2em; }
  .ansatt-oversikt .liste-hode .meta.kolonner { margin-left: auto; display: grid; grid-template-columns: 5.6rem 5.6rem 6.2rem 6.2rem 7.8rem 6.6rem; gap: .35rem; }
  .ansatt-oversikt .liste-hode button { font-size: .72rem; padding: .2rem .45rem; min-height: 0; white-space: nowrap; }
}
.liste-hode { display: none; }
.pin.valgt svg { transform: scale(1.3); transform-origin: 50% 100%; }

/* ---------------------------------------------------------------- markeringer (ringer rundt feil)
   SVG-laget ligger over bildet. Statisk (rapport, stripe): fyller boksen rundt
   bildet. Levende (bildevisning): plasseres over bildet av Markering.lag(). */
.markert { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.markert > img { display: block; }
.report .photos .markert { display: block; }
.markering-lag { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.markering-lag.levende { inset: auto; z-index: 1; }
.markering-lag.levende.tegner { pointer-events: all; cursor: crosshair; touch-action: none; }
.lightbox .img:has(.markering-lag.tegner) { outline: 3px solid #ffd400; outline-offset: -3px; }
/* AI-ens takpanne-forslag: stiplet, så de ikke forveksles med dine ringer */
.markering-lag.ai ellipse[data-i] { stroke-dasharray: 7 5; }
.markering-lag.ai { z-index: 1; }
/* Merke i bildefanen paa bilder som har ringer */
.photo-grid .ph .ring { position: absolute; left: 4px; top: 4px; background: #ffd400; color: #111; font-size: .65rem; padding: 1px 5px; border-radius: 3px; font-weight: 700; }

/* Arbeidsliste for vaktmester (delt lenke av typen «arbeidsliste») – laget for mobil */
.arbeidsliste { max-width: 720px; margin: 0 auto; }
.arbeidsliste .al-fremdrift { display: flex; gap: .6rem; align-items: center; margin-top: .6rem; flex-wrap: wrap; }
.arbeidsliste .al-jobb p { margin: .35rem 0; }
.arbeidsliste .al-bilde { margin: .5rem 0; cursor: zoom-in; }
.arbeidsliste .al-bilde img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.arbeidsliste .al-knapper { gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.arbeidsliste .al-knapper .btn, .arbeidsliste .al-knapper button.ok { min-height: 44px; padding: 0 1rem; }
.arbeidsliste .al-merknad { flex: 1 1 180px; min-height: 44px; margin: 0; }
/* Hurtigknapper med merknader vaktmesteren har brukt før: ett trykk = utført med merknad */
.arbeidsliste .al-hurtig { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.arbeidsliste .al-hurtig button { min-height: 44px; padding: 0 .9rem; }
.arbeidsliste #al-kart #map { height: 360px; min-height: 0; }
@media (max-width: 520px) { .arbeidsliste #al-kart #map { height: 300px; } }
/* Status for utbedring øverst i funnlista, og avkrysning for innlogget kunde */
.feil-og-mangler .fm-status { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; justify-content: space-between;
  padding: .55rem .7rem; margin: .4rem 0 .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.feil-og-mangler .fm-status > div { flex: 1 1 200px; }
.feil-og-mangler .fm-merk { margin-top: .3rem; }
.arbeidsliste .al-ferdig { opacity: .65; }
.del-kort .form-grid { margin-bottom: .5rem; }

/* Oppsummeringen i kunderapporten: trykk på et funn for å se bildet */
.feil-og-mangler li.fm-klikk { cursor: pointer; border-radius: 6px; padding: .15rem .3rem; margin-left: -.3rem; }
.feil-og-mangler li.fm-klikk:hover { background: var(--hover); }

/* Merkenavnet «Hyrbart AS – Droneinspeksjon» er langt: på smal skjerm brytes det i stedet for å skyve menyen ut */
@media (max-width: 520px) { header.topbar .brand { white-space: normal; font-size: .95rem; line-height: 1.15; } }

/* Funnlista i kunderapporten: ett kort per funn med bilde, fungerer på mobil uten sidelengs rulling */
.feil-og-mangler ul { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .5rem; }
.feil-og-mangler li.fm-funn { display: grid; grid-template-columns: 110px 1fr; gap: .7rem; align-items: start; padding: .45rem; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.feil-og-mangler .fm-bilde { position: relative; width: 110px; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--line); }
.feil-og-mangler .fm-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feil-og-mangler .fm-bilde .fm-lupe { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.55); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 .3rem; }
.feil-og-mangler .fm-uten { display: grid; place-items: center; font-size: .75rem; color: var(--muted); }
.feil-og-mangler .fm-tekst { display: grid; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .feil-og-mangler li.fm-funn { grid-template-columns: 88px 1fr; } .feil-og-mangler .fm-bilde { width: 88px; } }

/* «Bilder» i kunderapporten: rutenett som fyller bredden – 2 per rad på mobil, flere på PC.
   Bildet fyller ruten i bredden (høyde auto), så ringene rundt feil treffer riktig. */
#k-bilder.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .4rem; }
#k-bilder.thumbs > img, #k-bilder.thumbs .markert { display: block; width: 100%; }
#k-bilder.thumbs img { width: 100%; height: auto; display: block; border-radius: 6px; cursor: zoom-in; }
@media (max-width: 520px) { #k-bilder.thumbs { grid-template-columns: 1fr 1fr; gap: .3rem; } }

/* «Kort oppsummert» øverst i kunderapporten */
.oppsum { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.oppsum-tittel { margin: 0 0 .35rem; font-size: 1.05rem; }
.oppsum-ingress { font-size: 1.02rem; line-height: 1.5; margin: 0 0 .8rem; max-width: 70ch; }
.oppsum-grid { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .oppsum-grid { grid-template-columns: 3fr 2fr; } }
.oppsum-boks { border: 1px solid var(--line); border-radius: var(--radius); padding: .65rem .8rem; min-width: 0; }
.oppsum-bad { box-shadow: inset 4px 0 0 var(--bad); }
.oppsum-warn { box-shadow: inset 4px 0 0 var(--warn); }
.oppsum-boks h3 { margin: 0 0 .45rem; font-size: .95rem; display: flex; align-items: center; gap: .45rem; }
.oppsum-boks ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.oppsum-tall { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .2rem 0 .8rem; max-width: 520px; }
.oppsum-tall-boks { border-radius: var(--radius); padding: .55rem .75rem; display: flex; align-items: baseline; gap: .55rem; border: 1px solid var(--line); }
.oppsum-tall-boks b { font-size: 1.7rem; line-height: 1; }
.oppsum-tall-boks span { font-size: .9rem; }
.oppsum-tall-boks.bad { background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.oppsum-tall-boks.bad b { color: var(--bad); }
.oppsum-tall-boks.warn { background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.oppsum-tall-boks.warn b { color: var(--warn); }
.oppsum-tall-boks.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.oppsum-tall-boks.ok b { color: var(--ok); }
.oppsum-gruppe { line-height: 1.4; }
.oppsum-gruppe + .oppsum-gruppe { border-top: 1px solid var(--line); padding-top: .5rem; }
.oppsum-gruppe-topp { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.oppsum-antall { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted, inherit); }
.oppsum-koder { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.oppsum-kode { all: unset; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: .8rem; padding: .1rem .4rem; border-radius: 4px; border: 1px solid var(--line); }
.oppsum-kode:hover { background: var(--accent-soft); }
.oppsum-kode:focus-visible { outline: 2px solid var(--accent); }
.lenkeknapp { all: unset; cursor: pointer; color: var(--accent-2); text-decoration: underline; }
.lenkeknapp:focus-visible { outline: 2px solid var(--accent); }
.fm-blink { outline: 3px solid var(--accent); outline-offset: 2px; transition: outline-color .4s; }
@media print { .oppsum-kode, .lenkeknapp { color: inherit; text-decoration: none; } }

.lb-funn { list-style: none; padding: 0; margin: .2rem 0 .4rem; }
.lb-funn li { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .25rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.lb-funn li:last-child { border-bottom: 0; }

/* Funn på nett – samme oppsett som i PDF-en: tabell til venstre, bilde med ringer til høyre */
.fm2-funn { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.fm2-funn:first-of-type { border-top: 0; }
@media (min-width: 760px) { .fm2-funn { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; } }
.fm2-tekst h3 { margin: 0 0 8px; font-size: 1.1rem; }
.fm2-tabell { width: 100%; border-collapse: collapse; font-size: 1rem; }
.fm2-tabell th, .fm2-tabell td { text-align: left; vertical-align: top; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.fm2-tabell th { width: 34%; font-weight: 400; color: var(--muted); font-size: inherit; text-transform: none; letter-spacing: normal; }
.fm2-tabell tr:first-child th, .fm2-tabell tr:first-child td { background: var(--panel-2); }
.fm2-tekst .fm-merk { margin-top: 8px; }
.fm2-bilde { margin: 0; cursor: zoom-in; }
.fm2-bilde .markert { display: block; }
.fm2-bilde img { display: block; width: 100%; height: auto; border-radius: 4px; }
.fm2-bilde figcaption { font-size: .85rem; color: var(--muted); text-align: center; margin-top: 6px; }
.fm2-flere { text-align: center; margin-top: 2px; }
.fm2-uten { cursor: default; display: flex; align-items: center; justify-content: center; min-height: 120px; border: 1px dashed var(--line); border-radius: 4px; }

/* Innholdsrad øverst i nettrapporten */
.rapport-innhold { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; margin: .8rem 0 0; }
.rapport-innhold .lenke { background: none; border: 0; padding: .25rem 0; min-height: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
/* Tydelig tilbakeknapp i rapporten */
.rapport-innhold [hidden] { display: none; }
.btn.tilbake-knapp { font-size: 1.05rem; font-weight: 600; padding: .6rem 1rem; color: var(--accent); border-color: var(--accent); }

/* Oppfølging per rapport på «Mine oppdrag»: delt med styret / vaktmester, utbedret i prosent */
.oppdrag-status { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.oppdrag-status .badge { font-size: .75rem; padding: .15rem .55rem; }
.oppdrag-status .badge.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.oppdrag-status .badge.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); }
.oppdrag-status .badge.av { color: var(--muted); border-color: var(--line); }

/* Kundesidene bruker bredden på store skjermer: bredere side, og lista får like mye plass som kartet */
@media (min-width: 1100px) {
  body.kundemodus main { max-width: min(1800px, 96vw); }
  body.kundemodus .kart-og-liste > .kol-kart { flex: 1 1 520px; }
  body.kundemodus .kart-og-liste > .kol-liste { flex: 1 1 520px; }
}

/* Valgt nål («Vis på kartet»): større, hvit kant, over de andre */
.leaflet-marker-icon.pin-valgt svg { transform: scale(1.6); transform-origin: 50% 100%; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 1px 4px rgba(0,0,0,.6)); transition: transform .2s ease; }

/* Kundens oppdragsliste i faste kolonner med sortering i kolonnehodet, som ansattoversikten:
   Funn · Styret · Vaktmester · Utbedret · Status */
.kunde-oversikt .item .meta.kolonner { display: flex; flex-wrap: wrap; gap: .3rem; }
.kunde-oversikt .item .meta.kolonner .badge.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.kunde-oversikt .item .meta.kolonner .badge.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); }
.kunde-oversikt .item .meta.kolonner .badge.av { color: var(--muted); border-color: var(--line); }
@media (min-width: 1300px) {
  .kart-og-liste.kunde-oversikt { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(46rem, 64rem); }
  .kunde-oversikt .item .grow { min-width: 12rem; }
  .kunde-oversikt .item .meta.kolonner,
  .kunde-oversikt .liste-hode .meta.kolonner { margin-left: auto; display: grid; grid-template-columns: 4.8rem 6.2rem 7rem 5.4rem 6.8rem; gap: .35rem; flex-wrap: nowrap; }
  .kunde-oversikt .item .meta.kolonner > span { display: flex; justify-content: flex-start; min-width: 0; }
  .kunde-oversikt .item .meta.kolonner .badge,
  .kunde-oversikt .item .meta.kolonner .status { white-space: nowrap; }
  .kunde-oversikt .item .title, .kunde-oversikt .item .sub { overflow-wrap: anywhere; }
  .kunde-oversikt .liste-hode { display: flex; gap: .6rem; align-items: center; padding: 0 .8rem .35rem; position: sticky; top: 0; z-index: 2; background: var(--bg); }
  .kunde-oversikt .liste-hode .nr { min-width: 3.2em; }
  .kunde-oversikt .liste-hode button { font-size: .72rem; padding: .2rem .45rem; min-height: 0; white-space: nowrap; }
  body.kundemodus #k-sort { display: none; }
}

/* Bestill inspeksjon: flyfoto der kunden markerer byggene */
.bestill-enkel { max-width: 980px; margin: 0 auto; }
.bestill-enkel [hidden] { display: none !important; }
.bestill-kart { height: 420px; border-radius: 10px; overflow: hidden; margin: .4rem 0; border: 1px solid var(--line, #ddd); cursor: crosshair; }
@media (max-width: 700px) { .bestill-kart { height: 340px; } }
.bestill-kontakt { padding: .55rem .7rem; border-radius: 8px; background: rgba(0,0,0,.04); }
.bygg-merke span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #d93a2b; color: #fff; font-weight: 700; font-size: 14px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: grab; }

.bestill-verktoy { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .2rem; }
.bestill-verktoy .btn { min-height: 40px; }
.omr-punkt { width: 14px; height: 14px; background: #fff; border: 3px solid #d93a2b; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: move; }
.bestilling-kart { height: 300px; border-radius: 8px; overflow: hidden; margin: .5rem 0; border: 1px solid var(--line, #ddd); }

/* Tilbakemelding fra kunden */
.tilbakemelding-dialog { border: none; border-radius: 12px; padding: 1.2rem 1.3rem; width: min(560px, 94vw); box-shadow: 0 10px 40px rgba(0,0,0,.25); background: var(--card, #fff); color: inherit; }
.tilbakemelding-dialog::backdrop { background: rgba(0,0,0,.45); }
.tilbakemelding-dialog h2 { margin-top: 0; }
.tilbakemelding-dialog textarea, .tilbakemelding-dialog select { width: 100%; }
.tb-type { gap: 1.2rem; }
.tb-type label { display: inline-flex; align-items: center; gap: .35rem; font-weight: normal; }
.tb-rad .svar { margin-top: .35rem; padding: .4rem .6rem; border-radius: 6px; background: rgba(0,120,60,.07); }
.tb-ansatt-rad textarea { width: 100%; }

/* Hjelp / bruksanvisning (js/hjelp.js) */
.hjelp-dialog { width: min(680px, 94vw); max-height: 88vh; overflow: auto; }
.hjelp-tekst { margin-top: .6rem; }
.hjelp-innhold { margin-bottom: .6rem; line-height: 1.9; }
.hjelp-del { border-top: 1px solid var(--line, #e3e6ea); padding: .5rem 0; }
.hjelp-del summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.hjelp-del ul, .hjelp-del ol { padding-left: 1.2rem; margin: .4rem 0; }
.hjelp-del li { margin: .25rem 0; }
.hjelp-del h4 { margin: .8rem 0 .3rem; }
.hjelp-grad td { padding: .25rem .6rem .25rem 0; vertical-align: top; }
.hjelp-grad td:first-child { white-space: nowrap; }
.hjelp-prikk { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.hjelp-kontakt { margin-top: .8rem; }
.hjelp-innhold button.lenke { background: none; border: none; padding: 0; min-height: 0; color: var(--accent, #1f5fbf); text-decoration: underline; cursor: pointer; font: inherit; }

/* Melding på innloggingssiden når en innloggings-/aktiveringslenke er utløpt eller brukt */
.lenkefeil { margin: .6rem 0 1rem; padding: .7rem .85rem; border-radius: 8px; background: rgba(217,58,43,.08); border: 1px solid rgba(217,58,43,.35); font-size: .95rem; line-height: 1.45; }
.lenkefeil strong { display: block; margin-bottom: .2rem; }