:root{
  /* v2.45.0: skrift og skala er nu også variabler, så et tema kan skifte dem.
     Værdierne her er reserve - temaet overskriver dem i base.html. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --scale: 1;
  --bg:#f3f5f8; --card:#fff; --text:#0d1b2f; --muted:#64748b; --line:#dfe5ee;
  --blue:#2f63e7; --blue-soft:#edf2ff; --green:#16a34a; --red:#dc2626; --yellow:#f59e0b;
  --shadow:0 18px 45px rgba(15,23,42,.08); --radius:22px;
}
*{box-sizing:border-box}
html{overscroll-behavior-y:contain;font-size:calc(16px * var(--scale))}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);font-size:17px;line-height:1.4;overscroll-behavior-y:contain}
a{color:inherit;text-decoration:none}.topbar{position:sticky;top:0;z-index:5;overflow:visible;display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px 10px;
  /* v2.47.2: toppen bruger hele bredden igen. Jeg havde klemt den ind i
     samme 860 px-spalte som indholdet, og så stod logoet langt inde på en
     bred skærm. Toppen er en ramme om siden, ikke en del af spalten. */
  background:var(--bg)}
.brand{font-weight:900;font-size:24px;letter-spacing:-.03em}.brand-link{display:block;text-decoration:none;color:inherit}.brand-logo{max-height:40px;max-width:200px;display:block}.sub{color:var(--muted);font-size:14px}.page{padding:0 14px calc(90px + env(safe-area-inset-bottom));max-width:860px;margin:0 auto}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:14px 0;box-shadow:var(--shadow)}.hero h1{font-size:34px;line-height:1.05;margin:6px 0 10px;letter-spacing:-.04em}h2{font-size:22px;margin:0 0 14px}.muted,.card p{color:var(--muted)}.bigline{font-size:24px;font-weight:800;color:var(--text)!important}.pill,.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;background:var(--blue-soft);font-weight:800;color:var(--blue)}.badge{margin-top:8px}.badge.ok,.status-box.ok{background:color-mix(in srgb, var(--green) 16%, var(--card));color:var(--green)}.badge.bad,.status-box.bad{background:color-mix(in srgb, var(--red) 16%, var(--card));color:var(--red)}.warning{background:color-mix(in srgb, var(--yellow) 18%, var(--card));border:1px solid #fed7aa;color:color-mix(in srgb, var(--yellow) 55%, var(--text));border-radius:16px;padding:14px;margin:14px 0}.flash{padding:12px 14px;border-radius:14px;margin:10px 0;font-weight:700}.flash.success{background:color-mix(in srgb, var(--green) 16%, var(--card));color:var(--green)}.flash.error{background:color-mix(in srgb, var(--red) 16%, var(--card));color:var(--red)}.form{display:grid;gap:10px}.form label{font-weight:800;color:var(--muted)}.form input,.form textarea,.form select{width:100%;border:1px solid var(--line);border-radius:16px;padding:14px;font:inherit;background:var(--card)}.compact{gap:10px}button,.linkbtn{border:0;border-radius:16px;padding:14px 18px;font:inherit;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.primary{background:var(--blue);color:white}.secondary{background:var(--blue-soft);color:var(--blue)}.danger{background:color-mix(in srgb, var(--red) 16%, var(--card));color:var(--red)}.actions{display:flex;gap:10px;flex-wrap:wrap}.status-grid,.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.status-box,.quick{border-radius:18px;padding:16px;background:color-mix(in srgb, var(--text) 4%, var(--card));border:1px solid var(--line)}.status-box span,.quick span{display:block;color:var(--muted);font-size:13px;font-weight:900;text-transform:uppercase}.status-box strong,.quick strong{display:block;font-size:22px;margin-top:4px}.quick em{display:block;color:var(--muted);font-style:normal}.project-list{display:grid;gap:10px}.project-row{display:flex;justify-content:space-between;gap:14px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:14px;background:color-mix(in srgb, var(--text) 4%, var(--card))}.project-row span{display:block;color:var(--muted);font-size:14px}.project-row em{font-style:normal;font-size:13px;font-weight:900;border-radius:999px;padding:6px 10px;background:var(--blue-soft);color:var(--blue);white-space:nowrap}.button-row{display:flex;gap:10px;flex-wrap:wrap}.note{border-top:1px solid var(--line);padding:12px 0}.note strong{font-size:13px;color:var(--muted)}.note p{margin:4px 0 0;color:var(--text)}.photo-grid{display:grid;gap:10px;margin-top:12px}.photo-grid a{display:block;border:1px solid var(--line);border-radius:14px;padding:12px;background:color-mix(in srgb, var(--text) 4%, var(--card));font-weight:800}.photo-grid span{color:var(--muted);font-size:14px;font-weight:500}.back{display:inline-flex;margin-bottom:6px;color:var(--blue);font-weight:900}@media(max-width:640px){.status-grid,.quick-grid{grid-template-columns:1fr}.hero h1{font-size:30px}.topbar{padding-top:14px}.card{padding:18px}}

/* v2.75.0: menuen laa inde her, og fordi raekken ombryder (flex-wrap), blev det
   aabne panel behandlet som ET ELEMENT I RAEKKEN i stedet for som noget der
   haenger frit over siden. Derfor skubbede det til alt andet og saa forkert ud.
   position:relative giver panelet noget at haenge fra, og overflow:visible
   sikrer at det ikke klippes af raekkens kant. */
/* v2.78.0: her stod ogsaa position/overflow og .user-menu - det samme som
   nederst i filen. To steder til samme formaal er praecis den rod, der gjorde
   brugermenuen umulig at fejlfinde. Placeringen styres ét sted, nederst. */
.top-actions{display:flex;gap:8px;align-items:center}
.tiny-status{width:26px;height:26px;border-radius:999px;padding:0;font-size:12px;line-height:1;border:1px solid var(--line);box-shadow:none}
/* v2.47.0: prikken lyste grønt på lys baggrund, også i mørke temaer.
   Nu farves den af temaets egen grøn og rød, blandet ind i fladen. */
.tiny-status.ok{background:color-mix(in srgb, var(--green) 18%, var(--card));color:var(--green);border-color:color-mix(in srgb, var(--green) 35%, var(--line))}
.tiny-status.bad{background:color-mix(in srgb, var(--red) 18%, var(--card));color:var(--red);border-color:color-mix(in srgb, var(--red) 35%, var(--line))}
@supports not (background: color-mix(in srgb, red 10%, blue)){
  .tiny-status.ok{background:var(--card);color:var(--green)}
  .tiny-status.bad{background:var(--card);color:var(--red)}
}
.status-popover{max-width:860px;margin:0 auto 8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);font-size:14px;color:var(--muted)}
.login-diagnostics{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb, var(--text) 4%, var(--card));color:var(--muted);font-size:14px}
.login-diagnostics summary{cursor:pointer;font-weight:800;color:var(--muted)}


.mobile-nav{position:sticky;top:58px;z-index:4;margin:0 0 14px;
  padding:0 20px;display:flex;gap:20px;overflow-x:auto;
  background:var(--bg);backdrop-filter:blur(12px);
  /* Én hårfin streg under hele toppen - adskillelsen sker med en linje,
     ikke med et farveskift. */
  border-bottom:1px solid var(--line);scrollbar-width:none}
