:root {
  --bg: #262624;
  --panel: #30302d;
  --panel2: #383834;
  --line: #44443f;
  --tekst: #ecebe6;
  --dempet: #a8a69e;
  --blaa: #3b7ddd;
  --blaa-moerk: #2a5fb0;
  --rod: #c2483f;
  --gronn: #3fa66d;
  --gul: #d0a23a;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font: 16px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
a { color: #8db8ff; }
h1 { font-size: 1.6rem; margin: 0 0 12px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
code { background: var(--panel2); padding: 1px 6px; border-radius: 4px; }

/* Innloggingssiden: bare logoen øverst */
.logo-top { text-align: center; padding: 32px 16px 8px; }
.logo-top img { width: min(440px, 82vw); height: auto; }

main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; }
main.smal { max-width: 460px; }

/* Toppmeny */
.topp { background: var(--panel); border-bottom: 1px solid var(--line); }
.topp-inn { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.logo-lenke { flex: 1 1 0; min-width: 0; }
.logo-lenke img { display: block; width: 100%; max-width: 400px; height: auto; }
.topp nav { display: flex; flex-wrap: wrap; gap: 4px 6px; order: 3; flex-basis: 100%; }
.topp nav a { color: var(--tekst); text-decoration: none; padding: 6px 12px; border-radius: 8px; }
.topp nav a:hover { background: var(--panel2); }
.topp nav a.aktiv { background: var(--blaa-moerk); }
.logout { display: flex; align-items: center; gap: 10px; margin: 0; }
.hvem { color: var(--dempet); font-size: .9rem; }

/* Kort og skjema */
.kort { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin: 16px 0; }
.bred-kort { max-width: none; }
.skjema { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.smal-skjema { max-width: 560px; }
label { display: block; margin: 14px 0 6px; font-size: .92rem; color: var(--dempet); }
label.avkryss { display: flex; align-items: center; gap: 8px; color: var(--tekst); margin-top: 18px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time],
input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; background: var(--bg); color: var(--tekst);
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blaa); outline-offset: 1px; }
input[type=checkbox] { width: 18px; height: 18px; }
textarea { resize: vertical; }
.rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 16px; }
.rutenett.to { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rad { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rad input[type=text] { flex: 1; min-width: 180px; width: auto; }

/* Knapper */
.knapp {
  display: inline-block; background: var(--blaa); color: #fff; border: 0; border-radius: 8px;
  padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; margin-top: 16px;
}
.knapp:hover { background: #4f8fe8; }
.knapp.sekundaer { background: var(--panel2); color: var(--tekst); border: 1px solid var(--line); }
.knapp.sekundaer:hover { background: #42423d; }
.knapp.fare { background: var(--rod); }
.knapp.ferdig, .knapp.ferdig:hover { background: var(--gronn); border-color: var(--gronn); color: #fff; }
.knapp.ferdig::before { content: "\2713\00a0"; font-weight: 700; }
.knapp.liten { padding: 6px 12px; font-size: .9rem; margin-top: 0; }
.knapper { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.knapper .knapp { margin-top: 0; }
.topprad { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.topprad h1 { margin: 0; }

/* Meldinger */
.melding { border-radius: 8px; padding: 12px 16px; margin: 14px 0; border: 1px solid; }
.melding ul { margin: 6px 0 0; padding-left: 20px; }
.melding.ok { background: rgba(63,166,109,.15); border-color: var(--gronn); }
.melding.feil { background: rgba(194,72,63,.15); border-color: var(--rod); }
.melding.info { background: rgba(59,125,221,.15); border-color: var(--blaa); }
.liten-tekst { color: var(--dempet); font-size: .88rem; }
.tom { background: var(--panel); border: 1px dashed var(--line); border-radius: 12px; padding: 30px; text-align: center; color: var(--dempet); }

/* Filter */
.filter { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 16px; margin: 14px 0; }
.filter > div { min-width: 140px; }
.filter .bred { flex: 1; min-width: 200px; }
.filter-knapper { display: flex; gap: 8px; }
.filter-knapper .knapp { margin-top: 0; }
.sammendrag { color: var(--dempet); margin: 10px 2px; }

/* Tabell */
.tabell-ramme { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .82rem; color: var(--dempet); font-weight: 600; white-space: nowrap; background: var(--panel2); }
tr:last-child td { border-bottom: 0; }
td.tall, th.tall { text-align: right; }
tr.inaktiv td { opacity: .55; }
td input[type=text] { min-width: 140px; }

.merke { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.merke-planlagt { background: rgba(59,125,221,.22); color: #9cc2ff; }
.merke-lastet { background: rgba(208,162,58,.22); color: #f0cf7e; }
.merke-levert { background: rgba(63,166,109,.22); color: #86dcad; }
.merke-bomtur { background: rgba(214,96,86,.22); color: #f0a49d; }

.sidevalg { display: flex; gap: 18px; justify-content: center; align-items: center; margin: 18px 0; color: var(--dempet); }

@media (max-width: 640px) {
  .topp-inn { gap: 8px 14px; }
  th, td { padding: 8px; }
}

.statusliste { margin: 0 0 14px; padding-left: 20px; }
.statusliste li { margin: 4px 0; }

.skjult { display: none; }

.rutenett .knapper > input { flex: 1; min-width: 70px; }
.rutenett .knapper > select { flex: 1; min-width: 90px; }
.fraktbrev-boks { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--line); }
.fraktbrev-boks h2 { font-size: 1.1rem; margin: 12px 0; }
.fraktbrev-boks h3 { font-size: .95rem; margin: 18px 0 8px; }
.vedlegg { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 14px; }
.vedlegg li { display: flex; flex-direction: column; gap: 6px; width: 150px; }
.vedlegg img { width: 150px; height: 150px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; display: block; }
.pdf-ikon { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); font-weight: 700; }
.opplasting input[type=file] { margin-bottom: 10px; }

.signaturflate { display: block; width: 100%; max-width: 700px; aspect-ratio: 700 / 260; background: #fff; border: 1px solid var(--line); border-radius: 6px; touch-action: none; cursor: crosshair; margin-bottom: 10px; }
.signaturvisning { background: #fff; border: 1px solid var(--line); border-radius: 6px; display: inline-block; padding: 6px; margin-bottom: 8px; }
.signaturvisning img { display: block; max-width: 100%; max-height: 140px; }
.feiltekst { color: #f0a49d; margin: 0 0 10px; }

.skjult-label { position: absolute; left: -9999px; }

.filknapp { position: relative; cursor: pointer; overflow: hidden; }
.skjult-fil { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* ---------- Mobil ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
input[type=date], input[type=time] { min-width: 0; }

@media (max-width: 700px) {
  main { padding: 14px 12px 50px; }
  h1 { font-size: 1.35rem; }
  .skjema, .kort { padding: 14px; border-radius: 10px; }
  .topp-inn { padding: 8px 12px; }
  .logo-lenke img { max-width: none; }
  .topp nav { order: 3; flex-basis: 100%; gap: 2px; }
  .topp nav a { padding: 6px 9px; font-size: .92rem; }
  .logout { margin-left: auto; }
  .hvem { display: none; }
  .topprad .knapper, .topprad .knapp { width: 100%; }
  .topprad .knapp { text-align: center; }

  .filter { padding: 10px 12px 14px; gap: 6px 10px; }
  .filter > div { flex: 1 1 130px; min-width: 0; }
  .filter .bred, .filter-knapper { flex: 1 1 100%; }
  .filter-knapper .knapp { flex: 1; text-align: center; }

  /* Tabeller som kort */
  .tabell-ramme { border: 0; border-radius: 0; overflow: visible; background: transparent; }
  table.kortliste, table.kortliste tbody, table.kortliste tr, table.kortliste td { display: block; width: 100%; }
  table.kortliste { background: transparent; }
  table.kortliste thead { display: none; }
  table.kortliste tr { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; margin-bottom: 10px; }
  table.kortliste tr:last-child td { border-bottom: 0; }
  table.kortliste td { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); text-align: right; }
  table.kortliste td:last-child { border-bottom: 0; }
  table.kortliste td::before { content: attr(data-label); color: var(--dempet); font-size: .82rem; text-align: left; flex: none; padding-top: 2px; }
  table.kortliste td:empty { display: none; }
  table.kortliste td.tall { text-align: right; }
  table.kortliste td.kunde { font-weight: 600; }
  table.kortliste td.handling { display: block; padding: 8px 0 4px; }
  table.kortliste td.handling::before { content: none; }
  table.kortliste td.handling .knapp, table.kortliste td.handling a { display: block; text-align: center; }

  .vedlegg li, .vedlegg img, .pdf-ikon { width: 46vw; max-width: 170px; }
  .vedlegg img, .pdf-ikon { height: 46vw; max-height: 170px; }
}

/* ---------- Forside ---------- */
.forside-bilde { text-align: center; margin: 0 0 6px; }
.forside-bilde img { width: 100%; max-width: 560px; height: auto; display: inline-block; }
.hei { margin: 6px 0 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hei-klokke { font-weight: 400; font-size: .85rem; white-space: nowrap; }
.forside-rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.forside-rutenett .kort { margin: 0; }
.forside-rutenett h2 { margin-bottom: 10px; }
.stor-knapp { width: 100%; text-align: center; font-size: 1.1rem; padding: 14px 18px; margin-top: 14px; }
.dag-status { margin: 4px 0 8px; font-size: 1.05rem; }
.prikk { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--gronn); margin-right: 6px; box-shadow: 0 0 0 4px rgba(63,166,109,.25); }
.stort-tall { display: block; font-size: 3.4rem; font-weight: 700; line-height: 1.1; color: var(--tekst); text-decoration: none; }
.stort-tall:hover { color: #8db8ff; }
.tallrad { list-style: none; margin: 10px 0; padding: 0; display: flex; gap: 22px; }
.tallrad span { display: block; font-size: 1.6rem; font-weight: 700; }
.forside-knapper { margin-top: 18px; }
.sumrad { display: inline-block; margin-right: 14px; }
.inaktiv-rad { opacity: .6; }
.filter .avkryss { margin-top: 28px; }

/* ---------- Kalender ---------- */
.forklaring { margin: 4px 0 10px; }
.punkt-forklaring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 0; vertical-align: middle; }
.punkt-forklaring.start, .kal-prikk.start { background: var(--gronn); }
.punkt-forklaring.slutt, .kal-prikk.slutt { background: var(--rod); }

.kalender { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.kal-topp { height: 34px; line-height: 34px; text-align: center; font-weight: 600; font-size: .88rem; border-bottom: 1px solid var(--line); background: var(--panel2); white-space: nowrap; overflow: hidden; }
.kal-dag { border-left: 1px solid var(--line); min-width: 0; }
.kal-dag.idag .kal-topp { background: var(--blaa-moerk); }
.kal-dag.idag .kal-kropp { background-color: rgba(59,125,221,.06); }
.kal-utentid-rad { min-height: 6px; padding: 2px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.kal-chip { display: block; font-size: .72rem; padding: 1px 5px; border-radius: 4px; background: var(--panel2); color: var(--tekst); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kal-time { height: 36px; font-size: .72rem; color: var(--dempet); text-align: right; padding: 2px 6px 0 0; border-top: 1px solid var(--line); }
.kal-akse .kal-time:first-child { border-top: 0; }
.kal-kropp { position: relative; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(255,255,255,.07) 35px, rgba(255,255,255,.07) 36px); }

.kal-band { position: absolute; left: 0; width: 4px; background: rgba(63,166,109,.55); border-radius: 2px; }
.kal-band.pagar { background: repeating-linear-gradient(to bottom, rgba(63,166,109,.7) 0, rgba(63,166,109,.7) 6px, rgba(63,166,109,.25) 6px, rgba(63,166,109,.25) 10px); }

.kal-blokk { position: absolute; overflow: hidden; border-radius: 6px; padding: 2px 5px; font-size: .72rem; line-height: 1.25; text-decoration: none; color: var(--tekst); border: 1px solid rgba(255,255,255,.18); border-left-width: 4px; box-sizing: border-box; }
.kal-blokk strong, .kal-blokk span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-blokk:hover { z-index: 5; filter: brightness(1.2); }
.kal-tid { color: var(--dempet); font-size: .7rem; }
.blokk-planlagt { background: rgba(59,125,221,.28); border-left-color: #6aa3f0; }
.blokk-lastet { background: rgba(208,162,58,.28); border-left-color: #e0b84e; }
.blokk-levert { background: rgba(63,166,109,.26); border-left-color: #55c088; }
.blokk-bomtur { background: rgba(214,96,86,.28); border-left-color: #e57d74; }

.kal-punkt { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255,255,255,.4); z-index: 4; pointer-events: none; }
.kal-prikk { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--panel); }
.kal-punkt .kal-prikk { position: absolute; left: -2px; top: -6px; }
.kal-punkt.start { border-top-color: rgba(63,166,109,.8); }
.kal-punkt.slutt { border-top-color: rgba(194,72,63,.9); }
.kal-punkt .kal-punkt-tekst { position: absolute; right: 2px; top: -9px; font-size: .68rem; background: var(--bg); padding: 0 4px; border-radius: 4px; color: var(--tekst); }

.kal-agenda { display: none; }
.agenda-dag { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin-bottom: 10px; }
.agenda-dag.idag { border-color: var(--blaa); }
.agenda-dag h3 { margin: 4px 0 8px; font-size: 1rem; }
.agenda-rad { margin: 6px 0; }
.agenda-oppdrag { display: block; padding: 6px 10px; border-radius: 8px; border-left: 4px solid; color: var(--tekst); text-decoration: none; font-size: .92rem; margin: 6px 0; }
.agenda-rad .kal-prikk { vertical-align: middle; }

@media (max-width: 800px) {
  .kalender { display: none; }
  .kal-agenda { display: block; }
}

/* ---------- Slett-knapper ---------- */
.slett-skjema { display: inline-block; margin: 0 0 0 6px; }
.slett-skjema .knapp { margin-top: 0; }
.slett-bil { display: block; margin: -4px 0 16px; }
@media (max-width: 700px) {
  table.kortliste td.handling .slett-skjema { display: block; margin: 8px 0 0; }
}

/* ---------- Endringslogg ---------- */
.inline-h2 { display: inline; font-size: 1.1rem; }
details > summary { cursor: pointer; }
.loggliste { list-style: none; margin: 10px 0 0; padding: 0; }
.loggliste li { padding: 8px 0; border-top: 1px solid var(--line); }
.logg-tekst { margin-top: 4px; font-size: .92rem; color: var(--tekst); }

.mal-lagre, .mal-velger { margin-top: 14px; }
.oversikt { margin-top: 16px; }

[hidden] { display: none !important; }

.apne-liste { list-style: none; margin: 0; padding: 0; }
.apne-liste li { border-top: 1px solid var(--line); }
.apne-liste li:first-child { border-top: 0; }
.apne-liste a { display: block; padding: 10px 2px; color: inherit; text-decoration: none; }
.apne-liste a:hover { background: var(--panel2); }
.apne-topp, .apne-rute { display: block; }
.apne-rute { margin: 2px 0; }
.apne-forfalt { color: #f0a49d; }

.avslutt-boks { display: none; margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.avslutt-boks:target, .avslutt-boks.apen { display: block; }
.dag-knapper { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.dag-knapper .knapp { margin-top: 8px; }
.versjon { text-align: center; opacity: .6; margin: 24px 0 8px; }

.valgliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 16px; }
a.valg { display: block; color: inherit; text-decoration: none; margin: 8px 0; }
a.valg:hover { background: var(--panel2); }
a.valg strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }

details.mal-boks { margin: 10px 0; }
details.mal-boks > summary { cursor: pointer; display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--tekst); list-style: none; }
details.mal-boks > summary::-webkit-details-marker { display: none; }
details.mal-boks > summary::before { content: '+ '; }
details.mal-boks[open] > summary::before { content: '– '; }
details.mal-boks .filter { margin-top: 8px; }

.stat-rutenett { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px 18px; color: var(--dempet); font-size: .9rem; }
.stat-rutenett span { display: block; font-size: 1.5rem; font-weight: 700; color: var(--tekst); }
.kun-mobil { display: none; }
@media (max-width: 700px) {
  .statistikk { padding: 12px 14px; }
  .stat-rutenett { grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
  .stat-rutenett span { font-size: 1.3rem; }
  table.timeliste tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 12px; }
  table.timeliste td { border-bottom: 0; padding: 2px 0; }
  table.timeliste td::before { content: none; }
  table.timeliste td.kun-pc { display: none; }
  table.timeliste td.kun-mobil { display: block; grid-column: 1 / -1; text-align: left; color: var(--dempet); }
  table.timeliste td.dato { display: block; font-weight: 700; font-size: 1.05rem; text-align: left; grid-column: 1; grid-row: 1; }
  table.timeliste td.timer { display: block; font-weight: 700; font-size: 1.05rem; text-align: right; grid-column: 2; grid-row: 1; }
  table.timeliste td.mob-tid { grid-row: 2; }
  table.timeliste td.sjafor { display: block; grid-column: 1 / -1; text-align: left; font-weight: 400; color: var(--dempet); font-size: .9rem; }
  table.timeliste td[data-label="Sted"], table.timeliste td[data-label="Kommentar"] { display: block; grid-column: 1 / -1; text-align: left; font-size: .92rem; }
  table.timeliste td.handling { grid-column: 1 / -1; }
}

.stat-rutenett em { display: block; font-style: normal; font-size: .8rem; margin-top: 2px; }

details.filter-boks { margin: 10px 0; }
details.filter-boks > summary { cursor: pointer; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); list-style: none; }
details.filter-boks > summary::-webkit-details-marker { display: none; }
details.filter-boks > summary::before { content: '▸ '; }
details.filter-boks[open] > summary::before { content: '▾ '; }
details.filter-boks .filter { margin-top: 8px; }
.kal-topp-rad { margin-bottom: 4px; }
.kal-kontroll { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.kal-kontroll .knapp { margin-top: 0; white-space: nowrap; }
.kal-kontroll select { flex: 1; min-width: 0; width: auto; }
details.mal-boks .rad { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
details.mal-boks .rad select { flex: 1; min-width: 0; }
details.mal-boks .rad .knapp { margin-top: 0; }
@media (max-width: 700px) {
  .topp nav { flex-wrap: nowrap; justify-content: space-between; }
  .topp nav a { padding: 6px 8px; font-size: .95rem; white-space: nowrap; }
}

.ny-reg { margin: 6px 0 10px; }
.ny-reg .knapp { margin-top: 0; }

.ved-siden { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ved-siden select { width: 100%; }
.mal-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.mal-chip { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); color: var(--tekst); text-decoration: none; font-size: .92rem; }
.mal-chip:hover, .mal-chip.valgt { background: var(--blaa-moerk); }

select.mal-velg { padding: 6px 10px; font-size: .92rem; margin: 0 0 8px; }

.fn-liste { margin-top: 22px; }
details.fn-boks { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin: 0 0 8px; }
details.fn-boks > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; list-style: none; }
details.fn-boks > summary::-webkit-details-marker { display: none; }
details.fn-boks > summary::before { content: '▸ '; color: var(--dempet); }
details.fn-boks[open] > summary::before { content: '▾ '; }
details.fn-boks > :not(summary) { margin-left: 14px; margin-right: 14px; }
details.fn-boks > :last-child { margin-bottom: 14px; }
details.fn-boks h3 { margin-top: 10px; }

.stopp-rad { display: grid; grid-template-columns: 150px 1fr 1fr auto; gap: 6px; margin: 8px 0; align-items: center; }
.stopp-rad .knapp { margin-top: 0; }
details.stopp-boks { margin: 10px 0 14px; }
@media (max-width: 700px) {
  .stopp-rad { grid-template-columns: 1fr auto; }
  .stopp-rad select, .stopp-rad input { grid-column: 1; }
  .stopp-rad .knapp { grid-column: 2; grid-row: 1; }
}

.stopp-fremdrift { list-style: none; margin: 0 0 10px; padding: 0; }
.stopp-fremdrift li { padding: 3px 0; color: var(--dempet); }
.stopp-fremdrift li.ferdig { color: #86dcad; }
.stopp-fremdrift li.neste { color: var(--tekst); font-weight: 700; }
.neste-levering { border-color: var(--blaa); }
.stopp-levert { grid-column: 1 / -1; color: #86dcad; }

.lever-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.lever-liste li:first-child { border-top: 0; }
.lever-liste form { margin: 0; }
.lever-liste .knapp { margin-top: 0; }
.lever-liste .lever-tekst { color: var(--tekst); }
.lever-liste li.ferdig .lever-tekst { color: #86dcad; }

.blokk-kunde { background: rgba(160,100,220,.30); border-color: #b784ea; }
.blokk-retur { background: rgba(230,130,50,.30); border-color: #f0a060; }
.kal-lev { display: block; font-size: 11px; opacity: .9; }
.fase-prikk { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid; vertical-align: -2px; }

.lever-liste li { flex-wrap: wrap; }
.lever-liste form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lever-bilde { flex-basis: 100%; text-align: left; }
.lever-bilde .knapper { margin: 6px 0; }

.merke-kunde { background: rgba(160,100,220,.22); color: #cfa8f2; }
.merke-retur { background: rgba(230,130,50,.22); color: #f5b27a; }

.lever-liste form.spurt { flex-basis: 100%; }
.lever-bilde input[type=text] { width: 100%; margin: 6px 0; }
.apne-liste .lever-liste { margin: 0 0 8px; padding: 0 2px; }
.apne-liste .lever-liste li { border-top: 1px solid var(--line); }

.hel-bredde { grid-column: 1 / -1; }
.tildel-skjema { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 2px 10px; }
.tildel-skjema select, .tildel-skjema input[type=date] { flex: 1 1 140px; min-width: 0; width: auto; margin: 0; }
.tildel-skjema .knapp { margin: 0; }

.pa-gruppe { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pa-sjafor { font-weight: 700; padding: 9px 12px; background: var(--panel2); border-left: 4px solid var(--blaa); border-bottom: 1px solid var(--line); }
.pa-liste { list-style: none; margin: 0; padding: 0; }
.pa-liste li { border-top: 1px solid var(--line); }
.pa-liste li:first-child { border-top: 0; }
.pa-liste a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; color: inherit; text-decoration: none; }
.pa-liste a:hover { background: var(--panel2); }
.pa-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-hoyre { flex: none; text-align: right; }

.dag-knapp { font: inherit; font-size: .8rem; font-weight: 600; margin-left: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--tekst); cursor: pointer; vertical-align: middle; }
.dag-knapp[aria-expanded="true"] { border-color: #6aa3f0; }
.skjul-rad { margin: 8px 0 14px; }
#dag-panel { margin-bottom: 16px; }

.hei { flex-wrap: wrap; }
.dag-avslutt { font-size: .8rem; font-weight: 600; margin-left: 6px; padding: 3px 11px; border-radius: 999px; background: #c9453b; color: #fff; text-decoration: none; vertical-align: middle; }

/* Forsidens hilsen: alt på én linje, også på smal skjerm */
.hei { flex-wrap: nowrap; font-size: 1rem; gap: 6px; align-items: center; }
.hei .hei-navn { white-space: nowrap; }
.hei .dag-knapp, .hei .dag-avslutt { font-size: .72rem; margin-left: 4px; padding: 2px 7px; }
.hei .prikk { width: 8px; height: 8px; margin-right: 3px; box-shadow: 0 0 0 3px rgba(63,166,109,.25); }
.hei .hei-klokke { font-size: .72rem; margin-left: auto; }

.pall-rad { display: grid; grid-template-columns: 1fr 110px auto; gap: 6px; margin: 8px 0; align-items: center; }
.pall-rad .knapp { margin-top: 0; }
.pall-boks h3 { margin: 0 0 6px; }
.kompakt-tabell { width: 100%; border-collapse: collapse; }
.kompakt-tabell th, .kompakt-tabell td { padding: 5px 4px; border-top: 1px solid var(--line); text-align: left; }
.kompakt-tabell th.tall, .kompakt-tabell td.tall { text-align: right; }

.faneknapper { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.faneknapper .knapp { flex: 1 1 0; text-align: center; margin: 0; }
@media (min-width: 700px) { .faneknapper { width: auto; } .faneknapper .knapp { flex: 0 0 auto; } }

.som-sjafor { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(230,160,40,.18); border: 1px solid #e6a028; border-radius: 8px; padding: 8px 12px; margin: 10px 0; font-size: .9rem; }
.som-sjafor .knapp { margin: 0; }
.stat-rutenett span small { font-size: .8rem; font-weight: 400; color: var(--dempet); }

.velg-sjafor { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.velg-sjafor label { margin: 0; }
.velg-sjafor select { flex: 1 1 auto; max-width: 280px; }

.slett-skjema { display: inline; margin-left: 8px; }

.faktura-liste { list-style: none; margin: 8px 0; padding: 0; }
.faktura-liste li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linje, rgba(255,255,255,.12)); }
.faktura-liste li.mangler-pris { background: rgba(230,160,40,.08); }
.faktura-pris { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.faktura-sum { margin: 8px 0 0; }
.faktura-handling .knapper { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.spesifikasjon { white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 60vh; overflow: auto; background: var(--panel2); padding: 10px; border-radius: 8px; }

/* Forside: nøkkeltall, varsler og siste hendelser */
.nokkeltall { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.nokkeltall-rute { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: inherit; text-decoration: none; }
.nokkeltall-rute strong { font-size: 1.5rem; line-height: 1.2; }
.nokkeltall-rute.advarsel { border-color: #d0a23a; }
.varsel-rad { margin-top: 10px; }
.sen-start-skjema { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sen-start-skjema label { margin: 0; }
.sen-start-skjema input[type=time] { width: auto; margin: 0; }
.hendelser { list-style: none; margin: 0; padding: 0; }
.hendelser li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hendelser li:last-child { border-bottom: 0; }

/* Ekstra menylinje for administrator */
.topp nav.meny2 { order: 4; gap: 4px 6px; margin-top: -4px; padding-top: 6px; border-top: 1px solid var(--line); }
.topp nav.meny2 a { font-size: .88rem; color: var(--dempet); padding: 4px 10px; }
.topp nav.meny2 a.aktiv { color: var(--tekst); background: var(--blaa-moerk); }
@media (max-width: 640px) {
  .topp nav.meny2 { flex-wrap: nowrap; justify-content: flex-start; gap: 4px; }
  .topp nav.meny2 a { flex: 1 1 auto; text-align: center; background: var(--panel2); white-space: nowrap; padding: 4px 6px; font-size: .82rem; }
  .topp nav.meny2 a.aktiv { background: var(--blaa-moerk); }
}

/* «+ Ny»-meny */
.topp .ny-meny { position: relative; }
.topp .ny-meny summary { list-style: none; cursor: pointer; padding: 6px 12px; border-radius: 8px; color: var(--tekst); }
.topp .ny-meny summary::-webkit-details-marker { display: none; }
.topp .ny-meny summary:hover, .topp .ny-meny[open] summary { background: var(--panel2); }
.topp .ny-meny summary.aktiv { background: var(--blaa-moerk); }
.topp .ny-meny .ny-valg { position: absolute; left: 0; top: 100%; margin-top: 4px; min-width: 190px; z-index: 50; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.topp .ny-meny .ny-valg a, .topp .ny-meny .ny-valg .av { display: block; padding: 10px 12px; border-radius: 8px; white-space: nowrap; font-size: 1rem; }
.topp .ny-meny .ny-valg .av { color: var(--dempet); cursor: default; }
@media (max-width: 640px) { .topp .ny-meny summary { padding: 6px 8px; font-size: .95rem; white-space: nowrap; } }

/* Utvidbare rader i oppdragslisten */
.oppdragsliste tr.orad { cursor: pointer; }
.oppdragsliste tr.orad:hover td, .oppdragsliste tr.orad[aria-expanded="true"] td { background: var(--panel2); }
.oppdragsliste tr.detalj[hidden] { display: none !important; }
.oppdragsliste td.detalj-celle { display: block; background: var(--panel2); text-align: left; padding: 12px 14px; }
.oppdragsliste td.detalj-celle::before { content: none; }
.detalj-rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; margin-bottom: 12px; }
.pris-skjema { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pris-skjema label { margin: 0; }
.pris-skjema input[type="text"] { width: 9rem; }
@media (min-width: 641px) { .oppdragsliste td.detalj-celle { display: table-cell; } }
@media (max-width: 640px) { .oppdragsliste tr.detalj { margin-top: -10px; border-top: 0; border-radius: 0 0 10px 10px; } .oppdragsliste td.detalj-celle { padding: 8px 0; background: transparent; } }

/* Søkbar kundeliste */
.kunde-sok { position: relative; }
.kunde-resultat { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; max-height: 50vh; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.kunde-resultat li { padding: 11px 12px; border-radius: 8px; cursor: pointer; }
.kunde-resultat li.aktiv, .kunde-resultat li:hover { background: var(--panel2); }
.kunde-resultat li.ingen { color: var(--dempet); cursor: default; }

.varsel-rad .fri-skjema { display: inline-block; margin: 0 0 0 10px; }

/* Egne farger: Lastet (gul) og Levert (grønn) */
.knapp.knapp-lastet { background: var(--gul); color: #1f1a0b; }
.knapp.knapp-lastet:hover { background: #dcb04a; }
.knapp.knapp-levert { background: var(--gronn); color: #0c2216; }
.knapp.knapp-levert:hover { background: #4cb87c; }

/* Avskjær */
.avskjaer-tider { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.avskjaer-tider > div { display: flex; flex-direction: column; }
.avskjaer-tider strong { font-size: 1.1rem; }
.tid-start strong { color: #4cc38a; }
.tid-stopp strong { color: #ef7b6b; }
.lasstabell tr.lass-rad-start td, .lasstabell tr.lass-rad-stopp td { background: rgba(255,255,255,.05); text-align: left; }
.lasstabell tr.lass-rad-start td:first-child { color: #4cc38a; }
.lasstabell tr.lass-rad-stopp td:first-child { color: #ef7b6b; }
.avskjaer-sum { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 10px 0 14px; }
.avskjaer-sum div { display: flex; flex-direction: column; }
.avskjaer-sum strong { font-size: 1.25rem; }
.lass-skjema { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 14px; padding: 12px; background: var(--panel2); border-radius: 10px; }
.lass-skjema > div { flex: 1 1 140px; min-width: 0; }
.lass-skjema input, .lass-skjema select { width: 100%; min-width: 0; box-sizing: border-box; }
.lass-skjema .lass-sted, .lass-skjema .lass-sjafor { flex: 1 1 100%; }
.lass-skjema .lass-tid { flex: 1 1 190px; }
.lass-skjema .lass-tonn { flex: 0 0 84px; }
.lass-skjema .lass-tonn input { text-align: center; }
.lass-skjema .knapp { flex: 1 1 100%; }
.avskjaer-steder { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 8px 0; }
.lasstabell { width: 100%; border-collapse: collapse; margin-top: 6px; }
.lasstabell th { text-align: left; color: var(--dempet); font-weight: 500; font-size: .85rem; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.lasstabell td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.lasstabell td:last-child { text-align: right; }
.lasstabell form { margin: 0; }
.avskjaer-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.avskjaer-knapper form { margin: 0; }

/* Flytesparkel */
.adresser { display: flex; flex-direction: column; gap: 8px; }
.adresse-rad { display: flex; gap: 8px; align-items: center; }
.adresse-rad input { flex: 1; min-width: 0; margin: 0; }
.adresse-liste { margin: 8px 0 12px 1.2em; padding: 0; }
.adresse-liste li { padding: 2px 0; }
.mellomtittel { margin: 20px 0 8px; font-size: 1.05rem; }

.adresse-rad input.kg-felt { flex: 0 0 6rem; width: 6rem; }
.kg-total { margin-left: 12px; }

.adresse-rad { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; background: var(--panel2); border-radius: 10px; }
.adresse-under { display: flex; gap: 8px; align-items: center; }
.adresse-under .masse-felt { flex: 1; min-width: 0; margin: 0; }
.adresse-under .kg-felt { flex: 0 0 6rem; width: 6rem; margin: 0; }

.masse-velger { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.masse-velger select, .masse-velger input { margin: 0; }

.avslutt-skjema { margin-top: 14px; padding: 12px; background: var(--panel2); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.brukt-rad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.brukt-rad label { margin: 0; flex: 1 1 200px; }
.brukt-rad input { margin: 0; }
.jobb-kommentar { padding: 8px 10px; background: var(--panel2); border-radius: 8px; }

.ferger { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ferge-rad { display: flex; gap: 8px; align-items: center; }
.ferge-rad input { flex: 1; min-width: 0; margin: 0; }

.avstand-info { margin: 10px 0; padding: 10px; background: var(--panel2); border-radius: 10px; }

/* Oppdragslisten (admin): tydeligere avsender/mottaker og mindre brudd i korte kolonner */
.oppdragsliste { --fra: #e0b04a; --til: #5cc8d6; }
.oppdragsliste td.fb-nr, .oppdragsliste td[data-label="Dato"], .oppdragsliste td.km-celle, .oppdragsliste td[data-label="Pris"] { white-space: nowrap; }
.oppdragsliste td.fb-nr a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.oppdragsliste td.strekning { min-width: 300px; }
.oppdragsliste .sted { display: flex; align-items: baseline; gap: 8px; padding: 3px 0 3px 10px; border-left: 4px solid var(--fra); margin: 2px 0; line-height: 1.35; text-align: left; }
.oppdragsliste .sted-til { border-left-color: var(--til); }
.oppdragsliste .sted-merke { flex: none; min-width: 2.2em; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fra); }
.oppdragsliste .sted-til .sted-merke { color: var(--til); }
.oppdragsliste .sted-tekst { color: var(--tekst); }
@media (min-width: 641px) { .oppdragsliste td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; } .oppdragsliste thead th { white-space: nowrap; } }
@media (max-width: 640px) { .oppdragsliste td.strekning { display: block; min-width: 0; } .oppdragsliste td.strekning::before { display: block; margin-bottom: 4px; } }

/* Flytesparkel: start/ferdig-tider */
.tidsboks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 10px 0 6px; padding: 10px 12px; background: var(--panel2); border-radius: 10px; }
.tidsboks > div { display: flex; flex-direction: column; min-width: 7rem; }
.tidsboks strong { font-size: 1.05rem; }
.tidsboks-advarsel { outline: 2px solid #d97706; }
.tidsboks-varsel { margin: 4px 0; color: #b45309; font-weight: 600; }
.endre-tider { margin: 4px 0 10px; }
.endre-tider > summary { cursor: pointer; padding: 6px 0; color: var(--accent, inherit); text-decoration: underline; }
.endre-tider .tid-felter { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.endre-tider .tid-felter > div { flex: 1 1 12rem; }
.endre-tider input[type=datetime-local] { width: 100%; }

/* Forside: funfact-tall (én tabell, kolonnene flukter) */
.funfact { margin-top: 18px; }
.funfact h2 { margin-bottom: 10px; }
.funfact-tabell { width: 100%; table-layout: fixed; border-collapse: collapse; background: transparent; }
.funfact-tabell col.etikett { width: 40%; }
.funfact-tabell th, .funfact-tabell td { padding: 6px 8px; border: 0; text-align: right; white-space: nowrap; background: transparent; }
.funfact-tabell thead th { font-size: .8rem; color: var(--dempet); font-weight: 600; border-bottom: 1px solid var(--line); }
.funfact-tabell th:first-child, .funfact-tabell td:first-child { text-align: left; white-space: normal; }
.funfact-tabell tr.ff-gruppe th { padding-top: 16px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst); text-align: left; border-bottom: 1px solid var(--line); }
.funfact-tabell tbody td { border-bottom: 1px solid var(--line); }
.funfact-tabell tbody tr:last-child td { border-bottom: 0; }
.funfact-tabell td:first-child { color: var(--dempet); }
.funfact-tabell td strong { font-weight: 600; }
@media (max-width: 480px) { .funfact-tabell th, .funfact-tabell td { padding: 6px 4px; font-size: .9rem; } .funfact-tabell col.etikett { width: 34%; } }

/* Oppdragslisten: kompakt tabell uten at kolonner havner bak knappene */
.detalj-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
@media (min-width: 701px) {
  .oppdragsliste th, .oppdragsliste td { padding-left: 8px; padding-right: 8px; }
  .oppdragsliste td.strekning { min-width: 230px; max-width: 320px; }
  .oppdragsliste td.handling { white-space: normal; width: 1%; }
  .oppdragsliste td.handling .knapp, .oppdragsliste td.handling a { display: block; text-align: center; margin: 0 0 6px; padding: 6px 10px; }
  .oppdragsliste td.handling form { display: block; margin: 0; }
  .oppdragsliste td.handling form .knapp { width: 100%; margin: 0 0 6px; }
}

/* Oppdragslisten: flere stopp og sammenslåtte celler */
.oppdragsliste { --ekstra: #b695f0; --retur: #86c79a; }
.oppdragsliste .sted-ekstra { border-left-color: var(--ekstra); }
.oppdragsliste .sted-ekstra .sted-merke { color: var(--ekstra); }
.oppdragsliste .sted-retur { border-left-color: var(--retur); }
.oppdragsliste .sted-retur .sted-merke { color: var(--retur); }
.oppdragsliste .sted-merke { min-width: 3.2em; }
.oppdragsliste .stopp-ok { color: var(--retur); font-weight: 700; }
.oppdragsliste .celle-under { display: inline-block; margin-top: 4px; }
.oppdragsliste td.pris-celle { min-width: 7.5rem; }
.oppdragsliste .pris-tall { white-space: nowrap; }
.ff-ramme { border: 0; border-radius: 0; overflow: visible; }
.oppdragsliste .sted-merke { width: 3.6em; min-width: 3.6em; }

/* Flytesparkel: avvik bestilt/brukt */
.avvik-celle { white-space: nowrap; }
.avvik-over { color: #f0b36a; }
.avvik-under { color: #8fc1ff; }
.avvik-null { color: var(--dempet); }

/* Ferger */
.ferge-linje { margin: 4px 0 8px; }
.ferge-linje::before { content: "⛴ "; }
.ferge-boks { margin: 6px 0; }

/* Flytesparkel: kompakt liste og tidsfelter i redigering */
.kortliste .nowrap { white-space: nowrap; }
.kortliste .celle-under { display: block; margin-top: 2px; font-size: .85em; color: var(--dempet); }
.kortliste .celle-under.avvik-over { color: #d9822b; }
.kortliste .celle-under.avvik-under { color: #4a8fd4; }
.tid-felter { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.tid-felter > div { flex: 1 1 12rem; }

/* Rute: hent og lever under hverandre */
.rute { display: block; margin: 6px 0 4px; }
.rute-pkt { display: block; position: relative; padding: 0 0 10px 24px; min-width: 0; }
.rute-pkt:last-child { padding-bottom: 2px; }
.rute-pkt::before { content: ''; position: absolute; left: 3px; top: 7px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--dempet); background: var(--panel); }
.rute-til::before { border-color: var(--blaa); background: var(--blaa); }
.rute-pkt::after { content: ''; position: absolute; left: 7px; top: 20px; bottom: -4px; width: 2px; background: var(--line); }
.rute-pkt:last-child::after { display: none; }
.rute-merke { display: block; font-size: .7rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .05em; color: var(--dempet); }
.rute-navn { display: block; font-weight: 600; overflow-wrap: anywhere; }
.rute-adr { display: block; color: var(--dempet); font-size: .9rem; overflow-wrap: anywhere; }

/* Firma og adresse i to bokser */
.sted-par { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sted-par input { margin: 0; }
.sted-par .sted-firma { font-weight: 600; }
@media (max-width: 700px) { .stopp-rad .sted-par { grid-column: 1; } }

/* Steder og kunder (admin) */
.steder-faner { margin: 8px 0 12px; }
.steder-sok { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.steder-sok input[type="search"] { flex: 1; min-width: 0; margin: 0; }
.steder-rediger summary { cursor: pointer; list-style: none; display: inline-block; }
.steder-rediger summary::-webkit-details-marker { display: none; }
.steder-skjema { min-width: 17rem; padding: 8px 0 4px; }
.steder-skjema input { margin-bottom: 6px; }

/* Lenker til kart */
.kart-lenke, .sted-kart { font-size: .85rem; white-space: nowrap; text-decoration: none; }
.sted-kart[hidden] { display: none; }

.punkt-label { display: block; font-size: .9rem; color: var(--dempet); overflow-wrap: anywhere; }

/* Steder: mulige duplikater */
.dup-boks { border-left: 4px solid var(--gul, #e0a800); margin-bottom: 14px; }
.dup-boks ul { margin: 6px 0 0; padding-left: 18px; }
.dup-gruppe { border-top: 1px solid var(--linje, #ddd); padding: 8px 0; }
.dup-valg { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; cursor: pointer; }
.dup-valg input { width: auto; margin-top: 3px; flex: none; }
.dup-gruppe .knapp { margin-top: 6px; }
.punkt-celle .merke { margin: 4px 6px 0 0; }
.punkt-celle .kart-lenke { display: inline-block; margin-top: 4px; }
.dup-grunn { font-weight: 600; padding-bottom: 2px; }

/* Oppdragskort på forsiden: hele kortet åpner oppdraget (strukket lenke), men kartlenkene i ruten virker selv */
.apne-kort { position: relative; padding: 10px 2px; }
.apne-kort:hover { background: var(--panel2); }
.apne-liste .apne-kort a.apne-lenke { display: block; padding: 0; }
.apne-liste .apne-kort a.apne-lenke:hover { background: none; }
.apne-kort a.apne-lenke::after { content: ''; position: absolute; inset: 0; }
.apne-liste .apne-kort a.rute-kart { display: block; position: relative; z-index: 1; padding: 0; color: inherit; text-decoration: none; }
.apne-liste .apne-kort a.rute-kart:hover { background: none; }
.apne-kort .rute-kart .rute-navn { color: inherit; }
.apne-kort .rute-kart:hover .rute-navn { text-decoration: underline; }
.rute-nal { font-size: .8rem; white-space: nowrap; }
.rute-kart { color: inherit; text-decoration: none; display: block; }
.sted-lenke { color: inherit; text-decoration: none; }
.sted-lenke:hover { text-decoration: underline; }
.lever-liste .lever-tekst { min-width: 0; overflow-wrap: anywhere; }
.apne-liste a.sted-lenke { display: inline; padding: 0; }
.apne-liste a.sted-lenke:hover { background: none; }

/* Tydeligere skille mellom oppdragskortene i listene */
.apne-liste > li { border-top: 2px solid rgba(255,255,255,.28); margin-top: 8px; padding-top: 8px; }
.apne-liste > li:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* Oppdragslisten: tid, type og status på én linje; alle steder med firmanavn og avstand */
.rute-liste { list-style: none; margin: 0; padding: 0; }
.rute-liste li { display: flex; gap: 8px; align-items: baseline; padding: 1px 0; }
.rl-merke { flex: none; width: 4.2rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dempet); }
.rl-navn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rl-km { flex: none; font-size: .85rem; color: var(--dempet); white-space: nowrap; }
@media (max-width: 700px) {
  table.oppdrag-kort tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  table.oppdrag-kort td { width: 100%; }
  table.oppdrag-kort td.c-tid, table.oppdrag-kort td.c-type, table.oppdrag-kort td.c-status { width: auto; border-bottom: 0; padding: 2px 0 8px; }
  table.oppdrag-kort td.c-tid::before, table.oppdrag-kort td.c-type::before, table.oppdrag-kort td.c-status::before, table.oppdrag-kort td.c-rute::before { content: none; }
  table.oppdrag-kort td.c-tid { font-weight: 600; }
  table.oppdrag-kort td.c-status { margin-left: auto; }
  table.oppdrag-kort td.c-rute { display: block; text-align: left; }
  table.oppdrag-kort td.kunde { border-top: 1px solid rgba(255,255,255,.06); }
}
.rl-total { border-top: 1px dashed rgba(255,255,255,.15); margin-top: 3px; padding-top: 3px; font-weight: 600; }
.apne-kort .rute-liste { margin: 8px 0 4px; }
.avstand-linje { display: block; margin-top: 2px; }
.merke-type { background: rgba(255,255,255,.09); color: var(--tekst); }
.rl-gods { margin-top: 4px; padding-left: calc(4.2rem + 8px); font-size: .88rem; color: var(--dempet); }
@media (max-width: 700px) {
  table.oppdrag-kort td.c-kunde { justify-content: flex-start; align-items: center; text-align: left; }
  table.oppdrag-kort td.c-kunde .k-navn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  table.oppdrag-kort td.c-kunde .merke { flex: none; margin-left: auto; }
}

/* Admin-oppdragslisten: gods og kommentar */
.gods-info { display: block; margin-top: 3px; font-size: .88rem; color: var(--dempet); }
.kommentar-celle { font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere; max-width: 24rem; }
@media (max-width: 700px) {
  table.oppdragsliste td.kommentar-celle { display: block; text-align: left; background: rgba(224,168,0,.10); border-left: 3px solid #e0a800; border-radius: 6px; padding: 6px 10px; margin: 6px 0; max-width: none; }
  table.oppdragsliste td.kommentar-celle::before { display: block; margin-bottom: 2px; }
  table.oppdragsliste td[data-label="Gods"] { align-items: center; }
  table.oppdragsliste td[data-label="Gods"] .gods-info { margin-top: 0; text-align: right; }
}
.gods-celle { text-align: inherit; }

/* Faner på faktureringssidene og pris-felt for avskjær */
.faner { display: flex; gap: 8px; margin: 4px 0 14px; }
.faner a { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; }
.faner a.aktiv { background: var(--panel2); font-weight: 600; border-color: currentColor; }
.faktura-pris .pris-felt { width: 7.5em; text-align: right; padding: 5px 8px; }
@media (max-width: 700px) { .faktura-pris .pris-felt { width: 6.5em; } }
.avskjaer-fraktbrev { margin-top: 10px; }
@media (max-width: 700px) { .faktura-liste li.avskjaer-rad { flex-direction: column; } .avskjaer-rad .faktura-pris { text-align: left; white-space: normal; } }
.lass-skjema .lass-tid input, .lass-skjema .lass-tonn input { height: 46px; }
.start-ny > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; list-style: none; }
.start-ny > summary::-webkit-details-marker { display: none; }
.start-ny > summary::before { content: '▸'; color: var(--dempet); }
.start-ny[open] > summary::before { content: '▾'; }
.start-ny > summary h2 { margin: 0; }
.start-ny[open] > summary { margin-bottom: 10px; }

/* Til toppen-pil */
.til-toppen { position: fixed; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel2); color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.45); z-index: 60; opacity: .92; }
.til-toppen:hover { opacity: 1; }
.til-toppen[hidden] { display: none; }
@media print { .til-toppen { display: none; } }

/* Låst meny (valg i Min profil): menyen ligger fast øverst. Logo, admin-meny og navn skjules når man har scrollet. */
.topp.fast { position: sticky; top: 0; z-index: 55; }
.topp.fast.kompakt .logo-lenke, .topp.fast.kompakt nav.meny2, .topp.fast.kompakt .logout { display: none; }
.topp.fast.kompakt .topp-inn { padding-top: 6px; padding-bottom: 6px; }
.lass-skjema .bekreft-lass { flex: 1 1 100%; margin: 0; }

/* Avskjær: trykk for å rette tid og tonn */
.rediger-knapp { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rediger-knapp:hover strong, .rediger-knapp:hover { text-decoration: underline dotted; }
.rediger-knapp .penn { color: var(--dempet); font-size: .85em; }
.lasstabell tr.rediger-rad[hidden] { display: none; }
.lasstabell tr.rediger-rad td { text-align: left; background: var(--panel2); }
.rediger-skjema { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0; }
.rediger-skjema > div { flex: 1 1 190px; min-width: 0; }
.rediger-skjema .rediger-tonn { flex: 0 0 90px; }
.rediger-skjema input { width: 100%; box-sizing: border-box; min-width: 0; height: 42px; }
.rediger-skjema .rediger-tonn input, .rediger-skjema .rediger-tid input { min-width: 0; width: 100%; }

/* Sikkerhetskopi-siden: lange lenker og tabeller skal ikke gjøre siden bredere */
.backup-side { max-width: 100%; overflow-x: hidden; }
.backup-side .kort { min-width: 0; max-width: 100%; }
.backup-side .kodeboks { display: block; max-width: 100%; box-sizing: border-box; overflow-x: auto; white-space: nowrap; padding: 8px 10px; margin: 6px 0 12px; font-size: 13px; -webkit-overflow-scrolling: touch; }
.backup-side .akt-tabell { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.backup-side .akt-tabell th, .backup-side .akt-tabell td { padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.backup-side .akt-tabell th:first-child, .backup-side .akt-tabell td:first-child { width: 46%; text-align: left; }
.backup-side .akt-tabell th.tall { font-size: 12px; font-weight: 600; }
.backup-side input[type=email], .backup-side input[type=text] { min-width: 0; max-width: 100%; box-sizing: border-box; }
.backup-side .akt-tabell th { white-space: normal; line-height: 1.25; }
.backup-side .akt-tabell th .liten-tekst { display: block; font-size: 12px; font-weight: 400; }
.backup-side .akt-tabell th:first-child, .backup-side .akt-tabell td:first-child { width: 40%; }

/* Kopier-knapper */
.kopier-knapp { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 8px; color: var(--dempet); cursor: pointer; flex: none; }
.kopier-knapp:hover { color: var(--tekst); background: var(--panel2); }
.kopier-knapp.kopiert { color: var(--gronn); }
.kopier-knapp.kopi-feil { color: #e0675a; }
.rute-pkt { padding-right: 38px; }
.rute-pkt > .kopier-knapp { position: absolute; right: 0; top: 2px; z-index: 2; }
.apne-kort > .kopier-knapp.kunde-kopi { position: absolute; right: 0; top: 6px; z-index: 2; }
.apne-kort .apne-topp { padding-right: 38px; }
.kopi-wrap { display: block; position: relative; min-width: 0; }
.kopi-wrap > input, .kopi-wrap > textarea { padding-right: 42px; }
.kopi-wrap > .kopier-knapp { position: absolute; right: 3px; top: 4px; display: none; }
.kopi-wrap > input:not(:placeholder-shown) + .kopier-knapp, .kopi-wrap > textarea:not(:placeholder-shown) + .kopier-knapp { display: inline-flex; }
.adresse-rad > .kopi-wrap { flex: 1; min-width: 0; }
@media (max-width: 700px) { .stopp-rad .kopi-wrap { grid-column: 1; } }

/* Kundefilter på oppdragslisten */
.kf-wrap { position: relative; }
.kf-wrap > input { padding-right: 42px; }
.kf-pil { position: absolute; right: 3px; top: 4px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--dempet); font-size: 1rem; cursor: pointer; }
.kf-pil:hover { background: var(--panel2); color: var(--tekst); }
.kf-liste { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); -webkit-overflow-scrolling: touch; }
.kf-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 8px; cursor: pointer; }
.kf-liste li[hidden] { display: none; }
.kf-liste li.aktiv, .kf-liste li:hover { background: var(--panel2); }
.kf-liste li.kf-ingen { cursor: default; color: var(--dempet); }
.kf-liste .kf-navn { overflow-wrap: anywhere; }

/* Kompakt oppdragsvisning i kalenderen */
.kal-linje { display: block; font-size: .85rem; line-height: 1.35; overflow-wrap: anywhere; }
.kal-ledd { display: inline-block; min-width: 2.9em; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.kal-linje .kal-tid { white-space: nowrap; opacity: .9; }
.kal-periode { font-size: .78rem; opacity: .8; white-space: nowrap; }
.kal-forts { display: block; font-size: .75rem; opacity: .75; margin-top: 2px; }
.kal-blokk .kal-linje { font-size: .72rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-blokk .kal-ledd { min-width: 0; margin-right: 2px; }
/* Mobil på tvers: bruk dagslisten også her, rutenettet blir for trangt */
@media (pointer: coarse) and (max-height: 520px) {
  .kalender { display: none; }
  .kal-agenda { display: block; }
}

.kal-overfort { display: block; margin-top: 3px; padding: 2px 6px; border-radius: 6px; background: rgba(224,176,60,.18); color: var(--tekst); font-size: .76rem; line-height: 1.3; }
.kal-blokk .kal-overfort { font-size: .68rem; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Kalender: visningsvalg (dag/uke/måned) */
.kal-visning { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 2px 0 6px; }
.kal-visning a { padding: 6px 16px; color: var(--tekst); text-decoration: none; font-size: .9rem; background: var(--panel2); }
.kal-visning a + a { border-left: 1px solid var(--line); }
.kal-visning a.aktiv { background: var(--blaa); color: #fff; font-weight: 600; }

/* Dagsvisning: ett bredt døgn med mer info */
.kalender.dag-vis { grid-template-columns: 52px minmax(0, 1fr); }
.kalender.dag-vis .kal-time { height: 60px; }
.kalender.dag-vis .kal-kropp { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 59px, rgba(255,255,255,.07) 59px, rgba(255,255,255,.07) 60px); }
.kalender.dag-vis .kal-blokk { font-size: .85rem; padding: 4px 8px; }
.kalender.dag-vis .kal-blokk .kal-linje { font-size: .82rem; white-space: normal; overflow: visible; }
.kal-adr { display: block; margin: 0 0 2px 3.1em; font-size: .75rem; opacity: .7; }
.kal-ekstra { display: block; font-size: .78rem; opacity: .85; margin-top: 2px; }
.kalender.dag-vis .kal-blokk .kal-ekstra { white-space: normal; }

/* Månedsvisning */
.kal-maaned { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.mnd-hode { text-align: center; font-weight: 600; font-size: .8rem; padding: 6px 0; background: var(--panel2); border-bottom: 1px solid var(--line); }
.mnd-dag { min-height: 92px; padding: 3px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.mnd-dag:nth-child(7n + 14) { border-right: 0; }
.mnd-dag.annen { opacity: .45; }
.mnd-dag.idag { background: rgba(59,125,221,.12); box-shadow: inset 0 0 0 2px var(--blaa); }
.mnd-nr { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; font-weight: 600; color: var(--tekst); text-decoration: none; padding: 1px 3px 3px; }
.mnd-nr .kal-prikk { width: 8px; height: 8px; border-width: 1px; }
.mnd-chip { display: block; margin-top: 2px; padding: 1px 4px; border-radius: 4px; border-left: 3px solid; font-size: .72rem; line-height: 1.3; color: var(--tekst); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnd-chip.forts { opacity: .75; }
.mnd-mer { display: block; margin-top: 2px; font-size: .72rem; color: var(--dempet); text-decoration: none; padding: 0 4px; }
@media (max-width: 700px) {
  .mnd-dag { min-height: 58px; padding: 2px; }
  .mnd-nr { font-size: .78rem; padding: 0 2px 2px; }
  /* Smal skjerm: oppdrag som fargestriper, trykk på datoen for detaljer */
  .mnd-chip { font-size: 0; height: 6px; padding: 0; border-left-width: 0; border-radius: 3px; margin-top: 3px; }
  .mnd-chip.blokk-planlagt { background: #6aa3f0; }
  .mnd-chip.blokk-lastet { background: #e0b84e; }
  .mnd-chip.blokk-levert { background: #55c088; }
  .mnd-chip.blokk-bomtur { background: #e57d74; }
  .mnd-mer { font-size: .68rem; padding: 0 2px; }
}
.kal-blokk .kal-linje > span { display: inline; }
.kal-blokk .kal-linje > .kal-ledd { display: inline-block; }
.backup-side .melding code { overflow-wrap: anywhere; word-break: break-all; }
.backup-side .melding .kodeboks { word-break: normal; }

/* Fraktbrev som liste */
.fb-liste { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.fb-liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.fb-liste .fb-navn { flex: 1 1 180px; min-width: 0; color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; }
.fb-liste .fb-ikon { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--rod); color: #fff; font-size: .7rem; font-weight: 700; vertical-align: middle; }
.fb-liste .fb-knapper { display: flex; gap: 6px; align-items: center; }
.fb-liste .fb-knapper form { margin: 0; display: inline-flex; gap: 6px; }
.fb-liste .knapp { margin: 0; }

/* Admin: faner for samlesider */
.admin-gruppe { display: flex; gap: 10px; align-items: baseline; margin: 2px 0 8px; font-size: 1.05rem; }
.admin-gruppe a { font-size: .85rem; color: var(--dempet); text-decoration: none; }
.admin-faner { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.admin-faner a { padding: 7px 14px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--tekst); text-decoration: none; font-size: .9rem; }
.admin-faner a.aktiv { background: var(--blaa); border-color: var(--blaa); color: #fff; font-weight: 600; }

.topp nav a.admin-hjul { font-size: 1.3rem; line-height: 1; }

/* Dag for dag (admin, PC) */
.dag-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.dag-filter label { margin: 0; color: var(--dempet); font-size: .85rem; }
.dag-filter select, .dag-filter input[type=date] { width: auto; margin: 0; }
.dag-filter .knapp { margin: 0; }
.dag-akk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 1100px; }
.dag-rad { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.dag-rad.aapen { border-color: var(--blaa); }
.dag-hode { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; color: var(--tekst); text-decoration: none; }
.dag-hode:hover { background: var(--panel2); }
.dag-rad.aapen > .dag-hode { background: var(--blaa-moerk); }
.dag-pil { display: inline-block; width: 1em; transition: transform .15s; color: var(--dempet); }
.dag-rad.aapen .dag-pil { transform: rotate(90deg); }
.dag-antall { margin-left: auto; }
.dag-boks { padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.dag-boks[hidden] { display: none; }
.dag-lukk-rad { margin: 10px 0 0; text-align: right; }
.dag-lukk-rad .knapp { margin: 0; }
.dag-arbeid ul { list-style: none; margin: 6px 0 0; padding: 0; }
.dag-arbeid li { padding: 3px 0; }
.maane { font-size: 1.1rem; }
.dag-linjer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dag-linje { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; border: 1px solid var(--line); border-left: 4px solid var(--blaa); border-radius: 8px; background: var(--panel); }
.dag-linje.type-flyt { border-left-color: #b98ae0; }
.dag-linje.type-avskjaer { border-left-color: #e0b84e; }
.dag-type { width: 64px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dempet); }
.dag-tittel { flex: 1 1 320px; min-width: 0; color: var(--tekst); text-decoration: none; }
.dag-tittel:hover strong { text-decoration: underline; }
.dag-rute { display: block; font-size: .85rem; color: var(--dempet); overflow-wrap: anywhere; }
.dag-tid { white-space: nowrap; font-size: .88rem; }
.dag-fb { margin: 0; }

/* Ukehvile */
.hvile-varsel { margin: 8px 0; }
.melding.hvile-gul { background: rgba(224,176,60,.16); border-color: #e0b03c; }
.hvile-sjafor { padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.hvile-sjafor:last-of-type { border-bottom: 0; }
.hvile-navn { display: block; }
.hvile-status { margin: 2px 0 6px; }
.hvile-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hvile-liste li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.hvile-tid { color: var(--dempet); font-size: .9rem; }
.hvile-over { color: var(--rod); }
.hvile-underskudd { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); }

.hvile-sporsmal .hvile-valg { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.hvile-valg-rad { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.hvile-valg-rad input { margin-top: 4px; }
.hvile-valg-rad small { color: var(--dempet); }
.hvile-komp-for { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.hvile-komp-for legend { font-weight: 600; padding: 0 6px; }