/* ============================================================
   You're Not Alone — det delte vokabular (knapper, kort, badges, chips,
   formularer, tabeller, modal, footer, klokke, chat-shell …).
   Loades af ALLE shells efter tokens.css + base.css, før pages.css og det
   shell-specifikke ark (public.css / app.css / panel.css). Admin-panelet
   loader IKKE denne fil (det bor stadig på site.css).
   Ingen rå hex — alt går gennem tokens, så mørk tilstand følger med.
   ============================================================ */

/* ============================================================
   1. Layout-primitiver
   ============================================================ */
.section { margin-bottom:var(--sp-7); }
.section--tight { margin-bottom:var(--sp-6); }
.page-head { max-width:var(--measure); margin-bottom:var(--sp-6); }
.page-head--wide { max-width:none; }
.page-head--split { max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; }
.page-head--split > div { max-width:var(--measure); }
.page-head h1, .page-head h2 { margin-bottom:.35em; }
.page-head .lead, .lead { font-size:var(--fs-lg); color:var(--pub-ink-2); }
/* Overskriften bærer selv vægten — eyebrow'en er kun en stille label for views der endnu ikke er ryddet. */
.eyebrow { display:block; font-size:var(--fs-sm); font-weight:600; color:var(--pub-green-ink); margin-bottom:.4rem; }

