/* =====================================================================
   MINGLES.DK - base.css
   Strukturelt og typografisk fundament. Al farve hentes udelukkende fra
   CSS-variabler (--color-*), som defineres i de årstids-specifikke filer
   (spring.css / summer.css / autumn.css / winter.css). Skift af sæson-fil
   ændrer dermed hele sidens udtryk uden ændringer her.
   ===================================================================== */

@font-face {
  font-family: 'system-display';
  src: local('Bricolage Grotesque'), local('Georgia');
}

:root {
  --font-display: 'Bricolage Grotesque', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;

  --shadow-card: 0 1px 2px rgba(20, 20, 20, 0.06), 0 8px 24px rgba(20, 20, 20, 0.08);
  --shadow-pop: 0 12px 40px rgba(20, 20, 20, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0 0 0.4em 0;
  letter-spacing: -0.01em;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   Forsiden (front page)
   ------------------------------------------------------------------ */

.front {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

/* Signaturelement: bløde, overlappende cirkler der "mingler" - står for
   mennesker der mødes og krydser hinandens cirkler. Farverne skifter med
   sæsonen via --color-orb-1..4. Ren CSS/SVG, ingen eksternt billede. */
.front::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 18% 22%, var(--color-orb-1) 0%, transparent 42%),
    radial-gradient(circle at 78% 15%, var(--color-orb-2) 0%, transparent 40%),
    radial-gradient(circle at 65% 78%, var(--color-orb-3) 0%, transparent 46%),
    radial-gradient(circle at 12% 82%, var(--color-orb-4) 0%, transparent 40%);
  filter: blur(4px);
  opacity: var(--orb-opacity, 0.55);
}

.front-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 64px);
}

.front-wordmark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-ink);
}

.front-season-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-ink);
  opacity: 0.7;
}

.front-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: 0 clamp(20px, 5vw, 64px) clamp(28px, 5vw, 56px);
}

@media (max-width: 880px) {
  .front-body { grid-template-columns: 1fr; }
}

.front-pitch {
  max-width: 46ch;
}

.front-pitch .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-ink);
  opacity: 0.75;
  margin-bottom: 14px;
  display: inline-block;
}

.front-pitch h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 600;
  color: var(--color-primary-ink);
}

.front-pitch p {
  font-size: 1.05rem;
  color: var(--color-ink);
  opacity: 0.86;
}

.front-links {
  margin-top: 22px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.95rem;
}

.front-links a {
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  color: var(--color-primary-ink);
}

.front-links a:hover { opacity: 0.7; }

/* Login-kort */
.auth-card {
  background: var(--color-surface);
  border-radius: var(--radius-l);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-surface-border);
}

.auth-card h2 {
  font-size: 1.5rem;
  color: var(--color-primary-ink);
}

.auth-card .sub {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 22px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-primary-ink);
}

.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="datetime-local"],
.field textarea,
.field select {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.96rem;
  font-family: var(--font-body);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* "Vis adgangskode"-øje-ikon (mingles_password_field_html() i
   functions.php, se public/js/password_toggle.js for selve
   toggle-logikken). Wrapperen er BEVIDST kun en tynd position:relative-
   ramme omkring den almindelige <input> - selve input-styling (bredde/
   padding/kant) arves uændret fra .field input[type="password"]
   ovenfor (descendant-selector, rammer uanset ekstra indpakning). */
.password-toggle-wrap { position: relative; }
.password-toggle-wrap input { padding-right: 40px; }
.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-ink);
  opacity: 0.5;
}
.password-toggle-btn:hover { opacity: 1; }

.field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  margin-bottom: 18px;
}

/* Radio-gruppe på én linje (fx "FB-agtig" / "Rulle"-valget i FORA's
   "Ny debat"-dialog) - hver mulighed på egen linje inde i gruppen,
   da label-teksten typisk er for lang til at stå side om side i en
   smal .form-grid-kolonne. */
.radio-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
}
.radio-row label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  font-weight: 400;
}

.field-error {
  color: var(--color-error);
  font-size: 0.82rem;
  margin-top: 5px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-s);
  border: none;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-secondary {
  background: transparent;
  color: var(--color-primary-ink);
  border: 1.5px solid var(--color-surface-border);
}
.btn-secondary:hover { background: var(--color-surface-border); }

/* Farligt/sletter noget permanent - jf. PROJEKT_OVERBLIK.md's
   farve-regel (rød = advarsel/farligt/slet). */
.btn-danger {
  background: var(--color-error);
  color: var(--color-on-primary);
}
.btn-danger:hover { filter: brightness(1.06); }

.btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
/* Fortryd/Luk placeres altid længst mod højre, jf. designkravet -
   sikres ved kildeorden (Fortryd sidst i markup). */

.flash {
  border-radius: var(--radius-s);
  padding: 12px 16px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.flash-error   { background: var(--color-error-bg); color: var(--color-error); }
.flash-success { background: var(--color-success-bg); color: var(--color-success); }
.flash-info    { background: var(--color-surface-border); color: var(--color-primary-ink); }

.front-footer {
  padding: 16px clamp(20px, 5vw, 64px) 26px;
  font-size: 0.78rem;
  opacity: 0.65;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.front-footer a { text-decoration: none; }
.front-footer a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Generiske side-shells (register / mfa / info / mainpage-placeholder)
   ------------------------------------------------------------------ */

.page-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) 20px 60px;
}

.page-shell h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--color-primary-ink);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-l);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-card);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.form-grid .field-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* BEGIVENHEDER's fire dato-felter (Publiceringsdato/Tilmeldingsfrist/
   Start/Slut) i én række, i den rækkefølge - se begivenheder_edit.php.
   Egen klasse (i stedet for endnu en inline grid-stil) fordi den,
   modsat sidens øvrige 2-/3-kolonne inline-grids, får sit eget
   mobil-brudpunkt her - sitets ENESTE brudpunkt, 880px, jf.
   PROJEKT_OVERBLIK.md. */
/* RETTET 2026-08-12 (fire omgange - se git-historik for de tidligere
   forsøg). Endelig løsning: fire kolonner i ÉN linje, Start/Slut med
   dato+time+minut side om side (eksplicit ønske), Publiceringsdato/
   Tilmeldingsfrist smallere (kun ét dato-felt). Redigerings-boksen er
   kun ca. 695px bred her (box-grid--main-side deler pladsen med
   "Administrer begivenhed"-boksen) - minimumsbredderne herunder er
   stramt tilpasset PRÆCIS til at kunne being under den grænse (testet
   ved 1280px vinduesbredde); minmax'ens fr-vægtning (1fr/1fr/1.5fr/
   1.5fr) fordeler evt. overskydende plads på bredere skærme. */
.event-date-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr) minmax(225px, 1.5fr) minmax(225px, 1.5fr);
  gap: 10px;
}
@media (max-width: 880px) {
  .event-date-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .event-date-row { grid-template-columns: 1fr; }
}

/* Start/Slut: dato-felt + de to sidestillede time/minut-dropdowns
   (BYGGET 2026-08-12, erstatter det tidligere <input type="datetime-
   local"> - gav ingen kontrol over minut-granulariteten). Dato-feltet
   får det meste af pladsen, de to dropdowns er bevidst smalle.
   flex-wrap som sikkerhedsnet på meget smalle skærme (falder ned på
   egen linje frem for at klemmes usynligt, jf. tidligere bug). */
.event-time-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* ".field input[type="date"]"/".field select" (base.css' generelle
   feltstyling, samme specificitet: 1 klasse + 1 type-selector hver)
   sætter BEGGE width:100% - ekstra ".field"-klasse tilføjet her
   udelukkende for at vinde specificitets-kampen (3 klasser+type mod
   2), IKKE fordi selektoren reelt har brug for den ekstra
   indsnævring. */
.field .event-time-row input[type="date"] { width: auto; padding: 8px 8px; flex: 1 1 75px; min-width: 75px; }
.field .event-time-row select.event-time-select { width: 4.6em; padding: 8px 4px; flex: 0 0 auto; }

/* Forsidebillede-cropper (fora/grupper/begivenheder) - se
   public/js/cover_cropper.js */
.mingles-cropper { margin-top: 8px; }
.mingles-cropper-view {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 1;
  overflow: hidden;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-surface);
  touch-action: none;
  cursor: grab;
}
.mingles-cropper-view.is-dragging,
.mingles-cropper-view:active { cursor: grabbing; }
.mingles-cropper-view img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  max-height: none;
  pointer-events: none; /* selve view'et håndterer pointer-events, ikke billedet */
  user-select: none;
  -webkit-user-drag: none;
}
.mingles-cropper-zoom {
  width: 100%;
  margin-top: 8px;
}
.mingles-cropper-hint {
  font-size: 0.72rem;
  opacity: 0.6;
  margin-top: 4px;
}

.mfa-code-input {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0 8px;
}
.mfa-code-input input {
  width: 48px;
  height: 58px;
  text-align: center;
  font-size: 1.5rem;
  font-family: var(--font-mono);
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-bg);
  color: var(--color-ink);
}
.mfa-code-input input:focus {
  outline: 2px solid var(--color-accent);
  border-color: var(--color-accent);
}

.mfa-channel {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.75;
  margin-bottom: 4px;
}

