.grunnet-arkiv {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: #f7f7f9;
  border-radius: 12px;
  padding: 20px 20px 24px;
  margin: 10px 0 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  color: #222;
}

/* HEADER */
.grunnet-arkiv-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.grunnet-arkiv-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #111827;
}

.grunnet-arkiv-header p {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.grunnet-arkiv-result-count-wrapper {
  display: flex;
  justify-content: center;
  margin-top: -50px;
  padding-bottom: 20px;
}

.grunnet-arkiv-result-count {
  font-weight: 600;
  font-size: 15px;
  color: #222;
}

/* === KORT SOM LINK === */
.grunnet-arkiv-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: 0;
  overflow: hidden;
}

.grunnet-arkiv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.grunnet-arkiv-card-img-full {
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.grunnet-arkiv-admin-tabs a {
  display: inline-block;
  padding: 8px 14px;
  margin-right: 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111;
  text-decoration: none;
  font-size: 13px;
}

.grunnet-arkiv-admin-tabs a.is-active {
  background: #111;
  color: #fff;
}

.grunnet-arkiv-card-img-full img {
  width: 100%;
  height: auto;
  /* 🔑 IKKE 100% */
  min-height: 100%;
  /* 🔑 fyld hvis for lav */
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .grunnet-arkiv-card-img-full {
    height: 220px;
  }
}

/* === TEKST-OMRÅDE === */
.grunnet-arkiv-card-body {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 0px; /* mindre afstand mellem linjer */
}

.grunnet-arkiv-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.grunnet-arkiv-card-name-row {
  display: flex;
  align-items: flex-start;
  /* 🔑 VIGTIG */
  gap: 8px;
}

.grunnet-arkiv-speaker-wrap {
  position: absolute;
  /* placering: nederst til højre */
  bottom: 10px;
  right: 10px;
  /* skub skråt ud fra hjørnet */
  transform: translate(6px, 6px) rotate(-8deg);
  line-height: 0;
  z-index: 5;
  pointer-events: none;
  /* klik går stadig på kortet */
}

.grunnet-arkiv-card-meta {
  font-size: 0.65rem;
  color: #4b5563;
  line-height: 1.1;
}

/* === SPEAKER NEDERST === */
.grunnet-arkiv-card-footer.speaker-only {
  padding: 8px 14px 12px;
  justify-content: flex-end;
}

/* ========================================= SMAL BREDDE PÅ FILTER-TOGGLES ========================================= */
.grunnet-filter-toggle {
  max-width: 200px !important;
  min-width: 200px !important;
  /* 👈 STYR LÆNGDEN HER */
  margin-left: auto;
  margin-right: auto;
  grid-column: 1 / -1;
}

/* Titel-tekst */
.grunnet-filter-title {
  font-size: 13px !important;
}

/* Hover – mindre “løft” */
.grunnet-filter-toggle:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04) !important;
  transform: none !important;
}

/* ========================================= FILTER ACCORDION – FASTE KNAPPER + INDHOLD UNDER ========================================= */
/* KUN de 4 under-filters */
.grunnet-filter-toggle:not([data-target="filter-all"]) {
  grid-column: 1 / -1;
}

/* Alt collapsible-indhold: altid under knapper */
.grunnet-filter-collapsible {
  grid-column: 1 / -1;
  width: 100%;
}

/* =============================== AKTIV FILTER-KNAP (mørkere) =============================== */
/* Kun de 4 under-filtre – ikke "Filtrer" */
.grunnet-filter-toggle.is-open:not([data-target="filter-all"]) {
  background: #fafafa;
  /* lidt mørkere */
  border-color: #c7c7c7;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.grunnet-filter-stack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  /* 👈 LUFT MELLEM FELTER */
  padding: 14px 18px;
  margin: 12px 0;
  background: #fafafa;
  /* lidt mørkere */
  border: 1px solid #c7c7c7;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #2b2b2b;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.grunnet-filter-stack {
  cursor: default;
  /* inputs skal ikke føles som knap */
}

@media (max-width: 768px) {
  .grunnet-filter-stack {
    flex-wrap: wrap;
    width: 100%;
    gap: 16px 20px;
    /* række / kolonne */
  }
}

/* ====================================================== MOBIL < 460px – FILTER RESULTATER UNDER KNAPPEN ====================================================== */
@media (max-width: 485px) {
  /* Collapsible indhold bliver kolonne */
  .grunnet-filter-collapsible.is-open {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px;
  }

  /* Selve resultaterne (værdierne) */
  .grunnet-filter-stack {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 12px !important;
    margin-top: 8px;
  }

  /* Hvert filter fylder hele bredden */
  .grunnet-filter-stack .grunnet-arkiv-filter {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ====================================================== MOBIL < 485px – RESULTATER LIGE UNDER DERES KNAP ====================================================== */
@media (max-width: 485px) {
  /* Slå "smid-alt-nederst" fra på mobil */
  .grunnet-filter-collapsible {
    order: initial !important;
  }

  /* Sørg for at collapsible ligger direkte efter sin toggle */
  .grunnet-filter-toggle + .grunnet-filter-collapsible {
    display: none;
  }

  .grunnet-filter-toggle.is-open + .grunnet-filter-collapsible {
    display: block !important;
    width: 100%;
    margin-top: 8px;
  }

  /* Indholdet under knappen */
  .grunnet-filter-stack {
    margin: 0;
    padding: 12px 14px;
    gap: 12px;
  }
}

/* ====================================================== MOBIL < 485px – 2 FELTER VED SIDEN AF HINANDEN ====================================================== */
@media (max-width: 485px) {
  /* Filter-indhold = grid i stedet for kolonne */
  .grunnet-filter-stack {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    /* 👈 2 kolonner */
    gap: 12px;
  }

  /* Felter må fylde hele deres grid-celle */
  .grunnet-filter-stack .grunnet-arkiv-filter {
    max-width: none !important;
    width: 100% !important;
  }

  /* Hvis der KUN er ét felt (fx checkbox) → fuld bredde */
  .grunnet-filter-stack .grunnet-arkiv-filter:only-child {
    grid-column: 1 / -1;
  }
}

/* ====================================================== 🔥 MOBIL < 485px – ENDELIG KORREKT 2-KOLONNE LAYOUT ====================================================== */
@media (max-width: 485px) {
  /* Tving grid – fjern AL flex-adfærd */
  .grunnet-filter-stack {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    /* dræb flex-rester */
    justify-content: unset !important;
    align-items: unset !important;
    flex-direction: unset !important;
  }

  /* Inputs fylder hele kolonnen */
  .grunnet-filter-stack .grunnet-arkiv-filter {
    width: 100% !important;
    max-width: none !important;
  }

  /* Hvis der kun er ét felt → fuld bredde */
  .grunnet-filter-stack .grunnet-arkiv-filter:only-child {
    grid-column: 1 / -1;
  }
}

/* ====================================================== ✅ MOBIL < 485px – GØR FELTER SMALERE (2 KAN VÆRE DER) ====================================================== */
@media (max-width: 485px) {
  /* Grid med 2 lige kolonner */
  .grunnet-filter-stack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* 👇 DET VIGTIGE: fjern pixel-bredder */
  .grunnet-filter-stack .grunnet-arkiv-filter {
    width: 100% !important;
    max-width: none !important;
  }

  .grunnet-filter-stack input,
  .grunnet-filter-stack select {
    width: 100% !important;
    max-width: none !important;
  }

  /* Hvis kun ét felt → fuld bredde */
  .grunnet-filter-stack .grunnet-arkiv-filter:only-child {
    grid-column: 1 / -1;
  }
}

.grunnet-filter-toggle {
  max-width: 200px !important;
  min-width: 200px !important;
}

/* ===================================== FIX: KUN "Kun profiler med stemme" ===================================== */
.grunnet-filter-stack .grunnet-arkiv-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 👈 LUFT MELLEM CHECKBOX OG TEKST */
  padding-right: 18px;
  /* 👈 LUFT IND MOD SELECTS */
  white-space: nowrap;
  /* 👈 bryder ikke teksten */
}

.stemme-guide-box {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 16px 18px;
    background: #fdfdff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.grunnet-arkiv--flat {
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.grunnet-arkiv-filter {
  display: flex;
  align-items: center; /* ← STABIL */
  width: 100%;
  margin-bottom: 12px;
}

.grunnet-arkiv-filter label {
  font-size: 0.77rem;
  font-weight: 600;
  color: #000000;
}

.grunnet-filter-collapsible {
  order: 999;
  /* tvinges under */
}

.grunnet-arkiv-filter input[type="text"],
.grunnet-arkiv-filter select {
  border-radius: 6px;
  border: 1px solid #d1d5db;
  padding: 5px 8px;
  font-size: 0.8rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* 🔥 VIGTIGT: MØRK TEKST */
  color: #111827;
  /* selve teksten */
  background-color: #fff;
}

/* ========================================= 🔥 ARKIV – INPUT & PLACEHOLDER (ALLE TYPER) ========================================= */
.grunnet-arkiv-filter input {
  color: #111827 !important;
  background-color: #ffffff;
}

/* Placeholder */
.grunnet-arkiv-filter input::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* Firefox */
.grunnet-arkiv-filter input::-moz-placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* Når der skrives */
.grunnet-arkiv-filter input:focus,
.grunnet-arkiv-filter input:not(:placeholder-shown) {
  color: #111827 !important;
}

/* checkbox label */
.grunnet-arkiv-checkbox-label {
  font-size: 0.8rem;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* FILTER ACTIONS */
.grunnet-arkiv-filters-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
}

.grunnet-arkiv-filters-actions-left,
.grunnet-arkiv-filters-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ===================================== FIX: ENS RUNDE INPUTS I ARKIV ===================================== */
.grunnet-arkiv-filter input[type="text"],
.grunnet-arkiv-filter select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 8px !important;
  /* 👈 TVING RUNDE HJØRNER */
}

/* KNAPPER – UPGRADED (FORCE) */
.grunnet-arkiv-btn {
  border-radius: 999px !important;
  border: none !important;
  padding: 8px 30px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  background: #000000 !important;
  color: #ffffff !important;

  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: relative !important;
  overflow: hidden !important;

  transition:
    transform 0.15s ease !important,
    box-shadow 0.2s ease !important,
    color 0.2s ease !important;
}

/* ✨ hover */
.grunnet-arkiv-btn:hover {
  transform: translateY(-2px) !important;
  color: #ffffff !important;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.18) !important,
    0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* 👇 klik */
.grunnet-arkiv-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}

/* ✨ shine */
.grunnet-arkiv-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -80% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  ) !important;
  transform: skewX(-20deg) !important;
}

/* animation */
.grunnet-arkiv-btn:hover::after {
  left: 120% !important;
  transition: left 0.6s ease !important;
}

/* RESET KNAP */
.grunnet-arkiv-btn-reset {
  background: #e5e7eb !important;
  color: #374151 !important;
}