.grid { display:grid; gap:var(--sp-5); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-auto { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.grid-split { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--sp-6); align-items:start; }
.grid-split.wide { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
@media (max-width:1024px) { .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .grid-2, .grid-3, .grid-4, .grid-split, .grid-split.wide { grid-template-columns:minmax(0,1fr); } }

.center { text-align:center; }
.inactive-row { opacity:.5; }
.link-name { color:inherit; text-decoration:none; }
.link-name:hover { color:inherit; text-decoration:underline; }

/* ============================================================
   2. Knapper
   ============================================================ */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    font:inherit; font-weight:600; font-size:var(--fs-base); line-height:1.1; cursor:pointer;
    border:1px solid transparent; padding:.8em 1.45em; border-radius:var(--r-pill);
    text-decoration:none; white-space:nowrap; min-height:48px;
    transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--pub-green); color:#fff; box-shadow:var(--shadow-1); }
.btn-primary:hover { background:var(--pub-green-hover); color:#fff; box-shadow:var(--shadow-2); }
.btn-soft { background:var(--pub-green-soft); color:var(--pub-green-ink); }
.btn-soft:hover { background:color-mix(in srgb, var(--pub-green-soft) 70%, var(--pub-green) 30%); color:var(--pub-green-ink); }
.btn-ghost { background:transparent; color:var(--pub-green-ink); border-color:var(--pub-line-2); }
.btn-ghost:hover { border-color:var(--pub-green); background:var(--pub-surface); color:var(--pub-green-ink); }
.btn-danger { background:var(--pub-danger-soft); color:var(--pub-danger); }
.btn-danger:hover { background:var(--pub-danger); color:#fff; }
.btn-sm { font-size:var(--fs-sm); padding:.55em 1.05em; min-height:40px; }
.btn-lg { font-size:var(--fs-lg); padding:.9em 1.7em; min-height:56px; }
.btn-block { width:100%; }
.btn-stack { flex-direction:column; gap:.15em; line-height:1.25; padding-block:.55em; white-space:normal; }
.btn-stack .btn-sub { font-weight:500; font-size:var(--fs-sm); opacity:.85; }
.btn[disabled], .btn:disabled { background:var(--pub-surface-2); color:var(--pub-muted); border-color:var(--pub-line); box-shadow:none; transform:none; }
.btn svg { width:1.15em; height:1.15em; flex:none; }

/* ============================================================
   3. Kort, badges, callouts, tomme tilstande
   ============================================================ */
.card { background:var(--pub-surface); border:1px solid var(--pub-line); border-radius:var(--r-md); padding:var(--sp-5); box-shadow:var(--shadow-1); }
.card.hover { transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.card.hover:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:var(--pub-line-2); }
.card--quiet { box-shadow:none; }
.card--soft { background:var(--pub-green-soft); border-color:transparent; box-shadow:none; }
.card--status { max-width:560px; margin-inline:auto; text-align:center; padding:var(--sp-7) var(--sp-6); }
.card--status .pub-status-code { font-size:var(--fs-display); font-weight:700; color:var(--pub-green-2); line-height:1; margin-bottom:var(--sp-3); }

.badge { display:inline-flex; align-items:center; gap:.35em; padding:.3em .7em; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:600; line-height:1.2;
    background:var(--area-andet-bg); color:var(--area-andet-fg); white-space:nowrap; }
.badge svg { width:1em; height:1em; }
.badge.area-Diagnoser { background:var(--area-diagnoser-bg); color:var(--area-diagnoser-fg); }
.badge.area-Kriminalitet { background:var(--area-kriminalitet-bg); color:var(--area-kriminalitet-fg); }
.badge.area-Misbrug { background:var(--area-misbrug-bg); color:var(--area-misbrug-fg); }
.badge.area-Overgreb { background:var(--area-overgreb-bg); color:var(--area-overgreb-fg); }
.badge-outline { background:transparent; border:1px solid var(--pub-line-2); color:var(--pub-ink-2); }
.badge-ok { background:var(--pub-green-soft); color:var(--pub-ok); }
.badge-green { background:var(--pub-green-soft); color:var(--pub-green-ink); }
/* Status-undtagelse: "afventer" må bruge den rolige amber (dokumenteret i DESIGN.md). */
.badge-warn { background:var(--pub-amber-soft); color:var(--pub-amber); }
.badge-muted { background:var(--pub-surface-2); color:var(--pub-muted); }
.badge-danger { background:var(--pub-danger-soft); color:var(--pub-danger); }
.tag-row { display:flex; flex-wrap:wrap; gap:.4rem; }

.callout { display:flex; gap:var(--sp-4); padding:var(--sp-5); border-radius:var(--r-md); border:1px solid var(--pub-line); background:var(--pub-surface); align-items:flex-start; }
.callout.teal { background:var(--pub-green-soft); border-color:transparent; }
.callout.warm { background:var(--pub-amber-soft); border-color:transparent; }
.callout .ico { flex:none; color:var(--pub-green); width:28px; height:28px; }
.callout .ico svg { width:28px; height:28px; }
.callout.warm .ico { color:var(--pub-amber); }
.callout strong { display:block; margin-bottom:.2rem; color:var(--pub-ink); }
.callout p { margin:0; }
.callout a { text-decoration:underline; }

.empty-state { text-align:center; padding:var(--sp-7) var(--sp-5); background:var(--pub-surface); border:1px dashed var(--pub-line-2); border-radius:var(--r-md); color:var(--pub-ink-2); }
.empty-state .ico { color:var(--pub-green-2); margin:0 auto var(--sp-3); width:40px; height:40px; }
.empty-state h3 { margin-bottom:.3em; }
.empty-state p { margin:0 auto var(--sp-4); max-width:44ch; }
.hint { font-size:var(--fs-xs); color:var(--pub-muted); }

/* ============================================================
   4. Filtre, chips, formularer
   ============================================================ */
.filterbar { background:var(--pub-surface); border:1px solid var(--pub-line); border-radius:var(--r-md); padding:var(--sp-5); margin-bottom:var(--sp-6); box-shadow:var(--shadow-1); }
.filter-label { font-size:var(--fs-sm); font-weight:600; color:var(--pub-ink-2); margin-bottom:.5rem; display:block; }
.filter-label-gap { margin-top:var(--sp-4); }
.chip-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { display:inline-flex; align-items:center; gap:.4em; padding:.5em 1em; min-height:40px; border-radius:var(--r-pill); border:1px solid var(--pub-line-2);
    background:var(--pub-surface); color:var(--pub-ink-2); font-weight:500; font-size:var(--fs-sm); cursor:pointer; text-decoration:none; user-select:none; font-family:inherit;
    transition:background-color .15s ease, color .15s ease, border-color .15s ease; }
.chip:hover { border-color:var(--pub-green); color:var(--pub-green-ink); text-decoration:none; }
.chip.on, .chip[aria-pressed="true"] { background:var(--pub-green); border-color:var(--pub-green); color:#fff; }
.audience-tabs .chip { flex:1 1 0; justify-content:center; }
.filter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-4); }
.filter-field { display:flex; flex-direction:column; }
.filter-select, select, input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range])), textarea {
    width:100%; padding:.7em .9em; min-height:48px; border:1px solid var(--pub-line-2); border-radius:var(--r-sm); background:var(--pub-surface); color:var(--pub-ink); font-size:var(--fs-base);
    transition:border-color .15s ease, box-shadow .15s ease; }
select, .filter-select { appearance:none; padding-right:2.4em;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6864' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right .8em center; background-size:18px; }
textarea { min-height:140px; resize:vertical; }
input:where(:not([type=checkbox]):not([type=radio])):focus, select:focus, textarea:focus { outline:none; border-color:var(--pub-green); box-shadow:0 0 0 4px var(--pub-green-soft); }
input::placeholder, textarea::placeholder { color:var(--pub-muted); opacity:1; }
input[type="file"] { min-width:0; max-width:100%; font-size:var(--fs-sm); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4) var(--sp-5); }
.field { display:flex; flex-direction:column; gap:.35rem; }
.field.full { grid-column:1 / -1; }
.field > label, label.field-label { font-weight:600; font-size:var(--fs-sm); color:var(--pub-ink); }
.field .hint { font-size:var(--fs-xs); color:var(--pub-muted); }
.check { display:flex; gap:.6rem; align-items:flex-start; font-size:var(--fs-sm); color:var(--pub-ink-2); }
.check input { width:20px; height:20px; margin-top:.15em; flex:none; }
@media (max-width:640px) { .form-grid { grid-template-columns:minmax(0,1fr); } }

