/* Dette er systemets core CSS – rediger aldrig denne fil manuelt. Brug custom.css til egne tilpasninger. */
/*
 * Survey.dk — delt designsystem for admin-panel og respondentflow.
 * Afledt direkte af det godkendte mockup ("Klassisk / Tillid"): ink-blå +
 * salvie-grøn, Source Serif 4 til overskrifter, Inter til brødtekst.
 * Håndskrevet CSS (ingen Tailwind-runtime) — se plan for begrundelse.
 * custom.css (assets/css/custom.css, redigerbar via Admin → CSS) indlæses
 * altid EFTER denne fil og vinder derfor ved konflikter — se
 * admin/superadmin/css.php og includes/models/CustomCss.php.
 */

:root {
    --ink: #16233F;
    --ink-light: #2C3B5C;
    --sage: #6B8F71;
    --sage-light: #F5F7F4;
    --paper: #FAFAF7;
    --card: #FFFFFF;
    --line: #E4E2DA;
    --muted: #6B7280;
    --danger: #B3432E;
    --danger-bg: #FFF5F0;
    --radius: 6px;
    --radius-lg: 14px;

    /* Alias-tokens til survey-header-kortet (se .survey-header-card
       nedenfor) — navngivet efter et mere generisk "surface/text-niveau"-
       mønster end resten af paletten ovenfor, men peger på de SAMME farver
       hvor et match findes, så kortet ikke introducerer en visuelt
       afvigende ny stil. --border-strong og --text-secondary har intet
       eksisterende modstykke og er derfor rigtige nye værdier, valgt til at
       ligge tydeligt imellem deres nabo-niveauer (linje/muted hhv. ink). */
    --surface-1: var(--card);
    --border: var(--line);
    --border-strong: #C9C6BA;
    --text-muted: var(--muted);
    --text-secondary: #4B5563;
    --text-primary: var(--ink);
}

* { box-sizing: border-box; }

/* Glidende i stedet for et hårdt hop, når en handling (fx "Tilføj spørgsmål")
   lander på en #anker efter en fuld side-genindlæsning — gælder både
   admin-panelet og respondentflowet. */
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    font-size: 15px;
}

h1, h2, h3 {
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }

a { color: var(--ink); }
p.sub, .text-muted { color: var(--muted); font-size: 14px; }

/* ---------- Buttons ---------- */
.btn {
    font-family: inherit; font-size: 14px; font-weight: 600;
    padding: 11px 22px; border-radius: var(--radius); border: 1px solid transparent;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-light); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--sage); }
.btn-ghost { background: transparent; color: var(--muted); border: none; }
button.collapse-toggle { font-size: 20px; line-height: 1; padding: 2px 8px; color: var(--ink, var(--muted)); }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--line); }
.btn-danger:hover { border-color: var(--sage); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
/* Endnu mindre variant — bruges til de fire handlingsknapper pr. række i
   survey-oversigten (surveys.php), som ellers dominerede rækkerne. */
.btn-xs { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Loading-tilstand for eksportknapperne på resultatsiden (<a>-baserede, kan
   derfor ikke bruge :disabled) — se assets/js/results-export.js. */
.js-results-export-btn.is-loading { opacity: .6; pointer-events: none; }

/* ---------- Forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--line);
    border-radius: var(--radius); font-family: inherit; font-size: 14.5px;
    color: var(--ink); background: #fff;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus, .option:focus-visible, .scale-cell:focus-visible {
    outline: 2px solid var(--sage); outline-offset: 1px; border-color: var(--sage);
}
.field { margin-bottom: 18px; }
.field-hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
/* Highlight af "Tillad åbent link"-feltet, når man ankommer fra det (endnu)
   deaktiverede "Åbent link"-menupunkt (?highlight=open_link, se
   render_general_tab() i admin/includes/builder/general_tab.php) — samme
   ramme-farve som .alert-success' grønne kant, for at pege tydeligt på hvad
   der skal slås til, uden en fuld, permanent baggrundsfarve. */
.field-highlight {
    padding: 12px; margin: -12px -12px 18px; border: 1px solid var(--sage); border-radius: var(--radius);
    background: var(--sage-light);
}
.field-highlight-tooltip { color: #1F3B24; }
/* "Smart" farvefelt (swatch + hex-tekstfelt, synkroniseret via
   assets/js/color-field-sync.js) — se render_color_field() i
   admin/includes/layout.php, bruges af Admin → "Farve og temaer". */
.color-input-pair { display: flex; align-items: center; gap: 8px; }
.color-swatch-input { flex-shrink: 0; width: 36px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: none; cursor: pointer; }
.color-hex-input { flex: 1; font-family: monospace; text-transform: lowercase; }
/* Farve-felt-grid til Admin → "Farve og temaer" (admin/superadmin/themes.php). */
.theme-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) {
    .theme-color-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Kompakt tema-kort-grid (Admin → "Farve og temaer") ---------- */
.theme-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 780px) {
    .theme-mini-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .theme-mini-grid { grid-template-columns: 1fr; }
}
.theme-mini-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 14px; display: flex; flex-direction: column; height: 100%;
}
.theme-mini-card-name { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.theme-swatch-strip { display: flex; gap: 6px; }
.theme-swatch-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); flex-shrink: 0; }
/* "Tilføj nyt tema"-kortet — samme ydre mål som .theme-mini-card, dashed
   kant i stedet for farvet indhold, da det ikke repræsenterer et rigtigt
   tema endnu. */
.theme-mini-add-card {
    width: 100%; height: 100%; min-height: 96px; background: none; cursor: pointer;
    border: 1.5px dashed var(--line); border-radius: var(--radius-lg); padding: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: var(--muted); font-size: 13px; font-weight: 500;
}
.theme-mini-add-card:hover { border-color: var(--sage); color: var(--ink); background: var(--sage-light); }
.theme-mini-add-icon { font-size: 22px; line-height: 1; color: #3f9142; font-weight: 700; }

/* Redigér-modal pr. tema-kort — samme "fixed overlay + centreret panel"-
   mønster som .copy-modal-overlay/.ai-preview-overlay. */
.theme-modal-overlay {
    position: fixed; inset: 0; background: rgba(22, 35, 63, .45); z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.theme-modal-panel {
    background: var(--card, #fff); border-radius: var(--radius-lg); max-width: 560px;
    width: 100%; max-height: 88vh; overflow-y: auto; padding: 24px;
}
.theme-modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.theme-modal-delete-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Hover-forklaringsboks (fx "Hvad betyder det?"-links) ---------- */
.help-tooltip { position: relative; display: inline-block; }
.help-tooltip-link { color: var(--muted); font-size: 12.5px; text-decoration: underline dotted; cursor: help; }
.help-tooltip-popup {
    visibility: hidden; opacity: 0; position: absolute; bottom: 100%; left: 0; margin-bottom: 8px;
    width: 320px; max-width: 80vw; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.55;
    padding: 12px 14px; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transition: opacity .15s ease; z-index: 20; font-weight: 400; text-align: left;
}
.help-tooltip:hover .help-tooltip-popup, .help-tooltip:focus-within .help-tooltip-popup { visibility: visible; opacity: 1; }

/* ---------- Cards / boxes ---------- */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 24px;
}
.alert { padding: 14px 16px; border-radius: var(--radius); font-size: 14px; }
.alert-error { background: var(--danger-bg); border: 1px solid #E8B4A0; color: #7A3B1E; }
.alert-success { background: #F0F5F0; border: 1px solid var(--sage); color: #1F3B24; }
/* Bevidst neutral/afdæmpet — IKKE rød/gul (ville fejlagtigt læses som en
   fejl-/advarselstilstand) — samme farveprincip som .badge-test, til fx
   "resultaterne herunder inkluderer syntetiske testrespondenter"-banneret
   i admin/results.php. */
.alert-info { background: var(--paper); border: 1px solid var(--line); color: var(--muted); }

/* ---------- "AI'en tænker..."-boks (assets/js/ai-generate.js) ---------- */
.ai-thinking-box {
    display: none; align-items: center; gap: 10px;
    background: var(--sage-light); border: 1px solid var(--sage); border-radius: var(--radius);
    padding: 12px 14px; margin-top: 12px; color: var(--ink-light); font-size: 14px;
}
.ai-thinking-icon { flex-shrink: 0; color: var(--sage); animation: ai-spin 1.4s linear infinite; }
@keyframes ai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ai-error-box {
    display: none; margin-top: 12px; padding: 10px 14px; font-size: 13.5px;
    background: var(--danger-bg); border: 1px solid #E8B4A0; color: #7A3B1E; border-radius: var(--radius);
}
/* Bruges når Claudes lette valideringskald (AiSurveyGenerator::
   validatePromptQuality()) vurderer en prompt for tynd — en venlig anmodning
   om mere information, ikke en fejl, derfor sage/neutral i stedet for rød. */
.ai-info-box {
    display: none; margin-top: 12px; padding: 10px 14px; font-size: 13.5px;
    background: var(--sage-light); border: 1px solid var(--sage); color: #1F3B24; border-radius: var(--radius);
}

/* ---------- Klikbare chip/kort-valg (AI-konklusion-dialogens options-trin,
   admin/results.php + Admin → AI's globale standarder) — se
   render_chip_group() i admin/includes/layout.php. ---------- */
.ai-conclusion-option-group { margin: 16px 0; }
.ai-conclusion-option-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.ai-chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ai-chip {
    display: block; position: relative; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius);
    cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.ai-chip:hover { border-color: var(--sage); }
.ai-chip input[type="radio"], .ai-chip input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ai-chip.is-selected { border-color: var(--sage); background: var(--sage-light); }
.ai-chip-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ai-chip.is-selected .ai-chip-title { color: #1F3B24; }
.ai-chip-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }

/* Perspektivér-til-branche-toggle (checkbox-drevet switch, ingen JS-
   bibliotek) + det betingede stikords-felt. */
.ai-conclusion-toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ai-conclusion-toggle-row input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ai-conclusion-toggle-switch {
    flex-shrink: 0; width: 36px; height: 20px; border-radius: 20px; background: var(--line); position: relative;
    transition: background .15s ease;
}
.ai-conclusion-toggle-switch::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.ai-conclusion-toggle-row input:checked + .ai-conclusion-toggle-switch { background: var(--sage); }
.ai-conclusion-toggle-row input:checked + .ai-conclusion-toggle-switch::before { transform: translateX(16px); }
#ai-conclusion-industry-wrap { margin-top: 10px; padding-left: 2px; }

/* AI-konklusion-kortboksen (resultatside: admin/results.php, og read-only i
   rapporter: SurveyAiConclusion::renderReportBox()) — hvid kortboks med en
   header-bjælke (ikon+label+dato, evt. rediger-/genstart-knapper) over selve
   HTML-indholdet. */
.ai-conclusion-box { padding: 18px 20px; }
.ai-conclusion-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }

/* Diskret chip-række der viser hvilke valg (længde/modtager/fokus/branche)
   konklusionen blev genereret med — KUN i denne kortboks på resultatsiden,
   se render_ai_conclusion_settings_chips() i admin/results.php. */
.ai-conclusion-settings-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px; }
.ai-conclusion-settings-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--surface-1); border: 1px solid var(--line); border-radius: 20px;
    padding: 2px 10px; font-size: 12px; color: var(--muted);
}
.ai-conclusion-settings-sep { color: var(--muted); font-size: 12px; }

/* Sprogvalg-linjen øverst i generér-dialogens options-trin ("Sprog: X ·
   Skift") + sprogvalg-popup'en der åbnes af "Skift" — se
   render_ai_conclusion_confirm_modal() i admin/results.php og
   assets/js/ai-conclusion.js. */
.ai-conclusion-language-line { font-size: 11px; color: var(--muted); margin: 0 0 16px; }
.ai-conclusion-language-line strong { color: var(--ink); font-weight: 600; }
.ai-conclusion-language-sep { color: var(--muted); }
.ai-conclusion-language-change-link {
    background: none; border: none; padding: 0; font: inherit; font-size: 11px;
    color: var(--sage); text-decoration: underline; cursor: pointer;
}
/* Egen overlay OVEN PÅ den allerede åbne confirm-modal (z-index højere end
   .copy-modal-overlay's 200) — se .ai-preview-overlay for samme
   "nested modal"-mønster andre steder i systemet. */
.ai-conclusion-language-modal { z-index: 220; }
.ai-conclusion-language-modal-title { margin: 0 0 14px; font-size: 14px; font-weight: 500; }
.ai-conclusion-language-chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ai-conclusion-language-chip {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--line);
    border-radius: var(--radius); background: none; cursor: pointer; font: inherit; font-size: 13.5px;
    color: var(--ink); transition: border-color .12s ease, background .12s ease;
}
.ai-conclusion-language-chip:hover { border-color: var(--sage); }
.ai-conclusion-language-chip.is-selected { border-color: var(--sage); background: var(--sage-light); }
.ai-conclusion-language-chip-flag { font-size: 18px; line-height: 1; }
.ai-conclusion-title { display: flex; align-items: center; font-weight: 600; color: var(--ink); }
.ai-conclusion-date { color: var(--muted); font-size: 13px; }
.ai-conclusion-content { line-height: 1.6; }
.ai-conclusion-content h3 { margin: 18px 0 8px; font-size: 16px; }
.ai-conclusion-content h3:first-child { margin-top: 0; }
.ai-conclusion-content p { margin: 0 0 10px; }
.ai-conclusion-editor .richtext-field { margin-bottom: 0; }
.ai-conclusion-export { display: flex; gap: 8px; }