.grunnet-arkiv-btn-reset:hover {
  background: #d1d5db !important;
}

/* SUMMARY */
.grunnet-arkiv-summary {
  font-size: 0.8rem;
  color: #e96e1d;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

/* GRID */
.grunnet-arkiv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 på række */
  grid-template-rows: repeat(3, auto);
  /* 3 nedad */
  gap: 14px;
  justify-items: center;
  overflow: hidden;
  /* 🔑 skjul resten */
}

/* CARDS */
.grunnet-arkiv-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 0px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 250px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
}

.grunnet-arkiv-card-header {
  display: flex;
  gap: 10px;
}

/* Option-tekst */
.grunnet-arkiv-filter select option {
  color: #111827;
}

/* ====================================================== MOBIL < 470px – PROFILER SKAL UDNYTTE PLADSEN ====================================================== */
@media (max-width: 470px) {
  /* Grid: én kolonne, ingen centreret luft */
  .grunnet-arkiv-grid {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    gap: 12px;
  }

  /* Card: fyld hele bredden */
  .grunnet-arkiv-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 12px;
  }

  /* Billede lidt lavere, mere kompakt */
  .grunnet-arkiv-card-img-full {
    height: 300px;
  }

  /* Indre spacing lidt strammere */
  .grunnet-arkiv-card-body {
    padding: 10px 12px 8px;
  }

  /* Fjern evt. implicit centrering */
  .grunnet-arkiv-card,
  .grunnet-arkiv-card * {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Under 1196px */

@media (max-width: 1196px) {
  .select-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    outline: none !important;
    padding-left: 19px;
    padding-right: 35px;

    font-size: 16px;
    border-radius: 0;

    min-width: 235px;
    cursor: pointer;
  }

  .grunnet-arkiv-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* skjul profiler efter nr 8 */
  .grunnet-arkiv-grid .grunnet-arkiv-card:nth-child(n + 9) {
    display: none;
  }
}

/* ===================================================== MOBIL: FLET STEMMEPRØVER + SKJUL RESTEN AF HØJRE KOLONNE ===================================================== */
@media (max-width: 990px) {

  /* 🔥 FIX: ram ALLE grids – også når admin ændrer DOM */
  .grunnet-profile-details div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Højre kolonne opløses */
  .profile-right-column {
    display: contents;
  }

  /* Stemmeprøver altid øverst */
  .profile-voices-box {
    order: -3;
    margin-bottom: 32px;
  }

  /* Erfaring */
  .profile-right-column table:nth-of-type(2) {
    order: 0;
  }

  /* Beskæftigelse */
  .profile-right-column table:nth-of-type(3) {
    order: 0;
  }

  /* Færdigheder */
  .profile-right-column table:nth-of-type(4) {
    order: 0;
  }
}

@media (max-width: 990px) {

  .grunnet-profile-details table:not(.profile-voices-box table) {
    width: 100% !important;
    display: block;
  }

  .grunnet-profile-details table:not(.profile-voices-box table) tbody,
  .grunnet-profile-details table:not(.profile-voices-box table) tr {
    display: block;
    width: 100%;
  }

}

/* ========================================= TEKSTSEKTIONER = ÉN KOLONNE (IKKE GRID) Erfaring / Beskæftigelse / Færdigheder ========================================= */
@media (max-width: 470px) {
  .grunnet-profile-details table:not(:has(.paddingLeftHigh)) tr {
    display: block !important;
  }
}

/* ====================================================== MOBIL < 470px – 2 KOLONNER + STREGER ====================================================== */
@media (max-width: 470px) {
  .grunnet-profile-details {
    padding: 20px 14px 22px !important;
    overflow-x: hidden;
  }

  /* ❌ DISABLED – ødelægger tabel layout */
  /*
  .grunnet-profile-details table tr {
    display: grid;
    grid-template-columns: 42% 58%;
  }
  */

  /* INGEN STREG UNDER OVERSKRIFT */
  .grunnet-profile-details table tr:first-child {
    display: table-row;
    border-bottom: none;
  }

  /* CELLER */
  .grunnet-profile-details td {
    padding: 4px 10px !important;
    border: none !important;
  }

  /* LABEL-KOLONNE */
  .grunnet-profile-details .paddingLeftHigh {
    font-weight: 600;
    font-size: 13px;
    color: #111827;
    white-space: normal !important;
    border-right: 1px solid #e5e7eb;
    /* 🔸 lodret streg */
    padding-right: 10px !important;
  }

  /* VÆRDI-KOLONNE */
  .grunnet-profile-details td:not(.paddingLeftHigh) {
    font-size: 14px;
    color: #111827;
    padding-left: 10px !important;
    word-break: break-word;
  }

  /* SIDSTE RÆKKE UDEN STREG */
  .grunnet-profile-details table tr:last-child {
    border-bottom: none;
  }

  /* ====================================================== FIX: TEKSTSEKTIONER SKAL FYLDE HELE BREDDEN (ERFARING / BESKÆFTIGELSE / FÆRDIGHEDER) ====================================================== */
  .grunnet-profile-details table td p {
    max-width: none;
    width: 100%;
  }
}

/* ====================================================== 🔥 ENDGYLDIG FIX: STEMMEPRØVER = FULD BREDDE (overstyrer grid-reglen der vinder ellers) ====================================================== */

.grunnet-arkiv-card-img-wrap {
  width: 110px;
  height: 147px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grunnet-arkiv-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grunnet-arkiv-card-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.grunnet-arkiv-card-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #111827;
}

.grunnet-arkiv-card-meta {
  font-size: 0.78rem;
  color: #4b5563;
}

.grunnet-arkiv-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.grunnet-arkiv-tag {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
}

