:root {
  --bg: #f6f4ef;
  --paper: #ffffff;
  --ink: #1f2a2e;
  --muted: #5f6b6f;
  --line: #dcd7cc;
  --accent: #2f6b4f;
  --accent-soft: #e3efe8;
  --warn: #b5462f;
  --warn-soft: #f7e3dd;
  --gold: #c08a2a;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 1rem/1.5 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; }

/* Header */
.top {
  background: var(--accent); color: #fff; padding: .75rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center;
}
.logo { color: #fff; text-decoration: none; font-size: 1.4rem; font-weight: 700; letter-spacing: .01em; }
.logo small { font-weight: 400; opacity: .8; font-size: .95rem; }
.top nav { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .85rem; }
.navgrp { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.navbyg { opacity: .75; margin-right: .2rem; }
.navgrp a { color: #fff; text-decoration: none; padding: .15rem .5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); }
.navgrp a:hover, .navgrp a.on { background: #fff; color: var(--accent); }

main { max-width: 1500px; margin: 0 auto; padding: 1.25rem; }
.bund { text-align: center; color: var(--muted); font-size: .85rem; padding: 2rem 1rem; }

/* Forside */
.intro h1 { font-size: 2.2rem; margin: .5rem 0; }
.intro h1 span { font-weight: 400; color: var(--muted); }
.intro p { max-width: 60ch; color: var(--muted); }
.bygninger { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); margin-top: 1.5rem; }
.byg { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem; }
.byg h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
.etager { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.etage { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: transform .12s, box-shadow .12s; }
.etage:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: var(--accent); }
.thumb { display: block; height: 120px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #fff; border-bottom: 1px solid var(--line); }
.etnavn { font-weight: 600; padding: .45rem .6rem 0; }
.antal { font-size: .8rem; color: var(--muted); padding: 0 .6rem .5rem; }

/* Etage */
.etoverskrift { font-size: 1.6rem; margin: .25rem 0 1rem; }
.etoverskrift span { font-weight: 400; color: var(--muted); }
.etage-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .etage-layout { grid-template-columns: 1fr; } }

.tegning-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: sticky; top: .75rem; }
.zoom { display: flex; gap: .35rem; align-items: center; padding: .5rem; border-bottom: 1px solid var(--line); }
.zoom button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: .2rem .7rem; cursor: pointer; font-size: .95rem; }
.zoom button:hover { border-color: var(--accent); }
.zoom .hint { margin-left: auto; color: var(--muted); font-size: .8rem; }
.tegning { overflow: auto; max-height: calc(100vh - 16rem); cursor: grab; }
.tegning.drag { cursor: grabbing; user-select: none; }
.plan { position: relative; width: 100%; margin: 0 auto; }
/* Tilpas: hele tegningen synlig uden at scrolle */
.plan.fit { max-width: calc((100vh - 16rem) * var(--ar)); }
.plan img { display: block; width: 100%; height: 100%; pointer-events: none; }

.pin {
  position: absolute; transform: translate(-50%, -50%);
  font: 600 .72rem/1 system-ui, sans-serif; letter-spacing: .02em;
  padding: .3rem .45rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--accent); color: #fff; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); opacity: .92; transition: transform .1s, background .1s;
}
.pin:hover { transform: translate(-50%, -50%) scale(1.12); opacity: 1; z-index: 2; }
.pin.har-booking { background: var(--gold); }
.pin.valgt { background: var(--warn); transform: translate(-50%, -50%) scale(1.2); z-index: 3; opacity: 1; box-shadow: 0 0 0 4px rgba(181,70,47,.3), 0 2px 8px rgba(0,0,0,.3); }

/* Panel */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
legend { font-weight: 700; margin-bottom: .5rem; color: var(--accent); }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .6rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .2rem; font: inherit; color: var(--ink);
  padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.row { display: flex; gap: .6rem; }
.row > label { flex: 1; }

.lokaleliste { display: flex; flex-direction: column; gap: .3rem; max-height: 320px; overflow: auto; }
.lok { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; color: var(--ink); font-size: .9rem; }
.lok input { width: auto; margin: 0; }
.lok .kode { font-weight: 700; min-width: 4.6rem; font-variant-numeric: tabular-nums; }
.lok .navn small { color: var(--muted); }
.lok:hover { border-color: var(--accent); }
.lok:has(input:checked), .lok.valgt { background: var(--accent-soft); border-color: var(--accent); }
.lok.gruppe { border-style: dashed; }
.lok .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--gold); margin-left: auto; flex: none; }

.dagsplan { background: var(--bg); border-radius: 8px; padding: .6rem .75rem; }
.dagsplan h3 { font-size: .85rem; margin: 0 0 .4rem; }
.dagsplan ul { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.dagsplan li { display: flex; gap: .6rem; padding: .15rem 0; }
.dagsplan li.fremhaev { font-weight: 700; }
.dagsplan .tid { font-variant-numeric: tabular-nums; min-width: 6.5rem; }
.tom { color: var(--muted); font-size: .85rem; margin: 0; }

.status { font-size: .75rem; padding: .05rem .45rem; border-radius: 999px; background: var(--line); }
.s-godkendt { background: var(--accent-soft); color: var(--accent); }
.s-ønsket { background: #f5ecd8; color: #8a6116; }
.s-afvist { background: var(--warn-soft); color: var(--warn); }

.send, .knap {
  display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: .7rem 1.2rem; font: 600 1rem system-ui, sans-serif; cursor: pointer; text-decoration: none;
}
.send { width: 100%; }
.send:hover, .knap:hover { filter: brightness(1.1); }
.knap.sek { background: #fff; color: var(--accent); border: 1px solid var(--accent); }

.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.alert.fejl { background: var(--warn-soft); color: var(--warn); }
.alert ul { margin: .3rem 0 0; }

.kvittering, .login { max-width: 560px; margin: 2rem auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.kvittering h1 { color: var(--accent); margin-top: 0; }
.kvittering dl { display: grid; grid-template-columns: 7rem 1fr; gap: .35rem .75rem; }
.kvittering dt { color: var(--muted); }
.kvittering dd { margin: 0; }

/* Admin */
.filter { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; }
.filter label { margin: 0; min-width: 150px; }
.tabelwrap { overflow-x: auto; }
table.admin { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); font-size: .88rem; }
table.admin th, table.admin td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.admin th { background: var(--bg); font-size: .8rem; color: var(--muted); }
table.admin .formaal { max-width: 260px; }
.handl form { display: flex; gap: .25rem; flex-wrap: wrap; }
.mini { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: .2rem .5rem; cursor: pointer; font-size: .8rem; }
.mini.ok { border-color: var(--accent); color: var(--accent); }
.mini.slet { color: var(--warn); }

/* Flere lokaler */
.lok input[type=checkbox] { accent-color: var(--accent); width: 1rem; height: 1rem; }
.grpknap { width: 100%; margin-top: .5rem; padding: .5rem .8rem; font-size: .9rem; }
.grpknap.on { background: var(--accent); color: #fff; }
.valgtinfo { margin-top: .5rem; font-size: .85rem; color: var(--muted); }
.valgtinfo.fejl { color: var(--warn); font-weight: 600; }
.alert.ok { background: var(--accent-soft); color: var(--accent); }