/* Valgkort (radio-lignende) */
.toggle-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-3); }
.toggle-card { position:relative; display:flex; flex-direction:column; gap:.2rem; padding:var(--sp-4); border:1px solid var(--pub-line-2); border-radius:var(--r-md); background:var(--pub-surface); cursor:pointer; }
.toggle-card input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; width:100%; height:100%; min-height:0; }
.toggle-card strong { color:var(--pub-ink); }
.toggle-card small { color:var(--pub-muted); }
.toggle-card.on, .toggle-card:has(input:checked) { border-color:var(--pub-green); background:var(--pub-green-soft); box-shadow:0 0 0 1px var(--pub-green); }
.toggle-card:has(input:focus-visible) { outline:3px solid var(--pub-green); outline-offset:3px; }
.upload-zone { border:2px dashed var(--pub-line-2); border-radius:var(--r-md); padding:var(--sp-6); text-align:center; color:var(--pub-muted);
    background:var(--pub-surface); transition:border-color .15s ease, color .15s ease; cursor:pointer; }
.upload-zone:hover { border-color:var(--pub-green-2); color:var(--pub-green-ink); }

/* ============================================================
   5. Tabeller, modal
   ============================================================ */
.table-wrap { overflow-x:auto; border:1px solid var(--pub-line); border-radius:var(--r-md); background:var(--pub-surface); -webkit-overflow-scrolling:touch; }
table.data { width:100%; font-size:var(--fs-base); min-width:480px; }
table.data th, table.data td { padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--pub-line); vertical-align:top; }
table.data th { font-weight:600; color:var(--pub-ink); background:var(--pub-surface-2); font-size:var(--fs-sm); }
table.data td { font-size:var(--fs-sm); }
table.data tr:last-child td { border-bottom:0; }

.modal { position:fixed; inset:0; z-index:1100; display:none; place-items:center; padding:var(--sp-4); background:rgba(28,36,34,.55); }
.modal.open { display:grid; }
.modal-card { background:var(--pub-surface); border-radius:var(--r-lg); padding:var(--sp-6); width:min(640px, 100%); max-height:90vh; overflow:auto; box-shadow:var(--shadow-3); position:relative; animation:pop .2s ease; }
.modal-card.lg { width:min(820px, 100%); }
.modal-close { position:absolute; top:.6rem; right:.6rem; width:44px; height:44px; border:0; background:var(--pub-surface-2); border-radius:50%; font-size:1.3rem; color:var(--pub-ink); display:grid; place-items:center; }
.modal-close:hover { background:var(--pub-line); }
@keyframes pop { from { transform:scale(.96); opacity:0; } }

/* ============================================================
   6. Peer / avatar (gamle navne — Profil, Book, Kolleger, Min profil)
   ============================================================ */
.peer-card { display:flex; flex-direction:column; gap:.8rem; position:relative; }
.peer-top { display:flex; gap:.9rem; align-items:center; }
.avatar { width:56px; height:56px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--pub-green-soft); color:var(--pub-green-ink); font-weight:600; font-size:1.2rem; }
.avatar.has-photo { background-size:cover; background-position:center 20%; color:transparent; font-size:0; }
.avatar-xl { width:136px; height:136px; font-size:3rem; border:4px solid var(--pub-surface); box-shadow:var(--shadow-2); }
.peer-name { font-weight:600; font-size:var(--fs-lg); color:var(--pub-ink); }
.peer-title { color:var(--pub-muted); font-size:var(--fs-sm); }
.peer-meta { display:flex; align-items:center; gap:.4rem; color:var(--pub-ink-2); font-size:var(--fs-sm); }
.peer-meta svg { width:16px; height:16px; color:var(--pub-green-2); flex:none; }
.peer-bio { font-size:var(--fs-base); color:var(--pub-ink-2); }
.peer-foot { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.4rem; }
.peer-card .fav-toggle { position:absolute; top:.7rem; right:.7rem; z-index:1; }
.fav-toggle, .save-toggle { background:none; border:0; cursor:pointer; color:var(--pub-line-2); font-size:1.2rem; line-height:1; padding:.2rem; display:inline-grid; place-items:center;
    transition:color .15s ease, transform .15s ease; }
.fav-toggle svg, .save-toggle svg { width:20px; height:20px; }
.fav-toggle:hover, .save-toggle:hover { color:var(--pub-green-2); transform:scale(1.1); }
.fav-toggle.on, .save-toggle.on { color:var(--pub-danger); }
.fav-toggle.on svg, .save-toggle.on svg { fill:currentColor; }
.video-flag { display:inline-flex; align-items:center; gap:.35em; color:var(--pub-green-ink); font-size:var(--fs-xs); font-weight:600; }
.video-flag svg { width:16px; height:16px; }