.mobile-nav::-webkit-scrollbar{display:none}
/* Menuen er faner, ikke piller - samme sprog som banerne på Min dag. */
.nav-item{white-space:nowrap;border:0;border-radius:0;background:none;box-shadow:none;
  padding:10px 0 12px;margin-bottom:-1px;color:var(--muted);font-weight:600;font-size:15px;
  border-bottom:2px solid transparent}
.nav-item.active{color:var(--text);border-bottom-color:var(--blue);font-weight:700}
.nav-item:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:640px){.mobile-nav{top:52px;gap:16px}.nav-item{font-size:14px}}

/* v0.3.13: teknisk status skal være diskret, ikke store bokse på Min dag. */
.status-admin-tools{margin-top:8px}
.status-admin-tools summary{cursor:pointer;font-weight:800;color:var(--muted)}
.tiny-buttons{margin-top:8px}
.smallbtn{font-size:13px;padding:8px 10px;border-radius:12px}

/* v0.3.15 */
.calendar-filter{grid-template-columns:1fr 1fr;align-items:end}
.calendar-filter label{margin-bottom:-6px}
.calendar-list{display:grid;gap:10px}
.calendar-row{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:14px;background:color-mix(in srgb, var(--text) 4%, var(--card))}
.calendar-row.not-ready{border-color:color-mix(in srgb, var(--red) 35%, var(--line));background:color-mix(in srgb, var(--red) 12%, var(--card))}
.cal-date{border-radius:16px;background:var(--blue-soft);padding:10px;text-align:center;color:var(--blue);font-weight:900}
.cal-date span{display:block;font-size:13px;color:var(--muted);font-weight:700}
.cal-main span{display:block;color:var(--muted);font-size:14px}.calendar-row em{font-style:normal;font-size:13px;font-weight:900;border-radius:999px;padding:6px 10px;background:var(--blue-soft);color:var(--blue);white-space:nowrap}.calendar-row.not-ready em{background:color-mix(in srgb, var(--red) 16%, var(--card));color:var(--red)}
.attachment-view{text-align:center}.attachment-image{display:block;max-width:100%;height:auto;border-radius:18px;border:1px solid var(--line);margin:0 auto 14px;background:var(--card)}.linkbtn{text-decoration:none}.quick-grid + .card{margin-top:14px}
@media(max-width:640px){.calendar-filter{grid-template-columns:1fr}.calendar-row{grid-template-columns:1fr}.calendar-row em{justify-self:start}.cal-date{text-align:left}}