/* FOOTER */
.grunnet-arkiv-card-footer {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.grunnet-arkiv-link {
  font-size: 0.75rem;
  color: #111827;
  text-decoration: none;
  font-weight: 600;
}

.grunnet-arkiv-link:hover {
  text-decoration: underline;
}

.grunnet-arkiv-voice-icon {
  width: auto;
  height: auto;
  display: block;
}

/* PAGINATION */
.grunnet-arkiv-pagination {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.grunnet-arkiv-pagination-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: #ffffff;
  padding: 8px 12px;
}

.grunnet-arkiv-page-link,
.grunnet-arkiv-page-current {
  font-size: 0.78rem;
  padding: 3px 9px;
  border-radius: 999px;
  text-decoration: none;
}

.grunnet-arkiv-page-link {
  color: #4b5563;
  font-size: 15px;
}

.grunnet-arkiv-page-link:hover {
  background: #e5e7eb;
}

.grunnet-arkiv-page-current {
  background: #111827;
  color: #ffffff;
  font-weight: 600;
}

.grunnet-arkiv-page-disabled {
  opacity: 0.4;
  cursor: default;
  padding: 3px 9px;
}

/* ADMIN LOGIN BOKS */
.grunnet-arkiv-login-container {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.grunnet-arkiv-login-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

.grunnet-arkiv-login-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

.grunnet-arkiv-login-input {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 0.85rem;
  width: 180px;
}

.grunnet-arkiv-login-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.grunnet-arkiv-login-btn:hover {
  background: #4b5563;
}

.grunnet-arkiv-login-error {
  color: #b91c1c;
  margin-top: 6px;
  font-size: 0.8rem;
}

body.page-login-pa-din-profil-her #main .container,
body.page-login-pa-din-profil-her #main .container-fluid {
  padding-top: 0 !important;
}

.persondata-accept {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ====================================================== GRUNNET ADRESSELISTE – MODERNE ADMIN LOOK (SCOPET – RAMMER KUN ADRESSELISTE) ====================================================== */
.grunnet-adresseliste {
  max-width: 1100px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ===================================== YDRE CARD (samler sektioner) ===================================== */
.grunnet-adresseliste-card {
  background: transparent;
  /* 🔑 IKKE rød/beige */
  border-radius: 22px;
  padding: 0;
  /* 🔑 indre cards styrer padding */
  border: none;
  box-shadow: none;
}

/* ===================================== INDRE HVIDE CONTAINERS (DET DU VIL HAVE) ===================================== */
.grunnet-adresseliste-inner {
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 30px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 18px;
}

/* ===================================== HEADER ===================================== */
.grunnet-adresseliste-header h1 {
  font-size: 1.45rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #111827;
}

.grunnet-adresseliste-header .warning {
  color: #dc2626;
  font-weight: 600;
}

.grunnet-adresseliste-header p {
  font-size: 0.9rem;
  color: #4b5563;
  margin: 0;
}

.grunnet-adresseliste-count {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  font-size: 0.75rem;
  background: #f3f4f6;
  border-radius: 999px;
  color: #374151;
}

/* ===================================== PROFIL-LISTER – RESPONSIVE GRID ===================================== */
.grunnet-adresseliste-emails {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
  display: grid;
  gap: 8px 32px;
  /* række / kolonne */
}

.grunnet-accept-politik {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 32px;
  /* række / kolonne */
}

/* Ét profil-element */
.grunnet-adresseliste-emails li {
  margin: 0;
  padding: 2px 0;
}

/* Link */
.grunnet-adresseliste-emails a {
  text-decoration: none;
  color: #111827;
  font-size: 0.85rem;
}

.grunnet-adresseliste-emails a:hover {
  text-decoration: underline;
}

/* MOBIL: én kolonne */
@media (max-width: 640px) {
  .grunnet-adresseliste-emails {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ===================================== FIX: LUFT UNDER HEADER I ADRESSELISTE-CARDS ===================================== */
.grunnet-adresseliste-header {
  margin-top: 54px !important;
  /* 🔑 DETTE MANGLER */
}

/* ===================================== ADRESSELISTE: H3 SKAL VÆRE BOLD (KUN DENNE SIDE) ===================================== */
.grunnet-adresseliste h3 {
  font-weight: 700;
}

/* ===================================== ACTION BAR (egen hvid container) ===================================== */
.grunnet-adresseliste-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* =========================== LIGHTBOX – TVUNGEN OVERLAY =========================== */
.image-lightbox {
  position: fixed;
  inset: 0;
  /* top:0 right:0 bottom:0 left:0 */
  background: rgba(0, 0, 0, 0.85);
  display: none;
  /* skjult som default */
  align-items: center;
  justify-content: center;
  z-index: 999999;
  /* OVER ALT */
}

/* Aktiv */
.image-lightbox.active {
  display: flex;
}

/* Selve billedet */
.image-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ===================================== FEJL: CHECKBOX-GRUPPER (KATEGORI / SPROG) ===================================== */
.kategori-fejl {
  border: 2px solid #dc2626;
  background: #fff5f5;
  border-radius: 12px;
  padding: 12px 14px;
}

/* Sørg for at boksen fylder korrekt */
.kategori-box {
  margin-top: 8px;
}

/* Gør teksten lidt tydeligere ved fejl */
.kategori-fejl label {
  color: #111827;
}

/* Luk-knap */
.image-lightbox .lightbox-close {
  position: fixed;
  top: 24px;
  right: 28px;
  font-size: 42px;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
  z-index: 1000000;
}

.image-lightbox .lightbox-close:hover {
  opacity: 0.75;
}

.grunnet-adresseliste-actions span {
  font-size: 0.8rem;
  color: #6b7280;
}

/* BUTTON */
.grunnet-adresseliste-btn {
  border-radius: 999px;
  border: none;
  padding: 8px 18px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: #111827;
  color: #ffffff;
}

.grunnet-adresseliste-btn:hover {
  background: #4b5563;
}

/* ===================================== CONTENT CARD (textarea) ===================================== */
.grunnet-adresseliste-content {
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 30px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.05);
}

/* TEXTAREA */
.grunnet-adresseliste textarea {
  width: 100%;
  min-height: 420px;
  resize: vertical;
  padding: 16px;
  font-family: Consolas, Monaco, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  border-radius: 14px;
  border: 1px solid #d1d5db;
  background: #fafafa;
}

.grunnet-adresseliste textarea:focus {
  outline: none;
  border-color: #111827;
  background: #ffffff;
}

/* NOTE */
.grunnet-adresseliste-note {
  margin-top: 14px;
  font-size: 0.75rem;
  color: #6b7280;
}

/* ===================================== EMAIL-LISTE – INGEN SCROLL, VOKSER NEDAD ===================================== */
.grunnet-adresseliste-emails {
  white-space: normal;
  /* 🔑 ALDRIG nowrap */
  word-break: break-all;
  /* lange emails brydes */
  line-height: 1.6;
  font-family: Consolas, Monaco, monospace;
  font-size: 12.5px;
  color: #111827;
}

/* Gør markering pæn */
.grunnet-adresseliste-emails::selection {
  background: #111827;
  color: #ffffff;
}

/* ===================================== MOBIL ===================================== */
@media (max-width: 640px) {
  .grunnet-adresseliste-inner,
  .grunnet-adresseliste-content {
    padding: 22px 18px;
    border-radius: 16px;
  }

  .grunnet-adresseliste-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .grunnet-adresseliste-btn {
    width: 100%;
  }
}

/* ===================================== Privatlivspolitiken.php CSS ===================================== */
/* RESET – KUN INDEN I BOKSEN */
.content-box,
.content-box * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* WRAPPER (kun layout, ingen typografi) */
.page-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* CARD */
.content-box {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 40px;
  color: #222;
  line-height: 1.7;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

/* TYPOGRAPHY – KUN I BOKSEN */
.content-box h1 {
  font-size: 2rem;
  margin-bottom: 24px;
  font-weight: 700 !important;
}

.content-box h2 {
  font-size: 1.3rem;
  margin-top: 32px;
  margin-bottom: 12px;
  font-weight: 700 !important;
}

.content-box p {
  margin-bottom: 16px;
}

/* CONTACT BLOCK – KUN I BOKSEN */
.content-box .contact {
  background: #f8f9fb;
  border-left: 4px solid #d0d7de;
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 6px;
}

/* SPACING HJÆLPER */
.content-box .spacer {
  height: 8px;
}

/* RESPONSIVE – KUN I BOKSEN */
@media (max-width: 600px) {
  .content-box {
    padding: 24px;
  }

  .content-box h1 {
    font-size: 1.6rem;
  }
}

/* =============================== FILTER TOGGLES (Sprog / Stemme) =============================== */
.grunnet-filter-toggle {
  grid-column: 1 / -1;
  margin-top: 12px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  color: #111827;
  user-select: none;
  position: relative;
  padding-right: 18px;
  /* plads til pil */
}

/* Når åben → pil op */
.grunnet-filter-toggle.is-open::after {
  transform: translateY(-50%) rotate(-135deg);
}

/* Collapsible container */
.grunnet-filter-collapsible {
  display: none;
  margin-top: 6px;
  gap: 10px 12px;
}

@media (min-width: 1400px) {
  .grunnet-arkiv-filter {
    max-width: 180px;
  }
}

@media (max-width: 1260px) {
  .grunnet-filter-toggle {
    min-width: 0;
    width: 100%;
  }
}

/* Collapsible: fold ud hvis der er plads */
.grunnet-filter-collapsible.is-open {
  display: flex;
  /* 🔑 AKTIVER FLEX */
  flex-wrap: wrap;
  /* 🔑 FOLD UD HVIS PLADS */
  gap: 30px;
  /* matcher top-filtre */
}

/* ====================================================== ADD PROFILE – ISOLERET & ENS INPUT-STYLING ====================================================== */
.grunnet-addprofile {
  position: relative;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: white;
  border-radius: 18px;
  padding: 28px 30px;
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04);
}

@media (max-width: 640px) {
  .grunnet-addprofile {
    padding: 20px 16px;
    border-radius: 14px;
  }
}

/* Overskrifter */
.grunnet-addprofile h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: #111827;
}

.grunnet-addprofile h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 18px 0 6px;
  color: #111827;
}

/* ================================================== FIX: GENAKTIVER NATIVE SELECT-PIL I ADDPROFILE (så padding virker, ingen custom pil) ================================================== */
.grunnet-addprofile select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
}

/* FJERN EKSTRA SELECT-PIL FRA ANDRE CSS-FILER */
.grunnet-addprofile .select-wrap::before {
  display: none !important;
  content: none !important;
}

/* ===================================== PLACEHOLDER = SAMME SYNLIGHED SOM SELECT ===================================== */
/* Almindelig tekst i inputs / textarea */
.grunnet-addprofile input[type="text"],
.grunnet-addprofile input[type="email"],
.grunnet-addprofile textarea {
  color: #111827;
  /* samme som select */
}

/* Placeholder – IKKE sløret */
.grunnet-addprofile input::placeholder,
.grunnet-addprofile textarea::placeholder {
  color: #9ca3af;
  /* samme visuelle vægt som "Vælg Køn" */
  opacity: 1;
  /* 🔑 fjerner bleg/sløret effekt */
}

/* Firefox */
.grunnet-addprofile input::-moz-placeholder,
.grunnet-addprofile textarea::-moz-placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* Edge / IE */
.grunnet-addprofile input:-ms-input-placeholder,
.grunnet-addprofile textarea:-ms-input-placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* Fokus – tekst bliver ekstra tydelig */
.grunnet-addprofile input:focus,
.grunnet-addprofile textarea:focus {
  color: #111827;
}

/* ================= EKSTRA OPLYSNINGER ================= */
/* Instrumenter (input) */
.grunnet-addprofile input[name="instrumenter"] {
  height: 46px;
  padding: 12px 14px;
  border: 1px solid #cfd6e0;
  border-radius: 8px;
  font-size: 15px;
}

/* Textareas: erfaring, færdigheder, job */
.grunnet-addprofile textarea[name="medvirket"],
.grunnet-addprofile textarea[name="faerdigheder"],
.grunnet-addprofile textarea[name="job"] {
  min-height: 140px;
  padding: 12px 14px;
  border: 1px solid #cfd6e0;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

/* Focus = samme som resten */
.grunnet-addprofile input[name="instrumenter"]:focus,
.grunnet-addprofile textarea[name="medvirket"]:focus,
.grunnet-addprofile textarea[name="faerdigheder"]:focus,
.grunnet-addprofile textarea[name="job"]:focus {
  outline: none;
  border-color: #94a3b8;
}

/* Placeholder matcher de gamle */
.grunnet-addprofile input[name="instrumenter"]::placeholder,
.grunnet-addprofile textarea::placeholder {
  color: #b7bec9;
}

/* ====================================================== ENS INPUT RESET (VIGTIGSTE DEL) ====================================================== */
/* INPUT + SELECT – ENS FORM OG RUNDE HJØRNER */
.grunnet-addprofile input[type="text"],
.grunnet-addprofile input[type="email"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  max-width: 720px;
  padding: 10px 12px;
  min-height: 40px;
  border-radius: 8px !important;
  /* 👈 TVING RUNDE HJØRNER */
  border: 1px solid #d1d5db;
  font-size: 0.85rem;
  line-height: 1.2;
  background-color: #ffffff;
  box-sizing: border-box;
}

/* Textarea override */
.grunnet-addprofile textarea {
  height: auto;
  min-height: 90px;
  resize: vertical;
}

/* Fokus */
.grunnet-addprofile input:focus,
.grunnet-addprofile select:focus,
.grunnet-addprofile textarea:focus {
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.08);
}

/* Fejl */
.grunnet-addprofile .input_fejl {
  border-radius: 8px !important;
  border-color: #dc2626 !important;
  background-color: #fff5f5 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

/* ====================================================== LAYOUT – VENSTREJUSTERET ====================================================== */
.grunnet-addprofile table {
  width: 100%;
  border-collapse: collapse;
}

.grunnet-addprofile table > tbody > tr > td {
  display: block;
}

/* 2 felter på række */
.grunnet-addprofile .grunnet-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  max-width: 720px;
  margin-bottom: 8px;
}

/* 1 felt */
.grunnet-addprofile .grunnet-row-1 {
  max-width: 720px;
  margin-bottom: 8px;
}

/* Mobil */
@media (max-width: 640px) {
  .grunnet-addprofile .grunnet-row-2 {
    grid-template-columns: 1fr;
  }
}

/* ====================================================== MULTI-COLUMN CHECKBOXES (SPROG / KATEGORIER) ====================================================== */
.grunnet-addprofile .grunnet-multicol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 16px;
  margin-bottom: 12px;
  grid-auto-flow: row; /* 🔥 DENNE ER NØGLEN */
}

.grunnet-addprofile .grunnet-multicol label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #111827;
}

/* Submit */
.grunnet-addprofile .submit {
  margin-top: 20px;
  height: 42px;
  border-radius: 999px;
  border: none;
  padding: 0 18px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: #111827;
  color: #ffffff;
}

.grunnet-addprofile .submit:hover {
  background: #4b5563;
}

/* ========================================= ADD PROFILE – H2 OVERSKRIFTER HELT TIL VENSTRE ========================================= */
/* Alle h2 i addProfile skal stå helt venstre */
.grunnet-addprofile h2 {
  grid-column: 1 / -1;
  /* spænder hele bredden */
  margin-left: 0;
  padding-left: 0;
  text-align: left;
}

/* ========================================= ADD PROFILE – ØJENFARVE & SKO = SAMME LAYOUT SOM HØJDE/VÆGT ========================================= */
/* Wrapper-lignende effekt via grid */
.grunnet-addprofile input[name="eye"],
.grunnet-addprofile input[name="sko"] {
  max-width: none;
  /* vigtig */
}

/* Fang deres forældre-divs og giv dem grid */
.grunnet-addprofile h2 + div:has(input[name="eye"]),
.grunnet-addprofile h2 + div:has(input[name="sko"]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  max-width: 720px;
  margin-bottom: 8px;
}