/* Trin (Optjening, Guide) */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-5); }
.step { padding:var(--sp-5); background:var(--pub-surface); border:1px solid var(--pub-line); border-radius:var(--r-md); }
.step .num { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--pub-green-soft); color:var(--pub-green-ink); font-weight:700; margin-bottom:var(--sp-3); }

/* Stjerner: visning + input. Amber er tilladt her (DESIGN: vurderingsstjerner). */
.stars { --val:0; display:inline-block; position:relative; font-size:1rem; line-height:1; color:var(--pub-line-2); white-space:nowrap; }
.stars::before { content:"★★★★★"; }
.stars::after { content:"★★★★★"; color:var(--pub-amber); position:absolute; left:0; top:0; width:calc(var(--val) / 5 * 100%); overflow:hidden; }
.star-input { display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:.1rem; }
.star-input input { position:absolute; opacity:0; width:0; height:0; min-height:0; }
.star-input label { font-size:2rem; line-height:1; color:var(--pub-line-2); cursor:pointer; transition:color .1s ease; padding:.1em; border-radius:var(--r-sm); }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color:var(--pub-amber); }
.star-input input:focus-visible + label { outline:3px solid var(--pub-green); outline-offset:2px; }

/* Ikon-knap (topbar + klokken i app-shellet og panelet) */
.top-icons { display:flex; align-items:center; gap:.1rem; margin:0 auto; }
.icon-btn { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; min-width:var(--ic-btn); padding:.45rem .5rem;
    border-radius:var(--r-md); color:var(--pub-ink-2); text-decoration:none; border:0; background:none; font:inherit; cursor:pointer;
    transition:background-color .15s ease, color .15s ease; }
.icon-btn .ic { width:var(--ic-size); height:var(--ic-size); }
.icon-btn:hover { background:var(--pub-surface-2); color:var(--pub-ink); text-decoration:none; }
.icon-btn.active { background:var(--pub-green-soft); color:var(--pub-green-ink); }
.icon-btn .icon-label { font-size:.68rem; font-weight:500; line-height:1; white-space:nowrap; }
.icon-btn.active .nav-badge { box-shadow:0 0 0 2px var(--pub-green-soft); }


/* ============================================================
   7. Notifikationer (klokke-dropdown + listesider)
   ============================================================ */
.nav-dropdown { position:relative; }
.nav-dropdown > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.35em; }
.nav-dropdown > summary::-webkit-details-marker { display:none; }
.nav-dropdown > summary svg { transition:transform .15s ease; }
.nav-dropdown[open] > summary svg { transform:rotate(180deg); }
.nav-dropdown-menu { position:absolute; right:0; top:calc(100% + 8px); background:var(--pub-surface); border:1px solid var(--pub-line); border-radius:var(--r-md);
    box-shadow:var(--shadow-3); padding:.4rem; min-width:210px; z-index:1001; display:flex; flex-direction:column; gap:.1rem; }
.nav-dropdown-menu a { padding:.6rem .8rem; border-radius:var(--r-sm); color:var(--pub-ink); font-size:var(--fs-sm); font-weight:500; white-space:nowrap; text-decoration:none; }
.nav-dropdown-menu a:hover { background:var(--pub-green-soft); color:var(--pub-green-ink); }

.nav-badge { display:none; position:absolute; top:2px; right:2px; min-width:1.25em; height:1.25em; padding:0 .3em; border-radius:var(--r-pill);
    background:var(--pub-danger); color:#fff; font-size:var(--fs-xs); font-weight:700; line-height:1.25em; text-align:center; box-shadow:0 0 0 2px var(--pub-surface); }
.nav-badge.has-badge { display:block; }

.notif-dropdown > summary { position:relative; justify-content:center; }
/* Klokkens tekst ("Notifikationer, ulæste: N") er kun til skærmlæsere — synligt er ikon + badge. */
.notif-dropdown .icon-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.notif-dropdown[open] > summary svg { transform:none; }
.notif-menu { width:min(480px, 92vw); padding:.5rem; color:var(--pub-ink); }
.notif-menu-head { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.2rem .3rem .5rem; border-bottom:1px solid var(--pub-line); margin-bottom:.2rem; }
.notif-menu-head strong { font-size:var(--fs-base); }
.notif-menu a { white-space:normal; }
.notif-menu-item { display:flex; gap:.55rem; align-items:flex-start; font-weight:400; line-height:1.35; }
.notif-menu-item .notif-dot { margin-top:.4em; }
.notif-menu-item.unread { background:var(--pub-green-soft); }
.notif-menu-item small { display:block; color:var(--pub-muted); font-size:var(--fs-xs); margin-top:.1rem; }
.notif-menu-all { text-align:center; border-top:1px solid var(--pub-line); margin-top:.2rem; font-weight:600; color:var(--pub-green-ink); }
.notif-list { display:flex; flex-direction:column; gap:.6rem; }
.notif-item { display:flex; gap:.8rem; align-items:flex-start; }
.notif-item.unread { border-color:var(--pub-green-2); background:var(--pub-green-soft); }
.notif-item > div { flex:1; min-width:0; }
.notif-dot { flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--pub-line-2); margin-top:.5em; }
.notif-dot.on { background:var(--pub-danger); }

