/* ============================================================================
   Administrationen.

   Bygger på site.css: samme farver, samme skrifter, samme knapper. Det er ikke
   pyntesyge — det er den samme app set fra bagsiden, og et andet udseende ville
   gøre det sværere at se, hvad en ændring gør ved forsiden.

   Herunder står kun det, der er anderledes: en flade der bliver betjent frem
   for læst. Oversigt før detalje, tilstand vist som form og ikke kun som farve.
   ========================================================================= */

body.admin {
  /* Fladen har faner og lister; den skal ikke være så bred som en artikel. */
  --measure: 1280px;
}

/* ── Rammen ────────────────────────────────────────────────────────────── */

.adm-top {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.adm-top-inner {
  max-width: var(--measure); margin: 0 auto; padding: 13px var(--gutter);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.adm-top .brand { margin-right: auto; }

.tabs { display: flex; gap: 2px; overflow-x: auto; }
.tabs button {
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--dim); background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-current="page"] { color: var(--ink); border-bottom-color: var(--pulse); }

.adm-main { max-width: var(--measure); margin: 0 auto; padding: 30px var(--gutter) 90px; }

.adm-head { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: baseline; margin-bottom: 24px; }
.adm-head h1 { font-size: 27px; font-weight: 600; letter-spacing: -0.026em; }
.adm-head p { color: var(--dim); font-size: 15px; margin: 0; max-width: 68ch; }
.adm-head .spacer { margin-left: auto; }
.adm-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ── Kort og lister ────────────────────────────────────────────────────── */

.card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
  min-width: 0;
}
.card + .card { margin-top: 16px; }
.card h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.card > p { color: var(--dim); font-size: 14.5px; margin: 0 0 18px; }

.cols { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
/* Uden min-width: 0 får en fr-kolonne sit indhold som mindstemål, og en
   formular med faste feltbredder presser så den anden kolonne sammen — det
   modsatte af de forhold der står nedenfor. */
.cols > * { min-width: 0; }
/* Detaljespalten er den brede: listen er korte rækker, mens detaljen er
   formularer, program og oplægsholdere. */
@media (min-width: 1000px) { .cols.split { grid-template-columns: 1fr 1.45fr; } }

/* En række i en liste: klikbar, med tilstanden vist som en stribe i venstre
   kant. Farven alene siger det ikke — teksten i status-mærket gør. */
.row {
  display: grid; gap: 4px 16px; align-items: center;
  grid-template-columns: 1fr auto;
  padding: 14px 16px 14px 14px;
  border: 1px solid var(--line); border-left-width: 3px; border-left-color: var(--line-2);
  border-radius: var(--radius); background: var(--bg-2);
  cursor: pointer; text-align: left; width: 100%;
  font: inherit; color: inherit;
  transition: border-color .16s, background .16s;
}
/* Samme grund som ved .cols: uden min-width: 0 bruger en grid-kolonne sit
   indhold som mindstemål, og et inputfelt inde i rækken skubber så resten af
   rækken ud over kanten. */
.row > * { min-width: 0; }
.row + .row { margin-top: 8px; }
.row:hover { background: var(--bg-3); border-color: var(--line-2); }
.row[aria-current="true"] { border-color: var(--pulse-dim); border-left-color: var(--pulse); background: var(--bg-3); }
.row-title { font-family: "Archivo", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -0.016em; }
.row-meta { color: var(--dim); font-size: 13.5px; grid-column: 1; }
/* Kolonnen skal stå eksplicit. Et element med en fast række, men fri kolonne,
   placeres før de øvrige og lægger sig i kolonne 1 — altså i venstre side, hvor
   titlen skulle have stået. */
.row-side {
  grid-column: 2; grid-row: 1 / span 2;
  text-align: right; color: var(--dim); font-size: 13.5px;
}

/* Tre-kolonne-rækken (portræt, tekst, tal) placerer sine børn i den rækkefølge
   de står. Grundrækkens regler om at spænde over to rækker og altid ligge i
   kolonne 1 ville skubbe tallet om i venstre side — de slås fra her. */
.row.row-3 .row-side, .row.row-2 .row-side { grid-row: auto; grid-column: auto; }
.row.row-3 .row-meta, .row.row-2 .row-meta { grid-column: auto; }
.row-side b { display: block; color: var(--ink); font-family: "Archivo", sans-serif; font-size: 19px; font-variant-numeric: tabular-nums; }

/* Status. Formen bærer betydningen sammen med farven: en udfyldt prik for
   bekræftet, en åben ring for det der stadig mangler svar. */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 9px 3px 7px; border-radius: 100px;
  border: 1px solid var(--line-2); color: var(--dim);
}
.status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid currentColor;
}
.status.is-bekraeftet { color: var(--pulse); border-color: rgba(43,224,166,.35); }
.status.is-bekraeftet::before { background: currentColor; }
.status.is-inviteret { color: var(--amber); border-color: rgba(255,194,77,.35); }
.status.is-afbud { color: var(--crit); border-color: rgba(255,107,107,.35); }
.status.is-afbud::before { border-style: dashed; }
.status.is-udkast { color: var(--dim); }
.status.is-udgivet { color: var(--pulse); border-color: rgba(43,224,166,.35); }
.status.is-udgivet::before { background: currentColor; }

