:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;
    --gray: #6b7280;
    --light: #f3f4f6;
    --purple: #8b5cf6;
    --pink: #ec4899;
    --teal: #14b8a6;

    /* ── Design-tokens ──────────────────────────────────────────────────
       Brug disse i alt nyt CSS i stedet for ad-hoc hex/px-værdier, så
       sitet gradvist konvergerer mod ét ensartet udtryk. */
    --bg: #edf1f6;              /* side-baggrund (lys slate) */
    --surface: #ffffff;         /* kort/paneler */
    --navy: #0f172a;            /* brand-navy (matcher top-nav + PDF-referater) */
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.08);
    --shadow-md: 0 4px 14px rgba(15,23,42,0.10);
    --shadow-lg: 0 12px 34px rgba(15,23,42,0.14);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* system-ui først: Segoe UI på Windows, SF på Mac/iOS, Roboto på Android —
       samme udtryk på desktop, markant bedre på mobil end Verdana-fallback. */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Rolig lys baggrund i stedet for template-gradienten — harmonerer med
       navy top-nav og de blå-violette hero-kort, og lader indholdet stå skarpt. */
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    padding: 20px;
    min-height: 100vh;
}

/* Tydelig tastatur-fokus uden at genere muse-brugere (:focus-visible
   aktiveres kun ved keyboard-navigation). */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Auth Banner */
.auth-banner {
    background: var(--primary);
    color: white;
    padding: 12px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
}

.auth-banner.visible {
    display: block;
}

.auth-banner-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-logout, .btn-admin {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 12px;
}

.btn-logout:hover, .btn-admin:hover {
    background: rgba(255,255,255,0.3);
}

/* Login Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    padding: 32px;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* Standard luk-knap (✕) til modaler — brug denne i stedet for inline styles. */
.modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #94a3b8;
    line-height: 1;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    align-self: flex-start;
}
.modal-close:hover { color: #475569; background: var(--light); }

.login-content {
    text-align: center;
}

.login-content h2 {
    margin-bottom: 16px;
    color: var(--primary);
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
    margin: 20px 0;
}

.help-text {
    color: var(--gray);
    font-size: 0.9rem;
    margin-top: 16px;
}

/* Header */
header {
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    margin-bottom: 24px;
    margin-top: 50px;
}

h1 {
    color: var(--primary);
    margin-bottom: 8px;
    font-size: 2rem;
}

.subtitle {
    color: var(--gray);
    font-size: 1.1rem;
}

.meeting-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--light);
}
/* Deltagere: span hele grid-bredden så den aligner med Mødelink-kant */
.meeting-attendees-group {
    grid-column: 1 / -1;
}
@media (max-width: 700px) {
    .meeting-info { grid-template-columns: 1fr 1fr; }
}

.meeting-info div {
    background: var(--light);
    padding: 7px 10px;
    border-radius: 7px;
}

.meeting-info label {
    font-weight: 600;
    color: var(--gray);
    font-size: 0.75rem;
    display: block;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.meeting-info input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 0.88rem;
}

/* Dashboard */
.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-3px);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    color: var(--gray);
    margin-top: 8px;
    font-weight: 500;
}

.stat-card.completed .stat-number { color: var(--success); }
.stat-card.pending .stat-number { color: var(--warning); }
.stat-card.info .stat-number { color: var(--purple); }
.stat-card.actions .stat-number { color: var(--pink); }
.stat-card.archived .stat-number { color: var(--teal); }