/* Mobil */
@media (max-width: 640px) {
  .grunnet-addprofile h2 + div:has(input[name="eye"]),
  .grunnet-addprofile h2 + div:has(input[name="sko"]) {
    grid-template-columns: 1fr;
  }
}

/* ====================================================== FIX: FØDSELSDATO & ETNISK HERKOMST – VENSTREJUSTERET ====================================================== */
/* Tving alle select-felter i addProfile til venstre */
.grunnet-addprofile select {
  display: block;
  margin-left: 0;
  margin-right: auto;
}

/* Fødselsdato – saml de 3 bokse pænt og venstre */
.grunnet-addprofile h2 + select {
  max-width: 720px;
}

.grunnet-addprofile h2 + select,
.grunnet-addprofile h2 + select + select,
.grunnet-addprofile h2 + select + select + select {
  display: inline-block;
  width: auto;
  min-width: 110px;
  margin-right: 10px;
  border-radius: 8px;
}

/* Mobil: fødselsdato i kolonne */
@media (max-width: 640px) {
  .grunnet-addprofile h2 + select,
  .grunnet-addprofile h2 + select + select,
  .grunnet-addprofile h2 + select + select + select {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }
}

/* Etnisk herkomst – samme venstrejustering som inputs */
.grunnet-addprofile h2 + select[name="etnisk"] {
  max-width: 720px;
}

/* INPUT + SELECT – PIXELPERFEKT ENS */
.grunnet-addprofile input[type="text"],
.grunnet-addprofile input[type="email"],
.grunnet-addprofile select {
  appearance: none;
  width: 100%;
  max-width: 720px;
  padding: 10px 12px;
  /* 👈 styrer højden */
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 0.85rem;
  line-height: 1.2;
  background-color: #ffffff;
  box-sizing: border-box;
  margin: 0;
}

.grunnet-arkiv-no-results {
  background: #fff3f3;
  border: 1px solid #f2bcbc;
  color: #7a1f1f;
  padding: 16px 20px;
  margin-bottom: 20px;
  border-radius: 6px;
  font-weight: 500;
}

.btn-search {
  border-radius: 999px !important;
  border: none !important;
  padding: 16px 20px !important;
  min-width: 100px;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  background: #111827 !important;
  color: #fff !important;
  transition:
    background 0.15s ease,
    transform 0.05s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =============================== FILTER TOGGLE – MODERNE KNAP ================================ */
.grunnet-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin: 12px 0;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #2b2b2b;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.grunnet-filter-toggle:hover {
  background: #f7f7f7;
  border-color: #dcdcdc;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Titel */
.grunnet-filter-title {
  display: block;
}

/* Pil */
.grunnet-filter-arrow {
  color: #757575;
  transition: transform 0.25s ease;
}

/* ÅBEN → pil peger NED */
.grunnet-filter-toggle.is-open .grunnet-filter-arrow {
  transform: rotate(90deg);
}

/* =============================== COLLAPSIBLE CONTENT ================================ */
.grunnet-filter-collapsible {
  display: none;
  margin-bottom: 10px;
}

.grunnet-filter-collapsible.is-open {
  width: 100%;
  animation: filterFade 0.25s ease;
}

@keyframes filterFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====================================================== OpretProfilTunnelContainer – STEP TUNNEL ====================================================== */
/* Desktop */
#opretProfilTunnelContainer {
  margin: 0 auto 22px;
  display: flex;
  gap: 38px;
  max-width: 960px;
  padding: 14px 18px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 0.85rem;
}

/* ====================================================== TABLET – GRID ====================================================== */
@media (max-width: 1000px) {
  #opretProfilTunnelContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 18px;
  }
}

@media (max-width: 770px) {
  #opretProfilTunnelContainer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  #opretProfilTunnelContainer {
    grid-template-columns: 1fr;
    padding: 14px;
  }
}

/* ====================================================== STEP ITEMS (PILLER) ====================================================== */
.stepItem {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* Aktiv */
.stepItem.is-active {
  background: #111827;
  color: #ffffff;
  font-weight: 600;
}

/* ====================================================== PIL INDE I PILLEN ====================================================== */
.stepArrow {
  font-size: 0.7rem;
  color: inherit;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

/* Skjul pil på sidste trin */
.step-last .stepArrow {
  display: none;
}

/* Mobil: pil peger ned */
@media (max-width: 520px) {
  .stepArrow {
    transform: rotate(90deg);
  }
}

/* ====================================================== Opret.php ====================================================== */
:root {
  --bg-page: #f5f6f8;
  --bg-card: #ffffff;
  --text-main: #111827;
  --text-muted: #4b5563;
  --accent: #000000;
  --border: rgba(17, 24, 39, 0.08);
}

/* ------------------------------------ PAGE WRAPPER ------------------------------------ */
body {
  background: var(--bg-page);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--text-main);
}

/* Matcher dit margin-left:25px div */
div[style*="margin-left"] {
  max-width: 1100px;
  margin: 48px auto;
  padding: 0 20px;
}

/* ------------------------------------ MAIN HEADING ------------------------------------ */
h1 {
  font-size: 2.1rem;
  font-weight: 750;
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}

.coloredText {
  color: var(--accent);
  margin-right: 6px;
}

/* ------------------------------------ CONTENT CARD ------------------------------------ */
.content_container_auto_border {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  background: var(--bg-card);
  border-radius: 20px;
  padding: 36px 40px;
  border: 1px solid var(--border);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ------------------------------------ SECTION HEADINGS ------------------------------------ */
.content_container_auto_border h2 {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 32px 0 10px;
  color: var(--text-main);
  letter-spacing: 0.01em;
}

/* ------------------------------------ TEXT BLOCKS ------------------------------------ */
.paddingLeft {
  padding-left: 26px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.paddingLeft strong {
  color: var(--text-main);
}

/* ------------------------------------ SPACING ------------------------------------ */
.spacer {
  height: 32px;
}

/* ------------------------------------ CTA (FORTSÆT) ------------------------------------ */
.center {
  text-align: center;
}

.coloredTextBig {
  margin-top: 42px;
}

/* CTA – forbedret men samme stil */
.coloredTextBig a,
.coloredTextBig button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  border-radius: 999px;

  /* 🔥 bedre gradient */
  background: linear-gradient(135deg, #000000 0%, #1f2937 100%);

  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;

  /* 🔥 realistisk shadow */
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.15);

  /* 🔥 smoother */
  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;

  position: relative;
  overflow: hidden;
}

/* ✨ hover */
.coloredTextBig a:hover,
.coloredTextBig button:hover {
  transform: translateY(-3px);
  color: #ffffff;
  /* lidt lysere top */
  background: linear-gradient(135deg, #111111 100%);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.2);
}

/* 👇 klik følelse */
.coloredTextBig a:active,
.coloredTextBig button:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* ✨ subtle shine */
.coloredTextBig a::after,
.coloredTextBig button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-20deg);
}

.coloredTextBig a:hover::after,
.coloredTextBig button:hover::after {
  left: 120%;
  transition: left 0.6s ease;
}

/* Fjern CAPS på knapper */
.coloredTextBig a,
.coloredTextBig button,
.grunnet-arkiv-btn {
  text-transform: none !important;
}

/* ------------------------------------ MOBILE ------------------------------------ */
@media (max-width: 768px) {
  h1 {
    font-size: 1.7rem;
  }

  .content_container_auto_border {
    padding: 26px 22px;
    border-radius: 16px;
  }

  .paddingLeft {
    padding-left: 14px;
  }

  .coloredTextBig a {
    width: 100%;
    padding: 16px;
  }
}

.opret-title {
  font-size: 1.85rem;
  font-weight: 600;
}

/* ====================================================== addpicture.php – SAMLET MODERNE CONTAINER ====================================================== */
/* Page wrapper */
.addpicture-wrapper {
  max-width: 1000px;
  margin: 48px auto;
  padding: 0 20px;
}

/* 🔥 HOVEDBOKS – ALT INDHOLD */
.addpicture-box {
  background: #ffffff;
  border-radius: 22px;
  padding: 36px 40px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.05);
}

/* ------------------------------------ VIGTIG INFO ------------------------------------ */
.addpicture-important {
  margin-bottom: 32px;
}

.addpicture-important p {
  margin: 0;
  line-height: 1.6;
  font-size: 0.95rem;
  color: #374151;
}

.addpicture-important p:first-child {
  margin-bottom: 6px;
}

/* ------------------------------------ UPLOAD GRID ------------------------------------ */
.addpicture-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* ÉN kolonne */
  gap: 24px;
  margin-bottom: 40px;
}

/* Upload card */
.addpicture-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.03);
}

/* Preview image */
.addpicture-card img {
  width: 192px;
  height: 192px;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0.9;
}

/* Text + input */
.addpicture-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.addpicture-card-content p {
  margin: 0;
  font-size: 0.9rem;
  color: #374151;
}

/* File input */
.addpicture-card input[type="file"] {
  font-size: 0.85rem;
}

/* ------------------------------------ RETTIGHEDER ------------------------------------ */
.addpicture-rights {
  max-width: 720px;
  margin: 0 auto 32px;
  font-size: 0.8rem;
  color: #4b5563;
}

/* ------------------------------------ SUBMIT KNAP ------------------------------------ */
.addpicture-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 38px;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 650;
  border: none;
  cursor: pointer;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.addpicture-submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.16);
}

/* ------------------------------------ MOBIL ------------------------------------ */
@media (max-width: 768px) {
  .addpicture-box {
    padding: 26px 22px;
    border-radius: 18px;
  }

  .addpicture-grid {
    grid-template-columns: 1fr;
  }

  .addpicture-card {
    flex-direction: column;
    text-align: center;
  }
}

/* Brug coloredTextBig-look på submit-knap */
.coloredTextBig-btn {
  all: unset;
  cursor: pointer;
}

.coloredTextBig-btn strong {
  pointer-events: none;
}

/* ====================================================== STEMME.PHP – MODERNE STYLING ====================================================== */
/* Wrapper – matcher addProfile */
.grunnet-addprofile {
  max-width: 960px;
  margin: 48px auto;
  padding: 36px 40px;
  background: white;
  border-radius: 22px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.05);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #111827;
}

@media (max-width: 768px) {
  .grunnet-addprofile {
    padding: 26px 22px;
    border-radius: 18px;
  }
}

/* ------------------------------------------------------ HEADINGS ------------------------------------------------------ */
.grunnet-addprofile h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.grunnet-addprofile h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 28px 0 10px;
}

/* ------------------------------------------------------ INTRO TEXT ------------------------------------------------------ */
.grunnet-addprofile p {
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* ------------------------------------------------------ STATUS MESSAGES ------------------------------------------------------ */
.grunnet-addprofile .status-success {
  color: #15803d;
  font-weight: 600;
}

.grunnet-addprofile .status-error {
  color: #b91c1c;
  font-weight: 600;
}

/* ------------------------------------------------------ STEMMEPRØVER – LISTE ------------------------------------------------------ */
.stemme-list {
  margin-top: 20px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.stemme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f3f4f6;
}

.stemme-item:last-child {
  border-bottom: none;
}

.stemme-item a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
}