/* v0.3.16: intern projektleder + mobil Gantt */
.checkline{display:flex!important;align-items:center;gap:8px;font-weight:800;color:var(--muted);margin-top:4px}
.checkline input{width:auto!important}
.gantt-range{display:flex;justify-content:space-between;color:var(--muted);font-weight:800;font-size:13px;margin:0 0 10px}
.gantt-list{display:grid;gap:12px}
.gantt-row{display:grid;grid-template-columns:1fr auto;gap:10px;border:1px solid var(--line);border-radius:18px;padding:14px;background:color-mix(in srgb, var(--text) 4%, var(--card))}
.gantt-row.not-ready{border-color:color-mix(in srgb, var(--red) 35%, var(--line));background:color-mix(in srgb, var(--red) 12%, var(--card))}
.gantt-title{grid-column:1 / -1}.gantt-title strong{display:block}.gantt-title span{display:block;color:var(--muted);font-size:14px}
.gantt-track{position:relative;grid-column:1 / -1;height:32px;border-radius:999px;background:var(--blue-soft);overflow:hidden;border:1px solid var(--line)}
.gantt-bar{position:absolute;top:3px;bottom:3px;min-width:46px;border-radius:999px;background:var(--blue);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-row.not-ready .gantt-bar{background:var(--red)}
.gantt-row em{font-style:normal;font-size:13px;font-weight:900;border-radius:999px;padding:6px 10px;background:var(--blue-soft);color:var(--blue);white-space:nowrap;justify-self:start}
.gantt-row.not-ready em{background:color-mix(in srgb, var(--red) 16%, var(--card));color:var(--red)}
@media(max-width:640px){.gantt-row{grid-template-columns:1fr}.gantt-track{height:34px}.gantt-bar{font-size:11px}}

/* v0.3.23: tydelige personfelter uden teknisk rod */
.softsep{border:0;border-top:1px solid var(--line);margin:8px 0 4px}
.user-actions{justify-content:flex-end}
.user-actions form{margin:0}

.readonly-box{border:1px solid #dbe4f0;background:color-mix(in srgb, var(--text) 4%, var(--card));border-radius:18px;padding:14px 16px;margin:12px 0;color:var(--text)}.readonly-box strong{color:var(--text)}

/* v0.3.27: Kontrakt/PDF diagnose */
.check-list,.error-list{margin:10px 0 16px;padding-left:20px;color:var(--muted)}
.check-list li{margin:6px 0;color:var(--green);font-weight:700}
.error-list li{margin:6px 0;color:var(--red);font-weight:700}

/* v0.3.28 ContractTemplateLiveTest */
.stack-form { display: grid; gap: 10px; }
.stack-form label { font-weight: 700; margin-top: 6px; }
.stack-form input, .stack-form select { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; background:var(--card); }
.details-box { border: 1px solid #ececec; border-radius: 14px; padding: 12px; background:var(--card); }
.details-box summary { cursor: pointer; font-weight: 800; margin-bottom: 8px; }


/* v0.3.30 Mandskab / ID-kort */
.worker-mini{display:flex;gap:12px;align-items:center}.worker-mini img{width:56px;height:56px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:var(--card)}.photo-preview{border:1px dashed var(--line);border-radius:18px;padding:12px;background:color-mix(in srgb, var(--text) 4%, var(--card))}.photo-preview img{display:block;max-width:220px;width:100%;height:auto;border-radius:16px;border:1px solid var(--line);margin-bottom:10px}.worker-photo-large{width:170px;max-width:55vw;border-radius:20px;border:1px solid var(--line);display:block;margin:0 0 14px;background:var(--card)}.id-label-sheet{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}.id-card{background:var(--card);border:2px solid #111;border-radius:14px;padding:12px;min-height:240px;color:var(--text);box-shadow:var(--shadow)}.id-head{font-weight:900;letter-spacing:.08em;border-bottom:1px solid #111;padding-bottom:6px;margin-bottom:8px}.id-body{display:grid;grid-template-columns:74px 1fr 74px;gap:10px;align-items:start}.id-photo{width:74px;height:92px;object-fit:cover;border:1px solid #111;border-radius:8px}.id-info strong{display:block;font-size:19px;line-height:1.1;margin-bottom:6px}.id-info span{display:block;font-size:12px;margin:3px 0}.id-qr{width:82px;height:82px;border:1px solid #111;background:var(--card);display:block}.qr-small{font-size:8px;word-break:break-all;color:var(--text)}.id-foot{border-top:1px solid #111;margin-top:8px;padding-top:6px;font-size:10px}.back-card p{font-size:13px;margin:8px 0}.public-emergency .card{max-width:620px;margin-left:auto;margin-right:auto}@media(max-width:640px){.id-label-sheet{grid-template-columns:1fr}.id-body{grid-template-columns:76px 1fr 76px}.id-info strong{font-size:17px}}
@media print{body{background:white}.topbar,.mobile-nav,.no-print,.flash-wrap{display:none!important}.page{max-width:none;padding:0;margin:0}.id-label-sheet{display:grid;grid-template-columns:1fr 1fr;gap:8mm;margin:0}.id-card{box-shadow:none;border-radius:4mm;page-break-inside:avoid}.id-card.front,.id-card.back-card{width:88mm;min-height:56mm}.id-head{font-size:11pt}.id-info strong{font-size:13pt}.id-info span,.back-card p{font-size:8pt}.id-foot{font-size:6pt}}

/* v0.3.34 Kontraktskabeloner */
.responsive-table{width:100%;overflow-x:auto}.sem-table{width:100%;border-collapse:collapse;font-size:14px}.sem-table th,.sem-table td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}.sem-table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.button-cell{white-space:nowrap}.button-cell form{display:inline}.checkbox-line{display:flex!important;align-items:center;gap:8px;font-weight:800;color:var(--muted)}.checkbox-line input{width:auto!important}.tag-list{display:flex;gap:6px;flex-wrap:wrap}.tag-list code{background:color-mix(in srgb, var(--text) 4%, var(--card));border:1px solid var(--line);border-radius:9px;padding:4px 6px;font-size:12px}.tag-list.missing code{background:color-mix(in srgb, var(--red) 16%, var(--card));border-color:color-mix(in srgb, var(--red) 35%, var(--line));color:var(--red)}.success-soft{background:color-mix(in srgb, var(--green) 12%, var(--card));border-color:color-mix(in srgb, var(--green) 35%, var(--line))}.warning-soft{background:color-mix(in srgb, var(--yellow) 18%, var(--card));border-color:color-mix(in srgb, var(--yellow) 40%, var(--line))}
.badge.warn{background:color-mix(in srgb, var(--yellow) 20%, var(--card));color:color-mix(in srgb, var(--yellow) 55%, var(--text))}.flash.warning{background:color-mix(in srgb, var(--yellow) 18%, var(--card));color:color-mix(in srgb, var(--yellow) 55%, var(--text))}


/* v0.3.38 MobileContractCloseFix */
.contract-close-float{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;background:var(--text);color:#fff;border-radius:999px;padding:11px 14px;font-weight:900;font-size:14px;box-shadow:0 12px 28px rgba(15,23,42,.25);border:1px solid rgba(255,255,255,.25)}
.muted-small{color:var(--muted);font-size:13px;margin-top:8px}
@media print{.contract-close-float{display:none!important}}

/* v0.3.40 Contract batch */
.compact-form{gap:8px}.contract-action-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.contract-batch-list{display:grid;gap:10px;margin-top:12px}.contract-batch-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid rgba(15,23,42,.12);border-radius:16px;padding:12px;background:var(--card)}.contract-batch-row input[type="checkbox"]{width:24px;height:24px}.contract-project-main strong{display:block}.contract-project-main em{display:block;color:var(--muted);font-size:13px;font-style:normal;margin-top:3px}.contract-project-side{text-align:right}.contract-project-side b{display:block}.contract-project-side small{display:block;color:var(--muted)}.sticky-action{position:sticky;bottom:0;background:var(--card);backdrop-filter:blur(8px);padding-top:10px;margin-top:14px;border-top:1px solid rgba(15,23,42,.08)}.danger-soft{background:color-mix(in srgb, var(--red) 12%, var(--card))}.contract-viewer-top{position:sticky;top:0;z-index:40;display:flex;gap:10px;background:color-mix(in srgb, var(--text) 4%, var(--card));padding:10px;border-bottom:1px solid rgba(15,23,42,.1)}.pdf-frame-card{height:75vh;margin:0;padding:0;border-radius:16px;overflow:hidden}.pdf-frame{width:100%;height:100%;border:0;background:var(--card)}@media(max-width:700px){.contract-batch-row{grid-template-columns:auto 1fr}.contract-project-side{grid-column:2;text-align:left}.pdf-frame-card{height:70vh}}

.preline{white-space:pre-line;}


/* v0.3.44 Local UX + UE price parity */
.priceHeader{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.priceTotalBox{min-width:150px;border-radius:18px;background:color-mix(in srgb, var(--text) 4%, var(--card));border:1px solid var(--line);padding:14px;text-align:right}.priceTotalBox span{display:block;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase}.priceTotalBox b{font-size:22px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.formgrid{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:center}.formgrid label{font-weight:900;color:var(--muted)}.formgrid input,.formgrid select{width:100%;border:1px solid var(--line);border-radius:16px;padding:14px;font:inherit;background:var(--card)}.statusline{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.local-project-table td,.contractTable td{font-size:16px}.local-project-table .num,.contractTable .num{text-align:right;white-space:nowrap}.contractTable input.contractPct{width:110px;max-width:100%;text-align:right;font-weight:900;border:1px solid var(--line);border-radius:12px;padding:10px}.contractTable .badge{margin-top:0;padding:7px 10px}.badge.yellow{background:color-mix(in srgb, var(--yellow) 20%, var(--card));color:color-mix(in srgb, var(--yellow) 55%, var(--text))}.badge.green{background:color-mix(in srgb, var(--green) 16%, var(--card));color:var(--green)}.ghost{background:var(--card);border:1px solid var(--line);color:var(--blue)}.btnstack{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.action{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:14px;background:color-mix(in srgb, var(--text) 4%, var(--card));margin:10px 0}.itemtitle{font-weight:900;font-size:18px}.small{color:var(--muted);font-size:14px}.num{text-align:right}.contractTableWrap{margin-top:12px}@media(max-width:760px){.priceHeader{display:block}.priceTotalBox{text-align:left;margin-top:10px}.formgrid{grid-template-columns:1fr}.local-project-table,.contractTable{min-width:780px}.project-table-card{padding:14px}.contractTable input.contractPct{width:92px}}

/* v0.3.45 Materialer / rest til fakturering */
.table-wrap{width:100%;overflow-x:auto}.summary-card.right{float:right;min-width:190px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb, var(--text) 4%, var(--card));padding:14px;text-align:right;margin:0 0 12px 12px}.summary-card span,.stat span{display:block;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase}.summary-card strong{font-size:26px}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px}.stat{border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb, var(--text) 4%, var(--card));padding:14px}.stat strong{display:block;font-size:20px;margin-top:4px}.filter-grid{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center}.filter-grid .primary,.filter-grid .secondary{grid-column:auto}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--blue-soft);padding:8px 12px;font-weight:900;color:var(--blue)}.badge.warn{background:color-mix(in srgb, var(--yellow) 20%, var(--card));color:color-mix(in srgb, var(--yellow) 55%, var(--text))}@media(max-width:760px){.summary-card.right{float:none;text-align:left;margin:0 0 12px}.stat-grid{grid-template-columns:1fr 1fr}.filter-grid{grid-template-columns:1fr}.filter-grid label{margin-top:6px}.sem-table{min-width:760px}}

/* v0.3.46 PauseNotesUXCleanup */
.calendar-headline{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.filter-menu{position:relative;min-width:220px}.filter-menu>summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--blue);font-weight:900;padding:12px 16px;box-shadow:0 8px 22px rgba(15,23,42,.05)}.filter-menu>summary::-webkit-details-marker{display:none}.filter-panel{margin-top:10px;border:1px solid var(--line);border-radius:18px;background:var(--card);padding:14px;box-shadow:var(--shadow);min-width:280px}.project-filter-menu{margin-bottom:14px;display:inline-block}.clickrow{cursor:pointer}.clickrow:hover{background:color-mix(in srgb, var(--text) 4%, var(--card))}.project-modal[hidden]{display:none}.project-modal{position:fixed;inset:0;z-index:80;overflow:hidden}.project-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(3px);touch-action:none}.project-modal-card{position:relative;z-index:81;width:min(720px,calc(100vw - 24px));max-height:calc(100vh - 34px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;margin:18px auto;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px 18px calc(100px + env(safe-area-inset-bottom));box-shadow:0 28px 70px rgba(15,23,42,.24)}.modal-close{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:24px;color:var(--blue)}.modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}.modal-grid>div{border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb, var(--text) 4%, var(--card));padding:13px}.modal-grid span{display:block;font-size:12px;font-weight:900;text-transform:uppercase;color:var(--muted)}.modal-grid b{display:block;margin-top:4px}.inline-edit-box{display:grid;grid-template-columns:1fr 130px auto;gap:10px;align-items:end;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb, var(--text) 4%, var(--card));padding:12px;margin:12px 0}.inline-edit-box label{font-size:12px;text-transform:uppercase;font-weight:900;color:var(--muted);margin-bottom:-4px}.inline-edit-box select,.inline-edit-box input{border:1px solid var(--line);border-radius:14px;padding:12px;font:inherit;background:var(--card)}.popup-actions{margin-top:14px}.contact-card{position:relative;cursor:pointer}.callchip{position:absolute;right:12px;top:12px;background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:6px 10px;font-size:13px}.doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.doc-card{display:block;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb, var(--text) 4%, var(--card));padding:14px}.doc-card span{font-size:12px;text-transform:uppercase;font-weight:900;color:var(--muted)}.doc-card strong{display:block;margin-top:3px;word-break:break-word}.doc-card em{display:block;color:var(--muted);font-style:normal;font-size:13px;margin-top:6px}.price-table .total-row td{background:color-mix(in srgb, var(--text) 4%, var(--card));border-top:2px solid var(--line)}.ue-form,.ue-edit-form{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:center}.ue-form button,.ue-edit-form .button-row{grid-column:2}.ue-list{display:grid;gap:12px}.ue-card{border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb, var(--text) 4%, var(--card));padding:14px}.ue-card summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center}.ue-card summary span{color:var(--muted);font-weight:800}.modal-open{overflow:hidden}@media(max-width:760px){.calendar-headline{display:block}.filter-menu{min-width:0}.filter-panel{min-width:0}.modal-grid{grid-template-columns:1fr}.inline-edit-box{grid-template-columns:1fr}.doc-grid{grid-template-columns:1fr}.ue-form,.ue-edit-form{grid-template-columns:1fr}.ue-form button,.ue-edit-form .button-row{grid-column:auto}.project-modal-card{margin:10px auto}.calendar-hero-compact h1{font-size:30px}}
.missing-doc{opacity:.72;background:color-mix(in srgb, var(--yellow) 18%, var(--card));border-style:dashed}.missing-doc strong{color:color-mix(in srgb, var(--yellow) 55%, var(--text))}