/* Meeting status badges */
.meeting-status-badge {
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: 99px;
    font-size: 0.82rem; font-weight: 700;
    white-space: nowrap;
}
.meeting-status-badge.draft    { background:#f1f5f9; color:#64748b; }
.meeting-status-badge.invited  { background:#dbeafe; color:#1d4ed8; }
.meeting-status-badge.active   { background:#dcfce7; color:#15803d; }
.meeting-status-badge.paused   { background:#fef9c3; color:#854d0e; }
.meeting-status-badge.archived { background:#fef3c7; color:#b45309; }

/* ── Driftslog billede-hover preview ─────────────────────────────────────── */
.dl-img-preview {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    display: none;
    background: white;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    padding: 4px;
    max-width: 210px;
}
.dl-img-preview img {
    display: block;
    width: 200px;
    height: 148px;
    object-fit: cover;
    border-radius: 5px;
}

/* ── Recording knap-ikoner ───────────────────────────────────────────────── */
.rec-icon-circle {
    display: inline-block; width: 10px; height: 10px;
    background: #dc2626; border-radius: 50%; flex-shrink: 0;
}
.rec-icon-square {
    display: inline-block; width: 9px; height: 9px;
    background: #1e293b; border-radius: 2px; flex-shrink: 0;
}
.rec-btn-record { color: #dc2626; border-color: #fca5a5; }
.rec-btn-record:hover { background: #fef2f2; border-color: #dc2626; }
.rec-btn-stop   { color: #1e293b; border-color: #94a3b8; }
.rec-btn-stop:hover { background: #f8fafc; border-color: #475569; }

/* ── Collapsible LiveSnap underpunkt ─────────────────────────────────────── */
.agenda-snap-toggle { cursor: pointer; margin: 1px 0; border-radius: 5px; }
.agenda-snap-header {
    display: flex; align-items: baseline; gap: 7px;
    padding: 3px 6px 3px 4px; border-radius: 5px;
    transition: background 0.1s;
}
.agenda-snap-toggle:hover .agenda-snap-header { background: #f1f5f9; }
.agenda-snap-bullet {
    color: #94a3b8; font-size: 1.2rem; line-height: 1;
    flex-shrink: 0; width: 12px; text-align: center;
}
.agenda-snap-label { flex: 1; font-size: 0.85rem; color: #1e293b; }
.agenda-snap-chevron {
    color: #cbd5e1; font-size: 0.8rem; flex-shrink: 0;
    transition: transform 0.15s; display: inline-block;
}
.agenda-snap-toggle.open .agenda-snap-chevron { transform: rotate(90deg); color: var(--primary); }
.agenda-snap-body {
    display: none;
    padding: 4px 6px 4px 22px;
    border-left: 2px solid #f1f5f9;
    margin: 2px 0 2px 8px;
}
.agenda-snap-toggle.open .agenda-snap-body { display: block; }

/* ── Inline "+" Tilføj underpunkt ────────────────────────────────────────── */
/* Kompakt: rækken er skjult (0 højde) indtil man hover'er sektionen eller
   redigerer i den — så den ikke skaber luft under hvert hovedpunkt. */
.agenda-add-item-inline {
    display: flex; align-items: center; gap: 5px;
    border-radius: 4px; cursor: pointer; width: fit-content;
    color: #94a3b8; font-size: 0.78rem;
    max-height: 0; opacity: 0; margin: 0; padding: 0 6px; overflow: hidden;
    transition: max-height 0.15s ease, opacity 0.15s ease, margin 0.15s ease, color 0.12s, background 0.12s;
}
.agenda-content:hover .agenda-add-item-inline,
.agenda-content:focus-within .agenda-add-item-inline {
    max-height: 26px; opacity: 1; margin: 3px 0; padding: 2px 6px;
}
/* Touch-enheder har ingen hover — vis altid rækken dér */
@media (hover: none) {
    .agenda-add-item-inline { max-height: 26px; opacity: 1; margin: 3px 0; padding: 2px 6px; }
}
.agenda-add-item-inline:hover { color: var(--primary); background: #eff6ff; }
.add-item-plus { font-size: 0.9rem; line-height: 1; }

.agenda-restore-hint {
    display: inline-flex; align-items: center;
    padding: 3px 10px; margin: 3px 0;
    border-radius: 99px; cursor: pointer;
    font-size: 0.75rem; font-weight: 600;
    color: #92400e; background: #fef3c7;
    border: 1px solid #f59e0b;
    transition: background 0.12s, color 0.12s;
}
.agenda-restore-hint:hover { background: #fde68a; color: #78350f; }

/* ── Optagelse & Transskription ─────────────────────────────────────────── */
.rec-transcript-entry {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.rec-transcript-meta {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 6px;
}
.rec-transcript-text {
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #1e293b;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0 0 8px;
    max-height: 320px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
}
.rec-transcript-copy {
    padding: 4px 10px;
    font-size: 0.78rem;
}

/* Indkaldt-toggle — skyder-stil */
.meeting-lock-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 4px 10px 4px 6px;
    font-size: 0.82rem; font-weight: 500;
    cursor: pointer; color: #64748b;
    font-family: inherit; transition: all 0.15s;
}
.meeting-lock-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
/* Toggle-skyder */
.lock-toggle-sw {
    width: 28px; height: 16px; border-radius: 8px;
    background: #cbd5e1; position: relative; flex-shrink: 0;
    transition: background 0.2s;
}
.lock-toggle-sw::after {
    content: ''; position: absolute;
    width: 12px; height: 12px; border-radius: 50%;
    background: white; top: 2px; left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.meeting-lock-btn.locked { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
.meeting-lock-btn.locked .lock-toggle-sw { background: #2563eb; }
.meeting-lock-btn.locked .lock-toggle-sw::after { transform: translateX(12px); }
.meeting-lock-btn.locked:hover { background: #dbeafe; }

.btn-status-active {
    background: #16a34a; color: white;
    border: none; border-radius: 8px;
    padding: 10px 18px; font-size: 0.9rem;
    font-weight: 700; cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(22,163,74,0.3);
    transition: background 0.12s;
}
.btn-status-active:hover { background: #15803d; }

/* ── Møde-layout ─────────────────────────────────────────────────────────── */
.meeting-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start;
    margin-top: 14px;
}
@media (max-width: 860px) {
    .meeting-layout { grid-template-columns: 1fr; }
    .meeting-sidebar { display: contents; }
}
.meeting-main { min-width: 0; }
.meeting-sidebar { display: flex; flex-direction: column; gap: 12px; }

/* Bilag + Kontrolpanel over dagsordenen */
.meeting-top-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 14px;
    align-items: stretch;
}
.meeting-agenda-card { margin-top: 16px; }
@media (max-width: 700px) {
    .meeting-top-cards { grid-template-columns: 1fr; }
}

/* Kontrolpanel-kort */
.meeting-ctrl-card {
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}
.meeting-ctrl-card .meeting-card-header { padding: 10px 14px; border-bottom: 1px solid #f0f4f8; }

/* Dropdown + dok-knapper på én linje */
.kp-doc-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f4f8;
    flex-wrap: wrap;
}
.kp-select {
    flex: 1 1 130px; min-width: 130px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding: 6px 28px 6px 9px;
    font-size: 0.78rem; font-weight: 600; color: #1e293b;
    -webkit-appearance: none; appearance: none;
    cursor: pointer; outline: none;
    transition: border-color 0.12s;
}
.kp-select:hover { border-color: #94a3b8; }
.kp-select:focus { border-color: var(--primary); }
/* Flow-rækken: fast højde uanset antal synlige knapper */
.meeting-ctrl-card .meeting-ctrl-flow {
    padding: 8px 12px;
    border-bottom: none;
    min-height: 54px;
    align-content: flex-start;
}
/* Greyed-out knapper */
.meeting-ctrl-card button:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Knap-række: flow-knapper venstre, dok-knapper skubbet til højre */
.meeting-ctrl-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
/* Indkaldelse starter dok-gruppen — skub den (og Referat) helt til højre */
#genIndkaldBtn { margin-left: auto; }
/* Ensartet ramme/størrelse på alle knapper i rækken */
.meeting-ctrl-btns > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.82rem;
    box-sizing: border-box;
}

/* ── Attendees i meeting-info header ─── */
.attendees-info-group { grid-column: 1 / -1; }
.attendees-chips {
    display: flex; flex-wrap: wrap; gap: 4px;
    max-height: 68px; overflow-y: auto;
    min-height: 24px; padding: 2px 0;
}
.attendees-add-row {
    display: flex; gap: 5px; align-items: center; margin-top: 5px;
}
.attendees-name-input {
    flex: 1; min-width: 0;
    padding: 4px 8px; border: 1.5px solid #e2e8f0; border-radius: 7px;
    font-size: 0.82rem; font-family: inherit; outline: none;
}
.attendees-name-input:focus { border-color: var(--primary); }
.attendees-role-select {
    padding: 4px 7px; border: 1.5px solid #e2e8f0; border-radius: 7px;
    font-size: 0.78rem; font-family: inherit; background: white; cursor: pointer;
}
.att-chip {
    display: inline-flex; align-items: center; gap: 3px;
    background: #eef4ff; color: var(--primary);
    border-radius: 99px; padding: 2px 8px 2px 10px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.att-chip.suppleant { background: #fef9c3; color: #854d0e; }
.att-chip.administrator { background: #ede9fe; color: #5b21b6; }
.att-chip.gæst, .att-chip.guest { background: #f0fdf4; color: #166534; }
.att-chip small { opacity: 0.7; font-weight: 400; }
.attendee-chip-del {
    background: none; border: none; cursor: pointer;
    color: inherit; opacity: 0.5; font-size: 0.85rem;
    padding: 0 0 0 2px; line-height: 1;
}
.attendee-chip-del:hover { opacity: 1; }

/* Generisk møde-kort */
.meeting-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e8ecf0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}
.meeting-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.meeting-card-header h3 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: 0.01em;
}
.meeting-agenda-body {
    padding: 8px 10px;
}
.meeting-card-hint {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 6px 14px 8px;
    line-height: 1.4;
}
.meeting-attachments-list { padding: 0 14px; }

/* Homeit-inspireret outline-knap */
.btn-outline-sm {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s, background 0.12s;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-outline-sm:hover {
    border-color: #9ca3af;
    background: #f9fafb;
    transform: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.btn-outline-danger {
    color: #dc2626; border-color: #fca5a5;
}
.btn-outline-danger:hover { border-color: #dc2626; background: #fef2f2; }

/* Møde-kalender widget */
.meeting-header-wrap {
    display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start;
}
.meeting-header-main { flex: 1; min-width: 300px; }
.meeting-calendar-wrap {
    flex-shrink: 0; background: white; border-radius: 12px;
    padding: 12px 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    min-width: 240px;
}
.mc-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
    font-weight: 700; font-size: 0.88rem; color: #1e293b;
}
.mc-header button {
    background: none; border: 1px solid #e2e8f0; border-radius: 6px;
    width: 26px; height: 26px; cursor: pointer;
    font-size: 1rem; color: #64748b; display: flex; align-items: center; justify-content: center;
}
.mc-header button:hover { background: #f1f5f9; }
.mc-table { border-collapse: collapse; width: 100%; font-size: 0.76rem; }
.mc-table th {
    text-align: center; padding: 3px 2px; color: #64748b;
    font-weight: 600; font-size: 0.72rem;
}
.mc-table td {
    text-align: center; padding: 2px 1px; border-radius: 4px;
    cursor: default; width: 32px; height: 30px; font-size: 0.78rem;
    position: relative; vertical-align: middle;
}
.mc-week-num {
    color: #a78bfa; font-size: 0.65rem; font-weight: 700;
    padding-right: 5px; letter-spacing: 0.01em;
    white-space: nowrap;
}
.mc-other-month { color: #d1d5db; }
.mc-today .mc-day-num { background: var(--primary); color: white; border-radius: 50%;
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.mc-holiday .mc-day-num { color: #dc2626; font-weight: 600; }
.mc-weekend .mc-day-num { color: #94a3b8; }
.mc-clickable { cursor: pointer; }
.mc-clickable:hover { background: #f1f5f9; border-radius: 4px; }
.mc-day-num { display: block; line-height: 1; }

/* BM møde-markering */
.mc-meeting-planned { background: #dbeafe; border-radius: 4px; }
.mc-meeting-planned .mc-day-num { color: #1d4ed8; font-weight: 700; }
.mc-meeting-archived { background: #f0fdf4; border-radius: 4px; }
.mc-meeting-archived .mc-day-num { color: #15803d; font-weight: 600; }
.mc-meeting-planned.mc-today { background: #2563eb; }
.mc-meeting-planned.mc-today .mc-day-num { color: white; }

.mc-bm-badge {
    display: block; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.03em;
    color: #1d4ed8; line-height: 1; margin-top: 1px;
}
.mc-meeting-archived .mc-bm-badge { color: #15803d; }

/* Kalender-legende og forklarings-rækker */
.mc-key {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 6px 2px 2px; margin-top: 4px;
    border-top: 1px solid #f1f5f9;
}
.mc-key-item { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: #64748b; }
.mc-key-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.mc-key-dot.planned  { background: #dbeafe; border: 1px solid #3b82f6; }
.mc-key-dot.archived { background: #f0fdf4; border: 1px solid #16a34a; }

.mc-legend { margin-top: 6px; }
.mc-legend-item { display: block; font-size: 0.7rem; color: #dc2626; line-height: 1.6; }

/* Gør kalender-wrapperen lidt bredere nu da Deltagere er smalere */
.meeting-calendar-wrap { min-width: 280px; }

/* Live snapshot i agenda-sektion */
.agenda-live-snap {
    background: #f8fafc; border: 1px dashed #e2e8f0;
    border-radius: 8px; padding: 10px 14px;
    margin: 8px 0 4px; font-size: 0.84rem;
}
.agenda-live-snap-title {
    font-size: 0.72rem; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
}
.agenda-live-item {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 4px 0; color: #334155; border-bottom: 1px solid #f1f5f9;
    font-size: 0.83rem; line-height: 1.4;
}
.agenda-live-item:last-child { border-bottom: none; }
.agenda-live-item-prio { font-size: 0.7rem; }

/* Controls */
.controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
    background: white;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
/* Scoped mindre knapper i controls-baren — påvirker ikke andre sider */
.controls button, .controls .btn-status-active {
    padding: 6px 12px;
    font-size: 0.82rem;
}
/* Greyed-out tilstand: synlig men ikke klikbar */
.ctrl-disabled, .controls button:disabled {
    opacity: 0.38;
    cursor: not-allowed !important;
    pointer-events: none;
}
/* Greyed-out meeting-card (recording sektion) */
.meeting-card-disabled {
    opacity: 0.45;
    pointer-events: none;
}
.meeting-card-disabled .meeting-card-header h3::after {
    content: ' — start mødet for at optage';
    font-size: 0.72rem;
    font-weight: 400;
    color: #94a3b8;
    font-style: italic;
}
/* Lille ikon-knap til Reset i titel-linjen */
.btn-icon-sm {
    width: 26px; height: 26px;
    padding: 0 !important;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 1rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.btn-icon-sm:hover {
    background: #e2e8f0; color: #1e293b;
    transform: none; box-shadow: none;
}
/* Archive-select i controls */
.meeting-archive-select {
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.82rem;
    background: white;
    cursor: pointer;
    font-weight: 600;
}

/* ── Meeting controls panel ──────────────────────────────────────────────── */
.meeting-controls {
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}
/* Slet-knap flydende i øverste højre hjørne */
.meeting-ctrl-delete {
    position: absolute;
    top: 7px; right: 7px;
    background: none; border: none;
    color: #d1d5db; font-size: 0.8rem;
    padding: 3px 5px; border-radius: 5px;
    cursor: pointer; transition: color 0.12s, background 0.12s;
    line-height: 1; z-index: 2;
}
.meeting-ctrl-delete:hover { color: #dc2626; background: #fee2e2; }
/* Dropdown øverst — synlig og klikbar */
.meeting-ctrl-select {
    width: 100%;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
    padding: 12px 40px 12px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    border-radius: 0;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    transition: background-color 0.12s, border-color 0.12s;
    letter-spacing: 0.01em;
}
.meeting-ctrl-select:hover {
    background-color: #e2e8f0;
    border-bottom-color: #94a3b8;
}
.meeting-ctrl-select:focus {
    border-bottom-color: var(--primary);
    background-color: #eff6ff;
    color: var(--primary);
}
/* Status-badge + knapper på samme linje */
.meeting-ctrl-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f4f8;
    min-height: 50px;
    flex-wrap: wrap;
}
.meeting-ctrl-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Dokumenthandlinger i bunden */
.meeting-ctrl-docs {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    flex-wrap: wrap;
}
/* Ghost-knap til sekundære handlinger */
.btn-ctrl-ghost {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 0.82rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
    white-space: nowrap;
}
.btn-ctrl-ghost:hover { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
.btn-ctrl-danger { border-color: #fca5a5; color: #dc2626; }
.btn-ctrl-danger:hover { background: #fee2e2; border-color: #f87171; color: #b91c1c; }
/* Tilpas .btn-warning størrelse i controls-panel */
.meeting-controls .btn-warning { padding: 5px 12px; font-size: 0.82rem; }
.meeting-controls .btn-status-active { padding: 5px 14px; font-size: 0.82rem; }

/* "Generér indkaldelse"-knap */
.btn-secondary {
    background: #f1f5f9; color: #334155;
    border: 1.5px solid #e2e8f0;
}
.btn-secondary:hover { background: #e2e8f0; color: #1e293b; }
.meeting-btn-invite {
    border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff;
}
.meeting-btn-invite:hover { background: #dbeafe; }
/* Dashed tilføj-knap — bruges til både "+ Nyt dagsordenspunkt" og "+ Tilføj underpunkt" */
.meeting-add-section-btn,
.meeting-add-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: none;
}
.meeting-add-section-btn {
    margin-top: 8px;
    background: transparent;
    border: 2px dashed #cbd5e1;
    color: #94a3b8;
    border-radius: 10px;
}
.meeting-add-section-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #eff6ff;
    transform: none;
    box-shadow: none;
}
.meeting-add-item-btn {
    margin-top: 8px;
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #94a3b8;
    border-radius: 7px;
    font-size: 0.78rem;
    padding: 5px 8px;
}
.meeting-add-item-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #eff6ff;
    transform: none;
    box-shadow: none;
}

button {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-primary { background: var(--primary); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-warning { background: var(--warning); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-gray { background: var(--gray); color: white; }
.btn-purple { background: var(--purple); color: white; }
.btn-teal { background: var(--teal); color: white; }

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    background: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.filter-btn {
    padding: 10px 20px;
    background: var(--light);
    border: 2px solid #e5e7eb;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Agenda Sections */
.agenda-section {
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    margin-bottom: 8px;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    cursor: grab;
    transition: box-shadow 0.2s;
}

.agenda-section:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.11);
}

/* Afsluttet overpunkt — grøn markering + nedtonet titel */
.agenda-section.completed > .agenda-header {
    border-left: 4px solid #86efac;
    background: #f0fdf4;
    opacity: 0.8;
}
.agenda-section.completed > .agenda-header:hover { opacity: 1; }
.agenda-section.completed .agenda-title.done {
    text-decoration: line-through;
    color: #94a3b8;
}

/* Checkbox på overpunkt (venstre ved titlen) */
.section-done-check {
    width: 14px; height: 14px; flex-shrink: 0;
    cursor: pointer; margin: 0;
    accent-color: #22c55e;
}
.section-done-mark {
    font-size: 0.82rem; color: #22c55e; flex-shrink: 0;
}

.agenda-header {
    padding: 7px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.agenda-title-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drag-handle {
    color: var(--gray);
    font-size: 1.2rem;
    cursor: grab;
}

/* Genaktivér tekstmarkering i redigerbare felter inde i agenda */
.agenda-section textarea,
.agenda-section input[type="text"],
.agenda-section input[type="date"],
.agenda-section input[type="time"],
.agenda-section input[type="url"],
.agenda-section .note-field {
    -webkit-user-select: text;
    user-select: text;
}

.agenda-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: #1e293b;
}

.status-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.status-select {
    padding: 6px 12px;
    border-radius: 20px;
    border: 2px solid #e5e7eb;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    background: white;
}

.status-select.pending { border-color: var(--warning); color: var(--warning); }
.status-select.completed { border-color: var(--success); color: var(--success); }
.status-select.inprogress { border-color: var(--primary); color: var(--primary); }
.status-select.informational { border-color: var(--purple); color: var(--purple); }

.priority-badge {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.priority-high { background: #fee2e2; color: var(--danger); }
.priority-medium { background: #fef3c7; color: var(--warning); }
.priority-low { background: #d1fae5; color: var(--success); }

.agenda-content {
    padding: 6px 10px 10px;
    display: none;
}

.agenda-content.active {
    display: block;
}

/* ── Underpunkter som punktliste ─── */
.agenda-item-compact {
    display: flex; align-items: baseline; gap: 7px;
    padding: 3px 6px 3px 4px;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 5px; cursor: pointer;
    border: none; background: transparent;
    margin: 1px 0; transition: background 0.1s;
}
.agenda-item-compact::before {
    content: '·';
    color: #94a3b8; font-size: 1.2rem; line-height: 1;
    flex-shrink: 0; width: 12px; text-align: center;
}
.agenda-item-compact:hover { background: #f1f5f9; }
.agenda-item-compact:hover::before { color: var(--primary); }
/* Drag handle — swaps in over the bullet on hover */
.item-drag-handle {
    width: 12px; text-align: center; flex-shrink: 0;
    font-size: 0.7rem; color: #94a3b8;
    cursor: grab; opacity: 0;
    transition: opacity 0.1s;
    user-select: none;
}
.agenda-item-compact.draggable:hover .item-drag-handle { opacity: 1; }
.agenda-item-compact.draggable:hover::before { opacity: 0; transition: opacity 0.1s; }
.agenda-item-compact.draggable:active .item-drag-handle { cursor: grabbing; }
.agenda-item-compact.drag-over { border-top: 2px solid var(--primary); margin-top: -1px; }
/* Per-punkt optagelse-knap */
.item-rec-btn {
    background: none; border: none; padding: 0 2px;
    font-size: 0.9rem; cursor: pointer; color: #ef4444;
    line-height: 1; flex-shrink: 0;
    transition: color 0.1s; opacity: 0.65;
}
.item-rec-btn:hover { opacity: 1; }
.item-rec-btn.recording {
    color: #dc2626; font-size: 0.7rem;
    animation: rec-pulse 1.2s ease-in-out infinite;
}
.item-rec-btn.processing { color: #f59e0b; cursor: default; }
.item-rec-timer { font-variant-numeric: tabular-nums; }
@keyframes rec-pulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
.agenda-item-compact.completed {
    border-left: 3px solid #86efac;
    background: #f0fdf4;
    opacity: 0.75;
}
.agenda-item-compact.completed:hover { background: #dcfce7; opacity: 1; }
.agenda-item-compact.completed::before { content: '✓'; color: #22c55e; font-size: 0.8rem; }
.agenda-item-compact.completed .item-compact-desc {
    text-decoration: line-through; color: #94a3b8;
}
.item-done-icon { display: none; }
.item-compact-desc { flex: 1; font-size: 0.85rem; color: #1e293b; line-height: 1.4; }
/* Push badges + action buttons to the right edge of the item row */
.item-compact-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; margin-left: auto; }
.item-open-chevron { color: #cbd5e1; font-size: 0.8rem; flex-shrink: 0; }
.agenda-item-compact:hover .item-open-chevron { color: var(--primary); }

/* Comment badge — clickable toggle */
.item-comment-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.72rem; color: white; font-weight: 600;
    background: #3b82f6; border-radius: 99px; padding: 1px 7px;
    cursor: pointer;
}
.item-comment-badge:hover { background: #2563eb; }
.agenda-item-compact.completed .item-comment-badge { background: #64748b; }

/* + add-comment button on item line */
.item-add-comment-btn {
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 50%;
    width: 18px; height: 18px;
    padding: 0; line-height: 1;
    font-size: 0.78rem; font-weight: 700;
    color: #3b82f6;
    cursor: pointer; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
    animation: comment-btn-nudge 3s ease-in-out 1.5s infinite;
}
.item-add-comment-btn:hover {
    background: #dbeafe;
    border-color: #3b82f6;
    transform: scale(1.2);
    animation: none;
}
@keyframes comment-btn-nudge {
    0%, 70%, 100% { transform: rotate(0deg) scale(1); }
    74%            { transform: rotate(-18deg) scale(1.1); }
    78%            { transform: rotate(14deg) scale(1.1); }
    82%            { transform: rotate(-10deg) scale(1.05); }
    86%            { transform: rotate(6deg) scale(1.05); }
    90%            { transform: rotate(0deg) scale(1); }
}

/* Inline comment branch below item — indented to align under item text */
.item-comments-inline {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-radius: 0 6px 6px 0;
    padding: 5px 10px;
    margin: 2px 0 4px 90px;
}
.item-comment-entry {
    display: flex; align-items: baseline; gap: 5px;
    font-size: 0.8rem; padding: 2px 0; color: #475569;
}
.item-comment-arrow { color: #94a3b8; flex-shrink: 0; font-size: 0.75rem; }
.item-comment-who { font-weight: 600; flex-shrink: 0; color: #334155; }
.item-comment-text { flex: 1; }
.item-comment-form-inline {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 0;
}
.item-comment-who-input {
    width: 110px; padding: 2px 7px; border: 1px solid #e2e8f0;
    border-radius: 6px; font-size: 0.78rem; font-family: inherit;
}
.item-comment-text-input {
    flex: 1; padding: 2px 7px; border: 1px solid #e2e8f0;
    border-radius: 6px; font-size: 0.78rem; font-family: inherit;
}
.item-comment-form-inline button {
    background: none; border: 1px solid #e2e8f0; border-radius: 5px;
    padding: 1px 7px; font-size: 0.78rem; cursor: pointer; flex-shrink: 0;
    font-family: inherit; color: #475569;
}
.item-comment-form-inline button:first-of-type { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

/* ── Inline handlingspunkter (📋) ─── */
.item-actions-inline {
    background: #fff7ed;
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    padding: 5px 10px;
    margin: 2px 0 4px 90px;
}
.item-action-entry {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.82rem; padding: 2px 0; color: #1f2937;
}
.item-action-entry.done .item-action-text { text-decoration: line-through; color: #9ca3af; }
.item-action-mark { color: #94a3b8; flex-shrink: 0; width: 14px; text-align: center; }
.item-action-text { flex: 1; }
.item-action-resp {
    font-size: 0.72rem; font-weight: 600; color: #b45309;
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 99px; padding: 1px 8px; flex-shrink: 0;
}
.item-action-empty { font-size: 0.78rem; color: #94a3b8; font-style: italic; padding: 2px 0; }
.item-action-form {
    display: flex; align-items: center; gap: 5px; padding: 4px 0;
}
.item-action-text-input {
    flex: 1; padding: 2px 7px; border: 1px solid #e2e8f0;
    border-radius: 6px; font-size: 0.78rem; font-family: inherit;
}
.item-action-resp-input {
    padding: 2px 7px; border: 1px solid #e2e8f0; border-radius: 6px;
    font-size: 0.78rem; font-family: inherit; max-width: 130px;
}
.item-action-form button {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 5px;
    padding: 1px 8px; font-size: 0.78rem; cursor: pointer; flex-shrink: 0;
    font-family: inherit; color: #b45309;
}

/* ── Samlet tilføj-række: én formular med typevælger (💬/📋/📌) ─── */
.item-add-row {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 0 4px 0; margin: 2px 0 4px 90px;
}
.item-add-row select,
.item-add-row input[type="text"] {
    padding: 2px 7px; border: 1px solid #e2e8f0; border-radius: 6px;
    font-size: 0.78rem; font-family: inherit; background: #fff;
}
.item-add-type { flex-shrink: 0; font-weight: 600; color: #334155; }
.item-add-who  { max-width: 130px; }
.item-add-text { flex: 1; }
.item-add-row button {
    background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 5px;
    padding: 1px 8px; font-size: 0.78rem; cursor: pointer; flex-shrink: 0;
    font-family: inherit; color: #3730a3;
}
.item-add-row button:last-of-type { background: none; border-color: #e2e8f0; color: #64748b; }

/* Samlet detalje-knap (erstatter de tre separate act/cmt/fu-knapper) */
.item-tool-btn.all { background: #f8fafc; border-color: #cbd5e1; }
.item-tool-btn.all:hover { background: #eef2f7; box-shadow: 0 2px 7px rgba(37,99,235,.22); }
.item-tool-btn.all .tool-count { background: var(--primary); }

/* ── Inline opfølgning (📌) — lilla, fri note uden ansvarlig ─── */
.item-followups-inline {
    background: #f5f3ff;
    border-left: 3px solid #8b5cf6;
    border-radius: 0 6px 6px 0;
    padding: 5px 10px;
    margin: 2px 0 4px 90px;
}
.item-followup-entry {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.82rem; padding: 2px 0; color: #1f2937;
}
.item-followup-text { flex: 1; }
.item-followup-empty { font-size: 0.78rem; color: #94a3b8; font-style: italic; padding: 2px 0; }
.item-followup-form {
    display: flex; align-items: center; gap: 5px; padding: 4px 0;
}
.item-followup-text-input {
    flex: 1; padding: 2px 7px; border: 1px solid #e2e8f0;
    border-radius: 6px; font-size: 0.78rem; font-family: inherit;
}
.item-followup-form button {
    background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 5px;
    padding: 1px 8px; font-size: 0.78rem; cursor: pointer; flex-shrink: 0;
    font-family: inherit; color: #6d28d9;
}
.item-legacy-note {
    font-size: 0.8rem; color: #64748b; font-style: italic;
    margin: 1px 0 3px 90px; padding-left: 12px; border-left: 2px solid #e2e8f0;
}

/* ── Værktøjsknapper pr. underpunkt (handlingspunkter + kommentarer) ─── */
/* Fast gutter så checkbox/tekst altid flugter — uanset om punktet har
   handlingspunkter/kommentarer. */
.item-tools {
    display: inline-flex; gap: 5px; flex: 0 0 82px;
    justify-content: flex-start; align-self: center;
}
.item-tool-btn {
    position: relative;
    width: 24px; height: 24px; padding: 0; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid transparent; border-radius: 7px;
    font-size: 0.85rem; line-height: 1; cursor: pointer;
    background: #f1f5f9;
    opacity: 0; pointer-events: none;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease, opacity .12s ease;
}
/* Vis kun add-knapperne ved mouseover (rene rækker uden støj). Knapper med
   indhold (antal) forbliver dog synlige så overblikket bevarer tallene. */
.agenda-item-compact:hover .item-tool-btn { opacity: 1; pointer-events: auto; }
.item-tool-btn.has { opacity: 1; pointer-events: auto; }
.item-tool-btn:hover { transform: scale(1.14); }
.item-tool-btn:active { transform: scale(0.96); }
.item-tool-btn.act { background: #fff7ed; border-color: #fed7aa; }
.item-tool-btn.act:hover { background: #ffedd5; box-shadow: 0 2px 7px rgba(245,158,11,.30); }
.item-tool-btn.cmt { background: #eff6ff; border-color: #bfdbfe; }
.item-tool-btn.cmt:hover { background: #dbeafe; box-shadow: 0 2px 7px rgba(59,130,246,.30); }
.item-tool-btn.fu { background: #f5f3ff; border-color: #ddd6fe; }
.item-tool-btn.fu:hover { background: #ede9fe; box-shadow: 0 2px 7px rgba(139,92,246,.30); }
/* Antal som lille hjørne-badge — påvirker ikke knappens bredde (ingen forskydelse) */
.tool-count {
    position: absolute; top: -5px; right: -5px;
    min-width: 15px; height: 15px; padding: 0 3px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 99px; font-size: 0.6rem; font-weight: 700;
    color: #fff; box-shadow: 0 0 0 1.5px #fff;
}
.item-tool-btn.act .tool-count { background: #f59e0b; }
.item-tool-btn.cmt .tool-count { background: #3b82f6; }
.item-tool-btn.fu .tool-count { background: #8b5cf6; }

/* ── Transkriptioner under sektioner ─── */
.section-transcript-entry {
    border-top: 1px dashed #e5e7eb; margin-top: 4px;
}
.section-transcript-header {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 4px; font-size: 0.8rem; color: #64748b;
    cursor: pointer; user-select: none;
}
.section-transcript-header:hover { color: #334155; }
.section-transcript-label { flex: 1; font-style: italic; }
.section-transcript-chevron { font-size: 0.65rem; color: #94a3b8; }
.section-transcript-body {
    padding: 6px 4px 8px 18px;
}
.section-transcript-text {
    white-space: pre-wrap; font-family: inherit; font-size: 0.82rem;
    color: #334155; line-height: 1.5; margin: 0 0 6px;
    background: #f8fafc; border-radius: 6px; padding: 8px 10px;
    border: 1px solid #e5e7eb;
}
.section-transcript-summary {
    background: #f0fdf4; border: 1px solid #86efac; border-radius: 6px;
    padding: 8px 10px; font-size: 0.82rem; color: #166534; line-height: 1.55;
    white-space: pre-wrap; margin-bottom: 6px;
}

/* ── Item-modal kommentarer (legacy) ─── */
.item-comments-section {
    border-top: 1px solid #f1f5f9;
    padding-top: 12px; margin-top: 10px;
}
.item-comments-list { margin-bottom: 10px; }
.meeting-comment {
    background: #f8fafc; border-radius: 8px;
    padding: 8px 12px; margin-bottom: 6px;
    border-left: 3px solid #e2e8f0;
}
.meeting-comment-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 3px;
}
.meeting-comment-author { font-weight: 700; font-size: 0.8rem; color: #334155; }
.meeting-comment-behalf { font-size: 0.75rem; color: #94a3b8; font-style: italic; }
.meeting-comment-time { font-size: 0.72rem; color: #94a3b8; }
.meeting-comment-text { font-size: 0.86rem; color: #1e293b; white-space: pre-wrap; }
.meeting-comment-del {
    background: none; border: none; cursor: pointer;
    color: #cbd5e1; font-size: 0.85rem; padding: 0 2px;
    transition: color 0.1s;
}
.meeting-comment-del:hover { color: #dc2626; }
.meeting-comment-edit {
    background: none; border: none; cursor: pointer;
    color: #cbd5e1; font-size: 0.72rem; padding: 0 2px;
    transition: color 0.1s, opacity 0.1s; opacity: 0.7;
}
.meeting-comment-edit:hover { color: var(--primary); opacity: 1; }
.item-add-comment { display: flex; flex-direction: column; gap: 6px; }
.item-comment-behalf-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #64748b; }
.item-comment-behalf-row select { padding: 3px 8px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.82rem; font-family: inherit; }

/* ── Gammelt agenda-item-style (bevares til bagudkompatibilitet) ─── */
.agenda-item {
    border-left: 4px solid var(--primary);
    padding: 16px;
    margin: 16px 0;
    background: #f8fafc;
    border-radius: 0 8px 8px 0;
    cursor: grab;
    transition: all 0.2s;
}

.agenda-item.completed {
    opacity: 0.5;
    border-left-color: var(--success);
    background: #f0fdf4;
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.item-title {
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}

/* ─── Ansvarlig-tildeling på sektioner ─── */
.agenda-responsible-badge {
    display: inline-flex; align-items: center;
    background: #eef4ff; color: var(--primary);
    border-radius: 99px; padding: 2px 10px;
    font-size: 0.75rem; font-weight: 600;
    white-space: nowrap;
}
/* Fritekst-input til ansvarlig på sektioner */
.agenda-responsible-input {
    border: none; border-bottom: 1.5px dashed #cbd5e1;
    background: transparent; padding: 2px 6px;
    font-size: 0.78rem; font-weight: 600; font-family: inherit;
    color: #64748b; cursor: text; min-width: 70px; max-width: 140px;
    outline: none; border-radius: 0;
    transition: border-color 0.12s, color 0.12s;
}
.agenda-responsible-input::placeholder { color: #cbd5e1; font-weight: 400; }
.agenda-responsible-input:focus { border-bottom-color: var(--primary); color: #1e293b; }
.agenda-responsible-input:not(:placeholder-shown) { color: var(--primary); border-bottom-color: #bfdbfe; }

/* Ansvarlig som dropdown på hovedpunkter */
.agenda-responsible-select {
    border: none; border-bottom: 1.5px dashed #cbd5e1;
    background: transparent; padding: 2px 6px;
    font-size: 0.78rem; font-weight: 600; font-family: inherit;
    color: var(--primary); cursor: pointer; max-width: 160px;
    outline: none; border-radius: 0;
    transition: border-color 0.12s, color 0.12s;
}
.agenda-responsible-select:hover { border-bottom-color: #bfdbfe; }
.agenda-responsible-select:focus { border-bottom-color: var(--primary); }

/* Inline item-navn — bredde begrænset til tekst+3 chars via size-attribut */
.item-name-input {
    flex: 0 0 auto;
    background: transparent; border: none; outline: none;
    padding: 0; margin: 0;
    font-size: 0.85rem; font-family: inherit; color: #1e293b;
    line-height: 1.4; cursor: text;
    max-width: 100%;
}
.item-name-input:focus {
    background: white; border-radius: 4px;
    box-shadow: 0 0 0 2px #bfdbfe;
    padding: 1px 5px; margin: -1px -5px;
    cursor: text;
}
.agenda-item-compact.completed .item-name-input {
    text-decoration: line-through; color: #94a3b8;
}

/* Inline done-checkbox */
.item-done-check {
    width: 14px; height: 14px; flex-shrink: 0;
    cursor: pointer; margin: 0;
    accent-color: #22c55e;
}

/* Readonly done-mark */
.item-done-mark { font-size: 0.8rem; flex-shrink: 0; color: #22c55e; }
.item-done-mark.pending { color: #cbd5e1; }

/* Slet-knap på item-linjen — vises ved hover */
.item-delete-btn {
    background: none; border: none; padding: 0 3px;
    font-size: 0.9rem; font-weight: 700; line-height: 1;
    cursor: pointer; color: #d1d5db; flex-shrink: 0;
    margin-left: auto;
    opacity: 0; transition: opacity 0.1s, color 0.1s;
}
.agenda-item-wrap:hover .item-delete-btn { opacity: 1; }
.item-delete-btn:hover { color: #dc2626; }

/* Notes-knap på item-linjen */
.item-notes-btn {
    background: none; border: none; padding: 0 2px;
    font-size: 0.72rem; line-height: 1; cursor: pointer;
    flex-shrink: 0; opacity: 0.3; transition: opacity 0.1s;
}
.item-notes-btn:hover, .item-notes-btn.has-notes { opacity: 1; }

/* Inline noter under item */
.item-notes-inline { padding: 3px 6px 4px 26px; }
.item-notes-textarea {
    width: 100%; min-height: 52px; padding: 6px 9px;
    border: 1.5px solid #e2e8f0; border-radius: 7px;
    font-size: 0.83rem; font-family: inherit;
    background: #fafafa; resize: vertical; outline: none;
    box-sizing: border-box;
}
.item-notes-textarea:focus { border-color: var(--primary); background: white; }

.agenda-responsible-select {
    border: 1.5px solid #e2e8f0; border-radius: 99px;
    padding: 2px 8px; font-size: 0.75rem; font-weight: 600;
    color: #64748b; background: white; cursor: pointer;
    font-family: inherit; outline: none;
    transition: border-color 0.12s;
    max-width: 160px;
}
.agenda-responsible-select:hover { border-color: var(--primary); color: var(--primary); }
.agenda-responsible-select:focus { border-color: var(--primary); }
/* Vis blå styling når en person er valgt */
.agenda-responsible-select.has-value {
    background: #eef4ff; color: var(--primary);
    border-color: #bfdbfe;
}
/* Kompakt variant til underpunkter */
.agenda-responsible-select--item {
    font-size: 0.72rem; padding: 1px 7px; max-width: 140px;
}

.note-field {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    margin-top: 12px;
}

.note-field:focus {
    outline: none;
    border-color: var(--primary);
}

/* Archive */
.archive-toggle {
    background: var(--teal);
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.archive-section {
    display: none;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 16px;
    overflow: hidden;
}

.archive-section.visible {
    display: block;
}

.archive-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.archive-item {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    gap: 16px;
    align-items: center;
}

/* Auto Save Indicator */
.auto-save-indicator {
    font-size: 0.72rem;
    color: #9ca3af;
    opacity: 1;
    transition: opacity 0.8s ease;
    white-space: nowrap;
    user-select: none;
}

.auto-save-indicator.hidden {
    opacity: 0;
}

.auto-save-indicator.saving {
    color: #f59e0b;
}

.auto-save-indicator.saved {
    color: #9ca3af;
}

/* Recovery Banner */
.recovery-banner {
    background: var(--warning);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: none;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.recovery-banner.visible {
    display: flex;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--success);
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s;
    z-index: 2000;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* Add Section Button */
.add-section-btn {
    background: var(--light);
    border: 2px dashed var(--gray);
    padding: 20px;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    color: var(--gray);
    font-weight: 600;
    transition: all 0.2s;
}

.add-section-btn:hover {
    background: #e5e7eb;
    border-color: var(--primary);
    color: var(--primary);
}

/* Admin Styles */
.admin-section {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 24px;
}

.admin-section h2 {
    margin-bottom: 16px;
    color: var(--primary);
}

.user-list {
    margin-bottom: 16px;
}

.user-item {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: var(--light);
    border-radius: 8px;
    margin-bottom: 8px;
}

.badge {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge.admin {
    background: var(--purple);
    color: white;
}

.badge.user {
    background: var(--primary);
    color: white;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.status-card {
    background: var(--light);
    padding: 16px;
    border-radius: 8px;
}

.status-card h3 {
    color: var(--gray);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

/* Modal Content */
#outputContent {
    background: #f8fafc;
    padding: 24px;
    border-radius: 8px;
    white-space: pre-wrap;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    line-height: 1.8;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--light);
}

.close-modal {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--gray);
    padding: 8px;
    line-height: 1;
}

.close-modal:hover {
    color: var(--danger);
}

/* Print Styles */
@media print {
    .controls, .filter-bar, button, .action-item input, .drag-handle, 
    .status-select, .priority-btn, .archive-toggle, .auto-save-indicator, 
    .recovery-banner, .auth-banner {
        display: none !important;
    }
    
    .agenda-content {
        display: block !important;
    }
    
    .archive-section {
        display: none !important;
    }
    
    body {
        background: white;
        padding: 0;
    }
    
    .container {
        max-width: 100%;
    }
    
    header {
        margin-top: 0;
    }
}

/* Tablet og mellemstore skærme */
@media (max-width: 960px) {
    body { padding: 14px; }
    .container { padding: 0; }
    header h1 { font-size: 1.6rem; }
}

/* Mobil */
@media (max-width: 768px) {
    body { padding: 10px; }
    header h1 { font-size: 1.4rem; }
    header .subtitle { font-size: 0.9rem; }

    .controls, .filter-bar {
        flex-direction: column;
    }

    /* Kun knapper DIREKTE i controls/filter skal være full-width — ikke alle knapper globalt */
    .controls > button, .controls > a,
    .filter-bar > button, .filter-bar > a { width: 100%; justify-content: center; }

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

    .archive-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Modaler: fuld bredde på smartphone */
    .modal-content {
        width: 95%;
        max-width: none;
        margin: 10% auto;
        padding: 18px;
    }

    /* Admin / user lister: stak elementer lodret */
    .user-item {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    /* Tabeller i cards: tillad vandret scroll i stedet for overflow */
    .admin-section table,
    .pk-card table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Reducer padding i cards */
    .card, .admin-section, .pk-card { padding: 16px; }
}

/* Lille mobil (≤480px) */
@media (max-width: 480px) {
    body { padding: 8px; }
    header h1 { font-size: 1.25rem; }

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

    /* Sørg for at grids som kanban/pk-grid ikke presser indhold */
    .pk-grid { gap: 14px; }

    /* Modaler: næsten fuld skærm */
    .modal-content {
        width: 100%;
        margin: 0;
        min-height: 100vh;
        border-radius: 0;
    }
}
/* ── Item Status Controls ── */
.item-status-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.item-priority {
    display: flex;
    gap: 4px;
}

.priority-btn {
    padding: 4px 10px;
    border: 2px solid #e5e7eb;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    background: white;
    transition: all 0.2s;
}

.priority-btn.high  { border-color: var(--danger);  color: var(--danger); }
.priority-btn.medium { border-color: var(--warning); color: var(--warning); }
.priority-btn.low   { border-color: var(--success); color: var(--success); }

.priority-btn.high.active   { background: var(--danger);  color: white; }
.priority-btn.medium.active { background: var(--warning); color: white; }
.priority-btn.low.active    { background: var(--success); color: white; }

.item-status-select {
    padding: 4px 10px;
    border-radius: 15px;
    border: 2px solid #e5e7eb;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    background: white;
}

.item-status-select.pending     { border-color: var(--warning); color: var(--warning); }
.item-status-select.completed   { border-color: var(--success); color: var(--success); }

/* Forenklet "Afsluttet"-toggle til item-niveau.
   Ufuldført: kun checkboxen er synlig (badge-tekst skjult).
   Afsluttet: hele pillen vises som grøn "✅ Afsluttet"-badge. */
.item-done-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 15px;
    border: 2px solid transparent;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    background: transparent;
    color: var(--gray);
    transition: all 0.15s;
    user-select: none;
}
.item-done-toggle > span { display: none; }
.item-done-toggle:hover { border-color: var(--success); color: var(--success); }
.item-done-toggle:hover > span { display: inline; }
.item-done-toggle input { margin: 0; cursor: pointer; accent-color: var(--success); }
.item-done-toggle.checked {
    border-color: var(--success);
    color: var(--success);
    background: #f0fdf4;
    padding: 4px 12px;
}
.item-done-toggle.checked > span { display: inline; }

/* ── Deltager-chips på bestyrelsesmøde ── */
.attendees-picker {
    display: grid;
    grid-template-columns: 1fr;  /* enkelt kolonne i sidebar */
    padding: 8px 12px 10px;
    gap: 6px 12px;
    padding: 8px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
}
.attendees-picker:empty::before {
    content: "Indlæser brugere…";
    color: var(--gray); font-size: 0.85rem; padding: 4px 6px;
}
.att-col {
    display: flex; flex-direction: column; gap: 4px;
}
.att-chips-row {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.att-section-label {
    font-size: 0.68rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.att-section-guest .att-section-label,
.att-col-guest .att-section-label { color: #94a3b8; }

.att-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 16px;
    border: 2px solid #e5e7eb;
    background: #f8fafc;
    font-size: 0.82rem;
    color: var(--gray);
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer; user-select: none;
    transition: all 0.12s;
}
.att-chip:hover { border-color: var(--primary); }
.att-chip.selected {
    border-color: var(--success);
    background: #f0fdf4;
    color: var(--success);
}
.att-chip.selected::before { content: "✓"; font-weight: 700; }
.att-chip[aria-disabled="true"] { cursor: default; opacity: 0.7; }
.att-chip[aria-disabled="true"]:hover { border-color: inherit; }

/* ── Info Badge ── */
.info-badge {
    background: #ede9fe;
    color: var(--purple);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ── Completion Info ── */
.completion-info {
    display: none;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--success);
    font-weight: 600;
}

.completion-info.visible {
    display: block;
}

/* ── Action Items ── */
.action-items {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.action-item.completed {
    background: #f0fdf4;
    text-decoration: line-through;
    color: var(--gray);
}

.action-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.action-item span:nth-child(2) {
    flex: 1;
}

.responsible {
    background: var(--light);
    color: var(--gray);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Site Nav ── */
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 1100;
    padding: 0 24px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04) inset;
    border-bottom: 2px solid var(--primary);
}
.site-nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.02rem;
    white-space: nowrap;
    margin-right: 28px;
    color: white;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: opacity 0.15s;
}
.site-nav-brand:hover { opacity: 0.85; }
.site-nav-brand-icon {
    font-size: 1.25rem;
    filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.6));
}
.site-nav-brand-text {
    background: linear-gradient(90deg, #ffffff 0%, #bfdbfe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.site-nav-links {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 2px;
    overflow: visible;
    min-width: 0;
}
.site-nav-link {
    position: relative;
    padding: 6px 9px;
    border-radius: 7px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}
.site-nav-link:hover {
    color: white;
    background: rgba(255,255,255,0.08);
}
.site-nav-link.active {
    color: white;
    background: var(--primary);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

/* ─── Dropdown-navigation ──────────────────────────────────────── */
.site-nav-dropdown { position: relative; }

.site-nav-dd-btn {
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    display: flex; align-items: center; gap: 4px;
}
.site-nav-dd-arrow {
    font-size: 0.6rem; opacity: 0.75;
    transition: transform 0.18s;
    pointer-events: none;
}
.site-nav-dropdown.open .site-nav-dd-arrow { transform: rotate(180deg); }

.site-nav-dd-menu {
    display: none;
    position: absolute; top: 100%; left: 0;
    background: white; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    border: 1px solid #e2e8f0;
    min-width: 210px; z-index: 300;
    padding: 5px;
    /* Usynlig top-padding binder hover-zonen til menuen uden visuelt gap */
    margin-top: 0;
}
.site-nav-dropdown.open .site-nav-dd-menu { display: block; }
/* Hover for mus-brugere */
@media (hover: hover) {
    .site-nav-dropdown:hover .site-nav-dd-menu { display: block; }
    .site-nav-dropdown:hover .site-nav-dd-arrow { transform: rotate(180deg); }
}
.site-nav-dd-item {
    display: flex; align-items: center;
    padding: 8px 12px; border-radius: 7px;
    font-size: 0.84rem; color: #334155;
    text-decoration: none; white-space: nowrap;
    transition: background 0.1s;
}
.site-nav-dd-item:hover  { background: #f1f5f9; }
.site-nav-dd-item.active { background: #eef4ff; color: var(--primary); font-weight: 600; }

/* ─── Drawer-grupper (mobil) ───────────────────────────────────── */
.site-nav-drawer-group { border-bottom: 1px solid rgba(255,255,255,0.06); }
.site-nav-drawer-group-btn {
    width: 100%; text-align: left; border: none;
    background: transparent; font-family: inherit;
    padding: 12px 20px; font-size: 0.92rem;
    font-weight: 600; color: rgba(255,255,255,0.85);
    cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    transition: background 0.12s;
}
.site-nav-drawer-group-btn:hover   { background: rgba(255,255,255,0.06); }
.site-nav-drawer-group-btn.active  { color: white; }
.site-nav-drawer-chevron { font-size: 0.7rem; opacity: 0.6; }

.site-nav-drawer-group-items { display: none; }
.site-nav-drawer-group-items.open  { display: block; padding-bottom: 4px; }

.site-nav-drawer-item {
    display: block; padding: 9px 20px 9px 34px;
    font-size: 0.87rem; color: rgba(255,255,255,0.65);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.12s;
}
.site-nav-drawer-item:hover { color: white; background: rgba(255,255,255,0.05); }
.site-nav-drawer-item.active {
    color: white; font-weight: 600;
    border-left-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
}
.site-nav-drawer-link {
    display: block; padding: 12px 20px;
    font-size: 0.92rem; font-weight: 600;
    color: rgba(255,255,255,0.85); text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.12s;
}
.site-nav-drawer-link:hover  { background: rgba(255,255,255,0.06); color: white; }
.site-nav-drawer-link.active { color: white; background: rgba(255,255,255,0.1); }

/* ── Profil-avatar + dropdown (Homeit-stil) ──────────────────────────────── */
.nav-profile-wrap {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}
.nav-profile-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #2563eb;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: border-color 0.15s, transform 0.15s;
    padding: 0;
}
.nav-profile-btn:hover { border-color: rgba(255,255,255,0.6); transform: scale(1.05); }
.nav-avatar-initials {
    font-size: 0.72rem; font-weight: 700; color: white;
    line-height: 1; letter-spacing: 0.02em;
}
/* Dropdown-panel */
.nav-profile-dd {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 240px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e8ecf0;
    overflow: hidden;
    opacity: 0; transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 200;
}
.nav-profile-dd.open {
    opacity: 1; transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Header med navn + email */
.nav-pd-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.nav-pd-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: #2563eb; color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    flex-shrink: 0;
}
.nav-pd-name  { font-weight: 700; font-size: 0.88rem; color: #1e293b; line-height: 1.2; }
.nav-pd-email { font-size: 0.75rem; color: #64748b; margin-top: 1px; }
.nav-pd-role  { font-size: 0.7rem; color: #94a3b8; margin-top: 2px; }
/* Menu-items */
.nav-pd-items { padding: 6px 0; }
.nav-pd-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 9px 14px;
    background: none; border: none; cursor: pointer;
    font-size: 0.85rem; font-weight: 500; color: #374151;
    font-family: inherit; text-decoration: none;
    transition: background 0.1s;
    text-align: left;
}
.nav-pd-item:hover { background: #f1f5f9; color: #111827; }
.nav-pd-icon { font-size: 0.9rem; flex-shrink: 0; width: 18px; text-align: center; }
/* Divider + Logout */
.nav-pd-divider { height: 1px; background: #f1f5f9; margin: 2px 0; }
.nav-pd-logout { color: #dc2626; font-weight: 600; padding: 10px 14px; }
.nav-pd-logout:hover { background: #fef2f2; color: #b91c1c; }
.nav-pd-logout-icon { font-size: 1rem; }

/* Om Tranegården BM — modal */
.nav-about-modal {
    text-align: center; padding: 32px 28px 24px;
    max-width: 460px; position: relative;
}
.nav-about-logo  { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.nav-about-appname { font-size: 1.3rem; font-weight: 700; color: #1e293b; }
.nav-about-tagline { font-size: 0.85rem; color: #64748b; margin-top: 4px; }
.nav-about-version {
    display: inline-block; margin: 14px auto 0;
    background: #eff6ff; color: #2563eb;
    border: 1px solid #bfdbfe; border-radius: 99px;
    padding: 4px 14px; font-size: 0.8rem; font-weight: 700;
}
.nav-about-links {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 20px; font-size: 0.78rem;
}
.nav-about-links a { color: #2563eb; text-decoration: none; }
.nav-about-links a:hover { text-decoration: underline; }
.nav-about-links span { color: #cbd5e1; }
.nav-about-credit { font-size: 0.75rem; color: #94a3b8; margin-top: 12px; }

/* Changelog i Om-modal */
.nav-cl-wrap {
    text-align: left;
    margin: 16px 0 4px;
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
    max-height: 280px;
    overflow-y: auto;
}
.nav-cl-heading {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #94a3b8; margin-bottom: 10px;
}
.nav-cl-entry { margin-bottom: 14px; }
.nav-cl-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 5px; flex-wrap: wrap;
}
.nav-cl-version {
    background: #eff6ff; color: #2563eb;
    border: 1px solid #bfdbfe; border-radius: 99px;
    padding: 1px 9px; font-size: 0.72rem; font-weight: 700;
    flex-shrink: 0;
}
.nav-cl-title { font-size: 0.82rem; font-weight: 600; color: #1e293b; flex: 1; }
.nav-cl-date  { font-size: 0.72rem; color: #94a3b8; flex-shrink: 0; }
.nav-cl-list {
    margin: 0; padding-left: 16px;
    list-style: disc;
}
.nav-cl-list li {
    font-size: 0.78rem; color: #475569;
    margin-bottom: 2px; line-height: 1.4;
}

.site-nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 16px;
    flex-shrink: 0;
}
.site-nav-username {
    font-size: 0.88rem;
    color: #e2e8f0;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Top-bar: vis kun ikonet, navnet ligger som tooltip + i drawer.
   Ikonet bliver til en kompakt klikbar cirkel — sparer plads. */
.site-nav .site-nav-username {
    width: 32px; height: 32px;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    transition: background 0.15s, border-color 0.15s;
}
.site-nav .site-nav-username:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
}
.site-nav .site-nav-username-text { display: none; }
.site-nav .site-nav-username-icon { font-size: 1rem; line-height: 1; }
/* Drawer: vis fuldt navn (mobil-menu) */
.site-nav-drawer .site-nav-username {
    width: auto; height: auto;
    background: transparent; border: none;
    padding: 0;
}
.site-nav-role-badge {
    font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 99px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.site-nav-role-badge.role-owner   { background: #fbbf24; color: #78350f; }
.site-nav-role-badge.role-passive { background: #475569; color: #e2e8f0; }
/* Rolle-badge skjules i top-baren — vises kun i mobil-drawer + i profil-modal */
.site-nav .site-nav-role-badge { display: none; }
.site-nav-admin-link {
    font-size: 0.84rem;
    color: #e2e8f0;
    text-decoration: none;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid #475569;
    transition: all 0.15s;
}
.site-nav-admin-link:hover {
    color: white;
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.15);
}
.site-nav-privacy-link {
    font-size: 1rem;
    color: #94a3b8;
    text-decoration: none;
    padding: 5px 9px;
    border-radius: 7px;
    transition: all 0.15s;
    line-height: 1;
}
.site-nav-privacy-link:hover {
    color: white;
    background: rgba(148, 163, 184, 0.15);
}
.site-nav-logout {
    padding: 6px 13px !important;
    font-size: 0.84rem !important;
    background: transparent !important;
    border: 1px solid #475569 !important;
    color: #e2e8f0 !important;
    border-radius: 7px !important;
    cursor: pointer;
    box-shadow: none !important;
    transform: none !important;
    transition: all 0.15s !important;
}
.site-nav-logout:hover {
    border-color: var(--danger) !important;
    color: white !important;
    background: rgba(220, 38, 38, 0.1) !important;
}

/* ── Hamburger + Drawer (mobil/tablet) ── */
.site-nav-burger {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    margin-left: auto;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    transition: background 0.15s;
}
.site-nav-burger:hover { background: rgba(255,255,255,0.08); }
.site-nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}
.site-nav-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-nav-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.site-nav-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1095;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.site-nav-drawer-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.site-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 85vw);
    background: #1e293b;
    color: white;
    z-index: 1200;
    box-shadow: -10px 0 30px rgba(0,0,0,0.35);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.site-nav-drawer.open { transform: translateX(0); }
.site-nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #334155;
    font-weight: 700;
    font-size: 1rem;
    color: #e2e8f0;
    letter-spacing: 0.02em;
}
.site-nav-drawer-close {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
}
.site-nav-drawer-close:hover { background: rgba(255,255,255,0.08); color: white; }
.site-nav-drawer-links {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    gap: 2px;
}
.site-nav-drawer-links .site-nav-link {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
}
.site-nav-drawer-user {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid #334155;
    background: rgba(0,0,0,0.15);
}
.site-nav-drawer-user .site-nav-user {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-left: 0;
}
.site-nav-drawer-user .site-nav-admin-link,
.site-nav-drawer-user .site-nav-logout,
.site-nav-drawer-user .site-nav-privacy-link {
    width: 100%;
    text-align: center;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
}
.site-nav-drawer-user .site-nav-privacy-link {
    border: 1px solid #475569;
    color: #cbd5e1;
    box-sizing: border-box;
}
.site-nav-drawer-user .site-nav-privacy-link::before {
    content: "🔒 Privatlivspolitik";
    font-size: 0.9rem;
}
/* Skjul emoji-only versionen i drawer — vi viser tekst */
.site-nav-drawer-user .site-nav-privacy-link {
    font-size: 0 !important;
    line-height: 1;
}
.site-nav-drawer-user .site-nav-privacy-link::before {
    font-size: 0.9rem !important;
}

/* Skjul drawer og dens del af nav'en som default på desktop */
.site-nav-drawer,
.site-nav-drawer-backdrop { display: none; }

/* ≤960px: skift til hamburger-layout */
@media (max-width: 960px) {
    .site-nav { padding: 0 16px; }
    .site-nav-brand { margin-right: 12px; font-size: 0.96rem; }
    .site-nav-brand-text { font-size: 0.96rem; }
    .site-nav-links,
    .site-nav > .site-nav-user { display: none; }
    .site-nav-burger { display: flex; }
    .site-nav-drawer,
    .site-nav-drawer-backdrop { display: block; }
    .site-nav-drawer { display: flex; }
}

/* ── badge.member / role badges ── */
.badge.member                    { background: var(--primary); color: white; }
.badge.admin                     { background: #2563eb; color: white; }
.badge.owner                     { background: #fbbf24; color: #78350f; }
.badge.passive                   { background: #94a3b8; color: white; }
.badge.role-standard             { background: var(--primary); color: white; }
.badge.role-admin                { background: #2563eb; color: white; }
.badge.role-owner                { background: #fbbf24; color: #78350f; }
.badge.role-passive              { background: #94a3b8; color: white; }

/* ── Frontpage ── */
.fp-hero {
    background: white;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    text-align: center;
}
.fp-hero h1 { color: var(--primary); font-size: 2rem; margin-bottom: 8px; }
.fp-hero p  { color: var(--gray); font-size: 1.05rem; }

.fp-modules {
    display: grid;
    /* 5 kolonner på desktop — kompakt nok til at passe i én række.
       Falder tilbage til 2-3 kolonner på tablet og 2 på mobil. */
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
@media (max-width: 1024px) { .fp-modules { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .fp-modules { grid-template-columns: repeat(2, 1fr); } }

/* ─── Frontpage mobil-overrides ─── */
@media (max-width: 640px) {
    .fp-hero { padding: 20px 16px; }
    .fp-hero h1 { font-size: 1.4rem; }
    .fp-hero p  { font-size: 0.92rem; }

    .fp-property-card { padding: 12px 14px; }
    .fp-property-header { flex-direction: column; align-items: flex-start; gap: 2px; }
    .fp-property-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    .fp-announcements { padding: 14px 14px; }
    .fp-ann-header { gap: 8px; }

    /* Dual-members er allerede 1 kolonne ved 860px — ingen yderligere ændring */

    /* Member-cards: gå tilbage til lidt bredere kort på lille mobil */
    .fp-dual-members .fp-members-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* Bestyrelses-card header: fold knapper ned */
    .fp-members-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Stat-modulerne: 2 kolonner */
    .fp-modules { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .fp-module-card { padding: 12px 10px; }

    /* Ingen fuld-bredde knapper på forsiden — override den globale kontrol-regel */
    .fp-announcements button,
    .fp-members-card button,
    .fp-member-card button,
    .fp-chip-chat,
    .fp-coc-btn { width: auto !important; }
}

.fp-module-card {
    background: white;
    border-radius: 12px;
    padding: 16px 14px;          /* kompakt — var 24px 20px */
    text-align: center;
    text-decoration: none;
    color: #1e293b;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: all 0.22s;
    border: 2px solid transparent;
}
.fp-module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.13);
    border-color: var(--primary);
}
.fp-module-card .fp-icon { font-size: 1.8rem; margin-bottom: 7px; display: block; }
.fp-module-card .fp-label { font-weight: 700; font-size: 0.92rem; margin-bottom: 3px; }
.fp-module-card .fp-desc  { font-size: 0.74rem; color: var(--gray); line-height: 1.3; }

/* ─── Dual-members layout ─── */
.fp-dual-members {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 860px) {
    .fp-dual-members { grid-template-columns: 1fr; }
}
.fp-members-card {
    background: white;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.fp-members-card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.fp-members-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fp-members-card-title h2 {
    color: var(--primary);
    margin: 0;
    font-size: 1.1rem;
}
.fp-members-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.fp-coc-btn {
    background: #eef4ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 99px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--primary);
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.fp-coc-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

/* Puls-animation når CoC ikke er godkendt */
@keyframes cocPulse {
    0%, 100% { background: #eef4ff; border-color: #bfdbfe; box-shadow: none; transform: scale(1); }
    40%       { background: #fef9c3; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.25); transform: scale(1.06); }
    60%       { background: #fef9c3; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); transform: scale(1.04); }
}
.fp-coc-btn--unseen {
    animation: cocPulse 2.4s ease-in-out infinite;
    color: #b45309;
    border-color: #f59e0b;
    background: #fef9c3;
}

/* CoC approval list */
.fp-coc-approvals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0 4px;
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
}
.fp-coc-approval-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 99px;
    font-size: 0.76rem; font-weight: 600;
}
.fp-coc-approval-chip.approved  { background: #dcfce7; color: #15803d; }
.fp-coc-approval-chip.pending   { background: #f1f5f9; color: #64748b; }
.fp-coc-approve-banner {
    background: #eff6ff; border: 1.5px solid #bfdbfe;
    border-radius: 10px; padding: 14px 16px;
    margin-top: 12px; display: flex;
    align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.fp-coc-approve-banner p { margin: 0; font-size: 0.88rem; color: #1e40af; font-weight: 500; }
.fp-coc-approve-btn {
    background: var(--primary); color: white;
    border: none; border-radius: 8px;
    padding: 8px 18px; font-size: 0.88rem;
    font-weight: 700; cursor: pointer;
    white-space: nowrap; font-family: inherit;
    transition: background 0.12s;
}
.fp-coc-approve-btn:hover { background: #1d4ed8; }
.fp-coc-history-link {
    font-size: 0.78rem; color: #94a3b8;
    cursor: pointer; text-decoration: underline;
    background: none; border: none; font-family: inherit;
    padding: 0;
}
.fp-coc-history-link:hover { color: #475569; }

/* ─── CoC modal content ─── */
.fp-coc-content {
    line-height: 1.65;
    color: #1e293b;
    font-size: 0.92rem;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 4px;
}
.fp-coc-content h2 { font-size: 1.05rem; color: var(--primary); margin: 1.2em 0 0.4em; }
.fp-coc-content h3 { font-size: 0.97rem; color: #334155; margin: 1em 0 0.3em; font-weight: 700; }
.fp-coc-content h4 { font-size: 0.9rem; color: #475569; margin: 0.8em 0 0.2em; font-weight: 600; }
.fp-coc-content p  { margin: 0.35em 0; }
.fp-coc-content ul { margin: 0.4em 0 0.4em 1.4em; padding: 0; }
.fp-coc-content li { margin: 0.25em 0; }
.fp-coc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    margin-top: 12px;
}
.fp-coc-meta { font-size: 0.77rem; color: #94a3b8; }

/* ─── @Mention dropdown og badges ─── */
.mentions-dropdown {
    display: none;
    position: absolute;
    z-index: 9999;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
}
.mn-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer;
    font-size: 0.88rem; color: #1e293b;
    transition: background 0.08s;
}
.mn-item:hover, .mn-item.sel { background: #eef4ff; }
.mn-avatar-txt {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #6366f1);
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700; flex-shrink: 0;
}
.mn-name { flex: 1; }

/* Inline @mention badge i tekst */
.mention-tag {
    display: inline;
    background: #eef4ff;
    color: #2563eb;
    border-radius: 4px;
    padding: 0 3px;
    font-weight: 600;
    font-size: 0.92em;
    cursor: default;
}
/* Mention badge i notifikation-toast */
.mention-notif-ctx {
    font-size: 0.75rem; color: #94a3b8;
    font-style: italic; display: block; margin-top: 2px;
}

/* ─── Threads FAB mention-dot og shake-animation ─── */
.mention-fab-dot {
    display: none;
    position: absolute; top: -6px; right: -6px;
    background: #dc2626; color: white;
    border-radius: 50%; width: 18px; height: 18px;
    font-size: 0.65rem; font-weight: 800;
    border: 2px solid white;
    align-items: center; justify-content: center;
    z-index: 10; pointer-events: none;
}
@keyframes fabShake {
    0%, 100% { transform: rotate(0deg); }
    10%       { transform: rotate(-12deg); }
    20%       { transform: rotate(12deg); }
    30%       { transform: rotate(-10deg); }
    40%       { transform: rotate(10deg); }
    50%       { transform: rotate(-6deg); }
    60%       { transform: rotate(6deg); }
    70%       { transform: rotate(-3deg); }
    80%       { transform: rotate(3deg); }
}
.fab-mention-shake {
    animation: fabShake 0.8s ease-in-out;
    transform-origin: center bottom;
}

/* Indenfor de to halvbrede member-kasser: smallere kort, kolonne-layout viser navn+titel */
.fp-dual-members .fp-members-grid {
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
}
@media (max-width: 860px) {
    .fp-dual-members .fp-members-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* ─── Kompakt member-chip grid (7-10 chips i rækker) ─── */
.fp-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}
.fp-member-card {
    background: white;
    border-radius: 10px;
    padding: 12px 8px 28px; /* ekstra bund-padding til absolut chat-knap */
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: box-shadow 0.15s, transform 0.12s;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer; position: relative;
    border: 1.5px solid transparent;
    text-align: center;
    min-height: 100px;
}
.fp-member-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); transform: translateY(-1px); border-color: var(--primary); }

/* Presence dot — grøn online, rød offline */
.fp-online-dot {
    position: absolute; top: 6px; right: 6px;
    width: 9px; height: 9px; border-radius: 50%;
    border: 2px solid white;
    flex-shrink: 0;
}
.fp-online-dot.online  { background: #10b981; }
.fp-online-dot.offline { background: #94a3b8; }

/* Kompakt avatar */
.fp-avatar {
    width: 34px; height: 34px;
    border-radius: 50%; object-fit: cover;
    background: var(--light); flex-shrink: 0;
}
.fp-avatar-placeholder {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--primary); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.88rem; font-weight: 700; flex-shrink: 0;
}
/* Info-kolonne i chip */
.fp-chip-info { width: 100%; min-width: 0; }
.fp-member-name {
    font-weight: 700; font-size: 0.83rem; color: #0f172a;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.3;
}
.fp-member-role {
    color: var(--gray); font-size: 0.72rem; margin-top: 1px;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.3;
}
/* Chat-knap — absolut placeret nederst-højre i det vertikale tile */
.fp-chip-chat {
    position: absolute; bottom: 6px; right: 6px;
    background: #eef4ff; border: none; border-radius: 7px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.82rem;
    transition: background 0.12s;
}
.fp-chip-chat:hover { background: var(--primary); color: white; }
.fp-chip-unread {
    position: absolute; top: -5px; right: -5px;
    background: #dc2626; color: white;
    border-radius: 99px; font-size: 0.6rem; font-weight: 700;
    min-width: 16px; height: 16px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid white; pointer-events: none;
    line-height: 1;
}

/* Profil-popup overlay */
.fp-profile-popup {
    position: fixed; z-index: 1200;
    background: white; border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    min-width: 260px; max-width: 320px;
    animation: fpPopFadeIn 0.15s ease-out;
}
@keyframes fpPopFadeIn { from { opacity:0; transform:scale(0.94) translateY(4px); } to { opacity:1; transform:scale(1) translateY(0); } }
.fp-profile-popup-close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none; color: #94a3b8;
    cursor: pointer; font-size: 1.1rem; padding: 2px 4px;
}
.fp-profile-popup-close:hover { color: #334155; }
.fp-pop-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fp-pop-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.fp-pop-avatar-ph { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; flex-shrink: 0; }
.fp-pop-name { font-weight: 700; font-size: 1rem; color: #0f172a; }
.fp-pop-email { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.fp-pop-title { font-size: 0.82rem; color: #334155; margin-top: 2px; font-weight: 600; }
.fp-pop-divider { border: none; border-top: 1px solid #f1f5f9; margin: 10px 0; }
.fp-pop-resp-label { font-size: 0.7rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.fp-pop-resp { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.fp-pop-resp li { font-size: 0.82rem; color: #334155; display: flex; align-items: baseline; gap: 5px; }
.fp-pop-empty { font-size: 0.82rem; color: #94a3b8; font-style: italic; }
.fp-pop-chat-btn {
    width: 100%; margin-top: 12px;
    background: var(--primary); color: white; border: none;
    padding: 9px 14px; border-radius: 8px; font-weight: 600; font-size: 0.88rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.fp-pop-chat-btn:hover { background: var(--primary-dark); }

/* Legacy selectors der stadig bruges andre steder */
.fp-responsibilities { font-size: 0.85rem; color: #374151; }
.fp-responsibilities li { margin: 3px 0 3px 16px; }
.fp-edit-btn {
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    margin-top: 10px;
    background: var(--light) !important;
    color: var(--gray) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    transform: none !important;
}
.fp-edit-btn:hover { background: #e5e7eb !important; }

/* ── Drag & Drop Feedback ── */
.dragging {
    opacity: 0.5;
    cursor: grabbing !important;
}

/* Under drag-and-drop: bloker tekstmarkering overalt, så man ikke utilsigtet
   markerer/greyer indhold mens man trækker punkter eller sektioner rundt. */
body.is-dragging, body.is-dragging * {
    -webkit-user-select: none !important;
    user-select: none !important;
    cursor: grabbing !important;
}

.drag-over {
    outline: 2px dashed var(--primary);
    outline-offset: 2px;
    background: #eff6ff;
}

/* ──────────────────────────────────────────────────────────────────
   Threads (kommunikations-tråde) — FAB + side panel + ny-tråd modal
   Global: vises på alle sider via ThreadsUI.init()
   ────────────────────────────────────────────────────────────────── */
/* ─── In-app notification toast ─────────────────────────────────────── */
@keyframes ntFadeIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }

/* ─── VotesUI panel + FAB ────────────────────────────────────────────── */
.vt-fab {
    position:fixed; left:24px; bottom:24px;
    width:58px; height:58px;
    background:#7c3aed; color:white; border:none;
    border-radius:50%;
    font-size:1.5rem; cursor:pointer;
    box-shadow:0 4px 16px rgba(124,58,237,0.45);
    z-index:940;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s, transform 0.12s;
}
.vt-fab:hover { background:#6d28d9; }
.vt-fab.panel-open { background:#5b21b6; }
.vt-fab-badge {
    position:absolute; top:-4px; right:-4px;
    background:#dc2626; color:white;
    border-radius:99px; font-size:0.68rem; font-weight:700;
    min-width:18px; height:18px; padding:0 4px;
    display:flex; align-items:center; justify-content:center;
    border:2px solid white; pointer-events:none;
}
/* Ryste-animation når der er åbne afstemninger der ikke er stemt på */
.vt-fab.has-pending { animation: vtShake 2.5s ease 0s infinite; }
@keyframes vtShake {
    0%,60%,100%{ transform:rotate(0deg); }
    62%        { transform:rotate(-10deg); }
    66%        { transform:rotate(10deg); }
    70%        { transform:rotate(-8deg); }
    74%        { transform:rotate(8deg); }
    78%        { transform:rotate(-4deg); }
    82%        { transform:rotate(0deg); }
}

.vt-panel-aside {
    position:fixed; left:24px; bottom:96px;
    width:min(580px, calc(100vw - 48px));
    height:min(700px, calc(100vh - 140px));
    background:#fff;
    border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
    z-index:950;
    display:flex; flex-direction:column;
    overflow:hidden;
    transform-origin:bottom left;
    transform:scale(0.92) translateY(12px);
    opacity:0; pointer-events:none;
    transition:transform 0.2s ease-out, opacity 0.2s ease-out;
}
.vt-panel-aside.open { transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }

.vt-panel-header {
    background:linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color:white; padding:14px 18px;
    display:flex; justify-content:space-between; align-items:center;
    gap:10px; flex-shrink:0;
}
.vt-panel-title { margin:0; font-size:1.02rem; font-weight:700; }
.vt-panel-actions { display:flex; gap:6px; align-items:center; }
.vt-panel-new-btn {
    background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.38);
    color:white; padding:5px 12px; border-radius:7px;
    font-size:0.78rem; font-weight:600; cursor:pointer;
}
.vt-panel-new-btn:hover { background:rgba(255,255,255,0.34); }
.vt-info-btn {
    width:28px; height:28px;
    background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.35);
    color:white; border-radius:50%; cursor:pointer;
    font-size:0.88rem; font-weight:700; font-style:italic;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background 0.12s;
}
.vt-info-btn:hover { background:rgba(255,255,255,0.36); }

/* Regler-panel */
.vt-rules-panel {
    padding:14px 16px; background:#fafbfc;
    border-bottom:1px solid #e5e7eb;
    font-size:0.84rem; position:relative;
    max-height:380px; overflow-y:auto;
}
.vt-rules-close {
    position:absolute; top:10px; right:12px;
    background:none; border:none; color:#94a3b8; cursor:pointer; font-size:1.1rem;
}
.vt-rules-panel h4 { margin:0 0 4px; color:#5b21b6; font-size:0.9rem; }
.vt-rules-intro { margin:0 0 10px; color:#64748b; font-size:0.78rem; }
.vt-rules-section { display:flex; flex-direction:column; gap:8px; }
.vt-rule {
    display:flex; gap:10px; align-items:flex-start;
    background:white; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px;
}
.vt-rule-highlight { border-color:#c4b5fd; background:#faf5ff; }
.vt-rule-icon {
    font-size:1.1rem; flex-shrink:0; width:24px; text-align:center; margin-top:1px;
}
.vt-rule strong { display:block; color:#0f172a; margin-bottom:2px; }
.vt-rule div { color:#475569; line-height:1.4; }
.vt-rule em { color:#7c3aed; font-style:normal; font-weight:600; }
.vt-rules-footer { margin:10px 0 0; font-size:0.76rem; color:#64748b; background:#fff3f0; border-left:3px solid #f59e0b; padding:7px 10px; border-radius:4px; }

/* Afstemningsform toggle */
.vt-context-toggle {
    display:flex; gap:8px; margin-bottom:2px;
}
.vt-context-opt {
    flex:1; display:flex; align-items:center; gap:7px;
    padding:8px 12px; border:1.5px solid #e2e8f0;
    border-radius:7px; cursor:pointer; font-size:0.86rem;
    transition:all 0.12s;
}
.vt-context-opt:has(input:checked) { border-color:#7c3aed; background:#faf5ff; color:#5b21b6; font-weight:600; }
.vt-context-opt input { display:none; }

/* Context badges på kort/detail */
.vt-ctx-badge { font-size:0.68rem; font-weight:700; padding:2px 7px; border-radius:99px; }
.vt-ctx-badge.online  { background:#eff6ff; color:#1d4ed8; }
.vt-ctx-badge.meeting { background:#fdf4ff; color:#7c3aed; }

/* Deltagervælger i opret-modal */
.vt-voter-picker {
    border:1px solid #e2e8f0; border-radius:8px;
    max-height:160px; overflow-y:auto;
    padding:6px;
    display:flex; flex-wrap:wrap; gap:4px;
}
.vt-voter-chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px; border-radius:99px;
    font-size:0.78rem; font-weight:600;
    border:1.5px solid #e2e8f0; background:white; color:#475569;
    cursor:pointer; user-select:none;
    transition:all 0.12s;
}
.vt-voter-chip:hover { border-color:#7c3aed; }
.vt-voter-chip.selected { background:#ede9fe; border-color:#7c3aed; color:#5b21b6; }
.vt-voter-chip.passive { border-style:dashed; }
.vt-voter-chip .vt-vc-dot {
    width:7px; height:7px; border-radius:50%;
    background:#7c3aed; display:none;
}
.vt-voter-chip.selected .vt-vc-dot { display:inline-block; }

/* Vedhæftnings-area */
.vt-att-area {
    border:1.5px dashed #cbd5e1; border-radius:8px;
    padding:10px 12px;
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.vt-att-pick-btn {
    padding:5px 12px; background:#f1f5f9;
    border:1px solid #e2e8f0; border-radius:6px;
    font-size:0.82rem; cursor:pointer; color:#334155;
    flex-shrink:0;
}
.vt-att-pick-btn:hover { background:#e2e8f0; }
.vt-att-chips { display:flex; flex-wrap:wrap; gap:5px; flex:1; min-width:0; }
.vt-att-chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 8px; background:#f8fafc;
    border:1px solid #e2e8f0; border-radius:5px;
    font-size:0.74rem; color:#334155;
}
.vt-att-chip button {
    background:none; border:none; color:#94a3b8;
    cursor:pointer; font-size:0.85rem; padding:0; line-height:1;
}
.vt-att-chip button:hover { color:#dc2626; }
/* Vedhæftnings-vis i detail-view */
.vt-detail-atts { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.vt-detail-att {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px; background:#f8fafc;
    border:1px solid #e2e8f0; border-radius:7px;
    font-size:0.82rem; color:#334155; text-decoration:none;
}
.vt-detail-att:hover { background:#eef4ff; border-color:var(--primary); color:var(--primary); }
.vt-panel-close {
    background:transparent; border:none; color:white;
    font-size:1.5rem; cursor:pointer; padding:0 4px; opacity:0.85;
}
.vt-panel-close:hover { opacity:1; }

.vt-panel-tabs {
    display:flex; gap:0; border-bottom:1px solid #f1f5f9;
    flex-shrink:0; background:#fafbfc;
}
.vt-panel-tab {
    flex:1; padding:10px 14px; border:none; background:transparent;
    color:var(--gray); font-weight:600; font-size:0.86rem;
    cursor:pointer; border-bottom:2px solid transparent;
    transition:all 0.12s; font-family:inherit;
}
.vt-panel-tab.active { color:#7c3aed; border-bottom-color:#7c3aed; background:white; }
.vt-panel-tab:hover { background:var(--light); }

.vt-panel-body { flex:1; overflow-y:auto; padding:10px; }
.vt-empty-state { text-align:center; color:var(--gray); padding:32px 16px; font-style:italic; }

/* Vote cards in list */
.vt-card-item {
    background:#fafbfc; border:1px solid #e5e7eb; border-radius:10px;
    padding:12px 14px; margin-bottom:8px; cursor:pointer;
    transition:background 0.12s, box-shadow 0.12s;
    border-left:3px solid #7c3aed;
}
.vt-card-item:hover { background:#f3f4f6; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.vt-card-item-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px; }
.vt-card-item-title { font-weight:600; font-size:0.92rem; color:#0f172a; flex:1; line-height:1.3; }
.vt-card-item-meta { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:7px; }
.vt-cat { font-size:0.7rem; background:#ede9fe; color:#5b21b6; padding:2px 8px; border-radius:99px; font-weight:700; }
.vt-dl-badge { font-size:0.7rem; background:#fef3c7; color:#92400e; padding:2px 8px; border-radius:99px; font-weight:600; }
.vt-dl-badge.late { background:#fee2e2; color:#b91c1c; }
.vt-my-badge { font-size:0.7rem; font-weight:700; padding:2px 9px; border-radius:99px; white-space:nowrap; flex-shrink:0; }
.vt-my-badge.for     { background:#dcfce7; color:#166534; }
.vt-my-badge.imod    { background:#fee2e2; color:#b91c1c; }
.vt-my-badge.afstår  { background:#fef3c7; color:#92400e; }
.vt-my-badge.pending { background:#ede9fe; color:#5b21b6; }

/* Mini progress bars */
.vt-mini-bars { display:flex; height:6px; border-radius:3px; overflow:hidden; background:#e5e7eb; margin-bottom:5px; }
.vt-mini-bar.for  { background:#16a34a; }
.vt-mini-bar.imod { background:#dc2626; }
.vt-mini-bar.abs  { background:#f59e0b; }
.vt-card-item-footer { font-size:0.74rem; color:#475569; }
.vt-res-line { font-size:0.78rem; margin-top:5px; padding:5px 8px; border-radius:5px; font-weight:600; }
.vt-res-line.passed  { background:#f0fdf4; color:#166534; }
.vt-res-line.failed  { background:#fff1f2; color:#991b1b; }
.vt-res-line.neutral { background:#f8fafc; color:#334155; }

/* Detail view */
.vt-detail { padding:4px 4px 12px; }
.vt-back-btn { background:none; border:none; color:#7c3aed; font-weight:600; font-size:0.85rem; cursor:pointer; padding:4px 0 12px; display:flex; align-items:center; gap:4px; }
.vt-back-btn:hover { text-decoration:underline; }
.vt-detail-title { font-weight:700; font-size:1.05rem; color:#0f172a; margin-bottom:6px; line-height:1.35; }
.vt-detail-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; align-items:center; }
.vt-maj-note { font-size:0.72rem; color:#64748b; }
.vt-detail-desc { font-size:0.88rem; color:#475569; margin:6px 0 12px; line-height:1.45; white-space:pre-wrap; }
.vt-result-strip { padding:10px 14px; border-radius:8px; font-weight:700; font-size:0.9rem; margin-bottom:12px; }
.vt-result-strip.passed  { background:#f0fdf4; border-left:3px solid #16a34a; color:#166534; }
.vt-result-strip.failed  { background:#fff1f2; border-left:3px solid #dc2626; color:#991b1b; }
.vt-result-strip.neutral { background:#f8fafc; border-left:3px solid #64748b; color:#334155; }
.vt-result-note { font-size:0.8rem; font-weight:400; margin-top:3px; opacity:0.85; }

.vt-bars-detail { margin-bottom:8px; }
.vt-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.vt-bar-label { font-size:0.78rem; font-weight:700; width:72px; flex-shrink:0; }
.vt-bar-label.for-c  { color:#16a34a; }
.vt-bar-label.imod-c { color:#dc2626; }
.vt-bar-label.abs-c  { color:#92400e; }
.vt-bar-track { flex:1; background:#f1f5f9; border-radius:99px; height:10px; overflow:hidden; }
.vt-bar-fill { height:100%; border-radius:99px; transition:width 0.4s; }
.vt-bar-fill.for  { background:#16a34a; }
.vt-bar-fill.imod { background:#dc2626; }
.vt-bar-fill.abs  { background:#f59e0b; }
.vt-cast-info { font-size:0.78rem; color:#64748b; margin:4px 0 12px; }

/* Vote buttons */
.vt-detail-vote { background:#f8fafc; border-radius:10px; padding:12px 14px; margin-bottom:12px; }
.vt-vote-row { display:flex; gap:8px; margin-bottom:8px; }
.vt-btn-vote { flex:1; padding:11px 8px; border:2px solid transparent; border-radius:9px; font-weight:700; font-size:0.88rem; cursor:pointer; font-family:inherit; transition:all 0.14s; }
.vt-btn-vote.for    { border-color:#16a34a; color:#16a34a; background:white; }
.vt-btn-vote.imod   { border-color:#dc2626; color:#dc2626; background:white; }
.vt-btn-vote.abs    { border-color:#f59e0b; color:#92400e; background:white; }
.vt-btn-vote.for:hover, .vt-btn-vote.for.active    { background:#16a34a; color:white; }
.vt-btn-vote.imod:hover, .vt-btn-vote.imod.active  { background:#dc2626; color:white; }
.vt-btn-vote.abs:hover, .vt-btn-vote.abs.active    { background:#f59e0b; color:white; }

/* Proxy */
.vt-proxy-wrap { margin-top:8px; }
.vt-proxy-wrap label { font-size:0.8rem; font-weight:600; color:#475569; display:block; margin-bottom:4px; }
.vt-proxy-wrap select { width:100%; padding:7px 10px; border:1px solid #d1d5db; border-radius:7px; font-size:0.86rem; font-family:inherit; }
.vt-proxy-note { font-size:0.7rem; color:#6366f1; background:#eef2ff; padding:1px 6px; border-radius:99px; }

/* Voter list */
.vt-vl-section { margin-top:8px; }
.vt-vl-head { font-size:0.72rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.05em; padding-bottom:6px; border-bottom:1px solid #f1f5f9; margin-bottom:4px; }
.vt-vl-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid #f8fafc; font-size:0.85rem; }
.vt-vl-row:last-child { border-bottom:none; }
.vt-vl-name { flex:1; color:#1e293b; }
.vt-vl-chip { font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:99px; }
.vt-vl-chip.for  { background:#dcfce7; color:#166534; }
.vt-vl-chip.imod { background:#fee2e2; color:#b91c1c; }
.vt-vl-chip.abs  { background:#fef3c7; color:#92400e; }
.vt-vl-chip.nd   { background:#f1f5f9; color:#94a3b8; }

/* Admin strip */
.vt-admin-strip { display:flex; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #f1f5f9; }
.vt-close-btn { padding:8px 16px; background:#7c3aed; color:white; border:none; border-radius:7px; font-size:0.82rem; font-weight:600; cursor:pointer; }
.vt-close-btn:hover { background:#6d28d9; }
.vt-del-btn { padding:8px 12px; background:#fee2e2; color:#dc2626; border:none; border-radius:7px; font-size:0.82rem; cursor:pointer; }
.vt-del-btn:hover { background:#fecaca; }

/* Create modal (overlay) */
.vt-create-modal {
    position:fixed; inset:0; z-index:1100;
    background:rgba(0,0,0,0.5);
    display:none; align-items:center; justify-content:center;
    padding:20px;
}
.vt-create-inner {
    background:white; border-radius:14px; padding:22px;
    max-width:520px; width:100%; max-height:90vh; overflow-y:auto;
}
.vt-create-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.vt-create-header strong { font-size:1.05rem; color:#0f172a; }
.vt-create-header button { background:none; border:none; font-size:1.4rem; cursor:pointer; color:#64748b; }
.vt-create-inner label { display:block; font-size:0.82rem; font-weight:600; color:#475569; margin:10px 0 4px; }
.vt-create-inner input, .vt-create-inner select, .vt-create-inner textarea {
    width:100%; padding:9px 12px; border:1px solid #d1d5db; border-radius:7px;
    font-size:0.9rem; font-family:inherit; box-sizing:border-box;
}
.vt-create-inner textarea { resize:vertical; min-height:60px; }
.vt-create-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

/* Mobile */
@media (max-width:540px) {
    .vt-panel-aside { left:0; right:0; bottom:0; width:auto; border-radius:16px 16px 0 0; transform-origin:bottom center; }
    .vt-vote-row { flex-direction:column; }
    .vt-fab { left:16px; bottom:16px; }
}
/* ─── END VotesUI ─────────────────────────────────────────────────────────── */

.fp-threads-toggle {
    position:fixed; right:24px; bottom:24px;
    width:68px; height:68px;
    background:var(--primary); color:white; border:none;
    border-radius:50%;
    cursor:pointer; font-size:1.9rem;
    box-shadow:0 6px 18px rgba(0,0,0,0.22);
    z-index:960;
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.18s ease-out, box-shadow 0.18s ease-out, background 0.18s;
}
.fp-threads-toggle:hover {
    background:var(--primary-dark);
    transform:scale(1.06);
    box-shadow:0 8px 22px rgba(0,0,0,0.28);
}
.fp-threads-toggle.panel-open { background:var(--primary-dark); }
@keyframes fpWiggle {
    0%, 88%, 100% { transform:rotate(0); }
    90%  { transform:rotate(-10deg); }
    92%  { transform:rotate(10deg); }
    94%  { transform:rotate(-8deg); }
    96%  { transform:rotate(8deg); }
    98%  { transform:rotate(-3deg); }
}
@keyframes fpPulseRing {
    0%   { box-shadow:0 6px 18px rgba(0,0,0,0.22), 0 0 0 0 rgba(220,38,38,0.55); }
    70%  { box-shadow:0 6px 18px rgba(0,0,0,0.22), 0 0 0 14px rgba(220,38,38,0); }
    100% { box-shadow:0 6px 18px rgba(0,0,0,0.22), 0 0 0 0 rgba(220,38,38,0); }
}
.fp-threads-toggle.has-unread {
    animation:fpWiggle 4s ease-in-out infinite, fpPulseRing 2s ease-out infinite;
}
.fp-threads-toggle.has-unread:hover { animation:none; }
@media (prefers-reduced-motion: reduce) {
    .fp-threads-toggle.has-unread { animation:none; }
}
.fp-threads-toggle.panel-open .toggle-icon-open { display:none; }
.fp-threads-toggle:not(.panel-open) .toggle-icon-close { display:none; }
.fp-threads-toggle .unread-badge {
    position:absolute; top:-4px; right:-4px;
    background:#dc2626; color:white;
    min-width:20px; height:20px; padding:0 5px;
    border-radius:99px;
    font-size:0.72rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 2px white;
    line-height:1;
}

.fp-threads-panel {
    position:fixed; right:24px; bottom:96px;
    width:min(460px, calc(100vw - 48px));
    height:min(720px, calc(100vh - 140px));
    background:#ffffff;
    border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
    z-index:950;
    display:flex; flex-direction:column;
    overflow:hidden;
    transform-origin:bottom right;
    transform:scale(0.92) translateY(12px);
    opacity:0;
    pointer-events:none;
    transition:transform 0.2s ease-out, opacity 0.2s ease-out;
}
.fp-threads-panel.open {
    transform:scale(1) translateY(0);
    opacity:1;
    pointer-events:auto;
}

.fp-threads-header {
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:white;
    padding:14px 18px;
    display:flex; justify-content:space-between; align-items:center;
    gap:10px; flex-shrink:0;
}
.fp-threads-header h2 {
    color:white; margin:0; font-size:1.02rem; font-weight:600;
    display:flex; align-items:center; gap:8px;
}
.fp-threads-actions { display:flex; gap:6px; align-items:center; }
.fp-new-thread-btn {
    background:rgba(255,255,255,0.22); color:white;
    border:1px solid rgba(255,255,255,0.38);
    padding:6px 12px; border-radius:8px;
    cursor:pointer; font-size:0.82rem; font-weight:600;
    transition:background 0.15s, border-color 0.15s;
}
.fp-new-thread-btn:hover {
    background:rgba(255,255,255,0.34);
    border-color:rgba(255,255,255,0.55);
}
.fp-threads-close {
    background:transparent; border:none; color:white;
    cursor:pointer; font-size:1.6rem; line-height:1;
    padding:0 6px; opacity:0.85;
}
.fp-threads-close:hover { opacity:1; }
.fp-threads-fullscreen {
    background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.42);
    color:white; cursor:pointer;
    height:30px; padding:0 12px;
    border-radius:7px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0.8rem; font-weight:600; line-height:1;
    white-space:nowrap;
    transition:background 0.15s;
}
.fp-threads-fullscreen:hover { background:rgba(255,255,255,0.38); }
.fp-threads-panel.fullscreen .fp-threads-fullscreen {
    background:#fbbf24; color:#78350f;
    border-color:#f59e0b;
}
.fp-threads-panel.fullscreen .fp-threads-fullscreen:hover {
    background:#f59e0b; color:#451a03;
}

/* ─── Body-layout: dock (1-kolonne) vs fullscreen (2-kolonne) ────────── */
.fp-threads-body {
    flex:1; min-height:0;
    display:flex; flex-direction:column;
    overflow:hidden;
}
.fp-threads-sidebar {
    flex:1; min-height:0;
    display:flex; flex-direction:column;
    overflow:hidden;
}
.fp-thread-detail { display:none; }

/* Fuldskærms-tilstand: panelet fylder viewport under nav-baren (64px) */
.fp-threads-panel.fullscreen {
    right:0; left:0; top:64px; bottom:0;
    width:auto; height:auto;
    border-radius:0;
    transform:scale(1) translateY(0);
    z-index:980;
    box-shadow:none;
}
.fp-threads-panel.fullscreen .fp-threads-body {
    flex-direction:row;
}
.fp-threads-panel.fullscreen .fp-threads-sidebar {
    flex:0 0 320px;
    border-right:1px solid #e5e7eb;
    background:#fafbfc;
}
.fp-threads-panel.fullscreen .fp-thread-detail {
    display:flex; flex-direction:column;
    flex:1; min-width:0;
    background:#ffffff;
}

/* Detail-pane indhold */
.fp-thread-detail-empty {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; color:#64748b;
    padding:40px 20px;
}
.fp-thread-detail-empty-icon { font-size:3rem; margin-bottom:14px; opacity:0.5; }
.fp-thread-detail-empty h3 { color:#334155; margin:0 0 6px; font-size:1.05rem; font-weight:700; }
.fp-thread-detail-empty p { margin:0; font-size:0.9rem; }

.fp-thread-detail-header {
    flex-shrink:0;
    padding:14px 20px;
    border-bottom:1px solid #e5e7eb;
    background:#ffffff;
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px;
}
.fp-thread-detail-title h3 {
    margin:2px 0 0;
    font-size:1.15rem; font-weight:700; color:#0f172a;
    overflow:hidden; text-overflow:ellipsis;
}
.fp-thread-detail-cat {
    font-size:0.7rem; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.04em;
}
.fp-thread-detail-meta {
    display:flex; gap:6px; align-items:center; flex-shrink:0;
}
.fp-thread-detail-content {
    flex:1; min-height:0;
    display:flex; flex-direction:column;
    padding:0 20px 16px;
    max-width:1000px; width:100%;
    margin:0 auto;
}
.fp-thread-detail-content .fp-thread-messages {
    flex:1; min-height:0;
    max-height:none;
    margin-top:0;
    border:none; padding:14px 0;
}
.fp-thread-detail-content .fp-thread-input-row {
    border-top:1px solid #e5e7eb;
    padding-top:12px;
}

/* Mobile fullscreen: kollaps til én kolonne. Sidebar viser tråde til en
   åbnes — så skifter detail-pane ind og fylder skærmen. */
@media (max-width: 720px) {
    .fp-threads-panel.fullscreen .fp-threads-sidebar {
        flex:1 1 auto; border-right:none;
    }
    .fp-threads-panel.fullscreen.has-open-thread .fp-threads-sidebar { display:none; }
    .fp-threads-panel.fullscreen .fp-thread-detail-back {
        display:inline-flex; align-items:center; gap:6px;
        background:#f1f5f9; border:1px solid #cbd5e1;
        padding:6px 12px; border-radius:7px;
        font-size:0.82rem; font-weight:600; color:#334155;
        cursor:pointer; margin-bottom:8px;
    }
}
.fp-thread-detail-back { display:none; }

.fp-thread-list {
    flex:1; overflow-y:auto;
    display:flex; flex-direction:column;
    padding:0;
    background:#ffffff;
}
.fp-thread-list > p { margin:0; padding:20px; }

/* Søgefelt øverst i panelet — Slack "Jump to..."-style */
.fp-thread-search-row {
    position:relative;
    padding:8px 12px;
    border-bottom:1px solid #eef1f4;
    background:#fafbfc;
    flex-shrink:0;
}
.fp-thread-search {
    width:100%;
    padding:7px 30px 7px 32px;
    border:1px solid #e2e8f0;
    border-radius:8px;
    font-size:0.85rem;
    background:#ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 10px center;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.fp-thread-search:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}
.fp-thread-search-clear {
    position:absolute; right:18px; top:50%;
    transform:translateY(-50%);
    width:22px; height:22px;
    border:none; background:#e2e8f0;
    border-radius:50%;
    color:#64748b;
    cursor:pointer; font-size:0.95rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
}
.fp-thread-search-clear:hover { background:#cbd5e1; color:#1e293b; }

@media (max-width:520px) {
    .fp-threads-panel {
        right:0; left:0; bottom:0; top:64px;
        width:auto; height:auto;
        border-radius:0;
        transform:translateY(100%);
        transform-origin:center;
    }
    .fp-threads-panel.open { transform:translateY(0); }
    .fp-threads-toggle { right:16px; bottom:16px; }

    /* Skjul hover-afhængige slet-knapper på mobil — de flyder tilfældigt
       rundt når tap trigger :hover. Destruktive handlinger håndteres fra
       desktop eller admin-panelet. */
    .fp-thread-delete { display:none !important; }

    /* Større tap-targets for indre knapper i tråd-beskeder */
    .fp-thread-message .tm-time { font-size:0.72rem; }
    .fp-thread-input-row input { font-size:16px; }  /* undgå iOS zoom */
    .fp-thread-input-row button {
        min-width:40px; min-height:40px;
    }
}

/* Slack-style kompakt tråd-række — én linje pr. tråd når lukket. */
.fp-thread-item {
    border-bottom:none;
    padding:5px 18px 5px 14px;
    cursor:pointer; background:white;
    transition:background 0.12s, box-shadow 0.12s, transform 0.1s;
    position:relative;
}
.fp-thread-item:hover {
    background:#f1f5f9;
    box-shadow:inset 3px 0 0 var(--primary);
}
.fp-thread-item:active { transform:scale(0.997); }
.fp-thread-item.open {
    background:#eef4ff;
    box-shadow:inset 4px 0 0 var(--primary);
    padding-top:10px; padding-bottom:10px;
    margin:4px 0;
    border-top:1px solid #e0e7ff;
    border-bottom:1px solid #e0e7ff;
}
.fp-thread-item.unread { background:#fffbf2; }
.fp-thread-item.unread:hover { background:#fef6e0; box-shadow:inset 3px 0 0 #f59e0b; }
.fp-thread-item.unread .fp-thread-title { font-weight:700; color:#0f172a; }

.fp-thread-top { display:flex; align-items:center; gap:6px; min-height:24px; }
.fp-thread-title {
    font-weight:500; color:#475569; flex:1;
    font-size:0.88rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Hash-prefiks (Slack-rytme) — kun synlig når tråden ikke er åben */
.fp-thread-item:not(.open) .fp-thread-title::before {
    content:"# ";
    color:#94a3b8; font-weight:400;
}
.fp-thread-item.open .fp-thread-title { font-weight:700; color:#0f172a; font-size:0.95rem; }
.fp-thread-meta {
    font-size:0.7rem; color:var(--gray);
    white-space:nowrap;
}
/* Skjul kategori-mærker og synligheds-pills når tråden er lukket — for tæt overblik.
   Når åben kan brugeren se metadata. */
.fp-thread-item:not(.open) .fp-thread-visibility,
.fp-thread-item:not(.open) .fp-thread-meta { display:none; }
.fp-thread-item:not(.open) .fp-thread-msgcount {
    font-size:0.68rem; padding:1px 6px;
    background:transparent; color:#94a3b8;
}
.fp-thread-item:not(.open).unread .fp-thread-msgcount {
    background:#fef3c7; color:#92400e;
    font-weight:600;
}
.fp-thread-unread-dot {
    width:8px; height:8px; border-radius:50%;
    background:#dc2626; flex-shrink:0;
}
/* Preview-linjen er skjult by default — ren én-linje overblik.
   Bruges kun ved hover så man hurtigt kan se den seneste besked. */
.fp-thread-preview {
    display:none;
    margin-top:3px;
    font-size:0.78rem; color:#64748b;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    padding-left:24px;
}
.fp-thread-item:hover:not(.open) .fp-thread-preview { display:block; }
.fp-thread-delete {
    background:transparent; border:none; color:#94a3b8;
    cursor:pointer; font-size:0.9rem; padding:2px 6px;
    opacity:0; transition:opacity 0.15s, color 0.15s;
}
.fp-thread-item:hover .fp-thread-delete { opacity:0.75; }
.fp-thread-delete:hover { opacity:1; color:#dc2626; }

/* Chevron — diskret når lukket, fremhævet når aktiv (Slack-stil) */
.fp-thread-chevron {
    color:#cbd5e1;
    font-size:0.78rem;
    line-height:1;
    transition:transform 0.15s ease, color 0.15s;
    display:inline-flex;
    align-items:center; justify-content:center;
    flex-shrink:0;
    width:14px; height:14px;
    background:transparent;
}
.fp-thread-item:hover .fp-thread-chevron { color:var(--primary); }
.fp-thread-item.open .fp-thread-chevron {
    transform:rotate(90deg);
    color:var(--primary);
}

/* Besked-tæller badge */
.fp-thread-msgcount {
    font-size:0.72rem;
    background:#f1f5f9;
    color:#475569;
    padding:2px 8px;
    border-radius:10px;
    white-space:nowrap;
    font-weight:500;
}
.fp-thread-item.open .fp-thread-msgcount {
    background:#e0e7ff;
    color:#3730a3;
}
.fp-thread-item.unread .fp-thread-msgcount {
    background:#fef3c7;
    color:#92400e;
    font-weight:600;
}

/* Hover-state: gør forhåndsvisning mere læsbar */
.fp-thread-item:not(.open):hover .fp-thread-preview { color:#334155; }
.fp-thread-item:not(.open):hover .fp-thread-title { color:#0f172a; }

/* Slack-style besked-strøm: avatars i venstre margin, ingen bubbles,
   hover-baggrund. Konsekutive beskeder fra samme bruger inden for 5 min
   grupperes — kun første besked viser avatar + header. */
.fp-thread-messages {
    margin-top:10px; padding:6px 0;
    border-top:1px solid #e5e7eb;
    max-height:360px; overflow-y:auto;
    display:flex; flex-direction:column; gap:0;
    background:#ffffff;
}
.tm-empty {
    color:var(--gray); font-size:0.9rem;
    text-align:center; padding:30px 20px;
}
.tm-row {
    display:flex; gap:10px;
    padding:6px 12px;
    transition:background 0.1s;
    word-wrap:break-word;
    position:relative;
}
.tm-row:not(.tm-cont) { padding-top:10px; margin-top:2px; }
.tm-row.tm-cont { padding-top:1px; padding-bottom:1px; }
.tm-row:hover { background:#f8fafc; }
/* Mine beskeder får en lille blå venstre-stripe — diskret men tydelig */
.tm-row.tm-mine { box-shadow:inset 2px 0 0 var(--primary); }
.tm-row.tm-mine:hover { background:#eef4ff; }

.tm-gutter {
    flex-shrink:0; width:36px;
    display:flex; align-items:flex-start; justify-content:center;
}
.tm-avatar {
    width:36px; height:36px; border-radius:8px;
    object-fit:cover; flex-shrink:0;
}
.tm-avatar-fallback {
    display:flex; align-items:center; justify-content:center;
    color:white; font-weight:700; font-size:0.85rem;
    letter-spacing:0.02em;
    user-select:none;
}
.tm-gutter-time {
    display:none;
    font-size:0.68rem; color:#94a3b8; line-height:1;
    padding-top:5px;
    font-variant-numeric:tabular-nums;
}
.tm-row.tm-cont:hover .tm-gutter-time { display:inline-block; }

.tm-content {
    flex:1; min-width:0;
    font-size:0.92rem; line-height:1.45; color:#1f2937;
}
.tm-header {
    display:flex; align-items:baseline; gap:8px;
    margin-bottom:1px;
    flex-wrap:wrap;
}
.tm-name {
    font-weight:700; color:#0f172a;
    font-size:0.92rem;
}
.tm-author-title {
    font-size:0.72rem;
    color:#7c3aed;
    background:#f3e8ff;
    padding:1px 7px; border-radius:99px;
    font-weight:600;
}
.tm-time {
    font-size:0.72rem; color:#94a3b8;
    font-weight:400;
}
.tm-text { color:#1f2937; word-wrap:break-word; }
.tm-redact-btn {
    background:transparent; border:none;
    cursor:pointer; font-size:0.7rem;
    color:#94a3b8; opacity:0;
    padding:0 0 0 6px;
    transition:opacity 0.12s;
}
.tm-row:hover .tm-redact-btn { opacity:0.7; }
.tm-redact-btn:hover { opacity:1; color:#dc2626; }

.fp-thread-input-row {
    margin-top:10px; display:flex; gap:6px; align-items:center;
    padding-top:10px; border-top:1px solid #e5e7eb;
}
.fp-thread-input-row input[type="text"] {
    flex:1; padding:9px 14px; border:1px solid #d1d5db;
    border-radius:20px; font-size:0.9rem;
    outline:none; transition:border-color 0.15s, box-shadow 0.15s;
}
.fp-thread-input-row input[type="text"]:focus {
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79, 70, 229, 0.12);
}
.fp-thread-input-row button {
    background:var(--primary); color:white; border:none;
    width:36px; height:36px; border-radius:50%;
    cursor:pointer; font-size:0.95rem;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}

/* ─── Reactions: pills + add-button + picker ─────────────────────────────── */
.rx-row {
    display:flex; flex-wrap:wrap; gap:4px;
    margin-top:4px;
    align-items:center;
}
.rx-pill {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 8px;
    background:#f1f5f9;
    border:1px solid #e2e8f0;
    border-radius:99px;
    font-size:0.82rem; line-height:1.4;
    cursor:pointer;
    user-select:none;
    transition:background 0.12s, border-color 0.12s;
}
.rx-pill:hover { background:#e2e8f0; border-color:#cbd5e1; }
.rx-pill.mine {
    background:#dbeafe; border-color:#93c5fd; color:#1e3a8a;
    font-weight:600;
}
.rx-pill.mine:hover { background:#bfdbfe; }
.rx-pill .rx-count {
    font-variant-numeric:tabular-nums;
    font-size:0.78rem;
}
/* Add-knap inde i rx-row (når der er eksisterende reaktioner) */
.rx-add-btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:2px 8px;
    background:transparent;
    border:1px dashed #cbd5e1;
    border-radius:99px;
    color:#64748b;
    font-size:0.78rem;
    cursor:pointer;
    transition:all 0.12s;
}
.rx-add-btn:hover { border-color:var(--primary); color:var(--primary); background:#eef4ff; }
/* Floating add-knap der dukker op ved hover på en besked-række */
.rx-add-btn-floating {
    position:absolute;
    right:14px; top:8px;
    background:white;
    border:1px solid #e2e8f0;
    width:28px; height:28px;
    padding:0;
    border-radius:14px;
    font-size:0.72rem;
    color:#64748b;
    box-shadow:0 1px 3px rgba(0,0,0,0.08);
    opacity:0;
    transition:opacity 0.12s, background 0.12s;
}
.tm-row:hover .rx-add-btn-floating,
.chat-msg:hover .rx-add-btn-floating { opacity:1; }
.rx-add-btn-floating:hover { background:#eef4ff; color:var(--primary); border-color:var(--primary); }
/* Sørg for at message-row er positioneret så den floating-knap kan absolutpositioneres */
.tm-row { position:relative; }
.chat-msg { position:relative; }

/* Reaktions-picker (popover med 8 quick-emojis) */
.rx-picker {
    z-index:1100;
    background:white;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:6px;
    display:flex; gap:2px;
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.rx-picker-emoji {
    background:transparent;
    border:none;
    cursor:pointer;
    width:34px; height:34px;
    padding:0;
    border-radius:6px;
    font-size:1.15rem;
    transition:background 0.1s, transform 0.1s;
}
.rx-picker-emoji:hover {
    background:#f1f5f9;
    transform:scale(1.18);
}

/* Dark/colored bubbles (mine chat-bubble) skal have synlig pill */
.chat-msg.mine .rx-pill {
    background:rgba(255,255,255,0.18);
    border-color:rgba(255,255,255,0.32);
    color:white;
}
.chat-msg.mine .rx-pill:hover {
    background:rgba(255,255,255,0.28);
}
.chat-msg.mine .rx-pill.mine {
    background:rgba(255,255,255,0.92);
    color:var(--primary);
    border-color:white;
}
.chat-msg.mine .rx-add-btn {
    background:transparent;
    border-color:rgba(255,255,255,0.32);
    color:rgba(255,255,255,0.85);
}
.chat-msg.mine .rx-add-btn:hover {
    border-color:white; color:white; background:rgba(255,255,255,0.16);
}
.fp-thread-input-row .fp-thread-att-btn {
    background:#f1f5f9; color:#475569; font-size:1rem;
}
.fp-thread-input-row .fp-thread-att-btn:hover { background:#e2e8f0; color:#1e293b; }

/* Pending attachments — chips ovenover input-row */
.fp-thread-att-pending {
    display:flex; flex-wrap:wrap; gap:6px;
    padding:0 0 6px;
}
.fp-thread-att-pending:empty { display:none; }
.fp-att-chip {
    display:inline-flex; align-items:center; gap:6px;
    background:#eef2ff; color:#3730a3;
    border:1px solid #c7d2fe;
    padding:4px 6px 4px 10px; border-radius:20px;
    font-size:0.78rem; max-width:240px;
}
.fp-att-chip-icon { font-size:0.95rem; }
.fp-att-chip-name {
    font-weight:500;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    max-width:140px;
}
.fp-att-chip-size { color:#6366f1; opacity:0.85; }
.fp-att-chip-x {
    background:transparent; border:none; cursor:pointer;
    color:#4338ca; font-size:1rem; line-height:1;
    padding:0 2px; opacity:0.7;
}
.fp-att-chip-x:hover { opacity:1; color:#dc2626; }

/* Vedhæftninger inde i tråd-/chat-beskeder */
.tm-attachments {
    display:flex; flex-wrap:wrap; gap:6px;
    margin-top:6px;
}
.tm-att-img {
    display:block; max-width:180px;
    border-radius:8px; overflow:hidden;
    border:1px solid rgba(0,0,0,0.1);
}
.tm-att-img img {
    display:block; width:100%; height:auto;
    max-height:180px; object-fit:cover;
}
.chat-msg.mine .tm-att-img { border-color:rgba(255,255,255,0.3); }

.tm-att-file {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:10px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    text-decoration:none; color:#1f2937;
    font-size:0.82rem; max-width:240px;
    transition:background 0.15s, transform 0.1s;
}
.tm-att-file:hover { background:#eef2f7; transform:translateY(-1px); }
.chat-msg.mine .tm-att-file {
    background:rgba(255,255,255,0.18);
    border-color:rgba(255,255,255,0.35);
    color:white;
}
.chat-msg.mine .tm-att-file:hover { background:rgba(255,255,255,0.28); }
.tm-att-icon { font-size:1.2rem; flex-shrink:0; }
.tm-att-name {
    font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    flex:1; min-width:0;
}
.tm-att-size { font-size:0.72rem; opacity:0.75; flex-shrink:0; }
.fp-thread-input-row button:hover { background:var(--primary-dark); }

/* Online-medlemmer i tråd-panelet */
.fp-thread-members-section { border-bottom:1px solid #eef1f4; }
.fp-thread-members-section:empty { display:none; }
.fp-thread-members-section .fp-members-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
    gap:8px;
    padding:12px 14px 14px;
    background:#fbfcfe;
}
.fp-member-tile {
    display:flex; flex-direction:column; align-items:center;
    gap:4px;
    padding:8px 6px;
    background:white;
    border:1px solid #e5e7eb;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.12s;
    font-family:inherit;
    text-align:center;
    min-height:92px;
}
.fp-member-tile:hover {
    border-color:var(--primary);
    background:#f5f3ff;
    transform:translateY(-1px);
    box-shadow:0 2px 6px rgba(79,70,229,0.12);
}
.fp-member-tile.online { border-color:#bbf7d0; }
.fp-member-tile.online:hover { border-color:var(--primary); }
.fp-member-tile.unread { border-color:#fda4af; background:#fff1f2; }
.fp-member-tile-avatar-wrap {
    position:relative;
    width:40px; height:40px;
}
.fp-member-tile-avatar {
    width:40px; height:40px;
    border-radius:50%;
    object-fit:cover;
    display:block;
}
.fp-member-tile-placeholder {
    background:linear-gradient(135deg, #a78bfa, #6366f1);
    color:white;
    font-weight:600; font-size:0.85rem;
    display:flex; align-items:center; justify-content:center;
}
.fp-member-tile-dot {
    position:absolute;
    bottom:0; right:0;
    width:11px; height:11px;
    background:#22c55e;
    border:2px solid white;
    border-radius:50%;
    box-shadow:0 0 0 1px rgba(0,0,0,0.05);
}
.fp-member-tile-unread {
    position:absolute;
    top:-2px; right:-2px;
    width:10px; height:10px;
    background:#ef4444;
    border:2px solid white;
    border-radius:50%;
}
.fp-member-tile-name {
    font-size:0.75rem;
    font-weight:500;
    color:#334155;
    line-height:1.2;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:100%;
}
.fp-member-tile-title {
    font-size:0.66rem;
    color:#64748b;
    line-height:1.1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:100%;
}

/* ── Inline 1:1 chat-view i threads-panelet (ikke-index sider) ── */
.fp-threads-body { position:relative; }
.tm-pc-view {
    position:absolute; inset:0; z-index:10;
    display:flex; flex-direction:column;
    background:var(--bg, #fff);
}
.tm-pc-header {
    display:flex; align-items:center; gap:10px;
    padding:10px 16px;
    border-bottom:1px solid var(--border, #e2e8f0);
    flex-shrink:0;
}
.tm-pc-back {
    background:none; border:none; cursor:pointer;
    color:var(--primary); font-size:0.88rem;
    padding:4px 8px; border-radius:6px;
    line-height:1;
}
.tm-pc-back:hover { background:var(--hover, #f1f5f9); }
.tm-pc-peer-name { font-weight:600; font-size:0.95rem; color:var(--text); }
.tm-pc-msgs {
    flex:1; overflow-y:auto;
    padding:12px 14px;
    display:flex; flex-direction:column; gap:6px;
}
.tm-pc-empty {
    color:var(--gray); font-style:italic;
    font-size:0.88rem; text-align:center; margin-top:20px;
}
.tm-pc-msg { display:flex; flex-direction:column; max-width:82%; }
.tm-pc-msg.mine  { align-self:flex-end;  align-items:flex-end; }
.tm-pc-msg.theirs { align-self:flex-start; align-items:flex-start; }
.tm-pc-bubble {
    padding:7px 11px; border-radius:14px;
    font-size:0.88rem; line-height:1.45;
    word-break:break-word; white-space:pre-wrap;
}
.tm-pc-msg.mine   .tm-pc-bubble { background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
.tm-pc-msg.theirs .tm-pc-bubble { background:#f1f5f9; color:var(--text); border-bottom-left-radius:4px; }
.tm-pc-meta { font-size:0.7rem; color:var(--gray); margin-top:2px; padding:0 3px; }
.tm-pc-compose {
    display:flex; gap:8px; align-items:flex-end;
    padding:8px 10px;
    border-top:1px solid var(--border, #e2e8f0);
    flex-shrink:0;
}
.tm-pc-textarea {
    flex:1; resize:none; min-height:36px; max-height:120px;
    border:1px solid var(--border, #e2e8f0); border-radius:8px;
    padding:8px 10px; font-size:0.88rem; font-family:inherit;
    overflow-y:auto; line-height:1.4;
}
.tm-pc-textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 2px #dbeafe; }
.tm-pc-send {
    background:var(--primary); color:#fff;
    border:none; border-radius:8px;
    padding:8px 14px; cursor:pointer;
    font-size:0.88rem; flex-shrink:0; height:36px;
}
.tm-pc-send:hover { background:var(--primary-dark, #1d4ed8); }

/* Slack-style kategori-grupper — kompakte sektioner uden tunge skillelinjer */
.fp-cat-group { border-bottom:none; padding-bottom:6px; }
.fp-cat-group:first-child { padding-top:6px; }
.fp-cat-header {
    display:flex; align-items:center; gap:6px;
    padding:6px 14px 4px;
    background:transparent;
    cursor:pointer;
    user-select:none;
    font-size:0.7rem; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.04em;
    border-bottom:none;
    transition:color 0.12s;
}
.fp-cat-header:hover { color:#1e293b; }
.fp-cat-chevron {
    display:inline-block;
    transition:transform 0.15s;
    font-size:0.7rem; color:#cbd5e1;
}
.fp-cat-header:hover .fp-cat-chevron { color:#64748b; }
.fp-cat-group.collapsed .fp-cat-chevron { transform:rotate(-90deg); }
.fp-cat-group.collapsed .fp-cat-children { display:none; }
.fp-cat-icon { font-size:0.85rem; opacity:0.85; }
.fp-cat-label { flex:1; }
.fp-cat-count {
    font-size:0.65rem; color:#94a3b8;
    background:transparent; padding:1px 4px;
    font-weight:600;
}
.fp-cat-count.has-unread {
    background:#dc2626; color:white;
    padding:1px 7px; border-radius:99px;
    font-size:0.66rem;
}
.fp-cat-children .fp-thread-item { padding-left:28px; }
.fp-cat-children .fp-thread-item.open { padding-left:24px; }

.fp-thread-visibility {
    font-size:0.66rem;
    padding:1px 6px;
    border-radius:99px;
    font-weight:600;
    letter-spacing:0.02em;
    flex-shrink:0;
}
.fp-thread-visibility.board { background:#eef2ff; color:#4338ca; }
.fp-thread-visibility.public { background:#ecfdf5; color:#047857; }

/* Ny tråd modal */
.nt-field { margin-bottom:14px; }
.nt-field label {
    display:block; font-weight:600; margin-bottom:5px;
    font-size:0.9rem; color:#334155;
}
.nt-field input[type="text"],
.nt-field select {
    width:100%; padding:9px 12px;
    border:1px solid #d1d5db; border-radius:8px;
    font-size:0.95rem; box-sizing:border-box;
    background:white;
}
.nt-field input[type="text"]:focus,
.nt-field select:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,0.12);
}
.nt-vis-options { display:flex; gap:10px; }
.nt-vis-options label {
    flex:1; margin:0;
    padding:12px 14px;
    border:1.5px solid #e5e7eb;
    border-radius:10px;
    cursor:pointer;
    display:flex; gap:10px; align-items:flex-start;
    transition:border-color 0.15s, background 0.15s;
}
.nt-vis-options label:hover {
    border-color:#cbd5e1;
    background:#f8fafc;
}
.nt-vis-options input[type="radio"] {
    margin-top:2px;
    accent-color:var(--primary);
}
.nt-vis-options input[type="radio"]:checked + .nt-vis-text {
    color:var(--primary-dark);
}
.nt-vis-options label:has(input:checked) {
    border-color:var(--primary);
    background:#eef2ff;
}
.nt-vis-text strong {
    display:block; font-size:0.92rem; color:#1e293b;
    margin-bottom:2px;
}
.nt-vis-text small {
    font-size:0.78rem; color:#64748b; line-height:1.35;
}

/* ─── Profile modal ──────────────────────────────────────────────────── */
.profile-modal {
    display:none; position:fixed; inset:0; z-index:1100;
    background:rgba(15,23,42,0.55); backdrop-filter:blur(3px);
    align-items:center; justify-content:center; padding:20px;
}
.profile-modal.active { display:flex; }
.profile-modal-content {
    background:#fff; border-radius:14px; width:100%; max-width:520px;
    box-shadow:0 20px 50px rgba(0,0,0,0.28);
    display:flex; flex-direction:column; max-height:92vh; overflow:hidden;
    animation:profileFadeIn 0.18s ease;
}
@keyframes profileFadeIn {
    from { opacity:0; transform:translateY(10px) scale(0.98); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.profile-modal-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 20px; border-bottom:1px solid #e5e7eb;
}
.profile-modal-header h2 { margin:0; font-size:1.05rem; color:#1e293b; }
.profile-close {
    background:none; border:none; font-size:1.6rem; line-height:1;
    cursor:pointer; color:#94a3b8; padding:0 6px;
}
.profile-close:hover { color:#1e293b; }
.profile-modal-body { padding:20px; overflow-y:auto; }
.profile-field { margin-bottom:14px; }
.profile-field label {
    display:block; font-weight:600; font-size:0.88rem;
    color:#334155; margin-bottom:6px;
}
.profile-label-hint {
    font-weight:400; color:#64748b; font-size:0.78rem; margin-left:6px;
}
.profile-field input[type="email"],
.profile-field input[type="text"] {
    width:100%; padding:10px 12px; font-size:0.95rem;
    border:1px solid #e5e7eb; border-radius:8px; box-sizing:border-box;
    font-family:inherit;
}
.profile-field input[type="email"]:focus,
.profile-field input[type="text"]:focus {
    outline:none; border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(102,126,234,0.15);
}
.profile-static {
    padding:9px 12px; background:#f8fafc; border:1px solid #e5e7eb;
    border-radius:8px; color:#475569; font-size:0.92rem;
}
.profile-help {
    margin:6px 0 0; font-size:0.78rem; color:#64748b; line-height:1.4;
}
.profile-sep {
    border:none; border-top:1px solid #e5e7eb; margin:16px 0;
}
/* Notifikations-præferencer */
.profile-notify-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:6px;
}
.profile-notify-row {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px;
    border-radius:6px;
    cursor:pointer;
    font-size:0.88rem;
    color:#334155;
    transition:background 0.12s;
}
.profile-notify-row:hover { background:#eef2f7; }
.profile-notify-row input[type="checkbox"] {
    width:16px; height:16px;
    accent-color:var(--primary, #4f46e5);
    cursor:pointer;
    margin:0;
}
.profile-notify-icon { font-size:1rem; flex-shrink:0; }
.profile-notify-label { flex:1; line-height:1.3; }
.profile-notify-toggle-all {
    flex:1;
    padding:6px 10px;
    font-size:0.78rem;
    background:#f1f5f9;
    border:1px solid #cbd5e1;
    color:#334155;
    border-radius:6px;
    cursor:pointer;
    transition:background 0.12s;
}
.profile-notify-toggle-all:hover { background:#e2e8f0; }

.profile-status {
    margin-top:10px; font-size:0.85rem; min-height:1.2em;
}
.profile-status-error { color:var(--danger, #dc2626); }
.profile-status-info  { color:#64748b; }
.profile-modal-footer {
    display:flex; gap:10px; justify-content:flex-end;
    padding:14px 20px; border-top:1px solid #e5e7eb; background:#f8fafc;
}
@media (max-width:520px) {
    .profile-modal { padding:0; }
    .profile-modal-content {
        max-width:100%; width:100%; height:100%; max-height:100%;
        border-radius:0;
    }
}

/* ───────────────────────── Site footer (privacy link) ───────────────────────── */
/* ───────────────────────── Consent-modal (GDPR samtykke) ───────────────────────── */
.consent-modal {
    display:none; position:fixed; inset:0;
    background:rgba(15,23,42,0.55); z-index:3500;
    align-items:center; justify-content:center; padding:20px;
}
.consent-modal.active { display:flex; }
.consent-content {
    background:white; border-radius:14px;
    max-width:480px; width:100%; padding:26px 24px;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
}
.consent-content h2 { color: var(--primary); margin-top:0; }
.consent-content p { line-height: 1.5; }
.consent-content label.consent-check {
    display:flex; align-items:flex-start; gap:10px;
    padding:12px; background:#f8fafc; border-radius:8px;
    margin-top:14px; cursor:pointer; font-size:0.9rem;
}
.consent-content label.consent-check input { margin-top:2px; }
.consent-content .consent-actions {
    display:flex; gap:10px; margin-top:18px; justify-content:flex-end;
}

/* ───────────────────────── Profile actions (export + delete) ───────────────────────── */
.profile-actions {
    display:flex; flex-direction:column; gap:8px;
    margin-top:16px; padding-top:16px; border-top:1px solid #e5e7eb;
}
.profile-action-btn {
    padding:10px 14px;
    border-radius:8px;
    border:1px solid #e5e7eb;
    background:#f8fafc;
    cursor:pointer;
    font-size:0.9rem;
    text-align:left;
    color:#1f2937;
}
.profile-action-btn:hover { background:#eef2ff; border-color:#c7d2fe; }
.profile-action-btn.danger { color:var(--danger); border-color:#fecaca; background:#fef2f2; }
.profile-action-btn.danger:hover { background:#fee2e2; border-color:#fca5a5; }
.profile-action-hint {
    font-size:0.78rem; color:var(--gray); margin:0 0 0 2px;
}

/* Message author title (tråde + chats) */
.tm-author-title {
    font-size:0.72rem; font-weight:normal; color:#64748b;
    margin-left:4px;
}
.chat-msg-author {
    font-size:0.72rem; color:#64748b; margin-bottom:2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Feedback-knap i topbar + modal
   ═══════════════════════════════════════════════════════════════════ */
.site-nav-feedback {
    background:linear-gradient(135deg, #f59e0b, #ef4444);
    color:white;
    border:none;
    padding:6px 14px 6px 12px;
    border-radius:999px;
    font-size:0.85rem;
    font-weight:600;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:transform 0.15s, box-shadow 0.15s;
    box-shadow:0 2px 6px rgba(239,68,68,0.25);
    animation:fbWiggle 10s ease-in-out infinite;
    white-space:nowrap;
    margin-right:4px;
}
.site-nav-feedback:hover {
    transform:scale(1.07);
    box-shadow:0 4px 12px rgba(239,68,68,0.42);
    animation:none;
}
.site-nav-feedback:active { transform:scale(0.97); }
.site-nav-feedback .fb-icon { font-size:1rem; }

@keyframes fbWiggle {
    0%, 92%, 100% { transform:rotate(0) scale(1); }
    93% { transform:rotate(-6deg) scale(1.04); }
    94% { transform:rotate(6deg) scale(1.04); }
    95% { transform:rotate(-4deg) scale(1.04); }
    96% { transform:rotate(4deg) scale(1.04); }
    97% { transform:rotate(0) scale(1.04); }
}

/* Mobil: bevar knappen kompakt i drawer */
@media (max-width: 768px) {
    .site-nav-feedback {
        width:100%;
        justify-content:center;
        padding:10px 14px;
        font-size:0.95rem;
    }
}

/* Feedback-modal */
.feedback-content {
    max-width:580px;
    width:92vw;
    max-height:92vh;
    overflow-y:auto;
    padding:24px 24px 20px;
    position:relative;
    box-sizing:border-box;
}
.feedback-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
}
.feedback-header h2 {
    margin:0;
    color:var(--primary);
    font-size:1.3rem;
}
.feedback-close-btn {
    background:none; border:none;
    font-size:1.2rem; cursor:pointer;
    color:#64748b;
    padding:6px 10px;
    border-radius:6px;
    line-height:1;
}
.feedback-close-btn:hover { background:#f1f5f9; color:#0f172a; }
.feedback-intro {
    color:#555;
    font-size:0.9rem;
    margin:0 0 18px;
    line-height:1.45;
}
.feedback-type-row {
    display:flex;
    gap:10px;
    margin-bottom:18px;
}
.feedback-type-option {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 14px;
    border:2px solid #e5e7eb;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.15s;
    font-weight:600;
    font-size:0.95rem;
    color:#475569;
    user-select:none;
}
.feedback-type-option input {
    margin:0;
    accent-color:var(--primary);
}
.feedback-type-option:hover { border-color:#c7d2fe; background:#f8fafc; }
.feedback-type-option:has(input:checked) {
    border-color:var(--primary);
    background:#eef2ff;
    color:var(--primary);
}
.feedback-label {
    display:block;
    font-weight:600;
    font-size:0.88rem;
    margin:14px 0 6px;
    color:#334155;
}
.feedback-optional {
    font-weight:400;
    color:#94a3b8;
    font-size:0.8rem;
}
.feedback-input, .feedback-textarea {
    width:100%;
    padding:10px 12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font-family:inherit;
    font-size:0.95rem;
    box-sizing:border-box;
    color:#0f172a;
    background:white;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.feedback-input:focus, .feedback-textarea:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,0.12);
}
.feedback-textarea {
    resize:vertical;
    min-height:120px;
    line-height:1.45;
}
.feedback-dropzone {
    border:2px dashed #c7d2fe;
    border-radius:10px;
    padding:18px;
    text-align:center;
    background:#f8fafc;
    color:#64748b;
    font-size:0.9rem;
    transition:all 0.15s;
    margin-top:2px;
}
.feedback-dropzone p { margin:0; }
.feedback-dropzone.drag {
    border-color:var(--primary);
    background:#eef2ff;
    color:var(--primary);
}
.feedback-file-link {
    color:var(--primary);
    text-decoration:underline;
    cursor:pointer;
    font-weight:600;
}
.feedback-thumbs {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
}
.feedback-thumb {
    position:relative;
    width:90px; height:90px;
    border-radius:8px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    background:#f8fafc;
}
.feedback-thumb img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}
.feedback-thumb button {
    position:absolute;
    top:4px; right:4px;
    background:rgba(0,0,0,0.65);
    color:white;
    border:none;
    border-radius:50%;
    width:22px; height:22px;
    cursor:pointer;
    font-size:0.75rem;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}
.feedback-thumb button:hover { background:rgba(0,0,0,0.85); }
.feedback-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:22px;
    padding-top:14px;
    border-top:1px solid #f1f5f9;
}
@media (max-width: 600px) {
    .feedback-type-option { font-size:0.88rem; padding:10px 8px; }
    .feedback-actions { flex-direction:column-reverse; }
    .feedback-actions button { width:100%; }
}

/* ─── Site footer (Amathyx-branding) ─────────────────────────────────── */
.site-footer {
    margin: 40px auto 24px;
    padding: 0 16px;
    /* Dæmpet mørk tekst — footeren står direkte på den lyse side-baggrund. */
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
    background: transparent;
    border: none;
}
.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 8px;
    line-height: 1.6;
}
.site-footer-brand strong,
.site-footer-product strong { color: #334155; font-weight: 700; }
.site-footer-sep { opacity: 0.6; }
.site-footer-link {
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: rgba(100,116,139,0.4);
    text-underline-offset: 2px;
}
.site-footer-link:hover { color: var(--primary); text-decoration-color: var(--primary); }

@media (max-width: 600px) {
    .site-footer { font-size: 0.72rem; margin-top: 28px; }
    .site-footer-sep { display: none; }
    .site-footer-inner { flex-direction: column; gap: 2px; }
}

/* ═══ PROCEDURER & KONTAKTER (pk-*) — deles af procedurer.html og vicevaert-procedurer.html ═══ */
        header { margin-top: 0; }

        .pk-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .pk-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            padding: 22px 24px;
        }
        .pk-card.wide { grid-column: 1 / -1; }

        .pk-card h2 {
            margin: 0 0 14px;
            font-size: 1.1rem;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .pk-kontakter {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }
        .pk-kontakter th, .pk-kontakter td {
            padding: 9px 10px;
            text-align: left;
            border-bottom: 1px solid #f1f5f9;
        }
        .pk-kontakter th {
            background: var(--light);
            font-weight: 600;
            color: var(--gray);
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .pk-kontakter tr:last-child td { border-bottom: none; }
        .pk-kontakter td.tlf a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
            white-space: nowrap;
        }
        .pk-kontakter td.tlf a:hover { text-decoration: underline; }

        .pk-procedure ol {
            padding-left: 22px;
            margin: 0 0 12px;
            line-height: 1.7;
        }
        .pk-procedure ol li { margin-bottom: 4px; }
        .pk-procedure h3 {
            margin: 14px 0 8px;
            font-size: 0.95rem;
            color: var(--dark);
        }
        .pk-procedure .note {
            font-size: 0.85rem;
            color: var(--gray);
            background: #f8fafc;
            padding: 10px 14px;
            border-left: 3px solid var(--primary);
            border-radius: 6px;
            margin-top: 10px;
        }

        .pk-info-list { list-style: none; padding: 0; margin: 0; }
        .pk-info-list li {
            padding: 8px 0;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .pk-info-list li:last-child { border-bottom: none; }
        .pk-info-list .k {
            color: var(--gray);
            font-size: 0.85rem;
            font-weight: 600;
        }
        .pk-info-list .v {
            color: var(--dark);
            font-weight: 600;
            font-family: 'Courier New', monospace;
        }

        /* Port register card */
        .pk-port-card {
            background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
            border: 2px solid #bfdbfe;
        }
        .pk-port-card h2 { color: #1e40af; }
        .pk-port-card p {
            font-size: 0.9rem;
            color: #475569;
            margin: 0 0 14px;
            line-height: 1.5;
        }
        .pk-stats {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            padding: 12px 16px;
            background: white;
            border-radius: 10px;
            border: 1px solid #dbeafe;
            margin-bottom: 14px;
        }
        .pk-stats .stat {
            font-size: 0.85rem;
            color: var(--gray);
        }
        .pk-stats .stat strong {
            color: #1e40af;
            font-size: 1.3rem;
            font-weight: 700;
            margin-right: 4px;
        }
        .pk-port-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .pk-port-actions button { padding: 10px 16px; font-size: 0.9rem; }

        /* Register modal list */
        .pk-register-list {
            max-height: 55vh;
            overflow-y: auto;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
        }
        .pk-register-list table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
        .pk-register-list th {
            background: var(--light);
            padding: 10px 12px;
            text-align: left;
            font-size: 0.78rem;
            text-transform: uppercase;
            color: var(--gray);
            position: sticky; top: 0;
        }
        .pk-register-list td {
            padding: 8px 12px;
            border-bottom: 1px solid #f1f5f9;
        }
        .pk-register-list .slot-chip {
            display: inline-block;
            background: #dbeafe;
            color: #1e40af;
            padding: 3px 8px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-weight: 700;
            font-size: 0.82rem;
        }
        .pk-register-list .phone-cell { font-family: 'Courier New', monospace; }
        .pk-register-list .row-actions { text-align: right; white-space: nowrap; }
        .pk-register-list .row-actions button {
            padding: 4px 10px;
            font-size: 0.78rem;
        }

        /* Form fields */
        .pk-form-row { margin-bottom: 14px; }
        .pk-form-row label {
            display: block;
            font-weight: 600;
            font-size: 0.88rem;
            margin-bottom: 4px;
            color: var(--dark);
        }
        .pk-form-row input, .pk-form-row select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 0.95rem;
            box-sizing: border-box;
        }
        .pk-form-row .hint {
            font-size: 0.78rem;
            color: var(--gray);
            margin-top: 4px;
        }

        .pk-tel-input {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .pk-tel-input .prefix {
            padding: 10px 12px;
            background: var(--light);
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-weight: 600;
            color: var(--gray);
        }
        .pk-tel-input input {
            flex: 1;
            font-family: 'Courier New', monospace;
            font-size: 1.05rem;
            letter-spacing: 0.04em;
        }

        .pk-preview {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px 14px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            margin-top: 6px;
            word-break: break-all;
        }
        .pk-preview.primary {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #1e40af;
            font-weight: 600;
        }

        /* Search in afmeld */
        .pk-search-results {
            margin-top: 8px;
            max-height: 240px;
            overflow-y: auto;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: white;
        }
        .pk-search-result {
            padding: 10px 14px;
            border-bottom: 1px solid #f1f5f9;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }
        .pk-search-result:last-child { border-bottom: none; }
        .pk-search-result:hover { background: #eff6ff; }
        .pk-search-result.selected { background: #dbeafe; }
        .pk-search-result .name { font-weight: 600; }
        .pk-search-result .meta { font-size: 0.82rem; color: var(--gray); }

        /* Import wizard */
        .pk-wizard-progress {
            padding: 12px 16px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 10px;
            margin-bottom: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .pk-wizard-progress .count { font-weight: 700; color: #1e40af; font-size: 1rem; }
        .pk-wizard-progress .bar {
            flex: 1;
            min-width: 160px;
            height: 8px;
            background: white;
            border-radius: 4px;
            overflow: hidden;
        }
        .pk-wizard-progress .bar > div {
            height: 100%;
            background: var(--primary);
            transition: width 0.3s ease;
        }

        .pk-wizard-entry {
            padding: 16px;
            background: #f8fafc;
            border-radius: 10px;
            margin-bottom: 12px;
        }
        .pk-wizard-entry .name { font-weight: 700; font-size: 1.05rem; }
        .pk-wizard-entry .meta { color: var(--gray); font-size: 0.88rem; margin-top: 2px; }
        .pk-wizard-entry .slot { margin-top: 8px; }

        .pk-countdown {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--gray);
            font-size: 0.88rem;
        }
        .pk-countdown.ready { color: #059669; font-weight: 600; }

        .pk-empty {
            padding: 30px 16px;
            text-align: center;
            color: var(--gray);
            font-size: 0.9rem;
        }

        @media (max-width: 640px) {
            .pk-grid { grid-template-columns: 1fr; }
            .pk-port-actions button { flex: 1; }
        }
        @media (max-width: 700px) {
            /* Drift kontakter + Port stables på mobil */
            .pk-top-grid { grid-template-columns: 1fr !important; }
        }

        /* Kontakt-kort header med actions */
        .pk-card-head {
            display:flex; justify-content:space-between; align-items:center;
            gap:10px; flex-wrap:wrap; margin-bottom:14px;
        }
        .pk-card-head h2 { margin:0; }
        .pk-card-actions { display:flex; gap:8px; flex-wrap:wrap; }
        .pk-card-actions button {
            padding:6px 12px; font-size:0.82rem; border-radius:7px;
        }
        .pk-kontakter td.actions { white-space:nowrap; text-align:right; }
        .pk-kontakter td.actions button {
            padding:4px 9px; font-size:0.78rem; margin-left:4px; border-radius:6px;
        }
        .pk-kontakter .empty-state {
            text-align:center; color:var(--gray); font-style:italic; padding:20px;
        }

        /* ── Maximize-knap på alle kort ── */
        .pk-maximize-btn {
            background: none; border: 1px solid #e2e8f0; border-radius: 6px;
            padding: 3px 7px; font-size: 0.8rem; cursor: pointer;
            color: #94a3b8; line-height: 1; transition: all 0.12s;
            flex-shrink: 0;
        }
        .pk-maximize-btn:hover { border-color: var(--primary); color: var(--primary); background: #eef4ff; }

        /* Backdrop ved maximized kort */
        .pk-backdrop {
            position: fixed; inset: 0;
            background: rgba(15,23,42,0.55);
            z-index: 498; cursor: pointer;
            animation: pkFadeIn 0.15s ease;
        }
        @keyframes pkFadeIn { from { opacity:0; } to { opacity:1; } }

        /* Maximized kort — floats under nav-bjælken (64px) */
        .pk-card.pk-maximized {
            position: fixed !important;
            top: 72px; left: 3vw;
            width: 94vw; height: calc(100vh - 84px);
            z-index: 499;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;
            animation: pkSlideIn 0.2s ease;
        }
        @keyframes pkSlideIn { from { transform: scale(0.96); opacity:0.7; } to { transform:scale(1); opacity:1; } }

        /* Drift kontakter — kompakt tile med fast højde */
        .pk-kontakter-compact {
            max-height: 220px;
            overflow-y: auto;
        }
        .pk-card.pk-maximized .pk-kontakter-compact { max-height: none; overflow-y: visible; }
        .pk-card.pk-maximized .pk-proc-card { height: auto; }
        .pk-card.pk-maximized .pk-proc-body { max-height: calc(92vh - 160px); }

        /* Drift kontakter header med knapper */
        .pk-card-head {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 12px; gap: 8px; flex-wrap: wrap;
        }
        .pk-card-head h2 { margin: 0; }
        .pk-card-actions { display: flex; gap: 6px; align-items: center; }

        /* Procedure card edit UI — fast højde, body scroller ved lang indhold */
        .pk-proc-card {
            position:relative;
            height:460px;
            display:flex;
            flex-direction:column;
        }
        .pk-proc-card h2 { flex:0 0 auto; }
        .pk-proc-card .pk-proc-body {
            flex:1 1 auto;
            overflow-y:auto;
            min-height:0;
            padding-right:6px;
        }
        .pk-proc-card .pk-proc-body::-webkit-scrollbar { width:8px; }
        .pk-proc-card .pk-proc-body::-webkit-scrollbar-thumb {
            background:#cbd5e1; border-radius:4px;
        }
        .pk-proc-card .pk-proc-body::-webkit-scrollbar-thumb:hover { background:#94a3b8; }
        .pk-proc-card .pk-proc-actions {
            position:absolute; top:16px; right:16px;
            display:flex; gap:6px;
            z-index:1;
        }
        .pk-proc-card .pk-proc-actions button {
            padding:4px 9px; font-size:0.78rem; border-radius:6px;
        }
        .pk-proc-body h3 {
            margin:14px 0 8px; font-size:0.95rem; color:var(--dark);
        }
        .pk-proc-body h3:first-child { margin-top:0; }
        .pk-proc-body ol, .pk-proc-body ul {
            padding-left:22px; margin:0 0 12px; line-height:1.7;
        }
        .pk-proc-body li { margin-bottom:4px; }
        .pk-proc-body p { margin:0 0 10px; line-height:1.55; }
        .pk-proc-body .note {
            font-size:0.85rem; color:var(--gray);
            background:#f8fafc; padding:10px 14px;
            border-left:3px solid var(--primary); border-radius:6px;
            margin:10px 0;
        }

        .pk-proc-body code {
            font-family:'Courier New', monospace;
            background:#f1f5f9; color:#1e293b;
            padding:1px 6px; border-radius:4px; font-size:0.86em;
        }

        /* "Tilføj procedure" card */
        .pk-add-card {
            background:#f8fafc;
            border:2px dashed #cbd5e1;
            border-radius:16px;
            padding:28px 24px;
            text-align:center;
            cursor:pointer;
            transition:background 0.15s, border-color 0.15s;
            color:var(--gray);
            font-size:1rem;
            font-weight:600;
            height:460px;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .pk-add-card:hover {
            background:#eff6ff;
            border-color:var(--primary);
            color:var(--primary);
        }

        /* Mobil: tiles fylder fuld bredde og bliver lidt lavere */
        @media (max-width: 768px) {
            .pk-grid { grid-template-columns: 1fr; gap:14px; }
            .pk-proc-card, .pk-add-card { height: 420px; }
            .pk-card { padding: 16px; border-radius: 12px; }
            .pk-card h2 { font-size: 1rem; }
            .pk-card-head { gap:8px; }
            .pk-card-actions { width:100%; justify-content:flex-end; }
            .pk-card-actions button { font-size: 0.8rem; padding:6px 10px; }

            /* Kontakter: transformér tabel til cards på mobil — hver række bliver
               et stablet kort med tydelige labels per felt. Meget nemmere at læse
               end horizontal scroll.  */
            .pk-kontakter,
            .pk-kontakter thead,
            .pk-kontakter tbody,
            .pk-kontakter tr,
            .pk-kontakter td {
                display: block;
                width: 100%;
            }
            .pk-kontakter thead { display: none; }
            .pk-kontakter tr {
                background: #f8fafc;
                border-radius: 10px;
                padding: 12px 14px;
                margin-bottom: 10px;
                border: 1px solid #e5e7eb;
            }
            .pk-kontakter td {
                padding: 4px 0;
                border: none;
                font-size: 0.88rem;
                white-space: normal;
                position: relative;
                padding-left: 90px;
                min-height: 22px;
            }
            .pk-kontakter td::before {
                content: attr(data-label);
                position: absolute;
                left: 0; top: 4px;
                width: 82px;
                font-size: 0.72rem;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                color: #64748b;
                font-weight: 600;
            }
            .pk-kontakter td.actions {
                padding-left: 0;
                text-align: left;
                margin-top: 8px;
                border-top: 1px dashed #e2e8f0;
                padding-top: 10px;
            }
            .pk-kontakter td.actions::before { display: none; }
            .pk-kontakter td.actions button {
                padding: 7px 12px;
                font-size: 0.82rem;
                margin-left: 0;
                margin-right: 6px;
                min-height: 36px;
            }
            .pk-kontakter .empty-state { padding: 16px; }

            /* Port-kort */
            .pk-port-actions { flex-direction:column; align-items:stretch; gap:8px; }
            .pk-port-actions button { width:100%; min-height:44px; font-size:0.92rem; }
            .pk-stats {
                flex-direction:column; gap:10px; align-items:stretch;
                background:rgba(255,255,255,0.6); padding:12px; border-radius:10px;
                margin-bottom:14px;
            }
            .pk-stats .stat {
                display:flex; align-items:center; gap:8px;
                padding:6px 0; font-size:0.92rem;
            }
            .pk-stats .stat strong { font-size:1.2rem; min-width:40px; }

            /* Procedure-kort: giv plads til actions øverst så de ikke overlapper titel */
            .pk-proc-card { padding-top: 56px; }
            .pk-proc-card h2 { font-size:1rem; }
            .pk-proc-card .pk-proc-actions {
                top:10px; right:10px;
            }
            .pk-proc-card .pk-proc-actions button {
                min-width:38px; min-height:38px;
                padding:6px 10px;
            }
        }
        @media (max-width: 480px) {
            .pk-proc-card, .pk-add-card { height: 380px; }
            .pk-card { padding: 14px; }
            .pk-proc-card { padding-top: 52px; }
            .pk-grid { gap:10px; }
        }

        textarea.pk-textarea {
            width:100%; padding:10px 12px;
            border:1px solid #e5e7eb; border-radius:8px;
            font-size:0.95rem; font-family:inherit;
            box-sizing:border-box; min-height:200px; resize:vertical;
            line-height:1.55;
        }
        .pk-body-hint {
            font-size:0.78rem; color:var(--gray);
            margin-top:4px; line-height:1.5;
        }
        .pk-body-hint code {
            background:#f1f5f9; padding:1px 5px; border-radius:4px;
            font-family:'Courier New', monospace; font-size:0.82rem;
        }

/* Delt-med-vicevært badge (bestyrelsens procedurer) + kilde-badge (vicevært-siden) */
.pk-shared-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 99px;
    padding: 2px 10px;
    margin: 6px 0 2px;
}
.pk-source-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 99px;
    padding: 2px 10px;
    margin: 6px 0 2px;
}