.accordion-item {
  border-bottom: 1px solid var(--color-surface-border);
}
.accordion-item:last-child { border-bottom: none; }
.accordion-item summary {
  padding: 16px 4px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-primary-ink);
}
.accordion-item div {
  padding: 0 4px 18px;
  font-size: 0.94rem;
  opacity: 0.88;
}

.back-link {
  display: inline-block;
  margin-top: 22px;
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   APP SHELL - siden efter login (TOP BAR / NAV BAR / CONTENT PANE)
   Designet til IKKE at scrolle på sideniveau (position:fixed, fylder
   hele viewporten) - kun de enkelte bokse scroller internt hvis nødvendigt.
   ===================================================================== */

.app-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

.app-topbar {
  flex: 0 0 auto;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(14px, 2vw, 24px);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-surface-border);
}

.app-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-wordmark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-ink);
  text-decoration: none;
}

.app-online-count {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  opacity: 0.65;
}

.app-online-admin {
  font-size: 0.9rem;
  line-height: 1;
  cursor: default;
}

.app-topbar-right a {
  display: block;
  line-height: 0;
}

/* Hamburger-menuknap - skjult på desktop (>880px), vist kun på
   smalle skærme, se mobil-override nedenfor. */
.app-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 2px;
  border: none;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
  flex: 0 0 auto;
}

.app-nav-backdrop { display: none; }

.avatar-img, .avatar-fallback {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  border: 2px solid var(--color-surface-border);
  background: var(--color-bg);
}

.app-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.app-navbar {
  flex: 0 0 196px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-surface-border);
  padding: 12px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-navbar a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  opacity: 0.8;
  border-left: 3px solid transparent;
}

.app-navbar a .nav-icon { flex: 0 0 auto; opacity: 0.85; }

/* Årstids-illustration nederst i NAV BAR, under HJÆLP - se
   shell_header.php. margin-top:auto skubber den til bunden af
   NAV BAR'ens flex-column, uanset hvor mange punkter listen har. */
.app-nav-season-icon {
  margin-top: auto;
  padding: 14px 24px 6px;
  display: flex;
  justify-content: center;
  opacity: 0.85;
}
.app-nav-season-icon img { width: 76px; height: 76px; }

.app-navbar a:hover {
  opacity: 1;
  background: var(--color-bg);
}

.app-navbar a.active {
  opacity: 1;
  color: var(--color-primary-ink);
  border-left-color: var(--color-primary);
  background: var(--color-bg);
}

.app-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.app-content-title {
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: var(--color-primary-ink);
}

.box-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 8px;
}

.box-grid--6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.box-grid--4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.box-grid--3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
.box-grid--2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
.box-grid--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }

.box {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-m);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.box h2 {
  flex: 0 0 auto;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
  color: var(--color-primary-ink);
  opacity: 0.85;
}

.box-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.box .field { margin-bottom: 10px; }
.box .field label { font-size: 0.76rem; }
.box .field input, .box .field textarea, .box .field select {
  padding: 8px 10px;
  font-size: 0.88rem;
}
.box .btn { padding: 0.35em 0.8em; font-size: 0.8rem; line-height: 1; }
.box .btn-row { margin-top: 5px; }

.pic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
}

/* Bruges KUN i profile.php's sammenlagte Billeder+Profiltekst-boks -
   mindre celler end .pic-grid, så op til 20 billeder (betalende
   profils grænse, se mingles_picture_limit_for_profile()) stadig
   flyder pænt i den smallere midterkolonne. */
.pic-grid--mini {
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
}

.pic-item {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

/* Hele billedet er nu selve "sæt som primær"-knappen (klik hvor som
   helst på billedet) - nulstillet knap-styling, så det visuelt bare
   ligner billedet selv. Billedet har fast pixel-størrelse (sat inline
   af mingles_avatar_html()); knappen er derfor `inline-block`
   (skrumper til billedets egen størrelse) - .pic-item centrerer den i
   den bredere grid-celle via `width:fit-content; margin:0 auto`, så
   flueben/kryds-badges (positioneret relativt til .pic-item) rammer
   PRÆCIS billedets hjørner, ikke cellens. */
.pic-frame-btn {
  position: relative;
  display: inline-block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.pic-item img {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-surface-border);
  display: block;
}

.pic-item.is-primary img {
  border-color: var(--color-success);
  border-width: 3px;
}

/* Lysegrønt flueben, nederste venstre hjørne - markerer det PRIMÆRE billede. */
.pic-check-badge {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg);
}
/* BYGGET 2026-08-12: badgen renderes nu ALTID i markup'et (se
   mingles_render_profile_picture_grid_html()), synlighed styres af
   det native `hidden`-attribut i stedet for at echo'e/undlade selve
   elementet - så AJAX "sæt som primær"-svaret (picture_primary.php)
   blot kan toggle attributten client-side, uden at skulle bygge/
   indsætte SVG-markup fra JS. `display:flex` ovenfor vinder ellers
   over det native `[hidden]`-UA-stilark (samme specificitet-fælde som
   andre steder i denne fil) - denne regel retter det.  */
.pic-check-badge[hidden] { display: none; }

/* Rødt kryds, øverste højre hjørne - SLET-knap, overlejret oven på
   billedet (egen, separat formular - ikke indlejret i .pic-frame-btn
   ovenfor, så klik på krydset ikke også udløser "sæt som primær"). */
.pic-delete-form {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 2;
}
.pic-delete-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-error);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg);
  padding: 0;
  cursor: pointer;
}
.pic-delete-badge:hover { opacity: 0.85; }

.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font-size: 0.86rem;
}
.status-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  padding: 5px 0;
  border-bottom: 1px dashed var(--color-surface-border);
}
.status-list li:last-child { border-bottom: none; }
.status-list .label { opacity: 0.7; }
.status-list .value { font-weight: 600; text-align: right; }

.badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
}

/* Mobil: stak panelerne vertikalt uden at ændre funktionalitet */
@media (max-width: 880px) {
  .app-shell { position: static; min-height: 100vh; }
  .app-body { flex-direction: column; }

  /* TOP BAR (hamburger + MINGLES.DK-navnetræk) skal forblive synlig
     ved scroll - rapporteret fejl (2026-08-10): på mobil scroller hele
     siden nu som ét dokument (.app-shell mistede sin position:fixed
     lige ovenfor), så uden dette forsvinder TOP BAR simpelthen opad
     sammen med resten af indholdet. `position: sticky` holder den
     klistret til viewportens top under scroll, uden at genindføre
     .app-shell's position:fixed (som var årsagen til at ændre til
     static i første omgang). z-index højere end BÅDE
     .app-nav-backdrop (40) OG den udfoldede .app-navbar-dropdown (41)
     nedenfor - hamburger-knappen i TOP BAR skal forblive klikbar
     (til at LUKKE menuen igen) selv når dropdownen er åben og ligger
     ovenpå resten af siden. Bemærk at selve NAV BAR-dropdownen
     allerede var bygget ud fra en antagelse om at TOP BAR forbliver
     44px høj og pinnet øverst (`top: 44px` nedenfor) - denne rettelse
     opfylder blot den antagelse, den er ikke ny adfærd for dropdownen. */
  .app-topbar { position: sticky; top: 0; z-index: 45; }

  /* Rediger profil (profile.php): Telefon+E-mail, Postnummer+By,
     Fødselsdato+Relationsstatus, Antal børn+Køn, Første+Sidste
     føde-år vises parvis side om side på desktop (.form-grid,
     2 kolonner). Det almindelige .form-grid-brudpunkt er 640px
     (se base.css) - for smalt til at dække alle telefoner/
     opløsninger pænt HER specifikt, så denne formular får sit eget,
     tidligere brudpunkt (880px, samme som resten af mobil-layoutet).
     Scopet til KUN .profile-fields-form, så det ikke ændrer
     .form-grid andre steder på sitet (fx BEGIVENHEDER's
     tre-kolonne-række, som stadig skal bryde ved 640px). */
  .profile-fields-form .form-grid { grid-template-columns: 1fr; }

  .mobile-scroll-spacer { height: 70px; }

  .app-nav-toggle { display: inline-flex; }

  /* NAV BAR var tidligere en vandret, sideværts-scrollende bar her -
     uoverskuelig på mobil (8 punkter i én lang linje). Nu i stedet en
     "hamburger"-dropdown (se .app-nav-toggle + JS i shell_footer.php):
     skjult som standard, foldet ud som et flydende panel lige under
     TOP BAR når man trykker på menuknappen. Ren CSS-tilstand
     (.is-open) - ingen animation-bibliotek. */
  .app-nav-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 20, 20, 0.35);
    z-index: 40;
  }
  .app-navbar {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    z-index: 41;
    flex: 0 0 auto;
    flex-direction: column;
    max-height: calc(100vh - 44px);
    overflow-x: hidden;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-surface-border);
    box-shadow: var(--shadow-pop);
    display: none;
  }
  .app-navbar.is-open { display: flex; }
  .app-navbar a { padding: 12px 18px; border-left: none; border-bottom: 1px solid var(--color-surface-border); white-space: normal; }
  .app-navbar a.active { border-left: none; border-bottom-color: var(--color-surface-border); background: var(--color-bg); }
  .app-content { overflow-y: auto; }
  .box-grid, .box-grid--6, .box-grid--4, .box-grid--3, .box-grid--2, .box-grid--1 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    overflow-y: visible;
  }
  .box { min-height: 260px; }
  /* Undtagelse: bokse der bevidst kun indeholder kort tekst (fx
     HJEM-dashboardets "Velkommen tilbage"-boks, se mainpage.php) skal
     IKKE arve den generelle 260px-minimumshøjde - den er tænkt til
     bokse med scrollbart listeindhold, og ville ellers efterlade 90 %
     tom plads i en boks der aldrig bliver højere. */
  .box--auto-height { min-height: 0; }
}