.autofill-decoy{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
/* v0.4.2 local SEM UX donor */
.dashboard-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,.8fr);gap:20px}.day-card h1{font-size:42px;margin-bottom:8px}.next-action{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px;border:1px solid var(--line,#dbe3ef);border-radius:18px;margin:14px 0;text-decoration:none;color:inherit;background:var(--card)}.next-action:hover{transform:translateY(-1px)}.primary-action{padding:24px}.primary-action h2{margin:8px 0 4px}.warning-badge{background:color-mix(in srgb, var(--yellow) 25%, var(--card));color:color-mix(in srgb, var(--yellow) 60%, var(--text))}.success-badge{background:color-mix(in srgb, var(--green) 16%, var(--card));color:var(--green)}.all-clear{padding:28px;border:1px solid #dbe3ef;border-radius:18px;margin:18px 0}.quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.quick-actions a{background:var(--blue-soft);color:var(--blue);padding:12px 18px;border-radius:14px;font-weight:800;text-decoration:none}.calm-card{align-self:start}.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}.admin-tile{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid #dbe3ef;border-radius:18px;padding:22px;text-decoration:none;color:inherit}.admin-tile strong{font-size:20px}.admin-tile span,.admin-meta p{color:var(--muted)}.system-status-panel{display:none!important}@media(max-width:760px){.dashboard-grid{grid-template-columns:1fr}.day-card h1{font-size:32px}.admin-grid{grid-template-columns:1fr}.next-action{align-items:flex-start}.mobile-nav{overflow-x:auto;flex-wrap:nowrap}}

/* v0.5.5: PDF-visning med synlig luk-knap, også på smartphone */
.sem-pdf-shell{position:fixed;inset:0;z-index:9999;background:var(--card);display:flex;flex-direction:column}
.sem-pdf-toolbar{flex:0 0 auto;display:flex;align-items:center;gap:.65rem;padding:.65rem max(.65rem,env(safe-area-inset-right)) .65rem max(.65rem,env(safe-area-inset-left));padding-top:max(.65rem,env(safe-area-inset-top));background:var(--card);border-bottom:1px solid #d9dee5;box-shadow:0 2px 10px rgba(0,0,0,.12);z-index:10001}
.sem-pdf-toolbar .primary,.sem-pdf-toolbar .secondary{white-space:nowrap;margin:0}
.sem-pdf-close{font-weight:800}
.sem-pdf-title{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.15}
.sem-pdf-title b,.sem-pdf-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sem-pdf-title span{font-size:.78rem;color:var(--muted);margin-top:.2rem}
.sem-pdf-fullframe{flex:1 1 auto;width:100%;border:0;background:color-mix(in srgb, var(--text) 8%, var(--card));min-height:0}
@media(max-width:640px){.sem-pdf-toolbar{gap:.4rem}.sem-pdf-toolbar .secondary{display:none}.sem-pdf-close{min-height:44px;display:inline-flex;align-items:center;padding:.65rem .9rem}.sem-pdf-title b{font-size:.92rem}}

/* v0.5.5: PDF-visning med synlig luk-knap, også på smartphone */
/* v2.78.0: PDF-visningens stil stod her ORD FOR ORD en gang til.
   En dublet betyder, at en rettelse ét sted ikke virker - forhaandstesten
   'Stilregler der slaar hinanden ihjel' fandt den. Blokken ovenfor gaelder. */

.column-picker{margin:12px 0}.column-picker summary{cursor:pointer;font-weight:900}.column-options{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0}.column-options label{background:color-mix(in srgb, var(--text) 4%, var(--card));border:1px solid var(--line);padding:9px 12px;border-radius:12px;font-weight:800}.invoice-row{cursor:pointer}.invoice-row:target{outline:3px solid #2563eb;background:var(--blue-soft)}.material-proposal-grid{display:grid;gap:8px}.proposal-head,.proposal-row{display:grid;grid-template-columns:minmax(180px,1fr) 120px 100px;gap:10px;align-items:center}.proposal-head{font-size:12px;text-transform:uppercase;color:var(--muted)}.proposal-row input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px;font:inherit}.proposal-row label{font-weight:800}@media(max-width:640px){.proposal-head{display:none}.proposal-row{grid-template-columns:1fr 90px 70px}.material-table{min-width:900px}}
.collapsible{margin:14px 0}.collapsible>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;border-radius:999px;background:var(--blue);color:#fff;font-weight:900;padding:12px 20px;box-shadow:0 8px 22px rgba(15,23,42,.08)}.collapsible>summary::-webkit-details-marker{display:none}.collapsible[open]>summary{margin-bottom:12px}
#users-list .project-row:target{outline:3px solid #2563eb;background:var(--blue-soft)}
a.project-row{text-decoration:none;color:inherit}
.checkbox-label{display:flex;align-items:center;gap:8px;font-weight:800;margin:10px 0}.checkbox-label input{width:auto}
.topbar{flex-wrap:wrap;row-gap:10px}.topbar>div:first-child{min-width:0;flex:1 1 auto}.top-actions{flex-wrap:nowrap;justify-content:flex-end}@media(max-width:480px){.topbar{flex-direction:column;align-items:flex-start}.top-actions{width:100%;justify-content:flex-start}}
.week-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:12px}.week-tile{border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb, var(--text) 4%, var(--card));padding:0;overflow:hidden}.week-tile>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px;gap:2px;text-align:center}.week-tile>summary::-webkit-details-marker{display:none}.week-tile .week-no{font-size:12px;font-weight:900;text-transform:uppercase;color:var(--muted)}.week-tile .week-range{font-size:12px;color:var(--muted)}.week-tile .week-count{font-size:26px;font-weight:900;color:var(--blue);margin-top:2px}.week-tile.empty .week-count{color:var(--muted)}.week-tile.has-projects{background:var(--blue-soft);border-color:color-mix(in srgb, var(--blue) 35%, var(--line))}.week-tile[open]{grid-column:1 / -1}.week-projects{display:grid;gap:8px;padding:0 12px 14px}.week-project-row{display:block;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);text-decoration:none;color:inherit}.week-project-row span{display:block;color:var(--muted);font-size:13px;margin-top:2px}.week-project-row.not-ready{border-color:color-mix(in srgb, var(--red) 35%, var(--line));background:color-mix(in srgb, var(--red) 16%, var(--card))}
@media(min-width:900px){.page{max-width:1200px}}
@media(min-width:1300px){.page{max-width:1400px}}
.version-tag{font-size:11px;color:var(--muted);opacity:.6;margin-top:2px;letter-spacing:.02em}
.offline-sync-banner{position:relative;z-index:4;background:color-mix(in srgb, var(--yellow) 20%, var(--card));color:color-mix(in srgb, var(--yellow) 55%, var(--text));padding:10px 18px;font-weight:800;font-size:13px;text-align:center}
.offline-sync-banner.ok{background:color-mix(in srgb, var(--green) 16%, var(--card));color:var(--green)}
.offline-sync-banner{cursor:pointer}