/* ============================================================
   8. Chat-shell (Chat/Index + Employee/Messages)
   ============================================================ */
.chat-page .page-head { margin-bottom:var(--sp-4); max-width:none; }
.chat-page .page-head h1 { font-size:var(--fs-h2); }
.chat-page .page-head .lead { font-size:var(--fs-base); }
.chat-shell { display:grid; grid-template-columns:320px minmax(0,1fr); grid-template-rows:minmax(0,1fr); border:1px solid var(--pub-line); border-radius:var(--r-md); overflow:hidden;
    background:var(--pub-surface); box-shadow:var(--shadow-1); height:calc(100vh - var(--header-h) - 200px); min-height:520px; }
.chat-rooms { border-right:1px solid var(--pub-line); padding:var(--sp-4) var(--sp-3); background:var(--pub-surface); overflow-y:auto; display:flex; flex-direction:column; gap:.15rem; min-height:0; }
.room-form { margin:0; }
.room, .conv { display:flex; gap:.7rem; align-items:center; width:100%; padding:.55rem .65rem; border:0; background:none; border-radius:var(--r-md); cursor:pointer;
    font:inherit; color:var(--pub-ink); text-align:left; text-decoration:none; transition:background-color .15s ease; }
.room:hover, .conv:hover { background:var(--pub-surface-2); color:var(--pub-ink); text-decoration:none; }
.room.on, .conv.on { background:var(--pub-green-soft); }
.room-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:var(--fs-sm); }
.peer-chip { flex:0 0 auto; font-size:var(--fs-xs); background:var(--pub-green-soft); color:var(--pub-green-ink); padding:.15em .6em; border-radius:var(--r-pill); font-weight:600; }
.chat-search { position:relative; margin:0 0 .5rem; }
.chat-search svg { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--pub-muted); pointer-events:none; width:16px; height:16px; }
.chat-search input { border-radius:var(--r-pill); padding:.5rem .9rem .5rem 2.4rem; font-size:var(--fs-sm); min-height:42px; }
.chat-sec { margin-top:.7rem; }
.chat-sec-head { font-size:var(--fs-sm); font-weight:600; color:var(--pub-muted); padding:.4rem .65rem .2rem; }
.conv-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.05rem; }
.conv-name { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-weight:600; font-size:var(--fs-sm); overflow:hidden; }
.conv-name time { color:var(--pub-muted); font-size:var(--fs-xs); font-weight:500; flex-shrink:0; }
.conv-prev { display:flex; align-items:center; gap:.5rem; color:var(--pub-muted); font-size:var(--fs-xs); }
.conv-prev > span:first-child { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv.unread .conv-prev > span:first-child { color:var(--pub-ink); font-weight:600; }
.conv-badge { flex:0 0 auto; background:var(--pub-danger); color:#fff; border-radius:var(--r-pill); font-size:var(--fs-xs); min-width:1.4em; text-align:center; padding:.1em .45em; font-weight:700; line-height:1.3; }
.chat-head-main { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.chat-presence { font-size:var(--fs-xs); color:var(--pub-muted); }
.chat-presence.online { color:var(--pub-ok); font-weight:600; }
.av { width:38px; height:38px; border-radius:50%; background:var(--pub-green-soft); color:var(--pub-green-ink); display:grid; place-items:center; font-weight:600; font-size:var(--fs-sm); flex-shrink:0; }
.av.av-sm { width:30px; height:30px; font-size:var(--fs-xs); }
.av-wrap { position:relative; flex-shrink:0; display:inline-flex; }
.av-wrap .dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:var(--pub-line-2); border:2px solid var(--pub-surface); }
.av-wrap .dot.on { background:var(--pub-ok); }
.chat-req { display:flex; align-items:center; gap:.55rem; padding:.35rem .3rem; }
.chat-req-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); font-weight:600; }
.chat-req form { margin:0; display:flex; }
.chat-pending { display:flex; align-items:center; gap:.55rem; padding:.3rem .3rem; color:var(--pub-muted); font-size:var(--fs-sm); }
.chat-addfriend { margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--pub-line); }
.chat-addfriend label { font-size:var(--fs-xs); font-weight:600; color:var(--pub-ink-2); }
.chat-noresults { color:var(--pub-muted); font-size:var(--fs-sm); padding:.5rem .65rem; }
.chat-main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.chat-head { padding:.8rem var(--sp-5); border-bottom:1px solid var(--pub-line); display:flex; align-items:center; gap:.7rem; background:var(--pub-surface); }
.chat-head strong { font-size:var(--fs-lg); }
.chat-body { flex:1; min-height:0; padding:var(--sp-5) clamp(1.3rem,4vw,3rem); display:flex; flex-direction:column; gap:.55rem; background:var(--pub-bg); overflow-y:auto; }
.chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; text-align:center; background:var(--pub-bg); padding:var(--sp-6); color:var(--pub-ink-2); }
.chat-empty-icon { width:64px; height:64px; border-radius:50%; background:var(--pub-green-soft); color:var(--pub-green); display:grid; place-items:center; }
.chat-empty-icon svg { width:30px; height:30px; }
.bubble { max-width:min(70%,620px); padding:.6em 1em; border-radius:18px; font-size:var(--fs-sm); box-shadow:var(--shadow-1); overflow-wrap:break-word; width:fit-content; }
.bubble.them { background:var(--pub-surface); border:1px solid var(--pub-line); border-bottom-left-radius:6px; align-self:flex-start; color:var(--pub-ink); }
.bubble.me { background:var(--pub-green); color:#fff; border-bottom-right-radius:6px; align-self:flex-end; }
.bubble .who { font-size:var(--fs-xs); color:var(--pub-muted); margin-bottom:.2rem; font-weight:600; }
.bubble time, .cw-bubble time { display:block; font-size:.7rem; margin-top:.2rem; text-align:right; line-height:1; }
.bubble.them time, .cw-bubble.them time { color:var(--pub-muted); }
.bubble.me time, .cw-bubble.me time { color:rgba(255,255,255,.78); }
.chat-input { padding:.8rem var(--sp-4); border-top:1px solid var(--pub-line); display:flex; gap:.6rem; background:var(--pub-surface); }
.chat-input input { flex:1; border-radius:var(--r-pill); padding-left:1.1rem; }
@media (max-width:860px) {
    .chat-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); height:calc(100vh - var(--header-h) - 140px); min-height:480px; }
    .chat-rooms { border-right:0; border-bottom:1px solid var(--pub-line); max-height:32vh; overflow-y:auto; }
}