.stemme-item a:hover {
  text-decoration: underline;
}

.stemme-delete {
  font-size: 0.8rem;
  color: #dc2626;
  font-weight: 600;
  text-decoration: none;
}

.stemme-delete:hover {
  text-decoration: underline;
}

/* ====================================================== AUDIO – FJERN OPTIONS (⋮) KUN profileDetails 100% CSS ====================================================== */
/* Selve overflow-knappen */
.grunnet-profile-details audio::-webkit-media-controls-overflow-button {
  display: none !important;
}

/* Chrome / Edge: sørg for at den ikke reserverer plads */
.grunnet-profile-details audio::-webkit-media-controls-enclosure {
  overflow: hidden !important;
}

/* Ret padding så layout matcher præcis */
.grunnet-profile-details audio::-webkit-media-controls-panel {
  padding-right: 8px !important;
}

/* 🔴 Bruger-knapper – altid rød kant */
.btn-pill.btn-user-highlight,
.btn-pill.btn-user-highlight:hover,
.btn-pill.btn-user-highlight:focus,
.btn-pill.btn-user-highlight:active {
  border: 2px solid #dc2626 !important;
  outline: none !important;
  box-shadow: none !important;
  background: #fff;
  color: #000;
}

.btn-pill.btn-user-highlight:hover {
  background: #fee2e2;
}

/* 🔴 ADMIN-knapper – altid rød kant */
.btn-pill.btn-admin-highlight,
.btn-pill.btn-admin-highlight:hover,
.btn-pill.btn-admin-highlight:focus,
.btn-pill.btn-admin-highlight:active {
  border: 2px solid #dc2626 !important;
  outline: none !important;
  box-shadow: none !important;
  background: #fff;
  color: #000;
}

/* Valgfri hover-effekt */
.btn-pill.btn-admin-highlight:hover {
  background: #fee2e2;
}

/* ------------------------------------------------------ UPLOAD FORM ------------------------------------------------------ */
.stemme-upload-box {
  margin-top: 32px;
  padding: 24px 26px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.03);
}

/* Inputs */
.stemme-upload-box input[type="text"],
.stemme-upload-box input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 0.85rem;
}

.stemme-upload-box input:focus {
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.08);
}

.print-btn.danger {
  background: #c81e1e;
}

/* 2 kolonner */
.stemme-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

@media (max-width: 640px) {
  .stemme-upload-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------ RETTIGHEDER ------------------------------------------------------ */
.stemme-rights {
  margin-top: 16px;
  margin-left: 60px;
  font-size: 0.8rem;
  color: #4b5563;
}

.stemme-rights input {
  margin-right: 6px;
}

/* ------------------------------------------------------ SUBMIT BUTTON – matcher addPicture ------------------------------------------------------ */
.stemme-submit {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 650;
  border: none;
  cursor: pointer;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.stemme-submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.16);
}

/* ------------------------------------------------------ BACK LINK ------------------------------------------------------ */
.stemme-back {
  margin-top: 36px;
  text-align: center;
}

.stemme-back a {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
}

.stemme-back a:hover {
  text-decoration: underline;
}

.stemme-skip-link {
  color: #dc2626;
  /* rød */
  text-decoration: none;
  font-weight: 700;
}

.stemme-skip-link:hover {
  text-decoration: underline;
  color: #b91c1c;
  /* mørkere rød */
}

/* =============================== STEMME – RETTIGHEDS CHECKBOX =============================== */
.stemme-rights {
  margin-top: 20px;
  max-width: 720px;
}

.stemme-rights-label {
  display: flex;
  align-items: flex-start;
  /* 🔑 fixer din fejl */
  gap: 10px;
  cursor: pointer;
  font-size: 0.8rem;
  color: #4b5563;
  line-height: 1.5;
}

.stemme-rights-label input[type="checkbox"] {
  margin-top: 2px;
  /* 🔑 pixel-fix */
  flex-shrink: 0;
}

.stemme-rights-label a {
  color: #111827;
  font-weight: 600;
  text-decoration: underline;
}

/* ================================ ISOLER Grunnet profileDetails ================================ */
.grunnet-profile-details {
  max-width: 1100px;
  margin: 40px auto;
  padding: 40px 40px 30px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.profile-admin-row {
  display: flex;
  flex-wrap: wrap; /* 🔥 DET VIGTIGE */
  gap: 10px;
  justify-content: center;
}

/* ========================================= ADMIN-KNAPPER – LIDT STØRRE (ARKIV) ========================================= */
.profile-admin-bottom-actions {
  padding: 10px 12px 12px;
  /* lidt mere luft */
  gap: 8px;
}

.profile-admin-bottom-actions .btn-pill {
  font-size: 12.5px;
  /* mellemstørrelse */
  padding: 6px 12px;
  /* tydelig, men stadig kompakt */
  border-radius: 999px;
  line-height: 1.2;
}

/* ====================================================== MOBIL: ADMIN-KNAPPER UNDER HINANDEN ====================================================== */

/* Knapper må ikke blive mega små */
.profile-admin-row .btn-pill {
  flex: 0 0 auto;
}

/* ====================================================== MOBIL: TOP-ACTIONS UNDER HINANDEN (Tilbage / stjerne / print-knapper) ====================================================== */
@media (max-width: 768px) {
  .grunnet-profile-details .profile-top-actions {
    flex-direction: column;
    /* ⬇️ under hinanden */
    align-items: stretch;
    gap: 14px;
  }

  .grunnet-profile-details .profile-top-actions > a,
  .grunnet-profile-details .profile-top-actions .print-actions {
    width: 100%;
    justify-content: center;
  }

  .grunnet-profile-details .print-actions {
    flex-direction: column;
    /* print-knapper under hinanden */
    gap: 10px;
  }

  .grunnet-profile-details .print-actions .btn-pill {
    width: 100%;
  }
}

/* ===== RÆKKE MED BILLEDER (VIGTIG!) ===== */
.profile-image-row {
  display: flex !important;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: nowrap;
}

/* ===== BILLEDE + ROTATION ===== */
.profile-image {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.image-rotate-wrapper {
  position: relative;
  display: inline-block;
}

.image-rotate-wrapper img {
  display: block;
  transition: transform 0.25s ease;
}

.rotate-btn {
  position: absolute;
  top: -2px;
  right: -2px;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);

  cursor: pointer;
  z-index: 1;
}

.rotate-btn:hover {
  background: #f2f2f2;
}

/* ===== UPLOAD UNDER BILLEDE ===== */
.image-upload-form {
  margin-top: 4px;
  width: auto;
  text-align: center;
}

/* skjul native file-input helt */
.image-upload-form input[type="file"] {
  display: none;
}

/* meget lille, diskret upload-knap */
.upload-label {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.6rem;
  line-height: 1.2;
  border-radius: 10px;
  background: #f2f2f2;
  color: #555;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.upload-label:hover {
  background: #e6e6e6;
}

/* ===================================== GLOBAL KNAP – SAMME SOM "LOG UD" ===================================== */
.btn-pill {
  border: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  border: 1.5px solid #000000;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-pill:hover {
  background: #000000;
  color: #ffffff;
}

/* Fokus (tilgængelighed) */
.btn-pill:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.btn-pill {
  color: #000000;
  /* SORT TEKST */
  text-decoration: none;
  /* INGEN UNDERSTREGNING */
}

/* Sørg for at links ikke bliver blå/lilla */
.btn-pill:link,
.btn-pill:visited {
  color: #000000;
}

.btn-pill:hover {
  color: #ffffff;
  /* HVID tekst på hover */
}

/* Reset WP påvirkning */
.grunnet-profile-details *,
.grunnet-profile-details *::before,
.grunnet-profile-details *::after {
  box-sizing: border-box;
}

/* ================================ GENERELLE CARD-BOXE ================================ */
.grunnet-profile-details table {
  width: 100% !important;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-bottom: 32px;
}

/* Cell styling */
.grunnet-profile-details td {
  padding: 7px 7px !important;
  font-size: 14px;
  color: #374151;
  vertical-align: top;
}

/* Labels */
.grunnet-profile-details .paddingLeftHigh {
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

.paddingLeftHigh-max {
  max-width: 30px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

/* ================================ OVERSKRIFTER ================================ */
.grunnet-profile-details h1 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  padding: 18px 14px;
  /* matcher tabel-celler */
  color: #111827;
  letter-spacing: 0.3px;
}

/* Linje under headings */
.grunnet-profile-details .bottomBorder {
  border-bottom: 1px solid #e5e7eb;
}

/* ================================ GENERELLE INFO + PERSONDETALJER ================================ */
.grunnet-profile-details table tr:not(:first-child) td {
  border-bottom: 1px solid #f1f1f1;
}

.grunnet-profile-details table tr:last-child td {
  border-bottom: none;
}

/* ================================ TEKSTSEKTIONER (ERFARING, JOB, FÆRDIGHEDER) ================================ */
.grunnet-profile-details table td p {
  margin: 6px 0;
  line-height: 1.6;
  color: #4b5563;
}

/* ================================ STEMMEPRØVER ================================ */
.grunnet-profile-details .stemme-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.grunnet-profile-details .stemme-item {
  background: #f9fafb;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: inset 0 0 0 1px #e5e7eb;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.grunnet-profile-details .stemme-item:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.grunnet-profile-details .stemme-item audio {
  width: 100%;
}

/* Titel på stemmeprøve */
.grunnet-profile-details .stemme-item div:first-child {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #111827;
}

/* Download-link (admin) */
.grunnet-profile-details .stemme-delete {
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
}

.grunnet-profile-details .stemme-delete:hover {
  text-decoration: underline;
}

/* ================================ GRID LAYOUT (VENSTRE / HØJRE) ================================ */
.grunnet-profile-details > div[style*="grid-template-columns"] {
  gap: 40px !important;
}

/* ================================ TILBAGE-LINK ================================ */
.grunnet-profile-details a {
  color: #2563eb;
  text-decoration: none;
  font-size: 14px;
}

.grunnet-profile-details a:hover {
  text-decoration: underline;
}

/* ================================ PROFILE TOP IMAGES – FINAL & CLEAN ================================ */
/* Ydre container */
.grunnet-profile-details .profile-image-strip {
  padding: 20px 0 40px;
  margin-top: 60px;
  overflow-x: auto;
  /* scroll hvis mange billeder */
}

/* RÆKKEN – ALDRIG NEDAD */
.grunnet-profile-details .profile-image-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

/* Ét billede = én kolonne */
.grunnet-profile-details .profile-image {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto !important;
}

/* ================================ PROFILE TOP ACTIONS – FIX ================================ */
/* ====================================== PROFILE IMAGES – RESPONSIVE LAYOUT ====================================== */
.profile-images-layout {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  align-items: start;
  margin-top: 32px;
  margin-bottom: 48px;
}

/* ÉT BILLEDE */
.profile-image {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ROTATE WRAPPER */
.image-rotate-wrapper {
  position: relative;
}

/* BILLEDE */
.profile-image img {
  width: 100%;
  max-width: 320px;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  pointer-events: auto;
  border-radius: 16px;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* UPLOAD */
.image-upload-form {
  margin-top: 8px;
  text-align: center;
}

.image-upload-form input[type="file"] {
  display: none;
}

.upload-label {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.65rem;
  border-radius: 999px;
  background: #f2f2f2;
  color: #555;
  cursor: pointer;
}

/* ========================== TABLET ========================== */
@media (max-width: 900px) {
  .profile-images-layout {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
  }

  .profile-image img {
    max-width: 260px;
    max-height: 220px;
  }
}

/* ========================== MOBIL ========================== */
@media (max-width: 560px) {
  .profile-images-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .profile-image img {
    max-width: 100%;
    max-height: 220px;
  }
}

.grunnet-profile-details .profile-top-actions {
  display: flex;
  align-content: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 80px;
  flex-wrap: nowrap;
  /* 🔒 ALDRIG NED */
}

/* Venstre side (Tilbage + bruger/admin-knapper) */
.grunnet-profile-details .profile-top-actions > a,
.grunnet-profile-details .profile-user-actions,
.grunnet-profile-details .profile-admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Højre side (Print-knapper) */
.grunnet-profile-details .print-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* ===================== BILLEDE + ROTATION ===================== */
.grunnet-profile-details .image-rotate-wrapper {
  position: relative;
  display: inline-block;
}

/* Selve billedet */
.grunnet-profile-details .profile-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 320px;
  max-height: 240px;
  border-radius: 16px;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* Hover-effekt */
.grunnet-profile-details .profile-image:hover img {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.12);
}

.grunnet-profile-details .rotate-btn:hover {
  background: #f2f2f2;
}

/* ===================== UPLOAD UNDER BILLEDE ===================== */
.grunnet-profile-details .image-upload-form {
  margin-top: 6px;
  text-align: center;
}

/* skjul native input */
.grunnet-profile-details .image-upload-form input[type="file"] {
  display: none;
}

/* lille, diskret upload-knap */
.grunnet-profile-details .upload-label {
  display: inline-block;
  padding: 2px 8px;
  margin-top: 80px;
  font-size: 1rem;
  line-height: 1.2;
  border-radius: 10px;
  background: #f2f2f2;
  color: #555;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.grunnet-profile-details .upload-label:hover {
  background: #e6e6e6;
}

/* ===================== MOBIL – STADIG PÅ RÆKKE ===================== */
@media (max-width: 768px) {
  .grunnet-profile-details .profile-image-row {
    justify-content: flex-start;
    /* scroll fra venstre */
  }

  .grunnet-profile-details .profile-image img {
    max-width: 260px;
    max-height: 260px;
  }
}

/* =============================== STEMMEPRØVER – LISTE DESIGN =============================== */
.voice-track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid #ddd;
}

.voice-track:last-child {
  border-bottom: none;
}

.voice-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #000;
  /* ALTID sort */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* 🔑 vigtig */
  box-sizing: border-box;
  /* 🔑 vigtig */
}

.voice-play:hover {
  background: #000;
  /* ingen ændring */
}

.voice-play:active {
  background: #000;
}

.voice-play img {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  filter: invert(1);
  /* ikon hvidt */
}

.voice-title {
  font-size: 14px;
  color: #000;
  white-space: nowrap;
}

/* ====================================================== ADMIN LOGIN – MODERNE CARD DESIGN Gælder [arkiv_login] ====================================================== */
/* Wrapper – centrering */
.grunnet-arkiv-admin-login-wrapper {
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 20px;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.profile-admin-row-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

/* Card */
.grunnet-arkiv-admin-login {
  background: #ffffff;
  max-width: 720px;
  padding: 32px 36px 36px;
  margin: auto;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.08),
    0 6px 14px rgba(0, 0, 0, 0.05);
}

/* Titel */
.grunnet-arkiv-admin-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 14px;
}

