/* Admin: samme farver og skrift som forsiden, men en rolig arbejdsflade. */
@font-face { font-family: "Cinzel"; src: url("fonte/cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

.admin {
  --natblaa: #0a1022;
  --flade: #121a33;
  --flade-2: #18213f;
  --guld: #d9b04a;
  --elfenben: #efe9da;
  --daempet: rgba(239, 233, 218, .62);
  --streg: rgba(239, 233, 218, .12);
  --fare: #e0726a;
  background: var(--natblaa);
  color: var(--elfenben);
  min-height: 100vh;
}
.admin h1, .admin h2 { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: .03em; margin: 0; }
.admin h2 { font-size: 20px; }
.admin input, .admin select, .admin textarea {
  font: inherit;
  font-size: 15px;
  color: var(--elfenben);
  background: var(--natblaa);
  border: 1px solid rgba(239, 233, 218, .2);
  border-radius: 4px;
  padding: 9px 11px;
  width: 100%;
}
.admin input:focus, .admin select:focus, .admin textarea:focus { outline: none; border-color: var(--guld); }
.admin textarea { resize: vertical; line-height: 1.5; }
.admin select option { background: var(--flade); }
.admin label { display: grid; gap: 6px; font-size: 13.5px; color: var(--daempet); }

/* Top */
.ad-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 32px;
  padding: 14px clamp(16px, 3vw, 40px);
  background: rgba(10, 16, 34, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--streg);
}
.ad-maerke { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: "Cinzel", serif; font-weight: 600; font-size: 17px; letter-spacing: .06em; }
.ad-maerke img { height: 38px; width: auto; }
.ad-faner { display: flex; gap: 4px; }
.ad-faner button {
  font-family: "Cinzel", serif; font-weight: 600; font-size: 14px; letter-spacing: .05em;
  background: none; border: 0; color: var(--daempet); padding: 8px 14px; border-radius: 4px; cursor: pointer;
}
.ad-faner button[aria-selected="true"] { color: var(--elfenben); background: var(--flade-2); }
.ad-hoejre { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: 14px; }
.ad-hoejre a, .ad-hoejre button { color: var(--daempet); background: none; border: 0; cursor: pointer; text-decoration: none; font: inherit; }
.ad-hoejre a:hover, .ad-hoejre button:hover { color: var(--elfenben); }

.ad-indhold { max-width: 1120px; margin: 0 auto; padding: 32px clamp(16px, 3vw, 40px) 120px; display: grid; gap: 20px; }
.ad-vent { color: var(--daempet); }

/* Login */
.ad-login { max-width: 360px; margin: 10vh auto 0; display: grid; gap: 12px; text-align: center; }
.ad-login img { height: 84px; width: auto; margin: 0 auto 8px; }
.ad-login h1 { font-size: 30px; }
.ad-login p { margin: 0; color: var(--daempet); }
.ad-fejl { color: var(--fare) !important; min-height: 1.3em; font-size: 14px; }

/* Kort og felter */
.ad-kort { background: var(--flade); border: 1px solid var(--streg); border-radius: 8px; padding: 22px; display: grid; gap: 18px; }
.ad-kort-hoved p { margin: 6px 0 0; color: var(--daempet); font-size: 14px; max-width: 60ch; }
.ad-felter { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ad-felter.tre { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 640px) { .ad-felter, .ad-felter.tre { grid-template-columns: 1fr; } }
.ad-linje { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ad-knapper { display: flex; gap: 8px; align-items: center; }
.ad-daempet { color: var(--daempet); font-size: 14px; }

.ad-knap {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px;
  border-radius: 4px; border: 1px solid rgba(217, 176, 74, .55); background: transparent; color: var(--elfenben);
  font-family: "Cinzel", serif; font-weight: 600; font-size: 13.5px; letter-spacing: .05em; cursor: pointer;
}
.ad-knap:hover { border-color: var(--guld); }
.ad-knap.fyldt { background: var(--guld); border-color: var(--guld); color: #15100a; }
.ad-knap.fare { border-color: rgba(224, 114, 106, .5); color: var(--fare); }
.ad-ikon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px;
  border: 1px solid var(--streg); background: rgba(10, 16, 34, .55); color: var(--elfenben); cursor: pointer;
}
.ad-ikon svg { width: 16px; height: 16px; fill: none; }
.ad-ikon:hover { border-color: var(--guld); }
.ad-ikon.fare:hover { border-color: var(--fare); color: var(--fare); }
.ad-ikon.aktiv { color: var(--guld); border-color: var(--guld); }
.ad-ikon.aktiv svg { fill: currentColor; }

/* Forsidens billeder */
.ad-karusel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: k; }
.ad-karusel li {
  display: grid; grid-template-columns: 28px 112px 1fr auto; gap: 14px; align-items: center;
  padding: 8px; border-radius: 6px; background: var(--flade-2);
}
.ad-karusel li::before { counter-increment: k; content: counter(k); text-align: center; color: var(--daempet); font-size: 14px; }
.ad-karusel li.ad-tom { display: block; color: var(--daempet); padding: 16px; }
.ad-karusel li.ad-tom::before { content: none; }
.ad-karusel img { width: 112px; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 4px; background: #060a16; }
.ad-karusel-tekst { display: grid; gap: 4px; }
.ad-karusel-tekst small { color: var(--fare); font-size: 12.5px; }
.ad-vaelger { display: grid; gap: 12px; border-top: 1px solid var(--streg); padding-top: 18px; }
.ad-vaelger label { max-width: 360px; }
.ad-mini-gitter {
  display: grid;
  /* Cellerne har samme 3:2-format som rammen på forsiden. */
  grid-template-columns: repeat(auto-fill, 180px);
  grid-auto-rows: 120px;
  justify-content: space-between;
  align-content: start;
  gap: 10px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}
.ad-mini-gitter:empty { display: none; }
.ad-mini-gitter button {
  position: relative; display: block; height: 120px; padding: 0;
  border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--natblaa); cursor: pointer;
}
.ad-mini-gitter button:hover { border-color: rgba(217, 176, 74, .5); }
.ad-mini-gitter button.valgt { border-color: var(--guld); }
.ad-mini-gitter img { display: block; width: 100%; height: 100%; object-fit: contain; background: #060a16; }
.ad-flueben {
  position: absolute; top: 6px; right: 6px; display: none; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--guld); color: #15100a; font-weight: 700; font-size: 14px;
}
.ad-mini-gitter button.valgt .ad-flueben { display: grid; }

/* Tekst-editor */
.ad-editor { border: 1px solid rgba(239, 233, 218, .2); border-radius: 6px; overflow: hidden; background: var(--natblaa); }
.ad-editor:focus-within { border-color: var(--guld); }
.ad-vaerktoej { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--streg); background: var(--flade-2); }
.ad-vaerktoej button {
  min-width: 34px; height: 32px; padding: 0 10px; border-radius: 4px; border: 1px solid transparent;
  background: transparent; color: var(--elfenben); font: inherit; font-size: 13.5px; cursor: pointer;
}
.ad-vaerktoej button:hover { border-color: var(--streg); background: rgba(239, 233, 218, .06); }
.ad-skille { width: 1px; margin: 4px 4px; background: var(--streg); }
.ad-skrivefelt { min-height: 150px; padding: 14px 16px; font-size: 16px; line-height: 1.65; color: var(--elfenben); outline: none; max-width: 70ch; }
.ad-skrivefelt p { margin: 0 0 .6em; }
.ad-skrivefelt h3 { font-family: "Cinzel", serif; font-size: 1.15em; margin: 0 0 .35em; }
.ad-skrivefelt a { color: var(--guld); }
.ad-skrivefelt ul { margin: 0 0 .6em; padding-left: 1.2em; }
.ad-taeller { margin: 0; padding: 6px 12px; font-size: 12.5px; color: var(--daempet); border-top: 1px solid var(--streg); }

.ad-gem-bar {
  position: sticky; bottom: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 16px;
  padding: 12px 16px; border-radius: 8px; background: rgba(18, 26, 51, .95); border: 1px solid var(--streg);
  backdrop-filter: blur(8px);
}

/* Albums */
.ad-albumgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.ad-album { display: grid; gap: 4px; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; }
.ad-album strong { font-weight: 600; font-size: 15px; margin-top: 6px; }
.ad-album span { color: var(--daempet); font-size: 13.5px; }
.ad-omslag { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--flade-2); border: 1px solid var(--streg); display: grid; place-items: center; }
/* Billedet fylder rammen helt, så det valgte udsnit (object-position) virker i alle browsere. */
.ad-omslag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ad-album:hover .ad-omslag img { transform: scale(1.04); }
.ad-ingen { font-family: "Cinzel", serif; font-size: 28px; color: var(--daempet); }
.ad-tilbage { justify-self: start; background: none; border: 0; color: var(--daempet); cursor: pointer; font: inherit; padding: 0; }
.ad-tilbage::before { content: "‹ "; }
.ad-tilbage:hover { color: var(--elfenben); }
.ad-note { max-width: 100%; }