/* ============================================================
   9. Datoblad (Mine bookinger + medarbejderens bookingrækker)
   ============================================================ */
.bk-date { flex:none; width:64px; text-align:center; border:1px solid var(--pub-line); border-radius:var(--r-sm); background:var(--pub-surface-2); padding:.45rem .2rem .5rem; }
.bk-date .dw { display:block; font-size:var(--fs-xs); color:var(--pub-muted); line-height:1.2; }
.bk-date .d, .bk-date .tm { display:block; font-weight:700; font-size:1.4rem; line-height:1.1; color:var(--pub-green-ink); font-variant-numeric:tabular-nums; }
.bk-date .m { display:block; font-size:var(--fs-xs); color:var(--pub-muted); line-height:1.2; }

/* ============================================================
   10. Opslag (feed, gemte, profil-feed) — samme grammatik som Strategies
   ============================================================ */
.note-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5); }
@media (max-width:1024px) { .note-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .note-grid { grid-template-columns:minmax(0,1fr); } }
.pub-note { display:flex; flex-direction:column; gap:.5rem; }
.pub-note__tags { align-items:center; }
.pub-note__save { margin-left:auto; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; }
.pub-note__save svg { width:20px; height:20px; }
.pub-note__save.on svg { fill:currentColor; }
.pub-note__title { font-size:var(--fs-h3); margin:.2rem 0 0; }
.pub-note__title a { color:var(--pub-ink); text-decoration:none; }
.pub-note__title a:hover { color:var(--pub-green-ink); text-decoration:underline; }
.pub-note__body { margin:0; color:var(--pub-ink-2); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.pub-note__who { margin-top:auto; padding-top:.6rem; display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-sm); color:var(--pub-muted); flex-wrap:wrap; }
.pub-note__who a { color:inherit; }
.pub-note__stats { display:inline-flex; align-items:center; gap:.3rem .35rem; }
.pub-note__stats svg { width:16px; height:16px; color:var(--pub-green-2); }
.pub-note__stats svg + span { margin-right:.5rem; }
.pub-note__actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; padding-top:.5rem; border-top:1px solid var(--pub-line); margin-top:.3rem; }
.pub-note__actions form { margin:0; display:inline-flex; }
.pub-danger { color:var(--pub-danger) !important; }
.edit-details { margin-top:var(--sp-4); border-top:1px solid var(--pub-line); padding-top:var(--sp-4); }
.edit-details > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:var(--fs-sm); color:var(--pub-green-ink); }
.edit-details > summary::-webkit-details-marker { display:none; }
.edit-details > summary svg { width:16px; height:16px; }
.edit-details[open] > summary { margin-bottom:var(--sp-4); }