/* ── Formularer ────────────────────────────────────────────────────────── */

.fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fields .wide { grid-column: 1 / -1; }
.fields .field label { font-size: 13px; }

fieldset { border: 0; padding: 0; margin: 0 0 22px; }
fieldset legend {
  font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--dimmer); padding: 0 0 12px;
}

.inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.inline > * { min-width: 0; max-width: 100%; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.checkbox input { width: 17px; height: 17px; accent-color: var(--pulse); margin-top: 2px; flex: none; }
.checkbox span { font-size: 14.5px; }
.checkbox small { display: block; color: var(--dim); font-size: 13px; }

/* ── Program-editoren ──────────────────────────────────────────────────── */

.prog-edit { display: grid; gap: 8px; }
.prog-item {
  display: grid; gap: 8px;
  /* Tidsfeltet skal kunne rumme "16:15" plus browserens egen urikon; ved 74px
     bliver tallet klippet. */
  grid-template-columns: 104px 66px 1fr auto;
  align-items: start;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg);
}
.prog-item .stack { display: grid; gap: 8px; }
.prog-item input, .prog-item select, .prog-item textarea { font-size: 14.5px; padding: 8px 10px; }
.prog-item .handle {
  display: grid; gap: 2px; align-content: start; padding-top: 4px;
}
.prog-item .handle button {
  width: 26px; height: 22px; padding: 0; font-size: 12px; line-height: 1;
  background: transparent; color: var(--dim); border: 1px solid var(--line);
  border-radius: 3px; cursor: pointer; font-family: inherit;
}
.prog-item .handle button:hover:not(:disabled) { color: var(--pulse); border-color: var(--pulse-dim); }
.prog-item .handle button:disabled { opacity: .3; cursor: not-allowed; }
@media (max-width: 720px) {
  .prog-item { grid-template-columns: 1fr auto; }
  .prog-item > input:first-child { grid-column: 1; }
}

/* ── Tabeller (tilmeldinger) ───────────────────────────────────────────── */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 640px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dimmer); background: var(--bg-2); position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-2); }
td.num, th.num { font-variant-numeric: tabular-nums; }
td.shrink { white-space: nowrap; }

/* ── Portrætter i fladen ───────────────────────────────────────────────── */

.portrait-edit { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.portrait-edit .portrait { width: 72px; height: 72px; margin: 0; }
.portrait-edit .portrait-blank { font-size: 23px; }

/* Filvælgeren gemmes og erstattes af en knap: den systemtegnede kontrol kan
   ikke stiles, og den ser forkert ud alle andre steder end på Windows. */
.filepick { position: relative; overflow: hidden; display: inline-flex; }
.filepick input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}

/* ── Arkivet over oplægsholdere ────────────────────────────────────────── */

