: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 img { display: block; height: 40px; width: auto; }
.topp nav { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1; }
.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 { 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 { height: 32px; }
  .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; }
.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; }
}