/* ============================================================
   11. Footer (_Footer.cshtml — markup uændret)
   ============================================================ */
.site-footer { margin-top:var(--sp-9); background:var(--pub-surface); border-top:1px solid var(--pub-line); padding:var(--sp-8) var(--gutter) var(--sp-6); }
.site-footer > * { max-width:var(--container-wide); margin-inline:auto; }
.footer-tagline { font-size:var(--fs-lg); color:var(--pub-ink-2); max-width:var(--measure); margin-bottom:var(--sp-7); }
.footer-tagline strong { color:var(--pub-ink); }
.footer-cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-6); }
.footer-cols > div > strong { display:block; font-size:var(--fs-base); color:var(--pub-ink); margin-bottom:var(--sp-3); }
.footer-cols p { font-size:var(--fs-sm); color:var(--pub-ink-2); margin-bottom:.6rem; }
.footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem; }
.footer-links a { color:var(--pub-ink-2); text-decoration:none; font-size:var(--fs-base); }
.footer-links a:hover { color:var(--pub-green-ink); text-decoration:underline; }
.footer-base { display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--pub-line); font-size:var(--fs-sm); color:var(--pub-muted); }
.footer-base a { color:var(--pub-ink-2); text-decoration:none; }
.footer-base a:hover { color:var(--pub-green-ink); text-decoration:underline; }
@media (max-width:960px) { .footer-cols { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .footer-cols { grid-template-columns:minmax(0,1fr); } .site-footer { padding-top:var(--sp-7); } }

/* Akut hjælp (_AkutDropdown): altid synlig i begge shells, rolig, i den ene anden farve. */
.pub-akut { position:relative; }
.pub-akut > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.4em; padding:.55em .9em; border-radius:var(--r-pill);
    color:var(--pub-amber); font-weight:600; font-size:var(--fs-sm); white-space:nowrap; transition:background-color .15s ease; }
.pub-akut > summary::-webkit-details-marker { display:none; }
.pub-akut > summary:hover, .pub-akut[open] > summary { background:var(--pub-amber-soft); }
.pub-akut > summary svg { width:1.2em; height:1.2em; }
.pub-akut__label-sm { display:none; }
@media (max-width:960px) { .pub-akut__label-sm { display:inline; } }
@media (max-width:340px) { .pub-akut__label-sm { display:none; } }
.pub-akut__panel { position:absolute; right:0; top:calc(100% + 8px); width:min(360px, calc(100vw - 2rem)); background:var(--pub-surface); border:1px solid var(--pub-line);
    border-radius:var(--r-md); box-shadow:var(--shadow-3); padding:var(--sp-5); z-index:1001; }
.pub-akut__panel h2 { font-size:var(--fs-h3); margin-bottom:.4em; }
.pub-akut__panel p { font-size:var(--fs-sm); }
.pub-akut__panel .pub-akut__num { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.55rem 0; border-top:1px solid var(--pub-line); font-size:var(--fs-sm); }
.pub-akut__panel .pub-akut__num strong { font-size:var(--fs-lg); color:var(--pub-ink); }
.pub-akut__panel .pub-akut__num a { text-decoration:none; font-weight:600; }
@media (max-width:960px) {
    .pub-akut > summary .pub-akut__label { display:none; }
    .pub-akut > summary { padding:.55em .7em; }
}

/* Sporvalg (privat/erhverv) — kun døren til det andet spor vises. */
.universe-bar { display:contents; }
.universe-bar a { display:inline-flex; align-items:center; padding:.55em .8em; border-radius:var(--r-pill); color:var(--pub-muted); text-decoration:none; font-size:var(--fs-sm); font-weight:500; white-space:nowrap; }
.universe-bar a:hover { color:var(--pub-ink); background:var(--pub-surface-2); }
.universe-bar a.on { display:none; }
.notif-menu-loading { padding:.55rem .7rem; }

/* ============================================================
   12. Små hjælpere til app-/panelsider
   ============================================================ */