/* Form layout */
.grunnet-arkiv-admin-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* Input */
.grunnet-arkiv-admin-form input[type="password"],
.grunnet-arkiv-admin-form input[type="email"],
.grunnet-arkiv-admin-form input[type="text"] {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Placeholder */
.grunnet-arkiv-admin-form input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* Fejlbesked */
.grunnet-arkiv-admin-error {
  margin-top: 6px;
  font-size: 13px;
  color: #b91c1c;
}

/* Mobil */
@media (max-width: 640px) {
  .grunnet-arkiv-admin-login {
    padding: 24px 20px 26px;
    border-radius: 14px;
  }
}

/* ====================================================== ADMIN – LOGGET IND (MODERNE CARD) ====================================================== */
.grunnet-arkiv-admin-box {
  background: #ffffff;
  max-width: 720px;
  margin: auto;
  padding: 28px 32px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.08),
    0 6px 14px rgba(0, 0, 0, 0.05);
}

/* Titel */
.grunnet-arkiv-admin-box strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: -20px;
}

/* Links container */
.grunnet-arkiv-admin-box a {
  font-size: 14px;
  color: #374151;
  text-decoration: none;
  margin-right: 10px;
}

.grunnet-arkiv-admin-box a:hover {
  text-decoration: underline;
}

/* Log ud-form */
.grunnet-arkiv-admin-box form {
  margin-top: 18px;
}

/* Log ud-knap */
.grunnet-arkiv-admin-box button {
  background: transparent;
  color: #111827;
  border: 1px solid #000000;
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

/* Mobil */
@media (max-width: 640px) {
  .grunnet-arkiv-admin-box {
    padding: 22px 20px;
    border-radius: 14px;
  }
}

#filter-all > .grunnet-filter-collapsible.is-open {
  width: 100%;
}

@media (min-width: 1200px) {
  .grunnet-arkiv-filter .select-wrap select {
    min-width: 200px;
  }
}

/* ========================================= 🔒 ENDELIG INPUT & SELECT – ARKIV NORMAL SKRIFT (PLACERES ALLERSIDST) ========================================= */
.grunnet-arkiv-filter input[type="text"],
.grunnet-arkiv-filter select {
  background-color: #ffffff;
  color: #3d3d3d !important;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: normal;
  /* 🔑 reset fra parent */
  font-style: normal;
  /* 🔑 sikker reset */
  font-family: inherit;
  /* 🔑 brug normal system-font */
}

/* Placeholder = samme normale skrift */
.grunnet-arkiv-filter input[type="text"]::placeholder {
  color: #3d3d3d !important;
  opacity: 1;
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
}

/* ========================= ARKIV LAYOUT SYSTEM ========================= */
.grunnet-arkiv {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 30px;
  align-items: start;
}

/* Sidebar */
.grunnet-arkiv-filters {
  position: sticky;
  top: 20px;
  align-self: start;
}

/* Resultater */
.grunnet-arkiv-grid {
  min-width: 0;
}

/* ========================= Desktop: altid åbne filtre ========================= */
@media (min-width: 1024px) {
  .grunnet-filter-collapsible {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
  }

  .grunnet-filter-arrow {
    display: none;
  }

  .grunnet-filter-toggle {
    cursor: default;
    font-weight: 600;
  }
}

/* ========================= Mobil: stacked layout ========================= */
@media (max-width: 1023px) {
  .grunnet-arkiv {
    grid-template-columns: 1fr;
  }

  .grunnet-arkiv-filters {
    position: relative;
    top: auto;
  }

  .grunnet-filter-collapsible {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.25s ease;
  }

  .grunnet-filter-collapsible.is-open {
    max-height: 2000px;
    opacity: 1;
  }
}

/* ======================================================
PATCH — NEW FEATURES ON TOP OF OLD CSS
Safe additive layer — does NOT remove old behaviour
====================================================== */

/* ======================================================
1️⃣ MOBILE FILTER OVERLAY SYSTEM (NEW FEATURE)
====================================================== */

/* Open filter button (hidden desktop) */
.grunnet-filter-open {
  display: none;
  background: #000;
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
}

/* Overlay container */
.grunnet-filter-overlay {
  position: relative;
}

/* ======================================
   MOBILE FILTER PANEL (desktop style)
====================================== */

@media (max-width: 1000px) {
  .grunnet-filter-open {
    display: inline-block;
  }

  /* container til række */
  .grunnet-mobile-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap; /* hvis skærm er MEGET lille */
  }

  .grunnet-arkiv {
    grid-template-columns: 1fr;
  }

  /* overlay fade */
  .grunnet-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 100000;
  }

  .grunnet-filter-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* FILTER SHEET */
  .grunnet-arkiv-sidebar {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -100%);

    width: 100%;
    max-width: 520px;

    height: 100%;

    background: #fff;
    padding: 18px;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);

    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow-y: auto;
  }

  /* slide down */
  .grunnet-filter-overlay.is-open .grunnet-arkiv-sidebar {
    transform: translate(-50%, 0);
  }

  body.filter-open {
    overflow: hidden;
    height: 100vh;
    touch-action: none;
  }

  /* select-wrap = fuld bredde på mobil */
  .select-wrap {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
  }

  /* =========================
   FILTER INPUTS – ENS FORM (uden checkbox)
  ========================= */

  .grunnet-arkiv-filter input:not([type="checkbox"]),
  .grunnet-arkiv-filter select {
    width: 100% !important;
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border-radius: 14px !important;
  }

  /* FRA / TIL */
  .grunnet-arkiv-filter
    input:not([type="checkbox"])
    + input:not([type="checkbox"]) {
    margin-left: 8px;
    border-radius: 14px !important;
  }

  /* Select arrow spacing */
  .grunnet-arkiv-filter select {
    padding-right: 42px !important;
  }

  .grunnet-arkiv-sidebar {
    border-radius: 0 !important;
  }

  /* Select pil kolonne */
  .grunnet-arkiv-filter .select-wrap::before {
    height: 46px !important;
    border-radius: 0 14px 14px 0;
  }

  .grunnet-filter-close {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    width: 44px;
    height: 44px;

    border: none;
    background: transparent;

    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 100001;
  }

  .grunnet-filter-close i {
    color: #000;
    font-size: 22px;
    pointer-events: none; /* klik går til knappen */
  }

  .grunnet-filter-close:hover {
    transform: scale(1.05);
  }
}

/* =========================
   MOBIL: max 500px
   → 1 kolonne + vis alle igen
========================= */

@media (max-width: 500px) {
  .grunnet-arkiv-grid {
    grid-template-columns: 1fr;
  }

  /* reset skjul */
  .grunnet-arkiv-grid .grunnet-arkiv-card {
    display: block;
  }
}

/* =========================
   MOBILE = desktop proportions
========================= */