/* =====================================================================
   AVATAR HOVER-POPUP (profilnavn, alder, køn, online-status, admin)
   Popup'en er ÉT delt element i bunden af <body> (se shell_footer.php),
   positioneret med JS via position:fixed - det undgår at blive skåret
   af boksenes overflow:hidden, uanset hvor avataren vises.
   ===================================================================== */

.avatar-hover-trigger {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 0;
}

#mingles-avatar-popup {
  position: fixed;
  z-index: 9999;
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-pop);
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  min-width: 140px;
  pointer-events: none;
}

#mingles-avatar-popup .popup-name {
  font-weight: 700;
  color: var(--color-primary-ink);
  white-space: nowrap;
}

#mingles-avatar-popup .popup-age {
  opacity: 0.65;
  margin-left: 4px;
  font-weight: 400;
}

#mingles-avatar-popup .popup-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

#mingles-avatar-popup .popup-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
#mingles-avatar-popup .popup-icon.sex-m { background: #2b6fd9; }
#mingles-avatar-popup .popup-icon.sex-k { background: #d9436f; }

#mingles-avatar-popup .popup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
#mingles-avatar-popup .popup-dot.online  { background: #3f8f5e; }
#mingles-avatar-popup .popup-dot.offline { background: #b3413a; }

#mingles-avatar-popup .popup-shield {
  font-size: 14px;
  line-height: 1;
}

#mingles-avatar-popup .popup-star {
  font-size: 14px;
  line-height: 1;
  color: #e0b400;
}

/* Medlemsoversigt (medlemmer.php) */
.member-list { display: flex; flex-direction: column; }
.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px dashed var(--color-surface-border);
}
.member-row:last-child { border-bottom: none; }
.member-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.member-name { font-weight: 600; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-sub { font-size: 0.74rem; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.member-box-footer {
  flex: 0 0 auto;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-surface-border);
  font-size: 0.78rem;
  opacity: 0.75;
  display: flex;
  justify-content: space-between;
}

/* TOP BAR højreside: Log ud + profilbillede */
.app-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-season-picker select {
  font-size: 0.72rem;
  font-family: inherit;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-s);
  padding: 3px 6px;
  max-width: 110px;
}

/* Admin-panel tandhjul-ikon (BYGGET 2026-08-12) - erstatter den
   tidligere altid-synlige .app-season-picker <select> ovenfor. */
.app-admin-gear {
  font-size: 1.1rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  opacity: 0.75;
}
.app-admin-gear:hover { opacity: 1; }

.admin-panel-dialog {
  border: none;
  border-radius: var(--radius-m);
  padding: 16px 18px;
  max-width: 640px;
  width: calc(100% - 32px);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.admin-panel-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.admin-panel-dialog h3 { margin: 0 0 12px; font-size: 1.05rem; }

.admin-panel-section { margin-bottom: 16px; }
.admin-panel-section > label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.admin-panel-section select {
  width: 100%;
  max-width: 260px;
  padding: 6px 8px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.86rem;
}

.admin-panel-params-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--color-surface-border); border-radius: var(--radius-s); }
.admin-panel-params-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.admin-panel-params-table th {
  position: sticky;
  top: 0;
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.65;
  padding: 6px 8px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-surface-border);
}
.admin-panel-params-table td { padding: 5px 8px; border-bottom: 1px dashed var(--color-surface-border); vertical-align: top; }
.admin-panel-params-table tr:last-child td { border-bottom: none; }
.admin-panel-param-key { font-family: var(--font-mono); white-space: nowrap; }
.admin-panel-param-usage { opacity: 0.75; }
.admin-panel-param-input {
  width: 100%;
  min-width: 70px;
  max-width: 110px;
  padding: 4px 6px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.82rem;
  box-sizing: border-box;
}
.admin-panel-actions { margin-top: 14px; justify-content: flex-end; }
.admin-panel-error { color: var(--color-error); font-size: 0.85rem; }

/* Smiley-vælger (BYGGET 2026-08-12) - knap dokket til enden af et
   tekstfelt (".emoji-picker-input" pakkes ind i ".emoji-picker-wrap"
   af den kaldende sides markup, se begivenheder_edit.php). */
.emoji-picker-wrap { display: flex; align-items: stretch; gap: 0; }
.emoji-picker-wrap .emoji-picker-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.emoji-picker-btn {
  flex: 0 0 auto;
  width: 2.4em;
  font-size: 1rem;
  line-height: 1;
  background: var(--color-bg);
  border: 1.5px solid var(--color-surface-border);
  border-left: none;
  border-top-right-radius: var(--radius-s);
  border-bottom-right-radius: var(--radius-s);
  cursor: pointer;
  padding: 0;
}
.emoji-picker-btn:hover { background: var(--color-surface-border); }

/* Øverste-højre-hjørne-variant (BYGGET 2026-08-12) - til tekst-BOKSE
   (<textarea>), i modsætning til ".emoji-picker-btn" ovenfor som er
   dokket til enden af en enkelt-linje <input>. Sidder på selve
   overskriftslinjen for boksen (label/markdown-hint), højrejusteret
   via ".field-label-row" - IKKE dokket til feltets kant. */
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-label-row label { margin: 0; }
.field-label-row .markdown-hint { margin: 0; flex: 1 1 auto; min-width: 0; }
.emoji-picker-btn--corner {
  flex: 0 0 auto;
  width: 1.8em;
  height: 1.8em;
  font-size: 0.95rem;
  line-height: 1;
  background: var(--color-bg);
  border: 1.5px solid var(--color-surface-border);
  border-radius: var(--radius-s);
  cursor: pointer;
  padding: 0;
}
.emoji-picker-btn--corner:hover { background: var(--color-surface-border); }

.emoji-picker-dialog {
  border: none;
  border-radius: var(--radius-m);
  padding: 16px 18px;
  max-width: 480px;
  width: calc(100% - 32px);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.emoji-picker-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.emoji-picker-dialog h3 { margin: 0 0 10px; font-size: 1.05rem; }

.emoji-picker-controls { display: flex; gap: 8px; margin-bottom: 10px; }
.emoji-picker-controls input,
.emoji-picker-controls select {
  padding: 6px 8px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.86rem;
}
.emoji-picker-controls input { flex: 1 1 auto; min-width: 0; }
.emoji-picker-controls select { flex: 0 0 auto; max-width: 45%; }

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-s);
  padding: 4px;
}
.emoji-picker-item {
  background: none;
  border: none;
  border-radius: var(--radius-s);
  font-size: 1.3rem;
  line-height: 1;
  padding: 5px 0;
  cursor: pointer;
}
.emoji-picker-item:hover { background: var(--color-surface-border); }
.emoji-picker-empty { grid-column: 1 / -1; font-size: 0.8rem; opacity: 0.65; padding: 8px; }
.emoji-picker-actions { margin-top: 12px; justify-content: flex-end; }
.app-logout-link {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-ink);
  opacity: 0.7;
}
.app-logout-link:hover { opacity: 1; text-decoration: underline; }

/* Medlemslister som klikbare links til VIS-PROFIL-SIDE */
a.member-row-link {
  text-decoration: none;
  color: inherit;
  display: flex;
}
a.member-row-link:hover { background: var(--color-bg); }

/* Delt, neutral rund ikon-knap ("chip") - samme stil som HJEM-
   dashboardets .dash-card-icon. Brugt til enkeltstående handlings-
   ikoner (redigér, forlad ...) hvor en fuld .btn ville fylde for
   meget. Positionering (fx flydende over et hjørne) tilføjes via en
   ekstra klasse pr. brugssted, se .viewprofile-edit-icon nedenfor. */
.icon-btn-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--color-surface-border);
  color: var(--color-primary);
  cursor: pointer;
  flex: 0 0 auto;
}
.icon-btn-chip:hover { background: var(--color-primary); color: var(--color-on-primary); }

/* VIS-PROFIL-SIDE (read-only visning - også af ens EGEN profil, se
   view_profile.php). Redigér-ikon (blyant) øverst højre hjørne af
   PROFIL-/BILLED-boksen, KUN synligt når man ser sin egen profil. */
.viewprofile-edit-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.viewprofile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  margin-bottom: 4px;
}
.viewprofile-header .name-age { font-size: 1.05rem; font-weight: 700; color: var(--color-primary-ink); }
.viewprofile-header .sub { font-size: 0.82rem; opacity: 0.7; }

.kv-list { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; line-height: 1.2; }
.kv-list li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--color-surface-border); }
.kv-list li:last-child { border-bottom: none; }
.kv-list .k { opacity: 0.7; }
.kv-list .v { font-weight: 600; text-align: right; }