.history { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.history .tag {
  color: var(--dim); border-color: var(--line-2);
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px;
}
.history .tag.recent { color: var(--warm); border-color: rgba(255,122,77,.35); }

/* Advarslen når nogen har talt for nylig. Det er hele grunden til arkivet. */
.repeat-warn {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; color: var(--amber); margin-top: 8px;
}

/* ── Beskeder og dialoger ──────────────────────────────────────────────── */

.toast-stack {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 9px; max-width: min(420px, calc(100vw - 36px));
}
.toast {
  border-radius: var(--radius); padding: 12px 15px; font-size: 14.5px;
  border: 1px solid; background: var(--bg-2);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  animation: toast-in .22s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast-ok   { border-color: var(--pulse-dim); }
.toast-bad  { border-color: rgba(255,107,107,.5); }
.toast-warn { border-color: rgba(255,194,77,.5); }

dialog {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg-2); color: var(--ink);
  padding: 26px 28px; max-width: min(560px, calc(100vw - 32px));
  font-family: inherit;
}
dialog::backdrop { background: rgba(4,10,14,.72); backdrop-filter: blur(2px); }
dialog h2 { font-size: 20px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.02em; }
dialog p { color: var(--dim); font-size: 15px; margin: 0 0 20px; }
dialog .inline { justify-content: flex-end; }

/* ── Login ─────────────────────────────────────────────────────────────── */

.login-page { min-height: 82vh; display: grid; place-items: center; padding: 40px var(--gutter); }
.login-box {
  width: 100%; max-width: 420px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px;
}
.login-box h1 { font-size: 24px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.024em; }
.login-box > p { color: var(--dim); font-size: 14.5px; margin: 0 0 22px; }
.login-box form { display: grid; gap: 14px; }

/* ── Tomme tilstande ───────────────────────────────────────────────────── */

.blank {
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 34px 26px; color: var(--dim); font-size: 14.5px;
}
.blank b { color: var(--ink); display: block; margin-bottom: 5px; font-weight: 600; }

/* ── Værktøjsklasser ───────────────────────────────────────────────────────
   Content-Security-Policy tillader kun stylesheets fra sitet selv, og et
   style="…"-attribut sat fra JavaScript tæller som inline stil og bliver
   blokeret uden varsel. Derfor står de småjusteringer, fladen har brug for,
   her som klasser i stedet — det er både det, browseren tillader, og det sted
   man kan finde dem igen.
   ───────────────────────────────────────────────────────────────────────── */

/* Søgefeltet i en værktøjslinje skal have en bredde, det kan læses i: uden
   den klemmer flex det sammen til nogle få tegn. */
.search { flex: 1 1 320px; max-width: 420px; }

.mt-s  { margin-top: 10px; }
.mt-m  { margin-top: 14px; }
.mt-l  { margin-top: 18px; }
.mb-m  { margin-bottom: 16px; }
.mb-l  { margin-bottom: 22px; }
.flush { margin: 0; }

/* En sektion i et kort, adskilt fra den foregående. */
.subsection {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
}
.subsection h2, .sub-title {
  font-size: 15px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.014em;
}
.sub-title-spaced { margin-bottom: 12px; }

/* Knappen der sender noget væk for altid, skubbes til højre og er rød. */
.danger { margin-left: auto; color: var(--crit); }
.danger:hover:not(:disabled) { border-color: var(--crit); color: var(--crit); }

.mini { font-size: 13px; padding: 4px 9px; }
.compact { font-size: 14px; padding: 7px 10px; }

/* Rullelister, der ikke skal fylde hele bredden. */
.narrow { width: auto; }
/* En <select> med width:auto bliver så bred som dens længste valgmulighed, og
   valgmulighederne her er hele arrangementstitler. Den skal have lov at fylde
   spalten, men ikke mere — resten klippes med ellipse. */
.pick {
  flex: 1 1 260px;
  width: auto; min-width: 0; max-width: 100%;
  text-overflow: ellipsis;
}
.pick-inline { width: auto; padding: 6px 30px 6px 10px; font-size: 13.5px; }

.warn-text { color: var(--amber); }
.warn-note { color: var(--amber); font-size: 12px; margin-top: 4px; }
.ok-text { color: var(--pulse); }
.token { color: var(--pulse); }

/* Rækker der ikke kan klikkes: samme kasse, men uden hånden på markøren. */
.row.static { cursor: default; }
.row.row-3 { grid-template-columns: auto 1fr auto; align-items: start; }
.row.row-2 { grid-template-columns: 1fr auto; }

.stack-3 { display: grid; gap: 3px; }
.stack-6 { display: grid; gap: 6px; }
.stack-end { display: grid; gap: 8px; justify-items: end; }
.stack-3 > *, .stack-6 > *, .stack-end > * { min-width: 0; }

/* Et billede der fylder sin spalte, med samme kant som alt andet. */
.preview {
  width: 100%; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.preview-small { max-width: 420px; }

/* Kortet i fladen har en kant; kortet på forsiden sidder i et hjørne uden. */
.map-framed { border-radius: var(--radius); border: 1px solid var(--line); }
.map-none {
  display: grid; place-items: center; height: 100%;
  color: var(--dimmer); font-size: 14px;
}

.plain-link { text-decoration: none; color: inherit; }
.mb-s { margin-bottom: 10px; }

/* Knappen i en bekræftelsesdialog, der udfører det uigenkaldelige. */
.btn-danger { border-color: var(--crit); color: var(--crit); }
.btn-danger:hover:not(:disabled) { border-color: var(--crit); color: var(--crit); background: rgba(255,107,107,.1); }
.ok-note { color: var(--pulse); font-size: 12px; margin-top: 4px; }

/* Pladsholdere i mailskabelonen. En monospace ville være det oplagte, men
   sitet bruger ikke en, og et {navn} i klammer er tydeligt nok i sig selv. */
code {
  font-family: inherit;
  font-size: .94em;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}