@media (max-width: 500px) {
  /* grid spacing + center cards */
  .grunnet-arkiv-grid {
    gap: 20px;
    justify-content: center;
  }

  /* card shell */
  .grunnet-arkiv-card {
    width: 100%;
    max-width: 360px; /* ← låser desktop proportion */
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    background: #fff;
  }

  /* image area — låst desktop højde */
  .grunnet-arkiv-card-img-full {
    height: 400px !important;
    border-radius: 12px 12px 0 0;
    background: #eee;
  }

  /* body spacing = desktop */
  .grunnet-arkiv-card-body {
    padding: 6px 10px;
  }

  /* tekst */
  .grunnet-arkiv-card-name {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
  }

  .grunnet-arkiv-card-meta {
    font-size: 12px;
    color: #4b5563;
  }

  /* vis 1–12 profiler på mobil */
  .grunnet-arkiv-grid .grunnet-arkiv-card:nth-child(-n + 12) {
    display: block !important;
  }

  /* skjul 13+ */
  .grunnet-arkiv-grid .grunnet-arkiv-card:nth-child(n + 13) {
    display: none !important;
  }

  /* skjul "Sidste »" */
  .grunnet-arkiv-page-link:last-child,
  .grunnet-arkiv-page-disabled:last-child {
    display: none !important;
  }

  .grunnet-arkiv-pagination {
    justify-content: center;
  }

  .grunnet-arkiv-pagination-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; /* 🔥 forhindrer linjeskift */
    gap: 6px;
    width: 100%;
    overflow-x: auto; /* hvis den bliver for bred */
  }

  .grunnet-arkiv-page-link,
  .grunnet-arkiv-page-disabled,
  .grunnet-arkiv-page-current {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ======================================================
2️⃣ GLOBAL FORM HEIGHT NORMALIZATION
====================================================== */
.grunnet-arkiv-filter input[type="text"],
.grunnet-arkiv-filter select {
  height: 46px;
}

/* ======================================================
3️⃣ STRONGER INPUT TEXT VISIBILITY
====================================================== */

.grunnet-arkiv-filter input::placeholder {
  color: #1f2937;
  opacity: 1;
}

.grunnet-arkiv-filter select {
  color: #1f2937;
}

/* ======================================================
4️⃣ MODERN PAGINATION LOOK (SAFE)
====================================================== */

.grunnet-arkiv-pagination-inner {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 12px 18px;
}

.grunnet-arkiv-page-link {
  transition: all 0.2s ease;
}

.grunnet-arkiv-page-link:hover {
  transform: translateY(-1px);
}

/* ======================================================
5️⃣ RESULT COUNT MOBILE / DESKTOP SPLIT
====================================================== */

.grunnet-results-mobile {
  display: none;
}

@media (max-width: 1000px) {
  .grunnet-results-desktop {
    display: none;
  }

  .grunnet-results-mobile {
    display: block;
  }
}

/* ======================================================
6️⃣ MOBILE TOP BAR CONTAINER (OPTIONAL NEW FEATURE)
====================================================== */

.grunnet-mobile-top-box {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.06);
  margin-bottom: 18px;
}

/* Default = vis */
.grunnet-mobile-top-box {
  display: block;
}

/* Over 1000px = skjul */
@media (min-width: 1001px) {
  .grunnet-mobile-top-box {
    display: none;
  }
}

/* ======================================================
7️⃣ CARD IMAGE CENTER CROP (SAFE VERSION)
Only activates if class exists
====================================================== */

.grunnet-arkiv-card-img-full.is-center-crop {
  position: relative;
}

.grunnet-arkiv-card-img-full.is-center-crop img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

/* ======================================================
8️⃣ WORDPRESS GLOBAL ROUND BUTTON FIX
====================================================== */

[type="reset"],
[type="submit"],
input[type="submit"],
.wp-block-button__link,
.btn,
.theme_buttons a {
  border-radius: 50px !important;
}

/* ======================================================
9️⃣ MODERN RESULTS COUNT BOX (SAFE ADDITION)
====================================================== */

.grunnet-arkiv-results-count {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid #cfcfcf;
  background: #fff;
  font-weight: 600;
}

.grunnet-arkiv-notfound {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid #cfcfcf;
  background: linear-gradient(180deg, #ffe5e5 0%, #ffd6d6 100%);
  color: #7f1d1d;
}

/* =========================
   SIDEBAR = ASP CLASSIC FLOW
========================= */

.grunnet-arkiv-filters-grid {
  display: block !important;
}

.grunnet-arkiv-filter {
  display: block !important;
  width: 100% !important;
  margin-bottom: 8px;
}

.grunnet-arkiv-filter label {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.grunnet-arkiv-filter input {
  box-sizing: border-box;
}

.grunnet-arkiv-filter input.short {
  width: 140px !important;
  max-width: 140px !important;
  flex: 155px !important;
}

.grunnet-arkiv-filter select {
  width: 100%;
  box-sizing: border-box;
}

/* ======================================================
FINAL PROD PATCH — FILTER OVERLAY + SIDEBAR STABILITY
Matches current HTML structure
SAFE — additive only
Place LAST in prod CSS
====================================================== */

/* ======================================================
1️⃣ DESKTOP OVERLAY RESET
====================================================== */

@media (min-width: 1001px) {
  .grunnet-filter-overlay {
    position: static !important;
    background: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    inset: auto !important;
    z-index: auto !important;
  }
}

/* ======================================================
2️⃣ SIDEBAR BASE — NEW SYSTEM SUPPORT
====================================================== */

.grunnet-arkiv-sidebar {
  position: relative;
  width: 100%;
  padding: 20px;
  min-width: 100%;
  z-index: 2;
  /* Modern card look (match profil / addprofile) */
  background: #ffffff;
  border-radius: 22px;

  border: 1px solid rgba(0, 0, 0, 0.06);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.05);

  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Desktop lock width */
@media (min-width: 1024px) {
  .grunnet-arkiv-sidebar {
    width: 320px;
    flex-shrink: 0;
  }
}

.select-wrap::before {
  height: 48px !important;
}

/* ======================================================
3️⃣ MOBILE OVERLAY → SIDEBAR BINDING (CRITICAL FIX)
====================================================== */

@media (max-width: 1000px) {
  /* IMPORTANT:
     override old system targeting .grunnet-arkiv-filters
     your HTML uses .grunnet-arkiv-sidebar
  */

  .grunnet-filter-overlay .grunnet-arkiv-sidebar {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(-100%);
    width: 100%;
    max-width: 520px;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    padding: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    -webkit-overflow-scrolling: touch;
  }

  .grunnet-filter-overlay.is-open .grunnet-arkiv-sidebar {
    transform: translateX(-50%) translateY(0);
  }
}

/* ======================================================
4️⃣ CHECKBOX LABEL SAFETY (MATCHES YOUR HTML)
====================================================== */

.grunnet-arkiv-filter label:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.grunnet-arkiv-filter input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
}

@media (min-width: 1000px) {
  .grunnet-arkiv-filter input.short {
    width: 90px !important;
    max-width: 90px !important;
    flex: 0 0 75px !important;
  }
}

/* ======================================================
5️⃣ FILTER FIELD NORMALIZATION (PREVENT STACK BREAK)
====================================================== */

.grunnet-arkiv-filter {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100%;
}

.grunnet-arkiv-filter label {
  margin-bottom: 4px;
}

/* ======================================================
6️⃣ INPUT HEIGHT CONSISTENCY (YOUR CSS HAS MULTIPLE)
====================================================== */

.grunnet-arkiv-filter input[type="text"],
.grunnet-arkiv-filter select {
  min-height: 46px;
}

/* ======================================================
8️⃣ RESULT BOX SAFE (YOU DEFINE MULTIPLE TIMES)
====================================================== */

.grunnet-arkiv-results-count,
.grunnet-arkiv-notfound {
  line-height: 1.2;
}

/* ======================================================
FINAL — FILTER LABEL LEFT / INPUT RIGHT
Safe override for mixed legacy + new CSS
Place LAST in prod CSS
====================================================== */

/* =====================================
BASE FILTER ROW LAYOUT
===================================== */

.grunnet-arkiv-filter {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100%;
}

/* =====================================
LABEL LEFT — FIXED WIDTH
===================================== */

.grunnet-arkiv-filter > label {
  flex: 0 0 120px;
  min-width: 120px;
  margin: 0;
  white-space: nowrap;
}

/* =====================================
INPUT RIGHT — FLEXIBLE WIDTH
===================================== */

.grunnet-arkiv-filter > input,
.grunnet-arkiv-filter > select {
  flex: 1 1 auto;
  width: auto !important;
  max-width: none !important;
}

/* =====================================
FRA / TIL INPUTS — STACK INSIDE RIGHT SIDE
===================================== */

.grunnet-arkiv-filter > input + input {
  margin-left: 8px;
}

/* =====================================
CHECKBOX ROW SPECIAL CASE
===================================== */

.grunnet-arkiv-filter label:has(input[type="checkbox"]) {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

/* =====================================
MOBILE — SMALLER LABEL WIDTH
===================================== */

@media (max-width: 600px) {
  .grunnet-arkiv-filter > label {
    flex: 0 0 90px;
    min-width: 90px;
    font-size: 13px;
  }
}

/* =====================================
VERY SMALL MOBILE — ALLOW WRAP
===================================== */

@media (max-width: 420px) {
  .grunnet-arkiv-filter {
    flex-wrap: wrap;
  }

  .grunnet-arkiv-filter > label {
    flex: 0 0 100%;
    min-width: 0;
    margin-bottom: 4px;
  }

  .grunnet-arkiv-filter > input,
  .grunnet-arkiv-filter > select {
    flex: 0 0 100%;
  }
}

/* ======================================================
NESTED FILTER FIX — STEMME SEKTION STACK
====================================================== */

/* Hvis filter indeholder andre filters → column layout */
.grunnet-arkiv-filter:has(.grunnet-arkiv-filter) {
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Checkbox label skal stadig være pæn */
.grunnet-arkiv-filter > label:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1196px) {
  /* SELECTS (Alle dropdowns) må ikke auto-stretch */
  .grunnet-arkiv-filter select {
    min-width: 200px;
  }
}

/* ===== ADMIN TABS – SIDE OM SIDE HVIS DER ER PLADS ===== */
.grunnet-arkiv-admin-tabs {
  display: flex;
  flex-wrap: wrap; /* 🔥 tillad linjeskift */
  gap: 8px;
  margin-bottom: 20px;
}

.grunnet-arkiv-admin-tabs a {
  display: inline-flex;
  margin-right: 0;
}

/* Default = skjul */
.grunnet-filter-close {
  display: none;
}

/* Mobil = vis */
@media (max-width: 1000px) {
  .grunnet-filter-close {
    display: flex;
  }
}

/* Alt tekst normalt */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body label,
body button,
body input,
body select,
body textarea {
  text-transform: none;
}

/* UNDTA G header menu */
#menu-main-menu,
#menu-main-menu * {
  font-family: "Raleway";
  text-transform: uppercase;
  font-weight: bold;
}

/* UNDTA G logo */
.logo-wrap,
.logo-wrap * {
  font-family: "Raleway";
  font-size: 20px;
  color: white;
  font-weight: 800;
  line-height: inherit;
  text-transform: uppercase;
}

/* Desktop default */
.print-desktop {
  display: flex;
  gap: 10px;
}

/* Mobil hidden default */
.print-mobile {
  display: none;
  position: relative;
}

/* Dropdown menu */
.print-mobile-menu {
  display: none;
  position: absolute;
  top: 110%;
  right: 0;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}

.print-mobile-menu .btn-pill {
  width: 100%;
  justify-content: center;
}

/* Mobil breakpoint */
@media (max-width: 768px) {
  .print-desktop {
    display: none;
  }

  .print-mobile {
    display: block;
  }
}

button.btn-pill {
  font-family: inherit;
  border: 2px solid #000;
  background: #fff;
}

.btn-pill:hover {
  background: #000;
  color: #fff;
}

.grunnet-profile-details .profile-admin-row {
  display: flex;
  flex-wrap: wrap !important; /* 🔥 OVERRIDE nowrap */
  gap: 10px;
}

/* ======================================================
MOBIL – TOP ACTIONS LAYOUT (TILBAGE + PRINT ØVERST)
====================================================== */

@media (max-width: 768px) {
  /* Top container bliver grid */
  .grunnet-profile-details .profile-top-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "back print"
      "star star"
      "admin admin";
    gap: 14px;
    align-items: start;
  }

  /* Tilbage */
  .grunnet-profile-details .profile-top-actions > a {
    grid-area: back;
    justify-self: start;
    width: auto;
  }

  /* Print */
  .grunnet-profile-details .print-actions {
    grid-area: print;
    justify-self: end;
    width: auto;
  }

  /* ⭐ Stjerne + tekst blok */
  .grunnet-profile-details #favStar {
    grid-area: star;
  }

  /* Hvis din stjerne + tekst wrapper ikke har class
     så fanger vi den via style selector */
  .grunnet-profile-details .profile-top-actions > div:has(#favStar) {
    grid-area: star;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Admin knapper */
  .grunnet-profile-details .profile-admin-row {
    grid-area: admin;
    width: 100%;
  }
}