.simple-list { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; line-height: 1.25; }
.simple-list li { padding: 4px 0; border-bottom: 1px dashed var(--color-surface-border); }
.simple-list li:last-child { border-bottom: none; }
.simple-list .item-title { font-weight: 600; }
.simple-list a.item-title {
  color: inherit;
  text-decoration: none;
}
.simple-list a.item-title:hover { text-decoration: underline; color: var(--color-primary); }
.simple-list .item-meta { opacity: 0.6; font-size: 0.74rem; }
.simple-list .item-tag {
  display: inline-block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  margin-left: 6px;
}

.viewprofile-empty { opacity: 0.6; font-size: 0.82rem; }

/* Usynlig på PC, giver ekstra scroll-plads i bunden på mobil (se
   mobil-media-query nedenfor) - iOS Safaris bundbjælke (adresse-
   felt/værktøjer) glider ind og ud ved scroll og "spiser" reel plads
   i bunden af siden, hvilket uden dette kan skjule/afskære sidste
   indhold (fx Status-boksens "Besøgt af"-liste i profile.php). */
.mobile-scroll-spacer { height: 0; }

/* Billedgalleri på VIS-PROFIL-SIDE + fuld-PANE lightbox */
.viewprofile-pic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 10px;
}
.viewprofile-pic-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-surface-border);
  cursor: zoom-in;
  display: block;
}

.profile-lightbox {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: zoom-out;
}
.profile-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Synlig status-ikon-række (VIS-PROFIL-SIDE) - samme visuelle sprog som
   hover-popup'en, men altid vist (ikke hover-baseret). */
.status-icon-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.status-icon.sex-m { background: #2b6fd9; }
.status-icon.sex-k { background: #d9436f; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-dot.online  { background: #3f8f5e; }
.status-dot.offline { background: #b3413a; }
.status-plain { font-size: 14px; line-height: 1; }

/* =====================================================================
   BILLEDVÆG (gallery)
   ===================================================================== */

.gallery-toolbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.gallery-tile {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gallery-tile .thumb-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-tile .tile-title {
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-tile .tile-meta {
  font-size: 0.72rem;
  opacity: 0.65;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.gallery-tile .tile-meta-icons {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
.gallery-tile .tile-meta-owner {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.gallery-detail {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  gap: 14px;
}
.gallery-detail.is-open { display: flex; }

.gallery-detail-image {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: zoom-out;
}
.gallery-detail-image img { max-width: 100%; max-height: 100%; object-fit: contain; }

.gallery-detail-side {
  flex: 1 1 45%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.gallery-detail-title {
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-ink);
  margin-bottom: 4px;
}
.gallery-detail-owner {
  flex: 0 0 auto;
  font-size: 0.76rem;
  opacity: 0.65;
  margin-bottom: 8px;
}

.gallery-vote-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
/* Scopet til .gallery-vote-btn (IKKE en generel "button"-descendant-
   selector) - samme CSS-specificitets-fejl som ramte FORA's
   "Svar"/moderator-knapper (se docs/FORA.md): ".gallery-vote-row button"
   ramte ved et uheld OGSÅ moderator-panelets Slet/Fortryd-knapper
   (nedarvet ned i deres formular inde i .moderator-controls-panel) og
   overskrev deres baggrund uden at overskrive deres (lyse) tekstfarve
   fra .btn-danger = usynlig, "blank" knap. Ramt nu KUN op/ned-
   stemme-knapperne, via en dedikeret klasse i stedet for
   element-descendant. */
.gallery-vote-btn {
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-surface);
  border-radius: 999px;
  padding: 0.3em 0.7em;
  line-height: 1;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gallery-vote-btn.is-active { border-color: var(--color-accent); color: var(--color-accent); }
.gallery-delete-btn {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--color-error);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}

.gallery-comment-form { flex: 0 0 auto; display: flex; gap: 6px; margin-bottom: 10px; }
.gallery-comment-form input[type="text"] {
  flex: 1 1 auto;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.86rem;
}

.gallery-comment-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.gallery-comment {
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-surface-border);
  font-size: 0.84rem;
}
.gallery-comment:last-child { border-bottom: none; }
.gallery-comment .c-author { font-weight: 700; color: var(--color-primary-ink); margin-right: 6px; }
.gallery-comment .c-date { font-size: 0.7rem; opacity: 0.55; }
.gallery-comment .c-text { margin-top: 2px; }

@media (max-width: 880px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-detail.is-open { flex-direction: column; }
}

/* =====================================================================
   DEBAT-SIDE (fora.php)
   ===================================================================== */

.debate-list-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 10px 8px;
  border-bottom: 1px dashed var(--color-surface-border);
  border-left: 3px solid transparent;
}
.debate-list-item:last-child { border-bottom: none; }
.debate-list-item:hover { background: var(--color-bg); }
.debate-list-item.is-selected { border-left-color: var(--color-primary); background: var(--color-bg); }
.debate-list-item .d-title { font-weight: 700; font-size: 0.9rem; color: var(--color-primary-ink); }
.debate-list-item .d-meta { font-size: 0.74rem; opacity: 0.65; margin-top: 2px; display: flex; gap: 10px; }

.debate-cover {
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--color-surface-border);
  margin-bottom: 10px;
  flex: 0 0 auto;
}
.debate-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.debate-header {
  flex: 0 0 auto;
  margin-bottom: 8px;
}
.debate-header .d-title { font-size: 1.05rem; font-weight: 700; color: var(--color-primary-ink); display: flex; align-items: center; gap: 8px; }
.debate-header .d-meta { font-size: 0.76rem; opacity: 0.65; margin-top: 2px; }
/* Tilbage-pil ud for overskriften - erstatter det tidligere
   "Tilbage til debat-oversigt"-tekstlink (undgå funktionelle
   tekst-links, se docs/PROJEKT_OVERBLIK.md). */
.back-arrow-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  opacity: 0.6;
  flex: 0 0 auto;
}
.back-arrow-link:hover { opacity: 1; }

.debate-new-comment {
  flex: 0 0 auto;
  margin-bottom: 12px;
}
.debate-new-comment textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.86rem;
  resize: vertical;
}
.debate-new-comment .btn-row { margin-top: 6px; }

.debate-comment-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.debate-root-post {
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-m);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.debate-comment {
  padding: 10px 4px;
  border-bottom: 1px dashed var(--color-surface-border);
}
.debate-comment:last-child { border-bottom: none; }

/* "Nyt"-markering (BYGGET 2026-08-12, FORA/GRUPPER) - et indlæg/svar
   oprettet siden dit sidste besøg, ALDRIG dine egne (se
   mingles_thread_comment_is_new()). Venstre accent-kant (samme
   "diskret men tydelig"-tilgang som notifikations-prikken, .list-item-
   dot) + en lille pille-badge ved siden af datoen - forsvinder af sig
   selv ved næste besøg (klassen sættes ikke, hvis intet er nyt). */
.debate-comment.is-new-comment {
  border-left: 3px solid var(--color-primary);
  padding-left: 9px;
}
.new-comment-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  letter-spacing: 0.02em;
}

.debate-comment-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-s);
  display: block;
  margin-bottom: 6px;
}

.debate-comment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  margin-bottom: 3px;
}
.debate-comment-meta .c-author { font-weight: 700; color: var(--color-primary-ink); }
.debate-comment-meta .c-date { opacity: 0.55; font-size: 0.7rem; }

.debate-comment-text { font-size: 0.86rem; white-space: pre-wrap; line-height: 1.3; }
.debate-comment-text strong { font-weight: 700; }
.debate-comment-text em { font-style: italic; }
.debate-comment-text u { text-decoration: underline; }
.debate-comment-text ul { margin: 4px 0 4px 1.1em; padding: 0; }
.debate-comment-text li { margin-bottom: 2px; }
.debate-comment-text a { color: var(--color-primary); }
/* #<nummer>- og @<profil>-links skal tydeligt SKILLE sig ud fra
   almindelig brødtekst (fremhævet, som eksplicit efterspurgt) - ikke
   bare sitets almindelige link-farve. Delt af FORA/GRUPPER/BESKEDER/
   BEGIVENHEDER, da alle bruger samme mingles_render_markdown_lite(). */
.debate-ref-link,
.debate-mention-link {
  font-weight: 700;
  color: var(--color-primary-ink);
  background: var(--color-surface-border);
  border-radius: 999px;
  padding: 0 6px;
  text-decoration: none;
}
.debate-ref-link:hover,
.debate-mention-link:hover { background: var(--color-primary); color: var(--color-on-primary); }

/* Løbenummer-permalink foran hvert debatindlæg (#1, #2, ... i
   kronologisk oprettelses-rækkefølge - se fora.php). Samme fremhævede
   stil som #-/@-links i selve teksten, for konsistens. */
.debate-comment-number {
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--color-primary-ink);
  background: var(--color-surface-border);
  border-radius: 999px;
  padding: 0 6px;
  text-decoration: none;
  flex: 0 0 auto;
}
.debate-comment-number:hover { background: var(--color-primary); color: var(--color-on-primary); }

/* Markdown-hjælpetekst - delt af FORA/GRUPPER/BEGIVENHEDER/BESKEDER
   (se mingles_markdown_hint_html() i functions.php). ERSTATTER den
   tidligere fire-knappers værktøjslinje (Fed/Kursiv/Understreget/
   Punktliste, public/js/markdown_toolbar.js - begge fjernet 2026-08-11,
   fundet svære at bruge for ikke-tekniske brugere) - ren tekst, ingen
   knapper/JS tilbage. */