/* Læs-visningens indhold klippes til 250px med et falmende overlay + en
   "fold ud"-pil nedenunder, når konklusionen er længere end det — kun i
   READ-ONLY-tilstand (redigeringstilstanden viser altid HELE indholdet, se
   assets/js/ai-conclusion.js). .is-expandable sættes af JS kun når
   indholdet faktisk overstiger de 250px (ellers ingen grund til pil/fade). */
.ai-conclusion-collapse { position: relative; }
.ai-conclusion-collapse.is-expandable.is-collapsed .ai-conclusion-content { max-height: 250px; overflow: hidden; }
.ai-conclusion-collapse.is-expandable.is-collapsed::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 32px; height: 70px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card));
    pointer-events: none;
}
.ai-conclusion-expand-toggle {
    display: none; align-items: center; justify-content: center; gap: 6px; width: 100%;
    margin-top: 8px; padding: 6px 0; border: none; background: none; cursor: pointer;
    color: var(--sage); font-size: 13px; font-weight: 600;
}
.ai-conclusion-collapse.is-expandable .ai-conclusion-expand-toggle { display: flex; }
.ai-conclusion-expand-toggle svg { transition: transform .15s ease; }
.ai-conclusion-collapse:not(.is-collapsed) .ai-conclusion-expand-toggle svg { transform: rotate(180deg); }
.badge {
    display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted);
    border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px;
}
.badge-success { color: #1F3B24; border-color: var(--sage); background: #F0F5F0; }
.badge-warn { color: #7A3B1E; border-color: #E8B4A0; background: var(--danger-bg); }
/* Diskret markering af syntetiske testrespondenter (TestRespondentGenerator,
   kun Beta/Tester-planen) — bevidst neutral/afdæmpet farve, IKKE rød/gul, så
   den ikke fejlagtigt læses som en fejl-/advarselstilstand. */
.badge-test { color: var(--muted); border-color: var(--line); background: var(--paper); text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- Tables ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
    text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .03em; padding: 0 12px 10px; border-bottom: 1px solid var(--line);
}
table.data td { padding: 12px; border-bottom: 1px solid var(--line); }
table.data tr:last-child td { border-bottom: none; }

/* ---------- Admin shell: rail navigation + top bar ---------- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-rail {
    width: 220px; flex-shrink: 0; border-right: 1px solid var(--line);
    background: var(--card); padding: 28px 16px; display: flex; flex-direction: column;
    /* Sticky i stedet for fixed: forbliver i venstre side mens .admin-main
       scroller uafhængigt, men er stadig en normal flex-item (så layoutet
       ikke skal duplikeres/kompenseres andre steder). Egen overflow-y:auto,
       så et langt menu-indhold (fx mange survey-scopede links) scroller
       internt i stedet for at skubbe "Log ud"/AI-credits-widgeten (nederst i
       navnet) ud af syne. */
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Logoet (logo_survey_dk_187.png, 187x64) vises i sin egen størrelse uden nogen
   styling på selve billedet — kun beholderen centrerer det og giver afstand nedad.
   line-height: 0 fjerner den lille ekstra plads under et inline-billede. */
.admin-rail-logo-wrap { text-align: center; line-height: 0; margin: 0 0 24px; }
.admin-rail nav { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.admin-rail a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius);
    color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
}
.admin-rail a:hover { background: var(--sage-light); color: var(--ink); }
.admin-rail a.active { background: var(--ink); color: #fff; }
.nav-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* "Indhold"-menupunktets undertekst: hvilken survey man aktuelt er inde på
   (se admin_nav_items() i layout.php). Nedtonet i normal tilstand, men skal
   forblive læselig når linket er aktivt (mørk baggrund). */
.nav-subtitle {
    font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 168px;
}
.admin-rail a.active .nav-subtitle { color: rgba(255, 255, 255, .75); }
/* "Åbent link"-menupunktet (se admin_nav_items() i layout.php): dæmpet
   gråtone + lås-ikon når surveyet ikke har slået åbent link til, ellers en
   lille grøn prik ved siden af teksten (samme grønne farve som
   .survey-header-status-dot.is-published i builderen, men uden puls —
   nav-punktet er synligt på hver eneste side, en konstant animation der ville
   distrahere for meget). */
.admin-rail a.nav-item-disabled { color: var(--muted); }
.admin-rail a.nav-item-disabled:hover { color: var(--ink); }
.nav-label-row { display: flex; align-items: center; }
.nav-lock-icon { font-size: 12px; margin-right: 4px; }
/* "Hjælp"-linket lige under AI-credits-tælleren (se admin_shell_start() i
   layout.php) — eneste rail-punkt med et rigtigt ikon (resten er ren tekst),
   så størrelsen holdes diskret for ikke at virke malplaceret ved siden af dem. */
.nav-help-link .ti-help-circle { font-size: 16px; }
.nav-help-link { margin-top: 4px; }
.nav-enabled-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: limegreen; margin-left: 6px; flex-shrink: 0; }
.admin-main { flex-grow: 1; padding: 40px 48px; max-width: 1350px; }
.admin-main.builder-wide { max-width: none; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }

/* ---------- Survey-header-kort ---------- */
/* Delt header for alle survey-undersider (survey-edit.php/respondents.php/
   email.php/results.php/report-edit.php — se render_survey_header_card() i
   admin/includes/layout.php). Erstatter den tidligere løse
   admin-topbar+h1-kombination på hver enkelt side med ét ensartet kort. */
.survey-header-card, .page-header-card {
    background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 12px;
    border-left: 3px solid var(--sage); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
/* Forenklet udgave til topniveau-sider uden survey-kontekst (se
   render_page_header_card()) — kun titel + kort undertekst, ingen
   breadcrumb/status/højre-side-indhold. */
.page-header-title { font-size: 22px; font-weight: 500; color: var(--text-primary); margin: 0 0 6px; line-height: 1.25; }
.page-header-subtitle { font-size: 13px; color: var(--text-secondary); margin: 0; }
.survey-header-breadcrumb { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.survey-header-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.survey-header-breadcrumb a:hover { text-decoration: underline; }
.survey-header-breadcrumb-sep { color: var(--border-strong); margin: 0 6px; }
.survey-header-breadcrumb-current { color: var(--text-secondary); }
.survey-header-card h1 {
    font-size: 22px; font-weight: 500; color: var(--text-primary); margin: 0 0 8px;
    font-family: inherit; line-height: 1.25;
}
.survey-header-subrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.survey-header-subpage { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); min-width: 0; }
.survey-header-subpage i { font-size: 15px; line-height: 1; flex-shrink: 0; }
.survey-header-sep { color: var(--border-strong); }
.survey-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.survey-header-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: var(--radius); text-decoration: none;
}
.survey-header-icon-btn img { width: 18px; height: 18px; object-fit: contain; }
.survey-header-icon-btn:hover { background: var(--sage-light); }
.survey-header-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.survey-header-status-dot.is-published { background: limegreen; animation: survey-header-pulse 1.6s ease-in-out infinite; }
.survey-header-status-dot.is-draft { background: #C9B458; }
.survey-header-status-dot.is-closed { background: var(--danger); }
.survey-header-status-text { white-space: nowrap; }
.survey-header-status-change { color: var(--text-primary); font-weight: 500; white-space: nowrap; }
@keyframes survey-header-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(50, 205, 50, .5); }
    50% { opacity: .6; box-shadow: 0 0 0 4px rgba(50, 205, 50, 0); }
}
@media (max-width: 720px) {
    .survey-header-subrow { align-items: flex-start; }
}


/* ---------- Survey-builder: to-panel split med live enhedspreview ---------- */
/* Bevidst IKKE align-items:flex-start: .builder-preview-wrap skal strække sig
   til samme højde som .builder-left (den lange spørgsmålskolonne), ellers har
   den sticky preview-rude (position:sticky nedenfor) intet at "følge med" i,
   når man scroller langt ned i et langt spørgeskema — den ville stoppe med
   at følge med, så snart man scroller forbi preview-rudens egen, korte
   naturlige højde. */
.builder-split { display: flex; gap: 32px; }
.builder-left { flex: 0 1 1100px; min-width: 0; max-width: 1100px; }
.builder-preview-wrap { flex: 1 1 320px; min-width: 300px; }
.preview-mobile-trigger { display: none; }

.device-toggle { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 16px; }
.device-toggle-btn {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--muted);
    cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; padding: 0;
}
.device-toggle-btn svg { width: 24px; height: 24px; }
.device-toggle-btn:hover { border-color: var(--sage); color: var(--ink); }
.device-toggle-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Vieweren centreres i den ledige plads: panelet fylder al resterende
   bredde, og enheds-"skallen" (skærm + evt. stativ/hjem-knap/hak) centreres
   heri med flex, uanset om enheden har en %-bredde (desktop) eller fast
   pixelbredde (tablet/mobil) — undgår cirkulær %-af-auto-bredde-beregning. */
.builder-preview-panel { width: 100%; position: sticky; top: 20px; }
.device-frame-outer { width: 100%; padding-bottom: 8px; }
.device-shell { display: flex; flex-direction: column; align-items: center; width: 100%; }
.device-frame {
    border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; background: #fff;
    box-shadow: 0 2px 14px rgba(22, 35, 63, .1); transition: width .2s ease, height .2s ease; max-width: 100%;
}
.device-frame iframe { display: block; width: 100%; height: 100%; border: none; }
.device-frame.device-desktop { width: 85%; height: 640px; border-radius: 8px; }
.device-frame.device-tablet { width: 600px; height: 780px; border-radius: 22px; border-width: 12px; }
.device-frame.device-mobile { width: 480px; height: 860px; border-radius: 34px; border-width: 12px; }

/* Diskrete enheds-detaljer, så rammerne mere ligner en rigtig PC/iPad/telefon */
.device-notch-bar { width: 90px; height: 8px; border-radius: 4px; background: var(--ink); opacity: .55; margin-bottom: 8px; }
.device-home-btn { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); opacity: .55; margin-top: 10px; }
.device-stand-neck { width: 64px; height: 28px; background: var(--ink); opacity: .9; }
.device-stand-base { width: 240px; max-width: 60%; height: 14px; border-radius: 7px; background: var(--ink); opacity: .9; margin-top: 2px; }

.preview-modal-close { display: none; }

/* Rapport-builder: samme to-panel mekanik som survey-builderen, blot uden
   enheds-toggle — rapporten er én visning (skærm/print), ikke tre. */