.ad-upload {
  display: grid !important; place-items: center; gap: 6px; text-align: center;
  padding: 36px 20px; border: 1.5px dashed rgba(217, 176, 74, .5); border-radius: 8px;
  background: rgba(217, 176, 74, .04); cursor: pointer; transition: background .2s, border-color .2s;
}
.ad-upload input { display: none; }
.ad-upload strong { font-family: "Cinzel", serif; font-size: 17px; color: var(--elfenben); letter-spacing: .03em; }
.ad-upload span { max-width: 52ch; }
.ad-upload.over { background: rgba(217, 176, 74, .12); border-color: var(--guld); }
.ad-upload.laast { opacity: .4; pointer-events: none; }
.ad-fremdrift { display: grid; gap: 8px; }
.ad-fremdrift-linje { height: 4px; border-radius: 2px; background: var(--flade-2); overflow: hidden; }
.ad-fremdrift-linje span { display: block; height: 100%; width: 0; background: var(--guld); transition: width .3s; }
.ad-fremdrift p { margin: 0; font-size: 14px; color: var(--daempet); }

.ad-billedgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ad-billede { position: relative; margin: 0; border-radius: 6px; overflow: hidden; background: var(--flade); border: 1px solid var(--streg); }
.ad-billede.omslag { border-color: var(--guld); }
.ad-billede img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; display: block; background: #060a16; }
.ad-billede figcaption { padding: 6px 8px; font-size: 12px; color: var(--daempet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Knapperne står altid synligt, så det er nemt at se, hvad man kan. */
.ad-billede-knapper { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.ad-billede-knapper .ad-ikon { width: 30px; height: 30px; background: rgba(10, 16, 34, .72); }
.ad-maerkat {
  position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--guld); color: #15100a; font-size: 11.5px; font-weight: 600;
}
.ad-maerkat.forside { background: rgba(10, 16, 34, .8); color: var(--guld); border: 1px solid var(--guld); }
.ad-maerkat + .ad-maerkat { top: 34px; }

/* Beskeder */
.ad-besked {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 6px; background: #1f6b45; color: #fff; font-size: 14.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); z-index: 10;
}
.ad-besked.vis { opacity: 1; transform: translate(-50%, 0); }
.ad-besked.fejl { background: #8a2f2a; }

/* Sikkerhed */
.ad-totp { display: grid; gap: 6px; text-align: left; }
.ad-totp label { font-size: 13.5px; color: var(--daempet); }
#login-totp, #tfa-kode, #tfa-fra-kode { font-size: 20px; letter-spacing: .2em; text-align: center; }
.ad-status { margin: 0; padding: 10px 14px; border-radius: 6px; background: var(--flade-2); border-left: 3px solid var(--daempet); }
.ad-status.til { border-left-color: #6fcf97; }
.ad-trin { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--elfenben); }
.ad-qr-rad { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; }
.ad-qr { width: 220px; background: #fff; border-radius: 8px; padding: 6px; }
.ad-qr svg { display: block; width: 100%; height: auto; }
.ad-qr-side { display: grid; gap: 12px; min-width: 240px; flex: 1; max-width: 360px; }
.ad-qr-side p { margin: 0; }
.ad-noegle { font-family: ui-monospace, monospace; font-size: 15px; letter-spacing: .06em; padding: 10px 12px; border-radius: 4px; background: var(--natblaa); border: 1px solid var(--streg); word-break: break-all; }
.ad-venstre { justify-content: flex-start; align-items: flex-end; }
.ad-smal { width: 200px; }
.ad-kort code { font-family: ui-monospace, monospace; font-size: .92em; color: var(--elfenben); }
.ad-forklaring { margin: 4px 0 -6px; }
.ad-forklaring strong { color: var(--elfenben); font-weight: 600; }

/* Udsnit af omslaget */
.ad-fokus-rad { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.ad-fokus-kilde { position: relative; line-height: 0; border-radius: 6px; overflow: hidden; background: #060a16; cursor: crosshair; }
.ad-fokus-kilde img { max-height: 360px; max-width: min(100%, 520px); width: auto; height: auto; display: block; }
.ad-fokus-punkt {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(0, 0, 0, .35); pointer-events: none;
  transition: left .2s, top .2s;
}
.ad-fokus-punkt::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--guld); }
.ad-fokus-vis { display: grid; gap: 10px; width: 280px; }
.ad-fokus-vis p { margin: 0; }
.ad-fokus-ramme { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--streg); }
.ad-fokus-ramme img { width: 100%; height: 100%; object-fit: cover; display: block; transition: object-position .25s; }
.ad-husk { display: flex !important; grid-template-columns: none; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.ad-husk input { width: 16px; height: 16px; accent-color: var(--guld); }

/* Forsidens kort i admin */
.ad-karusel li.ad-karusel-raekke img { width: 150px; aspect-ratio: 3 / 1; object-fit: cover; }
.ad-karusel li.ad-karusel-raekke { grid-template-columns: 28px 150px 1fr auto; }
.ad-karusel li.ad-udsnit-raekke { display: block; padding: 16px; background: var(--natblaa); border: 1px solid var(--streg); }
.ad-karusel li.ad-udsnit-raekke::before { content: none; }
.ad-knap.lille { height: 34px; padding: 0 12px; font-size: 12.5px; }
.ad-knap[aria-expanded="true"] { background: rgba(217, 176, 74, .15); border-color: var(--guld); }
.ad-fokus-vis.bred { width: min(100%, 420px); }
#sidebillede { display: grid; gap: 14px; justify-items: start; }
.ad-standardbillede { width: 300px; aspect-ratio: 19 / 10; object-fit: cover; object-position: 60% 52%; border-radius: 8px; border: 1px solid var(--streg); }