/* Desktop → vis normalt */
.profile-slideshow-admin {
  display: flex;
}

/* Mobil → skjul i original position */
@media (max-width: 992px) {
  .profile-slideshow-admin {
    display: none !important;
  }
}

/* Når JS flytter den → vis igen */
.profile-slideshow-admin.is-mobile-visible {
  display: flex !important;
}

/* FORCE disable column layout */
.grunnet-addprofile .grunnet-multicol {
  column-count: initial !important;
  columns: initial !important;
  -webkit-column-count: initial !important;
  -moz-column-count: initial !important;

  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}

/* container omkring billede + overlay */
.grunnet-arkiv-card-img-full {
  position: relative;
  overflow: hidden;
}

/* den hvide boks */
.grunnet-arkiv-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 45px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);

  transform: translateY(100%);
  transition: transform 0.35s ease;

  padding: 12px;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.15);
}

/* hover effekt */
.grunnet-arkiv-card:hover .grunnet-arkiv-card-body {
  transform: translateY(0);
}

/* MOBIL – vis info-boks automatisk */
@media (max-width: 768px) {
  .grunnet-arkiv-card-body {
    transform: translateY(0); /* altid synlig */
  }
}

.grunnet-arkiv-speaker-wrap img {
  width: 40px;
  height: 40px;
}

/* 👉 ALLE bokse (venstrestillet + større tekst) */
.grunnet-profile-details table {
  text-align: left;
  font-size: 16px;
}

.grunnet-profile-details td {
  text-align: left;
  font-size: 16px;
}

.grunnet-profile-details h1 {
  text-align: left;
  font-size: 20px;
}

/* 🚫 UNDTAGELSE: Stemmeprøver */
.profile-voices-box,
.profile-voices-box td,
.profile-voices-box h1 {
  text-align: center !important; /* behold centreret */
  font-size: 14px; /* evt. mindre hvis ønsket */
}

/* 👉 Sørg for ALLE værdier (højre kolonne) er venstrestillet */
.grunnet-profile-details table td:nth-child(2),
.grunnet-profile-details table td:nth-child(3),
.grunnet-profile-details table td:nth-child(4) {
  text-align: left !important;
}

/* ======================================================
✅ KUN ALIGN PÅ UDVALGTE BOKSE
====================================================== */

.profile-table--aligned {
  table-layout: auto;
  width: 100%;
}

/* LABEL (venstre kolonne) */
.profile-table--aligned td.paddingLeftHigh,
.profile-table--aligned td.paddingLeftHigh-max {
  width: 150px;
  min-width: 150px;
  max-width: 150px;

  white-space: nowrap;
  vertical-align: top;
}

/* VALUE (højre kolonne) */
.profile-table--aligned td:not(.paddingLeftHigh):not(.paddingLeftHigh-max) {
  width: auto;
  word-break: break-word;
}

/* spacing */
.profile-table--aligned td {
  padding: 8px 12px !important;
}

.opret-profil-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.opret-profil-row p {
  margin: 0;
  font-size: 1rem;
  color: #374151;
}

@media (max-width: 600px) {
  .opret-profil-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .opret-profil-row .grunnet-arkiv-btn {
    width: 100%;
    justify-content: center;
  }
}

.delete-image-btn {
  position: absolute;
  top: 6px;
  left: 6px;

  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  color: #000;

  cursor: pointer;
  z-index: 2;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.delete-image-btn:hover {
  background: #ffe5e5;
  color: #b91c1c;
}

.opret-profil-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.opret-profil-row p {
  margin: 0;
}

/* 🔥 HOLD DEM PÅ SAMME LINJE PÅ MOBIL */
@media (max-width: 600px) {
  .opret-profil-row {
    flex-direction: row; /* ← ændret fra column */
    align-items: center;
  }

  .opret-profil-row .grunnet-arkiv-btn {
    width: auto; /* ← fjern full width */
  }
}

.profile-admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 🔥 MOBIL FIX */
@media (max-width: 768px) {
  .profile-admin-row {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-admin-row .btn-pill {
    width: 50%;
  }
}

.profile-slideshow-admin {
  width: 100%;
}

/* mobil */
@media (max-width: 768px) {
  .profile-slideshow-admin {
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 990px) {

  /* 🔥 UNDTAG STEMMEPRØVER */
  .profile-voices-box table {
    display: table !important;
  }

  .profile-voices-box tbody {
    display: table-row-group !important;
  }

  .profile-voices-box tr {
    display: table-row !important;
  }

  .profile-voices-box td {
    display: table-cell !important;
  }

}

/* ======================================================
🔥 STEMMEPRØVER – DIV VERSION (DEN DU BRUGER)
====================================================== */

.voice-item {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f1f1;
}

.voice-item .voice-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Desktop */
.voice-audio {
  width: 400px;
}

/* 🔥 Mobil FIX */
@media (max-width: 500px) {
  .voice-audio {
    width: 300px;
  }
}

/* ======================================================
GENRE / MULTI-SELECT – MODERNE & RESPONSIVE
====================================================== */

.grunnet-multiselect {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* skjul checkbox */
.grunnet-multiselect input[type="checkbox"] {
  display: none;
}

/* pill */
.grunnet-multiselect label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 14px;
  border-radius: 999px;

  background: #f3f4f6;
  color: #374151;

  font-size: 0.8rem;
  font-weight: 500;

  border: 1px solid transparent;
  cursor: pointer;

  transition: all 0.2s ease;
  user-select: none;
}

/* hover (kun devices der understøtter hover) */
@media (hover: hover) {
  .grunnet-multiselect label:hover {
    background: #e5e7eb;
  }
}

/* valgt */
.grunnet-multiselect label:has(input:checked) {
  background: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}

/* klik feedback */
.grunnet-multiselect label:active {
  transform: scale(0.96);
}

/* ======================================================
💻 DESKTOP (lidt mere kompakt)
====================================================== */

@media (min-width: 900px) {
  .grunnet-multiselect label {
    padding: 6px 12px;
    font-size: 0.78rem;
  }
}

/* ======================================================
FORM FORBEDRINGER (behold dine)
====================================================== */

/* lidt mere luft mellem sektioner */
.grunnet-addprofile h2 {
  margin-top: 22px;
}

/* hover på inputs */
.grunnet-addprofile input:hover,
.grunnet-addprofile select:hover,
.grunnet-addprofile textarea:hover {
  border-color: #9ca3af;
}

/* checkbox cursor */
.grunnet-addprofile input[type="checkbox"] {
  cursor: pointer;
}

/* ======================================================
🔥 FIX: CHECKBOX GRID RESPONSIVE
====================================================== */

@media (max-width: 768px) {
  .grunnet-addprofile .grunnet-multicol {
    grid-template-columns: repeat(2, 1fr); /* 2 kolonner */
  }
}

@media (max-width: 480px) {
  .grunnet-addprofile .grunnet-multicol {
    grid-template-columns: 1fr; /* 1 kolonne */
  }
}

/* ======================================================
🔥 GENRE – SMART GRID MED "LONG" FIX
====================================================== */

@media (max-width: 640px) {

  .grunnet-multiselect {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .grunnet-multiselect label {
    width: 100%;
    padding: 10px 8px;
    font-size: 0.85rem;
    white-space: normal;
  }

  /* 🔥 MAGIC: lange items tager hele rækken */
  .grunnet-multiselect label.long {
    grid-column: 1 / -1;
  }

}

/* ======================================================
📱 MOBIL (2 kolonner)
====================================================== */

@media (max-width: 640px) {

  .grunnet-addprofile .grunnet-multiselect {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .grunnet-addprofile .grunnet-multiselect label {
    display: block !important;
    width: 100% !important;
    padding: 10px 8px;
    font-size: 0.85rem;
    white-space: normal !important;
  }

  /* 🔥 DEN VIGTIGE */
  .grunnet-addprofile .grunnet-multiselect label.long {
    grid-column: 1 / -1 !important;
  }

}

/* ======================================================
  GENRE INFO TEKST
====================================================== */

.grunnet-genre-info {
  font-size: 0.85rem;
  align-self: start;
  color: #6b7280;
  line-height: 1.4;
}

/* mobil */
@media (max-width: 640px) {
  .grunnet-genre-info {
    font-size: 0.8rem;
    margin-bottom: 6px;
  }
}

/* ======================================================
  FIX: GENRE BLOCK LAYOUT
====================================================== */

.grunnet-genre-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Sørg for den IKKE bliver presset ved siden af */
.grunnet-row-2 .grunnet-genre-block {
  grid-column: 1 / -1;
}