/* v2.39.0: tidsplanens faser vises småt og roligt - ikke som fede overskrifter.
   En sag har fem faser, og de skal kunne læses i ét blik uden at dominere. */
.phase-line{font-size:.82rem;line-height:1.55;color:var(--muted)}
.phase-line em{font-style:normal;font-weight:600;color:var(--text);margin-right:.4rem}
.phase-list{margin:.3rem 0 .9rem}
.modal-time{grid-column:1/-1}
.modal-time span{display:block;margin-bottom:.25rem}
/* UE-felterne stod og svævede hver for sig - nu på række med lige bredde */
.ue-fields{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0}
.ue-fields label{flex:1 1 10rem;display:block;font-size:.85rem}
.ue-fields input{width:100%}


/* v2.45.0: temaernes typografi slår igennem på overskrifter og tal. */
h1, h2, .brand { font-family: var(--font-display); }
.num, .money, td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }


/* v2.48.0: sprogvælgeren i toppen - kun synlig for UE-brugere. */
.lang-picker select{font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:5px 8px}
.lang-picker select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}


/* v2.50.0: bjælken under en visning. Den skal ikke kunne overses - derfor
   temaets tekstfarve som bund, så den skiller sig ud fra alt andet. */
.view-as-bar{position:sticky;top:0;z-index:7;display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;background:var(--text);color:var(--card);padding:8px 20px;font-size:.85rem}
.view-as-bar button{font:inherit;font-weight:700;border:1px solid var(--card);background:none;color:var(--card);
  border-radius:999px;padding:4px 12px;cursor:pointer}
.view-as-bar button:focus-visible{outline:2px solid var(--card);outline-offset:2px}


/* v2.50.1: .stack og .listrow blev brugt på otte sider, men fandtes aldrig i
   stilarket - derfor stod etiket og beløb klistret sammen ("Din pris49.200,75
   kr."). Etiketten står til venstre, tallet til højre, med luft imellem. */
.stack{display:grid;gap:.55rem}
.stack.compact{gap:.35rem}
.listrow{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem}
.listrow>span{color:var(--muted)}
.listrow>strong{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}


/* v2.51.0: mærket på en maskinoversat tekst. Diskret, men til at se - man
   skal vide, om man læser husets ord eller maskinens. */
.machine-badge{font-size:11px;font-weight:600;letter-spacing:.04em;padding:1px 7px;border-radius:999px;
  background:color-mix(in srgb, var(--yellow) 18%, var(--card));color:color-mix(in srgb, var(--yellow) 55%, var(--text));
  border:1px solid color-mix(in srgb, var(--yellow) 35%, var(--line))}


/* v2.51.4: .table blev brugt på 14 sider, men fandtes aldrig i stilarket -
   ligesom .listrow og .stack. Uden den havde cellerne hverken luft eller
   justering, så beløbet stod og skubbede til teksten ved siden af. */
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:0 10px 7px 0;border-bottom:1px solid var(--line)}
.table td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table th:last-child,.table td:last-child{padding-right:0}
.table.compact{font-size:14px}
.table.compact td{padding:7px 8px 7px 0}
.table tfoot th{border-bottom:0;border-top:2px solid var(--line);padding-top:9px;
  text-transform:none;font-size:14px;color:var(--text)}
/* Tal står til højre med fast cifferbredde, så beløb kan sammenlignes lodret. */
.table .num,.table th.num,.table td.num{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-family:var(--font-mono)}


/* v2.51.4: klasser der har været brugt på siderne uden nogensinde at have en
   stil. De mest brugte får den her - resten holdes i skak af forhåndstesten. */
.button-like{display:inline-block;cursor:pointer;list-style:none;padding:10px 14px;border-radius:999px;
  font-weight:700;font-size:14px}