.markdown-hint {
  font-size: 0.72rem;
  opacity: 0.6;
  margin: 0 0 4px;
}

/* profile.php's AJAX "Gemt."-besked (BYGGET 2026-08-12, se
   public/js/profile_ajax.js) - selv-forsvindende, dukker op lige under
   den formular der blev gemt. */
.ajax-inline-message {
  font-size: 0.76rem;
  color: var(--color-success);
  font-weight: 600;
  margin-top: 6px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.ajax-inline-message.is-visible { opacity: 1; height: auto; }

/* HEIC-konverteringens midlertidige status-tekst (BYGGET 2026-08-12,
   se public/js/heic_convert.js) - vises lige efter det pågældende
   <input type="file"> mens billedet konverteres, fjernes automatisk
   igen bagefter. */
.heic-convert-status {
  display: inline-block;
  font-size: 0.72rem;
  opacity: 0.7;
  margin-left: 8px;
  font-style: italic;
}
.markdown-hint code {
  background: var(--color-surface-border);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.9em;
}

/* Billede i et debat-indlæg (KUN fora.php - grupper.php beholder sin
   egen .conversation-message-thumb-stil, uændret) - flyder til højre,
   teksten ombryder det ("Word-agtig" ombrydning), afgrænset til KUN
   dette ene indlægs .debate-comment-body via en clearfix, så det
   aldrig påvirker naboindlæg.
   RETTET (fejl-klasse, se PROJEKT_OVERBLIK.md): var oprindeligt
   `overflow: hidden` - det containede floatet korrekt, MEN klippede
   samtidig moderator-tandhjulets svævende dropdown-panel
   (.moderator-controls-panel, position:absolute), som ligger nestet
   herinde via .debate-vote-buttons > .moderator-comment-controls.
   Symptom: klik på tandhjulet i FORA/GRUPPER viste kun en afklippet
   skyggekant, intet indhold - virkede fint på BILLEDVÆG, hvor samme
   dropdown IKKE sidder inde i en overflow:hidden-forælder. `display:
   flow-root` er den moderne erstatning for overflow-clearfix-hacket -
   containeder floats PRÆCIS som overflow:hidden, men klipper IKKE
   overflowende efterkommere. */
.debate-comment-body { display: flow-root; }
.debate-comment-image-float {
  float: right;
  display: block;
  margin: 0 0 8px 12px;
  max-width: 160px;
  transition: max-width 0.15s ease;
}
.debate-comment-image-float img {
  width: 100%;
  display: block;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-surface-border);
  cursor: zoom-in;
}
/* Klik-for-at-ekspandere/minimere (RETTET 2026-08-12 - åbnede
   tidligere billedet i et nyt vindue/fane i stedet, se
   mingles_render_debate_comment()) - samme 'expanded'-toggle-mønster
   som .conversation-message-thumb (beskeder.php/grupper.php), men
   toggler her på selve float-BEHOLDEREN (ikke <img>et), da det er DEN
   der styrer bredden via max-width. */
.debate-comment-image-float.expanded { max-width: 420px; }
.debate-comment-image-float.expanded img { cursor: zoom-out; }
@media (max-width: 480px) {
  .debate-comment-image-float { max-width: 110px; }
  .debate-comment-image-float.expanded { max-width: 260px; }
}

.debate-vote-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
/* Scopet til .debate-vote-btn (IKKE en generel "button"-descendant-
   selector) - en tidligere version brugte ".debate-vote-buttons button",
   som ved et uheld også ramte Svar- og moderator-knapperne (nedarvet
   ned i deres formularer) og overskrev deres baggrund uden at
   overskrive deres (lyse) tekstfarve = usynlig, "blank" knap. Ramte
   KUN op/ned-stemme-knapperne nu, via en dedikeret klasse i stedet
   for element-descendant. */
.debate-vote-btn {
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-surface);
  border-radius: 999px;
  padding: 0.3em 0.65em;
  line-height: 1;
  font-size: 0.74rem;
  cursor: pointer;
}
.debate-vote-btn.is-active { border-color: var(--color-accent); color: var(--color-accent); }
.debate-vote-sum { font-size: 0.76rem; opacity: 0.65; }

.debate-collapsed-label {
  font-size: 0.82rem;
  opacity: 0.65;
  font-style: italic;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px 4px;
}
.debate-comment.is-collapsed .debate-comment-body { display: none; }
.debate-comment:not(.is-collapsed) .debate-collapsed-label { display: none; }

@media (max-width: 880px) {
  .debate-cover { aspect-ratio: 16 / 9; }
}

/* =====================================================================
   GRUPPER (grupper.php)
   ===================================================================== */

.group-list-item .visibility-badge {
  font-size: 0.62rem;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-surface-border);
  margin-left: 6px;
}

/* "Låst"-badge - bruges i BÅDE fora.php's og grupper.php's
   spillekort-grid (.group-card-photo, se nedenfor), derfor IKKE
   scopet til en af dem (i modsætning til .visibility-badge ovenfor,
   som kun findes for grupper). .debate-list-item/.group-list-item er
   historiske klassenavne fra en tidligere to-liste-visning - begge
   sider bruger nu det samme kort-grid i stedet. */
.locked-badge {
  display: inline-block;
  font-size: 0.62rem;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-surface-border);
  margin-left: 6px;
  color: var(--color-error);
  border-color: var(--color-error);
}

/* 🔇-badge på et moderator-skjult indlæg - permanent synligt (ikke
   kun ved klik), så moderator/ejer/admin nemt kan scanne en hel
   debat/gruppe og se hvad der er skjult. */
.moderator-banned-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 1rem;
  line-height: 1;
}

/* Moderator-tandhjul: nu en INLINE dropdown i selve stemme-rækken
   (.debate-vote-buttons), ikke en selvstændig linje/blok som før -
   eksplicit ønske. <details> ligger stadig som elementet (klik på
   tandhjulet folder ud), men det udfoldede panel er position:absolute
   ("svæver" under tandhjulet) i stedet for at skubbe resten af rækken
   ned. margin-left:auto skubber selve tandhjulet helt ud til højre i
   rækken, væk fra stemme-knapperne. */
.moderator-comment-controls {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.moderator-comment-controls summary {
  cursor: pointer;
  opacity: 0.55;
  list-style: none;
  font-size: 0.95rem;
  padding: 2px 4px;
}
.moderator-comment-controls summary::-webkit-details-marker { display: none; }
.moderator-comment-controls summary:hover,
.moderator-comment-controls[open] summary { opacity: 1; }
.moderator-controls-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 5;
  margin-top: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-pop);
  padding: 8px;
  min-width: 190px;
  font-size: 0.76rem;
}
.moderator-controls-panel textarea {
  width: 100%;
  margin-top: 4px;
  font-size: 0.8rem;
}

/* "Svar"-knap: samme linje som thumbs up/down når LUKKET (almindelig
   flex-item i .debate-vote-buttons) - men når ÅBEN, tvinges den til at
   fylde HELE bredden og springe til sin egen linje (flex-basis:100%
   + .debate-vote-buttons' flex-wrap:wrap ovenfor), så selve
   svar-formularen skrives "direkte midt i tråden", IKKE som en
   svævende dropdown (i modsætning til moderator-tandhjulets panel,
   som bevidst ER en dropdown). Ren CSS, ingen JS. */
.debate-reply-toggle { order: 5; }
.debate-reply-toggle summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-primary);
  padding: 0.3em 0.4em;
}
.debate-reply-toggle summary::-webkit-details-marker { display: none; }
.debate-reply-toggle[open] {
  flex: 1 1 100%;
  order: 10;
}
.debate-reply-form {
  margin-top: 6px;
  width: 100%;
}
.debate-reply-form textarea {
  width: 100%;
  font-size: 0.82rem;
  margin-bottom: 6px;
}

/* Indrykkede svar under et top-niveau-indlæg - KUN ét niveau (se
   docs/FORA.md/GRUPPER.md), derfor ingen yderligere indrykning
   nødvendig indeni denne klasse. */
.debate-replies {
  margin-top: 10px;
  padding-left: 16px;
  border-left: 2px solid var(--color-surface-border);
}
.debate-comment.debate-reply { margin-bottom: 10px; }

/* Visuel niveau-hierarki: niveau 0 (rod-indlægget, .debate-root-post)
   har INGEN indrykning; niveau 1 (øvrige top-niveau-indlæg) får et
   LILLE indryk her; niveau 2 (svar, .debate-reply) arver dette lille
   indryk fra sin forælder OG lægger sit eget (.debate-replies
   ovenfor) oveni - giver en naturlig, stigende trappe (0 → lille →
   stort) uden at niveau 2 skal kende til niveau 1's indryk eksplicit. */
.debate-comment:not(.debate-reply) {
  margin-left: 8px;
}

.group-cover {
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--color-surface-border);
  margin-bottom: 10px;
  flex: 0 0 auto;
}
.group-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.group-apply-box {
  flex: 0 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-m);
  padding: 14px;
  text-align: center;
  font-size: 0.86rem;
}
.group-apply-box p { margin: 0 0 10px; opacity: 0.8; }

