@font-face { font-family: "Kanit"; src: url("fonts/Kanit-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("fonts/Kanit-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --navy: #090C33; --navy2: #262C52; --navy3: #61698F; --navy4: #909ABD; --navy5: #BAC3D9; --navy6: #D6DDEE; --navy7: #EBF0FA;
  --lime: #EEFF76; --lime2: #F4FFAF; --lime3: #F9FFD7;
  --gul1: #FFEEBD; --gul2: #F8C947; --gul3: #664400;
  --rød1: #FFE2E2; --rød2: #FA5A62; --rød3: #8C0008;
  --grøn1: #D4F7E6; --grøn2: #1FCC8C; --grøn3: #00593E;
  --top: env(safe-area-inset-top, 0px); --bund: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--navy7); color: var(--navy); }
body { font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
h1, h2, h3, .titel { font-family: "Kanit", -apple-system, sans-serif; font-weight: 600; letter-spacing: .01em; }
h2 { font-size: 20px; margin: 26px 0 10px; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 17px; margin: 0 0 10px; }
a { color: var(--navy); }
main { max-width: 760px; margin: 0 auto; padding: 8px 14px 40px; }
.indlæser { padding: 40vh 0; text-align: center; color: var(--navy3); }

/* topbar */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px;
       padding: calc(10px + var(--top)) 14px 10px; background: var(--navy); color: #fff; }
.top .logo { width: 30px; height: 30px; border-radius: 7px; }
.top .titel { flex: 1; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .højre { display: flex; align-items: center; gap: 8px; }
.tilbage { color: #fff; text-decoration: none; font-size: 34px; line-height: 1; padding: 0 8px 4px 0; }
.ikonknap { background: none; border: 0; color: #fff; font-size: 24px; padding: 2px 6px; cursor: pointer; }
.sync { font-size: 12px; padding: 4px 9px; border-radius: 99px; white-space: nowrap; font-weight: 600; }
.sync.ok { background: rgba(31, 204, 140, .18); color: #9FF0CF; }
.sync.vent, .sync.kører { background: var(--lime); color: var(--navy); }
.sync.offline { background: rgba(255, 255, 255, .14); color: #fff; }
.sync.fejl { background: var(--rød2); color: #fff; }

/* kort og lister */
.kort { display: block; background: #fff; border-radius: 14px; padding: 14px 16px; margin: 0 0 10px;
        text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(9, 12, 51, .05); }
a.kort:active { background: var(--lime3); }
.kort.besøg.igang { border: 2px solid var(--navy); }
.række { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.linje { padding: 6px 0; border-top: 1px solid var(--navy7); }
.dæmpet { color: var(--navy3); font-size: 14px; }
.lille { font-size: 13px; }
.midt { text-align: center; }
.tom { color: var(--navy3); font-size: 14px; margin: 4px 0 12px; }
.tæller { font-family: -apple-system, sans-serif; font-size: 13px; background: var(--navy6); border-radius: 99px; padding: 1px 9px; }
.handling { margin-top: 8px; font-weight: 600; }
.resume { margin: -2px 0 6px; }
.pakke { font-size: 12px; font-weight: 600; background: var(--navy7); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.pille { font-size: 12px; font-weight: 600; border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.p-ok, .p-afsluttet, .p-aktiv { background: var(--grøn1); color: var(--grøn3); }
.p-bemaerkning, .p-opstart, .p-planlagt { background: var(--gul1); color: var(--gul3); }
.p-skade { background: var(--rød1); color: var(--rød3); }
.p-igang { background: var(--lime); color: var(--navy); }
.p-annulleret, .p-pause { background: var(--navy7); color: var(--navy3); }
.søg, input, select, textarea { width: 100%; font: inherit; color: var(--navy); background: #fff; border: 1.5px solid var(--navy6);
  border-radius: 10px; padding: 11px 12px; outline: none; -webkit-appearance: none; appearance: none; }
input:focus, textarea:focus, select:focus { border-color: var(--navy); }
.søg { margin-bottom: 12px; }
label { display: block; font-size: 14px; color: var(--navy2); margin: 10px 0 4px; }
label > input, label > select, label > textarea { margin-top: 4px; }
.felt { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--navy7); font-size: 15px; }
.felt:first-of-type { border-top: 0; }
.felt > span { color: var(--navy3); font-size: 13px; padding-top: 2px; }
.advarsel { background: var(--gul1); color: var(--gul3); border-radius: 10px; padding: 9px 12px; margin: 8px 0; font-size: 14px; font-weight: 600; }
.fejltekst { color: var(--rød3); font-weight: 600; }

/* knapper */
.knap { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600;
        color: var(--navy); background: #fff; border: 1.5px solid var(--navy5); border-radius: 12px; padding: 10px 14px;
        text-decoration: none; cursor: pointer; min-height: 44px; }
.knap:active { transform: scale(.98); }
.knap.primær { background: var(--navy); color: #fff; border-color: var(--navy); }
.knap.fare { color: var(--rød3); border-color: var(--rød1); }
.knap.stor { width: 100%; padding: 14px; font-size: 17px; margin: 6px 0; }
.knap:disabled { opacity: .5; }
.knaprække { display: flex; gap: 10px; margin: 6px 0 14px; }
.knaprække .knap.stor { margin: 0; }
.lille-knapper .knap { flex: 1; }
.link { background: none; border: 0; font: inherit; font-size: 14px; color: var(--navy2); text-decoration: underline; padding: 8px 4px; cursor: pointer; }
.link.fare { color: var(--rød3); }

/* hus */
.hushoved { display: flex; gap: 12px; align-items: center; margin: 8px 0 12px; }
.husadr { font-family: "Kanit", sans-serif; font-weight: 600; font-size: 19px; line-height: 1.2; }
.forside { width: 84px; height: 64px; border-radius: 10px; background: var(--navy6) center/cover; flex: none; }
.placering { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--navy7); }
.placering:first-of-type { border-top: 0; }
.foto-lille { width: 56px; height: 56px; border-radius: 9px; background: var(--navy7) center/cover; flex: none; cursor: zoom-in; }
.foto-lille.ingen { background: var(--navy7) url("ikoner/ikon.svg") center/22px no-repeat; opacity: .35; cursor: default; }
img.stort { width: 100%; border-radius: 12px; }

/* besøg */
.besøg-info { background: #fff; border-radius: 14px; padding: 12px 16px; margin: 8px 0 4px; }
.fremdrift { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--navy3); }
.bar { flex: 1; height: 6px; background: var(--navy7); border-radius: 9px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--grøn2); transition: width .3s; }
.punkt { background: #fff; border-radius: 14px; padding: 14px; margin: 0 0 10px; border-left: 5px solid var(--navy6); }
.punkt.s-ok { border-left-color: var(--grøn2); }
.punkt.s-bemaerkning { border-left-color: var(--gul2); }
.punkt.s-skade { border-left-color: var(--rød2); }
.punkt-titel { font-weight: 600; margin-bottom: 10px; }
.status-knapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.sk { font: inherit; font-size: 15px; font-weight: 600; border-radius: 10px; padding: 11px 4px; min-height: 46px; cursor: pointer;
      background: #fff; border: 1.5px solid var(--navy6); color: var(--navy2); }
.sk-ok.valgt { background: var(--grøn1); border-color: var(--grøn2); color: var(--grøn3); }
.sk-bemaerkning.valgt { background: var(--gul1); border-color: var(--gul2); color: var(--gul3); }
.sk-skade.valgt { background: var(--rød1); border-color: var(--rød2); color: var(--rød3); }
.note { margin-top: 8px; font-size: 15px; }
.note.skjult { display: none; }
.punkt-fod { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.foto-knap { min-height: 40px; padding: 8px 12px; font-size: 15px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.thumbs:empty { display: none; }
.thumb { position: relative; width: 78px; height: 78px; border-radius: 10px; background: var(--navy7) center/cover; }
.thumb .slet { position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
               background: var(--navy); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.tidligere { font-size: 13px; color: var(--navy3); margin: 4px 0 6px; }
.tidligere b { color: var(--navy); }
.mål-række { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mål { margin: 4px 0 0; }
.mål span { display: flex; align-items: center; gap: 6px; }
.mål input { font-size: 20px; font-weight: 600; padding: 9px 10px; margin: 0; }
.mål em { font-style: normal; color: var(--navy3); font-size: 14px; white-space: nowrap; }
.låst .sk, .låst .foto-knap, .låst .link, .låst .slet, .låst .lille-knapper { pointer-events: none; opacity: .6; }
.låst input, .låst textarea { pointer-events: none; background: var(--navy7); }
.bundplads { height: 90px; }
.bundbar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + var(--bund));
           background: rgba(235, 240, 250, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
           border-top: 1px solid var(--navy6); z-index: 9; }
.bundbar .knap { max-width: 732px; margin: 0 auto; display: flex; }

/* ark (bundmenu) */
.ark-bag { position: fixed; inset: 0; background: rgba(9, 12, 51, 0); z-index: 50; display: flex; align-items: flex-end; transition: background .2s; }
.ark-bag.vis { background: rgba(9, 12, 51, .45); }
.ark { width: 100%; max-width: 640px; margin: 0 auto; background: #fff; border-radius: 18px 18px 0 0;
       padding: 18px 16px calc(16px + var(--bund)); max-height: 88vh; overflow-y: auto;
       transform: translateY(100%); transition: transform .22s ease-out; }
.ark-bag.vis .ark { transform: none; }
.valg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.valg .knap { font-size: 14px; min-height: 52px; text-align: center; }

/* login */
.login { max-width: 380px; margin: 0 auto; padding: calc(60px + var(--top)) 20px 30px; text-align: center; }
.login form { text-align: left; margin-top: 18px; }
.login-logo { width: 84px; height: 84px; border-radius: 18px; }
.login h1 { margin: 14px 0 4px; }

.toast { position: fixed; left: 50%; bottom: calc(90px + var(--bund)); transform: translate(-50%, 20px); opacity: 0;
         background: var(--navy); color: #fff; padding: 11px 16px; border-radius: 12px; font-size: 15px; z-index: 60;
         transition: all .25s; max-width: 90vw; text-align: center; }
.toast.vis { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 800px) {
  main { padding-top: 16px; }
  .punkt { padding: 16px 18px; }
}