.report-preview-frame-outer { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.report-preview-frame-outer iframe { display: block; width: 100%; height: 900px; border: none; }

.na-toggle-btn { margin: -6px 0 14px; }
.na-toggle-btn.active { background: var(--sage); border-color: var(--sage); color: #fff; }

/* "Indsæt standardskala"-dropdown i matrix-kolonnesektionen — diskret,
   må ikke dominere UI'et. */
.scale-chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.scale-chip-label { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.scale-select { font-size: 12.5px; padding: 4px 8px; max-width: 260px; }
.scale-locked-hint { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; }
.link-btn {
    background: none; border: none; padding: 0; margin: 0; color: var(--sage);
    font-size: inherit; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.link-btn:hover { color: var(--ink); }
/* Smiley-header-række (se render_matrix() i question_render.php) — sidder
   direkte oven på tekst-header-rækken uden mellemrum, så de to rækker læses
   som ét sammenhørende, aligned kolonnehoved. */
.matrix-icon-row th { padding: 4px 6px 0; font-size: 19px; font-weight: 400; line-height: 1.2; }

/* ---------- Design-sektion: tema-presets (survey-edit.php Generelt-fane) ---------- */
.theme-preset-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-preset-option {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px;
    border: 1.5px solid var(--line); border-radius: var(--radius-lg); cursor: pointer; position: relative;
    transition: border-color .15s ease, background .15s ease;
}
.theme-preset-option:hover { border-color: var(--sage); }
.theme-preset-option.active { border-color: var(--ink); background: var(--sage-light); }
.theme-preset-swatch { display: flex; border-radius: 50%; overflow: hidden; width: 32px; height: 32px; border: 1px solid var(--line); }
.theme-preset-swatch span { flex: 1; }
.theme-preset-swatch-custom { align-items: center; justify-content: center; font-size: 16px; background: #F5F4F0; }
.theme-preset-name { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.theme-preset-option.active .theme-preset-name { color: var(--ink); font-weight: 600; }

@media (max-width: 1200px) {
    .builder-split { flex-direction: column; }
    .preview-mobile-trigger { display: inline-flex; }
    .builder-preview-panel { display: none; width: auto; position: static; }
    .builder-preview-panel.preview-modal-open {
        display: flex; justify-content: center; position: fixed; inset: 0; z-index: 300;
        background: rgba(22, 35, 63, .6); padding: 40px 20px; overflow: auto;
    }
    .preview-modal-open .preview-panel-inner { background: #fff; border-radius: 16px; padding: 20px; height: fit-content; width: 100%; max-width: 680px; }
    .preview-modal-open .preview-modal-close { display: inline-flex; }
}

/* ---------- Survey-builder: fold preview ind/ud + desktop-rammens proportioner ----------
   Samlet i ÉN blok og bevidst KUN additiv: ingen af reglerne ovenfor er ændret —
   alt her overstyrer via højere specificitet (klassen .builder-split foran).
   Rollback: slet denne blok, knappen (.preview-collapse-anchor) og scriptet lige
   efter den i admin/survey-edit.php. */

/* Desktop-rammens højde følger bredden (16:10) i stedet for de faste 640px, der
   på smalle paneler (fx 1080p, ca. 388px bred) gav et portrætformat der lignede en
   telefon. Gælder alle bredder inkl. modalen under 1200px. Tablet og mobil er
   uændrede. box-sizing er border-box (global regel), så forholdet gælder hele
   rammen inkl. kanten; iframen fylder resten (height:100%). */
.builder-split .device-frame.device-desktop { height: auto; aspect-ratio: 16 / 10; }

/* Foldeknappen: et sticky anker uden højde (følger panelets top:20px uden at
   skubbe det), med selve knappen placeret i højre kant af enheds-knaprækken. */
.preview-collapse-anchor { position: sticky; top: 20px; height: 0; z-index: 5; }
.preview-collapse-btn { position: absolute; top: 0; right: 0; }
.preview-collapse-btn .preview-icon-expand { display: none; }
.preview-collapsed .preview-collapse-btn .preview-icon-collapse { display: none; }
.preview-collapsed .preview-collapse-btn .preview-icon-expand { display: block; }

@media (min-width: 1201px) {
    /* Foldet ind: panelet skjules, højre kolonne skrumper til en 48px stribe med
       knappen alene, og editoren beholder sin max-bredde (1100px) centreret i
       pladsen til venstre for striben. */
    .builder-split.preview-collapsed .builder-preview-panel { display: none; }
    .builder-split.preview-collapsed .builder-preview-wrap { flex: 0 0 48px; min-width: 0; }
    .builder-split.preview-collapsed .builder-left { flex: 1 1 auto; max-width: 1100px; margin: 0 auto; }
}
@media (max-width: 1200px) {
    /* Under 1200px er preview allerede en modal med sin egen åbne-knap. */
    .preview-collapse-anchor { display: none; }
}

/* ---------- Survey-builder: 50/50-split + testlink i preview-panelet ----------
   Samme princip som blokken ovenfor: kun additiv, overstyrer via højere
   specificitet. Rollback: slet denne blok, og gendan render_survey_export_icons()/
   render_survey_testlink_line() (layout.php) samt fane-linjen og panel-markup i
   survey-edit.php fra git. */

/* Testlink-linjen mellem enhedsknapperne og iframen (render_survey_testlink_line()).
   En del af .builder-preview-panel, så den forsvinder sammen med panelet ved
   fold-ind og vises i modalen under 1200px. Bevidst lille og dæmpet, centreret
   under enhedsknapperne. Feltet er fleksibelt (ikke fast bredde), så det passer i
   både det smalle (300px) og det brede panel; en lang URL klippes blot i feltet —
   kopiér-knappen kopierer altid hele linket. Margin-top er negativ, fordi
   .device-toggle allerede har 16px margin nedad. */
.preview-testlink {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: -4px 0 12px; font-size: 11.5px; color: var(--muted);
}
.preview-testlink-label { white-space: nowrap; }
.preview-testlink input[type="text"] {
    flex: 1 1 auto; width: auto; min-width: 0; max-width: 360px; height: 24px;
    padding: 3px 8px; font-size: 11.5px; color: var(--muted);
}
.preview-testlink .copy-icon-btn { width: 22px; height: 22px; }
.preview-testlink .copy-icon-btn svg { width: 12px; height: 12px; }

/* Editor og preview deler pladsen 50/50 (efter de 32px mellemrum: calc(50% - 16px)
   på begge, ellers ville 50% + 50% + gap overflowe). Kun fra 1800px, hvor editoren
   stadig har plads til de lange faner (ca. 710px) — under det bevares det
   eksisterende layout. Ligger BEVIDST uden for ≤1200px-tilstanden (kolonne + modal):
   max-width ville ellers begrænse editoren til halv bredde i kolonnelayoutet.
   Foldet-ind-reglerne ovenfor (specificitet 0,3,0) vinder stadig over disse (0,2,0). */
@media (min-width: 1800px) {
    .builder-split .builder-left { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); }
    .builder-split .builder-preview-wrap { flex: 0 0 calc(50% - 16px); }
}

/* ---------- Respondent flow (from approved mockup) ---------- */
.rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: 64px; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; padding-top: 40px; gap: 28px;
}
.rail .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); position: relative; }
.rail .dot.done { background: var(--sage); }
.rail .dot.current { background: var(--ink); width: 11px; height: 11px; }
.rail .dot.current::after { content: ''; position: absolute; inset: -6px; border: 1px solid var(--ink); border-radius: 50%; }

/* box-sizing: content-box overstyrer den globale border-box-regel (linje 23)
   bevidst — ellers tæller den asymmetriske venstre-padding (96px, plads til
   .rail) OG højre-padding (24px) med INDENI max-width, så det faktiske
   indholdsområde reelt kun blev 640-24-96=520px i stedet for de tiltænkte
   640px. max-width refererer nu til selve indholdet, ikke boksen inkl. padding. */
.survey-wrap { box-sizing: content-box; max-width: 700px; margin: 0 auto; padding: 64px 24px 120px 96px; }
.survey-org { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); font-weight: 600; margin-bottom: 14px; }
.progress-label { margin-top: 28px; font-size: 13px; color: var(--muted); }
.progress-track { margin-top: 8px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--sage); transition: width .3s ease; }

.q { margin-bottom: 52px; padding-bottom: 52px; border-bottom: 1px solid var(--line); }
.q:last-of-type { border-bottom: none; }
.q-text { font-size: 19px; font-weight: 500; margin: 0 0 6px; letter-spacing: -.005em; }
.q-hint { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.q-required-error {
    font-size: 13px; color: var(--danger); background: var(--danger-bg); border: 1px solid #E8B4A0;
    border-radius: var(--radius); padding: 6px 10px; margin-top: 10px;
}

/* ---------- Indholdsblokke (overskrift/fritekst) mellem spørgsmål ---------- */
.content-block { margin-bottom: 52px; }
.content-block-heading { margin: 0 0 4px; font-size: 30px; }
.content-block-text { font-size: 16px; line-height: 1.6; color: var(--ink); }
.content-block-text h3 { margin: 0 0 8px; }

.options { display: flex; flex-direction: column; gap: 10px; }
.option {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line);
    border-radius: var(--radius); cursor: pointer; font-size: 15px; transition: border-color .15s ease, background .15s ease;
}
.option:hover { border-color: var(--sage); background: var(--sage-light); }
.option.selected { border-color: var(--ink); background: #F0EFEA; }
.radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #B9B6AC; flex-shrink: 0; position: relative; }
.option.selected .radio { border-color: var(--ink); }
.option.selected .radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.checkbox { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #B9B6AC; flex-shrink: 0; position: relative; }
.option.selected .checkbox { border-color: var(--ink); background: var(--ink); }
.option.selected .checkbox::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }

.scale-row { display: flex; gap: 8px; flex-wrap: wrap; }
.scale-cell { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.scale-cell:hover { border-color: var(--sage); }
.scale-cell.selected { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Valgfri tekst-forklaring under skalaens endepunkter (min_label/max_label,
   se render_scale() i question_render.php) — placeret under første/sidste
   celle, ikke under alle celler, da de kun beskriver endepunkterne. */
.scale-endpoint-labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--muted); }
.scale-endpoint-label { max-width: 45%; }
.scale-endpoint-label-max { text-align: right; }
/* Lodret skala med endepunkt-labels ved siden af tallet (se render_scale()'s
   $isVertical i question_render.php) — bruges i stedet for den vandrette
   linje + labels-under-hele-skalaen ovenfor, når skalaen er numerisk og har
   mindst én label sat. .scale-cell BEHOLDER sin normale, faste
   kvadrat-størrelse (44×44, uændret fra .scale-cell ovenfor) — det er kun
   selve RÆKKEN der stables lodret, og labelen der sidder som sideordnet
   tekst i samme linje som firkanten, ikke inde i den. */
.scale-row-vertical { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.scale-line { display: flex; align-items: center; gap: 10px; }
.scale-cell-label { color: var(--muted); font-size: 13px; }
/* NPS (0-10 + "Ved ikke"): smallere celler og ingen ombrydning, så hele
   skalaen kan stå på én linje uden vandret scroll (som viste sig ikke at
   virke godt) — cellerne er bevidst holdt små nok til at 12 elementer altid
   kan være med på én linje, selv i den smalleste enheds-forhåndsvisning
   (mobil, 480px). "Ved ikke" sizes efter sit eget tekstindhold (width: auto)
   i stedet for at dele den faste kvadratiske cellebredde, så teksten aldrig
   klippes. Falder tilbage til ombrydning på rigtigt smalle skærme. */
.scale-row-nps { flex-wrap: nowrap; gap: 4px; }
.scale-row-nps .scale-cell { width: 26px; height: 26px; font-size: 11px; flex-shrink: 0; }
.scale-row-nps .scale-dontknow { width: auto; padding: 0 8px; white-space: nowrap; margin-left: 4px; font-size: 11px; }
@media (max-width: 420px) {
    .scale-row-nps { flex-wrap: wrap; }
    .scale-row-nps .scale-dontknow { margin-left: 0; }
}
.scale-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; max-width: 340px; }
.scale-star { font-size: 30px; cursor: pointer; color: var(--line); }
.scale-star.selected, .scale-star.hover { color: #E8B84A; }
.scale-emoji { font-size: 30px; cursor: pointer; opacity: .35; }
.scale-emoji.selected { opacity: 1; }

.matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.matrix th { font-weight: 500; color: var(--muted); padding: 0 6px 12px; text-align: center; }
.matrix th:first-child { text-align: left; }
.matrix td { padding: 10px 6px; text-align: center; border-top: 1px solid var(--line); }
.matrix td:first-child { text-align: left; font-weight: 500; }
.matrix input[type=radio] { accent-color: var(--ink); width: 16px; height: 16px; }

/* ---------- Matrix på mobil: dropdown pr. udsagn i stedet for et trangt
   gitter. Begge udgaver findes altid i DOM'en (se render_matrix_desktop()/
   render_matrix_mobile() i question_render.php) — kun visningen styres her;
   assets/js/app.js's initMatrixMobileToggle() sørger for at deaktivere den
   skjulte udgaves inputs, så kun ét sæt svar indgår i indsendelsen. ---------- */
.matrix-mobile { display: none; }
@media (max-width: 720px) {
    .matrix-desktop { display: none; }
    .matrix-mobile { display: block; }
}
.matrix-mobile-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.matrix-mobile-row:first-child { border-top: none; }
.matrix-mobile-label { font-size: 14px; flex: 1; }
.matrix-mobile-select { flex-shrink: 0; max-width: 55%; }

.nav-buttons { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

.ranking-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ranking-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line);
    border-radius: var(--radius); background: #fff; cursor: grab; font-size: 15px;
}
.ranking-item.dragging { opacity: .4; }
.ranking-handle { color: var(--muted); font-size: 13px; }

/* Lille "×"-knap til at slette en enkelt svarmulighed/række i builderen */
.option-delete-btn {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; color: var(--muted);
    font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.option-delete-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.option-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }

/* ---------- Sideramme + luft mellem elementer (survey-builder) ----------
   Hver side er allerede et .card; .builder-page-card lægger en svag skygge
   oveni og en streg under sidens egen topbar, så "rammen om siden" træder
   tydeligere frem fra papirbaggrunden uden at ændre .card globalt. */
.builder-page-card { box-shadow: 0 1px 3px rgba(22, 35, 63, .07); }
.builder-page-card > .admin-topbar { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }

/* Hvert spørgsmål/overskrift/tekstblok er sin egen tydeligt afgrænsede boks
   (frem for blot en tynd streg mellem dem) med en svagt anderledes baggrund
   (samme farve som papiret udenfor sidens hvide kort) — det er DET der giver
   "luft imellem elementer": indholdet drukner ikke længere sammen. Skalerer
   stadig tætheden INDE i hvert kort — resten af adminpanelet (generelle
   indstillinger, login osv.) bruger fortsat de almindelige, mere luftige
   .field/label/input-regler ovenfor. */
.question-card {
    padding: 20px 20px 0px; margin-bottom: 16px;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper);
}
.question-card:last-child { margin-bottom: 0; }
.question-card .admin-topbar { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
/* Indholdstype-badges i toppen af hvert kort — erstatter den tidligere
   "Side X, spørgsmål Y"-tekst, som blev meningsløs så snart overskrifter/
   tekstblokke (der ikke er "spørgsmål Y" i nogens forstand) kunne indgå i
   samme rækkefølge. Første boks siger altid Overskrift/Tekst/Spørgsmål;
   anden, mindre markante boks viser kun den PRÆCISE spørgsmålstype, og kun
   for rigtige spørgsmål. */
.q-kind-badge, .q-type-badge {
    display: inline-flex; align-items: center; padding: 4px 12px; font-size: 12.5px;
}
.q-kind-badge { background: #fff; color: #000; font-weight: 600; border: 1px solid var(--line); border-radius: var(--radius); }
.q-type-badge { background: #F5F4F0; color: var(--muted); font-weight: 500; border: 1px solid var(--line); border-radius: 20px; }
/* "Gemt ✓"-indikatoren i spørgsmålskortets header-række (til venstre for
   "Flyt"-knappen, se render_question_card() i pages_tab.php). Badge'et er
   ALTID til stede i layoutet (aldrig display:none) — kun opaciteten
   animeres, så et fade-ind/-ud aldrig ændrer kortets højde. .is-visible
   sættes/fjernes af onQuestionSaved() i assets/js/builder-preview.js. */
.q-saved-badge { opacity: 0; transition: opacity 200ms ease; }
.q-saved-badge.is-visible { opacity: 1; }
.hint-toggle-link {
    background: none; border: none; padding: 0; margin: 0 0 8px; display: block;
    color: var(--sage); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.hint-toggle-link:hover { color: var(--ink); }

/* ---------- Åbent link-visning (survey-edit.php Generelt-fane) ---------- */
.open-link-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.open-link-text { font-size: 12.5px; color: #4B4B4B; word-break: break-all; }
.copy-icon-btn {
    flex-shrink: 0; width: 26px; height: 26px; padding: 0; border-radius: 4px; border: 1px solid var(--line);
    background: #fff; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.copy-icon-btn svg { width: 14px; height: 14px; }
.copy-icon-btn:hover { border-color: var(--sage); color: var(--ink); }
.copy-icon-btn.copied { border-color: var(--sage); color: var(--sage); }
.open-link-qr-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.open-link-qr-canvas { border: 1px solid var(--line); border-radius: var(--radius); }

/* "Link med baggrundsvariable" (render_open_link_prefill_section() i
   admin/includes/layout.php) — genbruger .variables-field-grid's layout
   for konsistens med baggrundsskema-fanens svarmulighed-grid. */
.prefill-var-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 560px) {
    .prefill-var-grid { grid-template-columns: 1fr; }
}

/* ---------- Simpel bold/italic/underline(/overskrift)-editor ---------- */
.richtext-field { margin-bottom: 4px; position: relative; }
.richtext-editor {
    min-height: 32px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 13.5px; background: #fff; outline: none; line-height: 1.4;
}
.richtext-editor:focus { border-color: var(--sage); }
.richtext-editor h3 { font-size: 22px; margin: 4px 0; font-family: 'Source Serif 4', serif; font-weight: 600; }
/* Flerlinjet variant (fx "Tilføj ny tekst"-tekstblokken) — skal ligne et
   rigtigt tekstfelt, ikke en enkelt-linje-input. */
.richtext-editor-multiline { min-height: 76px; align-content: flex-start; }
.richtext-toolbar { display: flex; gap: 4px; margin-top: 5px; }
.richtext-btn {
    min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px;
    background: #F5F4F0; color: var(--ink); font-size: 12.5px; font-family: Georgia, 'Source Serif 4', serif;
    cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.richtext-btn:hover { border-color: var(--sage); background: var(--sage-light); }
.richtext-btn[data-cmd="italic"] i { font-style: italic; }
.richtext-btn[data-cmd="underline"] u { text-decoration: underline; }
.richtext-btn[data-cmd="h3"] { font-weight: 700; }

/* Visuelt skjult, men stadig valideringsberettiget input, der spejler en
   contenteditable-editors indhold — bruges KUN så browserens native
   "Udfyld dette felt."-validering kan vises for et krævet richtext-felt
   (en <input type=hidden> kan per spec ikke selv bære et virkende
   "required"). Positioneres oven i editoren, så en evt. valideringsboble
   dukker op det rigtige sted. */
.richtext-required-proxy {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none;
    padding: 0; margin: 0; pointer-events: none; z-index: -1;
}

/* ---------- "Tilføj indhold"-sektion (spørgsmål/overskrift/tekst) ----------
   Skjult som default bag en lille grøn "+"-boks, så siden ikke drukner i tre
   permanent synlige formularer for hver eneste side i et langt spørgeskema.
   Ét sådant indsætningspunkt gentages FØR det første og EFTER hvert element
   på siden (se render_add_content_slot() i pages_tab.php), så nyt indhold
   kan indsættes hvor som helst i rækkefølgen — centreret, så det læses som
   et "indsæt her"-punkt mellem de to naboelementer, ikke endnu en knap i
   selve kortenes venstre/højre-orienterede knaprækker. */
.add-content-slot { display: flex; justify-content: left; margin: 18px 0; }
/* Samme baggrund/kant/hover som de almindelige .btn.btn-secondary-knapper
   (og .add-type-btn, se ovenfor) — kun formen (rund, ingen tekst) adskiller
   den fra dem. */
.add-content-toggle {
    width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--line);
    background: #fff; color: #3f9142; font-size: 18px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.add-content-toggle:hover { border-color: var(--sage); }
/* De tre type-vælger-knapper der glider ind fra venstre når "+" trykkes. */
.add-type-buttons { display: flex; align-items: center; gap: 8px; }
/* Samme visuelle stil som den almindelige .btn.btn-secondary.btn-sm (hvid
   baggrund, tynd kant, grøn "+"-ikon) — oprindeligt havde denne knap sin egen
   sage-udfyldte pille-stil, men rapport-builderens "Tilføj overskrift/
   kommentar/figur"-knapper (almindelige .btn.btn-secondary) blev vurderet
   pænere, så stilen er overført hertil for konsistens på tværs af begge
   buildere. */
.add-type-btn {
    font-family: inherit; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; color: var(--ink); font-size: 13px; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    animation: slide-in-left 200ms ease both;
}
.add-type-btn:nth-child(2) { animation-delay: 70ms; }
.add-type-btn:nth-child(3) { animation-delay: 140ms; }
.add-type-btn:hover { border-color: var(--sage); }
@keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* Luk-knap inline i type-vælgerrækken (ikke absolut-positioneret). */
.add-type-close {
    width: 26px; height: 26px; padding: 0; border-radius: 4px; border: 1px solid var(--line);
    background: #fff; color: var(--muted); font-size: 14px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    margin-left: 4px; animation: slide-in-left 200ms 210ms ease both;
}
.add-type-close:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
/* Selve den udfoldede tilføj-boks — kun ÉN elementtype ad gangen. Højre
   padding reserverer plads til luk-knappen (øverste højre hjørne), så den
   ikke overlapper "Tilføj"-knappen i formular-rækken. */
.add-content-grid {
    position: relative; width: 100%;
    padding: 16px 36px 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #dae3dc;
}
/* Formularen inde i boksen: label (fast bredde) + input (fleksibelt) + knap. */
.add-content-form {
    display: flex; align-items: start; gap: 10px; width: 100%;
}
.add-content-form label { width: 160px; flex-shrink: 0; margin: 7px 0 0; white-space: nowrap; font-weight: 600; font-size: 13px; }
.add-content-form select,
.add-content-form > input[type="text"] { flex: 1; }
.add-content-form > div { flex: 1; }
.add-content-form > button[type="submit"] { align-self: start; white-space: nowrap; flex-shrink: 0; }
/* Luk-knap: absolut-positioneret i boksens øverste højre hjørne. */
.add-content-close {
    position: absolute;
    right: 8px;
    top: 5px;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-content-close:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.richtext-editor.richtext-invalid { border-color: var(--danger); }
.section-divider { border: none; border-top: 2px solid var(--line); margin: 32px 0 24px; }
.question-card .field { margin-bottom: 10px; }
.question-card label { margin-bottom: 2px; font-size: 12px; }
.question-card input[type=text], .question-card input[type=number], .question-card textarea, .question-card select {
    padding: 5px 9px; font-size: 13.5px;
}
.question-card textarea { min-height: 40px; }
.question-card .option-row { margin-bottom: 3px; gap: 6px; }
.question-card .option-row input[type=text] { padding: 5px 8px; font-size: 13px; max-width: 320px; }
.question-card .option-delete-btn { width: 24px; height: 24px; font-size: 14px; }
.matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) {
    .matrix-grid { grid-template-columns: 1fr; }
}

/* ---------- Logik-visualisering ("Vis på én side"-forhåndsvisning) ---------- */
.logic-badge { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px; margin-bottom: 10px; display: inline-block; }
.logic-badge-activation { background: var(--sage-light); color: #1F3B24; border: 1px solid var(--sage); }
.logic-badge-skip-trigger { background: var(--danger-bg); color: #7A3B1E; border: 1px solid #E8B4A0; }
.logic-badge-skipped { background: #F3F3F1; color: var(--muted); border: 1px solid var(--line); }
.logic-preview-dimmed { opacity: .55; border-left: 3px dashed var(--line); padding-left: 16px; }

/* ---------- Baggrundsvariable (træk-og-slip-liste) ---------- */
.variables-list { list-style: none; margin: 0; padding: 0; }
.variables-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; background: #fff; cursor: grab; }
.variables-row.dragging { opacity: .4; }
.drag-handle { color: var(--muted); cursor: grab; font-size: 16px; user-select: none; }
.variables-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 560px) {
    .variables-field-grid { grid-template-columns: 1fr; }
}

/* ---------- E-mailsektion (respondentside) ---------- */
/* To tydelige sektioner ("Afsender"/"Indhold") pr. e-mail-komponist, se
   render_email_composer_section() i admin/includes/email_section.php. */
.email-section {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}
.email-section-sender { background: var(--sage-light); }
.email-section-content { background: var(--card); }
.email-sender-grid { display: flex; gap: 12px; }
.email-section .field-hint { color: var(--muted); }
/* Labels: 600-vægt/ink som ellers globalt standard, men eksplicit her jf.
   opgavebeskrivelsen — kun afstand OVER labels der ikke er sektionens første. */
.email-section label { font-weight: 600; color: var(--ink); margin-top: 14px; }
.email-section label.label-first { margin-top: 0; }

.email-merge-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 12px; }
.email-format-toolbar { display: flex; gap: 6px; margin: 0; padding: 10px 12px; }
.email-body-editable {
    width: 100%; min-height: 140px; padding: 11px 14px; border: 1px solid var(--line);
    border-radius: var(--radius); font-family: inherit; font-size: 14.5px; color: var(--ink); background: #fff;
}
.email-body-editable:focus { outline: 2px solid var(--sage); outline-offset: 1px; border-color: var(--sage); }
.email-body-editable p { margin: 0 0 10px; }

/* Flettefelt-toolbar + formaterings-toolbar + tekstfelt som ÉN samlet,
   omrandet komponent — border-radius kommer fra selve boksen (klippet via
   overflow:hidden), ikke fra hver enkelt del. */
.email-editor-box { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.email-editor-box .email-merge-toolbar,
.email-editor-box .email-format-toolbar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.email-editor-box .email-body-editable {
    border: none;
    border-radius: 0;
    background: var(--card);
    min-height: 220px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.email-composer-footer {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--line);
    background: var(--paper);
    padding: 14px 0 0;
    margin-top: 14px;
}

/* Alle knapper på e-mailsiden (Gem/Send forhåndsvisning/flettefelter/
   formatering/AI-knap) skal have samme lyse, neutrale baggrund — uanset om
   de ellers ville have været btn-primary/btn-secondary. */
.email-composer .btn { background: #f1f1f1; color: var(--ink); border-color: #e0e0e0; }
.email-composer .btn:hover { background: #e6e6e6; }
.ai-mail-write-btn.ai-mail-write-busy .ai-mail-write-icon { animation: ai-spin 1.4s linear infinite; }
.send-modal-kind-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.ai-credits-widget { margin-top: auto; padding: 10px 8px; font-size: 12px; color: var(--muted, #6B7280); }
.ai-credits-label { display: block; font-weight: 600; margin-bottom: 4px; }
.ai-credits-value { margin-bottom: 6px; }
.ai-credits-bar { height: 5px; border-radius: 3px; background: #E5E7EB; overflow: hidden; }
.ai-credits-bar-fill { height: 100%; border-radius: 3px; transition: width .2s ease; }
.ai-credits-bar-neutral { background: #7C9A82; }
.ai-credits-bar-amber { background: #D9A441; }
.ai-credits-bar-red { background: #C0503A; }

.ai-btn-exhausted { opacity: .5; cursor: not-allowed; }

/* ---------- AI-CREDIT-BADGE ----------
   Tilføjet af det globale JS-snippet i admin_shell_end() (admin/includes/
   layout.php) til ethvert element med data-ai-credits. Ligger bevidst her i
   app.css og IKKE i custom.css: custom.css er en GENERERET output-fil
   (databasen er master, se includes/models/CustomCss.php) der overskrives
   fuldstændigt, hver gang en super-admin gemmer/nulstiller i
   "Admin → CSS"-panelet — en regel skrevet direkte i filen ville forsvinde
   ved næste redigering dér. .ai-credit-hint-wrap er en usynlig
   hjælpe-wrapper (indsat af samme snippet) der holder knappen + teksten
   sammen i én kolonne, så teksten lander UNDER knappen uden at forrykke
   andre knapper i en vandret række, den evt. sidder i (fx "+ Omskriv" ved
   siden af "Flyt"/"Kopier"/"Slet spørgsmål"). */
.ai-credit-hint-wrap { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; }
.ai-credit-hint { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: center; letter-spacing: 0.02em; }

.ai-lang-checkboxes { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 4px; }
.ai-lang-checkbox-item { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 14px; }

.question-card.ai-newly-added { outline: 2px solid #7C9A82; outline-offset: 2px; transition: outline-color 2.5s ease; }
.ai-rewrite-panel { margin: 10px 0 16px; padding: 12px; background: #F7F7F5; border: 1px solid var(--line); border-radius: var(--radius); }
.ai-rewrite-suggestion-text { font-size: 14px; }

@media (max-width: 720px) {
    .rail { display: none; }
    .survey-wrap { padding: 40px 20px 100px; }
    .admin-shell { flex-direction: column; }
    /* På mobil er rail'en en vandret top-bjælke, ikke en venstre-kolonne —
       sticky/100vh-højden fra desktop-reglen ovenfor giver ingen mening her
       (og ville stjæle halvdelen af skærmen), så den nulstilles til normal
       dokumentflow. */
    .admin-rail {
        width: 100%; flex-direction: row; overflow-x: auto; padding: 12px;
        position: static; height: auto;
    }
    .admin-rail nav { flex-direction: row; }
    .admin-main { padding: 24px 20px; }
}

/* Betinget logik: skjuler et spørgsmål/step uanset stepperens egen inline-style */
.logic-hidden { display: none !important; }

.page-break-divider { display: flex; align-items: center; gap: 12px; margin: 32px 0; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.05em; }
.page-break-divider::before, .page-break-divider::after { content: ''; flex: 1; border-top: 1px dashed currentColor; opacity: 0.4; }

/* Sideskift-markør i builderens egen side-liste — tydeligt adskilt fra siderne selv */
.builder-page-break {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin: 48px 0; padding: 14px 0; color: var(--sage); font-weight: 600;
    font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.builder-page-break::before, .builder-page-break::after { content: ''; flex: 1; max-width: 120px; border-top: 2px solid var(--sage); opacity: 0.5; }
/* "Fjern sideskift"-linket på selve separatoren — bevidst diskret (lille,
   ingen store bogstaver/fed skrift som resten af separatoren), da det er en
   sjælden handling der ikke skal dominere visuelt. */
.page-break-remove-link {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--muted); font-weight: 400; font-size: 11px; text-transform: none;
    letter-spacing: normal; text-decoration: underline; opacity: 0.75; white-space: nowrap;
}
.page-break-remove-link:hover { opacity: 1; color: var(--ink); }

/* Alpine: skjuler indhold indtil Alpine er initialiseret (undgår "flash") */
[x-cloak] { display: none !important; }

.btn-plus-icon { color: #3f9142; font-weight: 700; margin-right: 6px; }

/* Kopiér-dialog (survey-builder). Positionering ligger bevidst i en klasse
   (ikke inline style) — Alpines x-show overskriver kun inline "display",
   og ville ellers også fjerne vores egen "display:flex" ved skjul/vis. */
.copy-modal-overlay {
    position: fixed; inset: 0; background: rgba(22, 35, 63, .45); z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.copy-tree-item { font-size: 13.5px; padding: 6px 0 2px; color: var(--ink); }
.insert-here-btn { display: block; width: 100%; text-align: left; font-size: 12px; border-style: dashed; margin-bottom: 4px; }

/* ---------- AI-survey preview-overlay (admin/surveys.php's create_from_ai)
   ---------- overlay-positionering/display SKAL leve her (ikke inline
   style="display:flex"), samme begrundelse som .copy-modal-overlay: JS
   toggler kun overlay.style.display direkte, uden nogen Alpine-x-show
   involveret her, men konventionen holdes alligevel. */
.ai-preview-overlay {
    position: fixed; inset: 0; background: rgba(22, 35, 63, .7); z-index: 210;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ai-preview-panel {
    background: var(--card, #fff); border-radius: var(--radius-lg); max-width: 720px;
    width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.ai-preview-header {
    position: sticky; top: 0; display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
    padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--card, #fff); z-index: 1;
}
.ai-preview-header-col { display: flex; flex-direction: column; gap: 6px; }
.ai-preview-build-hint, .ai-preview-price { font-size: 12.5px; color: var(--muted); }
.ai-preview-price .help-tooltip { margin-left: 4px; }
.ai-preview-price .help-tooltip-popup { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 8px; }
.ai-preview-body { padding: 24px; overflow-y: auto; }
.ai-preview-summary { margin: -8px 0 20px; }
.ai-preview-page { margin-bottom: 26px; }
.ai-preview-page-title { font-size: 15px; color: var(--muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .03em; }
.ai-preview-question { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.ai-preview-question:last-child { border-bottom: none; }
.ai-preview-question-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ai-preview-q-number { font-weight: 600; }
.ai-preview-q-text { font-weight: 600; }
.ai-preview-heading { font-size: 22px; margin: 22px 0 10px; }
.ai-preview-textblock { color: var(--ink); margin-bottom: 14px; }
.ai-preview-logic-note { font-size: 12.5px; color: var(--muted); font-style: italic; margin: -4px 0 10px; }
.ai-preview-options { display: flex; flex-direction: column; gap: 6px; }
.ai-preview-option { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ai-preview-option input { pointer-events: none; }
/* Svarmarkører i survey-eksportens print/PDF-visning (SurveyExportRenderer::
   render_survey_export_answer_area()) — bevidst rene <span> frem for
   <input type="radio"/"checkbox">, da browsere renderer disse inkonsistent
   ved print. Cirkel for single_choice, kvadrat for multi_choice. */
.export-answer-mark {
    display: inline-block; width: 12px; height: 12px; flex-shrink: 0;
    border: 1.5px solid #333; background: none;
}
.export-answer-mark-circle { border-radius: 50%; }
.export-answer-mark-square { border-radius: 0; }
.ai-preview-ranking { padding-left: 20px; }
.ai-preview-scale { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-preview-scale-point {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--muted);
}
.ai-preview-input { width: 100%; max-width: 320px; background: #F5F4F0; color: var(--muted); }
.ai-preview-file { display: inline-block; padding: 8px 14px; background: #F5F4F0; border-radius: var(--radius); }
.ai-preview-matrix-wrap { overflow-x: auto; }
.ai-preview-matrix { border-collapse: collapse; font-size: 13px; }
.ai-preview-matrix th, .ai-preview-matrix td { padding: 8px 10px; border: 1px solid var(--line); text-align: center; }
.ai-preview-matrix th:first-child, .ai-preview-matrix td:first-child { text-align: left; }
.ai-preview-matrix input { pointer-events: none; }
.ai-preview-loading { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---------- Survey-eksport (Word-forhåndsvisning/print/PDF) ---------- */
/* Genbruger .ai-preview-*-klasserne ovenfor (samme layout/stil som
   AI-preview-overlayet) — denne wrapper-klasse tilføjer KUN det, der er
   særligt for eksport-visningen: en stor dokumenttitel og en skillelinje
   under hvert sidenavn, se render_survey_export_html() i
   includes/SurveyExportRenderer.php. Scopet til .survey-export-view, så
   AI-preview-overlayets eksisterende udseende andre steder ikke ændres. */
.survey-export-view { max-width: 720px; margin: 0 auto; }
.survey-export-title {
    font-family: 'Source Serif 4', Georgia, serif; font-size: 32px; font-weight: 600;
    color: var(--text-primary); margin: 0 0 32px;
}
.survey-export-view .ai-preview-page-title {
    border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.survey-export-page-desc { color: var(--text-secondary); margin: -4px 0 16px; }
.survey-export-hint { font-size: 13px; color: var(--text-muted); margin: -4px 0 10px; }

/* Sideskift i survey-eksportens print/PDF-visning (window.print() i
   admin/export-survey-print.php) — hvert spørgsmål inkl. svarmuligheder
   skal behandles som én udelelig blok, og sideskift må kun ske MELLEM
   spørgsmål. Matrix-tabeller holdes samlet hvis muligt, men må brydes
   mellem rækker (aldrig midt i en række) hvis de er for høje til én side. */
@media print {
    .survey-export-view .ai-preview-question {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .survey-export-view .ai-preview-question-head {
        page-break-after: avoid;
    }
    .survey-export-view .ai-preview-matrix-wrap,
    .survey-export-view .ai-preview-matrix {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .survey-export-view .ai-preview-matrix tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* "Ikke bygget: [titel]"-linjen under prompt-tekstfeltet (se assets/js/
   ai-survey-preview.js's localStorage-drevne vis/skjul-logik) — bevidst
   diskret, en <button> for tilgængelighed men uden knap-udseende. */
.ai-draft-indicator {
    display: none; align-items: center; gap: 8px; width: 100%; text-align: left;
    margin-top: 10px; padding: 8px 12px; font-size: 13px; color: var(--muted);
    background: var(--sage-light); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.ai-draft-indicator svg { flex-shrink: 0; }

/* Udskriv-knappen i preview-overlayets header isolerer KUN
   .ai-preview-body ved print — resten af siden (og selve overlay-headeren
   med knapperne) skjules via denne "printing"-klasse, som assets/js/
   ai-survey-preview.js sætter på <body> lige før window.print() og fjerner
   bagefter. Bruger "visibility:hidden på alt + visibility:visible på
   overlayet igen"-teknikken (IKKE display:none på body's direkte børn) —
   overlayet ligger nemlig indlejret dybt inde i .admin-shell/<main>, ikke
   som en direkte barn af <body>, så et display:none-baseret filter ville
   ramme den fælles forælder og gøre HELE siden (inkl. overlayet) blank ved
   print, hvilket var netop den bug denne tilgang retter. visibility nedarves
   men kan gøres synlig igen af et efterkommer-element, selvom en forælder
   har visibility:hidden — display:none tillader ikke det samme. */
@media print {
    body.printing-ai-preview * { visibility: hidden !important; }
    body.printing-ai-preview .ai-preview-overlay,
    body.printing-ai-preview .ai-preview-overlay * { visibility: visible !important; }
    body.printing-ai-preview .ai-preview-overlay {
        position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important;
        width: 100% !important; height: auto !important; background: none !important; padding: 0 !important;
        display: block !important;
    }
    body.printing-ai-preview .ai-preview-panel {
        max-height: none !important; max-width: none !important; width: 100% !important; box-shadow: none !important;
    }
    body.printing-ai-preview .ai-preview-header { display: none !important; }
    body.printing-ai-preview .ai-preview-body { overflow: visible !important; padding: 20px !important; }
}

/* Mørk baggrund — valgbar pr. survey (tema-indstilling i builderen) */
body.theme-dark { background: var(--ink); color: var(--paper); }
body.theme-dark .card, body.theme-dark .option, body.theme-dark .scale-cell,
body.theme-dark input, body.theme-dark textarea, body.theme-dark select {
    background: #1F2E4D; border-color: #3A4A6B; color: var(--paper);
}
body.theme-dark .q-hint, body.theme-dark .sub, body.theme-dark .text-muted { color: #A9B4CC; }
body.theme-dark .progress-track { background: #2C3B5C; }
/* Globalt sidehoved/-fod med rå HTML fra Admin → "Design" (super-admin, se
   ThemeSettings/render_site_header()+render_site_footer() i survey/s.php).
   Vises på ALLE sider i respondentflowet, uden for .survey-wrap. Sticky i
   toppen/bunden af skærmen — tomme (ingen indhold) som standard. Header
   pakkes sammen med test-mode-banneret i .site-sticky-top, så banneret
   altid forbliver helt i toppen selv med en sticky header (to uafhængige
   sticky-elementer med top:0 ville ellers overlappe i stedet for stable). */
.site-sticky-top { position: sticky; top: 0; z-index: 20; }
.header, .footer { background: var(--paper); }
.footer { position: sticky; bottom: 0; z-index: 20; }
/* Survey-specifikt hvidmærkningslogo (theme['logo_url'], uploadet af
   organisationen selv) — vises lige under det globale sidehoved. */
.survey-logo-header { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 32px; margin-bottom: 12px; }
.survey-logo { display: block; max-height: 100px; width: auto; margin: 0; }
/* "single"-layoutet indsætter selv platformslogoet i sin egen faste topbjælke
   og har derfor ikke .survey-logo-header omkring — her skal det manuelle
   hvidmærkningslogo (hvis sat) i stedet have sin egen margin i toppen. */
.survey-logo-standalone { margin: 76px auto 16px; }

/* Print (rapport-builder → "gem som PDF") */
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
}

/* ---------- Offentlig forside (index.php) ---------- */
.landing-nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 250, 247, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.landing-nav-inner { max-width: 1120px; margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; }
.landing-logo-img { height: 32px; width: auto; display: block; }
/* Diskret betatest-signal i navbaren, se beta_invite_only() i
   includes/functions.php — vises kun mens registrering er lukket. */
.landing-beta-badge {
    display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em;
    color: var(--sage); border: 1px solid var(--sage); border-radius: 20px; padding: 2px 9px;
    text-transform: uppercase;
}

/* Forsiden er bevidst desktop-only (se index.php's kommentar) — under
   1024px vises denne besked som et OVERLAY oven på siden. Det er en
   ADVARSEL, ikke en spærring: siden bagved er stadig fuldt til stede og
   brugbar, bare ikke responsivt optimeret — "Fortsæt alligevel"
   (assets/js/landing.js) tilføjer .landing-mobile-block-dismissed på
   <html>, som skjuler overlayet igen. Ingen anden responsiv regel findes
   for forsiden — selve sideindholdet forbliver uændret/desktop-layoutet,
   uanset bredde. */
.landing-mobile-block { display: none; }
@media (max-width: 1023px) {
    .landing-mobile-block {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        position: fixed; inset: 0; z-index: 500;
        min-height: 100vh; min-height: 100dvh; text-align: center; padding: 40px 32px; gap: 14px;
        background: var(--paper);
    }
    html.landing-mobile-block-dismissed .landing-mobile-block { display: none; }
    .landing-mobile-block-logo { height: 36px; width: auto; margin-bottom: 10px; }
    .landing-mobile-block-heading {
        font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 600;
        color: var(--ink); max-width: 380px; line-height: 1.4; margin: 0;
    }
    .landing-mobile-block-subtext { color: var(--muted); font-size: 14px; margin: 0; }
    .landing-mobile-block-dismiss {
        margin-top: 10px; background: none; border: none; color: var(--muted);
        font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 4px;
    }
}
.landing-nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.landing-nav-links a:not(.btn) { color: var(--ink); text-decoration: none; }
.landing-nav-links a:not(.btn):hover { color: var(--sage); }

.landing-hero { max-width: 720px; margin: 0 auto; padding: 100px 32px 80px; text-align: center; }
.landing-eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); font-weight: 600; margin-bottom: 18px; }
.landing-hero h1 { font-size: 44px; line-height: 1.15; margin: 0 0 20px; }
.landing-hero-sub { font-size: 18px; color: var(--muted); line-height: 1.6; margin: 0 0 32px; }

.landing-section-title { text-align: center; font-size: 30px; margin: 0 0 48px; }

.landing-features { max-width: 1120px; margin: 40px auto 0; padding: 0 32px 100px; }
.landing-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.landing-feature-card { padding: 8px; }
.landing-feature-icon { width: 52px; height: 52px; border-radius: 14px; background: #EEF2ED; color: var(--sage); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.landing-feature-icon svg { width: 26px; height: 26px; }
.landing-feature-card h3 { font-size: 17px; margin: 0 0 8px; }
.landing-feature-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* AI-fokus-sektion — primære selling point, bevidst visuelt distinkt fra
   resten af siden (samme ink-blå baggrund som var(--ink), se Del 4). */
.landing-ai-focus { background: var(--ink); color: #fff; padding: 90px 32px; }
.landing-ai-focus .landing-section-title { color: #fff; }
.landing-ai-features-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.landing-ai-feature-card { text-align: center; padding: 0 12px; }
.landing-ai-feature-icon {
    width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .1); color: #9FE0B0;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.landing-ai-feature-icon svg { width: 26px; height: 26px; }
.landing-ai-feature-card h3 { font-size: 17px; margin: 0 0 8px; color: #fff; }
.landing-ai-feature-card p { color: #B9C2D6; font-size: 14.5px; line-height: 1.6; margin: 0; }

.landing-steps-section { background: var(--ink); color: #fff; padding: 90px 32px; }
.landing-steps-section .landing-section-title { color: #fff; }
.landing-steps { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; position: relative; }
.landing-step { text-align: center; padding: 0 12px; }
.landing-step-number {
    width: 44px; height: 44px; border-radius: 50%; background: var(--sage); color: #fff; font-family: 'Source Serif 4', serif;
    font-weight: 600; font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.landing-step h3 { font-size: 17px; margin: 0 0 8px; }
.landing-step p { color: #B9C2D6; font-size: 14.5px; line-height: 1.6; margin: 0; }

.landing-pricing { max-width: 1120px; margin: 0 auto; padding: 20px 32px 110px; }
.landing-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; }
.landing-price-card { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 32px 28px; display: flex; flex-direction: column; background: #fff; }
.landing-price-card.highlighted { border-color: var(--sage); border-width: 2px; box-shadow: 0 8px 28px rgba(107, 143, 113, .16); }
.landing-price-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--sage); color: #fff;
    font-size: 11.5px; font-weight: 600; letter-spacing: .03em; padding: 4px 14px; border-radius: 20px;
}
.landing-price-card h3 { font-size: 19px; margin: 0 0 10px; }
.landing-price { font-family: 'Source Serif 4', serif; font-size: 32px; font-weight: 600; margin-bottom: 20px; }
.landing-price span { font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; color: var(--muted); }
.landing-price-features { list-style: none; margin: 0 0 28px; padding: 0; flex: 1; }
.landing-price-features li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.landing-price-features li:first-child { border-top: none; }
.landing-price-features li.ai-highlight { color: var(--sage); font-weight: 600; }
.landing-price-features li.ai-highlight .ai-highlight-star { margin-right: 6px; }

/* Studierabat */
.landing-study { max-width: 720px; margin: 0 auto; padding: 20px 32px 110px; text-align: center; }
.landing-study-text { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 28px; }
.landing-study-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Kontaktformular */
.landing-contact { max-width: 560px; margin: 0 auto; padding: 20px 32px 110px; }
.landing-contact-form { display: flex; flex-direction: column; gap: 4px; }
.landing-contact-form button[type="submit"] { margin-top: 10px; width: 100%; justify-content: center; }
.landing-contact-alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: 14.5px; }
.landing-contact-alert.success { background: var(--sage-light); border: 1px solid var(--sage); color: #1F3B24; }
.landing-contact-alert.error { background: #FBEAEA; border: 1px solid #D98C8C; color: #7A2020; }
/* Honeypot: usynligt for rigtige besøgende (ikke bare display:none, som
   nogle spam-bots springer over) men stadig teknisk til stede i DOM'en. */
.landing-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Studierabat-popup (uddannelsesinstitutioner, se index.php + landing.js) */
.landing-edu-modal-backdrop {
    display: none; position: fixed; inset: 0; z-index: 600; background: rgba(22, 35, 63, .55);
    align-items: center; justify-content: center; padding: 32px;
}
.landing-edu-modal-backdrop.open { display: flex; }
.landing-edu-modal {
    background: #fff; border-radius: 14px; max-width: 640px; width: 100%; max-height: 80vh;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.landing-edu-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.landing-edu-modal-header h3 { margin: 0; font-size: 18px; }
.landing-edu-modal-close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.landing-edu-search { margin: 16px 24px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.landing-edu-modal-body { overflow-y: auto; padding: 16px 24px 24px; }
.landing-edu-group { margin-bottom: 20px; }
.landing-edu-type-badge {
    display: inline-block; color: #fff; font-size: 12px; font-weight: 600; padding: 3px 11px;
    border-radius: 20px; margin-bottom: 10px;
}
.landing-edu-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.landing-edu-list li { font-size: 14px; color: var(--ink); padding: 4px 0; break-inside: avoid; }

.landing-footer { background: #F0EFE9; border-top: 1px solid var(--line); padding: 70px 32px 32px; }
.landing-footer-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.landing-footer-grid h4 { font-size: 14px; margin: 0 0 12px; }
.landing-footer-grid p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0 0 8px; }
.landing-footer-bottom { max-width: 1120px; margin: 50px auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
    .landing-nav-links { gap: 14px; font-size: 13px; }
    .landing-hero h1 { font-size: 32px; }
    .landing-hero { padding: 70px 20px 60px; }
}

/* ---------- SurveyBotty (rigtig AI-assistent, kun admin-panelet, se
   includes/SurveyBotty.php + assets/js/surveybotty.js) ---------- */
.surveybotty-widget { position: fixed; right: 24px; bottom: 24px; z-index: 400; }
.surveybotty-toggle {
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(22, 35, 63, .35);
    animation: surveybotty-pulse 2.6s ease-in-out infinite;
}
.surveybotty-toggle svg { width: 26px; height: 26px; }
.surveybotty-toggle.active { animation: none; background: var(--sage); }
@keyframes surveybotty-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(22, 35, 63, .35), 0 0 0 0 rgba(107, 143, 113, .45); }
    50% { box-shadow: 0 6px 18px rgba(22, 35, 63, .35), 0 0 0 10px rgba(107, 143, 113, 0); }
}
/* 480px total widget-højde, jf. opgavebeskrivelsen — header (~50px) +
   footer/input (~52px) + linket under den er trukket fra, resten går til
   den scrollbare .surveybotty-modal-body. */
.surveybotty-modal {
    display: none; position: absolute; right: 0; bottom: 72px; width: 340px; height: 480px;
    background: #fff; border-radius: 14px; box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
    flex-direction: column; overflow: hidden;
}
.surveybotty-modal.open { display: flex; }
.surveybotty-modal-header {
    background: var(--ink); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.surveybotty-modal-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.surveybotty-modal-title svg { width: 18px; height: 18px; }
.surveybotty-modal-title .landing-beta-badge { color: #9FE0B0; border-color: #9FE0B0; }
.surveybotty-modal-close { background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; opacity: .8; }
.surveybotty-modal-close:hover { opacity: 1; }
.surveybotty-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--sage-light); }
/* overflow-wrap: et bot-svar kan indeholde lange, mellemrumsløse tokens
   (fx "Formel/Executive/Pædagogisk/Eksplorativ") som ellers stak ud over
   boblens højre kant i stedet for at blive brudt — normal/break-word bryder
   kun ordet som allersidste udvej, når det ikke kan være på sin egen linje.
   assets/js/surveybotty.js indsætter desuden <wbr> efter "/" i selve
   bot-svarets tekstknuder, så bruddet sker PÆNT efter skråstregen i stedet
   for midt i et ord, når det overhovedet kan lade sig gøre. */
.surveybotty-msg { max-width: 84%; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
.surveybotty-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 3px; }
.surveybotty-msg.user { align-self: flex-end; background: var(--sage); color: #fff; border-bottom-right-radius: 3px; }
/* Loading-indikator ("tre prikker der pulserer") mens Haiku svarer — samme
   bobbel-styling som en almindelig bot-besked, så den ikke springer i
   størrelse/placering, når den senere erstattes af det rigtige svar. */
.surveybotty-msg.typing { display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.surveybotty-typing-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
    animation: surveybotty-typing-bounce 1.2s ease-in-out infinite;
}
.surveybotty-typing-dot:nth-child(2) { animation-delay: .15s; }
.surveybotty-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes surveybotty-typing-bounce {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}
.surveybotty-modal-footer { flex-shrink: 0; border-top: 1px solid var(--line); background: #fff; }
.surveybotty-modal-input { display: flex; gap: 8px; padding: 12px; }
.surveybotty-modal-input input {
    flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 8px 14px; font-size: 13.5px; font-family: Inter, sans-serif;
}
.surveybotty-modal-input input:disabled { opacity: .6; }
.surveybotty-modal-input button {
    width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--sage); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.surveybotty-modal-input button:disabled { opacity: .5; cursor: default; }
.surveybotty-modal-input button svg { width: 16px; height: 16px; }
.surveybotty-history-link {
    display: block; text-align: center; font-size: 11.5px; color: var(--muted); text-decoration: none;
    padding: 0 12px 10px;
}
.surveybotty-history-link:hover { color: var(--sage); text-decoration: underline; }

/* ---------- Beta-feedback-widget (nederst i venstremenuen, kun Beta/Tester-planen) ----------
   Knappen sidder som sidste element i .admin-rail nav; selve panelet er et
   fast (position:fixed) overlay, styret af Alpine — se
   render_beta_feedback_widget() i admin/includes/layout.php. Bruger systemets
   egne tokens (--ink/--sage/--paper/--card/--line) og .field/.btn/.badge-
   mønstrene, ingen egne farver. */
.beta-feedback { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.beta-feedback-trigger {
    width: 100%; display: flex; align-items: center; gap: 8px;
    background: var(--sage-light); color: var(--ink);
    border: 1px solid var(--sage); border-radius: var(--radius);
    padding: 9px 12px; font-family: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; text-align: left;
}
.beta-feedback-trigger:hover { background: var(--sage); color: #fff; }
.beta-feedback-trigger i { font-size: 16px; flex-shrink: 0; }

.beta-feedback-overlay {
    position: fixed; inset: 0; background: rgba(22, 35, 63, .45); z-index: 300;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.beta-feedback-panel {
    background: var(--card); border-radius: var(--radius-lg); width: 100%; max-width: 460px;
    max-height: 88vh; overflow-y: auto; padding: 22px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}
.beta-feedback-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.beta-feedback-panel-head h3 { margin: 0; }
.beta-feedback-close {
    background: none; border: none; font-size: 22px; line-height: 1;
    color: var(--muted); cursor: pointer; padding: 0 4px;
}
.beta-feedback-close:hover { color: var(--ink); }
.beta-feedback-context {
    background: var(--sage-light); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px 14px; margin: 4px 0 14px; font-size: 12.5px;
}
.beta-feedback-context-title { font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.beta-feedback-context dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.beta-feedback-context dt { color: var(--muted); white-space: nowrap; }
.beta-feedback-context dd { margin: 0; color: var(--ink); word-break: break-all; }
.beta-feedback-error {
    color: var(--danger); background: var(--danger-bg); border-radius: var(--radius);
    padding: 8px 10px; font-size: 13px; margin: 0 0 12px;
}
.beta-feedback-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.beta-feedback-success { text-align: center; padding: 16px 0 4px; }
.beta-feedback-success i { font-size: 34px; color: var(--sage); }
.beta-feedback-success p { margin: 8px 0 16px; }

/* Read-only samtale-visning (Kontoindstillinger → "SurveyBotty –
   samtalehistorik", og super-admins brugerdetalje-side) — genbruger
   .surveybotty-msg.bot/.user, men som et almindeligt blok-element i stedet
   for widgetens fastgjorte popup, se render_surveybotty_conversation_messages()
   i admin/includes/layout.php. */
.surveybotty-inline-chat {
    display: flex; flex-direction: column; gap: 10px; background: var(--sage-light);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; max-height: 420px; overflow-y: auto;
}

/* Vilkårsside (terms.php) — enkel dokumentvisning af redigerbart HTML-indhold */
.terms-page { max-width: 760px; margin: 0 auto; padding: 60px 24px 120px; line-height: 1.7; }
.terms-page h1 { font-size: 32px; margin-bottom: 6px; }
.terms-page h2 { font-size: 21px; margin-top: 40px; margin-bottom: 12px; }
.terms-page h3 { font-size: 16px; margin-top: 28px; margin-bottom: 8px; }
.terms-page p { margin: 0 0 14px; color: var(--ink); }
.terms-page ul { margin: 0 0 14px; padding-left: 22px; }
.terms-page li { margin-bottom: 6px; }

/* ---------- NPS-resultatopsummering (Detractors/Passives/Promoters + score) ---------- */
.nps-summary { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; margin-bottom: 18px; }
.nps-score-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 110px; padding: 10px 20px; border: 1px solid var(--ink); border-radius: var(--radius-lg); background: var(--ink); color: #fff;
}
.nps-score-value { font-family: 'Source Serif 4', serif; font-size: 34px; font-weight: 600; line-height: 1; }
.nps-score-label { font-size: 11.5px; opacity: .8; margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }
.nps-group-row { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; }
.nps-group {
    flex: 1; min-width: 110px; padding: 10px 16px; border-radius: var(--radius-lg); border: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: center;
}
.nps-group-pct { font-size: 22px; font-weight: 600; }
.nps-group-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nps-group-detractor { border-color: #E8B4A0; background: var(--danger-bg); }
.nps-group-detractor .nps-group-pct { color: #B3432E; }
.nps-group-passive { border-color: #E8D9A0; background: #FBF6E3; }
.nps-group-passive .nps-group-pct { color: #9A7E1F; }
.nps-group-promoter { border-color: var(--sage); background: var(--sage-light); }
.nps-group-promoter .nps-group-pct { color: #1F3B24; }

/* ---------- "Tilføj figur"-modalen (rapport-builder) ---------- */
.report-chart-modal-card { max-width: 720px; width: 100%; max-height: 92vh; overflow: auto; }
.chart-modal-steps { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.chart-modal-step-tab {
    padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.chart-modal-step-tab.active { color: var(--ink); border-bottom-color: var(--sage); }
.chart-question-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.chart-pick-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line);
    cursor: pointer; font-weight: 400; margin: 0;
}
.chart-pick-row:last-child { border-bottom: none; }
.chart-pick-row:hover { background: var(--sage-light); }
.chart-pick-row:has(input:checked) { background: var(--sage-light); }
.chart-pick-number { font-size: 12px; color: var(--muted); min-width: 20px; }
.chart-pick-text { flex: 1; font-size: 14px; }
.chart-type-list { display: flex; flex-direction: column; gap: 8px; }
.chart-type-row { border: 1px solid var(--line); border-radius: var(--radius); }
.chart-split-toggle { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; margin: 0; }
.chart-modal-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.chart-modal-preview { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.chart-modal-preview-qtext { font-size: 15px; margin-top: 0; }
.report-chart-n { margin: 4px 0 10px; }
.report-chart-warning {
    font-size: 13px; color: #7A3B1E; background: var(--danger-bg); border: 1px solid #E8B4A0;
    border-radius: var(--radius); padding: 8px 12px; margin: 8px 0;
}
.report-chart-pie-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.report-chart-pie-cell { flex: 1; min-width: 260px; max-width: 450px; }
.report-chart-pie-single { max-width: 450px; }

/* Selve figur-blokken (AI-titel + spørgsmålstekst + graf + evt.
   konklusion, alt sammen i ÉN .report-figure-block, se
   ReportChart::renderBlocks()). Margin flyttet hertil fra en tidligere
   inline style, så den kan samspille med border-adskillelsen mellem to
   på hinanden følgende figurer nedenfor uden at skulle overstyres. */
.report-figure-block { margin: 36px 0; }
/* Tydelig visuel adskillelse mellem to figurer der følger direkte efter
   hinanden (ingen overskrift-/kommentar-blok imellem) — uden denne linje
   flyder figurerne visuelt sammen til én uafbrudt strøm, især i PDF/print,
   hvor der ikke er nogen kort-baggrund til at antyde adskillelsen. */
.report-figure-block + .report-figure-block {
    border-top: 1px solid var(--line);
    padding-top: 32px;
}

/* Kort, AI-genereret tematisk overskrift OVER selve spørgsmålsteksten (se
   AiRapportGenerator::buildFull()'s "title"-felt) — erstatter ALDRIG
   spørgsmålsteksten, kun et supplerende, mere scanbart tema-navn. Tomt som
   standard (:empty skjuler den helt) for figurer der endnu ikke er bygget
   af AI, eller manuelt tilføjet via "Tilføj figur". */
.report-figure-title {
    margin: 0 0 4px; font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted);
}
.report-figure-title:empty { display: none; }

/* Skala-endepunkternes valgfrie tekst-forklaring (min_label/max_label) vist
   under x-aksen på en skala-figur, se ReportChart::renderBlocks() — genbruger
   .scale-endpoint-labels' grundstil (spørgsmålets egen visning i
   question_render.php), men med lidt mere luft til grafen ovenfor i stedet
   for standardens 4px (der er tænkt til at sidde lige under skala-celler). */
.report-chart-endpoint-labels { margin-top: 8px; }

/* Konklusionstekst under en figur (AI-genereret eller manuelt skrevet, se
   ReportChart::renderBlocks() og admin/report-edit.php's "Generér med
   AI"-knap pr. blok) — ligger INDE i .report-figure-block, så print-reglen
   nedenfor holder figur+konklusion samlet på én side. Mere luft OG en let
   adskillelseslinje mod selve grafen ovenfor (i stedet for blot en lille
   margin), så konklusionen tydeligt læses som et selvstændigt afsnit, ikke
   en del af selve figuren. white-space:pre-wrap fordi teksten indsættes
   escapet (ikke som HTML), både server-renderet og når assets/js/
   report-preview.js's syncBlockField() opdaterer den live via textContent
   — ellers ville rigtige linjeskift i teksten ikke vises. :empty skjuler
   elementet helt når konklusionen er tom, både ved almindelig sidevisning
   og under selve indtastningen (fjernes automatisk igen, når der er tekst
   i feltet). */
.report-figure-conclusion {
    margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line);
    font-size: 14px; line-height: 1.6; color: var(--text-secondary, var(--muted));
    white-space: pre-wrap;
}
.report-figure-conclusion:empty { display: none; }

/* Rapportens forside (ReportChart::renderCover()) — logo + titel + evt.
   undertitel/forsidebillede, ALTID først i rapporten, ALDRIG en figur-blok.
   border-bottom-color/.report-cover-accent's baggrund sættes inline pr.
   tema (se renderCover()), resten er fast layout her. */
.report-cover { text-align: center; padding: 60px 0; border-bottom: 2px solid; margin-bottom: 20px; }
.report-cover-logo { max-height: 80px; margin-bottom: 24px; display: block; margin-left: auto; margin-right: auto; }
/* Opdelingsvariabelens værdi i en batch-delrapport (fx et institutionsnavn,
   se ReportChart::renderCover()'s $splitValue) — en tydelig SEKUNDÆR
   overskrift, adskilt fra den mere tilbagetrukne .report-cover-subtitle
   nedenfor (som stadig er den samme tekst for alle delrapporter i batchen). */
.report-cover-split-value { margin: 14px 0 0; font-size: 22px; font-weight: 600; color: var(--ink); }
/* Undertitlen renderes ALTID (også tom), se renderCover()'s docblok —
   :empty skjuler den visuelt, samme mønster som .report-figure-title. */
.report-cover-subtitle { margin: 10px 0 0; font-size: 16px; color: var(--muted); white-space: pre-wrap; }
.report-cover-subtitle:empty { display: none; }
.report-cover-image { max-width: 100%; max-height: 360px; margin-top: 28px; border-radius: var(--radius); }
.report-cover-accent { width: 56px; height: 4px; margin: 20px auto 0; border-radius: 2px; }

/* Print/PDF-opførsel for rapportens forside — ALTID sit eget sideskift
   bagefter, så første figur starter på side 2 (se opgavebeskrivelsen for
   "Dedikeret forside til rapporter"). page-break-inside:avoid er tilføjet
   for en sikkerheds skyld (fx et højt forsidebillede) — konflikter ikke med
   .report-figure-block/.report-heading-block's egne regler nedenfor, da de
   er helt andre elementer. */
@media print {
    .report-doc .report-cover {
        page-break-after: always;
        break-after: page;
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* Print/PDF-opførsel for rapport-visningerne (survey/report.php,
   survey/report-batch.php, admin/report-view.php — alle deler
   .report-doc-wrapperen og genbruger ReportChart::renderBlocks()/
   BatchReport::renderInstanceBlocks(), se disses .report-figure-block/
   .report-heading-block-klasser). Ingen blok (figur, overskrift eller
   kommentar) må knække midt over ved et sideskift — og en brugertilføjet
   overskrift-blok skal altid starte på en frisk side (uændret, tidligere
   adfærd). orphans/widows på selve .report-doc er et generelt sikkerheds-
   net for almindelig ombrudt brødtekst (fx en lang kommentar-blok, eller
   selve konklusionsteksten) der er for høj til at page-break-inside:avoid
   kan holde samlet — forhindrer at kun 1-2 linjer efterlades isoleret
   øverst/nederst på en side. Bevidst IKKE et bogstaveligt
   page-break-before:always på HVER blok (ville tvinge én figur pr. side,
   uholdbart for en rapport med mange figurer) — kombinationen af
   break-inside:avoid + orphans/widows giver samme resultat (ingen
   afskårne/isolerede blok-rester) uden den unødvendige sideforbrug. */
@media print {
    .report-doc { orphans: 3; widows: 3; }
    .report-doc .report-figure-block,
    .report-doc .report-heading-block,
    .report-doc p.sub {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .report-doc .report-heading-block {
        page-break-before: always;
        break-before: page;
    }
}

/* Stablet vandret figur (matrix-spørgsmål): rækketeksten vises som ægte,
   venstrestillet DOM-tekst i sin egen kolonne til venstre for selve
   ECharts-figuren, IKKE som ECharts' egne akse-labels — ECharts
   højrestiller kategori-akse-labels mod aksen som standard, hvilket for en
   kort label efterlod synligt tomrum til venstre inden for den fælles,
   ensartede kolonnebredde (samme bredde bruges for ALLE rækker i figuren,
   jf. dens længste/mest pladskrævende label). Ægte DOM-tekst ombrydes og
   venstrestilles naturligt af browseren i stedet, uden det tomrum. Se
   assets/js/report-chart-render.js (buildMatrixChart) og admin/results.php. */
.stacked-h-figure { display: flex; align-items: stretch; }
.stacked-h-labels { flex: 0 0 auto; display: flex; flex-direction: column; box-sizing: border-box; }
.stacked-h-label { display: flex; align-items: center; padding-right: 8px; color: #666666; word-break: break-word; box-sizing: border-box; line-height: 1.3; }
/* BEMÆRK: havde tidligere overflow:hidden som en "sikkerhedsforanstaltning"
   mod at et ikke-resized ECharts-canvas kunne overlappe gennemsnits-/
   benchmark-kolonnerne til højre ved print. Det viste sig i praksis at
   klippe den sidste bjælke-segment/label af i print/PDF (fx "Helt enig"),
   fordi et resized canvas kan blive nogle få pixels bredere end sin
   flex-container (afrunding) — helt normalt, men blev fejlagtigt beskåret
   af overflow:hidden. Den rigtige fix er allerede på plads (beforeprint →
   instance.resize() i report-chart-render.js), så denne klipning er ikke
   nødvendig og gjorde mere skade end gavn. */
.stacked-h-chart { flex: 1 1 auto; min-width: 0; }

/* Gennemsnits-/benchmark-kolonner til højre for en stablet vandret figur —
   samme række-op-mod-bjælke-alignment-princip som .stacked-h-labels (samme
   padding-top/bund som ECharts-gridens top/bund, sat i JS), blot til højre
   for figuren i stedet for til venstre. Se buildMatrixChart() i
   assets/js/report-chart-render.js: .stacked-h-avgcol er den valgfrie
   "Vis gennemsnit"-kolonne (rapport-builderens figur-indstilling),
   .stacked-h-benchcol er batch-rapporters automatiske benchmark-kolonne
   (aldrig vist i den almindelige rapport-builder eller enkelt-delte
   rapport-links). */
.stacked-h-avgcol { flex: 0 0 auto; display: flex; flex-direction: column; box-sizing: border-box; padding-left: 12px; }
.stacked-h-avgcol-row { display: flex; align-items: center; justify-content: flex-start; color: var(--muted); font-size: 13px; box-sizing: border-box; }
/* Når avgCol står foran en benchmark-kolonne (se stacked-h-avgcol-row-strong
   ovenfor), skal tallet centreres i mellemrummet mellem sidste bjælke og
   .stacked-h-benchcol's kantlinje i stedet for at klistre op ad den —
   samme padding på begge sider af teksten giver den centrering. */
.stacked-h-avgcol-benchmark { padding-left: 12px; padding-right: 12px; }
.stacked-h-avgcol-benchmark .stacked-h-avgcol-row { justify-content: center; }
/* Bruges når avgCol viser figurens EGET gennemsnit ved siden af en
   benchmark (i stedet for den almindelige, umarkerede "vis gennemsnit"
   figur-indstilling) — fremhævet fordi det nu er tallet der sammenlignes
   MOD benchmark-tallet i .stacked-h-benchcol, adskilt af dennes venstre
   kantlinje (den ENESTE streg mellem de to gennemsnit). */
.stacked-h-avgcol-row-strong { color: var(--ink); font-weight: 600; }
.stacked-h-benchcol { flex: 0 0 auto; display: flex; flex-direction: column; box-sizing: border-box; padding-left: 16px; border-left: 1px solid var(--line); }
.stacked-h-benchcol-row { display: flex; align-items: center; gap: 8px; box-sizing: border-box; font-size: 13px; color: var(--muted); }
.stacked-h-bench-value { white-space: nowrap; }
.stacked-h-bench-diff { display: flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.stacked-h-bench-diff-bar { width: 4px; height: 16px; border-radius: 2px; background: var(--line); }
.stacked-h-bench-diff-pos { color: var(--sage); }
.stacked-h-bench-diff-pos .stacked-h-bench-diff-bar { background: var(--sage); }
.stacked-h-bench-diff-neg { color: var(--danger); }
.stacked-h-bench-diff-neg .stacked-h-bench-diff-bar { background: var(--danger); }
.stacked-h-bench-diff-zero { color: var(--muted); }

/* Benchmark-navnets header (kun matrix-figurer, se buildMatrixChart() i
   assets/js/report-chart-render.js) — indsat som .stacked-h-benchcol's
   FØRSTE flex-barn, så den automatisk får kolonnens egen bredde uden
   manuel bredde-matchning; ingen padding-left her, da forælderens egen
   padding-left allerede rykker ALLE dens børn (header såvel som rækker). */
.stacked-h-benchcol-header {
    flex: 0 0 auto; box-sizing: border-box; font-size: 12px; font-weight: 600;
    color: var(--muted); line-height: 1.3; word-break: break-word; margin-bottom: 4px;
}

/* ---------- Batch-rapporter (admin/report-batches.php) ---------- */
.batch-preview-list { list-style: none; margin: 12px 0; padding: 0; }
.batch-preview-list li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.batch-preview-list li:last-child { border-bottom: none; }
.batch-preview-zero { color: var(--muted); }
.batch-preview-zero-tag {
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #7A3B1E;
    background: var(--danger-bg); border: 1px solid #E8B4A0; border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
.js-batch-generate-btn:disabled, .js-results-export-btn.is-loading { opacity: .6; }
/* Brugerdefineret benchmark-navn, nederst i den grønne benchmark-
   forklaringsboks (admin/report-batches.php). */
.batch-benchmark-label-field { margin: 12px 0 0; }
.batch-benchmark-label-row { display: flex; align-items: center; gap: 8px; max-width: 260px; }
.batch-benchmark-label-row input { flex: 1; }
.batch-benchmark-label-counter { flex-shrink: 0; font-size: 12px; color: var(--muted); min-width: 18px; text-align: right; }
/* Benchmark-lag: sammenligningstabel (gruppe vs. benchmark) under enhver
   figur i den delte batch-rapport, se assets/js/report-chart-render.js. */
.report-benchmark-table { margin-top: 10px; font-size: 13px; }
.report-benchmark-table th, .report-benchmark-table td { padding: 4px 8px; }
.report-benchmark-score { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.report-batch-sticky-header {
    position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--line);
    padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- Rapport-tema-vælger (visuelle preview-kort, ikke dropdown) ---------- */
.report-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.report-theme-card { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.report-theme-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.report-theme-preview {
    width: 100%; aspect-ratio: 4 / 3; border: 2px solid var(--line); overflow: hidden;
    display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s;
}
.report-theme-card.active .report-theme-preview,
.report-theme-card:hover .report-theme-preview { border-color: var(--ink); box-shadow: 0 2px 8px rgba(22,35,63,.12); }
.report-theme-preview-cover {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 18px;
}
.report-theme-preview-accent { width: 20px; height: 3px; border-radius: 2px; }
.report-theme-preview-bars { display: flex; align-items: flex-end; gap: 4px; padding: 8px; height: 30px; }
.report-theme-preview-bars span { flex: 1; }
.report-theme-name { font-size: 12.5px; font-weight: 500; color: var(--muted); text-align: center; }
.report-theme-card.active .report-theme-name { color: var(--ink); font-weight: 600; }

/* ---------- Hjælpecenter (admin/help.php, admin/help-article.php,
   admin/superadmin/help-center.php) ---------- */
.help-search-wrap { position: relative; margin-bottom: 28px; max-width: 560px; }
.help-search-input {
    width: 100%; padding: 14px 16px; font-size: 15px; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--card);
}
.help-search-input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(107, 143, 113, .15); }
.help-search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    max-height: 420px; overflow-y: auto; z-index: 20;
}
.help-search-result {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; text-decoration: none;
    color: var(--ink); border-bottom: 1px solid var(--line);
}
.help-search-result:last-child { border-bottom: none; }
.help-search-result:hover { background: var(--sage-light); }
.help-search-result-category { font-size: 12px; color: var(--muted); }
.help-search-result-title { font-size: 14.5px; font-weight: 500; }
.help-search-empty { padding: 16px; margin: 0; }

.help-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.help-category-card {
    display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--card);
    border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink);
    transition: border-color .15s ease, transform .15s ease;
}
.help-category-card:hover { border-color: var(--sage); transform: translateY(-2px); }
.help-category-icon { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.help-category-name { font-size: 16px; font-weight: 600; }
.help-category-desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; flex-grow: 1; }
.help-category-count { font-size: 12px; color: var(--sage); font-weight: 500; margin-top: 6px; }

.help-article-list { display: flex; flex-direction: column; gap: 8px; }
.help-article-list-item {
    display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500;
}
.help-article-list-item:hover { border-color: var(--sage); background: var(--sage-light); }
.help-article-list-arrow { color: var(--muted); }

.help-article-page { max-width: 760px; margin: 0 auto; }
.help-article { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 40px 48px; }
.help-article-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 30px; margin: 0 0 8px; color: var(--ink); }
.help-article-meta { color: var(--muted); font-size: 13px; margin: 0 0 28px; }
.help-article-content { font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.help-article-content h2 { font-size: 20px; margin: 32px 0 12px; }
.help-article-content h3 { font-size: 17px; margin: 24px 0 10px; }
.help-article-content p { margin: 0 0 16px; }
.help-article-content ul, .help-article-content ol { margin: 0 0 16px; padding-left: 22px; }
.help-article-content li { margin-bottom: 6px; }
.help-article-content img { max-width: 100%; border-radius: var(--radius); }
.help-article-content a { color: var(--sage); }

/* Trin-for-trin-boks: nummererede steps til handlinger der kræver flere trin
   i rækkefølge. Almindelig <ol> inde i boksen — nummereringen kommer gratis
   fra listen selv, ingen custom counter-CSS nødvendig. */
.help-steps {
    background: var(--sage-light); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 24px; margin: 20px 0;
}
.help-steps ol { margin: 0; padding-left: 20px; }
.help-steps li { margin-bottom: 10px; }
.help-steps li:last-child { margin-bottom: 0; }

/* Tip-boks: nyttige genveje/bedste praksis. */
.help-tip {
    background: #EEF5F0; border: 1px solid #CFE3D4; border-radius: var(--radius);
    padding: 16px 18px; margin: 20px 0; font-size: 14.5px;
}
.help-tip strong { color: #2C5233; }

/* Advarselsboks: handlinger der ikke kan fortrydes/kræver opmærksomhed. */
.help-warning {
    background: #FBF2E3; border: 1px solid #F0DDB4; border-radius: var(--radius);
    padding: 16px 18px; margin: 20px 0; font-size: 14.5px;
}
.help-warning strong { color: #8A5A12; }

/* Kode/variabel-eksempler (flettefelter som {{navn}}). */
.help-article-content code, .help-var {
    font-family: ui-monospace, Consolas, monospace; background: var(--sage-light);
    border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 13.5px; color: var(--ink);
}

/* Enkel UI-illustration/mockup — bruges sparsomt i artiklerne til at vise
   fx en knap eller et menupunkt i systemets egen visuelle stil, uden at det
   er et rigtigt, interaktivt element. */
.help-mockup {
    display: inline-flex; align-items: center; gap: 8px; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px;
    margin: 4px 0; font-size: 14px; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.help-mockup-btn {
    display: inline-block; background: var(--ink); color: #fff; border-radius: var(--radius);
    padding: 8px 16px; font-size: 13.5px; font-weight: 500;
}
.help-mockup-btn.help-mockup-btn-sage { background: var(--sage); }

.help-related { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.help-related h3 { font-size: 15px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.help-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.help-related a { color: var(--sage); text-decoration: none; font-weight: 500; }
.help-related a:hover { text-decoration: underline; }

.help-feedback { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; }
.help-feedback-question { font-weight: 500; margin: 0 0 12px; }
.help-feedback-buttons { display: flex; justify-content: center; gap: 10px; }
.help-feedback-thanks { color: var(--sage); font-weight: 500; margin: 0; }

/* Super-admin CRUD-listerne (kategorier + artikler pr. kategori). */
.help-admin-row { display: flex; align-items: center; gap: 10px; }
.help-admin-category-row, .help-admin-article-row {
    padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.help-admin-list li:last-child { border-bottom: none; }
.help-admin-row-icon { font-size: 16px; }
.help-admin-row-title { font-weight: 500; }
.help-admin-category-row.dragging, .help-admin-article-row.dragging { opacity: .4; }
.help-admin-preview-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px 24px; min-height: 200px; }

/* "Sektioner"-boksen øverst i admin/superadmin/site-content.php — samme
   træk-og-slip-rækkemønster som .help-admin-category-row ovenfor, se
   assets/js/site-content-sections-reorder.js. */
.site-content-section-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 4px; border-bottom: 1px solid var(--line);
}
.site-content-section-row:last-child { border-bottom: none; }
.site-content-section-row.dragging { opacity: .4; }
.site-content-section-name { font-weight: 500; flex: 1; }
.site-content-section-visible-label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; cursor: pointer; }