/* Status-pille ("Din gruppe"/"Medlem"/"Afventer" i grupper.php, "Din
   debat"/"Deltager" i fora.php) - navnet nævner kun "group", men er
   BEVIDST delt mellem begge sider (samme mønster som .locked-badge
   ovenfor). */
.group-status-badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-surface-border);
  margin-left: 8px;
}
.group-status-badge.pending { color: var(--color-accent); border-color: var(--color-accent); }
.group-status-badge.owner { color: var(--color-primary); border-color: var(--color-primary); }
.group-status-badge.member { color: var(--color-success); border-color: var(--color-success); }

/* Spillekort (grupper.php OG fora.php's oversigt, "Grupper"-navnet i
   klasserne er historisk - fora.php genbruger den samme model direkte,
   se mingles_render_debate_card()). Gruppens/debattens forsidebillede
   er låst 4:1 (bredt banner), så et 3:4 portræt-format ville beskære
   det voldsomt. Her: 16:9 og en kompakt krop, så hele kortet forbliver
   forholdsvis kort/fladt (nærmest kvadratisk), i stedet for højt som
   et medlemskort. */
.group-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  flex: 1 1 auto;
  align-content: start;
}
.group-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.group-card:hover { border-color: var(--color-primary); }

.group-card-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-border);
  position: relative;
  overflow: hidden;
}
.group-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Hængelås-badge, øverste HØJRE hjørne af spillekortets billede -
   IKON-ONLY (ingen "Låst"-tekst) i denne kontekst, cirkulær baggrund i
   stedet for basisreglens aflange pille (se .locked-badge selv
   ovenfor, som stadig bruges uændret andre steder, fx debat-/gruppe-
   headeren). */
.group-card-photo .locked-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 0.85rem;
  text-transform: none;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: var(--shadow-pop);
}

/* "Din gruppe/debat"-badge, øverste VENSTRE hjørne - et lille
   cirkulært thumb af DIN EGEN avatar (mingles_avatar_html(), samme
   billede som resten af sitet bruger til dig), IKKE en tekstpille -
   ejerskab er tydeligt nok vist som "det er dig" i stedet for endnu en
   badge-tekst at læse. Kun vist når den indlogtede profil selv er
   opretteren (se mingles_render_group_card()/mingles_render_debate_card()) -
   "Deltager"/"Medlem"/"Afventer" bruger fortsat den almindelige
   tekst-badge i titel-rækkens side-kolonne. */
.group-card-photo .owner-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-pop), 0 0 0 2px var(--color-bg);
}
.group-card-photo .owner-badge .avatar-img,
.group-card-photo .owner-badge .avatar-fallback {
  display: block;
  border-radius: 50%;
}

.group-card-body { padding: 7px 8px; }

/* 3-kolonne "tabel"-layout: ikon | titel (kan ombrydes) | side-kolonne
   (nye-prik/status-badge). CSS Grid i stedet for den tidligere
   flex-wrap-løsning - en flex-wrap-titel ville skubbe ikon/badge NED
   sammen med teksten, når titlen ombrydes over flere linjer. Her er
   ikon og side-kolonne begge låst til RÆKKE 1 (align-items:start),
   uanset hvor mange linjer titel-kolonnen fylder - samme visuelle
   effekt som en punktlistes "hængende indrykning" (ikonet er reelt
   selve "bullet'en"). */
.group-card-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 5px;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--color-primary-ink);
}
.card-title-icon { line-height: 1.3; }
.card-title-text {
  min-width: 0; /* nødvendigt for at teksten reelt kan ombrydes inde i sin grid-kolonne, ikke bare skubbe kolonnen bredere */
  overflow-wrap: break-word;
}
.card-title-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.card-title-side .group-status-badge { margin-left: 0; }
.group-card-meta {
  font-size: 0.68rem;
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.group-card-stats {
  display: flex;
  gap: 10px;
  font-size: 0.68rem;
  opacity: 0.8;
  margin-top: 4px;
}

.group-owner-panel {
  flex: 0 0 auto;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-m);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--color-bg);
}
.group-owner-panel h3 {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  opacity: 0.7;
}
.group-owner-panel details summary {
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 4px 0;
}

.member-mini-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--color-surface-border);
  font-size: 0.82rem;
}
.member-mini-row:last-child { border-bottom: none; }
.member-mini-row .name { flex: 1 1 auto; font-weight: 600; text-decoration: none; }

/* Visuelt skjult, men stadig læst op af skærmlæsere - bruges hvor et
   felt har brug for en rigtig <label> af tilgængeligheds-hensyn, men
   ikke skal fylde visuelt (fx BESKEDER's "Søg modtagere"-felt). */
.sr-only-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* BESKEDER/opret konversation - allerede tilføjet modtager (kun navn + fjern-kryds) */
.msg-recipient-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--color-surface-border);
  font-size: 0.82rem;
}
.msg-recipient-row:last-child { border-bottom: none; }
.msg-recipient-row .name { flex: 1 1 auto; font-weight: 600; }

/* Rødt kryds - genbruger samme visuelle sprog som .pic-delete-badge
   (profile.php), men egen klasse da den bruges udenfor billed-konteksten. */
.remove-x-badge {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-error);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.remove-x-badge:hover { opacity: 0.85; }

/* Søgeresultat - HELE rækken er klikbar (tilføjer modtageren ved klik). */
.msg-recipient-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: var(--radius-s);
  text-decoration: none;
  color: inherit;
}
.msg-recipient-search-row:hover { background: var(--color-bg); }
.msg-recipient-search-info { display: flex; flex-direction: column; min-width: 0; }
.msg-recipient-search-info .name { font-weight: 600; font-size: 0.82rem; }
.msg-recipient-search-info .meta { font-size: 0.72rem; opacity: 0.65; }

.event-participant-row .name { flex: 1 1 auto; font-weight: 600; text-decoration: none; }
.debate-comment-meta .c-author { text-decoration: none; }
.member-mini-row form { display: inline; }
.member-mini-row button {
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-surface);
  border-radius: 999px;
  padding: 0.3em 0.65em;
  line-height: 1;
  font-size: 0.7rem;
  cursor: pointer;
}
.member-mini-row button.approve { border-color: var(--color-success); color: var(--color-success); }
.member-mini-row button.remove { border-color: var(--color-error); color: var(--color-error); }

.group-search-form { display: flex; gap: 6px; margin-bottom: 8px; }
.group-search-form input[type="text"] {
  flex: 1 1 auto;
  padding: 6px 9px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-surface);
  font-size: 0.82rem;
}

.group-edit-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.84rem;
  margin-bottom: 6px;
}

/* =====================================================================
   BEGIVENHEDER (begivenheder.php)
   ===================================================================== */

.event-nav {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.82rem;
}
.event-nav .view-toggle { display: flex; flex-wrap: wrap; gap: 4px; }
.event-nav .event-search-form { display: flex; align-items: center; gap: 6px; }
.event-nav .event-search-form input[type="search"] {
  padding: 0.3em 0.7em;
  border-radius: 999px;
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.76rem;
  min-width: 170px;
}
.event-nav .view-toggle a {
  padding: 0.3em 0.65em;
  border-radius: 999px;
  border: 1.5px solid var(--color-surface-border);
  text-decoration: none;
  color: var(--color-ink);
  font-size: 0.76rem;
}
.event-nav .view-toggle a.active { border-color: var(--color-primary); color: var(--color-primary-ink); font-weight: 700; }
.event-nav .period-nav { display: flex; align-items: center; gap: 8px; }
.event-nav .period-nav a { text-decoration: none; font-weight: 700; padding: 0 4px; }
.event-nav .period-label { font-weight: 600; font-size: 0.8rem; }

/* Dato-visningens klikbare kalender-datofelt (BYGGET 2026-08-12) -
   skal se ud som den almindelige tekst-.period-label ved siden af
   (samme skrifttype/vægt/størrelse), IKKE som et almindeligt
   formular-felt, selvom det TEKNISK er et <input type="date"> - kun
   en dashed underline afslører at den er klikbar/åbner en kalender. */
.period-label-datepicker {
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px dashed var(--color-primary);
}
.period-label-datepicker:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Begivenheds-spillekort (oversigten, version 2 - version 1 arkiveret
   i arkiv/begivenhed/version1). Samme grundmønster som .group-card,
   men eget sæt klasser: en begivenhed har andre felter (sted,
   ugedag+dato, pladser x/y) end en gruppe. */
.event-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  flex: 1 1 auto;
  align-content: start;
}
.event-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.event-card:hover { border-color: var(--color-primary); }

.event-card-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-border);
  position: relative;
  overflow: hidden;
}
.event-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Badges skal være tydelige på en mobilskærm - bevidst større end
   fx .locked-badge, og med god kontrast. */
.event-card-badges {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 6px;
}
.event-card-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.event-card-body { padding: 7px 8px; }
.event-card-title {
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.25;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.event-card-meta {
  font-size: 0.7rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
/* Rent informativ status ("begivenheden ligger i fortiden") - hverken
   positiv, negativ eller "kræver opmærksomhed", derfor bevidst INGEN af
   de fire farvede badge-mønstre fra PROJEKT_OVERBLIK.md - kun en
   neutral, dæmpet tekst-badge. */
.event-past-badge {
  display: inline-block;
  font-size: 0.62rem;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-surface-border);
  opacity: 0.6;
}

/* Dato + evt. "Afholdt"-badge + vejr PÅ SAMME LINJE (event-kort, se
   mingles_render_event_card() i begivenheder.php) - override af
   .event-card-metas ellers nowrap/ellipsis (ville klippe vejr-teksten
   af i stedet for at ombryde den). flex-wrap tillader ombrydning til
   en ekstra linje på smalle kort/mobil, i stedet for at beskære. */
.event-card-date-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.event-card-weather { cursor: default; }

.event-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.event-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.66rem;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-surface-border);
  opacity: 0.8;
}

