/* SommerhusDirekte – stilark */

:root {
  --ink: #16232b;
  --muted: #5f717d;
  --brand: #e2503c;
  --brand-dark: #c23e2b;
  --brand-soft: #fdeeeb;
  --deep: #0f4c5c;
  --deep-2: #14657a;
  --sand: #faf7f2;
  --line: #e7e2d9;
  --ok: #1f8a5b;
  --ok-soft: #e6f5ee;
  --danger: #c0392b;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(16, 38, 48, .08);
  --shadow-lg: 0 16px 40px rgba(16, 38, 48, .14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--deep-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

.container { width: min(1180px, 92vw); margin: 0 auto; }
.container.narrow { width: min(860px, 92vw); }
.muted { color: var(--muted); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 .3em;
}
code {
  background: #f1ede6;
  padding: .1em .4em;
  border-radius: 6px;
  font-size: .9em;
}

/* Drift-besked ---------------------------------------------------------
   Båndet under menuen, når en administrator har skrevet en besked i
   Indstillinger (fx "Vi opdaterer i aften"). Tilføjet 2026-10-08.
   Farven er bevidst rolig: den skal læses, ikke råbe. */
.drift-besked {
  background: var(--brand-soft);
  border-bottom: 1px solid var(--line);
  color: var(--brand-dark);
  font-size: .92rem;
  font-weight: 600;
  padding: .6rem 0;
}
.drift-besked .container { display: block; }

/* Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -.02em;
}
.logo:hover { text-decoration: none; }
.logo svg { color: var(--brand); }
.logo em { color: var(--brand); font-style: normal; }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a { color: var(--ink); font-weight: 600; font-size: .95rem; }
.nav a.is-active, .nav a:hover { color: var(--brand); text-decoration: none; }
.nav-form { display: inline; margin: 0; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1.2rem;
  padding: .3rem .6rem;
  cursor: pointer;
}

/* Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .72rem 1.35rem;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  text-decoration: none !important;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-outline { background: #fff; color: var(--deep); border-color: var(--line); }
.btn-outline:hover { border-color: var(--deep); }
.btn-ghost { background: transparent; color: var(--muted); border-color: transparent; }
.btn-ghost:hover { color: var(--ink); background: #f3f0ea; }
.btn-danger { background: #fff; color: var(--danger); border-color: #f0d3ce; }
.btn-danger:hover { background: #fdf1ef; }
.btn-sm { padding: .5rem 1rem; font-size: .88rem; }
.btn-xs { padding: .3rem .7rem; font-size: .78rem; }
.btn-block { width: 100%; }
.btn-lg { padding: .9rem 1.8rem; font-size: 1rem; }

/* Alerts -------------------------------------------------------------- */
.alert {
  border-radius: 12px;
  padding: .85rem 1.1rem;
  margin: 1.1rem 0 0;
  font-weight: 600;
  font-size: .95rem;
}
.alert-ok { background: var(--ok-soft); color: #136246; border: 1px solid #bfe6d4; }
.alert-error { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid #f6cfc8; }
.alert-info { background: #eef4f8; color: #1f4d63; border: 1px solid #cfe1ea; }

/* Flash messages -------------------------------------------------------
   views/admin/layout.ejs renderer <div class="flash flash-<%= flash.type %>">
   i stedet for .alert som header.ejs gør. Før 2026-10-08 fandtes der kun
   .alert-ok/.alert-error, så admin-beskederne blev vist som urangeret
   tekst med hverken baggrund, afrunding eller luft.
   Typerne stammer fra src/functions.js: 'success' oversættes til 'ok',
   alt andet sendes igennem uændret – derfor dækkes ok, error og info. */
.flash {
  border-radius: 12px;
  padding: .85rem 1.1rem;
  margin: 1.1rem 0 0;
  font-weight: 600;
  font-size: .95rem;
}
.flash-ok { background: var(--ok-soft); color: #136246; border: 1px solid #bfe6d4; }
.flash-error { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid #f6cfc8; }
.flash-info { background: #eef4f8; color: #1f4d63; border: 1px solid #cfe1ea; }

/* Hero ---------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 55%, #1c7d94 100%);
  color: #fff;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); }
.hero-sub {
  max-width: 640px;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: #d7ecf3;
}

.search-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr auto;
  gap: .6rem;
  background: #fff;
  border-radius: 999px;
  padding: .55rem;
  box-shadow: var(--shadow-lg);
  margin-top: 2rem;
}
.search-field { display: flex; flex-direction: column; padding: .35rem .9rem; border-right: 1px solid var(--line); }
.search-field:last-of-type { border-right: 0; }
.search-field label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--muted);
}
.search-field input, .search-field select {
  border: 0;
  outline: none;
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  padding: .1rem 0;
  min-width: 0;
}
.search-btn { border-radius: 999px; padding-inline: 1.6rem; }

.region-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.chip {
  display: inline-block;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .85rem;
  font-weight: 600;
}
.chip:hover { background: rgba(255, 255, 255, .26); text-decoration: none; }
.chip.is-on { background: #fff; color: var(--deep); border-color: #fff; }
.chip-hidden, .chip-ok { background: #f1ede6; color: var(--muted); border: 0; }
.chip-ok { background: var(--ok-soft); color: var(--ok); }

/* Sections & cards ---------------------------------------------------- */
.section { padding: clamp(2.2rem, 5vw, 4rem) 0; }
.section-soft { background: var(--sand); }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.section-head-spaced { margin-top: 3rem; }
.sort-label { font-size: .9rem; color: var(--muted); font-weight: 600; }
.sort-label select {
  margin-left: .4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .5rem .7rem;
  font-size: .9rem;
  background: #fff;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.5rem;
}
.grid-tight { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.card-img { position: relative; aspect-ratio: 4 / 3; background: #eceff0; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img .chip { position: absolute; top: .6rem; left: .6rem; }
.card-body { padding: .95rem 1.05rem 1.15rem; }
.card-region {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--brand);
}
.card-body h3 { margin: .25rem 0 .3rem; font-size: 1.02rem; }
.card-meta { color: var(--muted); font-size: .88rem; margin: 0 0 .55rem; }
.card-price { margin: 0; font-size: 1.02rem; }
.card-price span { color: var(--muted); font-size: .85rem; }

.empty {
  text-align: center;
  background: var(--sand);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
}
.empty-small { padding: 1.4rem; }
.empty p { color: var(--muted); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; }
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.step p { color: var(--muted); font-size: .93rem; margin: 0; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  margin-bottom: .8rem;
}

.cta-box {
  margin-top: 2rem;
  background: linear-gradient(135deg, var(--deep), var(--deep-2));
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.cta-box h3 { color: #fff; font-size: 1.4rem; margin-bottom: .3rem; }
.cta-box p { margin: 0; color: #cfe7ef; }

/* Breadcrumb & detail ------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .88rem;
  color: var(--muted);
  padding: 1.4rem 0 .4rem;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb span:last-child { color: var(--ink); font-weight: 600; }

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 3.5rem;
}
.detail-main { min-width: 0; }

.gallery { margin-bottom: 1.6rem; }
.gallery-main {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #eceff0;
  aspect-ratio: 16 / 9;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.id-badge {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  background: rgba(22, 35, 43, .82);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: .35rem .75rem;
  border-radius: 999px;
}
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .5rem; margin-top: .5rem; }
.thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #eceff0;
  aspect-ratio: 4 / 3;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-on { border-color: var(--brand); }

.detail-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.detail-head h1 { margin-bottom: .3rem; }

.fact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
.fact { display: flex; flex-direction: column; gap: .15rem; font-weight: 600; }
.fact-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

.content-block { padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.content-block:last-child { border-bottom: 0; }
.description { color: #32444e; }

.amenities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .55rem;
}
.amenities li {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .5rem .8rem;
  font-size: .9rem;
  font-weight: 600;
}
.amenities li::before { content: "✓ "; color: var(--ok); font-weight: 800; }

.owner-box { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.owner-box h2 { font-size: 1.2rem; }

/* Sidebar & form ------------------------------------------------------ */
.detail-side { position: relative; }
.side-card {
  position: sticky;
  top: 92px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
}
.side-price { font-size: 1.5rem; margin-bottom: .2rem; }
.side-price span { font-size: .95rem; color: var(--muted); font-weight: 500; }
.side-note { color: var(--muted); font-size: .88rem; }

.contact-form { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; }
.contact-form h3 { margin-bottom: .4rem; }
label, .field-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: .6rem;
}
.label-hint { font-weight: 500; color: var(--muted); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .65rem .8rem;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(226, 80, 60, .35);
  border-color: var(--brand);
}
textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
.form-hint { font-size: .78rem; color: var(--muted); margin: .5rem 0 0; }
.contact-form .btn { margin-top: .9rem; }

/* Owner page ---------------------------------------------------------- */
.owner-page { padding: 2rem 0 3.5rem; }
.owner-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2rem; }
.owner-avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--deep), var(--deep-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
}
.owner-head h1 { margin-bottom: .1rem; }
.owner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

/* Page heads & info --------------------------------------------------- */
.page-head {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  padding: clamp(2rem, 5vw, 3.2rem) 0;
}
.page-head-short { padding: 1.8rem 0; }
.page-head p { color: var(--muted); max-width: 720px; }
.page-head-dash { background: #fff; padding-bottom: 0; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.dash-actions { display: flex; gap: .6rem; flex-wrap: wrap; padding-bottom: 1rem; }

.narrow .info-card + .info-card { margin-top: 1.6rem; }
.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.2rem);
}
.info-card-soft { background: var(--sand); }

/* Administratorboksen på Min side. Den har sin egen farve, fordi den ikke er
   en almindelig information til en bruger, men en indgang til at RETTE sitet
   — den skal kunne ses med det samme. Tilføjet 2026-10-08. */
.info-card-admin {
  border-left: 5px solid var(--brand);
  background: linear-gradient(180deg, var(--brand-soft), #fff 55%);
}
.info-card-admin h2 { margin-top: 0; }
.info-card-admin .stat-row { margin-bottom: 1.4rem; }
.info-card-admin .btn + .btn { margin-left: .5rem; }
.numbered { padding-left: 1.2rem; }
.numbered li { margin-bottom: .7rem; }
.numbered li strong { color: var(--brand-dark); }

/* Punktliste med flueben. Bruges på "Bliv udlejer"-siden, hvor listen
   beskriver, hvad rollen giver — ikke en rækkefølge, der skal følges. */
.check-list {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}

.check-list li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .55rem;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}

/* Auth ---------------------------------------------------------------- */
.auth-wrap { display: flex; justify-content: center; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.auth-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  width: min(460px, 92vw);
}
.auth-card-left { width: min(560px, 100%); box-shadow: none; }
.auth-card form { display: flex; flex-direction: column; gap: .35rem; }
.auth-card .btn { margin-top: 1.1rem; }
.auth-alt { text-align: center; margin: 1.2rem 0 0; font-size: .92rem; color: var(--muted); }

/* Dashboard ----------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.stat {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
}
.stat strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--deep); }
.stat span { color: var(--muted); font-size: .88rem; }

.house-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.house-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem;
  background: #fff;
}
.house-thumb { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: #eceff0; }
.house-thumb img { width: 100%; height: 100%; object-fit: cover; }
.house-info h3 { margin: .15rem 0 .2rem; }
.house-info h3 a { color: var(--ink); }
.house-id { font-size: .82rem; color: var(--muted); margin: 0; display: flex; align-items: center; gap: .5rem; }
.house-id strong { color: var(--deep); letter-spacing: .03em; }
.house-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.house-actions form { margin: 0; }

/* Messages ------------------------------------------------------------ */
.msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.msg-item {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.2rem;
}
.msg-item.is-unread { border-left-color: var(--brand); background: #fffdfa; }
.msg-top { display: flex; justify-content: space-between; gap: 1rem; }
.msg-top .muted { font-size: .82rem; }
.msg-meta { font-size: .85rem; color: var(--muted); margin: .2rem 0 .5rem; }
.msg-period { font-size: .85rem; color: var(--deep); font-weight: 600; margin: 0 0 .5rem; }
.msg-body { white-space: pre-line; margin: 0 0 .7rem; }
.msg-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Forms (dashboard) --------------------------------------------------- */
.form-wide { width: min(880px, 92vw); margin: 0 auto; }
form fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
form fieldset legend {
  font-weight: 800;
  font-size: .95rem;
  padding: 0 .5rem;
  color: var(--brand-dark);
}
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; margin-top: .5rem; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; margin-top: .4rem; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.check-line { display: flex; align-items: flex-end; padding-bottom: .5rem; }
.file-input {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: .8rem;
  background: var(--sand);
  width: 100%;
}
.img-manage { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.img-manage-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .45rem;
  background: var(--sand);
}
.img-manage-item img { aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; width: 100%; }
.img-manage-item .chip { margin: .4rem 0 .1rem; }
.img-manage-actions { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }
.form-submit { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

/* Ekstra service i oprettelsesformularen */
.service-rows { display: flex; flex-direction: column; gap: .55rem; margin: .4rem 0 .8rem; }
.service-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr auto;
  gap: .5rem;
  align-items: center;
}
.service-row input, .service-row select { margin: 0; }

/* Afstande og service på husets side */
.fact-dist span:last-child { color: var(--deep); }
.side-extra { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .9rem; }
.side-line {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  font-size: .92rem;
  color: var(--muted);
}
.side-line strong { color: var(--ink); text-align: right; }
.service-list { list-style: none; margin: .3rem 0 .2rem; padding: 0; }
.service-list li {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  font-size: .9rem;
  padding: .3rem 0;
  border-bottom: 1px dashed var(--line);
}
.service-list li:last-child { border-bottom: 0; }
.service-list em { font-style: normal; color: var(--muted); font-size: .8rem; font-weight: 500; }

/* Footer -------------------------------------------------------------- */
.site-footer {
  background: #10202a;
  color: #b9c8d1;
  margin-top: 2rem;
  padding: 3rem 0 1.4rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.logo-footer { color: #fff; margin-bottom: .7rem; }
.footer-text { font-size: .9rem; max-width: 34ch; }
.site-footer h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #d7e4ea; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  padding-top: 1.2rem;
  color: #8ea3ae;
}

/* Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .detail, .owner-grid { grid-template-columns: 1fr; }
  .side-card { position: static; }
  .search-bar { grid-template-columns: 1fr 1fr; border-radius: 20px; }
  .search-field { border-right: 0; }
  .search-btn { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6rem 4vw 1rem;
    box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .nav-form { padding-top: .7rem; }
  .house-item { grid-template-columns: 92px minmax(0, 1fr); }
  .house-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 1fr 1fr; }
  .service-row input:first-child { grid-column: 1 / -1; }
  .section-head { flex-direction: column; align-items: flex-start; }

  /* Additional mobile optimizations */
  .card-img { aspect-ratio: 16/9; }
  .search-bar { 
    gap: .4rem;
    padding: .4rem;
  }
  .search-btn { 
    grid-column: 1 / -1; 
    padding: .8rem;
  }
  .house-thumb { aspect-ratio: 16/9; }
  .gallery-main { aspect-ratio: 16/9; }
}

@media (max-width: 480px) {
  .container { width: 92vw; }
  .btn { 
    padding: .6rem 1rem; 
    font-size: .9rem;
  }
  .btn-lg { padding: .7rem 1.4rem; }
  .section { padding: 1.5rem 0; }
  .hero { padding: 2rem 0 1.5rem; }
  
  /* Mobile touch targets */
  .nav a, .btn, .chip, .thumb {
    min-height: 48px;
    min-width: 48px;
    padding: .7rem 1rem;
  }
  
  .search-field {
    padding: .25rem .7rem;
  }
  
  .form-row, .form-row-3 { 
    gap: .5rem; 
  }
}

/* ==========================================================================
   Formularfejl, statusmærker og rækker med knapper
   ==========================================================================
   Tilføjet 2026-10-08 sammen med udlejer-wizarden:

   - .form-error  : den overordnede fejlbesked øverst i formularen
   - .field-error : forklaringen under det enkelte felt
   - .input-error : markerer det felt, der skal rettes
   - .badge*      : status "Aktiv" / "Skjult" på Min side
   - .inline-form : gør en formular til et link i en knaprække

   Farverne kommer fra de variabler, der allerede findes i :root, så
   udseendet følger resten af sitet. */

.form-error {
  background: var(--brand-soft);
  color: var(--brand-dark);
  border: 1px solid #f6cfc8;
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin-bottom: 1.2rem;
}

.form-error strong { display: block; margin-bottom: .2rem; }

.field-error {
  display: block;
  margin-top: .3rem;
  font-size: .85rem;
  color: var(--danger);
}

.input-error {
  border-color: var(--danger) !important;
  background: #fffafa;
}

.badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-muted { background: #eef1f3; color: var(--muted); }

/* En formular, der skal stå på linje med knapperne i .cottage-actions —
   ellers bryder den rækken, fordi en form er et blokelement. */
.inline-form { display: inline; margin: 0; }

.btn-danger-text { color: var(--danger); border-color: #f0d3ce; }
.btn-danger-text:hover { background: #fdf1ef; }

/* ==========================================================================
   Billedgalleri i formularen (udlejerens egne billeder)
   ==========================================================================
   Tilføjet 2026-10-08 sammen med billedhåndteringen i Prompt6.

   - .billed-galleri : det lille overblik inde i selve formularen
   - .billed-kort    : ét billede med "Forside"-mærke
   - .billed-admin   : rækken under formularen med forside- og slet-knapper  */

.billed-galleri {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .6rem;
}

.billed-kort {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.billed-kort img {
  display: block;
  width: 110px;
  height: 82px;
  object-fit: cover;
}

.billed-maerke {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(15, 76, 92, .88);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  text-align: center;
  padding: .15rem 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.billed-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.billed-admin-kort {
  width: 190px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.billed-admin-kort img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.billed-admin-status {
  margin: 0;
  font-size: .82rem;
  color: var(--deep);
  min-height: 1.4rem;
}

.billed-admin-kort form { margin: 0; }
.billed-admin-kort .btn { width: 100%; }

/* ==========================================================================
   Træk-og-slip af billeder
   ==========================================================================
   Tilføjet 2026-10-08 efter godkendt forslag. Zonen vises kun på
   redigeringssiden, hvor huset har et id at lægge billederne på. */

.drop-zone {
  margin-top: .8rem;
  padding: 1.6rem 1.2rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--sand);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.drop-zone:hover,
.drop-zone:focus {
  border-color: var(--deep-2);
  background: #f4f9fb;
  outline: none;
}

/* Mens filer holdes over zonen */
.drop-zone.is-aktiv {
  border-color: var(--deep);
  background: #e9f3f7;
}

/* Mens der uploades — forhindrer at man slipper noget nyt midt i det */
.drop-zone.is-optaget {
  opacity: .6;
  pointer-events: none;
}

.drop-zone-tekst { margin: 0; }

.upload-status {
  margin-top: .7rem;
  font-size: .9rem;
  min-height: 1.5rem;
  color: var(--muted);
}

.upload-status-ok { color: var(--ok); font-weight: 600; }
.upload-status-fejl { color: var(--danger); font-weight: 600; }

.upload-forhaandsvisning {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .8rem;
}

.upload-kort {
  width: 140px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .4rem;
  background: #fff;
  position: relative;
}

.upload-kort img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.upload-kort-navn {
  margin: .35rem 0 .1rem;
  font-size: .72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-kort-status {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
}

.upload-kort.is-i-gang { border-color: var(--deep-2); }
.upload-kort.is-i-gang .upload-kort-status { color: var(--deep-2); }

.upload-kort.is-faerdig { border-color: var(--ok); }
.upload-kort.is-faerdig .upload-kort-status { color: var(--ok); }

.upload-kort.is-fejl { border-color: var(--danger); background: #fffafa; }
.upload-kort.is-fejl .upload-kort-status { color: var(--danger); }

@media (max-width: 600px) {
  .upload-kort { width: calc(50% - .35rem); }
  .billed-admin-kort { width: calc(50% - .5rem); }
}

/* ==========================================================================
   Kalender og ledighedsstyring
   ==========================================================================
   Tilføjet 2026-10-08 ved Prompt7. Klasse navnene på en dag skal passe med
   public/js/kalender.js, som tegner gitteret igen ved månedsskift.

   Farverne betyder:
     is-ledig    grøn, hvid baggrund   — kan lejes ud
     is-spaerret rødlig                — udlejeren har lukket dagen
     is-booket   dyb blå, låst         — en gæst har booket
     is-saeson   lille mærke med pris  — anden pris end grundprisen
     is-valgt    kraftig ramme         — med i det valgte tidsrum
     is-i-dag    prik                  — dagens dato
   ========================================================================== */

.kalender {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  background: #fff;
  box-shadow: var(--shadow);
}

.kalender-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
}

.kalender-top h3 {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 1.1rem;
  color: var(--deep);
}

.kalender-top .btn { min-width: 2.6rem; }

.kalender-ugedage,
.kalender-gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem;
}

.kalender-ugedage {
  margin-bottom: .35rem;
}

.kalender-ugedage span {
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.kal-dag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: 3.1rem;
  padding: .25rem .1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.kal-dag.is-tom {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.kal-dag-nr { font-weight: 600; font-size: .9rem; line-height: 1; }

.kal-dag-pris {
  font-size: .66rem;
  color: var(--muted);
  line-height: 1;
  min-height: .7rem;
}

/* Ledig — den normale tilstand */
.kal-dag.is-ledig { background: var(--ok-soft); border-color: #c8e8d8; }
.kal-dag.is-ledig:hover { border-color: var(--ok); }

/* Spærret af udlejeren */
.kal-dag.is-spaerret {
  background: var(--brand-soft);
  border-color: #f6cfc8;
  color: var(--brand-dark);
}
.kal-dag.is-spaerret .kal-dag-pris { color: var(--brand-dark); }

/* Booket af en gæst — kan ikke ændres her */
.kal-dag.is-booket {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
  cursor: not-allowed;
}
.kal-dag.is-booket .kal-dag-pris { color: rgba(255, 255, 255, .8); }

/* Sæsonpris markeres med et lille mærke, så den kan ses oveni de andre */
.kal-dag.is-saeson::after {
  content: "";
  position: absolute;
  top: .25rem;
  right: .25rem;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--deep-2);
}

.kal-dag.is-i-dag .kal-dag-nr { text-decoration: underline; }

/* Det valgte tidsrum */
.kal-dag.is-valgt {
  border-color: var(--deep-2);
  box-shadow: inset 0 0 0 2px var(--deep-2);
}

.kal-dag:focus-visible {
  outline: 3px solid var(--deep-2);
  outline-offset: 1px;
}

/* Kalenderen i admin-panelet (views/admin_hus_kalender.ejs) har ingen
   JavaScript: dagene er til at LÆSE, ikke til at klikke på. Uden denne regel
   ville de vise en hånd-markør, fordi udlejerens kalender er klikbar — og så
   lovede musen noget, der ikke sker. Tilføjet 2026-10-08. */
.kal-dag.er-statisk { cursor: default; }
.kal-dag.er-statisk:hover { border-color: var(--line); }
.kal-dag.er-statisk.is-ledig:hover { border-color: #c8e8d8; }

.kalender-forklaring {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  font-size: .8rem;
  color: var(--muted);
}

.kalender-forklaring li { display: flex; align-items: center; gap: .35rem; }

.kal-prik {
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-block;
}

.kal-prik.is-ledig { background: var(--ok-soft); border-color: #c8e8d8; }
.kal-prik.is-spaerret { background: var(--brand-soft); border-color: #f6cfc8; }
.kal-prik.is-booket { background: var(--deep); border-color: var(--deep); }
.kal-prik.is-saeson { background: #fff; border-color: var(--deep-2); border-width: 3px; }

/* Det valgte tidsrum og handlingerne */
.kal-valg {
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep);
  margin: 0 0 .8rem;
}

.kal-handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.kal-pris {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.kal-pris .form-group { margin: 0; min-width: 180px; }

.kal-status { margin: 1rem 0 0; font-size: .9rem; min-height: 1.4rem; }
.kal-status.is-ok { color: var(--ok); font-weight: 600; }
.kal-status.is-fejl { color: var(--danger); font-weight: 600; }

/* Uden JavaScript: de to formularer til at spærre og åbne */
.kal-formularer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.kal-formularer .info-card h3 { margin-top: 0; }

/* Listerne over perioder */
.kal-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 .8rem;
}

.kal-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .55rem .2rem;
  border-bottom: 1px solid var(--line);
}

.kal-liste li:last-child { border-bottom: none; }

.kal-liste-dato { font-weight: 600; font-variant-numeric: tabular-nums; }
.kal-liste-pris { color: var(--deep); font-weight: 600; }
.kal-liste-note { color: var(--muted); font-size: .88rem; }

.kal-liste form { margin: 0 0 0 auto; }

.kal-liste-tom {
  color: var(--muted);
  border-bottom: none !important;
  display: block !important;
}

@media (max-width: 600px) {
  .kalender { padding: .6rem; }
  .kal-dag { min-height: 2.6rem; border-radius: 8px; }
  .kal-dag-nr { font-size: .82rem; }
  .kal-dag-pris { font-size: .58rem; }
  .kal-liste form { margin-left: 0; }
}

/* ==========================================================================
   Søgesiden — filtre og resultater
   ==========================================================================
   Tilføjet 2026-10-08 ved Prompt8. Siden svarer til planens "search.php".

   Klassenavnene bruges af views/home.ejs, views/home-mobile.ejs og de to
   partials partials/soege-form.ejs og partials/soege-resultater.ejs.
   ========================================================================== */

.hero-handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
}

.hero-sm { padding: clamp(2rem, 6vw, 3rem) 0 clamp(1.5rem, 4vw, 2rem); }

/* To spalter på store skærme: filtre i venstre side, resultater i højre.
   På smalle skærme stables de, og filterpanelet ligger i et <details>. */
.soege-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

.soege-side {
  position: sticky;
  top: 1rem;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.3rem;
}

.soege-side-titel {
  margin: 0 0 .9rem;
  font-size: 1.05rem;
  color: var(--deep);
}

.soege-hoved { min-width: 0; }

/* --- Selve formularen --- */

.soege-form { display: flex; flex-direction: column; gap: .85rem; }

.soege-felt { display: flex; flex-direction: column; gap: .25rem; }

.soege-felt label,
.soege-datoer legend {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
}

.soege-felt input[type="search"],
.soege-felt input[type="number"],
.soege-felt input[type="date"],
.soege-felt select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .55rem .7rem;
  font: inherit;
  background: #fff;
  color: var(--ink);
}

.soege-felt input:focus,
.soege-felt select:focus {
  outline: 2px solid var(--deep-2);
  outline-offset: 1px;
  border-color: var(--deep-2);
}

.soege-datoer {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .7rem .8rem .85rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.soege-datoer legend { padding: 0 .3rem; }
.soege-datoer .help-text { margin: 0; }

.soege-faciliteter {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .55rem .7rem;
  background: #fff;
}

.soege-faciliteter summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 700;
  color: var(--deep);
}

.facilitet-liste {
  max-height: 15rem;
  overflow-y: auto;
  margin-top: .6rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* Afkrydsningsfelter med tekst ved siden af. Bruges også i
   views/cottage-form.ejs, som dog har sin egen lokale kopi. */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .88rem;
  line-height: 1.35;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] { margin-top: .2rem; flex: 0 0 auto; }

.soege-handlinger {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .3rem;
}

/* --- Resultaterne --- */

.soege-resultat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: 1.2rem;
}

.soege-resultat-head h2 { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.soege-resultat-head .muted { margin: 0; font-size: .9rem; }

/* Kortene må gerne være lidt mindre i et søgeresultat, så der kommer flere
   med over skærmen. */
.grid-soeg { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }

.soege-fremhaevet { margin-bottom: 2.4rem; }

/* Mærket på billedet sidder i forvejen i øverste venstre hjørne, så
   bedømmelsen lægges i det højre for ikke at dække det. */
.card-img .chip-rating {
  left: auto;
  right: .6rem;
  background: rgba(15, 76, 92, .9);
  color: #fff;
  border: 0;
}

.chip-saeson {
  display: inline-block;
  background: var(--ok-soft);
  color: var(--ok);
  border: 0;
  border-radius: 999px;
  padding: .1rem .5rem;
  font-size: .7rem;
  font-weight: 700;
  vertical-align: middle;
}

.card-i-alt { margin: .35rem 0 0; font-size: .84rem; color: var(--deep); font-weight: 600; }

/* --- Sideskift --- */

.soege-sider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: 2rem;
}

.soege-sidetal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
}

.soege-sidetal:hover { border-color: var(--deep-2); text-decoration: none; }

.soege-sidetal.is-aktiv {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}

/* --- Mobil --- */

.soege-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sand);
  padding: .8rem 1rem;
  margin-bottom: 1.6rem;
}

.soege-panel summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--deep);
}

.soege-panel[open] summary { margin-bottom: .9rem; }

/* Tom tilstand. .empty findes i forvejen; .empty-state er det navn,
   views/dashboard.ejs bruger, og som hidtil ikke havde nogen regel. */
.empty-state {
  text-align: center;
  background: var(--sand);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.4rem;
}

.empty-state h3 { margin-top: 0; }

@media (max-width: 900px) {
  .soege-layout { grid-template-columns: 1fr; }
  .soege-side { position: static; }
}

/* ==========================================================================
   Booking og ledighed
   ==========================================================================
   Tilføjet 2026-10-08 ved Prompt9.
   ========================================================================== */

/* --- Ledighedskalenderen på husets side (kun til at se på) --- */

.ledighed {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sand);
  padding: 1rem 1.1rem 1.2rem;
}

.ledighed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

.ledighed-head h3 { margin: 0; font-size: 1.05rem; color: var(--deep); }
.ledighed-nav { display: flex; gap: .3rem; }

.ledighed-ugedage,
.ledighed-gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
}

.ledighed-ugedage {
  margin: .8rem 0 .35rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  text-align: center;
}

.led-dag {
  position: relative;
  min-height: 2.4rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}

.led-dag.is-tom { border: 0; background: transparent; }
.led-dag.is-ledig { background: #fff; border-color: var(--line); }

.led-dag.is-optaget {
  background: repeating-linear-gradient(45deg, #f1ede6, #f1ede6 4px, #e7e1d6 4px, #e7e1d6 8px);
  color: var(--muted);
}

.led-dag.is-booket { background: var(--deep); color: #fff; border-color: var(--deep); }

/* En prik i hjørnet markerer, at dagen har en sæsonpris. Farven alene må
   ikke være det eneste, der bærer betydningen — se forklaringen under
   kalenderen. */
.led-dag-prik {
  position: absolute;
  top: .2rem;
  right: .25rem;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--brand);
}

.led-dag.is-booket .led-dag-prik { background: #fff; }

.ledighed-forklaring {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  list-style: none;
  padding: 0;
  margin: .9rem 0 0;
  font-size: .78rem;
  color: var(--muted);
}

.ledighed-forklaring li { display: flex; align-items: center; gap: .35rem; }

.led-prik {
  width: .8rem;
  height: .8rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #fff;
}

.led-prik.is-optaget {
  background: repeating-linear-gradient(45deg, #f1ede6, #f1ede6 2px, #e7e1d6 2px, #e7e1d6 4px);
}

.led-prik.is-booket { background: var(--deep); border-color: var(--deep); }
.led-prik.is-saeson { background: var(--brand); border-color: var(--brand); }

/* --- Booking-formularen --- */

.booking-form { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.booking-form h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.booking-form label { display: block; margin-top: .6rem; font-size: .84rem; font-weight: 700; }
.booking-form .form-row label { margin-top: 0; }
.booking-form input, .booking-form textarea { width: 100%; }

.pris-beregning {
  margin: .9rem 0;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ok-soft);
}

.pris-beregning.is-optaget { background: #fdf1ef; border-color: #f0cfc9; }

.pris-linje {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin: 0 0 .25rem;
  font-size: .88rem;
}

.pris-linje.pris-i-alt {
  margin: .45rem 0 0;
  padding-top: .45rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: 1rem;
}

.pris-optaget { margin: 0; font-size: .88rem; }

/* --- Gæstens bookingside --- */

.booking-side { padding-top: 2rem; padding-bottom: 3rem; }
.booking-side h1 { margin: .2rem 0 .6rem; }
.status-linje { margin: 0 0 .8rem; }

.booking-kort {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.2rem 1.3rem;
  margin: 1.4rem 0;
}

.booking-hus {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.booking-hus:hover { text-decoration: none; }
.booking-hus img { width: 5.5rem; height: 4rem; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.booking-hus h2 { margin: 0; font-size: 1.1rem; }
.booking-hus p { margin: .15rem 0 0; font-size: .85rem; }

.booking-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .9rem; margin: 0; }
.booking-data dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.booking-data dd { margin: .15rem 0 0; font-size: .95rem; }
.booking-data dd span { display: block; font-size: .76rem; }

.booking-besked, .booking-kontakt { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.booking-besked h3, .booking-kontakt h3 { margin: 0 0 .4rem; font-size: .95rem; }
.booking-handlinger { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }

/* --- Statusmærker --- */

.chip-pending { background: #fdf5e3; color: #8a6100; border: 0; }
.chip-confirmed { background: var(--ok-soft); color: var(--ok); border: 0; }
.chip-cancelled { background: #f1ede6; color: var(--muted); border: 0; }
.chip-advarsel { background: #fdf1ef; color: #a3352a; border: 0; }

/* --- Udlejerens booking-liste --- */

.booking-liste { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1rem; }

.booking-raekke {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 1rem 1.1rem;
}

.booking-raekke.booking-pending { border-left-color: #e0a800; }
.booking-raekke.booking-confirmed { border-left-color: var(--ok); }
.booking-raekke.booking-cancelled { border-left-color: var(--line); opacity: .75; }

.booking-raekke-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; }
.booking-nr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.booking-raekke h2 { margin: .6rem 0 .3rem; font-size: 1.05rem; }
.booking-meta { margin: 0; font-size: .88rem; color: var(--muted); }
.booking-besked-tekst { margin: .5rem 0 0; font-size: .9rem; font-style: italic; color: var(--ink); }

.booking-raekke .booking-handlinger { margin-top: .9rem; gap: .5rem; }
.booking-raekke .booking-handlinger form { margin: 0; }

/* Filtre over bookingerne. Samme udseende som .stat-row, men klikbare. */
.dash-stats { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; }

.dash-stats a {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 8.5rem;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

.dash-stats a:hover { border-color: var(--deep-2); text-decoration: none; }
.dash-stats a.is-aktiv { border-color: var(--deep); background: var(--sand); }
.dash-stats strong { font-size: 1.35rem; color: var(--deep); }
.dash-stats span { font-size: .8rem; color: var(--muted); }

/* Statistikfelt, der kræver handling — fx bookinger der venter på svar */
.stat-handling { border: 1px solid #e0a800 !important; background: #fdf5e3 !important; }
.stat-handling em { font-style: normal; font-size: .74rem; font-weight: 700; color: #8a6100; }
a.stat:hover { text-decoration: none; border-color: var(--deep-2); }

/* --- Detaljesiden: galleri, afstande og anmeldelser ---
   Klasserne nedenfor har været brugt i views/cottage.ejs hele tiden, men
   reglerne fandtes ikke. Siden har derfor stået ustylet. Tilføjet 2026-10-08. */

.gallery-main { position: relative; border-radius: var(--radius); overflow: hidden; background: #eceff0; }
.gallery-main img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

.id-badge {
  position: absolute;
  bottom: .6rem;
  left: .6rem;
  background: rgba(15, 76, 92, .85);
  color: #fff;
  border-radius: 999px;
  padding: .2rem .65rem;
  font-size: .72rem;
  font-weight: 600;
}

.gallery-thumbs { display: flex; gap: .5rem; margin-top: .5rem; overflow-x: auto; padding-bottom: .2rem; }

.gallery-thumbs .thumb {
  flex: 0 0 auto;
  width: 5rem;
  height: 3.6rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #eceff0;
  cursor: pointer;
}

.gallery-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs .thumb.is-on { border-color: var(--deep); }

.distance-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .4rem .9rem; }
.distance-list li { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }

.reviews-list { display: flex; flex-direction: column; gap: 1rem; }

.review-item { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; background: #fff; }
.review-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.review-date { font-size: .78rem; color: var(--muted); }
.review-description { margin: .45rem 0 0; font-size: .92rem; }

.review-form { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.review-form h3 { margin: 0 0 .5rem; font-size: 1rem; }
.review-form label { display: block; margin-top: .6rem; font-size: .84rem; font-weight: 700; }

/* --- Min side: huskortene og beskederne manglede også regler --- */

.cottage-list { display: flex; flex-direction: column; gap: .9rem; }

.cottage-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: .8rem .9rem;
}

.cottage-img { flex: 0 0 auto; }
.cottage-img img { width: 6rem; height: 4.2rem; object-fit: cover; border-radius: 10px; display: block; }
.cottage-info { flex: 1 1 auto; min-width: 0; }
.cottage-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

@media (max-width: 600px) {
  .cottage-card { flex-direction: column; align-items: stretch; }
  .cottage-img img { width: 100%; height: 8rem; }
  .led-dag { min-height: 2rem; font-size: .78rem; }
  .booking-hus { flex-direction: column; align-items: flex-start; }
  .booking-hus img { width: 100%; height: 8rem; }
}

/* ==========================================================================
   Klasser der har manglet en regel
   ==========================================================================
   Fundet 2026-10-08 af scripts/test-css.js. Klasserne har været brugt i
   skabelonerne hele tiden, men der har ikke været nogen regel — siderne har
   altså stået ustylet på de punkter, uden at nogen opdagede det, fordi der
   ikke kom en fejl. Se docs/CHANGELOG.md.
   ========================================================================== */

/* --- Beholdere --- */

/* Min side og udlejerens bookingside. Samme mål som .container, men med luft
   i top og bund, fordi siderne starter direkte med en overskrift. */
.dash-wrap {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.detail-wrap { padding-bottom: 2rem; }

/* Søgeafsnittet på forsiden ligger tættere på heroen end et normalt afsnit */
.soege-afsnit { padding-top: clamp(1.2rem, 3vw, 2rem); }

/* --- Husets side, mobil --- */

.detail-rating { font-size: .92rem; color: var(--muted); margin: .2rem 0 .8rem; }
.detail-rating strong { color: var(--ink); }

.detail-meta {
  font-size: .92rem;
  color: var(--muted);
  margin: .6rem 0 1rem;
}

/* Prisen øverst på mobilsiden står alene, uden side-kort omkring sig */
.side-price-inline { margin: .2rem 0 1.2rem; }

/* --- Dagens nummer i ledighedskalenderen --- */

.led-dag-nr { line-height: 1; }

/* --- Min sides huskort --- */

.price { margin: .2rem 0 .6rem; font-weight: 600; color: var(--deep); }

/* --- Anmeldelser: stjerner --- */

/* De viste stjerner på en anmeldelse */
.rating-stars { display: inline-flex; gap: .1rem; font-size: .95rem; letter-spacing: .02em; }
.rating-stars .star { color: var(--line); }
.rating-stars .star.filled { color: #e0a800; }

/* Valget af stjerner i anmeldelsesformularen.
   Markup rækkefølgen er input,label,input,label … — derfor er radio-knappen
   skjult og labelen er den, man klikker på. `input:checked + label` farver
   den valgte, og :has() farver dem op til den. Uden :has()-støtte virker
   formularen stadig: så er kun den valgte stjerne gul. */
.rating-input { margin: .8rem 0 1rem; }
.rating-input > label { display: block; font-size: .84rem; font-weight: 700; }

.stars { display: inline-flex; gap: .15rem; margin-top: .3rem; }

.stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.stars label {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--line);
  cursor: pointer;
  transition: color .12s ease;
}

.stars input:checked + label { color: #e0a800; }
.stars label:hover { color: #e0a800; }

/* Farv alle stjerner op til den valgte */
.stars:has(input[value="1"]:checked) label:nth-of-type(-n + 1),
.stars:has(input[value="2"]:checked) label:nth-of-type(-n + 2),
.stars:has(input[value="3"]:checked) label:nth-of-type(-n + 3),
.stars:has(input[value="4"]:checked) label:nth-of-type(-n + 4),
.stars:has(input[value="5"]:checked) label:nth-of-type(-n + 5) { color: #e0a800; }

/* Tastaturbrug: den skjulte radio skal kunne ses, når man tabber til den */
.stars input:focus-visible + label { outline: 2px solid var(--deep-2); outline-offset: 2px; border-radius: 4px; }

.review-form-container {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  background: var(--sand);
  margin-top: 1.2rem;
}

/* --- Fjern-knappen på en ekstra service --- */

.service-remove { flex: 0 0 auto; }

/* --- Gæstens kontaktlinje på udlejerens bookingside --- */

.booking-gaest {
  margin: .5rem 0 0;
  font-size: .88rem;
  color: var(--ink);
}

.booking-gaest a { color: var(--deep); }

/* ==========================================================================
   Samtaler og chat
   ==========================================================================
   Tilføjet 2026-10-08 ved Prompt10.
   ========================================================================== */

.samtale-afsnit { margin-top: 2rem; }
.samtale-afsnit h2 { margin: 0; font-size: 1.15rem; }

.samtale-liste {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.samtale-raekke {
  position: relative;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease;
}

.samtale-raekke:hover { border-color: var(--deep-2); }

/* Ulæste samtaler markeres med BÅDE en kant og et mærke — ikke farve alene. */
.samtale-raekke.is-ny { border-left-color: var(--brand); background: #fbfdff; }

.samtale-raekke > a { display: block; padding: .85rem 1rem; color: var(--ink); }
.samtale-raekke > a:hover { text-decoration: none; }

.samtale-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}

.samtale-top .muted { font-size: .78rem; }
.samtale-hus { margin: .25rem 0 .4rem; font-size: .86rem; color: var(--muted); }

.samtale-nr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84em;
  color: var(--deep);
}

.samtale-preview {
  margin: 0;
  font-size: .9rem;
  color: var(--ink);
  /* To linjer, så en lang besked ikke skubber listen fra hinanden */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.samtale-dig { color: var(--muted); font-weight: 600; }

.samtale-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 1rem .8rem;
  font-size: .78rem;
}

/* --- Selve tråden --- */

.samtale-side { padding-top: 1.5rem; padding-bottom: 3rem; }
.samtale-head { margin-bottom: 1.4rem; }
.samtale-head h1 { margin: .2rem 0 .5rem; }
.samtale-head .muted { margin: .15rem 0; font-size: .88rem; }

.chat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sand);
  padding: 1.1rem;
  max-height: 34rem;
  overflow-y: auto;
}

.chat-tom { text-align: center; color: var(--muted); font-size: .9rem; margin: 1rem 0; }

.chat-dag {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.1rem 0 .9rem;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.chat-dag::before,
.chat-dag::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.chat-besked { margin-bottom: .9rem; max-width: 78%; }
.chat-besked.er-min { margin-left: auto; }
.chat-besked.er-anden { margin-right: auto; }

/* Afsenderen står ALTID som tekst over boblen. Siden og farven er kun en
   ekstra hjælp — de må ikke være det eneste, der viser hvem der skrev. */
.chat-afsender {
  margin: 0 0 .2rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: .45rem;
}

.chat-besked.er-min .chat-afsender { justify-content: flex-end; }
.chat-klokke { font-weight: 400; }

.chat-boble {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .6rem .85rem;
  background: #fff;
}

.chat-besked.er-min .chat-boble {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}

/* white-space: pre-wrap bevarer linjeskift og mellemrum fra beskeden UDEN at
   teksten laves om til HTML. Det er hele grunden til, at beskeder ikke skal
   "saniteres" ved gemning. */
.chat-tekst {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .92rem;
}

.chat-form { margin-top: 1.4rem; }
.chat-form label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: .3rem; }
.chat-form textarea { width: 100%; font-family: inherit; }

.chat-form-handlinger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-top: .7rem;
}

.chat-form-handlinger .help-text { margin: 0; }

@media (max-width: 600px) {
  .chat { padding: .8rem; max-height: none; }
  .chat-besked { max-width: 92%; }
}









/* ==========================================================================
   CSS til administrationspanelet
   ==========================================================================
   Tilføjet 2026-10-08 ved Prompt11. Panelet brugte Bootstrap-klasser, og
   Bootstrap indlæses ikke nogen steder — siderne stod derfor ustylede.
   ========================================================================== */

.admin-handlinger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

/* Menuen i admin-panelet ------------------------------------------------
   Tilføjet 2026-10-08. Ligger på alle admin-sider, så alt kan nås hvorfra
   som helst. Badge-tallet viser, hvad der venter på en beslutning. */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: .4rem;
  margin: 0 0 1.6rem;
}
.admin-nav > a {
  padding: .42rem .7rem;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.admin-nav > a:hover { background: var(--sand); text-decoration: none; }
.admin-nav > a.is-aktiv { background: var(--deep); color: #fff; }
.admin-nav-tal {
  display: inline-block;
  min-width: 1.3rem;
  margin-left: .3rem;
  padding: .05rem .34rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
}
/* Et neutralt tal: noget man kan kigge på, ikke noget der kræver handling. */
.admin-nav-tal.rolig { background: var(--line); color: var(--ink); }
.admin-nav-slut { margin-left: auto; display: flex; gap: .25rem; }

/* Hjælpetekst over et tekstfelt i panelet (fx markup-forklaringen) */
.form-hjaelp {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .25rem;
}
.felt-fejl { color: var(--danger); font-weight: 600; }
.felt-aendret { color: var(--brand-dark); font-weight: 700; font-size: .74rem; }

/* Afkrydsningsfelt i panelet (funktioner til/fra).
   Tilføjet 2026-10-08 sammen med funktionskontakterne. */
.afkrydsning {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-weight: 600;
  margin: .4rem 0 .2rem;
  cursor: pointer;
}
.afkrydsning input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .15rem;
  flex: 0 0 auto;
  accent-color: var(--brand);
}
.afkrydsning span { font-weight: 600; }

/* Systemsiden i panelet (2026-10-08): overblikskort, handlingskort, fillister
   og logvisning. Alle er nye klasser, så test-css.js kræver en regel for hver. */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.sys-grid .info-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.sys-etiket {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
}
.sys-tid { font-size: .78rem; margin-top: .8rem; }

.sys-handlinger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.sys-handlinger .info-card { display: flex; flex-direction: column; gap: .5rem; }
.sys-handlinger h3 { margin: 0; font-size: 1rem; }

.sys-filliste {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .82rem;
}
.sys-filliste li { padding: .15rem 0; }

.sys-log {
  max-height: 320px;
  overflow: auto;
  background: #1f2430;
  color: #e8ecf3;
  border-radius: 10px;
  padding: .8rem;
  font-size: .74rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Tal-kolonne i tabeller, så et rækkeantal står til højre */
.admin-tabel .tal { text-align: right; }

/* Ansvarsfraskrivelsen i footeren.
   Tilføjet 2026-10-08: den brugte Bootstrap-klasser, som ikke gør noget her. */
.footer-ansvar {
  flex-basis: 100%;
  font-size: .76rem;
  opacity: .85;
  margin-top: .5rem;
}

/* Båndet der beder om at få e-mailen bekræftet (N46).
   Tilføjet 2026-10-08. Det vises på alle sider, så længe adressen mangler —
   derfor skal det være synligt uden at skrige. */
.bekraeft-baand {
  background: #eef6ff;
  border-bottom: 1px solid #b6d4fe;
  color: #1b3a5c;
  font-size: .86rem;
  padding: .5rem 0;
}
.bekraeft-baand .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.bekraeft-baand form { margin: 0; }

/* Advarslen om, at flere konti er oprettet fra samme IP-adresse.
   Tilføjet 2026-10-08 sammen med visningen af IP i brugerlisten. */
.ip-advarsel {
  flex-basis: 100%;
  background: #fdf5e3;
  border: 1px solid #e0a800;
  border-radius: 10px;
  padding: .6rem .8rem;
  font-size: .82rem;
  margin-top: .5rem;
}
.ip-advarsel strong { display: block; margin-bottom: .3rem; }
.ip-advarsel ul { list-style: none; margin: 0 0 .4rem; padding: 0; }
.ip-advarsel li { margin-bottom: .2rem; }

/* "Nulstil kode" i brugerlisten — en foldet formular, så listen ikke fyldes.
   Tilføjet 2026-10-08 sammen med admin-panelets bruger-værktøjer. */
.admin-kode { margin-top: .4rem; }
.admin-kode > summary {
  cursor: pointer;
  display: inline-block;
  list-style: none;
}
.admin-kode > summary::-webkit-details-marker { display: none; }
.admin-kode[open] > summary { margin-bottom: .5rem; }
.admin-kode form {
  display: grid;
  gap: .35rem;
  max-width: 340px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .8rem;
}
.admin-kode label { font-size: .8rem; font-weight: 600; }
.admin-kode .btn { justify-self: start; }

/* Eksemplet på markup over tekstfeltet i "Sidens tekster" */.tekst-hjaelp {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .7rem .9rem;
  font-size: .82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 0 0 .4rem;
}

.admin-tal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 2.4rem;
}

.admin-tal-kort {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.admin-tal-kort strong { font-size: 1.9rem; color: var(--deep); line-height: 1.1; }
.admin-tal-kort span { font-size: .85rem; font-weight: 700; }
.admin-tal-kort em { font-style: normal; font-size: .78rem; color: var(--muted); }

/* Et felt, der kræver handling, markeres med både kant og tekst — ikke farve alene */
.admin-tal-kort.kræver-handling { border-color: #e0a800; background: #fdf5e3; }

.admin-afsnit { margin-top: 2.2rem; }
.admin-afsnit h2 { margin: 0; font-size: 1.15rem; }

.admin-to-spalter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.6rem;
  align-items: start;
}

.admin-tabel-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }

.admin-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; background: #fff; }
.admin-tabel th,
.admin-tabel td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-tabel th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--sand); }
.admin-tabel tr:last-child td { border-bottom: 0; }

.admin-nr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; }

.admin-liste { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .8rem; }

.admin-raekke {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: .85rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}

.admin-raekke > div { min-width: 0; }
.admin-raekke .muted { margin: .3rem 0 0; font-size: .82rem; }
.admin-raekke form { margin: 0; }

.admin-raekke-sm { padding: .7rem .9rem; display: block; }

.admin-uddrag { margin: .35rem 0 0; font-size: .88rem; color: var(--ink); }

@media (max-width: 600px) {
  .admin-raekke { flex-direction: column; align-items: stretch; }
}

/* --- Login-sider ---
   Bruges af views/admin-login.ejs og af det almindelige login. */

.login-wrap { padding-top: clamp(2rem, 6vw, 4rem); padding-bottom: 3rem; }

.login-kort {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.6rem 1.7rem 1.8rem;
  box-shadow: var(--shadow);
}

.login-kort h1 { margin: .2rem 0 1.1rem; font-size: clamp(1.4rem, 3vw, 1.85rem); }

.login-form { display: flex; flex-direction: column; gap: .3rem; }
.login-form label { font-size: .84rem; font-weight: 700; margin-top: .6rem; }
.login-form input { width: 100%; }
.login-form .btn { margin-top: 1.1rem; }

.login-fod { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
/* --- Forsiden: hero-knapper og populære områder ---
   Tilføjet 2026-10-08 ved Prompt12. */

/* Knap på den MØRKE hero-baggrund. Klassen skal selv sætte baggrunden: uden
   `background: transparent` arves den hvide baggrund fra .btn-outline, og så
   står der hvid tekst på hvid bund — knappen bliver en hvid klat. Det var
   fejlen på forsiden 2026-10-10, hvor "Opret konto" lyste helt hvidt ved siden
   af "Udlej dit sommerhus". Begge knapper på forsiden bruger nu .btn-primary,
   og scripts/test-forside.js holder øje med, at klassen ikke bruges uden
   baggrund. */
.hero-lys { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.hero-lys:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

.hero-note { margin: 1rem 0 0; font-size: .92rem; color: #d7ecf3; }
.hero-note a { color: #fff; text-decoration: underline; }

.omraade-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip-omraade {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff;
  color: var(--deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .95rem;
  font-size: .9rem;
  font-weight: 600;
}

.chip-omraade:hover { border-color: var(--deep-2); text-decoration: none; }

.chip-tal {
  background: var(--sand);
  color: var(--muted);
  border-radius: 999px;
  padding: .05rem .45rem;
  font-size: .76rem;
  font-weight: 700;
}
/* --- Admin: brugeradministration ---
   Tilføjet 2026-10-08. */

.admin-soeg {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 1.4rem 0 1rem;
}

.admin-soeg input[type="search"] {
  flex: 1 1 240px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .5rem .7rem;
  font: inherit;
  max-width: 380px;
}

.admin-bruger { display: block; padding: 1rem 1.1rem; }

.admin-bruger-form {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(180px, 1.6fr) minmax(130px, .9fr) auto;
  gap: .7rem;
  align-items: end;
}

.admin-bruger-felt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.admin-bruger-felt label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.admin-bruger-felt input,
.admin-bruger-felt select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; font: inherit; }
.admin-bruger-felt input:disabled,
.admin-bruger-felt select:disabled { background: var(--sand); color: var(--muted); }

.admin-bruger-handlinger { display: flex; gap: .4rem; align-items: end; }

.admin-bruger-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
}

.admin-bruger-meta form { margin: 0; }

@media (max-width: 900px) {
  .admin-bruger-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .admin-bruger-form { grid-template-columns: 1fr; }
}
.admin-bruger-rolle { max-width: 200px; }