.button-like::-webkit-details-marker{display:none}
summary.primary.button-like{background:var(--blue);color:#fff}
summary.secondary.button-like{background:var(--blue-soft);color:var(--blue);border:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.codebox{background:color-mix(in srgb, var(--text) 6%, var(--card));border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;overflow-x:auto;font-family:var(--font-mono);font-size:13px;
  white-space:pre-wrap;word-break:break-word}
.smallcode{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.clean-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}


/* v2.51.5: felterne i et formulargitter stod med etiket og felt på samme
   linje, så "P1 start" klistrede sig til datoen. Etiketten står nu over. */
.form-grid label{display:grid;gap:4px;font-weight:600;font-size:14px}
.form-grid input,.form-grid select{width:100%}
/* Den grønne "udført"-boks havde sine farver skrevet direkte i siden. */
.done-box{background:color-mix(in srgb, var(--green) 14%, var(--card));
  border-color:color-mix(in srgb, var(--green) 40%, var(--line));color:var(--green)}
.done-box b{color:var(--green)}

.soft-box{background:color-mix(in srgb, var(--text) 4%, var(--card))}
.done-text{color:var(--green)}

/* v2.55.4: kontraktlisten paa telefon.
   Syv kolonner blev tvunget ind i 780px og skulle rulles vandret. Beloebet stod
   yderst til hoejre og var derfor klippet af uden at nogen kunne se det. Paa
   smal skaerm folder hver raekke nu ud som et kort med etiket foran hvert tal,
   saa intet ligger uden for kanten. */
@media(max-width:760px){
  .contractTable{min-width:0;width:100%}
  .contractTable thead{display:none}
  .contractTable tbody tr{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
    border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px;
    background:color-mix(in srgb, var(--text) 3%, var(--card))}
  .contractTable tbody td{border:0;padding:0;display:flex;justify-content:space-between;
    align-items:baseline;gap:12px;grid-column:2}
  .contractTable tbody td:first-child{grid-column:1;grid-row:1 / span 6;align-self:start}
  .contractTable tbody td[data-label]::before{content:attr(data-label);color:var(--muted);
    font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;flex:0 0 auto}
  .contractTable tbody td[data-label="Projekt"]{display:block}
  .contractTable tbody td[data-label="Projekt"]::before{display:block;margin-bottom:2px}
  .contractTable tbody td.num{text-align:right;white-space:normal}
  .contractTable input.contractPct{width:110px}
  .contractTable tbody td[colspan]{grid-column:1 / -1;display:block}
  .contractTable tbody td[colspan]::before{content:none}
}

/* v2.55.4: toppen fyldte naesten en tredjedel af telefonskaermen, og naar
   navnet foldede til to linjer, stoedte Skift password/Log ud ind i det.
   Handlingerne bliver nu paa samme raekke som logoet i stedet for at laegge sig
   nedenunder i fuld bredde, og pillerne er mindre. */
@media(max-width:520px){
  .topbar{flex-direction:row;align-items:flex-start;column-gap:10px;row-gap:8px}
  .topbar>div:first-child{flex:1 1 auto;min-width:0}
  .brand-logo{max-height:32px;max-width:130px}
  .sub{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top-actions{width:auto;flex:0 0 auto;justify-content:flex-end;gap:6px;position:relative}
  .top-actions .pill{padding:7px 10px;font-size:13px}
}

/* v2.59.0: .quick blev brugt som link uden at vaere en blok. Et <a> er inline,
   saa de indre span/strong (som ER blokke) faldt uden for flisen og laa oven i
   hinanden som tomme kasser. */
a.quick{display:block;text-decoration:none;color:inherit}
a.quick strong{color:var(--blue)}

/* v2.60.0: top og navigation bliver haengende, saa man altid kan komme videre
   uden foerst at rulle helt op. Toppen er samtidig slanket paa telefon -
   taglinje og version er pynt, og de to sjaeldne knapper ligger i en menu. */
.sticky-top{position:sticky;top:0;z-index:6;background:var(--bg)}
.sticky-top .topbar{position:static}
/* v2.78.0: her stod en placeringsregel for brugermenuen, men den blev alligevel
   overtrumfet af blokken nederst i filen. Den er fjernet - to steder at rette
   samme ting er dét, der gjorde menuen umulig at fejlfinde.
   (Reglen er ikke gengivet her: forhaandstesten laeser filen som tekst, saa en
   regel skrevet i en kommentar taeller med. Samme faelde som med rolletjek i
   ruternes kommentarer.) */
.user-menu>summary{list-style:none;cursor:pointer}
.user-menu>summary::-webkit-details-marker{display:none}
/* v2.74.3-reglerne er fjernet i v2.78.0: de blev overtrumfet af blokken
   nederst i filen og gjorde kun fejlfindingen sværere. */
.user-menu-panel .pill{display:block;width:100%;text-align:center;padding:12px 14px;white-space:nowrap} /* sem:stil-ok */
/* v2.60.1: tilbage er en handling, ikke et sted. Derfor en lille rund pil,
   adskilt fra navigationspunkterne med en tynd streg. */
.nav-back{flex:0 0 auto;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--blue);font-size:20px;line-height:1;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:8px;padding-right:0;border-right:1px solid var(--line)}
.mobile-nav{align-items:center}
@media(max-width:640px){
  .sticky-top .brand-line{font-size:11px;line-height:1.2;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sticky-top .version-tag{display:inline}
  .sticky-top .topbar{padding-top:8px;padding-bottom:6px}
  .brand-logo{max-height:28px;max-width:110px}
}

/* v2.60.0: ALLE tabeller, ikke kun kontraktlisten. Reglen tvang enhver tabel til
   mindst 760 px paa telefon, saa den skulle rulles vandret - og det yderste
   indhold, typisk beloebet, laa uden for kanten uden at noget antydede det.
   Etiketterne saettes paa af semTabelEtiketter() ud fra tabellens egen
   overskriftsraekke, saa ingen skabelon skal roeres. */
@media(max-width:760px){
  .sem-table.sem-kort{min-width:0;width:100%}
  .sem-table.sem-kort thead{display:none}
  .sem-table.sem-kort tbody tr{display:block;border:1px solid var(--line);border-radius:16px;
    padding:12px;margin-bottom:10px;background:color-mix(in srgb, var(--text) 3%, var(--card))}
  .sem-table.sem-kort tbody td{display:flex;justify-content:space-between;align-items:baseline;
    gap:12px;border:0;padding:4px 0;text-align:left;white-space:normal}
  .sem-table.sem-kort tbody td[data-label]::before{content:attr(data-label);color:var(--muted);
    font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto}
  .sem-table.sem-kort tbody td[colspan]{display:block}
  .sem-table.sem-kort tbody td[colspan]::before{content:none}
}

/* v2.60.0: soegefelt over en lang vareliste. */
.vare-soeg{margin-bottom:6px}

/* v2.60.0: hver varelinje er sin egen boks med nummer, saa en ny linje ikke
   smelter sammen med den foregaaende paa en lang telefonskaerm. */
.line-row{border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:12px;
  background:color-mix(in srgb, var(--text) 3%, var(--card))}
.line-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.line-no{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.line-row.line-ny{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

/* v2.61.0: advarsel om at et testbuild koerer paa driftens database. Skal ikke
   kunne overses og kan ikke lukkes - opdages den for sent, er skaden sket.
   v3.38.1: den fyldte fire linjer oeverst paa telefonen og laa som en fejl paa
   siden. Nu én tynd stribe: samme roede farve, halv hoejde, én linje. */
.db-warning-bar{background:color-mix(in srgb, var(--red) 10%, var(--card));
  color:var(--red);border-bottom:1px solid var(--red);
  padding:3px 12px;font-weight:700;font-size:11px;line-height:1.5;
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v2.61.0: punkterne i en fri rapport - hvert punkt er sin egen boks. */
.punkt-kort{margin-bottom:12px}
.punkt-nr{margin:0}
.punkt-fil{width:100%}
.punkt-tekst{width:100%}

/* v2.63.0: kontoen i butiksvinduet. Den skal kunne laeses paa en armslaengdes
   afstand af en ekspedient, der kigger paa en telefon vendt mod sig. */
.butik-konto{border:2px solid var(--blue)}
.butik-stor{font-size:30px;font-weight:900;line-height:1.15;margin:6px 0 2px;color:var(--blue)}

/* v2.64.0: status som en lille prik i venstre kant. Formen skifter sammen med
   farven - fyldt, halv og aaben - saa listen ogsaa kan laeses i sollys paa en
   byggeplads, hvor roed og groen flyder sammen paa en telefonskaerm. */
.statuscell{width:26px;padding-right:0}
.statusdot{display:inline-block;width:12px;height:12px;border-radius:999px;border:2px solid}
.statusdot.dot-ok{background:var(--green);border-color:var(--green)}
.statusdot.dot-wait{background:linear-gradient(90deg,var(--yellow) 50%,transparent 50%);border-color:var(--yellow)}
.statusdot.dot-bad{background:transparent;border-color:var(--red)}
.local-project-table thead th:first-child{width:26px}

/* v2.78.0: brugermenuen, tredje forsoeg - og denne gang efter at have MAALT
   hvilken regel der vinder i stedet for at gaette.
   De to foerste rettelser stod tidligere i filen end den generelle .user-menu-panel,
   og en senere regel med samme styrke vinder. De blev altsaa slaaet ihjel af min
   egen aeldre kode. Derfor staar det her, allersidst, hvor intet kan overtrumfe.
   Panelet haenger fra hoejre kant af handlingsraekken, ligger over alt andet, og
   faar aldrig lov at skubbe til bjaelken. */
.top-actions{position:relative;overflow:visible} /* sem:stil-ok - skal vinde over den generelle */
.user-menu{position:static} /* sem:stil-ok - panelet haenger fra raekken */
.user-menu-panel{position:absolute;right:0;left:auto;top:calc(100% + 10px); /* sem:stil-ok - skal staa sidst */
  min-width:200px;max-width:calc(100vw - 28px);z-index:200;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;
  box-shadow:0 18px 44px rgba(15,23,42,.22);display:flex;flex-direction:column;gap:8px}
.user-menu-panel .pill{display:block;width:100%;text-align:center;padding:12px 14px;white-space:nowrap; /* sem:stil-ok */}

/* v2.80.0: naar man trykker paa en knap der starter noget, skal man kunne SE
   at den arbejder. Uden det er der ingen forskel paa "arbejder" og "gik i staa"
   - og saa trykker man igen, hvilket ved en installation kan starte to paa
   én gang. Hjulet snurrer, knappen bliver utilgaengelig, og teksten skifter. */
.sem-arbejder{position:relative;pointer-events:none;opacity:.75}
.sem-arbejder::after{content:"";position:absolute;top:50%;right:12px;width:14px;height:14px;
  margin-top:-7px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:sem-snurre .7s linear infinite}
@keyframes sem-snurre{to{transform:rotate(360deg)}}
.sem-arbejder{padding-right:38px}

/* v2.84.0: en prik der pulserer, saa man kan SE at der sker noget - ogsaa naar
   siden ellers bare venter. Et hjul i en knap hjaelper ikke, naar browseren har
   forladt siden. */
.sem-puls{display:inline-block;animation:sem-puls 1s ease-in-out infinite;color:var(--blue)}
@keyframes sem-puls{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* v2.90.0: GNUEN, femte forsoeg - og denne gang holder jeg op med at placere
   panelet praecist. Fire gange har jeg flyttet rundt paa position, z-index og
   overflow, og fire gange er der dukket noget nyt op: en raekke der ombryder,
   en regel der vandt over min, en sticky beholder der klipper.
   Et panel, der skal haenge praecis det rigtige sted i en sticky topbjaelke,
   er skroebeligt af natur.
   Paa telefon laegger menuen sig derfor NEDERST paa skaermen i fuld bredde.
   Den kan ikke klippes af noget, den kan ikke skubbe til noget - og den er
   lettere at ramme med en tommelfinger end en lille menu oppe i hjoernet. */
@media(max-width:640px){
  .user-menu[open] .user-menu-panel{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; max-width:none; border-radius:20px 20px 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(15,23,42,.28); z-index:300;
  }
  /* Skyggen bag - saa man kan se at menuen er "oven paa", og lukke ved at
     trykke udenfor. */
  .user-menu[open]::before{
    content:""; position:fixed; inset:0;
    /* v2.90.0: temaets tekstfarve, ikke en fast vaerdi - saa skyggen ogsaa
       virker i moerkt tema. Forhaandstesten fangede det. */
    background:color-mix(in srgb, var(--text) 38%, transparent);
    z-index:299;
  }
  .user-menu-panel .pill{padding:16px 14px;font-size:16px}
}
.only-phone{display:none}
@media(max-width:640px){.only-phone{display:block;width:100%;margin-top:4px}}

/* v3.5.0: sagens sektioner som foldbare overskrifter - siden aabner som indholdsfortegnelse */
.fold>summary{cursor:pointer;font-size:22px;font-weight:800;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";color:var(--blue);font-weight:900;font-size:24px}
.fold[open]>summary::after{content:"\2212"}
.fold[open]>summary{margin-bottom:14px}
.pricelink{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* v3.8.1: tre smaa statusprikker pr. sag - dokumenter/datoer/UE */
.dotrow{display:inline-flex;gap:4px;align-items:center}
.minidot{display:inline-block;width:9px;height:9px;border-radius:999px;border:2px solid}
.minidot.mini-ok{background:var(--green);border-color:var(--green)}
.minidot.mini-half{background:linear-gradient(90deg,var(--green) 50%,transparent 50%);border-color:var(--green)}
.minidot.mini-bad{background:transparent;border-color:var(--red)}

/* v3.15.0: skoen-advarsel - et gaet maa aldrig ligne en maaling */
.warnbox{background:color-mix(in srgb, var(--yellow) 18%, transparent);border:1px solid var(--yellow);border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:.92rem}

/* v3.17.0: forventede tal skal kunne ses fra de kendte paa et oejeblik */
.est-row td{background:color-mix(in srgb, var(--yellow) 12%, transparent)}

/* v3.24.0: vis-vaelger, klodser med ikon, og markering af sagen man kom fra */
.visvaelg{display:flex;gap:8px;margin:10px 0 4px}
/* v3.32.1: SAMME maal som Administration - en klods skal se ens ud, uanset om
   man staar paa sagen, paa projektlisten eller i Administration. */
.klodsgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:14px 0;max-width:1000px}
.klods{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 10px;
  color:var(--text);font:inherit;font-weight:700;cursor:pointer;text-align:center;min-height:118px}
.klods:hover{border-color:var(--blue)}
.klods svg{width:28px;height:28px;color:var(--blue)}
.klods span{font-size:.88rem;line-height:1.25}
tr.kom-fra > td{background:color-mix(in srgb, var(--blue) 10%, transparent)}
.klods-sag{min-height:96px;gap:6px}
.klods-sag .dotrow{margin-bottom:2px}
.klods-sag{padding:14px 12px 12px}
.klods-flade{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:inherit;font:inherit;font-weight:700;cursor:pointer;width:100%}
.klods-butik{margin-top:10px}
/* v3.28.0: klodser der foerer til en anden side, og markering af den aabne */
.klods-link{border-style:dashed}
.klods-aaben{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent)}
.klodsgitter-under{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));margin:6px 0 16px}
.klodsgitter-under .klods{min-height:92px;padding:14px 10px}
.klodsgitter-under .klods svg{width:26px;height:26px}
.foto-liste{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px}
.foto-post{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0}
.skjult-af-klods{display:none}
.hidden-link{display:none}
/* v3.30.0: Administration som klodser */
.admin-tile.admin-klods{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:8px;text-align:center;padding:20px 12px;min-height:124px}
.admin-tile.admin-klods svg{width:32px;height:32px;color:var(--blue)}
.admin-tile.admin-klods span{font-size:.9rem;line-height:1.3}

/* v3.31.0: Administration i klodsevisning skal kunne have fire paa en linje.
   Grundgitteret staar paa faste 2 kolonner; her lader vi bredden bestemme, saa
   store skaerme faar flere og mobilen stadig faar een pr. linje. */
/* Fire pr. linje paa stor skaerm - flere ville goere dem for smaa og urolige.
   Paa smallere skaerme falder antallet af sig selv. */
body.adm-klodser .admin-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));max-width:1000px}
body.adm-klodser .admin-tile.admin-klods{padding:18px 10px;min-height:118px;gap:6px}
body.adm-klodser .admin-tile.admin-klods strong{font-size:16px}
body.adm-klodser .admin-tile.admin-klods span{font-size:.82rem;line-height:1.25}
body.adm-klodser .admin-tile.admin-klods svg{width:28px;height:28px}
/* Gruppeoverskriften som klods */
/* v3.33.0: gruppeoverskrifterne staar nu som EET gitter af klodser oeverst -
   ikke som en overskrift i hvert sit kort. Se tegnGruppeKlodser. */
#gruppeGitter{margin-bottom:22px}
summary.gruppe-klods::-webkit-details-marker{display:none}
summary.gruppe-klods svg{width:30px;height:30px;color:var(--blue)}
summary.gruppe-klods span{font-size:1rem;font-weight:800}
@media(max-width:760px){
  body.adm-klodser .admin-grid,
  body.adm-klodser .admin-grid-frit,
  .klodsgitter{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  summary.gruppe-klods{width:140px}
}

/* v3.32.0: fliser der ikke hoerer til en gruppe - de staar frit oeverst i
   stedet for at vaere pakket ind i en gruppe med kun een flise. */
.admin-grid-frit{margin-bottom:22px}
body.adm-klodser .admin-grid-frit{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));max-width:1000px}

/* v3.35.0: klodsevisning virker nu paa ENHVER side med .admin-tile - ikke kun
   Administration. Derfor uden body-praefiks paa maalene. */
body.adm-klodser .admin-grid,
body.adm-klodser .admin-grid-frit{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));max-width:1000px}
/* v3.36.0: sagens behandlinger laest af materialevalget */
.malerposter{margin:0 0 14px}