.event-card-seats {
  font-size: 0.74rem;
  font-weight: 700;
  margin-top: 6px;
}
.event-card-seats.is-open { color: var(--color-success); }
.event-card-seats.is-near-full { color: var(--color-accent); }
.event-card-seats.is-full { color: var(--color-error); }

.event-day-group { margin-bottom: 10px; }
.event-day-group:last-child { margin-bottom: 0; }
.event-day-heading {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-bottom: 4px;
}

.event-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--color-surface-border);
  font-size: 0.82rem;
}
.event-row:last-child { border-bottom: none; }
.event-row .event-time {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  opacity: 0.7;
  width: 3.6em;
}
.event-row .event-info { flex: 1 1 auto; min-width: 0; }
.event-row .event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-row .event-location { font-size: 0.72rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-row .event-status-icons { flex: 0 0 auto; display: flex; gap: 2px; font-size: 0.86rem; }
.event-status-icon { line-height: 1; }

.event-unpublished-badge {
  font-size: 0.62rem;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  margin-left: 6px;
}

.event-row-actions {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.event-row-actions a, .event-row-actions button {
  font-size: 0.68rem;
  text-decoration: none;
  border: none;
  background: none;
  color: var(--color-primary-ink);
  opacity: 0.75;
  cursor: pointer;
  padding: 0;
}
.event-row-actions a:hover, .event-row-actions button:hover { opacity: 1; text-decoration: underline; }

/* Bred hovedboks + smal sideboks (til fx begivenhedsvisning) */
.box-grid--main-side {
  grid-template-columns: 2.3fr 1fr;
  grid-template-rows: 1fr;
}
@media (max-width: 880px) {
  .box-grid--main-side { grid-template-columns: 1fr; }
}

/* Smal venstre sideboks + bred hovedboks (til fx gruppevisning) */
.box-grid--side-main {
  grid-template-columns: 1fr 2.3fr;
  grid-template-rows: 1fr;
}
@media (max-width: 880px) {
  .box-grid--side-main { grid-template-columns: 1fr; }
}

/* "Lækker" begivenheds-hero i den brede boks */
.event-hero-cover {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--color-surface-border);
  margin-bottom: 10px;
  flex: 0 0 auto;
  box-shadow: var(--shadow-card);
}
.event-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.event-hero-title { font-size: 1.3rem; font-weight: 700; color: var(--color-primary-ink); line-height: 1.2; }
.event-hero-meta { font-size: 0.84rem; opacity: 0.72; margin-top: 3px; }
.event-hero-badges { display: flex; gap: 6px; margin-top: 4px; }

.event-participant-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.event-participant-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: 10px 0 4px;
}
.event-participant-section-title:first-child { margin-top: 0; }
/* To-kolonne (kvinder/mænd) opdeling af Tilmeldte/Venteliste (BYGGET
   2026-08-11). RETTET samme dag: de oprindelige tekst-knapper ("Marker
   betalt"/"Frameld"/"Tilmeld") gjorde rækkerne "uoverskuelige" i den
   smalle to-kolonne-boks, ombygget til kompakte, ÉN-LINJES rækker med
   farvede ikon-badges i stedet: [X/✓] avatar+navn [$] - se
   mingles_render_event_participant_column(). BEVIDST bredere
   kolonne-mellemrum (24px, op fra 14px) end sitets andre 2-kolonne-
   grids - ikonerne sidder tæt op ad selve kolonnekanten, og et for
   smalt mellemrum gjorde det let at ramme forkert kolonnes ikon ved en
   fejl (eksplicit brugerfeedback). */
.event-participant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.event-participant-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--color-surface-border);
  font-size: 0.82rem;
}
.event-participant-row:last-child { border-bottom: none; }
.event-participant-row .name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-participant-icon-form { display: inline-flex; flex: 0 0 auto; }

/* Farvede runde ikon-badges (X/✓/$) - erstatter de tidligere aflange
   tekst-knapper ("Frameld"/"Tilmeld"/"Marker betalt"). Samme
   grundform som sitets øvrige `.icon-btn-chip`, men her ALTID
   farvelagt (rød/grøn), da farven selv BÆRER betydningen (rødt kryds =
   fjern, grønt hak = tilføj, mønt = betalingsstatus) - ikke kun en
   neutral knap. `<span>` (ikke-arrangørens statiske "betalt"-visning)
   og `<button>` (arrangørens klikbare toggle) deler samme klasse og
   udseende, kun elementtypen adskiller "kan klikkes"/"kan ikke". */
.event-participant-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: #fff;
}
span.event-participant-icon { cursor: default; }
.event-participant-icon.icon-remove { background: var(--color-error); }
.event-participant-icon.icon-promote { background: var(--color-success); }
.event-participant-icon.icon-paid { background: var(--color-success); }
.event-participant-icon.icon-unpaid { background: var(--color-error); }
/* "+"-ikon på "Tilføj deltager"-søgeresultater - BEVIDST en anden
   farve (lys cyan) end de grønne/røde status-ikoner ovenfor, så
   "tilføj en ny person" ikke visuelt forveksles med de eksisterende
   deltageres status-handlinger. */
.event-participant-icon.icon-add { background: #3fb8af; font-size: 0.9rem; }

/* Børn/Gæster-tilmelding (BYGGET 2026-08-12, se
   EVENT_PARTICIPANT_EXTRAS/migration_030 + docs/BEGIVENHEDER.md). */

/* "(+2B)"/"(+2G)"-badgen efter en deltagers navn (mingles_render_event_participant_row_html()) -
   BEVIDST diskret (samme opacity-tilgang som .c-date) og UDEN detaljer
   (hvem/navne ses i stedet i selve "> Børn"/"> Gæster"-listen
   nedenfor). */
.event-extras-badge {
  font-size: 0.7rem;
  opacity: 0.65;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* "Tilmeldt af X" vises KUN som hover-tooltip (title-attribut på selve
   .event-participant-row, se mingles_render_event_extra_row_html()) -
   ikke som synlig tekst, jf. eksplicit ønske 2026-08-12. */

/* Selve tilføjelses-dialogen - native <dialog>, ingen egen overlay-CSS
   nødvendig (::backdrop styles selve baggrunden). */
.event-extras-dialog {
  border: none;
  border-radius: var(--radius-m);
  padding: 16px 18px;
  max-width: 480px;
  width: calc(100% - 32px);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.event-extras-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.event-extras-dialog h3 { margin: 0 0 10px; font-size: 1rem; }

.event-extras-form-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.event-extras-form-table th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.6;
  padding: 0 4px 4px;
}
.event-extras-form-table td { padding: 0 4px 4px; }
.event-extras-form-table input,
.event-extras-form-table select {
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  box-sizing: border-box;
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.84rem;
}
/* Bred nok til den længste af "Dreng"/"Pige"/"Mand"/"Kvinde" (JS
   skifter teksten dynamisk ud fra børn/gæst, se begivenheder_view.php's
   openDialog()) - "Kvinde" er den længste, ~6.5em er rigeligt uden at
   virke overdimensioneret for de kortere. */
.event-extras-sex-select { min-width: 6.5em; }

.event-extras-dialog-list { max-height: 180px; overflow-y: auto; margin-top: 4px; }
.event-extras-dialog-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  border-bottom: 1px dashed var(--color-surface-border);
  font-size: 0.82rem;
}
.event-extras-dialog-row:last-child { border-bottom: none; }
.event-extras-dialog-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-extras-dialog-row-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--color-error);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.event-extras-dialog-hint { font-size: 0.72rem; opacity: 0.65; margin: 6px 0 0; }
.event-participant-icon:hover { filter: brightness(1.1); }
/* Usynlig pladsholder (primær arrangørs egen række, som ikke kan
   frameldes sig selv) - holder navnet justeret på linje med de andre
   rækkers navne, i stedet for at det "hopper" frem uden ikonet. */
.event-participant-icon-spacer { display: inline-block; width: 22px; flex: 0 0 auto; }

.mini-divider { border: none; border-top: 1px solid var(--color-surface-border); margin: 10px 0; }

