/* Projekter og Kontrakter (AE-0371, AE-0372). The same tokens and buttons as style.css, so the tabs look like one
   product with the mail. Calm by default: colour only where it means something (overdue, a deadline, an AI proposal). */

:root{ --roed:#b42318; --roed-l:#fef3f2; --orange:#c4320a; --orange-l:#fff6ed; --gul:#a15c07; --gul-l:#fffaeb; --ai:#6941c6; --ai-l:#f9f5ff; }

/* --- Tabs in the top bar --- */
.faner{display:flex;gap:2px;margin-left:4px}
.faner a{padding:8px 14px;border-radius:10px;color:var(--sub);text-decoration:none;font-weight:600}
.faner a:hover{background:var(--flade);color:var(--blaek)}
.faner a[aria-current="page"]{background:var(--groen-m);color:var(--groen)}
.arbejde{height:calc(100dvh - var(--topbar));overflow:auto;background:var(--flade);padding:18px 22px 60px}
.arbejde-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.arbejde-top h1{font-size:22px;margin:0}
.arbejde-top .tilbage{color:var(--sub);text-decoration:none;font-weight:600}
.arbejde-top .tilbage:hover{color:var(--groen)}
.fyld{flex:1}
a.knap{text-decoration:none;display:inline-block}
.redigerbar{cursor:text;border-radius:8px;padding:0 6px;margin-left:-6px}
.redigerbar:hover{background:#fff}
.chip{display:inline-block;padding:3px 10px;border-radius:12px;background:var(--groen-m);color:var(--groen);text-decoration:none;font-size:13px;font-weight:600}
.chip-knap{border:1px solid var(--linje);background:#fff;border-radius:14px;padding:4px 12px;font-size:13px;color:var(--blaek)}
.chip-knap.valgt{background:var(--groen);border-color:var(--groen);color:#fff}
.chip-knap.lille{padding:2px 9px;font-size:12px}
.chip-knap.genkendt{background:var(--groen-m);border-color:transparent;color:var(--groen)}
.chip-knap.fravalgt{color:var(--sub);text-decoration:line-through}
.chip-knap.valg{border-style:dashed}
.knap.farlig{color:var(--fejl)}
.knap-raekke{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.tom-tilstand{background:#fff;border:1px dashed var(--linje);border-radius:16px;padding:32px;max-width:640px;margin:40px auto;text-align:center}
.tom-tilstand h2{margin:0 0 8px}
.roed{color:var(--roed)}
.gammel{color:var(--advarsel);font-size:13px;margin:6px 0 0}
.en-linje{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:4px 0}

/* --- AI proposals: their own style and their own words, never the sparkle alone --- */
.ai-maerke{color:var(--ai);font-size:13px;font-weight:600;margin:6px 0}
.ai-felt input,.ai-felt select,.ai-felt textarea{border:1.5px dashed var(--ai) !important;background:var(--ai-l)}
.ai-bevis{display:block;color:var(--ai);font-size:12px;margin-top:3px;font-style:italic}
.ai-status{color:var(--ai)}
.ai-udkast{border:1.5px dashed var(--ai);background:var(--ai-l);border-radius:12px;padding:12px 14px;margin-top:10px}
.ai-forslag-liste{border:1.5px dashed var(--ai);background:var(--ai-l);border-radius:12px;padding:8px 12px;margin:10px 0}

/* --- Projects --- */
.projekt-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.projekt-kort{display:block;background:#fff;border:1px solid var(--linje);border-radius:14px;padding:14px 16px;color:inherit;text-decoration:none;transition:box-shadow .15s}
.projekt-kort:hover{box-shadow:0 4px 16px rgba(16,24,40,.08)}
.projekt-kort.daempet{opacity:.7}
.projekt-kort-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.projekt-tal{display:flex;gap:12px;font-size:13px;color:var(--sub);margin-top:8px;flex-wrap:wrap}
.fordeling{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--flade);margin-top:10px}
.fordeling span{display:block;height:100%}
.f-ide{background:#d0d5dd}.f-i_gang{background:#2e90fa}.f-venter{background:#f79009}.f-faerdig{background:var(--groen)}
.helbred{font-size:12px;font-weight:700;border-radius:10px;padding:2px 9px;white-space:nowrap}
.h-paa_sporet{background:var(--groen-m);color:var(--groen)}.h-i_risiko{background:var(--gul-l);color:var(--gul)}
.h-ude_af_kurs{background:var(--roed-l);color:var(--roed)}.h-ingen{background:var(--flade);color:var(--sub)}.h-pause{background:var(--flade);color:var(--sub)}
.helbred-valg,.tilstand-valg{border:1px solid var(--linje);border-radius:10px;padding:5px 8px;background:#fff;font-weight:600}
.helbred-valg.h-paa_sporet{color:var(--groen)}.helbred-valg.h-i_risiko{color:var(--gul)}.helbred-valg.h-ude_af_kurs{color:var(--roed)}
.projekt-formaal{margin:-6px 0 10px}
.underfaner{display:flex;gap:4px;border-bottom:1px solid var(--linje);margin-bottom:14px}
.underfaner a{padding:8px 14px;color:var(--sub);text-decoration:none;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.underfaner a[aria-current="page"]{color:var(--groen);border-bottom-color:var(--groen)}
.ikke-sorteret{background:#fff;border:1px solid var(--linje);border-left:4px solid var(--advarsel);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.ikke-sorteret h2{font-size:16px;margin:0}
.opgave-liste{list-style:none;margin:8px 0 0;padding:0}
.opgave-liste li,.opgave-linje{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--flade);flex-wrap:wrap}
.opgave-liste a{color:var(--blaek);font-weight:600;text-decoration:none}
.opgave-liste a:hover{color:var(--groen)}
.uge-afsnit{background:#fff;border:1px solid var(--linje);border-radius:12px;padding:12px 16px;margin-bottom:14px}
.uge-afsnit h2{font-size:16px;margin:0}

/* --- The board --- */
.filtre{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tavle{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;align-items:start}
.kolonne{background:#eef0f3;border-radius:14px;padding:10px;min-height:120px;transition:background .1s}
.kolonne.over{background:var(--groen-m);outline:2px dashed var(--groen)}
.kolonne header{display:flex;align-items:center;gap:8px;margin:2px 4px 8px}
.kolonne h2{font-size:14px;margin:0;text-transform:uppercase;letter-spacing:.04em;color:var(--sub)}
.kolonne .antal{font-size:12px;color:var(--sub);background:#fff;border-radius:10px;padding:0 7px}
.hurtig input{width:100%;border:1px solid transparent;background:#fff;border-radius:10px;padding:9px 10px;outline:none}
.hurtig input:focus{border-color:var(--groen);box-shadow:0 0 0 3px var(--groen-m)}
.hurtig-chips{display:flex;gap:4px;flex-wrap:wrap;margin:5px 2px 2px}
.kort-liste{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:40px}
.kort{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:9px 10px 6px;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.kort:hover{border-color:#cdd2da}
.kort:focus{outline:2px solid var(--groen);outline-offset:1px}
.kort.hoej{border-left:3px solid var(--roed)}
.kort.traekkes{opacity:.45}
.kort-titel{font-weight:600;line-height:1.35;word-break:break-word}
.kort-fod{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--sub)}
.kort-fod .ejer{background:var(--groen-m);color:var(--groen);font-weight:700;border-radius:50%;width:24px;height:24px;display:inline-grid;place-items:center;font-size:11px}
.frist{font-weight:600}.frist.forfalden{color:var(--roed)}.frist.snart{color:var(--advarsel)}
.prio{color:var(--roed);font-weight:700}
.venter-paa{font-style:italic}
.kort-menu{width:26px;height:26px;font-size:15px}
.tom-kolonne{padding:10px 6px;font-size:13px}
.fortryd{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;background:var(--blaek);color:#fff;border-radius:10px;padding:8px 10px 8px 16px;display:flex;align-items:center;gap:10px;z-index:61}
.fortryd .knap{color:#fff}
.fortryd .knap:hover{background:rgba(255,255,255,.12)}

/* --- Side panel and dialog --- */
.panel{position:fixed;top:var(--topbar);right:0;bottom:0;width:min(520px,100vw);background:#fff;border-left:1px solid var(--linje);box-shadow:-8px 0 30px rgba(16,24,40,.10);overflow:auto;z-index:30;padding:14px 18px 40px}
.panel-top{display:flex;align-items:center;gap:8px}
.panel-titel{width:100%;border:0;font-size:20px;font-weight:700;resize:none;padding:6px 0;outline:none;border-bottom:1px solid transparent}
.panel-titel:focus{border-bottom-color:var(--groen)}
.panel-felter{display:grid;gap:8px;margin:8px 0 6px}
.felt{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center}
.felt-navn{color:var(--sub);font-size:13px;font-weight:600}
.felt input,.felt select,.felt textarea,.dialog-form input,.dialog-form select,.dialog-form textarea,.side-tekst,.kommentarer textarea,.tjekliste input:not([type]){border:1px solid var(--linje);border-radius:8px;padding:7px 9px;background:#fff;width:100%}
.felt .sub,.felt .ai-bevis,.felt .valg-raekke{grid-column:2}
.felt .ai-bevis{margin-top:-4px}
.opgave-panel h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);margin:18px 0 6px}
.tjek-linje{display:flex;align-items:center;gap:8px;padding:3px 0}
/* A tick list inside a dialog or a proposal: a box and its text on one line, left aligned (the field rules above would
   stretch the box to the full width). */
.arbejde input[type="checkbox"],.panel input[type="checkbox"],.dialog-form input[type="checkbox"]{width:auto;flex:none;margin:0}
.dialog-form .tjek-linje,.ai-forslag-liste .tjek-linje{font-size:14px;font-weight:400;color:var(--blaek);margin:0;text-align:left;justify-content:flex-start}
.tjek-linje .gjort{text-decoration:line-through;color:var(--sub)}
.tjek-linje .ikonknap{margin-left:auto;width:24px;height:24px;font-size:12px}
.mail-chip{border:1px solid var(--linje);border-radius:10px;padding:8px 12px;margin:6px 0;background:var(--flade)}
.mail-chip .uddrag{font-size:13px;white-space:pre-wrap;margin:4px 0;color:#344054;max-height:7.5em;overflow:hidden}
.kommentar{border-left:3px solid var(--linje);padding:2px 10px;margin:8px 0}
.historik{margin-top:18px;font-size:13px}
.historik summary{cursor:pointer;color:var(--sub);font-weight:600}
.panel-bund{display:flex;gap:8px;align-items:center;margin-top:18px;padding-top:12px;border-top:1px solid var(--linje)}
.md-felt .md{min-height:2.2em;padding:6px 8px;border-radius:8px;cursor:text;text-align:left}
.md-felt .md:hover{background:var(--flade)}
.md.tom{color:var(--sub)}
.md p{margin:0 0 8px}.md ul,.md ol{margin:0 0 8px;padding-left:22px}
.md li.tjek{list-style:none;margin-left:-20px}
.md blockquote{border-left:3px solid var(--linje);margin:0 0 8px;padding-left:10px;color:#475467}
.md pre{background:var(--flade);padding:8px;border-radius:8px;overflow:auto}
.md table{border-collapse:collapse}.md td,.md th{border:1px solid var(--linje);padding:4px 8px}
.dialog-bag{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(16,24,40,.45)}
.dialog-kort{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(16,24,40,.25);padding:20px 22px;width:min(520px,100%);max-height:90dvh;overflow:auto}
.dialog-form{display:grid;gap:8px}
.dialog-form h2{margin:0 0 4px;font-size:19px}
.dialog-form label{font-size:13px;font-weight:600;color:var(--sub);margin-top:4px}
.dialog-form.bred{width:min(680px,100%)}
.dialog-bund{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px}
.ligner{background:var(--gul-l);border-radius:10px;padding:8px 12px;margin:8px 0}
.ligner-linje{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.valg-raekke{grid-column:2;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mail-opgaver{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 24px 0}
.gem-kontrakt{margin-left:4px}

/* --- Overblik --- */
.overblik{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.2fr);gap:16px;align-items:start}
.overblik section{background:#fff;border:1px solid var(--linje);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.overblik h2{font-size:16px;margin:0 0 8px}
.overblik h3{font-size:13px;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 4px}
.fakta-tal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tal-boks{background:var(--flade);border-radius:10px;padding:8px;text-align:center;display:grid}
.tal-boks strong{font-size:22px}
.status-hoved{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.status-indhold h3{margin-top:10px}
.status-indhold ul{margin:4px 0;padding-left:20px}
.en-linje-status{font-weight:600}
.kilde{font-size:12px;background:var(--flade);border-radius:8px;padding:0 6px;color:var(--sub);text-decoration:none;margin-left:2px}

/* --- Pages --- */
.sider{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
.side-liste{display:grid;gap:2px}
.side-knap{border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:8px;font-weight:600;color:var(--blaek)}
.side-knap:hover{background:#fff}.side-knap.valgt{background:#fff;color:var(--groen)}
.side-editor{background:#fff;border:1px solid var(--linje);border-radius:14px;padding:14px 16px;min-height:60vh}
.side-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.side-titel{border:0;font-size:20px;font-weight:700;outline:none;min-width:200px;flex:1}
.side-tekst{width:100%;min-height:50vh;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:1.6;resize:vertical}
.gem-tilstand{min-width:140px}

/* --- Contracts --- */
.soeg-felt{border:1px solid var(--linje);border-radius:10px;padding:8px 10px;min-width:240px;background:#fff}
.kontrakt-sum{margin:-4px 0 14px}
.kontrakt-gruppe h2{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);margin:18px 0 8px}
.g-gennemsyn h2,.g-handling h2{color:var(--blaek)}
.kontrakt-raekker{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kontrakt-raekke{background:#fff;border:1px solid var(--linje);border-left:5px solid #d0d5dd;border-radius:12px}
.kontrakt-raekke.f-roed{border-left-color:var(--roed)}.kontrakt-raekke.f-orange{border-left-color:#f79009}
.kontrakt-raekke.f-gul{border-left-color:#fdb022}.kontrakt-raekke.f-graa{opacity:.7}
.raekke-link{display:grid;grid-template-columns:minmax(200px,1.3fr) minmax(200px,1fr) auto;gap:14px;align-items:center;padding:11px 14px;color:inherit;text-decoration:none}
.raekke-navn,.raekke-handling{display:grid}
.raekke-maerker{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.maerke{font-size:12px;font-weight:600;border-radius:10px;padding:1px 8px;background:var(--flade);color:var(--sub)}
.maerke.ubekraeftet{background:var(--ai-l);color:var(--ai)}.maerke.beslutning{background:var(--groen-m);color:var(--groen)}
.laeser{color:var(--ai);font-weight:600}
.kontrakt-gitter{display:grid;grid-template-columns:minmax(320px,1.1fr) minmax(360px,1fr);gap:16px;align-items:start}
.dokument-side,.felt-side{background:#fff;border:1px solid var(--linje);border-radius:14px;padding:14px 16px}
.dokument-side{position:sticky;top:0;max-height:calc(100dvh - var(--topbar) - 40px);display:flex;flex-direction:column}
.dok-faner{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.dok-info{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dok-tekst{overflow:auto;flex:1;border-top:1px solid var(--linje);padding-top:8px}
.dok-tekst pre{white-space:pre-wrap;word-break:break-word;font:13.5px/1.6 ui-serif,Georgia,serif;margin:0}
.dok-tekst mark{background:#fff3b0;padding:1px 0;border-radius:2px}
.resultat{border-radius:12px;padding:12px 14px;background:var(--flade);border-left:5px solid #d0d5dd}
.resultat.f-roed{background:var(--roed-l);border-left-color:var(--roed)}.resultat.f-orange{background:var(--orange-l);border-left-color:#f79009}
.resultat.f-gul{background:var(--gul-l);border-left-color:#fdb022}
.resultat-dato{font-size:19px;font-weight:700}
.saetning{font-size:15px;margin:8px 0}
.advarsel{color:var(--advarsel);font-size:14px;margin:6px 0}
.beslutning{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:12px 0}
.felter h2{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);margin:16px 0 6px}
.felt-raekke{padding:8px 0;border-bottom:1px solid var(--flade)}
.felt-hoved{display:grid;grid-template-columns:130px 1fr auto auto;gap:8px;align-items:center}
.felt-vaerdi{font-weight:600}
.s-mangler .felt-vaerdi{color:var(--sub);font-weight:400}
.status-maerke{font-size:11px;font-weight:700;border-radius:10px;padding:1px 8px;background:var(--flade);color:var(--sub)}
.status-maerke.s-ai{background:var(--ai-l);color:var(--ai);border:1px dashed var(--ai)}
.status-maerke.s-tjek,.status-maerke.s-tvetydig{background:var(--gul-l);color:var(--gul)}
.status-maerke.s-bekraeftet,.status-maerke.s-rettet{background:var(--groen-m);color:var(--groen)}
.citat{display:block;font-size:13px;color:#475467;margin:4px 0 0 138px;cursor:pointer;quotes:"\201C" "\201D"}
.citat:hover{color:var(--groen);text-decoration:underline}
.dialog-form .citat{margin-left:0}
.kandidater{margin:6px 0 0 138px;display:grid;gap:6px}
.kandidat{display:grid;gap:2px}
.kandidat .citat{margin-left:0}
.forskel-boks{background:var(--gul-l);border-radius:10px;padding:10px 12px;margin-top:10px}
.forskel-boks h3{font-size:14px;margin:0 0 6px}
.forskel{display:grid;grid-template-columns:120px 1fr auto;gap:8px;align-items:center;padding:4px 0}
.forskel .citat{grid-column:1 / -1;margin-left:0}
.fejl-boks{background:var(--roed-l);border-radius:10px;padding:10px 12px;margin:8px 0}
.slip{position:fixed;inset:12px;z-index:95;border:3px dashed var(--groen);border-radius:20px;background:rgba(232,245,238,.92);display:grid;place-items:center;font-size:20px;font-weight:700;color:var(--groen);pointer-events:none}

/* --- Phone width --- */
@media (max-width:900px){
  .faner a{padding:8px 9px}
  .arbejde{padding:12px 12px 60px}
  .tavle{grid-template-columns:repeat(4,minmax(240px,80vw));overflow-x:auto;scroll-snap-type:x mandatory}
  .kolonne{scroll-snap-align:start}
  .overblik,.sider,.kontrakt-gitter{grid-template-columns:1fr}
  .dokument-side{position:static;max-height:50dvh}
  .raekke-link{grid-template-columns:1fr}
  .raekke-maerker{justify-content:flex-start}
  .felt-hoved{grid-template-columns:1fr auto}
  .felt-hoved .felt-vaerdi{grid-column:1 / -1;order:3}
  .citat,.kandidater{margin-left:0}
  .felt{grid-template-columns:1fr}
  .felt .sub{grid-column:1}
}