/* v3.45.2: afsluttede sager skal kunne skelnes med ét blik. Graa, ikke blaa -
   blaa laeses som 'endnu en status'. Raekken daempes, saa oejet loeber forbi
   den, men teksten kan stadig laeses. */
.badge-afsluttet{background:color-mix(in srgb, var(--text) 10%, var(--card));color:var(--muted);font-weight:900}
.row-afsluttet{opacity:.55}
.row-afsluttet b{font-weight:700}

/* v3.55.0: hattebæltet. Diskret, men altid der - en hat man ikke kan se, er
   en funktion der bare er forsvundet. */
.hat-baelte{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:6px 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.hat-mrk{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hat-knap{border:1px solid transparent;background:transparent;color:var(--muted);
  font:inherit;font-size:.86rem;padding:4px 10px;border-radius:999px;cursor:pointer}
.hat-knap.valgt{background:var(--card);border-color:var(--line);color:var(--text);font-weight:700}

/* v3.59.0: taglinjen under logoet maatte aldrig kunne laegge sig hen over
   knapperne (lys/moerk og log ud). Den holdes paa EEN linje og afkortes med
   ellipsis ved alle bredder; den venstre blok klipper sit indhold; og
   handlingsknapperne ligger oeverst, saa de altid kan trykkes. */
.topbar>div:first-child{min-width:0;overflow:hidden}
.brand-line,.topbar .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.top-actions{position:relative;z-index:4}

/* v3.59.1: paa ALLE telefoner - ogsaa i LIGGENDE retning, hvor bredden er over
   640px - laegger brugermenuen (Skift password / Log ud) sig nederst i fuld
   bredde. I liggende faldt den foer tilbage til nedhaengs-panelet, der lagde sig
   BAG navigationslinjen, saa Log ud blev skjult. Et bund-panel kan ikke daekkes. */
@media (pointer: coarse){
  .user-menu[open] .user-menu-panel{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; max-width:none; border-radius:20px 20px 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(15,23,42,.28); z-index:9000;
  }
  .user-menu[open]::before{
    content:""; position:fixed; inset:0;
    background:color-mix(in srgb, var(--text) 38%, transparent); z-index:8999;
  }
  .user-menu-panel .pill{padding:16px 14px;font-size:16px}
  .only-phone{display:block}
}

/* v3.59.2: formularfelternes tekst og pladsholdere foelger temaet - i moerk
   tilstand var de naesten sorte paa moerk baggrund og ulaeselige. iOS giver
   ellers felterne sin egen faste, moerke farve. */
.form input, .form textarea, .form select,
input, textarea, select { color: var(--text); }
.form input::placeholder, .form textarea::placeholder,
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
option { color: var(--text); background: var(--card); }

/* v3.60.0: kontomenuen er flyttet ned i "Viser"-raekken som en tydelig,
   tap-venlig knap, og panelet aabner nu som et KORT MIDT PAA SKAERMEN - roligt
   og til at overskue, i stedet for en lille prik oppe i hjoernet. */
.konto-menu{margin-left:auto}           /* skubbes ud til hoejre for hatterne */
.menu-knap{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  min-height:42px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--text);font-weight:800;white-space:nowrap}
.menu-knap::-webkit-details-marker{display:none}
.menu-knap:hover{background:var(--blue-soft);color:var(--blue)}
.menu-ikon{font-size:16px;line-height:1}
.user-menu[open] .user-menu-panel{
  position:fixed !important; left:50% !important; top:50% !important;
  right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:min(360px, calc(100vw - 32px)) !important; max-width:none !important;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:20px; box-shadow:0 30px 80px rgba(0,0,0,.45); z-index:9001;
  display:flex; flex-direction:column; gap:12px;
}
.user-menu[open]::before{
  content:""; position:fixed; inset:0;
  background:color-mix(in srgb, var(--text) 45%, transparent); z-index:9000;
}
.menu-titel{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--text)}
.user-menu-panel .pill{display:block;width:100%;text-align:center;padding:16px 14px;font-size:16px}


/* v3.62.1: paa telefon blev projektlisten TVUNGET 780px bred (min-width fra to
   aeldre regler), saa den skoed ud over skaermkanten og klippede tidsplan-noten
   og Set-knappen. Paa en telefon skal listen fylde skaermens bredde og bryde
   linjer, ikke rulle sidevaerts. */
@media (max-width: 760px){
  .local-project-table{ min-width:0 !important; }
  .local-project-table td{ word-break:break-word; }
  .local-project-table .button-cell{ white-space:normal; }
  .tidsplan-set{ margin-top:4px; }
}