.paid-badge {
  font-size: 0.65rem;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.intro-heading {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: 8px 0 4px;
}

.event-type-icon { margin-right: 4px; }

.event-attendee-legend {
  font-size: 0.66rem;
  font-family: var(--font-mono);
  opacity: 0.6;
  margin-left: 6px;
}

.viewprofile-intro {
  font-size: 0.86rem;
  margin: 8px 0 4px;
  opacity: 0.9;
}

.viewprofile-pic-single {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.viewprofile-pic-single img {
  max-width: 100%;
  max-height: 230px;
  min-width: 0;
  flex: 1 1 auto;
  object-fit: contain;
  border-radius: var(--radius-m);
  cursor: zoom-in;
  border: 1px solid var(--color-surface-border);
}
.pic-nav-arrow {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-primary-ink);
  cursor: pointer;
  padding: 4px 6px;
  opacity: 0.65;
}
.pic-nav-arrow:hover { opacity: 1; }
.pic-counter {
  text-align: center;
  font-size: 0.7rem;
  opacity: 0.55;
  margin-top: 4px;
}

/* =====================================================================
   MEDLEMSOVERSIGT: "spillekort"-grid + filterlinje
   ===================================================================== */

.member-filter-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 8px;
  font-size: 0.8rem;
}
.member-filter-bar .filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.member-filter-bar label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.member-filter-bar input[type="search"] {
  padding: 6px 10px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-surface-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.8rem;
  min-width: 170px;
  flex: 0 1 220px;
}
.member-filter-bar .btn { flex: 0 0 auto; }
.member-filter-count { font-size: 0.74rem; opacity: 0.6; margin-left: auto; }

.member-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  flex: 1 1 auto;
  align-content: start;
}

.member-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.member-card:hover { border-color: var(--color-primary); }

.member-card-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--color-surface-border);
  position: relative;
  overflow: hidden;
}
.member-card-photo img,
.member-card-photo .avatar-fallback {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  object-fit: cover;
  display: block;
}

.member-card-online-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
}
.member-card-online-dot.online { background: #3f8f5e; }
.member-card-online-dot.offline { background: #b3413a; }

.member-card-body { padding: 7px 8px; }
.member-card-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-primary-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-card-meta {
  font-size: 0.68rem;
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .member-card-badges fjernet (2026-08-10) - MEDLEMMER's kort bruger nu
   mingles_status_icons_html()'s eget "status-icon-row"-div direkte, for
   ensartet ikon-rækkefølge/-styling med resten af sitet, se medlemmer.php. */

.nav-dot {
  display: none;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9436f;
  margin-left: auto;
}

.list-item-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9436f;
  vertical-align: middle;
}

/* =====================================================================
   BESKEDER (beskeder.php) - mail-inspireret konversationsliste
   ===================================================================== */

.conversation-list-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 8px 6px;
  border-bottom: 1px dashed var(--color-surface-border);
}
.conversation-list-item:hover { background: var(--color-bg); }
.conversation-list-item.is-selected {
  background: var(--color-bg);
  border-left: 3px solid var(--color-primary);
  padding-left: 3px;
}
.conversation-list-people {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversation-list-subject {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-primary-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.conversation-list-time {
  font-size: 0.68rem;
  opacity: 0.55;
  margin-top: 2px;
}

.conversation-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.conversation-message-main { flex: 1 1 auto; min-width: 0; }
.conversation-message-thumb { flex: 0 0 auto; }
.conversation-message-thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-surface-border);
  cursor: zoom-in;
  display: block;
  transition: width 0.15s ease, height 0.15s ease;
}
.conversation-message-thumb img.expanded {
  width: 260px;
  height: 260px;
  cursor: zoom-out;
}

/* SMS/Messenger-agtig besked-liste (beskeder.php - se
   mingles_render_conversation_message()): egne beskeder ("udgående")
   højrestillet, andres ("indgående") venstrestillet, hver højst 80% af
   listens bredde. Listen selv får en let baggrundsfarve (--color-bg,
   samme som sidens egen baggrund UDENFOR boksene), så de HVIDE bobler
   (--color-surface, samme farve som .box selv) tydeligt skiller sig ud
   - ellers ville boble og baggrund være identisk hvide og umulige at
   skelne, da .box i forvejen er hvid. */
.conv-msg-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius-s);
  padding: 10px;
}
.conv-msg-row { display: flex; margin-bottom: 12px; }
.conv-msg-row:last-child { margin-bottom: 0; }
.conv-msg-row--in  { justify-content: flex-start; }
.conv-msg-row--out { justify-content: flex-end; }
.conv-msg-col { max-width: 80%; min-width: 0; }
/* Besked-headeren (afsender+dato) forbliver til VENSTRE i selve
   beskeden, uanset om beskeden selv er skubbet til højre (udgående) -
   ALDRIG centreret/højrestillet - og ligger BEVIDST uden for selve
   boblen nedenfor (kun boblen har baggrundsfarve). */
.conv-msg-col .debate-comment-meta { text-align: left; margin-bottom: 3px; }
/* "Anmeld"-flaget (KUN på MODTAGNE beskeder, se
   mingles_render_conversation_message()) sidder INDE I selve
   meta-rækken (.debate-comment-meta er allerede display:flex, se
   ovenfor) - margin-left:auto skubber det helt ud til højre kant.
   Rækken har samme bredde som boblen nedenfor, så flaget visuelt
   lander ud for boblens øverste højre hjørne, jf. eksplicit ønsket
   placering. .icon-btn-chip er allerede 30px/rund - her nedskaleret
   lidt (22px) så den ikke konkurrerer visuelt med navn/dato. */
.conv-msg-report-form { margin-left: auto; }
/* Rødt flag (eksplicit ønske) - farve/advarsels-sproget matcher
   PROJEKT_OVERBLIK.md's regel "rød = advarsel/farligt/slet", samme som
   fx .btn-danger/.locked-badge bruger andre steder.
   RETTET 2026-08-11: den transparente/nedtonede udgave (opacity 0.6,
   ingen baggrund) blev rapporteret som "for usynlig" - flaget skal
   fremhæves, ikke gemmes væk. Har nu samme lyserøde rund-chip-baggrund
   som fx .flash-error (var(--color-error-bg)), fuld opacity, og er
   lidt større igen (24px) for bedre synlighed/tryk-mål. */
.conv-msg-report-form .icon-btn-chip {
  width: 24px;
  height: 24px;
  background: var(--color-error-bg);
  color: var(--color-error);
  opacity: 1;
}
.conv-msg-report-form .icon-btn-chip:hover { background: var(--color-error); color: var(--color-on-primary); opacity: 1; }
.conv-msg-bubble {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-m);
  padding: 8px 10px;
}

/* =====================================================================
   HJEM/DASHBOARD (mainpage.php) - 6 opsummeringsbokse i box-grid--6
   ===================================================================== */
.dash-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.dash-card:hover { border-color: var(--color-primary); }

.dash-card-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dash-card-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-border);
  color: var(--color-primary);
}
.dash-card-titles { flex: 1 1 auto; min-width: 0; }
.dash-card-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-primary-ink);
  line-height: 1.2;
}
.dash-card-subtitle {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: 1px;
}
.dash-card-count {
  flex: 0 0 auto;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary-ink);
}

.dash-card-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.dash-card-empty { font-size: 0.78rem; opacity: 0.6; }

.dash-list { display: flex; flex-direction: column; gap: 6px; }
.dash-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.78rem;
}
.dash-list-icon { flex: 0 0 auto; opacity: 0.6; margin-top: 1px; }
.dash-list-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-list--messages .dash-list-text strong { color: var(--color-primary-ink); margin-right: 4px; }
.dash-list-time { flex: 0 0 auto; font-size: 0.68rem; opacity: 0.55; }

.dash-thumb-row { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-s);
  overflow: hidden;
  border: 1px solid var(--color-surface-border);
  display: block;
}
.dash-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-thumb-row--avatars .dash-avatar { flex: 0 0 auto; }

/* "Flere"-pladsholder (BYGGET 2026-08-12, se
   public/js/dashboard_fit.js) - viser en "tom plads" med ". . ." i
   stedet for de sidste elementer, hvis boksens plads slipper op.
   Skjult som udgangspunkt (HTML `hidden`-attributten) - de eksplicitte
   `[hidden]`-regler nedenfor er nødvendige fordi de tilsvarende
   basis-klasser (`.dash-thumb`/`.dash-list li`) allerede selv sætter
   `display`, som ellers ville vinde over browserens indbyggede
   `[hidden]{display:none}` (samme cascade-oprindelse, lige
   specificitet - kun en MERE specifik regel her kan være sikker på at
   vinde). */
.dash-more-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  font-weight: 700;
  letter-spacing: 2px;
  background: var(--color-surface-border);
  color: var(--color-ink);
}
.dash-thumb.dash-more-indicator[hidden],
.dash-avatar.dash-more-indicator[hidden] { display: none; }
li.dash-more-indicator[hidden] { display: none; }
li.dash-more-indicator .dash-list-text { text-align: center; }

.dash-card-summary {
  font-size: 0.74rem;
  opacity: 0.7;
  margin-top: 8px;
}

.dash-card-footer {
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 8px;
}

/* =====================================================================
   Lokations-autocomplete (BEGIVENHEDER "Sted"-felt, Geoapify) - se
   public/js/location_autocomplete.js. `.location-autocomplete-wrap`
   skal omslutte tekstfeltet, position:relative, så dropdown-listen kan
   positioneres direkte under det.
   ===================================================================== */
.location-autocomplete-wrap { position: relative; }
.location-autocomplete-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-pop);
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px;
}
.location-autocomplete-item {
  padding: 8px 10px;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: 0.85rem;
}
.location-autocomplete-item:hover,
.location-autocomplete-item.is-active {
  background: var(--color-surface-border);
}
.location-autocomplete-hint {
  font-size: 0.72rem;
  opacity: 0.6;
  margin: 4px 0 0;
}