.narrow { max-width:640px; }
.narrow-sm { max-width:560px; }
.btn-row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.btn-row--center { justify-content:center; }
.btn-row form { margin:0; display:inline-flex; }
.status-ico { width:64px; height:64px; border-radius:50%; background:var(--pub-green-soft); color:var(--pub-ok); display:grid; place-items:center; margin:0 auto var(--sp-4); }
.status-ico svg { width:30px; height:30px; }
.status-ico--danger { background:var(--pub-danger-soft); color:var(--pub-danger); }
.text-right { text-align:right; }
.text-green { color:var(--pub-green-ink); }
.text-ok { color:var(--pub-ok); }
.text-danger { color:var(--pub-danger); }
.text-sm { font-size:var(--fs-sm); }
.text-xs { font-size:var(--fs-xs); }
.mt-4 { margin-top:var(--sp-4); }
.mt-5 { margin-top:var(--sp-5); }
.mb-4 { margin-bottom:var(--sp-4); }
.mb-5 { margin-bottom:var(--sp-5); }
.stack { display:flex; flex-direction:column; gap:var(--sp-4); }
.cluster { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.card h3:first-child, .card h2:first-child { margin-top:0; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.card-head h2, .card-head h3 { margin:0; font-size:var(--fs-h3); }
.icon-title { display:flex; align-items:center; gap:.5rem; }
.icon-title svg { width:22px; height:22px; color:var(--pub-green-2); flex:none; }
.text-h3 { font-size:var(--fs-h3); }
.notif-item { color:var(--pub-ink); text-decoration:none; padding:var(--sp-4) var(--sp-5); }
.notif-item:hover { text-decoration:none; color:var(--pub-ink); border-color:var(--pub-line-2); }
.survey-table table.data { min-width:620px; }
.survey-scale { font-size:var(--fs-xs); text-align:center; }
.survey-cell { text-align:center; }
.survey-cell input { width:20px; height:20px; }

.icon-row { display:flex; gap:.8rem; align-items:flex-start; }
.icon-row__ico { flex:none; width:40px; height:40px; border-radius:50%; background:var(--pub-green-soft); color:var(--pub-green-ink); display:grid; place-items:center; }
.icon-row__ico svg { width:22px; height:22px; }
.fact-list { margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.55rem; color:var(--pub-ink-2); }
.saved-head { margin-top:var(--sp-7); }
.form-width { max-width:760px; }
.check-row { display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:.3rem; }
.check-row .check { align-items:center; font-weight:500; cursor:pointer; color:var(--pub-ink); }
.check-row .check input { margin-top:0; }
.field--end { justify-content:flex-end; align-items:flex-start; }
.toggle-stack { display:flex; flex-direction:column; gap:var(--sp-3); }
.avatar-sm { width:40px; height:40px; font-size:1rem; }
.connection--static { cursor:default; }
.connection--static:hover { background:transparent; }
.connection--static .connection-name { flex:1; }
.connection--static form { margin:0; }
.label-opt { font-weight:400; }
.grid--tight { gap:.6rem; }
.connection-body { min-width:0; display:flex; flex-direction:column; gap:.15rem; align-items:flex-start; }
.val--cap { text-transform:capitalize; }
.stack--tight { gap:.6rem; }
.check--inline { align-items:center; cursor:pointer; color:var(--pub-ink); }
.check--inline input { margin-top:0; }
.summary-peer__body { min-width:0; }
.summary-peer .peer-name { font-size:var(--fs-base); }
.empty-state--tight { padding:var(--sp-5) var(--sp-3); }
.empty-state--tight p { font-size:var(--fs-sm); }
.grid--start { align-items:start; }
.details-link { cursor:pointer; font-weight:600; color:var(--pub-green-ink); font-size:var(--fs-sm); }
.ml-auto { margin-left:auto; }
.btn-row--end { align-items:flex-end; }
.warn-form { display:flex; gap:.5rem; align-items:flex-end; flex:1; min-width:280px; margin:0; }
.warn-form__field { flex:1; }
.avatar-lg { width:72px; height:72px; font-size:1.4rem; }
.photo-row { display:flex; gap:var(--sp-4); align-items:center; margin-bottom:var(--sp-4); }
.photo-row__field { flex:1; min-width:0; }
.review-item { padding:.7rem 0; border-bottom:1px solid var(--pub-line); }
.review-item:last-of-type { border-bottom:0; }
.review-item__body { margin-top:.3rem; }
.review-item__reply { margin-top:.3rem; padding-left:.8rem; border-left:2px solid var(--pub-line); font-size:var(--fs-sm); }
.avail-table { min-width:0; }
.avail-table td { padding:.4rem .5rem; vertical-align:middle; }
.avail-table td:first-child { padding-left:0; font-weight:500; }
.avail-table input { min-height:40px; padding:.4em .6em; }
.cw-req-btn { flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:1px solid var(--pub-line-2); background:var(--pub-surface); cursor:pointer; font-size:.9rem; line-height:1;
    display:grid; place-items:center; transition:background-color .12s ease, border-color .12s ease; padding:0; color:var(--pub-ink-2); }
.cw-req-btn.accept { color:var(--pub-green-ink); border-color:var(--pub-green-2); }
.cw-req-btn.accept:hover { background:var(--pub-green-soft); }
.cw-req-btn.decline { color:var(--pub-muted); }
.cw-req-btn.decline:hover { border-color:var(--pub-danger); color:var(--pub-danger); }