/* /Components/Layout/AppSidebar.razor.rz.scp.css */
/* ── Drawer styling ──────────────────────────────────────── */
.sidebar-light[b-3mvcrm0eug] {
    background: var(--mud-palette-background);
    border-right: 1px solid var(--mud-palette-divider);
    /* Drawer-roden (.mud-drawer) lod indhold der er bredere end 220px scrolle
       vandret. Vores overflow:hidden sad kun på .mud-drawer-content, ikke roden.
       Klip vandret overflow her. Ticket #44072. */
    overflow-x: hidden;
}

/* ── Sikrer at MudBlazor's drawer-content fylder hele højden ── */
[b-3mvcrm0eug] .mud-drawer-content {
    height: 100% !important;
    overflow: hidden !important;
}

/* ── Vores egen flex-wrapper - uafhængig af MudBlazor internals ── */
.sidebar-inner[b-3mvcrm0eug] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Logo-header: krymper aldrig ─────────────────────────────── */
.sidebar-header[b-3mvcrm0eug] {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 16px 16px 12px;
}

/* ── Nav-sektion: fylder al ledig plads, scroller ved overflow ── */
.sidebar-nav[b-3mvcrm0eug] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}

/* ── Footer: krymper aldrig, altid synlig i bunden ──────────── */
.sidebar-footer[b-3mvcrm0eug] {
    flex-shrink: 0;
    padding: 12px;
}

/* ── Superbruger badge ───────────────────────────────────── */
.superbruger-badge[b-3mvcrm0eug] {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    padding: 2px 8px;
    border-radius: 5px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    /* "Superbruger" + det brede home-logo + toggle kan ikke være på én linje i
       220px. Wrap badgen til sin egen linje under logoet (order efter toggle),
       så teksten altid vises fuldt og toggle'en bliver oppe til højre. #44072. */
    order: 1;
}

/* ── Ny aftale-knap ─────────────────────────────────────── */
.sidebar-new-aftale[b-3mvcrm0eug] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 8px;
}

[b-3mvcrm0eug] .sidebar-aftale-btn.mud-button-root {
    text-transform: none;
    border-radius: var(--radius-md);
    font-weight: 600;
}

[b-3mvcrm0eug] .sidebar-aftale-btn--secondary.mud-button-root {
    padding: 7px 19px !important;
    border-color: var(--mud-palette-divider);
    color: var(--mud-palette-text-primary);
}

[b-3mvcrm0eug] .sidebar-aftale-btn--secondary.mud-button-root:hover {
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

[b-3mvcrm0eug] .sidebar-aftale-btn--secondary.mud-button-root:hover .mud-button-label,
[b-3mvcrm0eug] .sidebar-aftale-btn--secondary.mud-button-root:hover .mud-icon-root {
    color: white;
}


/* ── MudMenu wrapper skal fylde fuld bredde ─────────────── */
[b-3mvcrm0eug] .sidebar-footer .mud-menu,
[b-3mvcrm0eug] .sidebar-footer .mud-menu > div {
    width: 100%;
    display: block;
}

/* ── User menu trigger ───────────────────────────────────── */
.user-menu-trigger[b-3mvcrm0eug] {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--mud-default-borderradius);
    width: 100%;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.user-menu-trigger:hover[b-3mvcrm0eug] {
    background-color: var(--mud-palette-action-disabled-background);
}

.user-menu-info[b-3mvcrm0eug] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.user-menu-name[b-3mvcrm0eug] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    font-size: var(--mud-typography-body1-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-org[b-3mvcrm0eug] {
    color: var(--color-text-muted);
    font-size: var(--mud-typography-caption-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-caret[b-3mvcrm0eug] {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

[b-3mvcrm0eug] .sidebar-nav .mud-tooltip-root {
    display: block !important;
}

.sidebar-new-aftale-mini[b-3mvcrm0eug] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 8px 8px;
}

[b-3mvcrm0eug] .sidebar-mini-action-btn.mud-button-root {
    border-radius: var(--radius-md) !important;
    width: 40px !important;
    height: 40px !important;
}

[b-3mvcrm0eug] .sidebar-mini-action-btn--secondary.mud-button-root {
    border-color: var(--mud-palette-divider) !important;
    color: var(--mud-palette-text-primary) !important;
}

[b-3mvcrm0eug] .sidebar-mini-action-btn--secondary.mud-button-root:hover {
    background-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    color: white !important;
}


.mini-toggle-btn[b-3mvcrm0eug] {
    all: unset;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
}

.mini-toggle-btn:hover[b-3mvcrm0eug] {
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
}

.sidebar-mini-toggle-header[b-3mvcrm0eug] {
    margin-left: auto;
}

@media (max-width: 959px) {
    .sidebar-mini-toggle-header[b-3mvcrm0eug] {
        display: none !important;
    }
}

/* ── Leads-badge: antal leads i "Modtaget" ── */
.nav-leads-row[b-3mvcrm0eug] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-leads-badge[b-3mvcrm0eug] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.user-menu-avatar-img[b-3mvcrm0eug] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* /Components/Layout/AppTopbar.razor.rz.scp.css */
/* ── Spacer wrapper ──────────────────────────────── */
.topbar-spacer[b-quy0jt4h1r] {
    flex: 1 1 auto;
}


/* ── Search container ── */
.search-container[b-quy0jt4h1r] {
    flex: 0 0 auto;
    width: 360px;
    max-width: 100%;
}

/* ── Trigger (opens the overlay) ── */
.topbar-search-trigger[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.topbar-search-trigger:hover[b-quy0jt4h1r] {
    border-color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-action-disabled-background);
}

.topbar-search-trigger-icon[b-quy0jt4h1r] {
    font-size: 16px;
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

.topbar-search-trigger-text[b-quy0jt4h1r] {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-kbd-hint[b-quy0jt4h1r] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-action-disabled-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.6;
    user-select: none;
}

/* ══════════════════════════════════════════════════ */
/* ══  GLOBAL SEARCH OVERLAY (command palette)     ══ */
/* ══════════════════════════════════════════════════ */
.gsearch-overlay[b-quy0jt4h1r] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
}

.gsearch-backdrop[b-quy0jt4h1r] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(2px);
    animation: gsearch-backdrop-in-b-quy0jt4h1r 160ms ease;
}

@keyframes gsearch-backdrop-in-b-quy0jt4h1r {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gsearch-panel[b-quy0jt4h1r] {
    position: relative;
    z-index: 1;
    width: min(820px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-xl, 16px);
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.28), 0 8px 24px -8px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    animation: gsearch-panel-in-b-quy0jt4h1r 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gsearch-panel-in-b-quy0jt4h1r {
    from { opacity: 0; transform: translateY(-8px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.gsearch-input-row[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.gsearch-input-icon[b-quy0jt4h1r] {
    font-size: 20px;
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

.gsearch-input[b-quy0jt4h1r] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

.gsearch-input[b-quy0jt4h1r]::placeholder {
    color: var(--mud-palette-text-disabled);
}

.gsearch-clear[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-disabled);
    cursor: pointer;
    font-size: 16px;
    padding: 2px;
    border-radius: 4px;
    flex-shrink: 0;
}

.gsearch-clear:hover[b-quy0jt4h1r] {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-disabled-background);
}

.gsearch-esc-hint[b-quy0jt4h1r] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-action-disabled-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.6;
    user-select: none;
    text-transform: uppercase;
}

.gsearch-results[b-quy0jt4h1r] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Sektion ── */
.search-section[b-quy0jt4h1r] {
    padding: 6px 0;
}

.search-section + .search-section[b-quy0jt4h1r] {
    border-top: 1px solid var(--mud-palette-divider-light);
}

.search-section-header[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.search-section-header .ph[b-quy0jt4h1r] {
    font-size: 13px;
}

.search-section-count[b-quy0jt4h1r] {
    margin-left: auto;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    padding: 1px 8px;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Resultat-række ── */
.search-result-item[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-radius: 0;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    font-family: inherit;
}

.search-result-item:hover[b-quy0jt4h1r] {
    background: var(--mud-palette-action-disabled-background);
}

.search-result-item:focus-visible[b-quy0jt4h1r] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.search-result-item:hover .search-result-arrow[b-quy0jt4h1r] {
    opacity: 1;
    transform: translateX(2px);
}

/* ── Ikon ── */
.search-result-icon[b-quy0jt4h1r] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.search-result-icon--person[b-quy0jt4h1r] {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info-darken);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.search-result-icon--sag[b-quy0jt4h1r] {
    background: transparent;
    color: var(--mud-palette-primary);
    font-size: 20px;
}

/* ── To-kolonne resultater (Sager venstre · Kunder højre) ── */
.gsearch-columns[b-quy0jt4h1r] {
    display: flex;
    align-items: flex-start;
}

.gsearch-col[b-quy0jt4h1r] {
    flex: 1;
    min-width: 0;
}

.gsearch-col + .gsearch-col[b-quy0jt4h1r] {
    border-left: 1px solid var(--mud-palette-divider-light);
}

@media (max-width: 640px) {
    .gsearch-columns[b-quy0jt4h1r] { flex-direction: column; }
    .gsearch-col + .gsearch-col[b-quy0jt4h1r] {
        border-left: none;
        border-top: 1px solid var(--mud-palette-divider-light);
    }
}

/* ── Sags-thumbnail i søgeresultat (billede ellers hus-placeholder) ── */
.search-result-thumb[b-quy0jt4h1r] {
    width: 46px;
    height: 36px;
    border-radius: var(--radius-sm, 6px);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--mud-palette-action-disabled-background);
}

.search-result-thumb--placeholder[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
    font-size: 18px;
}

/* ── Status-dot i sags-meta-linjen ── */
.search-status-dot[b-quy0jt4h1r] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

/* Same status→farve som Sager-listen, dialogen og søgeprofiler. */
.search-status-dot--vurdering[b-quy0jt4h1r] { background: var(--mud-palette-warning); }
.search-status-dot--aktiv[b-quy0jt4h1r] { background: var(--mud-palette-success); }
.search-status-dot--tilsalg[b-quy0jt4h1r] { background: var(--mud-palette-primary); }
.search-status-dot--undersalg[b-quy0jt4h1r] { background: var(--mud-palette-info); }
.search-status-dot--endeligsalg[b-quy0jt4h1r] { background: var(--mud-palette-secondary); }
.search-status-dot--solgt[b-quy0jt4h1r] { background: var(--mud-palette-text-disabled); }
.search-status-dot--retur[b-quy0jt4h1r],
.search-status-dot--aflyst[b-quy0jt4h1r],
.search-status-dot--tabtkommission[b-quy0jt4h1r] { background: var(--mud-palette-error); }

.search-result-icon--phone[b-quy0jt4h1r] {
    background: transparent;
    color: var(--mud-palette-success);
    font-size: 20px;
}

.search-result-icon--history[b-quy0jt4h1r] {
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    font-size: 16px;
}

/* ── Tekst ── */
.search-result-content[b-quy0jt4h1r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.search-result-title[b-quy0jt4h1r] {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Favorit-markør: fyldt amber stjerne efter navnet (kun for favoritter).
   Inline SVG med Phosphors star-fill-geometri — samme visuelle sprog som
   kundeliste/-profil, uden at loade Phosphors fill-vægt fra CDN. */
.search-result-fav[b-quy0jt4h1r] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    vertical-align: -0.15em;
    color: var(--mud-palette-warning);
    flex-shrink: 0;
}

.search-result-meta[b-quy0jt4h1r] {
    font-size: 12px;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Pil ── */
.search-result-arrow[b-quy0jt4h1r] {
    font-size: 13px;
    color: var(--mud-palette-text-disabled);
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

/* ── Kontakt-info-række ── */
.search-result-contact-row[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.search-result-contact-item[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.search-result-contact-item .ph[b-quy0jt4h1r] {
    font-size: 11px;
    flex-shrink: 0;
}

/* ── Loading-tilstand ── */
.search-loading[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.search-loading-spinner[b-quy0jt4h1r]  .mud-progress-circular {
    width: 16px !important;
    height: 16px !important;
}

/* ── Se alle resultater ── */
.search-see-all[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
    padding: 10px 16px;
    border: none;
    border-top: 1px solid var(--mud-palette-divider);
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.search-see-all:hover[b-quy0jt4h1r] {
    background: var(--mud-palette-action-disabled-background);
}

.search-see-all .ph-arrow-right[b-quy0jt4h1r] {
    margin-left: auto;
    opacity: 0.6;
}

/* ── Tom tilstand ── */
.search-empty[b-quy0jt4h1r] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.search-create-person[b-quy0jt4h1r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px;
    min-height: 36px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-background);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.search-create-person:hover[b-quy0jt4h1r] {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-text-disabled);
}

.search-empty-icon[b-quy0jt4h1r] {
    font-size: 18px;
    color: var(--mud-palette-text-disabled);
}

/* ── Page header (title + description) ───────────── */
.topbar-page-header[b-quy0jt4h1r] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

/* Vægten kommer fra den delte .fw-semibold i utilities.css — ikke hardcodet her. */
.topbar-page-title[b-quy0jt4h1r] {
    font-size: var(--mud-typography-h6-size);
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
}

.topbar-page-desc-row[b-quy0jt4h1r] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-page-description[b-quy0jt4h1r] {
    font-size: var(--mud-typography-body1-size);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
}

.topbar-external-link[b-quy0jt4h1r] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.topbar-external-link:hover[b-quy0jt4h1r] {
    color: var(--mud-palette-primary);
}

.topbar-external-link:hover .topbar-external-link-text[b-quy0jt4h1r] {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .topbar-page-header[b-quy0jt4h1r] {
        display: none;
    }
}

/* ── Hamburger (mobil-toggle) ─────────────────────── */
.topbar-hamburger[b-quy0jt4h1r] {
    flex-shrink: 0;
}

@media (min-width: 960px) {
    .topbar-hamburger[b-quy0jt4h1r] {
        display: none;
    }
}

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 959px) {
    .topbar-spacer[b-quy0jt4h1r] {
        display: none;
    }

    .search-container[b-quy0jt4h1r] {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}

@media (max-width: 639px) {
    .search-container[b-quy0jt4h1r] {
        max-width: none;
    }

    .search-kbd-hint[b-quy0jt4h1r] {
        display: none;
    }
}

/* Phones: the search trigger is icon-only and every toolbar button is 44px high, so the page
   button (Nyt lead, Ny Henvisning, ...) and Ny aftale fit on one line next to it. The overlay it
   opens is full width there anyway. */
@media (max-width: 599px) {
    /* Otherwise the 959px rule lets the container shrink below the button. */
    .search-container[b-quy0jt4h1r] {
        flex: 0 0 auto;
        /* Pushes the whole button group to the right; the spacer div is hidden below 960px. */
        margin-left: auto;
    }

    .topbar-search-trigger[b-quy0jt4h1r] {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: var(--radius-md);
        position: relative;
    }

    /* As a standalone button the placeholder grey reads as disabled. */
    .topbar-search-trigger-icon[b-quy0jt4h1r] { color: var(--mud-palette-text-secondary); }

    /* Visually hidden, not display: none, so the button keeps its full accessible name
       (WCAG 2.5.3: the name must contain the visible desktop label). */
    .topbar-search-trigger-text[b-quy0jt4h1r] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* .topbar-primary-btn sits on a MudButton root without the scope attribute, so its phone
       rules live next to .inline-toolbar in app.css. */
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-hbqmyhfrlf],
.components-reconnect-repeated-attempt-visible[b-hbqmyhfrlf],
.components-reconnect-failed-visible[b-hbqmyhfrlf],
.components-pause-visible[b-hbqmyhfrlf],
.components-resume-failed-visible[b-hbqmyhfrlf],
.components-rejoining-animation[b-hbqmyhfrlf] {
    display: none;
}

[b-hbqmyhfrlf] #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
[b-hbqmyhfrlf] #components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
[b-hbqmyhfrlf] #components-reconnect-modal.components-reconnect-paused .components-pause-visible,
[b-hbqmyhfrlf] #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
[b-hbqmyhfrlf] #components-reconnect-modal.components-reconnect-retrying,
[b-hbqmyhfrlf] #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
[b-hbqmyhfrlf] #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
[b-hbqmyhfrlf] #components-reconnect-modal.components-reconnect-failed,
[b-hbqmyhfrlf] #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal[b-hbqmyhfrlf] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-hbqmyhfrlf 0.5s both;
}

#components-reconnect-modal[open][b-hbqmyhfrlf] {
    animation: components-reconnect-modal-slideUp-b-hbqmyhfrlf 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s,
               components-reconnect-modal-fadeInOpacity-b-hbqmyhfrlf 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-hbqmyhfrlf]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-hbqmyhfrlf 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-hbqmyhfrlf {
    0%   { transform: translateY(30px) scale(0.95); }
    100% { transform: translateY(0); }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-hbqmyhfrlf {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-hbqmyhfrlf {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.components-reconnect-container[b-hbqmyhfrlf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-hbqmyhfrlf] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-hbqmyhfrlf] {
    border: 0;
    background-color: var(--color-reconnect-btn);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

#components-reconnect-modal button:hover[b-hbqmyhfrlf]  { background-color: var(--color-reconnect-btn-hover); }
#components-reconnect-modal button:active[b-hbqmyhfrlf] { background-color: var(--color-reconnect-btn); }

.components-rejoining-animation[b-hbqmyhfrlf] {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div[b-hbqmyhfrlf] {
    position: absolute;
    border: 3px solid var(--color-reconnect-anim);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-hbqmyhfrlf 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-hbqmyhfrlf] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-hbqmyhfrlf {
    0%   { top: 40px; left: 40px; width: 0;    height: 0;    opacity: 0; }
    4.9% { top: 40px; left: 40px; width: 0;    height: 0;    opacity: 0; }
    5%   { top: 40px; left: 40px; width: 0;    height: 0;    opacity: 1; }
    100% { top: 0px;  left: 0px;  width: 80px; height: 80px; opacity: 0; }
}
/* /Components/Pages/Admin/AdminStatistikTab.razor.rz.scp.css */
/* Slow, smooth fill between progress reports instead of MudBlazor's quick jumps. */
.export-progress[b-37c7u33ctj]  .mud-progress-linear-bar {
    transition: transform 700ms ease-out;
}

/* MudSelect sizes to its text otherwise; the class lands on the child component's root. */
.report-picker[b-37c7u33ctj]  .report-year {
    min-width: 100px;
}

.report-picker[b-37c7u33ctj]  .report-month {
    min-width: 140px;
}
/* /Components/Pages/Aktiviteter/AktivitetContentCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  AKTIVITET CONTENT-CARD - Scoped styles      ══ */
/* ══  Beskrivelse/Noter-grid m. inline-edit       ══ */
/* ══  (flyttet fra AktivitetDetaljer.razor.css    ══ */
/* ══  v. dekomp.)                                 ══ */
/* ══════════════════════════════════════════════════ */

/* ── Beskrivelse / Noter content area ── */
.akt-content-grid[b-atk9xa2g5i] {
    display: flex;
    flex-direction: column;
}

.akt-content-col[b-atk9xa2g5i] {
    /* No horizontal padding: the wrapping MudPaper's pa-4 already sets the left edge
       shared with the other cards on the page. */
    padding: 16px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.akt-content-col:last-child[b-atk9xa2g5i] {
    border-bottom: none;
}

.akt-content-col-label[b-atk9xa2g5i] {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.akt-content-col-sub[b-atk9xa2g5i] {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-disabled);
    margin-bottom: 12px;
}

.akt-content-text[b-atk9xa2g5i] {
    font-size: var(--mud-typography-body1-size);
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    white-space: pre-line;
    min-height: 40px;
}

.akt-content-empty[b-atk9xa2g5i] {
    font-size: var(--mud-typography-body1-size);
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

/* ── Notes list ── */
.akt-notes-list[b-atk9xa2g5i] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
}

[b-atk9xa2g5i] .akt-note-share-btn.mud-button-root {
    padding: 2px 8px !important;
    font-size: var(--mud-typography-caption-size) !important;
    min-width: unset !important;
    height: auto !important;
    margin-top: 2px;
}

/* ── Add note area ── */
.akt-note-add[b-atk9xa2g5i] {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-divider);
}
/* /Components/Pages/Aktiviteter/AktivitetDetaljer.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  AKTIVITET DETALJER - Scoped styles          ══ */
/* ══  Kun forælder-regler; resten er fordelt til  ══ */
/* ══  AktivitetHeroCard/-ContentCard/-SidebarCard ══ */
/* ══  .razor.css ved dekomponeringen.             ══ */
/* ══════════════════════════════════════════════════ */

/* ── Inner sub-cards ── */
/* NB: Formodentlig død regel - klassen sidder på MudPaper-komponenter
   (ingen scope-attribut); den AKTIVE styling kommer fra den globale
   .mud-paper.akt-inner-card i mudblazor-overrides.css. Bruges af både
   sidebar-barnet og forælderens Customer/History-kort. Bevaret 1:1;
   flagget i docs/frontend-cleanup-plan.md. */
.akt-inner-card[b-lh1im78qqh] {
    background: var(--mud-palette-background-grey) !important;
    border-radius: var(--radius-md);
}

/* ── Side-globale normaliseringer ── */
[b-lh1im78qqh] .mud-input-slot {
    font-size: var(--mud-typography-body1-size) !important;
}

/* ── Ubrugte selektorer (0 forekomster i markup - flagget, urørt) ── */
.akt-prewrap[b-lh1im78qqh] {
    white-space: pre-line;
    font-size: var(--mud-typography-body1-size);
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
}

.akt-section-title[b-lh1im78qqh] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.akt-empty[b-lh1im78qqh] {
    padding: 20px 0 8px;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-disabled);
}

.akt-content-section[b-lh1im78qqh] {
    padding: 16px 24px;
}

/* Kunde-kortets kontakt-ikonknapper: samme dæmpede stil som quick-view-dialogens
   .aqv-inline-btn (ét mønster for ring/sms/e-mail på tværs af Aktiviteter). */
.akt-contact-actions[b-lh1im78qqh]  .akt-contact-btn {
    padding: 2px !important;
    color: var(--color-text-muted) !important;
}
.akt-contact-actions[b-lh1im78qqh]  .akt-contact-btn:hover {
    background: transparent !important;
    color: var(--color-text-heading) !important;
}
.akt-contact-actions[b-lh1im78qqh]  .akt-contact-btn .mud-icon-root { font-size: 15px !important; }
/* /Components/Pages/Aktiviteter/Aktiviteter.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  AKTIVITETER - Scoped styles                 ══ */
/* ══  List-view table utilities + full week-view  ══ */
/* ══════════════════════════════════════════════════ */




/* ── Page header row ── */
.aftaler-header[b-obghfiq7cv] {
    flex-wrap: wrap;
    gap: 8px;
}

.week-nav-right[b-obghfiq7cv] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ── Card header right group (seg-control + search) ── */
/* ── TABLE ── */
.aftaler-table-wrap[b-obghfiq7cv] { overflow-x: auto; }
.aftaler-table[b-obghfiq7cv] { min-width: 700px; width: 100%; border-collapse: collapse; }


/* Typografi/border/tekst-align arves fra .crm-table (tables.css) — her kun layout. */
.aftaler-table thead th[b-obghfiq7cv] {
    padding: 10px 24px;
}

.aftaler-table tbody tr[b-obghfiq7cv] {
    transition: background-color var(--transition-fast);
}

.aftaler-table tbody td[b-obghfiq7cv] {
    padding: 16px 24px;
}


/* ── Card header + footer ── */
/* NB: ::deep-konverteret ved dekomponeringen - klassen bruges af BÅDE
   forælderens skeleton-header og AktiviteterFilterBars header. Ankret
   på .page-content er renderingen ækvivalent. */
[b-obghfiq7cv] .aftaler-card-header {
    padding: 0 0 16px;
}

.aftaler-card-footer[b-obghfiq7cv] {
    padding: 10px 24px;
    border-top: 1px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.aftaler-card-footer .mud-pagination button[b-obghfiq7cv] {
    font-weight: 400;
    font-size: var(--mud-typography-body2-size);
}

.aftaler-card-footer .mud-pagination .mud-button-filled[b-obghfiq7cv] {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    font-weight: 500;
    box-shadow: none;
}

.aftaler-card-footer .mud-pagination .mud-button-filled:hover[b-obghfiq7cv] {
    background: var(--mud-palette-text-secondary);
    box-shadow: none;
}

/* ── "Ny aftale" knap ── */
/* NB: Formodentlig DØD - .aftaler-new-btn har 0 forekomster i markup
   (knappen er fjernet/flyttet). Bevaret 1:1; flagget i
   docs/frontend-cleanup-plan.md. */
.week-nav-right[b-obghfiq7cv]  .aftaler-new-btn.mud-button-root,
.aftaler-header-right[b-obghfiq7cv]  .aftaler-new-btn.mud-button-root {
    padding: 8px 20px;
    font-weight: 600;
    font-size: var(--mud-typography-body2-size);
    letter-spacing: 0.01em;
    text-transform: none;
}


/* ── Empty state ── */
.aftaler-empty[b-obghfiq7cv]  .mud-icon-root {
    font-size: 48px !important;
    color: var(--mud-palette-text-disabled) !important;
}

/* ── Activity type badge ── */
.activity-type-badge[b-obghfiq7cv] {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    white-space: nowrap;
    color: #ffffff;
}

.activity-type-badge--aabenthus[b-obghfiq7cv]   { background: #eda0a1; color: #2a1c1d; }
.activity-type-badge--fremvisning[b-obghfiq7cv] { background: #e51f2b; color: #ffffff; }
.activity-type-badge--vurdering[b-obghfiq7cv]   { background: #b5c5c2; color: #1d2a28; }
.activity-type-badge--aftale[b-obghfiq7cv]      { background: #a0c1cd; color: #16282f; }
.activity-type-badge--uddannelse[b-obghfiq7cv]  { background: #a0c1cd; color: #16282f; }
.activity-type-badge--outlook[b-obghfiq7cv]     { background: #05a8f4; color: #ffffff; }
.activity-type-badge--erhverv[b-obghfiq7cv]     { background: #000000; color: #ffffff; }
.activity-type-badge--diverse[b-obghfiq7cv]     { background: #f121ea; color: #ffffff; }
.activity-type-badge--ferie[b-obghfiq7cv]       { background: #e7cb92; color: #3a2a0e; }
.activity-type-badge--kr[b-obghfiq7cv]          { background: #7b7371; color: #ffffff; }
.activity-type-badge--andet[b-obghfiq7cv]       { background: var(--color-text-soft); color: #ffffff; }

.aftaler-date-cell[b-obghfiq7cv] { white-space: nowrap; }

/* List cells stay on one line and ellipsize when too long (max-widths are tunable). */
.aftaler-address-cell[b-obghfiq7cv] {
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aftaler-maegler-cell[b-obghfiq7cv] { max-width: 220px; }

.aftaler-maegler-name[b-obghfiq7cv] {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aftaler-maegler-cell .pd-activity-agent-shop[b-obghfiq7cv] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aftaler-kunde-cell[b-obghfiq7cv] {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-row--clickable[b-obghfiq7cv] { cursor: pointer; }
.lp-row--clickable:hover td[b-obghfiq7cv] { background: var(--mud-palette-action-disabled-background); }
.lp-row--locked[b-obghfiq7cv] { cursor: default; }
.lp-row--locked td[b-obghfiq7cv] { color: var(--mud-palette-text-secondary); }
.lp-row--locked:hover td[b-obghfiq7cv] { background: transparent; }

/* ── STATUS PILL ── */
.status-tag[b-obghfiq7cv] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 120ms ease;
}

.status-tag:hover[b-obghfiq7cv] { filter: brightness(0.93); }

.status-planned[b-obghfiq7cv],
.status-cancelled[b-obghfiq7cv],
.status-afholdt[b-obghfiq7cv],
.status-udeblevet[b-obghfiq7cv],
.status-unknown[b-obghfiq7cv] {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-divider);
}

/* ══════════════════════════════════════════════════ */
/* ══  LIST VIEW - RESPONSIVE                      ══ */
/* ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Tabel → stakkede kort. Kolonner: Dato, Type, Adresse, Mægler, Status, Kunde. */
    .aftaler-table[b-obghfiq7cv] { min-width: 0; }
    .aftaler-table thead[b-obghfiq7cv] { display: none; }

    .aftaler-table tbody tr[b-obghfiq7cv] {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 12px 16px;
        gap: 4px 12px;
        align-items: start;
    }

    .aftaler-table tbody td[b-obghfiq7cv] {
        padding: 0;
        border: none;
        vertical-align: unset;
    }

    /* The desktop ellipsis widths (360/220/200px) cut addresses and names inside the card; in a
       stacked card the text simply wraps. */
    .aftaler-address-cell[b-obghfiq7cv],
    .aftaler-maegler-cell[b-obghfiq7cv],
    .aftaler-kunde-cell[b-obghfiq7cv],
    .aftaler-maegler-name[b-obghfiq7cv] {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Dato - row 1. font-size her er kort-layout (tabellen er opløst til stakkede
       kort via thead{display:none}+grid), ikke tabel-typografi — .crm-table-skalaen
       gælder kun den rigtige tabel-visning. */
    .aftaler-table tbody td:nth-child(1)[b-obghfiq7cv] {
        grid-column: 1;
        grid-row: 1;
        font-size: var(--mud-typography-body2-size);
    }

    /* Type - row 2 */
    .aftaler-table tbody td:nth-child(2)[b-obghfiq7cv] { grid-column: 1; grid-row: 2; }

    /* Adresse - row 3 */
    .aftaler-table tbody td:nth-child(3)[b-obghfiq7cv] { grid-column: 1; grid-row: 3; }

    /* Mægler - row 4 */
    .aftaler-table tbody td:nth-child(4)[b-obghfiq7cv] { grid-column: 1; grid-row: 4; }

    /* Kunde - row 5 */
    .aftaler-table tbody td:nth-child(6)[b-obghfiq7cv] { grid-column: 1; grid-row: 5; }

    /* Status - højre kolonne, centreret vertikalt */
    .aftaler-table tbody td:nth-child(5)[b-obghfiq7cv] {
        grid-column: 2;
        grid-row: 1 / 6;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        align-self: stretch;
    }

    /* Hover: ét samlet highlight på hele kortet - ikke per celle */
    .lp-row--clickable:hover td[b-obghfiq7cv] {
        background: transparent;
    }

    .lp-row--clickable:hover[b-obghfiq7cv] {
        background: var(--mud-palette-action-disabled-background);
    }
}

@media (max-width: 640px) {
}

/* ══════════════════════════════════════════════════ */
/* ══  WEEK VIEW                                   ══ */
/* ══════════════════════════════════════════════════ */
.week-layout[b-obghfiq7cv] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    min-height: calc(100vh - 220px);
}

/* ── LEFT SIDEBAR ── */
.week-sidebar[b-obghfiq7cv] {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Cap height to the viewport so .emp-section can flex inside a bounded
       container. Without this, the page grows to fit every employee and the
       user scrolls the whole page instead of just the picker. The 100px offset
       accounts for the app topbar + the page padding above this column. Sticky
       keeps the sidebar visible when the right-hand calendar grid scrolls. */
    max-height: calc(100vh - 100px);
    position: sticky;
    top: 16px;
    min-height: 0;
}

/* ── EMPLOYEE SECTION ──
   The multi-business employee/calendar picker (.emp-* rules) now lives in the
   reusable BusinessCalendarSelector component
   (Components/Shared/Calendar/BusinessCalendarSelector.razor.css). */

/* ── MAIN WEEK GRID ── */
.week-main[b-obghfiq7cv] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Same bottom reference as .week-sidebar so the calendar grid aligns its
       bottom edge with the employee picker. The scroll body below flex-fills
       this bounded height instead of using a fixed max-height guess. */
    max-height: calc(100vh - 100px);
}

/* ── WEEK NAVIGATION ── */
.week-nav[b-obghfiq7cv] {
    margin-bottom: 8px;
}

.week-nav-top-row[b-obghfiq7cv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.week-nav-left[b-obghfiq7cv] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.week-nav-label[b-obghfiq7cv] {
    font-size: var(--mud-typography-body1-size);
    font-weight: 700;
    color: var(--color-text-heading);
}


.week-nav-btns[b-obghfiq7cv] { display: flex; gap: 6px; }


.week-nav-btn[b-obghfiq7cv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 16px;
    border-radius: var(--radius-md);
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.week-nav-btn--red[b-obghfiq7cv] { background: var(--color-brand); color: var(--color-bg-page); }
.week-nav-btn--red:hover[b-obghfiq7cv] { background: color-mix(in srgb, var(--color-brand) 82%, black); }

.week-nav-btn--ghost[b-obghfiq7cv] {
    background: transparent;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-divider);
}
.week-nav-btn--ghost:hover[b-obghfiq7cv] {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-text-disabled);
}

/* ── TIME-BASED WEEK GRID ──
   Delte visuelle primitiver (grid-card, header-row, col-header,
   col-dayname/-daynum, time-gutter, time-label, day-col, hour-line,
   week-event base) bor nu i wwwroot/css/week-calendar.css.
   Her bliver kun side-specifikke regler. */

.week-time-gutter-header[b-obghfiq7cv] {
    width: var(--cal-gutter-width);
    flex-shrink: 0;
    border-right: 1px solid var(--color-bg-hover);
}

/* ── MINI CALENDAR ACTIVITY DOT ── */
.cal-day-dot[b-obghfiq7cv] {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-brand);
    flex-shrink: 0;
}

.cal-day-dot--today[b-obghfiq7cv] { background: var(--color-brand); }
.cal-day-dot--empty[b-obghfiq7cv] { visibility: hidden; }

/* ── SCROLLABLE TIME BODY ── */
.week-body-scroll[b-obghfiq7cv] {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    scrollbar-width: none;
}

.week-body-scroll[b-obghfiq7cv]::-webkit-scrollbar {
    display: none;
}

.week-body[b-obghfiq7cv] {
    display: flex;
    position: relative;
}

/* Time-linjer (.week-hour-line / .week-half-hour-line) kommer fra den globale
   week-calendar.css — ét sted for farve/tydelighed. Ingen scoped kopi her. */

/* ── NOW INDICATOR ── */
.week-now-line[b-obghfiq7cv] {
    position: absolute;
    left: 56px;
    right: 0;
    height: 2px;
    background: var(--color-brand);
    z-index: 5;
}

.week-now-line[b-obghfiq7cv]::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand);
}

.week-now-line--no-gutter[b-obghfiq7cv] {
    left: 0;
}

.week-now-line--no-gutter[b-obghfiq7cv]::before {
    display: none;
}

/* Desktop: the time gutter is now rendered in every panel (so each stacked panel on mobile
   has its own time axis). Side-by-side panels still share the single leftmost axis, so hide
   the repeated gutters and re-align the now-line in all but the first panel. */
@media (min-width: 1101px) {
    .week-panels-container .week-panel:not(:first-child) .week-time-gutter[b-obghfiq7cv],
    .week-panels-container .week-panel:not(:first-child) .week-time-gutter-header[b-obghfiq7cv] {
        display: none;
    }
    .week-panels-container .week-panel:not(:first-child) .week-now-line[b-obghfiq7cv] {
        left: 0;
    }
    .week-panels-container .week-panel:not(:first-child) .week-now-line[b-obghfiq7cv]::before {
        display: none;
    }
}

/* ── EVENT BLOCKS ── */
.week-event:hover[b-obghfiq7cv] { box-shadow: var(--shadow-overlay); z-index: 10; }
.week-event:active[b-obghfiq7cv] { cursor: grabbing; }
.week-event--locked[b-obghfiq7cv] {
    cursor: default;
    opacity: 0.72;
}
.week-event--locked:active[b-obghfiq7cv] { cursor: default; }

.week-event--aabenthus[b-obghfiq7cv]   { background: color-mix(in srgb, #eda0a1 22%, white); }
.week-event--fremvisning[b-obghfiq7cv] { background: color-mix(in srgb, #e51f2b 14%, white); }
.week-event--vurdering[b-obghfiq7cv]   { background: color-mix(in srgb, #b5c5c2 35%, white); }
.week-event--aftale[b-obghfiq7cv]      { background: color-mix(in srgb, #a0c1cd 28%, white); }
.week-event--uddannelse[b-obghfiq7cv]  { background: color-mix(in srgb, #a0c1cd 28%, white); }
.week-event--outlook[b-obghfiq7cv]     { background: color-mix(in srgb, #05a8f4 14%, white); }
.week-event--erhverv[b-obghfiq7cv]     { background: color-mix(in srgb, #000000 8%, white); }
.week-event--diverse[b-obghfiq7cv]     { background: color-mix(in srgb, #f121ea 12%, white); }
.week-event--ferie[b-obghfiq7cv]       { background: color-mix(in srgb, #e7cb92 35%, white); }
.week-event--kr[b-obghfiq7cv]          { background: color-mix(in srgb, #7b7371 18%, white); }
.week-event--andet[b-obghfiq7cv]       { background: var(--color-bg-subtle); }

.week-event-title[b-obghfiq7cv] {
    display: block;
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--color-text-heading);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-event-time[b-obghfiq7cv] {
    display: block;
    font-size: var(--mud-typography-overline-size);
    color: var(--color-text-soft);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-event-location[b-obghfiq7cv] {
    display: block;
    font-size: var(--mud-typography-overline-size);
    color: var(--color-text-soft);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-event-agent[b-obghfiq7cv] {
    display: block;
    font-size: var(--mud-typography-overline-size);
    color: var(--color-text-muted);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── MULTI-PANEL LAYOUT ── */
/* The line between two agents' calendars is the gap, with this background showing through it:
   the panels are opaque, so a wider gap reads as a thicker line, not a hole. It must beat the
   day-column lines, which are color-mix(divider 70%, text-disabled) — at plain `divider` it was
   1.26:1 against a white panel where a day line is 1.53:1, i.e. the boundary that matters most
   was the faintest in the grid. 40% moves it the same way the day lines go, only further: 1.88:1
   light, 1.91:1 dark, ~1.22x a day line in both because the mix resolves per theme.
   Mobile overrides both values below (carousel, one agent at a time, no divider wanted). */
.week-panels-container[b-obghfiq7cv] {
    display: flex;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    background: color-mix(in srgb, var(--mud-palette-divider) 40%, var(--mud-palette-text-disabled));
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.week-empty-panel[b-obghfiq7cv] {
    flex: 1;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--color-bg-page);
    color: var(--color-text-muted);
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
}

.week-panel[b-obghfiq7cv] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-page);
}

/* Første panel bærer 56px tids-gutteren: kompensér bredden, så dets
   dag-kolonner bliver lige så brede som de øvrige panelers. */
.week-panel:first-child[b-obghfiq7cv] {
    flex: 1 1 56px;
}

.week-panels-container .week-grid-card[b-obghfiq7cv] {
    border: none;
    border-radius: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Panel Header (agent name bar) ── */
.week-panel--dragging[b-obghfiq7cv] { opacity: 0.4; }
.week-panel--drag-over[b-obghfiq7cv] { box-shadow: inset 3px 0 0 var(--color-brand); }

.week-panel-header[b-obghfiq7cv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 30px;
    flex-shrink: 0;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-card);
    cursor: grab;
}
.week-panel-header:active[b-obghfiq7cv] { cursor: grabbing; }

.week-panel-agent-dot[b-obghfiq7cv] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.week-panel-agent-name[b-obghfiq7cv] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 700;
    color: var(--color-text-heading);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Mobile collapse toggles (month + employee list): hidden on desktop, shown when stacked ── */
.week-emp-toggle[b-obghfiq7cv],
.week-month-toggle[b-obghfiq7cv] {
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-btn);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.week-emp-toggle:hover[b-obghfiq7cv],
.week-month-toggle:hover[b-obghfiq7cv] { border-color: var(--color-text-muted); }

.week-emp-toggle-label[b-obghfiq7cv],
.week-month-toggle-label[b-obghfiq7cv] { flex: 1; text-align: left; }

.week-month-toggle-label[b-obghfiq7cv] { text-transform: capitalize; }

.week-emp-toggle-count[b-obghfiq7cv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color-brand-bg);
    color: var(--color-brand);
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
}

.week-emp-toggle-caret[b-obghfiq7cv],
.week-month-toggle-caret[b-obghfiq7cv] {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

/* ── Swipe-carousel position indicator (mobile only; hidden on desktop) ── */
.week-swipe-indicator[b-obghfiq7cv] {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.week-swipe-dots[b-obghfiq7cv] { display: flex; gap: 6px; flex-shrink: 0; }

.week-swipe-dot[b-obghfiq7cv] {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-border-input);
    cursor: pointer;
    transition: var(--transition-fast);
}

.week-swipe-dot--active[b-obghfiq7cv] { background: var(--color-brand); transform: scale(1.15); }

.week-swipe-label[b-obghfiq7cv] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════ */
/* ══  RESPONSIVE                                  ══ */
/* ══════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .week-sidebar[b-obghfiq7cv] { width: 220px; }
}

@media (max-width: 1100px) {
    /* Stack the columns. 1100 px, not 900, so an iPad in landscape (1024) stacks too: beside the
       app sidebar the side-by-side layout left the grid about 500 px and scrolled sideways.
       Same limit as the booking dialogs' narrow layout. min-height:0 removes the calc(100vh-220px) floor: with it,
       the layout stayed 100vh tall and the calendar grid overflowed *invisibly* below
       it because the page couldn't scroll to reveal it. Sizing to content lets the page
       grow and scroll down to the grid. (Verified live: page scrollHeight 880 -> 1268.) */
    .week-layout[b-obghfiq7cv] {
        flex-direction: column;
        min-height: 0;
        gap: 12px;
        /* Stretch children across the width. The base align-items:flex-start, combined with
           content-sized children, otherwise shrinks the calendar to its content width and
           leaves empty space on the right. (Verified live: 261px -> 347px.) */
        align-items: stretch;
    }

    /* Flatten the sidebar + main into the layout's flex flow so their children can be freely
       reordered on mobile. display:contents removes the two wrapper boxes (which otherwise
       can't be interleaved) but keeps DOM ancestry, so the collapse rules below still match.
       Order: nav -> employee picker -> swipe indicator -> calendar -> month picker. This also
       fixes the original ticket bug: the sidebar is no longer a sticky box overlaying the grid. */
    .week-main[b-obghfiq7cv],
    .week-sidebar[b-obghfiq7cv] { display: contents; }

    .week-nav[b-obghfiq7cv] { order: 1; }
    .week-emp-toggle[b-obghfiq7cv] { order: 2; }
    .week-sidebar[b-obghfiq7cv]  .emp-section { order: 3; }
    .week-swipe-indicator[b-obghfiq7cv] { order: 4; }
    .week-panels-container[b-obghfiq7cv] { order: 5; }
    .week-month-toggle[b-obghfiq7cv] { order: 6; }
    .cal-mini[b-obghfiq7cv] { order: 7; width: 100%; }

    /* Show the month toggle and collapse the mini-calendar by default so it doesn't
       dominate the top of the page (it's a secondary "jump to a date" control here). */
    .week-month-toggle[b-obghfiq7cv] { display: flex; }
    .week-sidebar:not(.week-sidebar--month-open) .cal-mini[b-obghfiq7cv] { display: none; }
    .week-sidebar--month-open .week-month-toggle-caret[b-obghfiq7cv] { transform: rotate(180deg); }

    /* Swipe indicator visible only on mobile (when there are 2+ panels). */
    .week-swipe-indicator[b-obghfiq7cv] { display: flex; }

    /* Show the collapse toggle and hide the employee list unless expanded, so the
       day grid sits right under the mini-calendar instead of behind the list. */
    .week-emp-toggle[b-obghfiq7cv] { display: flex; }
    .week-sidebar:not(.week-sidebar--emp-open)[b-obghfiq7cv]  .emp-section { display: none; }
    .week-sidebar--emp-open .week-emp-toggle-caret[b-obghfiq7cv] { transform: rotate(180deg); }
    /* Bound the expanded list so it scrolls internally instead of pushing the grid
       far down the page. */
    .week-sidebar--emp-open[b-obghfiq7cv]  .emp-list { max-height: 40vh; }

    /* The whole panel chain is flex:1; min-height:0, which (once .week-main is content-sized
       above) leaves the grid collapsed and overflowing invisibly. Size every level to content
       and give the scroll body a fixed height so the day grid is visible and scrolls internally.
       The grid-card and panel rules MUST be qualified with .week-panels-container: the base
       rules `.week-panels-container .week-grid-card` and `.week-panel:first-child` are (0,3,0),
       so a plain `.week-grid-card`/`.week-panel` (0,2,0) loses on specificity. (Verified live.) */
    .week-panels-container .week-grid-card[b-obghfiq7cv] { flex: none; }
    .week-body-scroll[b-obghfiq7cv] {
        flex: none;
        height: 60vh;
        overflow-y: scroll;
    }

    /* Horizontal swipe carousel: one employee calendar per "page". Native touch swipe +
       scroll-snap, no custom gesture JS. Each panel is full-width; swipe to switch employee
       (vertical scroll inside each panel still scrolls the time grid). */
    .week-panels-container[b-obghfiq7cv] {
        flex: none;
        flex-direction: row;
        gap: 12px;
        background: transparent;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .week-panels-container[b-obghfiq7cv]::-webkit-scrollbar { display: none; }

    .week-panels-container .week-panel[b-obghfiq7cv] {
        flex: 0 0 100%;        /* one panel fills the viewport width */
        scroll-snap-align: start;
        min-width: 0;
        border: var(--card-border);
        border-radius: var(--cal-grid-radius);
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .week-grid-card[b-obghfiq7cv] { overflow-x: auto; }
    .week-col-dayname[b-obghfiq7cv] { font-size: var(--cal-microtext-size); }

    /* Stack the navigation header. The view toggle (Dag/Uge/7 dage/Liste) goes on top and
       fills the full width; the prev/today/next buttons + date sit below. */
    .week-nav-top-row[b-obghfiq7cv] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .week-nav-left[b-obghfiq7cv] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
    }
    .week-nav-label[b-obghfiq7cv] { font-size: 1rem; text-align: center; }

    /* View toggle on top. Below 600px SegmentedControl renders as a dropdown (utilities.css),
       so the bar itself is not styled here any more. */
    .week-nav-right[b-obghfiq7cv] {
        order: -1;
        width: 100%;
        min-width: 0;
    }

    /* Prev / today / next buttons fill the width to match. */
    .week-nav-btns[b-obghfiq7cv] { width: 100%; }
    .week-nav-btns .week-nav-btn[b-obghfiq7cv] {
        flex: 1;
        justify-content: center;
    }
}

/* Udeblevet: kunden kom ikke. Advarsel, ikke fejl: aftalen blev ikke aflyst. */
.status-udeblevet[b-obghfiq7cv] {
    color: var(--mud-palette-warning);
    border-color: var(--mud-palette-warning);
}

/* ── Telefon: touch-mål ── */
@media (max-width: 599px) {
    /* The panel clips at overflow: hidden, so the 30px header must grow with CalendarCloseButton. */
    .week-panel-header[b-obghfiq7cv] {
        height: 44px;
    }
}
/* /Components/Pages/Aktiviteter/AktiviteterFilterBar.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  AKTIVITETER FILTER-BAR - Scoped styles      ══ */
/* ══  Søg, view-switcher, typefilter-tabs         ══ */
/* ══  (flyttet fra Aktiviteter.razor.css          ══ */
/* ══  v. dekomp.)                                 ══ */
/* ══════════════════════════════════════════════════ */

.aftaler-header-right[b-ugfzhitn61] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .aftaler-header-right[b-ugfzhitn61] {
        flex-wrap: wrap;
        flex-shrink: 1;
        min-width: 0;
        max-width: 100%;
    }
}

/* ── Card header search wrap ── */
.aftaler-search-wrap[b-ugfzhitn61] {
    min-width: 260px;
    max-width: 320px;
    flex-shrink: 0;
}

/* ── Responsiv ── */
@media (max-width: 640px) {
    /* Kortets header: søgefelt fylder fuld bredde under titel */
    .aftaler-card-header[b-ugfzhitn61]  .aftaler-header-stack {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .aftaler-search-wrap[b-ugfzhitn61] {
        min-width: 0;
        max-width: none;
    }
}
/* /Components/Pages/Aktiviteter/AktivitetHeroCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  AKTIVITET HERO-CARD - Scoped styles         ══ */
/* ══  (flyttet fra AktivitetDetaljer.razor.css    ══ */
/* ══  v. dekomp.)                                 ══ */
/* ══════════════════════════════════════════════════ */

/* ── Hero card ── */
/* MudText h5 has a default margin; the title sits flush in the flex row. ::deep anchored
   on .akt-hero-header — the class lands on MudText's child root and never gets scoped. */
.akt-hero-header[b-lqaf1jy2z6]  .akt-hero-title { margin: 0; }

.akt-hero-header[b-lqaf1jy2z6] {
    padding: 20px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Compact metadata line ── */
.akt-meta-line[b-lqaf1jy2z6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--mud-typography-body1-size);
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

.akt-meta-sep[b-lqaf1jy2z6] {
    color: var(--mud-palette-text-disabled);
    padding: 0 3px;
}

/* ::deep anchored on .akt-meta-line (a real element in this component, so
   it carries the scope attribute); .akt-meta-icon sits on the MudIcon child
   root and never gets scoped itself — see MudIcon-sizing rule in design.md. */
.akt-meta-line[b-lqaf1jy2z6]  .akt-meta-icon {
    font-size: var(--icon-size-sub) !important;
    color: var(--mud-palette-text-disabled);
    vertical-align: middle;
    margin-bottom: 1px;
}

/* ── Slet button: rød ved hover ── */
[b-lqaf1jy2z6] .akt-slet-btn:hover {
    border-color: var(--mud-palette-error) !important;
    color: var(--mud-palette-error) !important;
    background-color: transparent !important;
}

[b-lqaf1jy2z6] .akt-slet-btn:hover .mud-icon-root {
    color: var(--mud-palette-error) !important;
}

/* The address doubles as a directions link; it keeps the meta line's colour so the row still reads
   as metadata, and gains the touch target on phones (designguide §10). */
.akt-meta-map[b-lqaf1jy2z6] {
    color: inherit;
    text-decoration: none;
}

.akt-meta-map:hover[b-lqaf1jy2z6],
.akt-meta-map:focus-visible[b-lqaf1jy2z6] { text-decoration: underline; }

@media (max-width: 599px) {
    .akt-meta-map[b-lqaf1jy2z6] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}
/* /Components/Pages/Aktiviteter/AktivitetParterCard.razor.rz.scp.css */
.akt-parter-card[b-d79b2lbxag] {
    padding: 16px;
}

.akt-parter-header[b-d79b2lbxag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.akt-parter-list[b-d79b2lbxag] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.akt-parter-row[b-d79b2lbxag] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.akt-parter-row:hover[b-d79b2lbxag] {
    background: var(--color-bg-neutral);
}

.akt-parter-row--active[b-d79b2lbxag] {
    background: var(--color-bg-selected);
}

.akt-parter-row--active .akt-parter-name[b-d79b2lbxag] {
    font-weight: 700;
}

.akt-parter-name[b-d79b2lbxag] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}

.akt-parter-role[b-d79b2lbxag] {
    flex-shrink: 0;
}

.akt-parter-actions[b-d79b2lbxag] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
/* /Components/Pages/Aktiviteter/AktivitetPartyDetailCard.razor.rz.scp.css */
.akt-detail-head[b-rcp4fewyyb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.akt-detail-identity[b-rcp4fewyyb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.akt-detail-namewrap[b-rcp4fewyyb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.akt-detail-name-row[b-rcp4fewyyb] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.akt-detail-actions[b-rcp4fewyyb] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.akt-detail-info[b-rcp4fewyyb] {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.akt-detail-info-row[b-rcp4fewyyb] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--mud-palette-divider);
}

.akt-detail-info-row dt[b-rcp4fewyyb] {
    color: var(--mud-palette-text-secondary);
}

.akt-detail-info-row dd[b-rcp4fewyyb] {
    margin: 0;
    color: var(--mud-palette-text-primary);
    text-align: right;
    word-break: break-word;
}

/* Directions link: reads as the text, like the aftale page's address. */
.akt-detail-map[b-rcp4fewyyb] {
    color: inherit;
    text-decoration: none;
}

.akt-detail-map:hover[b-rcp4fewyyb],
.akt-detail-map:focus-visible[b-rcp4fewyyb] { text-decoration: underline; }
/* /Components/Pages/Aktiviteter/AktivitetQuickCreatePopover.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  QUICK-CREATE POPOVER - anchored beside slot ══ */
/* ══════════════════════════════════════════════════ */

.qcp-backdrop[b-j8w47to5tw] {
    position: fixed;
    inset: 0;
    z-index: 1350;
    background: transparent;
}

.qcp-card[b-j8w47to5tw] {
    position: fixed;
    /* Above the topbar and global search (1300), below MudBlazor dialogs (1400): dialogs
       opened from inside the popover (Opret kunde) must render in front of it. */
    z-index: 1351;
    /* Off-screen until JS measures the card and positions it beside the slot
       (QcpTeleport.position sets left/top/max-height) — avoids a wrong-spot flash.
       Surface (bg/border/radius/shadow) comes from the shared .dropdown-surface
       class (via Class) — this isn't a MudPopover, so it doesn't get it automatically
       from the .mud-popover:has(...) selector. Only layout is unique here. */
    left: -9999px;
    top: 0;
    width: 360px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.qcp-header[b-j8w47to5tw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 4px;
    /* The header is the drag handle (QcpTeleport._enableDrag), so the click-drag must not
       select the title text underneath it either. */
    user-select: none;
    cursor: grab;
    /* Touch and pen: the browser resolves touch-action before any JS runs, so without this it
       starts its own scroll gesture and cancels the pointer capture mid-drag. */
    touch-action: none;
}

/* Same hover surface as the card buttons (.card-actions in utilities.css), so the
   handle announces itself as draggable. */
.qcp-header:hover[b-j8w47to5tw] {
    background-color: var(--mud-palette-action-disabled-background);
    /* The header is the card's top edge, so the tint must follow its rounded corners. */
    border-radius: var(--dropdown-radius) var(--dropdown-radius) 0 0;
}

.qcp-header:active[b-j8w47to5tw] {
    cursor: grabbing;
}

.qcp-close-btn[b-j8w47to5tw] {
    flex-shrink: 0;
    color: var(--color-text-secondary) !important;
}

/* Matches CreateActivityDialog's contact-icon size (.ba-* phone/envelope icons). */
.qcp-contact-icon[b-j8w47to5tw] {
    font-size: 13px !important;
}

.qcp-body[b-j8w47to5tw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 14px 4px;
}

.qcp-field[b-j8w47to5tw] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* MudBlazor inputs (KUNDE/SAG/TYPE/LOKATION/BESKRIVELSE/NOTER) default to a larger input
   font than the native date/time/duration inputs above — align them to the same body2
   size and border treatment as the full dialog's ".ba-form" so the two never drift. */
.qcp-body[b-j8w47to5tw]  .mud-input-outlined .mud-input-outlined-border { border-color: var(--color-border-card) !important; border-radius: 10px !important; }
.qcp-body[b-j8w47to5tw]  .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--color-text-muted) !important; }
.qcp-body[b-j8w47to5tw]  .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--color-brand) !important; box-shadow: var(--focus-ring-brand-soft) !important; }
.qcp-body[b-j8w47to5tw]  .mud-input-slot { font-size: var(--mud-typography-body2-size) !important; }

/* KUNDE-forslag: navn + telefon/e-mail, i tråd med den fulde dialog. #44077. */
.qcp-person-option[b-j8w47to5tw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0;
}

.qcp-person-option-name[b-j8w47to5tw] {
    font-size: var(--mud-typography-body1-size);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}

.qcp-person-option-meta[b-j8w47to5tw] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.qcp-person-option-detail[b-j8w47to5tw] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-secondary);
}

/* DAWA-adresseforslag i quick-popoveren. Kortet har overflow-y:auto, som ellers
   ville klippe listen — vi capper KUN højden på den eksisterende scroll-container
   (.address-input-list, globalt 280px) så den holder sig inden for kortet (~230px
   plads under LOKATION-feltet). Vi lægger IKKE en ekstra scroll på .address-input-dropdown
   — det gav to scrollbars. #44077. */
.qcp-field--location[b-j8w47to5tw]  .address-input-list {
    max-height: 176px;
}

.qcp-label[b-j8w47to5tw] {
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* TYPE har ingen pil eller ikon - den folder kun ud når man skriver. */
.qcp-type-input[b-j8w47to5tw]  .mud-input-adornment { display: none !important; }

.qcp-date-row[b-j8w47to5tw] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.qcp-date-label-row[b-j8w47to5tw] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.qcp-duration-caption[b-j8w47to5tw] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-muted);
}

/* Dato: samme udseende som den store dialogs read-only .ba-date-chip--date, men her et
   redigerbart <input type="date"> — popoveren har ingen mini-kalender at ændre datoen fra. */
.qcp-date-chip[b-j8w47to5tw] {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border-card);
    border-radius: 10px;
    font-family: inherit;
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--color-text-primary);
    outline: none;
    box-sizing: border-box;
    white-space: nowrap;
}

.qcp-date-chip:focus[b-j8w47to5tw] { border-color: var(--color-brand); box-shadow: var(--focus-ring-brand-soft); }

.qcp-date-separator[b-j8w47to5tw] {
    color: var(--color-text-disabled);
    font-size: var(--mud-typography-body1-size);
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}

.qcp-time-select-wrap[b-j8w47to5tw] {
    width: 84px;
    flex-shrink: 0;
}

.qcp-time-input[b-j8w47to5tw] {
    width: 100%;
    height: 36px;
    padding: 0 8px;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border-card);
    border-radius: 10px;
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    color: var(--color-text-primary);
    outline: none;
    box-sizing: border-box;
    cursor: text;
}

.qcp-time-input:hover[b-j8w47to5tw] { border-color: var(--color-text-muted); }
.qcp-time-input:focus[b-j8w47to5tw] { border-color: var(--color-brand); box-shadow: var(--focus-ring-brand-soft); }

/* Skjul den native ur-vælger (klokke-ikon + OS-picker) — samme som den store
   booking-dialog (.ba-time-input). Man skriver/scroller tiden direkte. #44077. */
.qcp-time-input[b-j8w47to5tw]::-webkit-calendar-picker-indicator { display: none; }

/* ── SAG-forslag i autocomplete-dropdown — 1:1 med den store dialogs .ba-case-search-* ── */
.qcp-case-search-item[b-j8w47to5tw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    min-width: 0;
}

.qcp-case-search-thumb[b-j8w47to5tw] {
    flex-shrink: 0;
    width: 44px;
    height: 36px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.qcp-case-search-placeholder-icon[b-j8w47to5tw] {
    font-size: 18px !important;
    color: var(--mud-palette-text-disabled) !important;
}

.qcp-case-search-img[b-j8w47to5tw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qcp-case-search-info[b-j8w47to5tw] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qcp-case-search-address[b-j8w47to5tw] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qcp-case-search-meta[b-j8w47to5tw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.qcp-case-search-number[b-j8w47to5tw] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.qcp-case-search-status[b-j8w47to5tw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.qcp-case-search-dot[b-j8w47to5tw] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.qcp-case-search-status--vurdering[b-j8w47to5tw] { color: var(--mud-palette-warning-darken, #e65100); }
.qcp-case-search-status--vurdering .qcp-case-search-dot[b-j8w47to5tw] { background: var(--mud-palette-warning); }
.qcp-case-search-status--aktiv[b-j8w47to5tw] { color: var(--mud-palette-success-darken, #2e7d32); }
.qcp-case-search-status--aktiv .qcp-case-search-dot[b-j8w47to5tw] { background: var(--mud-palette-success); }
.qcp-case-search-status--tilsalg[b-j8w47to5tw] { color: var(--mud-palette-primary); }
.qcp-case-search-status--tilsalg .qcp-case-search-dot[b-j8w47to5tw] { background: var(--mud-palette-primary); }

.qcp-case-search-broker[b-j8w47to5tw] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.qcp-actions[b-j8w47to5tw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px 14px;
}

/* Phones normally never see this popover: Aktiviteter.OnSlotSelected opens the full
   CreateActivityDialog instead. The clamp stays as a safety net for narrow tablets and for
   anyone reaching the popover another way, since the fixed 360px card is wider than a 390px
   viewport once its own offsets are counted. */
@media (max-width: 599px) {
    .qcp-card[b-j8w47to5tw] {
        width: auto;
        max-width: calc(100vw - 32px);
    }
}
/* /Components/Pages/Aktiviteter/AktivitetSagerCard.razor.rz.scp.css */
/* Scoped styles for the Sager card: linked-case rich card, view-only case notes,
   and the link form. Moved from AktivitetSidebarCard.razor.css. */

/* Case linking form */
.akt-link-form[b-94d0r2ebii] { border-top: 1px solid var(--mud-palette-divider); padding-top: 12px; margin-top: 4px; }

/* Linked case rich card */
.akt-linked-case-card-wrap[b-94d0r2ebii] {
    position: relative;
}

.akt-linked-case-card[b-94d0r2ebii] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--mud-palette-background-grey);
    border-radius: var(--radius-sm);
}

.akt-linked-case-sellers[b-94d0r2ebii] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--mud-palette-divider);
}

.akt-linked-case-seller[b-94d0r2ebii] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.akt-linked-case-seller-name[b-94d0r2ebii] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.akt-linked-case-seller-item[b-94d0r2ebii] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.akt-linked-case-seller-item i[b-94d0r2ebii] { font-size: 11px; }

.akt-linked-case-thumb-wrap[b-94d0r2ebii] {
    position: relative;
    flex-shrink: 0;
}

.akt-linked-case-thumb[b-94d0r2ebii] {
    width: 64px;
    height: 50px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    display: block;
}

.akt-linked-case-thumb--placeholder[b-94d0r2ebii] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-bg, var(--color-brand-alpha-06));
}
.akt-linked-case-thumb--placeholder i[b-94d0r2ebii] { font-size: 18px; color: var(--mud-palette-primary); opacity: 0.4; }
.akt-linked-case-thumb--vurdering[b-94d0r2ebii] { background: rgba(255,152,0,0.08); }
.akt-linked-case-thumb--vurdering i[b-94d0r2ebii] { color: var(--mud-palette-warning); }
.akt-linked-case-thumb--aktiv[b-94d0r2ebii] { background: rgba(76,175,80,0.08); }
.akt-linked-case-thumb--aktiv i[b-94d0r2ebii] { color: var(--mud-palette-success); }
.akt-linked-case-thumb--tilsalg[b-94d0r2ebii] { background: var(--color-brand-bg, var(--color-brand-alpha-06)); }
.akt-linked-case-thumb--tilsalg i[b-94d0r2ebii] { color: var(--mud-palette-primary); }

/* Hover popup */
.akt-linked-case-thumb-popup[b-94d0r2ebii] {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 9999;
    background: var(--mud-palette-background);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0,0,0,0.22);
    padding: 4px;
    pointer-events: none;
}
.akt-linked-case-thumb-wrap:hover .akt-linked-case-thumb-popup[b-94d0r2ebii] { display: block; }
.akt-linked-case-thumb-popup-img[b-94d0r2ebii] {
    width: 200px;
    height: 148px;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 2px);
    display: block;
}

.akt-linked-case-body[b-94d0r2ebii] { flex: 1; min-width: 0; }

.akt-linked-case-address[b-94d0r2ebii] {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.akt-linked-case-address:hover[b-94d0r2ebii] { text-decoration: underline; }
.akt-linked-case-address--plain[b-94d0r2ebii] { color: var(--mud-palette-text-primary); }

.akt-linked-case-meta[b-94d0r2ebii] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}
.akt-linked-case-meta-item[b-94d0r2ebii] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.akt-linked-case-meta-item i[b-94d0r2ebii] { font-size: 11px; }

.akt-linked-case-status-dot[b-94d0r2ebii] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.akt-linked-case-status-dot--vurdering[b-94d0r2ebii] { background: var(--mud-palette-warning); }
.akt-linked-case-status-dot--aktiv[b-94d0r2ebii]     { background: var(--mud-palette-success); }
.akt-linked-case-status-dot--tilsalg[b-94d0r2ebii]   { background: var(--mud-palette-primary); }
.akt-linked-case-status-dot--solgt[b-94d0r2ebii]     { background: var(--mud-palette-text-disabled); }

/* Case notes (view-only) */
.akt-case-notes-list[b-94d0r2ebii] { display: flex; flex-direction: column; border-top: 1px solid var(--mud-palette-divider); margin-top: 8px; padding-top: 4px; }

.akt-case-note[b-94d0r2ebii] { padding: 8px 0; border-bottom: 1px solid var(--mud-palette-divider); }
.akt-case-note:last-child[b-94d0r2ebii] { border-bottom: none; }

.akt-case-note-header[b-94d0r2ebii] { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }

.akt-case-note-type[b-94d0r2ebii] { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; background: var(--color-brand-alpha-08, rgba(33,150,243,0.08)); color: var(--mud-palette-primary); white-space: nowrap; }

.akt-case-note-meta[b-94d0r2ebii] { display: flex; gap: 5px; font-size: 11px; color: var(--mud-palette-text-disabled); margin-left: auto; white-space: nowrap; }

.akt-case-note-text[b-94d0r2ebii] { margin: 0 0 4px; font-size: var(--mud-typography-body2-size); color: var(--mud-palette-text-primary); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.akt-case-note-tags[b-94d0r2ebii] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }

.akt-case-note-tag[b-94d0r2ebii] { font-size: 11px; padding: 1px 7px; border-radius: 20px; background: rgba(0,0,0,0.06); color: var(--mud-palette-text-secondary); }
/* /Components/Pages/Aktiviteter/AktivitetSidebarCard.razor.rz.scp.css */
/* Forberedelsesskema/Skema-svar scoped styles. */

/* NB: Formodentlig død regel - klassen sidder kun på MudText-
   komponenter og får aldrig scope-attributten. Porteret 1:1;
   flagget i docs/frontend-cleanup-plan.md. */
.akt-label[b-9rkjk8s08k] {
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/Aktiviteter/AktivitetSoegeprofilerCard.razor.rz.scp.css */
/* Scoped styles for the Søgeprofiler card. Moved from AktivitetSidebarCard.razor.css. */

.akt-sp-row[b-p08ierqo7p] { padding: 8px 0; border-bottom: 1px solid var(--mud-palette-divider); }
/* /Components/Pages/Autopilot/Autopilot.razor.rz.scp.css */
.autopilot-toolbar[b-86iswbot5p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.autopilot-toolbar-right[b-86iswbot5p] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Table and row-action rules shared by the Opfølgninger, Skemaer and Statusmøder tabs. They
   live here once so the tabs cannot drift apart; ::deep reaches the tab components below. */
.autopilot-page[b-86iswbot5p]  .ap-table,
.autopilot-page[b-86iswbot5p]  .ap-table table {
    width: 100%;
}

.autopilot-page[b-86iswbot5p]  .ap-row {
    cursor: pointer;
}

.autopilot-page[b-86iswbot5p]  th.ap-actions,
.autopilot-page[b-86iswbot5p]  td.ap-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.autopilot-page[b-86iswbot5p]  .ap-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.autopilot-page[b-86iswbot5p]  .ap-card-actions .mud-button-root {
    text-transform: none;
}

/* Card mode: the actions get the full card width and wrap, instead of squeezing into the
   value column next to a "Handling" label. */
@media (max-width: 599px) {
    .autopilot-page[b-86iswbot5p]  td.ap-actions {
        white-space: normal;
    }

    .autopilot-page[b-86iswbot5p]  .ap-card-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
/* /Components/Pages/Autopilot/AutopilotFollowUps.razor.rz.scp.css */
[b-hhays9nf6l] .ap-overdue {
    color: var(--mud-palette-error);
    font-weight: 600;
}

@media (min-width: 600px) {
    [b-hhays9nf6l] .ap-ring { display: none; }
}
/* /Components/Pages/Autopilot/AutopilotForms.razor.rz.scp.css */
/* Day separators sit inside the table so one header serves the whole section. */
[b-0harbc74tr] .ap-day-row td {
    padding: 6px 16px !important;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-0harbc74tr] .ap-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* A kunde already in køberkartoteket: the row stays so the mægler decides, but it reads as "probably skip". */
[b-0harbc74tr] .ap-row-in-registry td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-success);
}
/* /Components/Pages/Autopilot/AutopilotRules.razor.rz.scp.css */
.ap-rule[b-xeekhovxbi] {
    padding: 16px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ap-rule:last-child[b-xeekhovxbi] {
    border-bottom: none;
    padding-bottom: 0;
}

.ap-rule-head[b-xeekhovxbi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ap-rule-text[b-xeekhovxbi] {
    min-width: 0;
}

.ap-rule-body[b-xeekhovxbi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.ap-rule-source[b-xeekhovxbi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-xeekhovxbi] .ap-rule-muted {
    opacity: 0.6;
}

[b-xeekhovxbi] .ap-rule-source .mud-button-root {
    text-transform: none;
}
/* /Components/Pages/Autopilot/AutopilotStatusMeetings.razor.rz.scp.css */
/* Inline interval pill, same shape as the Sager list's aktivitet status. */
.ap-pill[b-a6dajh3gw4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 6px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.ap-pill:hover[b-a6dajh3gw4] {
    background: var(--mud-palette-action-disabled-background);
}

@media (max-width: 599px) {
    /* A raw <button>, so the global 44px phone rule for MudButton does not reach it. */
    .ap-pill[b-a6dajh3gw4] {
        min-height: 44px;
    }
}
/* /Components/Pages/Autopilot/CaseAddressCell.razor.rz.scp.css */
.ap-address[b-a6bfel1pdt] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ap-address-thumb[b-a6bfel1pdt] {
    width: 44px;
    height: 34px;
    flex: 0 0 44px;
    border-radius: var(--radius-sm, 6px);
    object-fit: cover;
    display: block;
}

.ap-address-thumb--empty[b-a6bfel1pdt] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.ap-address-popup[b-a6bfel1pdt] {
    background: var(--mud-palette-background);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    padding: 4px;
}

.ap-address-popup-img[b-a6bfel1pdt] {
    width: 220px;
    height: 160px;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 2px);
    display: block;
}
/* /Components/Pages/Dashboard/BusinessKpiView.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  BUSINESS KPI VIEW – Scoped styles           ══ */
/* ══  Designsprog: matcher Dashboard Overblik     ══ */
/* ══════════════════════════════════════════════════ */

/* ── Root ─────────────────────────────────────────── */
.bkpi-root[b-q5t7rwhitf] {
    width: 100%;
}

.bkpi-fullscreen[b-q5t7rwhitf] {
    background: var(--mud-palette-background);
    height: 100vh;
    padding: 32px 48px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* ── Sub-tab nav ──────────────────────────────────── */
.bkpi-subnav[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ── Year picker ──────────────────────────────────── */
.bkpi-year-row[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bkpi-inline-pick[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--mud-palette-action-disabled-background);
    border: none;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.bkpi-inline-pick:hover[b-q5t7rwhitf] {
    background: var(--mud-palette-action-hover);
}

.bkpi-inline-pick--open .pill-select__caret[b-q5t7rwhitf] {
    transform: rotate(180deg);
}

/* ── Card ─────────────────────────────────────────── */
.bkpi-card[b-q5t7rwhitf] {
    border-radius: var(--radius-xl);
    background: var(--mud-palette-background);
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: var(--card-border);
    padding: 16px;
}

.bkpi-card-actions[b-q5t7rwhitf] { margin-top: 12px; display: flex; gap: 8px; }
.bkpi-gauge-svg[b-q5t7rwhitf]    { width: 100%; height: auto; display: block; }

/* .bkpi-card--accent: ramme fjernet (borderless) — ingen forskel fra .bkpi-card. */

.bkpi-card-header[b-q5t7rwhitf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
    gap: 8px;
    flex-wrap: wrap;
}

.bkpi-header-actions[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bkpi-add-case-search[b-q5t7rwhitf] {
    padding: 8px 12px 4px;
    width: 340px;
}

.bkpi-add-case-empty[b-q5t7rwhitf] {
    padding: 8px 12px;
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}

.bkpi-comment-input[b-q5t7rwhitf] {
    width: 100%;
    min-width: 140px;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: inherit;
    font-family: inherit;
    color: var(--mud-palette-text-primary);
    background: transparent;
}

.bkpi-comment-input:hover[b-q5t7rwhitf],
.bkpi-comment-input:focus[b-q5t7rwhitf] {
    border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background);
    outline: none;
}

.bkpi-remove-btn[b-q5t7rwhitf] {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.1s;
}

.bkpi-row-hoverable:hover .bkpi-remove-btn[b-q5t7rwhitf] {
    opacity: 1;
}

.bkpi-emp-cell--assignable[b-q5t7rwhitf] {
    cursor: pointer;
}

.bkpi-emp-cell--assignable .bkpi-broker-link[b-q5t7rwhitf] {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

/* ── Sag-søgeresultater i "tilføj sag"-menuen (samme visuelle sprog som
   den globale sags-søgning i AppTopbar) ───────────────────────────── */
.search-section[b-q5t7rwhitf] {
    padding: 6px 0;
    max-width: 360px;
}

.search-section-header[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.search-section-header .ph[b-q5t7rwhitf] {
    font-size: 13px;
}

.search-section-count[b-q5t7rwhitf] {
    margin-left: auto;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    padding: 1px 8px;
    letter-spacing: 0;
    text-transform: none;
}

.search-result-item[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background var(--transition-fast);
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    font-family: inherit;
}

.search-result-item:hover[b-q5t7rwhitf] {
    background: var(--mud-palette-action-disabled-background);
}

.search-result-item:focus-visible[b-q5t7rwhitf] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.search-result-item:hover .search-result-arrow[b-q5t7rwhitf] {
    opacity: 1;
    transform: translateX(2px);
}

.search-result-thumb[b-q5t7rwhitf] {
    width: 46px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--mud-palette-action-disabled-background);
}

.search-result-thumb--placeholder[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
    font-size: 18px;
}

.search-status-dot[b-q5t7rwhitf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

.search-status-dot--aktiv[b-q5t7rwhitf] { background: var(--mud-palette-primary); }
.search-status-dot--tilsalg[b-q5t7rwhitf],
.search-status-dot--undersalg[b-q5t7rwhitf],
.search-status-dot--vurdering[b-q5t7rwhitf] { background: var(--mud-palette-warning); }
.search-status-dot--solgt[b-q5t7rwhitf],
.search-status-dot--endeligsalg[b-q5t7rwhitf] { background: var(--mud-palette-success); }
.search-status-dot--retur[b-q5t7rwhitf],
.search-status-dot--aflyst[b-q5t7rwhitf],
.search-status-dot--tabtkommission[b-q5t7rwhitf] { background: var(--mud-palette-error); }

.search-result-content[b-q5t7rwhitf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.search-result-title[b-q5t7rwhitf] {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-contact-row[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.search-result-contact-item[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.search-result-contact-item .ph[b-q5t7rwhitf] {
    font-size: 11px;
    flex-shrink: 0;
}

.search-result-arrow[b-q5t7rwhitf] {
    font-size: 13px;
    color: var(--mud-palette-text-disabled);
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

/* ── Percentage badge ─────────────────────────────── */
.bkpi-pct-badge[b-q5t7rwhitf] {
    font-size: 13px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    align-self: flex-start;
}

.bkpi-pct-badge--blue[b-q5t7rwhitf] {
    background: rgba(79, 195, 247, 0.15);
    color: #0288D1;
}

.bkpi-pct-badge--orange[b-q5t7rwhitf] {
    background: rgba(255, 179, 0, 0.15);
    color: #F57C00;
}

.bkpi-pct-badge--green[b-q5t7rwhitf] {
    background: rgba(76, 175, 80, 0.15);
    color: #2E7D32;
}

/* ── Gauge ────────────────────────────────────────── */
.bkpi-gauge-wrap[b-q5t7rwhitf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px 20px;
}

.bkpi-gauge-inner[b-q5t7rwhitf] {
    /* Fill available width up to a cap — SVG aspect-ratio is preserved via viewBox */
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
}

.bkpi-gauge-value-text[b-q5t7rwhitf] {
    font-size: 28px;
    font-weight: 800;
    fill: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
}

.bkpi-gauge-goal-text[b-q5t7rwhitf] {
    font-size: 14px;
    font-weight: 500;
    fill: var(--mud-palette-warning-text, #FFB300);
    font-family: var(--mud-typography-default-family);
}

/* ── Tables ───────────────────────────────────────── */
.bkpi-table-wrap[b-q5t7rwhitf] {
    overflow-x: auto;
    flex: 1;
}

.bkpi-table-wrap--scroll[b-q5t7rwhitf] {
    max-height: 340px;
    overflow-y: auto;
}

.bkpi-table[b-q5t7rwhitf] {
    /* Skrift kommer fra .crm-table (tables.css). Kun layout her. */
    width: 100%;
    border-collapse: collapse;
}

.bkpi-table thead th[b-q5t7rwhitf] {
    /* Skrift (font-size/weight/transform/spacing/color) kommer fra .crm-table (tables.css). */
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--mud-palette-divider);
    white-space: nowrap;
}

.bkpi-table--compact thead th[b-q5t7rwhitf] {
    padding: 6px 10px;
}

.bkpi-table tbody tr[b-q5t7rwhitf] {
    border-bottom: 1px solid var(--mud-palette-divider);
    transition: background 0.1s;
}

.bkpi-table tbody tr:last-child[b-q5t7rwhitf] {
    border-bottom: none;
}

.bkpi-table tbody tr:hover[b-q5t7rwhitf] {
    background: var(--mud-palette-action-hover);
}

.bkpi-table tbody td[b-q5t7rwhitf] {
    /* Skrift/farve kommer fra .crm-table (tables.css). Kun layout her. */
    padding: 10px 12px;
    vertical-align: middle;
}

.bkpi-table--compact tbody td[b-q5t7rwhitf] {
    padding: 7px 10px;
}

.bkpi-th-right[b-q5t7rwhitf] {
    text-align: right !important;
}

.bkpi-td-right[b-q5t7rwhitf] {
    text-align: right;
}

.bkpi-td-rank[b-q5t7rwhitf] {
    color: var(--mud-palette-text-secondary);
    width: 28px;
    text-align: center;
}

.bkpi-td-val[b-q5t7rwhitf] {
    /* Vægt kommer fra .crm-table (400). Farve = secondary for at matche søster-kolonnen. */
    color: var(--mud-palette-text-secondary);
}

.bkpi-td-addr[b-q5t7rwhitf] {
    /* Skrift kommer fra .crm-table (body1). Kun layout/truncation her. */
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small trailing icon in value/address cells (replaces decorative emojis).
   Size comes from the global .icon-table class; ::deep here only carries color
   and alignment (MudIcon renders its <svg> as a child, so the scoped [b-xxx]
   attribute lands on the cell, not the svg). */
[b-q5t7rwhitf] .bkpi-cell-icon {
    color: inherit;
    vertical-align: text-bottom;
    margin-left: 4px;
}

.bkpi-empty[b-q5t7rwhitf] {
    text-align: center;
    color: var(--mud-palette-text-secondary);
    padding: 20px 12px;
    font-style: italic;
}

/* ── Employee cell ────────────────────────────────── */
.bkpi-emp-cell[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bkpi-emp-cell--small[b-q5t7rwhitf] {
    gap: 7px;
}

.bkpi-avatar[b-q5t7rwhitf] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.bkpi-broker-link[b-q5t7rwhitf] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.bkpi-emp-cell-dual[b-q5t7rwhitf] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bkpi-role-label[b-q5t7rwhitf] {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ── Status chip ──────────────────────────────────── */
.bkpi-status-chip[b-q5t7rwhitf] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ── Handler value (sales count) ──────────────────────
   Plain text matching the sibling "Antal formidlingsaftale" column — no pill,
   no brand-red. The trailing icon inherits this same color via .bkpi-cell-icon. */
.bkpi-handel-badge[b-q5t7rwhitf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Uge/Måned bruger nu de delte .seg-control/.seg-item-klasser (utilities.css) —
   identisk med dashboard-tab-baren. Bespoke .bkpi-period-* fjernet. */

/* Empty state where a gauge would be: the warehouse has no rows for this butik.
   Centred in the gauge's box so the card keeps its height and the grid does not jump. */
.bkpi-no-data[b-q5t7rwhitf] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    text-align: center;
    /* Matches .bkpi-empty so gauge and table empty states look identical. */
    font-style: italic;
}

/* ── Responsiv ────────────────────────────────────── */
@media (max-width: 599px) {
    /* The 340px search box overflows a 390px viewport once the card padding is counted. */
    .bkpi-add-case-search[b-q5t7rwhitf] { width: 100%; }

    /* "ANTAL INDGÅET FORMIDLINGSAFTALE" alone is 270px; wrapping it keeps the three columns in a 347px card. */
    .bkpi-table thead th[b-q5t7rwhitf] {
        white-space: normal;
    }
}
/* /Components/Pages/Dashboard/DagensAftalerTable.razor.rz.scp.css */
.dagens-table-wrapper[b-oii1fy48ci] {
    background: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Header ───────────────────────────────────────── */
.dagens-header[b-oii1fy48ci] {
    padding: 0 0 16px;
}

.dagens-header-top[b-oii1fy48ci] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* ── Se kalender-knap ─────────────────────────────── */
.dagens-header[b-oii1fy48ci]  .dagens-se-kalender-btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 6px 4px 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.dagens-header[b-oii1fy48ci]  .dagens-se-kalender-btn:hover,
.dagens-header[b-oii1fy48ci]  .dagens-se-kalender-btn:hover::before {
    background: transparent !important;
    opacity: 1 !important;
}

.dagens-header[b-oii1fy48ci]  .dagens-se-kalender-btn .mud-button-icon-end {
    transition: transform 150ms ease-out;
}

.dagens-header[b-oii1fy48ci]  .dagens-se-kalender-btn:hover .mud-button-icon-end {
    transform: translateX(2px);
}

/* ── Empty state ──────────────────────────────────── */
.dagens-empty[b-oii1fy48ci] {
    padding: 40px 24px;
    text-align: center;
}

/* ── Table ────────────────────────────────────────── */
.dagens-table-scroll[b-oii1fy48ci] {
    flex: 1;
    overflow: auto;
    background: var(--mud-palette-background);
    border-radius: 5px;
}

.dagens-table[b-oii1fy48ci] {
    width: 100%;
    border-collapse: collapse;
}

.dagens-table thead th[b-oii1fy48ci] {
    /* Skrift (font-size/weight/transform/spacing/color/border) kommer fra .crm-table (tables.css).
       Kun layout her. */
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 16px;
    background: var(--mud-palette-background);
    white-space: nowrap;
}

.dagens-table tbody td[b-oii1fy48ci] {
    /* Skrift kommer fra .crm-table (tables.css). Kun layout her. */
    padding: 12px 16px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.dagens-row[b-oii1fy48ci] {
    transition: background-color var(--transition-fast);
    cursor: pointer;
}

.dagens-row:hover[b-oii1fy48ci] {
    background-color: var(--color-bg-hover);
}

.dagens-row:last-child td[b-oii1fy48ci] {
    border-bottom: none;
}

/* ── Overblik: farvet tekst ──────────────────────── */
.overview-text[b-oii1fy48ci] {
    font-size: 14px;
    font-weight: 500;
}

.overview-text--positive[b-oii1fy48ci] { color: var(--mud-palette-success); }
.overview-text--negative[b-oii1fy48ci] { color: var(--mud-palette-error); }

.text-secondary[b-oii1fy48ci] {
    color: var(--mud-palette-text-secondary);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .dagens-table thead[b-oii1fy48ci] {
        display: none;
    }

    .dagens-table tbody tr[b-oii1fy48ci] {
        display: grid;
        grid-template-columns: 1fr;
        padding: 12px 16px;
        gap: 4px;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .dagens-table tbody td[b-oii1fy48ci] {
        padding: 0;
        border: none;
        /* Stacked cards (one field per row): let cells use full width again. */
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .dagens-table tbody td:nth-child(1)[b-oii1fy48ci] {
        font-size: var(--mud-typography-body2-size);
    }

    /* Skjul dashboard-ekstra (Overblik, Kunde) på mobil - kernekolonnerne vises. */
    .dagens-table tbody td:nth-child(6)[b-oii1fy48ci],
    .dagens-table tbody td:nth-child(7)[b-oii1fy48ci] {
        display: none;
    }
}
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  DASHBOARD - Scoped styles                   ══ */
/* ══  Layout for dashboard-specifikke sektioner   ══ */
/* ══════════════════════════════════════════════════ */

/* ── Header-række: velkomst til venstre, tabs til højre ── */
.dash-header-row[b-u8o951twcx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dash-header-scope[b-u8o951twcx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-external-btn[b-u8o951twcx] {
    text-decoration: none;
}

/* ── Tab-række med fullscreen-knap ───────────────── */
.dash-tab-row[b-u8o951twcx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .dash-tab-row[b-u8o951twcx] {
        flex-shrink: 1;
        min-width: 0;
        max-width: 100%;
        /* Full-width status row above the filter grid, like the other list pages. */
        width: 100%;
    }
}

.dash-fullscreen-btn[b-u8o951twcx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: background var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}

.dash-fullscreen-btn:hover[b-u8o951twcx] {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-text-disabled);
}

/* ── Stats strip ──────────────────────────────────── */
.dash-stats-strip[b-u8o951twcx] {
    display: flex;
    align-items: stretch;
    background: var(--mud-palette-background);
    border-radius: 5px;
    overflow: hidden;
}

.dash-stat-item[b-u8o951twcx] {
    flex: 1;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
}

.dash-stat-item + .dash-stat-item[b-u8o951twcx] {
    position: relative;
}

.dash-stat-item + .dash-stat-item[b-u8o951twcx]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    width: 1px;
    background: var(--color-tertiary-soft);
}

.dash-stat-top[b-u8o951twcx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-stat-badge[b-u8o951twcx] {
    font-size: var(--mud-typography-h3-size);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-family: 'Home', sans-serif;
    flex-shrink: 0;
    line-height: 1;
}

.dash-stat-text[b-u8o951twcx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-stat-label[b-u8o951twcx] {
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.dash-stat-sub[b-u8o951twcx] {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

@media (max-width: 599px) {
    .dash-stats-strip[b-u8o951twcx] {
        flex-wrap: wrap;
    }
    .dash-stat-item[b-u8o951twcx] {
        flex: 1 1 calc(50% - 1px);
    }
    .dash-stat-item:nth-child(3)[b-u8o951twcx] {
        border-top: 1px solid var(--mud-palette-divider);
        border-left: none;
    }
    .dash-stat-item:nth-child(4)[b-u8o951twcx] {
        border-top: 1px solid var(--mud-palette-divider);
    }
}

/* ── Page wrapper ─────────────────────────────────── */
.dash-page[b-u8o951twcx] {
    padding: 0 0 48px;
}

@media (max-width: 599px) {
    .dash-page[b-u8o951twcx] {
        padding: 0 0 32px;
    }
}

/* ── Velkomsttekst (responsiv) ────────────────────── */
@media (max-width: 599px) {
    .dash-welcome[b-u8o951twcx]  .mud-typography-h2 {
        font-size: var(--mud-typography-h3-size);
        line-height: 1.3;
    }
}

/* ── Performance URL pill ─────────────────────────── */
.dash-perf-url[b-u8o951twcx] {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--mud-typography-body1-size);
    letter-spacing: 0.02em;
    text-decoration: none;
}

.dash-perf-url:hover[b-u8o951twcx] {
    color: var(--mud-palette-text-primary);
}


/* ── Kort-header ──────────────────────────────────── */
.dash-card-header[b-u8o951twcx] {
    padding: 0 0 16px;
}

/* ── Afventer handling-kort ───────────────────────── */
.dash-pending-card[b-u8o951twcx] {
    border-radius: var(--radius-xl);
    background: transparent;
    width: 100%;
}


/* ── Sektion titel-række (titel + count) ──────────── */
.dash-section-title-row[b-u8o951twcx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.dash-pending-count[b-u8o951twcx] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-disabled-background);
    padding: 6px;
    border-radius: var(--radius-pill);
    line-height: 1;
    min-width: 24px;
    text-align: center;
}

/* ── Afventer handling list ───────────────────────── */
.dash-pending-body[b-u8o951twcx] {
    background: var(--mud-palette-background);
    border-radius: 5px;
    overflow: hidden;
}

/* ── Dagens opgaver: regel-genererede + manuelle rækker ── */
.dash-opgave-row[b-u8o951twcx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.dash-opgave-row--clickable[b-u8o951twcx] {
    cursor: pointer;
    transition: background 0.12s;
}

.dash-opgave-row--clickable:hover[b-u8o951twcx] {
    background: var(--mud-palette-action-hover);
}

.dash-opgave-icon[b-u8o951twcx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.dash-opgave-check[b-u8o951twcx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-divider);
    background: transparent;
    color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 14px;
    transition: border-color 0.1s, color 0.1s, background 0.1s;
}

.dash-opgave-check:hover[b-u8o951twcx] {
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
    background: rgba(76, 175, 80, 0.08);
}

.dash-opgave-body[b-u8o951twcx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-opgave-title[b-u8o951twcx] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.dash-opgave-sub[b-u8o951twcx] {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}

.dash-opgave-sub--overdue[b-u8o951twcx] {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.dash-opgave-add-wrap[b-u8o951twcx] {
    margin-left: auto;
}

.dash-opgave-add[b-u8o951twcx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    width: 260px;
}

/* ── Statusmøde-række (matcher henvisnings-kortet .pac) ── */
.dash-pending-statusmoede[b-u8o951twcx] {
    padding: 12px 20px;
    border-bottom: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dash-pending-statusmoede:last-child[b-u8o951twcx] {
    border-bottom: none;
}

.dash-pending-statusmoede:hover[b-u8o951twcx] {
    background: var(--mud-palette-action-hover-background);
}

.dash-pending-statusmoede-header[b-u8o951twcx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dash-pending-statusmoede-title[b-u8o951twcx] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
}

.dash-pending-statusmoede-meta[b-u8o951twcx] {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}



/* ── Mine sager (samme kolonner som Sager-listen) ── */
.dash-mine-sager-filter[b-u8o951twcx] {
    margin-left: auto;
}

/* ── Mine sager: filter (status / ansvarlig / kommi.) - samme mønster som Sager-listens
   mægler-filtre, men samlet i én knap i stedet for en kolonne pr. filter.
   Trigger-knappen bruger den kanoniske .mensen-filter-btn (utilities.css). ── */
.dash-mine-sager-filter-inner[b-u8o951twcx] {
    min-width: 260px;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.dash-mine-sager-filter-head[b-u8o951twcx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px 6px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 2px;
}

.dash-mine-sager-filter-title[b-u8o951twcx] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.dash-mine-sager-filter-clear[b-u8o951twcx] {
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-primary);
    cursor: pointer;
    padding: 0;
}

.dash-mine-sager-filter-search[b-u8o951twcx] {
    padding: 6px 10px 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 2px;
}

.dash-mine-sager-filter-input[b-u8o951twcx] {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-sm);
    background: var(--mud-palette-background);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-primary);
    outline: none;
    box-sizing: border-box;
}

.dash-mine-sager-filter-input:focus[b-u8o951twcx] {
    border-color: var(--mud-palette-primary);
}

.dash-mine-sager-filter-list[b-u8o951twcx] {
    padding-bottom: 4px;
}

.dash-mine-sager-filter-item[b-u8o951twcx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-primary);
    font-weight: 400;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.dash-mine-sager-filter-item:hover[b-u8o951twcx] {
    background: var(--mud-palette-action-disabled-background);
}

.dash-mine-sager-filter-item input[type="checkbox"][b-u8o951twcx] {
    cursor: pointer;
    accent-color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.dash-mine-sager-table-wrap[b-u8o951twcx] {
    overflow-x: auto;
}

.dash-mine-sager-table[b-u8o951twcx]  table {
    width: 100%;
}

.dash-mine-sager-table[b-u8o951twcx]  thead th {
    /* Skrift (font-size/weight/transform/spacing/color) kommer fra .crm-table (tables.css).
       Kun layout her. */
    padding: 8px 12px;
    white-space: nowrap;
}

.dash-mine-sager-table[b-u8o951twcx]  tbody td {
    padding: 8px 12px;
    vertical-align: middle;
}

.dash-mine-sager-table[b-u8o951twcx]  tbody tr {
    cursor: pointer;
}

.dash-sager-col-thumb[b-u8o951twcx] {
    width: 52px;
}

.dash-sager-thumb-img[b-u8o951twcx] {
    width: 44px;
    height: 34px;
    border-radius: var(--radius-sm, 6px);
    object-fit: cover;
    display: block;
}

/* ── Thumbnail hover popup (samme mønster som Sager-listen) ── */
/* Enlarged image lives in a MudTooltip (teleported out of the card's scroll container);
   this is just its surface. Show/hide + positioning are the tooltip's job. */
.dash-sager-thumb-popup[b-u8o951twcx] {
    background: var(--mud-palette-background);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    padding: 4px;
}

.dash-sager-thumb-popup-img[b-u8o951twcx] {
    width: 220px;
    height: 160px;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 2px);
    display: block;
}

/* ── Adresse: ikke i fed, samme vægt som Sager-listen ── */
.dash-sager-cell-address[b-u8o951twcx] {
    font-weight: 500;
}

.dash-sager-thumb[b-u8o951twcx] {
    width: 44px;
    height: 34px;
    border-radius: var(--radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-disabled);
    font-size: 16px;
}

.dash-sager-thumb--vurdering[b-u8o951twcx] { background: rgba(255, 152, 0, 0.08); color: var(--mud-palette-warning); }
.dash-sager-thumb--aktiv[b-u8o951twcx] { background: rgba(76, 175, 80, 0.08); color: var(--mud-palette-success); }
.dash-sager-thumb--tilsalg[b-u8o951twcx] { background: var(--color-brand-alpha-06, rgba(200, 16, 46, 0.06)); color: var(--mud-palette-primary); }

.dash-aktstat[b-u8o951twcx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--mud-typography-body1-size);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.dash-aktstat-dot[b-u8o951twcx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--mud-palette-text-disabled);
}

.dash-aktstat-dot--groen[b-u8o951twcx] { background: var(--mud-palette-success); }
.dash-aktstat-dot--gul[b-u8o951twcx] { background: var(--mud-palette-warning); }
.dash-aktstat-dot--roed[b-u8o951twcx] { background: var(--mud-palette-error); }
/* /Components/Pages/Dashboard/DashboardPerformanceView.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  PERFORMANCE VIEW - Scoped styles            ══ */
/* ══  Designsprog: matcher Dashboard Overblik     ══ */
/* ══════════════════════════════════════════════════ */

/* ── Sektion-kort (matcher dash-pending-card) ─────── */
.perf-section-card[b-nk0vyis27d] {
    border-radius: var(--radius-xl);
    background: var(--mud-palette-background);
    width: 100%;
    overflow: hidden;
}

.perf-section-card--full-height[b-nk0vyis27d] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Kort-header (matcher dash-card-header) ───────── */
.perf-card-header[b-nk0vyis27d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.perf-card-header__left[b-nk0vyis27d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Ikon-boks (matcher StatCard-mønster) ─────────── */
.perf-card-icon-box[b-nk0vyis27d] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--mud-palette-background);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.perf-card-icon-box[b-nk0vyis27d]  .mud-icon-root {
    color: var(--mud-palette-text-primary);
}

/* ── Periode-kontrol (Kvartal / Halvår / År) ──────── */
.perf-card-controls[b-nk0vyis27d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Periode-vælgeren (Kvartal/Halvår/År) bruger nu de delte .seg-control/.seg-item-klasser
   (utilities.css) — identisk med dashboard-tab-baren. Bespoke .perf-period-* er fjernet. */

/* ── År/sort inline picker ────────────────────────── */
.perf-inline-pick[b-nk0vyis27d] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.perf-inline-pick:hover[b-nk0vyis27d] {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-text-disabled);
}

/* Caret flipper 180° når menuen er åben (matcher pill-select-dropdownene) */
.perf-inline-pick--open .pill-select__caret[b-nk0vyis27d] {
    transform: rotate(180deg);
}

/* ── Team liste ───────────────────────────────────── */
.perf-team-list[b-nk0vyis27d] {
    flex: 1;
    padding: 12px 24px;
}

.perf-team-item[b-nk0vyis27d] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.perf-team-item:last-child[b-nk0vyis27d] {
    border-bottom: none;
}

.perf-team-avatar[b-nk0vyis27d] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-primary);
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.perf-team-info[b-nk0vyis27d] {
    flex: 1;
    min-width: 0;
}

.perf-team-empty[b-nk0vyis27d] {
    padding: 24px 0;
    display: flex;
    justify-content: center;
}

/* ── Paginering ───────────────────────────────────── */
.perf-team-pager[b-nk0vyis27d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 24px;
    border-top: 1px solid var(--mud-palette-divider);
}

.perf-page-btn[b-nk0vyis27d] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.perf-page-btn:hover:not(.perf-page-btn--active)[b-nk0vyis27d] {
    background: var(--mud-palette-action-disabled-background);
}

.perf-page-btn--active[b-nk0vyis27d] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-white);
    font-weight: 700;
}


/* ── Fuldskærm-tilstand ───────────────────────────── */
.perf-fullscreen[b-nk0vyis27d] {
    background: var(--mud-palette-background);
    height: 100vh;
    padding: 32px 48px;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Stat cards: fast højde */
.perf-fullscreen[b-nk0vyis27d]  .mud-grid:first-child {
    flex-shrink: 0;
}

/* Chart + team grid: fylder resten */
.perf-fullscreen[b-nk0vyis27d]  .mud-grid:last-child {
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

/* MudItems får eksplicit højde så height: 100% på kort virker */
.perf-fullscreen[b-nk0vyis27d]  .mud-grid:last-child > .mud-item {
    height: 100%;
}

/* ── Responsiv ────────────────────────────────────── */
@media (max-width: 599px) {
    .perf-card-header[b-nk0vyis27d] {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Kvartal/Halvår/År + year picker take the full width under the title instead of squeezing it. */
    .perf-card-controls[b-nk0vyis27d] {
        width: 100%;
        flex-wrap: wrap;
    }

    .perf-team-list[b-nk0vyis27d] {
        padding: 4px 16px;
    }

    .perf-team-pager[b-nk0vyis27d] {
        padding: 10px 16px;
    }
}
/* /Components/Pages/Dashboard/MarkedsIntelligens.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  MARKEDSINTELLIGENS - Scoped styles          ══ */
/* ══════════════════════════════════════════════════ */

/* ── Kort-wrapper ─────────────────────────────────── */
.mi-card[b-3g17hljbul] {
    border-radius: var(--radius-xl);
    background: var(--mud-palette-background);
}

/* ── Kort-header ──────────────────────────────────── */
.mi-card-header[b-3g17hljbul] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    background: var(--mud-palette-background);
    gap: 16px;
    flex-wrap: wrap;
}

.mi-card-header__left[b-3g17hljbul] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mi-card-header__right[b-3g17hljbul] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Lokationssøgning / autocomplete ──────────────── */
.mi-location-autocomplete[b-3g17hljbul] {
    position: relative;
}

.mi-location-input[b-3g17hljbul] {
    min-width: 220px;
}

.mi-location-backdrop[b-3g17hljbul] {
    position: fixed;
    inset: 0;
    z-index: 500;
}

.mi-location-dropdown[b-3g17hljbul] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 280px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 600;
    max-height: 320px;
    overflow-y: auto;
}

.mi-location-group[b-3g17hljbul] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mi-location-group:last-child[b-3g17hljbul] {
    border-bottom: none;
}

.mi-location-group-label[b-3g17hljbul] {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.mi-location-item[b-3g17hljbul] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
    gap: 12px;
}

.mi-location-item:hover[b-3g17hljbul] {
    background: var(--mud-palette-action-hover);
}

.mi-location-item-name[b-3g17hljbul] {
    color: var(--mud-palette-text-primary);
}

.mi-location-item-count[b-3g17hljbul] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ── Ikon-boks (matcher StatCard / PerformanceView) ── */
.mi-card-icon-box[b-3g17hljbul] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--mud-palette-background);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Periode-label over gridet ────────────────────── */
.mi-period-label[b-3g17hljbul] {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 8px;
}

/* ── Kolonne-indhold ──────────────────────────────── */
.mi-name-row[b-3g17hljbul] {
    padding: 4px 0;
}

.mi-name-text[b-3g17hljbul] {
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mi-num[b-3g17hljbul] {
    font-variant-numeric: tabular-nums;
}

.mi-num--bold[b-3g17hljbul] {
    font-weight: 600;
}

/* ── Egen butik-highlight ─────────────────────────── */
.mi-grid-wrap[b-3g17hljbul]  .mi-row-own td {
    background-color: var(--color-brand-alpha-06);
    border-left: 3px solid var(--mud-palette-primary);
}

/* ── Tabel-celle padding ──────────────────────────── */
.mi-grid-wrap[b-3g17hljbul]  td {
    vertical-align: middle;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ── Print-only header ────────────────────────────── */
.mi-print-only[b-3g17hljbul] {
    display: none;
}

.mi-print-header[b-3g17hljbul] {
    padding: 0 24px 16px;
}

/* ── Print-preparation: excluded rows dimmed in screen view ── */
.mi-row-print-excluded td[b-3g17hljbul] {
    opacity: 0.3;
}

.mi-print-check-col[b-3g17hljbul] {
    width: 36px;
    padding-left: 8px !important;
    padding-right: 0 !important;
}

/* ── Mægler-logoer: fast boks, centreret, aldrig beskåret ── */
.mi-logo-img[b-3g17hljbul] {
    width: 72px;
    height: 40px;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
}

/* ── Print header layout ── */
.mi-print-header-top[b-3g17hljbul] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mi-print-logo[b-3g17hljbul] {
    height: 32px;
    width: auto;
}

.mi-print-header-meta[b-3g17hljbul] {
    text-align: right;
}

.mi-print-date[b-3g17hljbul] {
    font-size: 11px;
    color: #666;
}

.mi-print-divider[b-3g17hljbul] {
    border-top: 2px solid #e0001a;
    margin-bottom: 10px;
}

.mi-print-params[b-3g17hljbul] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    font-size: 11px;
    margin-bottom: 6px;
    /* Match the grey of the date/period lines so the whole print header reads as one
       muted block (labels + values included, since <strong> inherits color). */
    color: #666;
}

.mi-print-period[b-3g17hljbul] {
    font-size: 10px;
    color: #666;
    margin-bottom: 8px;
}

/* ── Responsiv ────────────────────────────────────── */
@media (max-width: 599px) {
    .mi-card-header[b-3g17hljbul] {
        padding: 14px 16px;
    }
}

/* ── Udeladt-label (print-only, vist under mæglernavn) ─ */
.mi-excluded-label[b-3g17hljbul] {
    font-size: 10px;
    font-style: italic;
    color: #999;
    letter-spacing: 0.02em;
}

/* ── Print ────────────────────────────────────────── */
/* @page og layout-shell-skjulning er i utilities.css (global).
   Her: komponent-specifikke print-regler. */
@media print {
    /* Skjul screen-header (erstattet af mi-print-header) */
    .mi-card-header[b-3g17hljbul] { display: none !important; }

    .mi-no-print[b-3g17hljbul]    { display: none !important; }
    .mi-print-only[b-3g17hljbul]  { display: block; }

    /* Periodeoverskrift over tabel skjules (gentager print-headeren) */
    .mi-period-label[b-3g17hljbul] { display: none !important; }

    /* Fravalgte rækker skjules helt fra printet */
    .mi-row-print-excluded[b-3g17hljbul] { display: none !important; }

    /* Logoer: kompakte, fixed størrelse, ingen placeholder-ikon */
    .mi-logo-img[b-3g17hljbul] {
        width: 30px !important;
        height: 22px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }
    .mi-logo-placeholder[b-3g17hljbul] { display: none !important; }

    /* Fjern ekstra sidepadding på print-header — al margin styres af mi-print-target */
    .mi-print-header[b-3g17hljbul]        { padding-left: 0 !important; padding-right: 0 !important; }

    /* Ensartet skriftstørrelse overalt på printet */
    .mi-print-date[b-3g17hljbul],
    .mi-print-params[b-3g17hljbul],
    .mi-print-params *[b-3g17hljbul],
    .mi-print-period[b-3g17hljbul]        { font-size: 9pt !important; }

    /* Tabel — kompakt, pænt, passer A4 stående */
    .mi-grid-wrap[b-3g17hljbul]  table {
        font-size: 9pt;
        width: 100%;
        border-collapse: collapse;
    }

    .mi-grid-wrap[b-3g17hljbul]  thead tr {
        border-bottom: 2px solid #222;
    }

    .mi-grid-wrap[b-3g17hljbul]  th {
        font-size: 9pt;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #444;
        padding: 5px 8px !important;
        white-space: nowrap;
    }

    .mi-grid-wrap[b-3g17hljbul]  td {
        font-size: 9pt !important;
        padding: 6px 8px !important;
        vertical-align: middle !important;
        border-bottom: 1px solid #eee;
    }

    /* Skjul "+0 projektsalg" og "anmeldelser" undertekster */
    .mi-grid-wrap[b-3g17hljbul]  .mud-typography-caption { display: none !important; }

    /* Navn-kolonne: fremhæv butiksnavn */
    .mi-name-text[b-3g17hljbul] { font-weight: 600 !important; }

    /* Sorter-pilesymboler og highlight fjernes i print */
    .leads-sort-icon[b-3g17hljbul] { display: none !important; }

    /* Rækkebegrænsning sker via C# (maks 10 rækker) — ingen CSS max-height */
    .mi-grid-wrap[b-3g17hljbul] { overflow: visible !important; height: auto !important; }

    .mi-card[b-3g17hljbul] { box-shadow: none !important; border: none !important; }
}
/* /Components/Pages/Dashboard/Performance.razor.rz.scp.css */
.perf-route-page[b-5pezubomk1] {
    min-height: 100vh;
    box-sizing: border-box;
}
/* /Components/Pages/Diagnostik/DevData.razor.rz.scp.css */
.devdata-form[b-nmbswclmfr] {
    padding: 16px;
}

.devdata-rows[b-nmbswclmfr] {
    max-height: 640px;
    overflow-y: auto;
}

.devdata-row[b-nmbswclmfr] {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: transparent;
    cursor: pointer;
}

.devdata-row:hover[b-nmbswclmfr] {
    background-color: var(--mud-palette-action-default-hover);
}

.devdata-row--active[b-nmbswclmfr] {
    background-color: var(--mud-palette-primary-hover);
}

.devdata-payload[b-nmbswclmfr] {
    max-height: 640px;
    overflow: auto;
    margin: 0;
    padding: 16px;
    font-family: var(--mud-typography-caption-family, monospace);
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
}

.devdata-endpoints[b-nmbswclmfr] {
    max-height: 72vh;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.devdata-endpoint-tag[b-nmbswclmfr] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-divider);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.devdata-endpoint-tag:first-child[b-nmbswclmfr] {
    border-top: none;
}

.devdata-endpoint-count[b-nmbswclmfr] {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.devdata-endpoint[b-nmbswclmfr] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

.devdata-endpoint:last-child[b-nmbswclmfr] {
    border-bottom: none;
}

.devdata-endpoint:hover[b-nmbswclmfr] {
    background-color: var(--mud-palette-action-default-hover);
}

.devdata-endpoint--active[b-nmbswclmfr] {
    background-color: var(--mud-palette-primary-hover);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.devdata-endpoint-path[b-nmbswclmfr] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mud-typography-caption-family, monospace);
}


.devdata-endpoint-flag[b-nmbswclmfr] {
    display: inline-flex;
    color: var(--mud-palette-warning);
}

.devdata-method[b-nmbswclmfr] {
    flex: 0 0 56px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 2px 0;
    border-radius: 4px;
    color: var(--mud-palette-white);
    background: var(--mud-palette-grey-default);
}

.devdata-method--get[b-nmbswclmfr]    { background: var(--mud-palette-info); }
.devdata-method--post[b-nmbswclmfr]   { background: var(--mud-palette-success); }
.devdata-method--put[b-nmbswclmfr]    { background: var(--mud-palette-warning); }
.devdata-method--delete[b-nmbswclmfr] { background: var(--mud-palette-error); }

/* MudBlazor renders these elements, so the scope attribute is on our wrapper, not on them. */
[b-nmbswclmfr] .devdata-toolbar-btn {
    height: 57px;
    transform: translateY(-9px);
}

[b-nmbswclmfr] .devdata-body textarea {
    min-height: 52vh;
    font-family: var(--mud-typography-caption-family, monospace);
    font-size: 13px;
    line-height: 1.5;
}

.devdata-response[b-nmbswclmfr] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow: hidden;
}

.devdata-response-header[b-nmbswclmfr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.devdata-response .devdata-payload[b-nmbswclmfr] {
    max-height: 60vh;
}
/* /Components/Pages/Diagnostik/SeedData.razor.rz.scp.css */
.seed-form[b-6jx6uxlq8q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.seed-form[b-6jx6uxlq8q]  .mud-select,
.seed-form[b-6jx6uxlq8q]  .mud-input-control {
    min-width: 160px;
}

.seed-progress[b-6jx6uxlq8q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px 16px;
}

.seed-log[b-6jx6uxlq8q] {
    max-height: 360px;
    overflow-y: auto;
    padding: 8px 16px 16px;
}

.seed-log-line[b-6jx6uxlq8q] {
    display: block;
    font-family: var(--mud-typography-caption-family, monospace);
    white-space: pre-wrap;
}
/* /Components/Pages/Henvisninger/Henvisninger.razor.rz.scp.css */
.henv-page[b-o78fbr5vb6] {
    padding: 0 0 48px;
}

.henv-header-row[b-o78fbr5vb6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.henv-toolbar-right[b-o78fbr5vb6] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
}

.henv-toolbar-right[b-o78fbr5vb6]  .mud-button-root {
    text-transform: none;
}

/* Status-pills (Afventer handling / Accepterede) - quick filters, not tabs */
.henv-status-pill[b-o78fbr5vb6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    height: 36px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-background);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.henv-status-pill:hover[b-o78fbr5vb6] {
    border-color: var(--mud-palette-text-disabled);
}

.henv-status-pill--active.henv-status-pill--warning[b-o78fbr5vb6] {
    background: var(--color-warning-bg, rgba(255, 152, 0, 0.12));
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-darken, #e65100);
}

.henv-status-pill--active.henv-status-pill--success[b-o78fbr5vb6] {
    background: var(--color-success-bg, rgba(76, 175, 80, 0.12));
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success-darken, #2e7d32);
}

/* Scope-dropdown (Mine henvisninger / Hele forretningen) */
.henv-scope-wrap[b-o78fbr5vb6] {
    position: relative;
    flex-shrink: 0;
}

.henv-scope-btn[b-o78fbr5vb6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    height: 36px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-background);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition-fast);
}

.henv-scope-btn:hover[b-o78fbr5vb6] {
    border-color: var(--mud-palette-text-disabled);
}

.henv-scope-btn[b-o78fbr5vb6]  .mud-icon-root {
    font-size: 16px !important;
}

/* Tabelkort */
[b-o78fbr5vb6] .henv-card { border-radius: var(--radius-lg); overflow: hidden; }
[b-o78fbr5vb6] .henv-card thead tr,
[b-o78fbr5vb6] .henv-card thead th {
    background: transparent !important;
}
[b-o78fbr5vb6] .henv-table { width: 100%; }

/* Skrift kommer fra .crm-table (tables.css). Kun layout her — samme mål som
   .bkpi-table på Performance-fanen, så de to tabeller flugter. !important er
   nødvendigt: .mud-simple-table i mudblazor-overrides.css sætter selv padding
   med !important, og .bkpi-table slipper kun udenom ved at være en rå <table>. */
[b-o78fbr5vb6] .henv-table thead th {
    padding: 8px 12px !important;
}

/* No cell wraps to a second line; long values ellipsize. Safe here — the henv tables
   have no in-cell dropdowns to clip (the scope filter lives in the toolbar). */
[b-o78fbr5vb6] .henv-table td {
    padding: 10px 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

/* Rækker og cellestile */
[b-o78fbr5vb6] .henv-row { cursor: pointer; }

/* Legacy interne henvisninger - read-only, ikke klikbare */
[b-o78fbr5vb6] .henv-row--legacy { cursor: default; }

/* Ingen venstre padding: sektionsoverskriften er en overskrift for siden, ikke
   tabelindhold, så den flugter med sidens titel ("Henvisninger") i stedet for med
   NAVN-kolonnen, der er rykket ind af tabellens celle-padding. */
.henv-legacy-header[b-o78fbr5vb6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 0;
}

.henv-legacy-badge[b-o78fbr5vb6] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: var(--mud-typography-overline-size, 10px);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-disabled-background);
    vertical-align: middle;
}

/* Footer og tom tilstand */
/* Ingen streg over footeren: sidste række har bevidst ingen border-bottom (crm-table), så
   en linje her læste som en tungere afslutning end tabellens egne skillelinjer — den brugte
   oven i købet et andet token (lines-default er mørkere end divider). */
.henv-table-footer[b-o78fbr5vb6] {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.henv-empty[b-o78fbr5vb6] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; text-align: center; }

/* Responsiv */
@media (max-width: 599px) {
    /* Grid order on phones: butik and scope first, then the two status chips as a pair. */
    .henv-toolbar-right[b-o78fbr5vb6]  .pill-select { order: -2; }
    .henv-scope-wrap[b-o78fbr5vb6] { order: -1; }

    .henv-page[b-o78fbr5vb6] {
        padding: 0 0 32px;
    }

    .henv-header-row[b-o78fbr5vb6] {
        gap: 10px;
    }

    .henv-toolbar-right[b-o78fbr5vb6] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Cards (.crm-table-cards, tables.css): the one-line ellipsis rule above only makes sense
       in a fixed column, so values wrap here. */
    [b-o78fbr5vb6] .henv-table td {
        white-space: normal;
        overflow: visible;
        max-width: none;
    }

    .henv-legacy-badge[b-o78fbr5vb6] {
        margin-left: 6px;
    }
}
/* /Components/Pages/Indstillinger/ActivityTemplateMatrix.razor.rz.scp.css */
.atm-card[b-izqsww4vc1] {
    overflow: hidden;
}

.atm-header[b-izqsww4vc1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.atm-legend[b-izqsww4vc1] {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--mud-typography-caption-size);
    white-space: nowrap;
}

.atm-legend span[b-izqsww4vc1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.atm-dot[b-izqsww4vc1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
}

.atm-dot--override[b-izqsww4vc1] {
    background: var(--mud-palette-warning);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}

.atm-scroll[b-izqsww4vc1] {
    width: 100%;
    overflow-x: auto;
    scrollbar-color: var(--mud-palette-divider) transparent;
    scrollbar-width: thin;
}

.atm-table[b-izqsww4vc1] {
    width: 100%;
    min-width: 1120px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--mud-palette-text-primary);
}

.atm-col-activity[b-izqsww4vc1] {
    width: 18%;
}

.atm-col-event[b-izqsww4vc1] {
    width: 11.333%;
}

.atm-table th[b-izqsww4vc1],
.atm-table td[b-izqsww4vc1] {
    box-sizing: border-box;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Header-skrift (font-size/weight/transform/spacing/color) kommer fra .crm-table (tables.css).
   Kun layout her (widths, sticky, dividers). */

.atm-activity-heading[b-izqsww4vc1] {
    position: sticky;
    left: 0;
    z-index: 3;
    padding: 0 20px;
    background: var(--mud-palette-surface);
    text-align: left;
    vertical-align: middle;
}

.atm-channel-heading[b-izqsww4vc1] {
    height: 44px;
    border-left: 2px solid;
    text-align: center;
}

/* MudIcon er en barn-komponent → størr via font-size gennem ::deep (jf. design.md).
   vertical-align: middle på både ikon og label, så de flugter (MudIcon-svg justerer
   ellers anderledes end det gamle <i>). */
.atm-channel-heading[b-izqsww4vc1]  .atm-channel-icon {
    margin-right: 7px;
    font-size: 15px;
    vertical-align: middle;
}

.atm-channel-heading span[b-izqsww4vc1] {
    vertical-align: middle;
}

/* Dæmpede kanalfarver: behold rød (E-mail) / blå (SMS), men afdæmpet — svag tint,
   blødere divider, og desaturerede ikon/label-farver (blandet mod tekst-grå). */
.atm-channel-heading--email[b-izqsww4vc1] {
    background: color-mix(in srgb, var(--mud-palette-error) 5%, var(--mud-palette-surface));
    border-left-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
}

.atm-channel-heading--sms[b-izqsww4vc1] {
    background: color-mix(in srgb, var(--mud-palette-info) 5%, var(--mud-palette-surface));
    border-left-color: color-mix(in srgb, var(--mud-palette-info) 35%, transparent);
}

.atm-channel-heading--email span[b-izqsww4vc1],
.atm-channel-heading--email[b-izqsww4vc1]  .atm-channel-icon {
    color: color-mix(in srgb, var(--mud-palette-error) 60%, var(--mud-palette-text-secondary));
}

.atm-channel-heading--sms span[b-izqsww4vc1],
.atm-channel-heading--sms[b-izqsww4vc1]  .atm-channel-icon {
    color: color-mix(in srgb, var(--mud-palette-info) 60%, var(--mud-palette-text-secondary));
}

.atm-trigger-row th[b-izqsww4vc1] {
    height: 36px;
    text-align: center;
}

.atm-event-cell[b-izqsww4vc1] {
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-divider) 70%, transparent);
}

/* Dæmpet kanal-farvet gruppe-divider mellem kolonnerne. */
.atm-event-cell--first.atm-event-cell--email[b-izqsww4vc1] {
    border-left: 2px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
}

.atm-event-cell--first.atm-event-cell--sms[b-izqsww4vc1] {
    border-left: 2px solid color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
}

.atm-table tbody tr:last-child th[b-izqsww4vc1],
.atm-table tbody tr:last-child td[b-izqsww4vc1] {
    border-bottom: 0;
}

.atm-activity-name[b-izqsww4vc1] {
    position: sticky;
    left: 0;
    z-index: 2;
    height: 58px;
    padding: 11px 20px;
    background: var(--mud-palette-surface);
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
}

.atm-table tbody tr:hover .atm-activity-name[b-izqsww4vc1] {
    background: var(--mud-palette-background-grey);
}

.atm-table tbody tr:hover .atm-event-cell[b-izqsww4vc1] {
    filter: brightness(.985);
}

.atm-template-button[b-izqsww4vc1] {
    width: 100%;
    min-height: 58px;
    padding: 7px 6px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 4px;
    font: inherit;
}

.atm-template-button:hover[b-izqsww4vc1] {
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
}

.atm-template-button:focus-visible[b-izqsww4vc1] {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -3px;
}

.atm-template-button--override[b-izqsww4vc1] {
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
}

.atm-empty[b-izqsww4vc1] {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
    font-size: .8rem;
}

@media (max-width: 700px) {
    .atm-header[b-izqsww4vc1] {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .atm-table[b-izqsww4vc1] {
        min-width: 980px;
    }

    .atm-activity-heading[b-izqsww4vc1],
    .atm-activity-name[b-izqsww4vc1] {
        padding-left: 14px;
        padding-right: 14px;
    }
}
/* /Components/Pages/Indstillinger/Indstillinger.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  INDSTILLINGER - Scoped styles               ══ */
/* ══  Sidebar-nav + indholdspanel layout          ══ */
/* ══════════════════════════════════════════════════ */

/* ── Tab row ── */
.indst-tab-row[b-cxad3ck5fv] {
    display: flex;
    align-items: center;
}

.indst-tab-divider[b-cxad3ck5fv] {
    width: 1px;
    height: 20px;
    background: var(--mud-palette-divider);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Section panels ── */
.indst-panel-header[b-cxad3ck5fv] {
    display: flex;
    align-items: center;
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.indst-panel-header--with-actions[b-cxad3ck5fv] {
    justify-content: space-between;
}

.indst-panel-header--flush[b-cxad3ck5fv] {
    padding-left: 0;
    padding-right: 0;
}

.indst-icon-box[b-cxad3ck5fv] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--mud-palette-background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-primary);
    flex-shrink: 0;
}

[b-cxad3ck5fv] .indst-icon-box .mud-icon-root {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.indst-panel-title[b-cxad3ck5fv] {
    font-weight: 700;
    line-height: 1.3;
    display: block;
}

/* ── Field rows ── */
.indst-field-row[b-cxad3ck5fv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 24px;
    gap: 24px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.indst-field-row--top[b-cxad3ck5fv] {
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
}

.indst-field-row--last[b-cxad3ck5fv] {
    border-bottom: none;
}

.indst-field-label[b-cxad3ck5fv] {
    font-weight: 600;
}

.indst-chips-wrap[b-cxad3ck5fv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

/* ── Signature ── */
.indst-sig-item[b-cxad3ck5fv] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.indst-sig-item:last-child[b-cxad3ck5fv] {
    border-bottom: none;
}

[b-cxad3ck5fv] .indst-sig-frame {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.indst-sig-iframe[b-cxad3ck5fv] { width: 100%; border: none; display: block; }
.indst-col-action[b-cxad3ck5fv] { width: 100px; }

/* ── Settings controls ── */
.indst-setting-control[b-cxad3ck5fv] {
    flex-shrink: 0;
    width: 200px;
}

[b-cxad3ck5fv] .indst-setting-control .mud-input input,
[b-cxad3ck5fv] .indst-setting-control .mud-select-input {
    font-size: var(--mud-typography-body2-size);
}

/* ── Panel footer ── */
.indst-panel-footer[b-cxad3ck5fv] {
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
    border-radius: 0 0 16px 16px;
}

/* ── Template table ── */
.indst-actions-col[b-cxad3ck5fv] {
    text-align: right;
    white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 599px) {
    .indst-tab-row[b-cxad3ck5fv] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .indst-panel-header[b-cxad3ck5fv] {
        padding: 16px 16px 14px;
    }

    .indst-field-row[b-cxad3ck5fv] {
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .indst-panel-footer[b-cxad3ck5fv] {
        padding: 12px 16px;
    }

    .indst-setting-control[b-cxad3ck5fv] {
        width: 100%;
    }
}

/* Forretningsområde: squarer map beside the postal-code list. The map height is
   driven into AreaMap via the inherited --area-map-height custom property; clamp
   keeps it close to square relative to its (roughly half-width) column. */
.forretning-map-wrap[b-cxad3ck5fv] {
    --area-map-height: clamp(360px, 34vw, 520px);
}

.forretning-postnumre[b-cxad3ck5fv] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    max-height: clamp(360px, 34vw, 520px);
    overflow-y: auto;
    padding-right: 4px;
}

.forretning-postnr[b-cxad3ck5fv] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Leads/Leads.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  LEADS - Scoped styles                       ══ */
/* ══  Kun forælder-regler; resten er fordelt til  ══ */
/* ══  LeadsFilterBar/-Panel/-Table .razor.css     ══ */
/* ══  ved dekomponeringen.                        ══ */
/* ══════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────── */
.leads-page[b-0t57t6z9cx] {
    padding: 0 0 48px;
}

/* ── Card wrapper ─────────────────────────────────── */
.leads-card[b-0t57t6z9cx] {
    background: transparent;
    overflow: visible;
}

/* NB: ::deep-reglerne nedenfor SKAL blive her - ankret på .leads-card
   (forælder-element) virker de på tværs af komponentgrænsen og dækker
   både forælderens skeleton-tabel og LeadsTables indhold. */
.leads-card[b-0t57t6z9cx]  thead tr,
.leads-card[b-0t57t6z9cx]  thead th {
    background: transparent !important;
}


/* MudSimpleTable sets overflow-y: auto on its container, which clips
   absolutely-positioned dropdown panels. Override here so the agent
   dropdown can extend beyond the table boundary. */
.leads-card[b-0t57t6z9cx]  .mud-table-container {
    overflow: visible;
}

/* ── Tabel ────────────────────────────────────────── */
/* NB: Formodentlig død regel - klassen sidder på MudSimpleTable
   (komponent-renderet, får aldrig scope-attributten). Bevaret 1:1;
   flagget i docs/frontend-cleanup-plan.md. Bruges af både skeleton
   (forælder) og LeadsTable. */
.leads-table[b-0t57t6z9cx] {
    width: 100%;
    font-size: var(--mud-typography-body1-size);
    font-weight: 400;
}

/* ── Responsiv ────────────────────────────────────── */
@media (max-width: 599px) {
    .leads-page[b-0t57t6z9cx] {
        padding: 0 0 32px;
    }
}
/* /Components/Pages/Leads/LeadsFilterBar.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  LEADS FILTER-BAR - Scoped styles            ══ */
/* ══  Header-række: tabs, søg, filtre, scope      ══ */
/* ══  (flyttet fra Leads.razor.css v. dekomp.)    ══ */
/* ══════════════════════════════════════════════════ */

/* ── Header-række ─────────────────────────────────── */
.leads-header-row[b-5zix4hy3md] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.leads-toolbar-right[b-5zix4hy3md] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
}

.leads-toolbar-right[b-5zix4hy3md]  .mud-button-root {
    text-transform: none;
}

@media (max-width: 599px) {
    .leads-toolbar-right[b-5zix4hy3md] {
        flex-wrap: wrap;
    }

    /* The Filtre button wraps to the first slot of the row, so a right-anchored panel
       (280px) ends 160px off-screen; anchor it to the button's left edge instead. */
    .leads-filter-dd__panel[b-5zix4hy3md] {
        left: 0;
        right: auto;
    }

    /* Same for the scope dropdown ("Alle leads"): its button is the row's first item too. */
    .leads-scope-wrap .dropdown-panel[b-5zix4hy3md] {
        left: 0;
        right: auto;
    }
}

/* ── Søgefelt (flex-baseret: ingen koordineringsfejl) */
.leads-search-wrap[b-5zix4hy3md] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    height: 36px;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--mud-palette-background);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: flex-basis 220ms ease, opacity 160ms ease, padding 220ms ease, border-color 160ms ease;
}

.leads-search-wrap--open[b-5zix4hy3md] {
    flex: 1 0 260px;
    padding: 0 12px;
    border-color: var(--mud-palette-divider);
    opacity: 1;
    pointer-events: auto;
}

.leads-search-wrap--open:focus-within[b-5zix4hy3md] {
    border-color: var(--mud-palette-text-disabled);
}

/* ── Search-open: kollaps Filtre + scope ud af flow ── */
.leads-toolbar-right .mensen-filter-btn:not(.leads-search-toggle)[b-5zix4hy3md],
.leads-toolbar-right .leads-scope-wrap[b-5zix4hy3md] {
    flex-shrink: 0;
    transition: flex-basis 220ms ease, opacity 160ms ease,
                padding 220ms ease, border-width 160ms ease, min-height 220ms ease;
}

.leads-toolbar-right--search-open .mensen-filter-btn:not(.leads-search-toggle)[b-5zix4hy3md] {
    flex: 0 0 0 !important;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.leads-toolbar-right--search-open .leads-scope-wrap[b-5zix4hy3md] {
    flex: 0 0 0 !important;
    width: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── Søg/X toggle-knap ────────────────────────────── */
.leads-search-toggle[b-5zix4hy3md] {
    flex-shrink: 0;
    order: 10;
}

.leads-search-toggle--open[b-5zix4hy3md] {
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
}

.leads-search-icon[b-5zix4hy3md] {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
    font-size: 16px !important;
}

.leads-search-input[b-5zix4hy3md] {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-primary);
    width: 100%;
}

.leads-search-input[b-5zix4hy3md]::placeholder {
    color: var(--mud-palette-text-disabled);
}

/* ── Filtre-dropdown ─────────────────────────────── */
.leads-filter-dd[b-5zix4hy3md] {
    position: relative;
}

/* Surface comes from .dropdown-surface; only layout lives here. Wider than
   .dropdown-panel because this holds form fields, not a list of options.
   overflow must stay visible so the date field's own popover isn't clipped
   (.dropdown-surface sets hidden). */
.leads-filter-dd__panel[b-5zix4hy3md] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    width: 280px;
    max-width: calc(100vw - 32px);
    overflow: visible;
    animation: dropdown-in 0.12s ease-out;
}

.leads-filter-dd__head[b-5zix4hy3md] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 9px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.leads-filter-dd__title[b-5zix4hy3md] {
    font-size: var(--mud-typography-overline-size);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.leads-filter-dd__clear[b-5zix4hy3md] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

/* ── Scope dropdown ───────────────────────────────── */
.leads-scope-wrap[b-5zix4hy3md] {
    position: relative;
}

.leads-scope-btn[b-5zix4hy3md] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    height: 36px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-background);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition-fast);
}

.leads-scope-btn:hover[b-5zix4hy3md] {
    border-color: var(--mud-palette-text-disabled);
}

/* ── Filter-knap ─────────────────────────────────── */
/* The base rule, :hover and the icon size are global in utilities.css — no local copy, or
   fixing the global rule silently does nothing on Leads. --active is gone with it: the trigger
   uses --set for "filters are set" and pill-select__btn--open for the open state. */

/* --set = "filters ARE set", unlike the open/closed toggle. Muted grey rather than brand red,
   so the marker doesn't shout. Both move to utilities.css with the shared FilterDropdown. */
.mensen-filter-btn--set[b-5zix4hy3md] {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-text-disabled);
}

.filter-count[b-5zix4hy3md] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    line-height: 1.4;
}

/* /Components/Pages/Leads/LeadsFilterPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  LEADS FILTER-PANEL - Scoped styles          ══ */
/* ══  Type-select + dato-popover                  ══ */
/* ══  (flyttet fra Leads.razor.css v. dekomp.)    ══ */
/* ══════════════════════════════════════════════════ */

/* ── Filter-panel ────────────────────────────────── */
/* Sits inside the Filtre popover, so it drops the global row chrome (padding 12px 24px
   + border-bottom from utilities.css) and stacks the two fields full-width instead. */
.mensen-card-filters.leads-filter-grid[b-5xz6aupoz5] {
    padding: 14px 16px 16px;
    border-bottom: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.mensen-card-filters.leads-filter-grid > *[b-5xz6aupoz5] {
    min-width: 0;
}

/* Adornment icons (Type caret, calendar) are markers, not controls. MudBlazor renders them as
   icon buttons at 1.422rem with a hover disc, which reads as a second control inside the field.
   Clicks stay enabled — Clearable renders its X in the same adornment.
   14px is the canonical caret size (docs/design/icons.md); no token for it on devel yet. */
.leads-filter-grid[b-5xz6aupoz5]  .mud-input-adornment .mud-icon-root {
    font-size: 14px !important;
    color: var(--mud-palette-text-secondary) !important;
}

/* MudBlazor's own 3px 9px is what kept the glyph off the field border; keep horizontal
   breathing room but drop the vertical box now the icon is 14px instead of 23px. */
.leads-filter-grid[b-5xz6aupoz5]  .mud-input-adornment .mud-icon-button {
    padding: 0 6px;
}

.leads-filter-grid[b-5xz6aupoz5]  .mud-input-adornment .mud-icon-button:hover {
    background-color: transparent;
}

/* ── Dato-popover ─────────────────────────────────── */
.mensen-date-popover-wrap[b-5xz6aupoz5] {
    position: relative;
}

/* Label left, calendar icon right — same axis as the Type select's caret above it. Extra
   right padding because the Phosphor calendar fills its box more than a caret does, so an
   equal 14px reads as tighter. */
.leads-filter-grid .mensen-date-toggle-btn[b-5xz6aupoz5] {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    padding-right: 18px;
}

.mensen-date-toggle-label[b-5xz6aupoz5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mensen-date-toggle-btn[b-5xz6aupoz5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 40px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.mensen-date-toggle-btn:hover[b-5xz6aupoz5] {
    border-color: var(--mud-palette-text-disabled);
    color: var(--mud-palette-text-primary);
}

/* "A date is set" is a state, not a warning — a slightly darker field, never brand red.
   Same language as the Filtre trigger's --set and the Type select next to it. */
.mensen-date-toggle-btn--active[b-5xz6aupoz5] {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-text-disabled);
    color: var(--mud-palette-text-primary);
}

.mensen-date-toggle-btn[b-5xz6aupoz5]  .mud-icon-root {
    font-size: 16px !important;
}

.mensen-date-popover-overlay[b-5xz6aupoz5] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.mensen-date-popover[b-5xz6aupoz5] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 230px;
}

.mensen-date-popover-reset[b-5xz6aupoz5] {
    appearance: none;
    background: none;
    border: none;
    padding: 2px 0 0;
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    color: var(--mud-palette-text-disabled);
    cursor: pointer;
    text-align: right;
    align-self: flex-end;
    transition: color var(--transition-fast);
}

.mensen-date-popover-reset:hover[b-5xz6aupoz5] {
    color: var(--mud-palette-primary);
}
/* /Components/Pages/Leads/LeadsTable.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  LEADS TABEL - Scoped styles                 ══ */
/* ══  Rækker, badges, note-edit, agent-dropdown,  ══ */
/* ══  footer og tom tilstand                      ══ */
/* ══  (flyttet fra Leads.razor.css v. dekomp.)    ══ */
/* ══════════════════════════════════════════════════ */

.cursor-pointer[b-hnobygpsva] {
    cursor: pointer;
}

/* ── Vandret scroll som Aktiviteter Liste ──
   Wrapperen er en almindelig blok-div, låst til forældrebredden (max-width:100%),
   og selve tabellen får en min-bredde. Bliver visningen smallere end min-bredden,
   overløber tabellen wrapperen — og det er WRAPPEREN der scroller vandret, ikke
   siden. Kolonnerne beholder deres fulde bredde i stedet for at proppe/afkorte
   sig sammen. Samme mønster som .aftaler-table-wrap på Aktiviteter Liste. */
.leads-table-wrap[b-hnobygpsva] {
    overflow-x: auto;
    max-width: 100%;
}

.leads-table-wrap[b-hnobygpsva]  .leads-table,
.leads-table-wrap[b-hnobygpsva]  table {
    min-width: 1180px;
    /* Headers er tvunget transparente (Leads.razor.css) og læner sig op ad en hvid
       baggrund bagved. Mal hvid direkte på selve tabellen, som er 1180px bred, så
       den sidste kolonne (Modtaget) får samme baggrund som resten når man scroller. */
    background-color: rgb(255, 255, 255);
}

/* ── Type celle ───────────────────────────────────── */
.leads-col-type[b-hnobygpsva] { width: 100px; }

/* ── Kilde celle ──────────────────────────────────── */
.leads-col-kilde[b-hnobygpsva] { max-width: 200px; }

.leads-kilde[b-hnobygpsva] {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: baseline;
    min-width: 0;
    max-width: 100%;
}

.leads-kilde-prefix[b-hnobygpsva] { font-weight: 700; color: var(--mud-palette-text-primary); flex-shrink: 0; }

.leads-kilde-value[b-hnobygpsva] {
    color: var(--mud-palette-text-secondary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Only the colour is local — size/weight come from .crm-table (docs/design/tables.md). */
.leads-type-badge[b-hnobygpsva] {
    display: inline-block;
    max-width: 100%;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.leads-type-badge--salg[b-hnobygpsva]    { color: var(--mud-palette-primary); }
.leads-type-badge--koeb[b-hnobygpsva]    { color: var(--mud-palette-success-darken); }
.leads-type-badge--erhverv[b-hnobygpsva] { color: var(--mud-palette-warning-darken); }
.leads-type-badge--udlejning[b-hnobygpsva] { color: var(--mud-palette-info-darken); }
.leads-type-badge--fremvisning[b-hnobygpsva]            { color: var(--mud-palette-primary); }
.leads-type-badge--salgsvurdering[b-hnobygpsva]         { color: var(--mud-palette-info-darken); }
.leads-type-badge--kontakt[b-hnobygpsva]                { color: var(--mud-palette-text-secondary); }
.leads-type-badge--abent_hus[b-hnobygpsva]              { color: var(--mud-palette-success-darken); }
.leads-type-badge--intern_henvisning[b-hnobygpsva]      { color: var(--mud-palette-warning-darken); }
.leads-type-badge--koeberkartotek[b-hnobygpsva]         { color: var(--mud-palette-success-darken); }
.leads-type-badge--salgsmateriale_kontakt[b-hnobygpsva] { color: var(--mud-palette-text-secondary); }
.leads-type-badge--salgsmateriale[b-hnobygpsva]         { color: var(--mud-palette-text-secondary); }
.leads-type-badge--klik_en_pris[b-hnobygpsva]           { color: var(--mud-palette-warning-darken); }
.leads-type-badge--koeberraadgivning[b-hnobygpsva]      { color: var(--mud-palette-info-darken); }

/* ── Kunde celle ──────────────────────────────────── */
.leads-customer[b-hnobygpsva] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

.leads-customer__name[b-hnobygpsva] {
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leads-customer__name--link[b-hnobygpsva] {
    text-decoration: none;
}

.leads-customer__name--link:hover[b-hnobygpsva] {
    text-decoration: underline;
}

.leads-customer__phone[b-hnobygpsva] {
    white-space: nowrap;
}

/* ── Modtaget (dato) ──────────────────────────────── */
.leads-col-modtaget[b-hnobygpsva] {
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    padding-right: 0 !important;
}

.leads-case-column[b-hnobygpsva] {
    max-width: 220px;
    overflow: visible;
}

/* ── Sag preview on hover (rendered in a MudTooltip) ── */
/* The tooltip anchor wraps the address link; keep it a block so the link still
   ellipsises within the cell. RootClass lands on MudTooltip's own element, so ::deep. */
.leads-case-column[b-hnobygpsva]  .leads-case-preview-root {
    display: block;
    min-width: 0;
}

/* The card itself. MudTooltip owns show/hide + positioning (and teleports it out of the
   scroll wrapper), so no display/position/z-index here - just the surface + clipping. */
.leads-case-preview[b-hnobygpsva] {
    background: var(--mud-palette-background);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);
    overflow: hidden;
    min-width: 220px;
    max-width: 280px;
}

.leads-case-preview-img-wrap[b-hnobygpsva] {
    width: 100%;
    height: 140px;
    overflow: hidden;
}

.leads-case-preview-img[b-hnobygpsva] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.leads-case-preview-body[b-hnobygpsva] {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.leads-case-preview-address[b-hnobygpsva] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.leads-case-preview-status-badge[b-hnobygpsva] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    width: fit-content;
}

.leads-case-preview-status-badge--vurdering[b-hnobygpsva] { background: rgba(255,152,0,0.12); color: var(--mud-palette-warning-darken, #e65100); }
.leads-case-preview-status-badge--aktiv[b-hnobygpsva]     { background: rgba(76,175,80,0.12); color: var(--mud-palette-success-darken, #2e7d32); }
.leads-case-preview-status-badge--tilsalg[b-hnobygpsva]   { background: var(--color-brand-alpha-08, rgba(33,150,243,0.08)); color: var(--mud-palette-primary); }
.leads-case-preview-status-badge--solgt[b-hnobygpsva]     { background: rgba(0,0,0,0.06); color: var(--mud-palette-text-secondary); }

.leads-case-preview-broker[b-hnobygpsva] {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}

.leads-case-link[b-hnobygpsva] {
    display: block;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leads-case-link:hover[b-hnobygpsva] {
    text-decoration: underline;
}

/* ── Kolonnebredder ────────────────────────────────── */
.leads-col-kunde[b-hnobygpsva]  { width: 200px; min-width: 180px; }
.leads-col-notes[b-hnobygpsva]  { width: 180px; max-width: 220px; }
.leads-col-notat[b-hnobygpsva]  { width: 180px; max-width: 220px; }

/* ── Besked/Note hover tooltip (MudTooltip) ── */
/* RootClass lands on MudTooltip's own element, so ::deep; min-width:0 keeps the ellipsis. */
[b-hnobygpsva] .leads-tip-root {
    display: block;
    min-width: 0;
}

.leads-tip-text[b-hnobygpsva] {
    white-space: pre-wrap;
    max-width: 360px;
    word-break: break-word;
    text-align: start;
}

/* min-width:0 because a flex item defaults to min-width:auto and then refuses to shrink below its
   text, which pushes the note out over Adresse and Besked. */
.leads-note-display[b-hnobygpsva] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.leads-note-author[b-hnobygpsva] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leads-note-display .cell-text[b-hnobygpsva] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ── Ansvarlig medarbejder dropdown ──────────────── */
.leads-agent-wrap[b-hnobygpsva] {
    position: relative;
}

.leads-agent-btn[b-hnobygpsva] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    max-width: 160px;
    transition: color var(--transition-fast);
}

.leads-agent-btn:hover[b-hnobygpsva] {
    color: var(--mud-palette-text-primary);
}

.leads-agent-label[b-hnobygpsva] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Footer ───────────────────────────────────────── */
.leads-footer[b-hnobygpsva] {
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Tom tilstand ─────────────────────────────────── */
.leads-empty-state[b-hnobygpsva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}

.leads-empty-icon[b-hnobygpsva] {
    font-size: 40px;
    color: var(--mud-palette-text-disabled);
}

/* ── Hurtig note fra Notat-kolonnen ── */
.leads-notat-wrap[b-hnobygpsva] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.leads-note-add-btn[b-hnobygpsva] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.1s, background 0.1s;
}

/* Touch target on phones; desktop keeps the 24px circle so the row stays compact. */
@media (max-width: 599px) {
    .leads-note-add-btn[b-hnobygpsva] {
        width: 44px;
        height: 44px;
    }
}

tr:hover .leads-note-add-btn[b-hnobygpsva] {
    opacity: 1;
}

.leads-note-add-btn:hover[b-hnobygpsva] {
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-primary);
}

/* Click-away catcher. Sits just below the MudPopover content (mud z-index ~1200), which
   is teleported to the body-level provider so it escapes .leads-table-wrap's overflow
   clipping while staying anchored under the note cell. */
.leads-note-editor-overlay[b-hnobygpsva] {
    position: fixed;
    inset: 0;
    z-index: 1199;
}

.leads-note-editor[b-hnobygpsva] {
    width: 280px;
    margin-top: 4px;
    padding: 10px 12px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leads-note-editor-actions[b-hnobygpsva] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* ── Telefon: kort i stedet for tabel (.crm-table-cards, tables.css) ──
   Kolonnebredderne og 1180px-minimum ovenfor gælder kun rækkelayoutet, så de nulstilles her.
   Rækken bliver en flex-kolonne udelukkende for at kunne lægge Kunde øverst med order. */
@media (max-width: 599px) {
    .leads-table-wrap[b-hnobygpsva]  .leads-table,
    .leads-table-wrap[b-hnobygpsva]  table {
        min-width: 0;
    }

    .leads-table-wrap[b-hnobygpsva]  tbody tr {
        display: flex;
        flex-direction: column;
    }

    .leads-col-kunde[b-hnobygpsva] { order: -1; }

    .leads-col-type[b-hnobygpsva],
    .leads-col-kunde[b-hnobygpsva],
    .leads-col-notes[b-hnobygpsva],
    .leads-col-notat[b-hnobygpsva],
    .leads-col-kilde[b-hnobygpsva],
    .leads-case-column[b-hnobygpsva] {
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .leads-agent-btn[b-hnobygpsva] { max-width: none; }

    /* Besked/Note wrap onto lines in the card; the ellipsis only makes sense in a fixed column. */
    .leads-note-display .cell-text[b-hnobygpsva],
    .leads-customer__name[b-hnobygpsva],
    .leads-case-link[b-hnobygpsva] {
        white-space: normal;
    }

    /* No hover on touch: the note button must be visible, and the hover tooltip is noise. */
    .leads-note-add-btn[b-hnobygpsva] { opacity: 1; }

    /* Empty Besked and the "-" note placeholder only add height to the card; the note row keeps
       its add button. */
    .leads-col-notes--empty[b-hnobygpsva] { display: none; }
    .leads-notat-wrap > .cell-text.text-muted[b-hnobygpsva] { display: none; }
}
/* /Components/Pages/Personer/ManualAddressForm.razor.rz.scp.css */
.manual-address-form[b-okmzkb7iuv] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.manual-address-form .inline-input[b-okmzkb7iuv] { width: 100%; color: var(--mud-palette-text-secondary); font-size: var(--mud-typography-body2-size); }
.manual-address-popup[b-okmzkb7iuv] { margin-top: 8px; }
/* /Components/Pages/Personer/PersonActivitiesTab.razor.rz.scp.css */
.leads-type-badge[b-ffn5cjpbo4] {
    font-weight: 700;
    line-height: 1.4;
}

.leads-type-badge--salg[b-ffn5cjpbo4]                    { color: var(--mud-palette-primary); }
.leads-type-badge--fremvisning[b-ffn5cjpbo4]             { color: var(--mud-palette-primary); }
.leads-type-badge--salgsvurdering[b-ffn5cjpbo4]          { color: var(--mud-palette-info-darken); }
.leads-type-badge--kontakt[b-ffn5cjpbo4]                 { color: var(--mud-palette-text-secondary); }
.leads-type-badge--abent_hus[b-ffn5cjpbo4]              { color: var(--mud-palette-success-darken); }
.leads-type-badge--intern_henvisning[b-ffn5cjpbo4]       { color: var(--mud-palette-warning-darken); }
.leads-type-badge--koeberkartotek[b-ffn5cjpbo4]          { color: var(--mud-palette-success-darken); }
.leads-type-badge--salgsmateriale_kontakt[b-ffn5cjpbo4]  { color: var(--mud-palette-text-secondary); }
.leads-type-badge--salgsmateriale[b-ffn5cjpbo4]          { color: var(--mud-palette-text-secondary); }
.leads-type-badge--klik_en_pris[b-ffn5cjpbo4]            { color: var(--mud-palette-warning-darken); }
.leads-type-badge--koeberraadgivning[b-ffn5cjpbo4]       { color: var(--mud-palette-info-darken); }

.leads-source-label[b-ffn5cjpbo4] {
    color: var(--mud-palette-text-disabled);
    line-height: 1;
}

.leads-type-cell[b-ffn5cjpbo4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
/* /Components/Pages/Personer/PersonAdresseKort.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  PERSON ADRESSE-KORT - Scoped styles         ══ */
/* ══  DAWA-søgning + dropdown                     ══ */
/* ══  (flyttet fra PersonDetaljer.razor.css       ══ */
/* ══  v. dekomp.)                                 ══ */
/* ══════════════════════════════════════════════════ */

/* ── Address search ── */
.pers-det-addr-search[b-9saq072k1y] { position: relative; margin-top: 2px; }
.pers-det-addr-search .inline-input[b-9saq072k1y] {
    width: 100%;
    color: var(--mud-palette-text-secondary);
    font-size: var(--mud-typography-body2-size);
}
.pers-det-addr-search .inline-input[b-9saq072k1y]::placeholder { color: var(--mud-palette-text-disabled); }
.pers-det-addr-dropdown[b-9saq072k1y] { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; max-height: 200px; overflow-y: auto; }
.pers-det-addr-dropdown .dropdown-option[b-9saq072k1y] {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
}
.pers-det-addr-option-sub[b-9saq072k1y] { font-size: var(--mud-typography-caption-size); color: var(--mud-palette-text-secondary); }


/* Directions link: reads as the text, like the aftale page's address. */
.pers-det-addr-map[b-9saq072k1y] {
    color: inherit;
    text-decoration: none;
}

.pers-det-addr-map:hover[b-9saq072k1y],
.pers-det-addr-map:focus-visible[b-9saq072k1y] { text-decoration: underline; }
/* /Components/Pages/Personer/PersonDetaljer.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  PERSON DETALJER - Scoped styles             ══ */
/* ══  Delte regler på tværs af de dekomponerede   ══ */
/* ══  børn + tab-badges; barn-specifikke regler   ══ */
/* ══  er fordelt til børnenes .razor.css.         ══ */
/* ══════════════════════════════════════════════════ */

/* NB: Reglerne med ::deep nedenfor er KONVERTERET fra direkte regler ved
   dekomponeringen - klasserne bruges i FLERE børn (kontakt-kort, sidebar,
   oversigt), og direkte regler ville dø, mens duplikering er forbudt.
   Ankret på forælderens .page-content er renderingen ækvivalent. */

/* ── Contact field rows (sidebar-meta + Bank & Afdeling) ── */
[b-ugonn5so0c] .pers-det-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 6px;
    margin: 0 -6px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
[b-ugonn5so0c] .pers-det-contact-row:hover { background: var(--mud-palette-action-hover); }
[b-ugonn5so0c] .pers-det-contact-row--last { border-bottom: none; }

/* Sidebar contact list (phones + emails) lives in utilities.css, shared with the aktivitet page. */

/* NB: Formodentlig DØD (ubrugt i markup, 0 forekomster). Flagget; urørt. */
.pers-det-email-value[b-ugonn5so0c] { text-align: right; word-break: break-all; }

/* ── Layout for børnenes komponent-rødder ──
   MudPaper/MudStack er komponenter og får aldrig scope-attributten, så en regel
   i barnets egen .razor.css rammer dem ikke. De hører derfor her som ::deep. */
[b-ugonn5so0c] .pers-det-identity {
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

[b-ugonn5so0c] .pers-det-addr-main {
    flex: 1;
    min-width: 0;
}

[b-ugonn5so0c] .pers-det-notes-card { flex: 1; }

/* ── Address rows (alle tre kontakt-kort) ── */
[b-ugonn5so0c] .pers-det-addr-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
[b-ugonn5so0c] .pers-det-addr-row:last-child { border-bottom: none; }

[b-ugonn5so0c] .pers-det-addr-actions {
    display: flex;
    opacity: 0;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}
[b-ugonn5so0c] .pers-det-addr-row:hover .pers-det-addr-actions { opacity: 1; }
[b-ugonn5so0c] .pers-det-addr-actions--visible { opacity: 1 !important; }

/* Neutral, not red: red is reserved for the one filled button on the page. */
[b-ugonn5so0c] .pers-det-primary-badge {
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
    border-radius: var(--radius-xs);
    padding: 1px 6px;
    margin-left: 4px;
}
/* /Components/Pages/Personer/Personer.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  PERSONER - Scoped styles                    ══ */
/* ══════════════════════════════════════════════════ */

/* ── Stat wrap (ydre boks) ───────────────────────── */
.kunder-stats-wrap[b-r1bozr1cay] {
    border-radius: 5px;
}

/* ── Stat header med Tilpas-knap ─────────────────── */
.kunder-stats-header[b-r1bozr1cay] {
    padding: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.kunder-filter-tilpas-wrap[b-r1bozr1cay] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kunder-filter-tilpas-btn[b-r1bozr1cay] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.kunder-filter-tilpas-btn:hover[b-r1bozr1cay] {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-text-disabled);
    color: var(--mud-palette-text-primary);
}

.kunder-filter-tilpas-btn--active[b-r1bozr1cay] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #ffffff;
}

.kunder-filter-count[b-r1bozr1cay] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-disabled-background);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    line-height: 1.4;
}

.kunder-filter-tilpas-btn--active .kunder-filter-count[b-r1bozr1cay] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* ── Tilpas popover ──────────────────────────────── */
.kunder-filter-overlay[b-r1bozr1cay] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.kunder-filter-popover[b-r1bozr1cay] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 260px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    z-index: 100;
    overflow: hidden;
}

.kunder-filter-popover-header[b-r1bozr1cay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 9px;
    font-size: var(--mud-typography-overline-size);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.kunder-filter-reset-btn[b-r1bozr1cay] {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--mud-typography-overline-size);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mud-palette-primary);
    cursor: pointer;
    line-height: 1;
}

.kunder-filter-popover-item[b-r1bozr1cay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    transition: background 100ms ease;
    gap: 10px;
    text-align: left;
}

.kunder-filter-popover-item:last-child[b-r1bozr1cay] {
    border-bottom: none;
}

.kunder-filter-popover-item:hover[b-r1bozr1cay] {
    background: var(--mud-palette-action-disabled-background);
}

.kunder-filter-popover-label[b-r1bozr1cay] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
    flex: 1;
}

.kunder-filter-popover-label--on[b-r1bozr1cay] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.kunder-filter-toggle[b-r1bozr1cay] {
    flex-shrink: 0;
    width: 30px;
    height: 17px;
    border-radius: var(--radius-pill);
    background: var(--mud-palette-divider);
    position: relative;
    transition: background var(--transition-fast);
}

.kunder-filter-toggle--on[b-r1bozr1cay] {
    background: var(--mud-palette-primary);
}

.kunder-filter-toggle-thumb[b-r1bozr1cay] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
    transition: transform var(--transition-fast);
}

.kunder-filter-toggle--on .kunder-filter-toggle-thumb[b-r1bozr1cay] {
    transform: translateX(13px);
}

/* ── Stat grid ───────────────────────────────────── */
.kunder-stats-grid[b-r1bozr1cay] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--mud-palette-background);
    border-radius: 5px;
}

.kunder-stat-item[b-r1bozr1cay] {
    padding: 16px 20px;
    position: relative;
}

/* Lodret divider: kort centreret linje som på dashboard */
.kunder-stat-item:not(:nth-child(3n+1))[b-r1bozr1cay]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    width: 1px;
    background: var(--color-tertiary-soft);
}


.kunder-stat-top[b-r1bozr1cay] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kunder-stat-badge[b-r1bozr1cay] {
    font-size: var(--mud-typography-h3-size);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-family: 'Home', sans-serif;
    flex-shrink: 0;
    line-height: 1;
}

.kunder-stat-label[b-r1bozr1cay] {
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

@media (max-width: 599px) {
    .kunder-stats-grid[b-r1bozr1cay] {
        grid-template-columns: repeat(2, 1fr);
    }
    .kunder-stat-item:not(:nth-child(3n+1))[b-r1bozr1cay]::before {
        display: none;
    }
    .kunder-stat-item:not(:nth-child(2n+1))[b-r1bozr1cay]::before {
        display: block;
    }
}

/* ── Søgefelt min-bredde ─────────────────────────── */
.mensen-card-search .mensen-search[b-r1bozr1cay] {
    min-width: 260px;
}

/* ── Email kolonne: truncate med ellipsis ────────── */
.col-email[b-r1bozr1cay] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Pencil-ikon i redigerbar celle ─────────────── */
.cell-edit-icon[b-r1bozr1cay]  .mud-icon-root {
    font-size: 12px !important;
}

.mensen-table-wrapper[b-r1bozr1cay]  .editable-cell:hover .cell-edit-icon {
    color: var(--mud-palette-text-primary);
}

/* ── Bank dropdown panel ─────────────────────────── */
.mensen-bank-dropdown[b-r1bozr1cay] {
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    left: auto;
    right: 0;
}

/* ── Kundeliste header (udenfor kortet) ──────────── */
.mensen-list-header[b-r1bozr1cay] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.mensen-list-title[b-r1bozr1cay] {
    font-size: var(--mud-typography-subtitle1-size);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.mensen-list-subtitle[b-r1bozr1cay] {
    font-size: var(--mud-typography-body1-size);
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.mensen-card-search[b-r1bozr1cay] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Filter-tabs ────────────────────────────────── */
.mensen-card-tabs[b-r1bozr1cay] {
    padding: 0;
}

/* ── Butik-filter dropdown ───────────────────────── */
.mensen-shop-dropdown-wrap[b-r1bozr1cay] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mensen-shop-popover[b-r1bozr1cay] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    min-width: 200px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 6px;
}

.mensen-shop-popover-header[b-r1bozr1cay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 8px;
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mensen-shop-reset-btn[b-r1bozr1cay] {
    border: none;
    background: none;
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-primary);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.mensen-shop-reset-btn:hover[b-r1bozr1cay] {
    text-decoration: underline;
}

.mensen-shop-popover-item[b-r1bozr1cay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast);
}

.mensen-shop-popover-item:hover[b-r1bozr1cay] {
    background: var(--mud-palette-action-disabled-background);
}

.mensen-shop-popover-label[b-r1bozr1cay] {
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-secondary);
}

.mensen-shop-popover-label--on[b-r1bozr1cay] {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.mensen-shop-toggle[b-r1bozr1cay] {
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: var(--mud-palette-action-disabled);
    position: relative;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.mensen-shop-toggle--on[b-r1bozr1cay] {
    background: var(--mud-palette-primary);
}

.mensen-shop-toggle-thumb[b-r1bozr1cay] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    transition: left var(--transition-fast);
}

.mensen-shop-toggle--on .mensen-shop-toggle-thumb[b-r1bozr1cay] {
    left: 16px;
}

.mensen-shop-overlay[b-r1bozr1cay] {
    position: fixed;
    inset: 0;
    z-index: 199;
}

/* ── Filter-knap ────────────────────────────────── */
/* Selve knappen, dens hover og --active bor globalt i utilities.css. Kun caret-reglerne
   er lokale — caret'en er ikke en del af den delte knap. */

/* Caret'en arver knappens farve, så den ikke drukner på den røde aktiv-flade. */
.mensen-filter-btn--active .pill-select__caret[b-r1bozr1cay] {
    color: inherit;
}

.mensen-filter-btn--open .pill-select__caret[b-r1bozr1cay] {
    transform: rotate(180deg);
}

/* ── Dato-popover ───────────────────────────────── */
.mensen-date-popover-wrap[b-r1bozr1cay] {
    position: relative;
}

.mensen-date-popover-overlay[b-r1bozr1cay] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* Kun placering og layout her — fladen (bg/kant/radius/skygge) kommer fra den
   globale .dropdown-surface, så alle popovers deler én kilde. */
.mensen-date-popover[b-r1bozr1cay] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 230px;
}

/* MudDatePicker'ens adornment arver ellers Size.Medium (24px) — samme 16px-rolle som
   andre ikoner i inputfelter (jf. .mi-location-input i mudblazor-overrides.css). */
.mensen-date-popover[b-r1bozr1cay]  .mud-input-adornment .mud-icon-root {
    font-size: var(--icon-size-btn) !important;
    color: var(--mud-palette-text-secondary) !important;
}

.mensen-date-popover-reset[b-r1bozr1cay] {
    appearance: none;
    background: none;
    border: none;
    padding: 2px 0 0;
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    color: var(--mud-palette-text-disabled);
    cursor: pointer;
    text-align: right;
    align-self: flex-end;
    transition: color var(--transition-fast);
}

.mensen-date-popover-reset:hover[b-r1bozr1cay] {
    color: var(--mud-palette-primary);
}

/* ── Tom tilstand ───────────────────────────────── */
.mensen-empty[b-r1bozr1cay] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}

.mensen-empty[b-r1bozr1cay]  .mud-icon-root {
    font-size: 40px !important;
    color: var(--mud-palette-text-disabled) !important;
}

/* ── Tabel-wrapper ───────────────────────────────── */
.mensen-table-wrapper[b-r1bozr1cay] {
    overflow-x: auto;
}

.mensen-table-wrapper[b-r1bozr1cay]  .mud-table {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mensen-table-wrapper[b-r1bozr1cay]  tr {
    cursor: pointer;
}

.col-phone[b-r1bozr1cay] {
    white-space: nowrap;
}

.mensen-table-wrapper[b-r1bozr1cay]  tbody tr:last-child td {
    border-bottom: none;
}

.mensen-table-wrapper[b-r1bozr1cay]  tbody tr {
    transition: background-color var(--transition-fast);
}

.mensen-table-wrapper[b-r1bozr1cay]  tbody tr:hover td {
    background: var(--mud-palette-table-hover) !important;
}

/* ── Avatar ─────────────────────────────────────── */
.mensen-cell-name[b-r1bozr1cay]  .mud-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: var(--mud-typography-h6-size) !important;
}

/* ── Celle: kundenavn ───────────────────────────── */
.mensen-cell-name[b-r1bozr1cay] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Hele-rækken-link (åbn i ny fane, #44464) ──
   Et usynligt <a> pr. celle (RowLink) dækker hele rækken, så native "åbn i ny fane" virker overalt.
   Ankeret er cellen, ikke rækken: WebKit laver ikke containing block af position:relative på <tr>.
   Favorit-stjernen løftes over med z-index så den stadig kan klikkes. */
.mensen-row-link-host > td[b-r1bozr1cay] { position: relative; }
.mensen-row-interactive[b-r1bozr1cay] { position: relative; z-index: 1; }

.mensen-cell-name__info[b-r1bozr1cay] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mensen-cell-name__primary[b-r1bozr1cay] {
    font-weight: 500;
    font-size: var(--mud-typography-body1-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mensen-cell-name__sub[b-r1bozr1cay] {
    /* Phone-only: the Telefon and Email columns carry this on wider screens. */
    display: none;
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}

.mensen-cell-name__sub-item[b-r1bozr1cay] { display: block; overflow-wrap: anywhere; }

/* The contact actions sit inside the row link, so they need their own touch target
   (designguide §10) without stretching the row on desktop. */
@media (max-width: 599px) {
    .mensen-cell-name__sub-item[b-r1bozr1cay]  .contact-action {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ── Stjernemarkering (inline i Kunde-celle) ─────── */
.mensen-star-btn[b-r1bozr1cay] {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--mud-palette-text-disabled);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.mensen-star-btn:hover[b-r1bozr1cay] {
    color: var(--mud-palette-warning);
    background: rgba(245, 158, 11, 0.08);
}

.mensen-star-btn--active[b-r1bozr1cay] {
    color: var(--mud-palette-warning);
}

/* Fyldt favorit-stjerne via MudIcon + PhosphorIcons.StarFill (fill-geometri i
   ikon-registret, ingen CDN fill-vægt). MudIcon er en barn-komponent, så størrelsen
   sættes via font-size gennem ::deep (scoped CSS når ellers ikke ind i barnets svg);
   width/height følger 1em. Farve arves via currentColor (amber på --active). */
.mensen-star-btn[b-r1bozr1cay]  .mensen-star-glyph {
    font-size: 16px !important;
    flex-shrink: 0;
}


/* ── Trafiklys ───────────────────────────────────── */
.mensen-traffic-dot[b-r1bozr1cay] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mensen-traffic-dot--green[b-r1bozr1cay]  { background: #22c55e; }
.mensen-traffic-dot--yellow[b-r1bozr1cay] { background: var(--mud-palette-warning); }
.mensen-traffic-dot--red[b-r1bozr1cay]    { background: #ef4444; }

/* ── Seneste aktivitet celle ─────────────────────── */
.mensen-activity-cell[b-r1bozr1cay] {
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* ── Bank-badge (baggrundfarve sættes inline) ───── */
.bank-badge[b-r1bozr1cay] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--mud-typography-body1-size);
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.bank-badge[b-r1bozr1cay]  .mud-icon-root {
    font-size: 13px !important;
    margin-left: 2px;
    opacity: 0.7;
}

/* ── Footer ─────────────────────────────────────── */
.mensen-card-footer[b-r1bozr1cay] {
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.mensen-card-footer .mud-pagination button[b-r1bozr1cay] {
    font-weight: 400;
    font-size: var(--mud-typography-body2-size);
}

.mensen-card-footer .mud-pagination .mud-button-filled[b-r1bozr1cay] {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    font-weight: 500;
    box-shadow: none;
}

.mensen-card-footer .mud-pagination .mud-button-filled:hover[b-r1bozr1cay] {
    background: var(--mud-palette-text-secondary);
    box-shadow: none;
}

/* ── Responsive (mobil ≤ 599px) ─────────────────── */
@media (max-width: 599px) {
    /* The name is the row's identity column here, so it wraps rather than ellipsizes, and the
       contact details from the hidden columns sit under it. #1481 */
    .mensen-cell-name__primary[b-r1bozr1cay] { white-space: normal; overflow: visible; text-overflow: clip; }
    .mensen-cell-name__sub[b-r1bozr1cay] { display: block; }

    .mensen-list-header[b-r1bozr1cay] {
        align-items: flex-start;
    }

    .mensen-card-search[b-r1bozr1cay] {
        width: 100%;
    }

    .mensen-card-search .mensen-search[b-r1bozr1cay] {
        min-width: 0;
        flex: 1;
    }

    .mensen-filter-btn[b-r1bozr1cay] {
        flex-shrink: 0;
    }

    .mensen-card-tabs[b-r1bozr1cay] {
        padding: 6px 16px;
    }

    .mensen-card-footer[b-r1bozr1cay] {
        padding: 10px 16px;
    }

    /* Touch target: the star sits inline in the row and is 28x24 on desktop. */
    .mensen-star-btn[b-r1bozr1cay] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Components/Pages/Personer/PersonHenvisningerTab.razor.rz.scp.css */
/* ── Type tags ── */
.henv-type-tag[b-yiecoxlmo5] {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    white-space: nowrap;
}

.henv-type--danskebank[b-yiecoxlmo5]       { background: var(--mud-palette-text-primary);   color: var(--mud-palette-background); }
.henv-type--gjensidige[b-yiecoxlmo5]       { background: var(--mud-palette-success);        color: var(--mud-palette-background); }
.henv-type--nordlys[b-yiecoxlmo5]          { background: var(--color-type-yellow);    color: var(--mud-palette-background); }
.henv-type--intern[b-yiecoxlmo5]           { background: var(--mud-palette-primary);             color: var(--mud-palette-background); }
.henv-type--koberroadgivning[b-yiecoxlmo5] { background: var(--color-type-indigo);    color: var(--mud-palette-background); }
.henv-type--unknown[b-yiecoxlmo5]          { background: var(--mud-palette-text-secondary);      color: var(--mud-palette-background); }

/* ── Bank status tags ── */
.henv-bank-tag[b-yiecoxlmo5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    white-space: nowrap;
}

.henv-bank--sendt[b-yiecoxlmo5]     { background: var(--status-closed-bg);      color: var(--status-closed-text); }
.henv-bank--afventer[b-yiecoxlmo5]  { background: var(--status-processing-bg);  color: var(--status-processing-text); }
.henv-bank--afsluttet[b-yiecoxlmo5] { background: var(--status-forsale-bg);     color: var(--status-forsale-text); }
/* /Components/Pages/Personer/PersonNotesCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  PERSON NOTER-KORT - Scoped styles           ══ */
/* ══  (flyttet fra PersonDetaljer.razor.css       ══ */
/* ══  v. dekomp.)                                 ══ */
/* ══════════════════════════════════════════════════ */

/* ── Notes ── */
.pers-det-note-item[b-w4gimpn35v] { padding-bottom: 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
/* /Components/Pages/Personer/PersonOverviewTab.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  PERSON OVERSIGT-TAB - Scoped styles         ══ */
/* ══  (flyttet fra PersonDetaljer.razor.css       ══ */
/* ══  v. dekomp.)                                 ══ */
/* ══════════════════════════════════════════════════ */

/* ── Tidsstempler / Profil rows ── */
.pers-det-ts-row[b-wjb3ufhgu7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* The validation message belongs under the field, not beside it, so it claims a full row of its
   own. ::deep because MudText renders its own root and never carries the scope attribute. */
.pers-det-ts-row[b-wjb3ufhgu7]  .pers-det-edit-error {
    flex: 0 0 100%;
    text-align: right;
    margin-top: 2px;
}
.pers-det-ts-row:last-child[b-wjb3ufhgu7] { border-bottom: none; }

/* The metadata line now closes the Profil card, so the last key/value row above it keeps its
   divider unless we take it off here. :last-of-type cannot do it, both are plain <div>. */
.pers-det-ts-row:has(+ .pers-det-meta-line)[b-wjb3ufhgu7] { border-bottom: none; }

.pers-det-meta-line[b-wjb3ufhgu7] { padding-top: 12px; }

/* ── Oversigt-tab layout ── */
.pers-overview-grid[b-wjb3ufhgu7] { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.pers-overview-col[b-wjb3ufhgu7]  { display: flex; flex-direction: column; gap: 24px; }

@media (max-width: 599px) {
    .pers-overview-grid[b-wjb3ufhgu7] { grid-template-columns: 1fr; gap: 16px; }
}
/* /Components/Pages/Personer/PersonSidebarCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  PERSON SIDEBAR - Scoped styles              ══ */
/* ══  Seneste aktiviteter/noter-timeline          ══ */
/* ══  (flyttet fra PersonDetaljer.razor.css       ══ */
/* ══  v. dekomp.)                                 ══ */
/* ══════════════════════════════════════════════════ */

/* ── Identity: name over a metadata line, star lines up with the name ── */
.pers-det-identity-text[b-se0eyhsxs3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Centred on the whole two-line block, the star drifted down between name and status line. The
   stack now aligns at the top (AlignItems.Start in the markup, because MudStack's own
   .align-center carries !important) and the star's button box is collapsed onto the h6 line box,
   so the glyph centres on the name. MudIconButton is a child component, hence ::deep. */
.pers-det-identity[b-se0eyhsxs3]  .mud-icon-button {
    height: calc(var(--mud-typography-h6-size) * var(--mud-typography-h6-lineheight));
    padding-top: 0;
    padding-bottom: 0;
}

.pers-det-status-line[b-se0eyhsxs3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}

/* Separator in CSS so the markup stays a plain list of values. */
.pers-det-status-line span + span[b-se0eyhsxs3]::before {
    content: "·";
    margin: 0 6px;
    color: var(--mud-palette-text-disabled);
}

.pers-det-status-line__state--active[b-se0eyhsxs3]    { color: var(--mud-palette-success); }
.pers-det-status-line__state--potential[b-se0eyhsxs3] { color: var(--mud-palette-warning); }

/* ── Action buttons: enforce equal height across Filled + Outlined variants ── */
.pers-det-sidebar-actions[b-se0eyhsxs3]  .mud-button-root {
    min-height: 42px;
}

/* FullWidth alone does not split a row stack, so the pair has to claim equal shares. */
.pers-det-sidebar-actions__row[b-se0eyhsxs3]  .mud-button-root {
    flex: 1;
    min-width: 0;
}

/* ── Sidebar recent activity + note items ── */
.pers-det-activity-item[b-se0eyhsxs3] {
    cursor: pointer;
    padding: 8px 6px;
    margin: 0 -6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.pers-det-activity-item:hover[b-se0eyhsxs3] { background: var(--mud-palette-action-hover); }

.pers-det-activity-item--note[b-se0eyhsxs3] { cursor: default; }
.pers-det-activity-item--note:hover[b-se0eyhsxs3] { background: transparent; }

.pers-det-timeline-row[b-se0eyhsxs3] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pers-det-timeline-icon[b-se0eyhsxs3] {
    font-size: var(--icon-size-table);
    margin-top: 3px;
    flex-shrink: 0;
}

.pers-det-timeline-icon--activity[b-se0eyhsxs3] { color: var(--mud-palette-primary); }
.pers-det-timeline-icon--note[b-se0eyhsxs3]     { color: var(--mud-palette-text-disabled); }

.pers-det-activity-item--locked[b-se0eyhsxs3] {
    cursor: default;
    opacity: 0.6;
}
.pers-det-activity-item--locked:hover[b-se0eyhsxs3] {
    background: transparent;
}

/* The e-mail value is a flex <button> (ContactActions), where text-align has no effect and the
   label centres; justify-content keeps it right-aligned like the phone number. */
.crm-contact-item[b-se0eyhsxs3]  .crm-contact-item__val {
    justify-content: flex-end;
    text-align: right;
}
/* /Components/Pages/Personer/PersonSoegeprofilerTab.razor.rz.scp.css */
/* ── Name column: fill td width with ellipsis for overflow ── */
.sp-tab-name-cell[b-qd475kox90] {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Area cell: stack map + postal codes ── */
.sp-tab-area-cell[b-qd475kox90] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
}

/* Override AreaMap default height (240px) to compact landscape thumbnail */
.sp-tab-area-cell[b-qd475kox90]  .area-map {
    height: 80px;
}

/* ── Map click overlay ── */
.sp-tab-map-wrap[b-qd475kox90] {
    position: relative;
}

.sp-tab-map-overlay[b-qd475kox90] {
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 1;
}

/* ── Date columns: compact, no-wrap ── */
.sp-tab-date-col[b-qd475kox90] {
    white-space: nowrap;
    width: 1%;
}

/* ── Postal codes below the map ── */
/* /Components/Pages/Public/Forberedelsesskema.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  FORBEREDELSESSKEMA - Scoped styles          ══ */
/* ══  Offentlig forberedelsesskema                ══ */
/* ══════════════════════════════════════════════════ */

/* ── Page layout ── */
.forb-page[b-hbpccmgs49] { min-height: 100vh; background: var(--color-bg-public-form); display: flex; justify-content: center; padding: 48px 16px 80px; }
.forb-inner[b-hbpccmgs49] { width: 100%; max-width: 680px; }
[b-hbpccmgs49] .forb-form-card { width: 100%; box-sizing: border-box; padding: 28px 32px; border-radius: 10px; }
[b-hbpccmgs49] .forb-loading { min-height: 160px; }

/* ── Header ── */
[b-hbpccmgs49] .forb-brand { font-size: 30px; font-weight: 800; color: var(--mud-palette-error); letter-spacing: -0.02em; }
[b-hbpccmgs49] .forb-subtitle { font-weight: 700; margin-top: 8px; }

/* ── Form fields ── */
.forb-field[b-hbpccmgs49] { margin-bottom: 28px; }
[b-hbpccmgs49] .forb-field-label { font-weight: 600; display: block; margin-bottom: 8px; }
.forb-field-question[b-hbpccmgs49] { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--mud-palette-text-primary); }
[b-hbpccmgs49] .forb-radio-group { display: flex; flex-direction: row; gap: 24px; }

/* ── Success state ── */
[b-hbpccmgs49] .forb-success-text { max-width: 420px; line-height: 1.6; }

/* ── Consent box ── */
[b-hbpccmgs49] .forb-consent-box { background: var(--mud-palette-info-lighten); border-radius: var(--radius-md); }
[b-hbpccmgs49] .forb-consent-title { font-weight: 600; margin-bottom: 8px; color: var(--color-info-text-dark); }

/* ── Submit button ── */
[b-hbpccmgs49] .forb-submit { height: 48px; font-weight: 700; letter-spacing: 0.04em; margin-top: 8px; }
/* /Components/Pages/Public/Samtykke.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  SAMTYKKE - Scoped styles                    ══ */
/* ══  Samtykke og møde-booking formular           ══ */
/* ══════════════════════════════════════════════════ */

/* ── Section labels ── */
[b-cf587k9yom] .samtykke-section-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin: 16px 0 8px; }
[b-cf587k9yom] .samtykke-sub-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
[b-cf587k9yom] .samtykke-period-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin: 16px 0 10px; }

/* ── Radio group ── */
[b-cf587k9yom] .samtykke-radio-group { display: flex; gap: 16px; }

/* ── Calendar day chips ── */
.samtykke-day-chips[b-cf587k9yom] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }

/* ── Timeslot cards ── */
[b-cf587k9yom] .samtykke-slot-card { cursor: pointer; position: relative; border-radius: 10px; gap: 4px; }
[b-cf587k9yom] .samtykke-slot-card--selected { border-color: var(--mud-palette-primary) !important; background: rgba(220, 38, 38, 0.04); border-width: 2px !important; }

/* ── Adviser info ── */
[b-cf587k9yom] .samtykke-adviser-name { font-weight: 600; line-height: 1.3; }

/* ── Info panels ── */
[b-cf587k9yom] .samtykke-panel { background: var(--mud-palette-background-grey); padding: 16px; margin-top: 20px; }
[b-cf587k9yom] .samtykke-footer { opacity: 0.8; background-color: var(--mud-palette-background-grey); border-radius: var(--radius-sm); gap: 6px; }
/* /Components/Pages/Sager/BrokerFilterMenu.razor.rz.scp.css */
/* ── Broker filter dropdown ── */

.sager-broker-filter-wrap[b-w0dlqorsnd] {
    position: relative;
    display: block;
}

.sager-broker-filter-btn[b-w0dlqorsnd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

.sager-broker-filter-btn:hover[b-w0dlqorsnd] {
    color: var(--mud-palette-text-primary);
}

.sager-broker-filter-btn--active[b-w0dlqorsnd] {
    color: var(--mud-palette-primary);
}

.sager-broker-filter-btn i[b-w0dlqorsnd] {
    font-size: 12px;
    opacity: 0.6;
}

.sager-broker-filter-btn--active i[b-w0dlqorsnd] {
    opacity: 1;
}

.sager-broker-filter-overlay[b-w0dlqorsnd] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

.sager-broker-filter-dropdown[b-w0dlqorsnd] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 999;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    min-width: 260px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 0;
}

.sager-broker-filter-head[b-w0dlqorsnd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px 6px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 2px;
}

.sager-broker-filter-title[b-w0dlqorsnd] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.sager-broker-filter-clear[b-w0dlqorsnd] {
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-primary);
    cursor: pointer;
    padding: 0;
}

.sager-broker-filter-search[b-w0dlqorsnd] {
    padding: 6px 10px 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 2px;
}

.sager-broker-filter-input[b-w0dlqorsnd] {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-sm);
    background: var(--mud-palette-background);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-primary);
    outline: none;
    box-sizing: border-box;
}

.sager-broker-filter-input:focus[b-w0dlqorsnd] {
    border-color: var(--mud-palette-primary);
}

.sager-broker-filter-item[b-w0dlqorsnd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-primary);
    font-weight: 400;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.sager-broker-filter-item:hover[b-w0dlqorsnd] {
    background: var(--mud-palette-action-disabled-background);
}

.sager-broker-filter-item input[type="checkbox"][b-w0dlqorsnd] {
    cursor: pointer;
    accent-color: var(--mud-palette-primary);
    flex-shrink: 0;
}
/* /Components/Pages/Sager/BuyerContactCell.razor.rz.scp.css */
.sag-buyer-cell[b-75tr1vnral] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 52px;
}

.sag-buyer-cell[b-75tr1vnral]  .sag-buyer-name {
    font-size: var(--mud-typography-body1-size);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.sag-buyer-contact[b-75tr1vnral] {
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buyer-placeholder[b-75tr1vnral] {
    width: 180px;
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .buyer-placeholder[b-75tr1vnral]  .mud-skeleton::after {
        animation: none;
    }
}
/* /Components/Pages/Sager/CaseActivitiesCard.razor.rz.scp.css */
/* Kunde cell, same style as the Leads overview's Kunde column. */
.pd-activity-customer[b-s05c96kb3i] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* Several kunder on one aftale stack, each with its own phone line. */
.pd-activity-customer + .pd-activity-customer[b-s05c96kb3i] {
    margin-top: 6px;
}

.pd-activity-customer__name[b-s05c96kb3i] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-activity-customer__name:hover[b-s05c96kb3i] {
    text-decoration: underline;
}

.pd-activity-customer__phone[b-s05c96kb3i] {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Cells use white-space:nowrap, so long names or types can make the table wider than the
   column. Without this the whole page scrolled horizontally; now the card scrolls and
   min-width:0 lets the flexed content shrink below its content width. */
.sag-tab-table-wrap[b-s05c96kb3i] {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

/* Empty state: same centred icon + body2 + caption as the Dokumenter card. */
.case-activities-empty[b-s05c96kb3i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 12px;
    text-align: center;
}

.case-activities-empty[b-s05c96kb3i]  .case-activities-empty-icon {
    font-size: 40px;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 4px;
}

/* Same full-width grey header as the potentielle købere table. Scoped here, so the shared
   pd-tab-table under Personer keeps its look; the phone shows cards without a thead. */
@media (min-width: 600px) {
    .sag-tab-table-wrap[b-s05c96kb3i] {
        margin: 0 -16px;
        max-width: calc(100% + 32px);
        border-top: 1px solid var(--mud-palette-divider);
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .sag-tab-table-wrap thead th[b-s05c96kb3i] {
        padding: 10px 12px;
        background: var(--mud-palette-surface);
    }

    /* Same inset as the header, so every column lines up with its heading. */
    .sag-tab-table-wrap tbody td[b-s05c96kb3i] { padding: 10px 12px; }

    .sag-tab-table-wrap :is(th, td):first-child[b-s05c96kb3i] { padding-left: 24px; }
    .sag-tab-table-wrap :is(th, td):last-child[b-s05c96kb3i] { padding-right: 24px; }
}
/* /Components/Pages/Sager/CaseActivityStatusMenu.razor.rz.scp.css */
.aktstat-activator[b-1fzjnjcit5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 6px;
    border: none;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.aktstat-activator:hover[b-1fzjnjcit5] {
    background: var(--mud-palette-action-disabled-background);
}

.aktstat-activator-label[b-1fzjnjcit5] {
    line-height: 1;
}

.aktstat-dot[b-1fzjnjcit5] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.aktstat-dot--groen[b-1fzjnjcit5],
.aktstat-dot--gul[b-1fzjnjcit5],
.aktstat-dot--roed[b-1fzjnjcit5],
.aktstat-dot--ingen[b-1fzjnjcit5] { display: none; }

.aktstat-pencil[b-1fzjnjcit5] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-disabled);
}
/* /Components/Pages/Sager/CaseGrid.razor.rz.scp.css */
/* ── Hele-rækken/-kortet-link (åbn i ny fane, #44464) ──
   Et usynligt <a> (RowLink) dækker rækken (tabel) eller kortet (grid), så native "åbn i ny fane"
   virker overalt. Aktivitets-status-cellen løftes over med z-index.
   Grid-kortet er en <div> og ankrer selv; i tabellen ankrer hver celle, fordi WebKit ikke laver
   containing block af position:relative på <tr>. */

.sager-row-link-host[b-rgltkwrz43] { position: relative; }

tr.sager-row-link-host > td[b-rgltkwrz43] { position: relative; }

.sager-row-interactive[b-rgltkwrz43] { position: relative; z-index: 1; }

/* ── Grid-visning ── */

.sager-grid[b-rgltkwrz43] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.sager-grid-card[b-rgltkwrz43] {
    border-radius: var(--radius-lg);
    border: var(--card-border);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
    background: var(--mud-palette-background);
}

.sager-grid-card:hover[b-rgltkwrz43] {
    border-color: var(--mud-palette-text-disabled);
    transform: translateY(-2px);
}

/* ── Billedplade ── */

.sager-grid-card-image[b-rgltkwrz43] {
    position: relative;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sager-grid-card-image--vurdering[b-rgltkwrz43] { background: rgba(255, 152, 0, 0.08); }

.sager-grid-card-image--aktiv[b-rgltkwrz43]     { background: rgba(76, 175, 80, 0.08); }

.sager-grid-card-image--tilsalg[b-rgltkwrz43]   { background: var(--color-brand-bg, var(--color-brand-alpha-06)); }

.sager-grid-card-image--undersalg[b-rgltkwrz43]    { background: rgba(33, 150, 243, 0.08); }

.sager-grid-card-image--endeligsalg[b-rgltkwrz43]  { background: rgba(156, 39, 176, 0.08); }

.sager-grid-card-image--solgt[b-rgltkwrz43]     { background: rgba(0, 0, 0, 0.04); }

.sager-grid-card-image--retur[b-rgltkwrz43]        { background: rgba(0, 0, 0, 0.05); }

.sager-grid-card-image--tabtkommission[b-rgltkwrz43] { background: rgba(244, 67, 54, 0.08); }

.sager-grid-card-house-icon[b-rgltkwrz43] {
    font-size: 52px;
    opacity: 0.18;
}

.sager-grid-card-img[b-rgltkwrz43] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sager-grid-card-image--vurdering .sager-grid-card-house-icon[b-rgltkwrz43] { color: var(--mud-palette-warning); opacity: 0.25; }

.sager-grid-card-image--aktiv     .sager-grid-card-house-icon[b-rgltkwrz43] { color: var(--mud-palette-success); opacity: 0.25; }

.sager-grid-card-image--tilsalg   .sager-grid-card-house-icon[b-rgltkwrz43] { color: var(--mud-palette-primary); opacity: 0.20; }

.sager-grid-card-image--undersalg    .sager-grid-card-house-icon[b-rgltkwrz43] { color: var(--mud-palette-info); opacity: 0.25; }

.sager-grid-card-image--endeligsalg  .sager-grid-card-house-icon[b-rgltkwrz43] { color: var(--mud-palette-secondary); opacity: 0.25; }

.sager-grid-card-image--solgt     .sager-grid-card-house-icon[b-rgltkwrz43] { color: var(--mud-palette-text-disabled); }

.sager-grid-card-image--retur        .sager-grid-card-house-icon[b-rgltkwrz43] { color: var(--mud-palette-text-disabled); opacity: 0.25; }

.sager-grid-card-image--tabtkommission .sager-grid-card-house-icon[b-rgltkwrz43] { color: var(--mud-palette-error); opacity: 0.25; }

/* ── Status-badge ── */

.sager-grid-card-status-badge[b-rgltkwrz43] {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.sager-grid-card-status-badge--vurdering[b-rgltkwrz43] { background: #ffffff; color: var(--mud-palette-warning-darken, #e65100); }

.sager-grid-card-status-badge--aktiv[b-rgltkwrz43]     { background: #ffffff; color: var(--mud-palette-success-darken, #2e7d32); }

.sager-grid-card-status-badge--tilsalg[b-rgltkwrz43]   { background: #ffffff; color: var(--mud-palette-primary); }

.sager-grid-card-status-badge--undersalg[b-rgltkwrz43]    { background: #ffffff; color: var(--mud-palette-info); }

.sager-grid-card-status-badge--endeligsalg[b-rgltkwrz43]  { background: #ffffff; color: var(--mud-palette-secondary); }

.sager-grid-card-status-badge--solgt[b-rgltkwrz43]     { background: #ffffff; color: var(--mud-palette-text-secondary); }

.sager-grid-card-status-badge--retur[b-rgltkwrz43]        { background: #ffffff; color: var(--mud-palette-text-secondary); }

.sager-grid-card-status-badge--tabtkommission[b-rgltkwrz43] { background: #ffffff; color: var(--mud-palette-error); }

/* ── Card body ── */

.sager-grid-card-body[b-rgltkwrz43] {
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sager-grid-card-address[b-rgltkwrz43] {
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sager-grid-card-type[b-rgltkwrz43] {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}

.sager-grid-card-seller[b-rgltkwrz43] {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sager-grid-card-type-chip[b-rgltkwrz43] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.sager-grid-card-type-chip--salg[b-rgltkwrz43]      { background: var(--color-brand-bg, var(--color-brand-alpha-08)); color: var(--mud-palette-primary); }

.sager-grid-card-type-chip--udlejning[b-rgltkwrz43] { background: rgba(33,150,243,0.10); color: var(--mud-palette-info); }

.sager-grid-card-type-chip--koeb[b-rgltkwrz43]      { background: rgba(156,39,176,0.10); color: var(--mud-palette-secondary); }

.sager-grid-card-type-chip--erhverv[b-rgltkwrz43]   { background: rgba(255,152,0,0.10); color: var(--mud-palette-warning); }

/* ── Card footer ── */

.sager-grid-card-footer[b-rgltkwrz43] {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sager-grid-card-price[b-rgltkwrz43] {
    font-size: var(--mud-typography-body1-size);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.01em;
}

.sager-grid-card-meta[b-rgltkwrz43] {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sager-grid-card-aktstat[b-rgltkwrz43] {
    padding: 2px 0 4px;
}
/* /Components/Pages/Sager/CaseListTable.razor.rz.scp.css */
/* ── Cell ── */

.sager-cell-name[b-hmwz5mp52f] {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* ── Hele-rækken/-kortet-link (åbn i ny fane, #44464) ──
   Et usynligt <a> (RowLink) dækker rækken (tabel) eller kortet (grid), så native "åbn i ny fane"
   virker overalt. Aktivitets-status-cellen løftes over med z-index.
   Grid-kortet er en <div> og ankrer selv; i tabellen ankrer hver celle, fordi WebKit ikke laver
   containing block af position:relative på <tr>. */

.sager-row-link-host[b-hmwz5mp52f] { position: relative; }

tr.sager-row-link-host > td[b-hmwz5mp52f] { position: relative; }

.sager-row-interactive[b-hmwz5mp52f] { position: relative; z-index: 1; }

/* ── Liste-thumbnail ── */

.sager-col-thumb[b-hmwz5mp52f] {
    width: 60px;
    padding-right: 0 !important;
}

.sager-list-thumb[b-hmwz5mp52f] {
    width: 44px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sager-list-thumb--vurdering[b-hmwz5mp52f] { background: rgba(255, 152, 0, 0.08); }

.sager-list-thumb--aktiv[b-hmwz5mp52f]     { background: rgba(76, 175, 80, 0.08); }

.sager-list-thumb--tilsalg[b-hmwz5mp52f]   { background: var(--color-brand-bg, var(--color-brand-alpha-06)); }

.sager-list-thumb--undersalg[b-hmwz5mp52f]    { background: rgba(33, 150, 243, 0.08); }

.sager-list-thumb--endeligsalg[b-hmwz5mp52f]  { background: rgba(156, 39, 176, 0.08); }

.sager-list-thumb--solgt[b-hmwz5mp52f]     { background: rgba(0, 0, 0, 0.04); }

.sager-list-thumb--retur[b-hmwz5mp52f]        { background: rgba(0, 0, 0, 0.05); }

.sager-list-thumb--tabtkommission[b-hmwz5mp52f] { background: rgba(244, 67, 54, 0.08); }

.sager-list-thumb i[b-hmwz5mp52f] {
    font-size: 18px;
    opacity: 0.22;
}

.sager-list-thumb--vurdering i[b-hmwz5mp52f] { color: var(--mud-palette-warning); opacity: 0.30; }

.sager-list-thumb--aktiv     i[b-hmwz5mp52f] { color: var(--mud-palette-success); opacity: 0.30; }

.sager-list-thumb--tilsalg   i[b-hmwz5mp52f] { color: var(--mud-palette-primary); opacity: 0.25; }

.sager-list-thumb--undersalg    i[b-hmwz5mp52f] { color: var(--mud-palette-info); opacity: 0.30; }

.sager-list-thumb--endeligsalg  i[b-hmwz5mp52f] { color: var(--mud-palette-secondary); opacity: 0.30; }

.sager-list-thumb--solgt     i[b-hmwz5mp52f] { color: var(--mud-palette-text-disabled); opacity: 0.22; }

.sager-list-thumb--retur        i[b-hmwz5mp52f] { color: var(--mud-palette-text-disabled); opacity: 0.28; }

.sager-list-thumb--tabtkommission i[b-hmwz5mp52f] { color: var(--mud-palette-error); opacity: 0.30; }

.sager-list-thumb-img[b-hmwz5mp52f] {
    width: 44px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

/* ── Adresse truncation ── */

.sager-cell-address[b-hmwz5mp52f] {
    display: block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Ejendomstype truncation ── */

.sager-cell-ejendomstype[b-hmwz5mp52f] {
    display: block;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Mægler-kolonner ── */

.sager-col-broker[b-hmwz5mp52f] {
    min-width: 80px;
    max-width: 160px;
}

.sager-col-broker-th[b-hmwz5mp52f] {
    padding: 0 !important;
    vertical-align: middle;
    text-align: left !important;
}

.sager-broker-name[b-hmwz5mp52f] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

/* ── Thumbnail hover popup ── */

.sager-thumb-wrap[b-hmwz5mp52f] {
    position: relative;
    display: inline-block;
    /* Lift above the full-row RowLink overlay (#44464) so the hover popup fires;
       without this the overlay captures the pointer and :hover never hits. */
    z-index: 1;
}

.sager-thumb-popup[b-hmwz5mp52f] {
    background: var(--mud-palette-background);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    padding: 4px;
}

.sager-thumb-popup-img[b-hmwz5mp52f] {
    width: 220px;
    height: 160px;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 2px);
    display: block;
}

/* ── Aktivitetsstatus-kolonne ── */

.sager-col-aktivitet[b-hmwz5mp52f] {
    width: 1%;
    white-space: nowrap;
}

/* ── Responsiv ── */

@media (max-width: 599px) {
    /* MudTable uses table-layout: fixed, which split Adresse and Status evenly (144px each) and
           cut every address short. Status only needs room for its longest label; the address takes
           the rest and wraps. Column 5 = Status (3 and 4 are hidden on phones but still count). */

    .mensen-table-wrapper th:nth-child(5)[b-hmwz5mp52f],
        .mensen-table-wrapper td:nth-child(5)[b-hmwz5mp52f] {
            width: 100px;
        }

    .sager-cell-address[b-hmwz5mp52f] {
            max-width: none;
            white-space: normal;
        }

    /* Tabel: tving til kortets bredde: ingen horisontal overflow */

    [b-hmwz5mp52f] .mud-table-container table {
            table-layout: fixed;
            width: 100%;
        }
}

tr.sager-row--changed > td[b-hmwz5mp52f] { animation: sager-row-flash-b-hmwz5mp52f 3s ease-out; }

@keyframes sager-row-flash-b-hmwz5mp52f {
    from { background-color: var(--mud-palette-primary-hover); }
    to { background-color: transparent; }
}
/* /Components/Pages/Sager/CaseNotesCard.razor.rz.scp.css */
/* Centred empty state like the Dokumenter card beside it. Scoped here, so NotesSection keeps
   its left-aligned look in the aftale popup and on Personer. .notes-section lifts the
   specificity above NotesSection's own .notes-empty rule, which the bundle emits later. */
.case-notes-body[b-4m01ho667f]  .notes-section .notes-empty {
    align-items: center;
    gap: 4px;
    padding: 20px 12px;
    text-align: center;
}

/* !important to beat the icon-title class's own !important. */
.case-notes-body[b-4m01ho667f]  .notes-empty-icon {
    font-size: 40px !important;
    margin-bottom: 4px;
}

.case-notes-body[b-4m01ho667f]  .notes-empty .mud-typography-body2 {
    color: var(--mud-palette-text-secondary);
}

/* Long Mindworking notes filled the whole column; the note dialog shows the full text. */
.case-notes-body[b-4m01ho667f]  .notes-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
}
/* /Components/Pages/Sager/CaseSentToCard.razor.rz.scp.css */
/* A row opens what was sent under it, so it reads as clickable. */
.case-sent-row[b-uz6ywz28ft] {
    cursor: pointer;
}

.case-sent-text[b-uz6ywz28ft] {
    white-space: pre-line;
}

.case-sent-docs[b-uz6ywz28ft] {
    margin: 0;
    padding-left: 18px;
}
/* /Components/Pages/Sager/PotentialBuyersCard.razor.rz.scp.css */
/* Active buyer sub-tab reads like a chosen dropdown item: dark frame and bold text, not red fill.
   .mud-button-root lifts it past .card-actions' !important border and 400 weight. */
[b-759ji6c68r] .mud-button-root.sag-buyer-tab--active,
[b-759ji6c68r] .mud-button-root.sag-buyer-tab--active:hover {
    border-color: var(--mud-palette-text-primary) !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 700 !important;
}

.sag-tab-count[b-759ji6c68r] {
    margin-left: 4px;
    font-size: var(--mud-typography-caption-size);
    opacity: 0.7;
}

/* The card is pa-4, so the full-width divider pulls back 16px. */
[b-759ji6c68r] .sag-divider-full {
    flex-grow: 0;
    width: auto;
    margin-left: -16px;
    margin-right: -16px;
}

/* "Vis flere" below the table, with a little air above. */
.sag-buyer-more[b-759ji6c68r] {
    margin-top: 12px;
}

/* Bulk bar: shown once at least one buyer is ticked. Count + "Send til valgte". */
.sag-buyer-bulk-bar[b-759ji6c68r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* Table like the søgeprofil list. Negative margin cancels the card's pa-4, so the rows run edge to
   edge like the card's own lines. */
.sag-buyer-table-wrap[b-759ji6c68r] {
    margin: 0 -16px;
    border-top: 1px solid var(--mud-palette-divider);
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
}

.sag-buyer-table-wrap[b-759ji6c68r]  thead th {
    padding: 10px 12px;
    background: var(--mud-palette-surface);
    font-size: var(--mud-typography-overline-size) !important;
    letter-spacing: 0.08em !important;
    color: var(--mud-palette-text-secondary) !important;
}

.sag-buyer-table-wrap[b-759ji6c68r]  tbody td {
    padding: 12px;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-secondary);
    border-bottom-color: var(--color-border-light);
}

.sag-buyer-table-wrap[b-759ji6c68r]  :is(th, td):first-child { padding-left: 24px; }
.sag-buyer-table-wrap[b-759ji6c68r]  :is(th, td):last-child { padding-right: 24px; }

.sag-buyer-table-wrap[b-759ji6c68r]  tbody tr:hover td {
    background: var(--mud-palette-surface);
}

.sag-buyer-table-wrap[b-759ji6c68r]  td[data-label="Prisinterval"],
.sag-buyer-table-wrap[b-759ji6c68r]  td[data-label="Rum"] {
    color: var(--mud-palette-text-primary);
}

/* Percentages, not px: with fixed widths Boligtyper took all spare room on wide screens. */
.sag-buyer-table-wrap[b-759ji6c68r]  .sag-col-name { width: 20%; }
.sag-buyer-table-wrap[b-759ji6c68r]  .sag-col-date { width: 12%; }
.sag-buyer-table-wrap[b-759ji6c68r]  .sag-col-price { width: 12%; }
.sag-buyer-table-wrap[b-759ji6c68r]  .sag-col-rooms { width: 8%; }
.sag-buyer-table-wrap[b-759ji6c68r]  .sag-col-status { width: 12%; }
/* Sized for at most four 32px buttons (Like, Afvis, email, SMS) with 6px gaps; widen it when a button is added. */
.sag-buyer-table-wrap[b-759ji6c68r]  .sag-col-actions { width: 166px; }

.sag-buyer-table-wrap[b-759ji6c68r]  .leads-sort-icon .mud-icon-root {
    font-size: var(--mud-typography-caption-size) !important;
    color: var(--color-text-muted);
    vertical-align: middle;
}

.sag-buyer-table-wrap[b-759ji6c68r]  .leads-sort-icon--active .mud-icon-root {
    color: var(--mud-palette-primary);
}

.sag-buyer-empty[b-759ji6c68r] {
    color: var(--color-border-hover);
}

.sag-col-check[b-759ji6c68r] { width: 28px; }
/* "0 kr. - 3.26 mio. kr." and "2-3 vær." read as one value; don't break them mid-way. */
.sag-buyer-nowrap[b-759ji6c68r] { white-space: nowrap; }
.sag-col-icon[b-759ji6c68r] { width: 28px; }

/* Trim MudCheckBox's ripple padding so the tick takes less width. */
.sag-col-check[b-759ji6c68r]  .mud-button-root {
    padding: 2px;
}

.sag-th-sortable[b-759ji6c68r] {
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

button.sag-th-sortable[b-759ji6c68r] {
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
    padding: 0;
}

/* The 260px basis wraps the checkboxes onto their own line on a phone instead of crushing the search. */
.sag-buyer-search[b-759ji6c68r] {
    flex: 1 1 260px;
    min-width: 0;
}

.sag-buyer-search[b-759ji6c68r]  .mud-input-outlined {
    min-height: 44px;
    border-radius: 10px;
}

/* Match "Kun købsklar" to the metadata rows' caption size. */
.sag-buyer-ready[b-759ji6c68r]  .mud-typography {
    font-size: var(--mud-typography-caption-size);
}

.sag-pill-group[b-759ji6c68r] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.sag-pill[b-759ji6c68r] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: var(--mud-typography-caption-size);
    white-space: nowrap;
    /* -gray, not --color-bg-subtle: that alias points at -grey, which MudBlazor does not define. */
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.sag-buyer-actions[b-759ji6c68r] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.sag-buyer-actions[b-759ji6c68r]  .mud-icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-sm);
}

.sag-buyer-actions[b-759ji6c68r]  .mud-icon-button:hover {
    background: var(--mud-palette-table-hover);
}

.sag-buyer-actions[b-759ji6c68r]  .mud-icon-button .mud-icon-root {
    font-size: var(--icon-size-row-action);
}

[b-759ji6c68r] .sag-buyer-last-contact {
    font-size: var(--mud-typography-overline-size);
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}

[b-759ji6c68r] .sag-buyer-last-contact .mud-icon-root {
    font-size: var(--mud-typography-caption-size);
}

.sag-buyer-more[b-759ji6c68r]  .mud-button-root {
    padding: 14px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* ── Phone: select-all outside the hidden thead, and each buyer as a card (5b design) ── */
.sag-buyer-select-all-phone[b-759ji6c68r] { display: none; }

@media (max-width: 599px) {
    /* Stands in for the hidden thead: "Vælg alle" left, the active sort right. */
    .sag-buyer-select-all-phone[b-759ji6c68r] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -16px;
        padding: 4px 16px;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-divider);
    }

    .sag-buyer-select-all-phone[b-759ji6c68r]  .mud-typography,
    .sag-buyer-sort-phone[b-759ji6c68r] {
        font-size: var(--mud-typography-overline-size);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

    .sag-buyer-select-all-phone[b-759ji6c68r]  .leads-sort-icon .mud-icon-root {
        font-size: var(--mud-typography-caption-size) !important;
        color: var(--mud-palette-primary);
        vertical-align: middle;
    }

    .sag-buyer-table-wrap[b-759ji6c68r] { border-top: none; }

    /* The 44px touch target centres the box in its button; put the box on the card's left edge. */
    .sag-buyer-select-all-phone[b-759ji6c68r]  .mud-button-root,
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-col-check .mud-button-root {
        justify-content: flex-start;
        padding: 0;
    }

    /* Each buyer is a card laid out on a grid (5b design), so the cells sit where the design
       puts them instead of stacking under data-label captions. */
    .sag-buyer-table-wrap[b-759ji6c68r]  .crm-table-cards tbody tr {
        display: grid;
        grid-template-columns: 22px auto 1fr auto auto;
        grid-template-areas:
            "check name   name   fav     date"
            "check price  rooms  rooms   rooms"
            "check types  types  types   types"
            "check status status actions actions";
        column-gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--color-border-light);
    }

    .sag-buyer-table-wrap[b-759ji6c68r]  .crm-table-cards tbody td {
        display: block;
        padding: 0 !important;
        font-size: var(--mud-typography-body2-size);
    }

    .sag-buyer-table-wrap[b-759ji6c68r]  .crm-table-cards tbody td[data-label]::before { display: none; }

    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-col-check { grid-area: check; }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-cell-name { grid-area: name; min-width: 0; }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-cell-fav { grid-area: fav; }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-cell-date {
        grid-area: date;
        font-size: var(--mud-typography-caption-size);
        color: var(--color-text-muted);
        text-align: right;
    }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-cell-price { grid-area: price; margin-top: 8px; }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-cell-rooms { grid-area: rooms; margin-top: 8px; }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-cell-rooms .cell-text::before { content: "· "; }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-cell-rooms .sag-buyer-empty { display: none; }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-cell-types { grid-area: types; margin-top: 8px; }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-cell-status { grid-area: status; margin-top: 12px; align-self: center; }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-cell-actions { grid-area: actions; margin-top: 12px; }

    /* Name on its own line, mail and mobil share the next one. */
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-buyer-cell {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 4px;
        min-height: 0;
    }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-buyer-name {
        flex-basis: 100%;
        font-size: var(--mud-typography-body1-size);
    }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-buyer-contact {
        font-size: var(--mud-typography-caption-size);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sag-buyer-table-wrap[b-759ji6c68r]  .sag-buyer-contact + .sag-buyer-contact::before { content: "· "; }

    /* 44px touch targets on phones; borderless like desktop. */
    .sag-buyer-actions[b-759ji6c68r]  .mud-icon-button {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
    .sag-buyer-actions[b-759ji6c68r]  .mud-icon-button .mud-icon-root {
        font-size: var(--mud-typography-h5-size);
    }

    .sag-buyer-more[b-759ji6c68r] {
        margin: 0 -16px;
        border-top: 1px solid var(--color-bg-selected);
    }
}
/* /Components/Pages/Sager/SagDetaljer.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  SAG DETALJER - Scoped styles                ══ */
/* ══  Layout for sagsdetaljesiden                 ══ */
/* ══════════════════════════════════════════════════ */

/* Darker section lines on this page only, until the theme Divider changes app-wide.
   --color-border-card is resolved on :root, so it has to be re-pointed here too. */
.page-content[b-2l3vnuoijc] {
    --mud-palette-divider: var(--color-border-section);
    --color-border-card: var(--color-border-section);
}

/* A trial of framed cards, against the 2026-07-16 no-frame rule (--card-border), kept to the sag
   page for now. ::deep because the class sits on a MudPaper. */
[b-2l3vnuoijc] .pers-det-card {
    border: 1px solid var(--color-border-card);
}

/* ── Hero: billede til venstre, sagens hoveddata til højre ── */
.sag-hero[b-2l3vnuoijc] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.sag-hero__media[b-2l3vnuoijc] {
    flex-shrink: 0;
}

.sag-hero__img[b-2l3vnuoijc] {
    width: 248px;
    height: 168px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--mud-palette-divider);
    display: block;
}

.sag-hero__placeholder[b-2l3vnuoijc] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-disabled);
}

.sag-hero__placeholder[b-2l3vnuoijc]  .mud-icon-root {
    font-size: 40px;
}

.sag-hero__body[b-2l3vnuoijc] {
    flex: 1;
    min-width: 0;
}

/* The photo would squeeze the text on a narrow screen, so it moves above it. */
@media (max-width: 599px) {
    .sag-hero[b-2l3vnuoijc] { flex-direction: column; }
    /* The Statusmøde pill sits one level deeper than pill-anchor-row reaches, so fill the cell
       and cut a long label instead of running into the On track pill. */
    .sag-hero__body[b-2l3vnuoijc]  .pill-anchor-row .pill-select { flex: 1 1 auto; min-width: 0; }
    .sag-hero__body[b-2l3vnuoijc]  .pill-anchor-row .pill-select__btn { width: 100%; min-width: 0; }
    .sag-hero__body[b-2l3vnuoijc]  .pill-anchor-row .pill-select__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    /* Statusmøde carries the long label, so it gets 70 %; the !important matches the shared rule. */
    .sag-hero__body[b-2l3vnuoijc]  .pill-anchor-row { grid-template-columns: 7fr 3fr !important; }
    .sag-hero__body[b-2l3vnuoijc]  .pill-anchor-row > .mud-button-root { justify-content: center; }
    .sag-hero__media[b-2l3vnuoijc] { width: 100%; }
    .sag-hero__img[b-2l3vnuoijc] { width: 100%; }
}

.sag-hero[b-2l3vnuoijc]  .sag-statusmoede__days {
    width: 110px;
}

/* Nøgletal strip under the hero row; empty cells are left out in markup, not hidden here.
   Negative margins against pa-4 so its lines reach the card edge. */
.sag-hero__stats[b-2l3vnuoijc] {
    display: flex;
    flex-wrap: wrap;
    margin: 20px -16px 0;
    border-top: 1px solid var(--mud-palette-divider);
}

.sag-hero__stat[b-2l3vnuoijc] {
    flex: 1 1 140px;
    padding: 12px 16px;
    border-left: 1px solid var(--mud-palette-divider);
}

.sag-hero__stat:first-child[b-2l3vnuoijc] {
    border-left: none;
}

.sag-hero__stat[b-2l3vnuoijc]  .sag-hero__stat-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sag-hero__stat[b-2l3vnuoijc]  .sag-hero__stat-value {
    font-weight: 700;
}

/* "2 planlagt" and the over-limit info icon next to the value instead of under it. */
.sag-hero__stat-line[b-2l3vnuoijc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Same ph-info glyph as the calendar's booking hint, red to match the over-limit value. */
.sag-hero__stat-info[b-2l3vnuoijc] {
    font-size: 16px;
    color: var(--mud-palette-error);
    cursor: help;
}

/* Folded-out property facts start on a fresh row, and the last one stretches to the right edge so
   the row has no empty slot. */
.sag-hero__stat:not(.sag-hero__stat--fact) + .sag-hero__stat--fact[b-2l3vnuoijc] {
    grid-column-start: 1;
}

.sag-hero__stat--fact:last-child[b-2l3vnuoijc] {
    grid-column-end: -1;
}

/* Open on a wide screen, the strip becomes a grid with one column per nøgletal (count set in the
   code-behind), so each fact sits straight under one. Closed, the strip keeps its flex layout. */
@media (min-width: 960px) {
    .sag-hero__stats--with-facts[b-2l3vnuoijc] { display: grid; }
    .sag-hero__stats--cols-1[b-2l3vnuoijc] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sag-hero__stats--cols-2[b-2l3vnuoijc] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sag-hero__stats--cols-3[b-2l3vnuoijc] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sag-hero__stats--cols-4[b-2l3vnuoijc] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sag-hero__stats--cols-5[b-2l3vnuoijc] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sag-hero__stats--cols-6[b-2l3vnuoijc] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sag-hero__stats--cols-7[b-2l3vnuoijc] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .sag-hero__stats--cols-8[b-2l3vnuoijc] { grid-template-columns: repeat(8, minmax(0, 1fr)); }

    .sag-hero__stats--with-facts .sag-hero__stat--fact[b-2l3vnuoijc] {
        border-top: 1px solid var(--mud-palette-divider);
    }

    .sag-hero__stat:not(.sag-hero__stat--fact) + .sag-hero__stat--fact[b-2l3vnuoijc] {
        border-left: none;
    }
}

/* The strip follows the hero card's width, not the screen's: on an iPad the menu takes room, so
   the card is narrower than the breakpoint suggests and the wrapping flex left a 5 + 3 split with
   lines missing. The query measures the card's content box, and the strip bleeds 32px wider into
   the pa-4 padding, so a row of N 140px cells needs N x 140 - 32: below 1088px (eight) it becomes a
   fixed grid of four, below 528px (four) two on a phone.
   Each cell draws its right and bottom line as a shadow, clipped at the card edge, so a row needs no
   first/last-cell rules. Sits after the cols-N rules so it wins over them on an iPad with the facts open. */
[b-2l3vnuoijc] .sag-hero-card {
    container-type: inline-size;
}

@container (max-width: 1087.98px) {
    .sag-hero__stats[b-2l3vnuoijc],
    .sag-hero__stats--with-facts[b-2l3vnuoijc] {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: hidden;
    }

    .sag-hero__stats .sag-hero__stat[b-2l3vnuoijc] {
        border: none;
        box-shadow: 1px 0 0 var(--mud-palette-divider), 0 1px 0 var(--mud-palette-divider);
    }

    /* The last nøgletal and the last fact span what is left of their row, so a sag missing a figure
       leaves no hole. An auto-placed grid-column-end: -1 would only move the cell to the last column. */
    .sag-hero__stat--fact:last-child[b-2l3vnuoijc] {
        grid-column-end: auto;
    }

    .sag-hero__stat:not(.sag-hero__stat--fact):not(:has(+ :not(.sag-hero__stat--fact))):nth-child(4n+1)[b-2l3vnuoijc],
    .sag-hero__stat--fact:last-child:nth-child(4n+1 of .sag-hero__stat--fact)[b-2l3vnuoijc] {
        grid-column-end: span 4;
    }

    .sag-hero__stat:not(.sag-hero__stat--fact):not(:has(+ :not(.sag-hero__stat--fact))):nth-child(4n+2)[b-2l3vnuoijc],
    .sag-hero__stat--fact:last-child:nth-child(4n+2 of .sag-hero__stat--fact)[b-2l3vnuoijc] {
        grid-column-end: span 3;
    }

    .sag-hero__stat:not(.sag-hero__stat--fact):not(:has(+ :not(.sag-hero__stat--fact))):nth-child(4n+3)[b-2l3vnuoijc],
    .sag-hero__stat--fact:last-child:nth-child(4n+3 of .sag-hero__stat--fact)[b-2l3vnuoijc] {
        grid-column-end: span 2;
    }
}

@container (max-width: 527.98px) {
    .sag-hero__stats[b-2l3vnuoijc],
    .sag-hero__stats--with-facts[b-2l3vnuoijc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* !important here and on the odd-cell span below: the four-column spans above are more specific
       and would otherwise still apply. */
    .sag-hero__stats .sag-hero__stat[b-2l3vnuoijc] {
        grid-column-end: auto !important;
    }

    .sag-hero__stat:not(.sag-hero__stat--fact):not(:has(+ :not(.sag-hero__stat--fact))):nth-child(odd)[b-2l3vnuoijc],
    .sag-hero__stat--fact:last-child:nth-child(odd of .sag-hero__stat--fact)[b-2l3vnuoijc] {
        grid-column-end: span 2 !important;
    }
}

/* Runs to the card edge like the strip above it. */
.sag-hero__facts-toggle[b-2l3vnuoijc] {
    display: flex;
    justify-content: center;
    margin: 0 -16px;
    padding: 2px 0;
    border-top: 1px solid var(--mud-palette-divider);
}

/* The footer runs to the card edge, hence the negative margins against pa-4. */
.sag-hero__footer[b-2l3vnuoijc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 -16px -16px;
    padding: 10px 16px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.sag-hero__org[b-2l3vnuoijc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.sag-hero__org[b-2l3vnuoijc]  .sag-hero__org-icon {
    font-size: var(--icon-size-sub);
    color: var(--mud-palette-text-secondary);
}

/* ── Kontaktinfo-række ── */
.sag-contact-info[b-2l3vnuoijc] {
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Dokument-link ── */
.sag-doc-link[b-2l3vnuoijc] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.sag-doc-link:hover[b-2l3vnuoijc] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

/* Send appears next to Vælg alle as soon as a document is ticked. */
.sag-doc-select-all[b-2l3vnuoijc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* ── Sælger-række ── */
.sag-seller-row + .sag-seller-row[b-2l3vnuoijc] {
    border-top: 1px solid var(--mud-palette-divider);
}

/* Row lines run edge to edge in the card; the content keeps the card's inset. */
.sag-seller-row[b-2l3vnuoijc] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 calc(-1 * var(--sag-card-pad, 16px));
    padding-left: var(--sag-card-pad, 16px);
    padding-right: var(--sag-card-pad, 16px);
}

/* ── Dokument-række ── */
/* After .sag-seller-row on purpose: the tighter gap must win the cascade. */
.sag-doc-row[b-2l3vnuoijc] {
    gap: 4px;
}

.sag-doc-row__info[b-2l3vnuoijc] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sag-doc-row__icon[b-2l3vnuoijc] {
    font-size: var(--icon-size-sub);
    color: var(--mud-palette-text-secondary);
}

.sag-doc-row[b-2l3vnuoijc]  .sag-doc-name {
    font-weight: 700;
}

/* MudBlazor gives a full-width divider flex-grow: 1, so in a stretched flex card it swallowed the
   spare height under the line; width: auto plus the negative margins reach both card edges. */
.sag-saelger-docs[b-2l3vnuoijc]  .sag-divider-full {
    flex-grow: 0;
    width: auto;
    margin-left: calc(-1 * var(--sag-card-pad, 16px));
    margin-right: calc(-1 * var(--sag-card-pad, 16px));
}

.sag-seller-row__cell[b-2l3vnuoijc] {
    min-width: 0;
}

/* Contact card: name on top, mail and phone on one line below; four columns do not fit the card.
   Mail and phone open the contact menu, so the row needs no separate action buttons. */
.sag-seller-row--grid[b-2l3vnuoijc] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "avatar name"
        ". contact";
    gap: 4px 12px;
    align-items: start;
}

.sag-seller-row--grid[b-2l3vnuoijc]  .sag-seller-row__avatar { grid-area: avatar; margin-top: 2px; }

/* One flex line, so mail and phone share a centre line and wrap together on narrow cards. */
.sag-seller-row__contact[b-2l3vnuoijc] {
    grid-area: contact;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    min-width: 0;
}

/* Relation sits after the name and drops to its own line when the name is long. */
.sag-seller-row__name[b-2l3vnuoijc] {
    grid-area: name;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    min-width: 0;
}

.sag-seller-row__name[b-2l3vnuoijc]  .mensen-cell-name__primary { font-weight: 600; }

.sag-seller-row--grid[b-2l3vnuoijc]  .contact-action {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Detail-celle muted icon ── */
.sag-detail-icon-muted[b-2l3vnuoijc] {
    font-size: 16px;
    color: var(--mud-palette-text-secondary);
}

/* ── Kontakt-icon ── */
.sag-contact-icon[b-2l3vnuoijc] {
    font-size: 14px;
}

/* ── Noter, Dokumenter og Sælger side om side i lige store kolonner ── */
/* Row gap 0: each card's mb-3 already spaces stacked cards, so every gap stays 12px. */
.sag-saelger-docs[b-2l3vnuoijc] {
    display: flex;
    gap: 0 12px;
    align-items: stretch;
}

/* The classes sit on MudPaper, and scoped CSS never reaches a child component's root element. */
.sag-saelger-docs[b-2l3vnuoijc]  .sag-saelger-docs__main {
    /* pa-3 like Dokumenter, so the headers and their lines line up across the row. */
    --sag-card-pad: 12px;
    flex: 1 1 0;
    min-width: 0;
}

/* Dokumenter sits left of Sælger on wide screens; stacked, Sælger stays first. */
.sag-saelger-docs[b-2l3vnuoijc]  .sag-saelger-docs__side {
    /* Dokumenter is pa-3, so its full-width lines pull back 12px, not 16px. */
    --sag-card-pad: 12px;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    order: -1;
}

/* Noter sits left of Dokumenter on wide screens; stacked, it comes last. */
.sag-saelger-docs[b-2l3vnuoijc]  .sag-saelger-docs__notes {
    --sag-card-pad: 12px;
    flex: 1 1 0;
    min-width: 0;
    order: -2;
}

/* Keeps the "Vis alle" button at the bottom when the seller card is the taller of the two. */
.sag-doc-actions[b-2l3vnuoijc] {
    margin-top: auto;
}

/* Tablet: three columns get too narrow, so Noter and Dokumenter share a row and Sælger goes full width under them. */
@media (min-width: 960px) and (max-width: 1279.98px) {
    .sag-saelger-docs[b-2l3vnuoijc] {
        flex-wrap: wrap;
    }

    .sag-saelger-docs[b-2l3vnuoijc]  .sag-saelger-docs__notes,
    .sag-saelger-docs[b-2l3vnuoijc]  .sag-saelger-docs__side {
        flex: 1 1 calc(50% - 12px);
    }

    .sag-saelger-docs[b-2l3vnuoijc]  .sag-saelger-docs__main {
        flex: 1 1 100%;
    }
}

/* MudBlazor's md breakpoint, the same break as the grid around it. */
@media (max-width: 959.98px) {
    .sag-saelger-docs[b-2l3vnuoijc] {
        flex-direction: column;
    }

    .sag-saelger-docs[b-2l3vnuoijc]  .sag-saelger-docs__side,
    .sag-saelger-docs[b-2l3vnuoijc]  .sag-saelger-docs__notes {
        flex: 1 1 auto;
        order: 0;
    }
}

/* ── Sagsforløb: horizontal stripe, Oprettet to Solgt ── */
.sag-forloeb[b-2l3vnuoijc] {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sag-forloeb__step[b-2l3vnuoijc] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding-top: 20px;
    padding-right: 8px;
    overflow-wrap: anywhere;
}

/* Zero-width end point, so the line before it runs all the way to the right edge;
   the label overflows to the left of its dot. */
.sag-forloeb__step:last-child[b-2l3vnuoijc] {
    flex: 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 0;
    white-space: nowrap;
    overflow-wrap: normal;
}

/* The background-coloured border is the gap between the dot and the line. */
.sag-forloeb__dot[b-2l3vnuoijc] {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-background);
    background: var(--mud-palette-text-disabled);
}

.sag-forloeb__step:last-child .sag-forloeb__dot[b-2l3vnuoijc] {
    left: auto;
    right: -2px;
}

.sag-forloeb__step--completed .sag-forloeb__dot[b-2l3vnuoijc] {
    background: var(--mud-palette-success);
}

.sag-forloeb__step--active .sag-forloeb__dot[b-2l3vnuoijc] {
    background: var(--mud-palette-primary);
}

.sag-forloeb__step:not(:last-child)[b-2l3vnuoijc]::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 10px;
    right: 0;
    height: 2px;
    background: var(--mud-palette-divider);
}

/* Empty Dokumenter card: icon + body2 + caption, as in patterns.md. */
.sag-docs-empty[b-2l3vnuoijc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 12px;
    text-align: center;
}

.sag-docs-empty[b-2l3vnuoijc]  .sag-docs-empty-icon {
    font-size: 40px;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 4px;
}

/* Directions link: reads as the text, like the aftale page's address. */
.sag-address-map[b-2l3vnuoijc] {
    color: inherit;
    text-decoration: none;
}

.sag-address-map:hover[b-2l3vnuoijc],
.sag-address-map:focus-visible[b-2l3vnuoijc] { text-decoration: underline; }
/* /Components/Pages/Sager/Sager.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */

/* ══  SAGER - Scoped styles                       ══ */

/* ══  Stat-kort grid + liste-kort layout          ══ */

/* ══════════════════════════════════════════════════ */

/* ── Footer ─────────────────────────────────────── */

.mensen-card-footer[b-xj557pme2d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.mensen-card-footer .mud-pagination button[b-xj557pme2d] {
    font-weight: 400;
    font-size: var(--mud-typography-body2-size);
}

.mensen-card-footer .mud-pagination .mud-button-filled[b-xj557pme2d] {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    font-weight: 500;
    box-shadow: none;
}

.mensen-card-footer .mud-pagination .mud-button-filled:hover[b-xj557pme2d] {
    background: var(--mud-palette-text-secondary);
    box-shadow: none;
}

/* ── Stats strip (matcher Dashboard præcist) ── */

.sager-stats-strip[b-xj557pme2d] {
    display: flex;
    align-items: stretch;
    background: var(--mud-palette-background);
    border-radius: 5px;
    overflow: hidden;
}

.sager-stat-item[b-xj557pme2d] {
    flex: 1;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
}

.sager-stat-item:hover[b-xj557pme2d] {
    background: var(--mud-palette-action-disabled-background);
}

.sager-stat-item + .sager-stat-item[b-xj557pme2d]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    width: 1px;
    background: var(--color-tertiary-soft);
}

.sager-stat-top[b-xj557pme2d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sager-stat-badge[b-xj557pme2d] {
    font-size: var(--mud-typography-h3-size);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-family: 'Home', sans-serif;
    flex-shrink: 0;
    line-height: 1;
    transition: color var(--transition-fast);
}

.sager-stat-text[b-xj557pme2d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sager-stat-label[b-xj557pme2d] {
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.sager-stat-sub[b-xj557pme2d] {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

/* ── Aktivt filter: farvet tal per type ── */

.sager-stat-item--active[b-xj557pme2d] {
    background: var(--mud-palette-action-disabled-background);
}

.sager-stat-item--active.sager-stat-item--vurdering .sager-stat-badge[b-xj557pme2d] { color: var(--mud-palette-warning); }

.sager-stat-item--active.sager-stat-item--aktiv     .sager-stat-badge[b-xj557pme2d] { color: var(--mud-palette-success); }

.sager-stat-item--active.sager-stat-item--tilsalg   .sager-stat-badge[b-xj557pme2d] { color: var(--mud-palette-primary); }

.sager-stat-item--active.sager-stat-item--solgt      .sager-stat-badge[b-xj557pme2d] { color: var(--mud-palette-text-secondary); }

.sager-stat-item--active.sager-stat-item--retur      .sager-stat-badge[b-xj557pme2d] { color: var(--mud-palette-error); }

.sager-stat-item--active.sager-stat-item--tabtkommission .sager-stat-badge[b-xj557pme2d] { color: var(--mud-palette-error); }

/* ── List header (udenfor kortet) ── */

.mensen-list-header[b-xj557pme2d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.sager-list-title-group[b-xj557pme2d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mensen-list-title[b-xj557pme2d] {
    font-size: var(--mud-typography-subtitle1-size);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.mensen-card-search[b-xj557pme2d] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mensen-card-search .mensen-search[b-xj557pme2d] {
    min-width: 260px;
}

/* ── Dato-popover ── */

.mensen-date-popover-wrap[b-xj557pme2d] {
    position: relative;
    flex: 0 0 auto;
    min-width: unset;
}

.mensen-date-toggle-btn[b-xj557pme2d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 40px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.mensen-date-toggle-btn:hover[b-xj557pme2d] {
    border-color: var(--mud-palette-text-disabled);
    color: var(--mud-palette-text-primary);
}

.mensen-date-toggle-btn--active[b-xj557pme2d] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: var(--color-brand-alpha-05);
}

.mensen-date-toggle-btn[b-xj557pme2d]  .mud-icon-root {
    font-size: 16px !important;
}

.mensen-date-toggle-dot[b-xj557pme2d] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    flex-shrink: 0;
}

.mensen-date-popover-overlay[b-xj557pme2d] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.mensen-date-popover[b-xj557pme2d] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 230px;
}

.mensen-date-popover-reset[b-xj557pme2d] {
    appearance: none;
    background: none;
    border: none;
    padding: 2px 0 0;
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    color: var(--mud-palette-text-disabled);
    cursor: pointer;
    text-align: right;
    align-self: flex-end;
    transition: color var(--transition-fast);
}

.mensen-date-popover-reset:hover[b-xj557pme2d] {
    color: var(--mud-palette-primary);
}

/* ── Filter-knap: ::deep icon-farve overrides ── */

.mensen-filter-btn--active[b-xj557pme2d]  .mud-icon-root {
    color: var(--mud-palette-primary-contrasttext) !important;
}

/* ── Liste-thumbnail ── */

.sager-col-thumb[b-xj557pme2d] {
    width: 60px;
    padding-right: 0 !important;
}

/* ── Tabs-bar (tabs + view-toggle på én linje) ── */

.sager-tabs-bar[b-xj557pme2d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sager-tabs-actions[b-xj557pme2d] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── View-toggle (liste / grid) ── */

.sager-view-toggle[b-xj557pme2d] {
    display: flex;
    gap: 2px;
    background: var(--mud-palette-action-disabled-background);
    border-radius: 10px;
    padding: 3px;
}

.sager-view-toggle-btn[b-xj557pme2d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--mud-palette-text-disabled);
    cursor: pointer;
    font-size: 16px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sager-view-toggle-btn:hover[b-xj557pme2d] {
    color: var(--mud-palette-text-primary);
}

.sager-view-toggle-btn--active[b-xj557pme2d] {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

/* ── Responsiv ── */

@media (max-width: 599px) {
    .sager-stats-strip[b-xj557pme2d] {
            flex-wrap: wrap;
        }

    .sager-view-toggle-btn[b-xj557pme2d] {
            width: 44px;
            height: 44px;
        }

    /* Keeps its natural width in the right grid cell; the toggle is not a full-width pill. */

    .sager-view-toggle[b-xj557pme2d] {
            width: auto;
            justify-self: end;
        }

    .sager-stat-item[b-xj557pme2d] {
            flex: 1 1 calc(50% - 1px);
        }

    .sager-stat-item:nth-child(3)[b-xj557pme2d] {
            border-top: 1px solid var(--mud-palette-divider);
        }

    .sager-stat-item:nth-child(4)[b-xj557pme2d] {
            border-top: 1px solid var(--mud-palette-divider);
        }

    .sager-stat-item + .sager-stat-item[b-xj557pme2d]::before {
            display: none;
        }

    .sager-stat-item:nth-child(2n)[b-xj557pme2d]::before {
            display: none;
        }

    .mensen-list-header[b-xj557pme2d] {
            flex-direction: column;
            align-items: flex-start;
        }

    .mensen-card-search[b-xj557pme2d] {
            width: 100%;
        }

    .mensen-card-search .mensen-search[b-xj557pme2d] {
            min-width: 0;
            flex: 1;
        }
}
/* /Components/Pages/Search/Search.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  SEARCH - Scoped styles                      ══ */
/* ══  Søgeresultat tabelrækker og celler          ══ */
/* ══════════════════════════════════════════════════ */

/* ── Result rows ── */
.srch-result-row[b-64vimqgdin] { cursor: pointer; }
.srch-primary-cell[b-64vimqgdin] { font-weight: 600; }

/* Favorit-markør: fyldt amber stjerne efter kundens navn (kun for favoritter).
   Inline SVG med Phosphors star-fill-geometri — samme visuelle sprog som
   kundeliste/-profil/global søgning, uden Phosphors fill-vægt fra CDN. */
.srch-fav[b-64vimqgdin] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: -0.15em;
    color: var(--mud-palette-warning);
}
.srch-action-col[b-64vimqgdin] { width: 48px; text-align: right; }
.srch-col-thumb[b-64vimqgdin] { width: 64px; }

/* ── Sags-thumbnail (billede ellers hus-placeholder) ── */
.srch-sag-thumb-img[b-64vimqgdin] {
    width: 56px;
    height: 40px;
    border-radius: var(--radius-sm, 6px);
    object-fit: cover;
    display: block;
    background: var(--mud-palette-action-disabled-background);
}

.srch-sag-thumb[b-64vimqgdin] {
    width: 56px;
    height: 40px;
    border-radius: var(--radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-action-disabled-background);
    font-size: 20px;
}

/* ── Telefon: kort-tilstand via .crm-table-cards ── */
@media (max-width: 599px) {
    /* The whole card is the tap target, so the trailing arrow cell is noise. Ancestors added
       to outrank the card rule's `tbody td { display: flex }` in tables.css. */
    .mud-table tbody td.srch-action-col[b-64vimqgdin] { display: none; }
    .srch-col-thumb[b-64vimqgdin] { width: auto; }
    /* Long e-mails have no break opportunity and would run past the card edge. */
    .mud-table tbody td[data-label][b-64vimqgdin] { overflow-wrap: anywhere; }
}
/* /Components/Pages/Soegeprofiler/Soegeprofiler.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  SØGEPROFILER - Scoped styles                ══ */
/* ══  KPI-strip og tab-bar er fordelt til         ══ */
/* ══  SoegeprofilerKpiStrip/-TabBar .razor.css    ══ */
/* ══  ved dekomponeringen.                        ══ */
/* ══════════════════════════════════════════════════ */

/* ── Footer ─────────────────────────────────────── */
/* NB: De tre .mud-pagination-regler nedenfor er formodentlig døde
   (CSS-isolation scoper sidste selector; knapperne renderes af
   MudPagination uden scope-attribut). Flagget; urørt. */
.mensen-card-footer[b-l1fsqog1mz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.mensen-card-footer .mud-pagination button[b-l1fsqog1mz] {
    font-weight: 400;
    font-size: var(--mud-typography-body2-size);
}

.mensen-card-footer .mud-pagination .mud-button-filled[b-l1fsqog1mz] {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    font-weight: 500;
    box-shadow: none;
}

.mensen-card-footer .mud-pagination .mud-button-filled:hover[b-l1fsqog1mz] {
    background: var(--mud-palette-text-secondary);
    box-shadow: none;
}

/* ── Buyer cell ── */
.col-buyer[b-l1fsqog1mz] { max-width: 220px; }
.soeg-buyer-cell[b-l1fsqog1mz] { display: flex; flex-direction: column; min-width: 0; }
.soeg-buyer-name[b-l1fsqog1mz] { font-weight: 500; font-size: var(--mud-typography-body1-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soeg-buyer-email[b-l1fsqog1mz],
.soeg-buyer-phone[b-l1fsqog1mz] { font-size: var(--mud-typography-caption-size); color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soeg-buyer-favoriters[b-l1fsqog1mz] { font-size: var(--mud-typography-caption-size); color: var(--mud-palette-text-secondary); margin-top: 2px; display: inline-flex; align-items: center; gap: 4px; }

/* ── Hele-rækken-link (åbn i ny fane, #44464) ──
   Et usynligt <a> (RowLink) pr. celle dækker hele rækken, så browserens native "åbn i ny fane"
   (Cmd/Ctrl+klik, midterklik, højreklik) virker overalt. Ankeret er cellen, ikke rækken: WebKit
   laver ikke containing block af position:relative på <tr>. Interaktive celler får intet overlay
   og løftes over med z-index så de stadig kan klikkes. */
.soeg-row-link-host > td[b-l1fsqog1mz] { position: relative; }
.soeg-row-interactive[b-l1fsqog1mz] { position: relative; z-index: 1; }

/* Hver interaktiv celle er sin egen stacking-kontekst (z-index:1 over rækkelinket),
   hvilket ellers fanger en åben status-/købeklar-dropdown bag rækkerne nedenunder.
   Løft cellen med en åben dropdown over søskende-cellerne. */
.soeg-row-interactive:has(.dropdown-panel)[b-l1fsqog1mz] { z-index: 20; }

/* Boligtype-tooltippen skal over rækkelinket, ellers når hover den aldrig. Kun når der er skjulte
   typer, så pillerne ellers stadig åbner profilen ved klik. */
[b-l1fsqog1mz] .soeg-tip-root { position: relative; z-index: 1; min-width: 0; }
.soeg-tip-link[b-l1fsqog1mz] { display: block; color: inherit; text-decoration: none; }

/* ── Status wrap (positioning anchor for dropdown) ── */
.soeg-status-wrap[b-l1fsqog1mz] {
    position: relative;
    display: inline-block;
}

.soeg-status-panel[b-l1fsqog1mz] {
    left: 0;
    right: auto;
}

/* ── Status badge ── */
.soeg-status-badge[b-l1fsqog1mz] { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 20px; font-size: var(--mud-typography-caption-size); font-weight: 500; cursor: pointer; white-space: nowrap; }
.soeg-status-badge--active[b-l1fsqog1mz],
.soeg-status-badge--aktiv[b-l1fsqog1mz] { background: rgba(56,142,60,0.1); color: var(--mud-palette-success); }
.soeg-status-badge--inactive[b-l1fsqog1mz],
.soeg-status-badge--inaktiv[b-l1fsqog1mz],
.soeg-status-badge--ukendt[b-l1fsqog1mz] { background: rgba(0,0,0,0.06); color: var(--mud-palette-text-secondary); }

/* Købeklar-badge: outlined pil, farve sættes inline pr. buyerStatus-værdi (#42356). */
.soeg-buyerstatus-badge[b-l1fsqog1mz] { background: transparent; border: 1px solid var(--mud-palette-lines-inputs); color: var(--mud-palette-text-secondary); }

.soeg-status-caret[b-l1fsqog1mz]  .mud-icon-root { font-size: 13px !important; margin-left: 2px; margin-top: 5px; opacity: 0.6; }
/* Takes the caret's place while Købeklar saves; MudProgressCircular renders its own root, so ::deep. */
.soeg-status-wrap[b-l1fsqog1mz]  .soeg-status-spinner { width: 13px; height: 13px; margin-left: 4px; }

.soeg-status-dot--aktiv[b-l1fsqog1mz] { background: var(--color-text-success); }
.soeg-status-dot--inaktiv[b-l1fsqog1mz] { background: var(--color-text-soft); }

.soeg-check-icon[b-l1fsqog1mz]  .mud-icon-root { font-size: 14px !important; color: var(--color-success) !important; margin-left: auto; }

/* ── Areas edit panel ── */
/* NB: .soeg-areas-panel-klyngen + .soeg-price-panel nedenfor er DØDE
   (0 forekomster i markup - rester af fjernet inline-edit). Flagget;
   urørt - hører til den samlede oprydnings-PR. */
.soeg-areas-panel[b-l1fsqog1mz] { padding: 16px; min-width: 280px; }
.soeg-areas-header[b-l1fsqog1mz] { margin-bottom: 10px; }
.soeg-areas-header-title[b-l1fsqog1mz] { font-weight: 600; font-size: 0.85rem; display: block; margin-bottom: 2px; }
.soeg-areas-header-hint[b-l1fsqog1mz] { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }
.soeg-areas-input-row[b-l1fsqog1mz] { display: flex; gap: 6px; margin-bottom: 10px; }
.soeg-areas-chips[b-l1fsqog1mz] { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; }
.soeg-areas-empty[b-l1fsqog1mz] { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }
.soeg-areas-footer[b-l1fsqog1mz] { display: flex; justify-content: flex-end; gap: 6px; border-top: 1px solid var(--mud-palette-divider); padding-top: 10px; }

/* ── Areas display ── */
.soeg-areas-display[b-l1fsqog1mz] { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }

/* ── Ref ── */
.soeg-ref[b-l1fsqog1mz] { font-size: var(--mud-typography-caption-size); color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }

/* ── Pills (boligtyper, postnr., købeklar) ── */
.soeg-pill-group[b-l1fsqog1mz] { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
.soeg-pill[b-l1fsqog1mz] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    white-space: nowrap;
    background: rgba(0,0,0,0.05);
    color: var(--mud-palette-text-primary);
}
.soeg-pill--muted[b-l1fsqog1mz] { background: rgba(0,0,0,0.04); color: var(--mud-palette-text-secondary); }
.soeg-pill--status[b-l1fsqog1mz] { background: rgba(0,0,0,0.06); color: var(--mud-palette-text-secondary); }

/* ── Boligsituation (trunkeret fritekst) — bredere efter pen-kolonnen blev fjernet ── */
.soeg-truncate[b-l1fsqog1mz] { display: inline-block; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* ── Price panel (2 inputfelter) ── */
.soeg-price-panel[b-l1fsqog1mz] { display: flex; flex-direction: column; gap: 6px; min-width: 160px; padding: 10px 12px; }
.soeg-price-row[b-l1fsqog1mz] { display: flex; align-items: center; gap: 8px; }
.soeg-price-label[b-l1fsqog1mz] { font-size: var(--mud-typography-caption-size); font-weight: 600; color: var(--mud-palette-text-secondary); width: 24px; flex-shrink: 0; }

/* MudSimpleTable's container and the table wrapper both set overflow that clips
   absolutely-positioned dropdown panels. Override here so the status dropdown
   can extend beyond the table boundary. */
.mensen-table-wrapper[b-l1fsqog1mz] {
    overflow: visible;
}

.mensen-table-wrapper[b-l1fsqog1mz]  .mud-table-container {
    overflow: visible;
}

/* ── Status dropdown: åbn til venstre på mobil ── */
@media (max-width: 599px) {
    .soeg-status-cell .dropdown-panel[b-l1fsqog1mz] {
        left: auto;
        right: 0;
    }
}

/* ── Responsiv ── */
@media (max-width: 599px) {
    /* Name, e-mail and phone wrap instead of being cut at 130px; the status column shrinks to its
       badge so the buyer column gets the rest of the row. */
    .soeg-buyer-name[b-l1fsqog1mz],
    .soeg-buyer-email[b-l1fsqog1mz],
    .soeg-buyer-phone[b-l1fsqog1mz] { display: block; white-space: normal; overflow-wrap: anywhere; }
    .col-status[b-l1fsqog1mz] { width: 1%; min-width: 0; white-space: nowrap; padding-left: 8px !important; padding-right: 8px !important; }
    /* The star column is a 44px button; 16px padding on both sides made it 76px wide. The star
       cell has no class of its own, so it is found as the cell before .col-buyer. !important
       because mudblazor-overrides.css sets the cell padding with !important. */
    .soeg-col-icon[b-l1fsqog1mz],
    td.soeg-row-interactive:has(+ .col-buyer)[b-l1fsqog1mz] { padding-left: 8px !important; padding-right: 0 !important; }
}

/* ── Tabelkolonne-bredder ── */
.soeg-col-ref[b-l1fsqog1mz]  { width: 56px; }
.soeg-col-icon[b-l1fsqog1mz] { width: 40px; }
.soeg-col-created[b-l1fsqog1mz] { width: 92px; }

/* Favorit-stjernen matcher Kunder-listen: 16px glyf, dæmpet grå i inaktiv tilstand.
   Farven styres herfra via Color.Inherit, og reglerne hænger på denne div frem for på
   knappen: CSS-isolation stempler kun egen markup, så en klasse sendt ind i MudIconButton
   aldrig kan rammes. */
.soeg-star-cell[b-l1fsqog1mz] { color: var(--mud-palette-text-disabled); }
.soeg-star-cell:hover[b-l1fsqog1mz] { color: var(--mud-palette-warning); }
.soeg-star-cell--active[b-l1fsqog1mz] { color: var(--mud-palette-warning); }
.soeg-star-cell[b-l1fsqog1mz]  .mud-icon-root { font-size: 16px !important; }
.soeg-star-cell[b-l1fsqog1mz]  .mud-icon-button { padding: 4px 6px; }
/* /Components/Pages/Soegeprofiler/SoegeprofilerDetaljer.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  SØGEPROFILER DETALJER - Scoped styles       ══ */
/* ══  Kun forælder-regler; resten er fordelt til  ══ */
/* ══  SoegeprofilerSidebarCard/-MainContent       ══ */
/* ══  .razor.css ved dekomponeringen.             ══ */
/* ══════════════════════════════════════════════════ */

/* ── Match case rows ── */
/* SKAL blive her: anker-løs ::deep på en MudStack-klasse kræver en
   ren-HTML-forfader med scope-attribut, og main-content-barnet har
   ingen (rod = SegmentedControl/MudPaper). Fra forælderen virker den
   uændret via .page-content. */
[b-mpttf07qpc] .soeg-det-match-row { padding: 10px 0; border-bottom: 1px solid var(--mud-palette-divider); }

/* ── Søgeområde-kort: blyanten sidder ovenpå kortet (kortets eget hjørne),
   ikke svævende i header-rækken over det. Wrap'et i en almindelig <div> (ikke
   Class= direkte på MudIconButton) - CSS-isolation når ikke pålideligt ind i
   MudBlazor-komponenters rod, se code-comments-reglen om "formodentlig døde"
   ikon-regler i SoegeprofilerSidebarCard.razor.css. ── */
.soeg-area-map-wrap[b-mpttf07qpc] { position: relative; --area-map-height: 420px; }

.soeg-area-edit-btn[b-mpttf07qpc] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    border-radius: 50%;
    background: var(--mud-palette-background);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* /Components/Pages/Soegeprofiler/SoegeprofilerLocationCard.razor.rz.scp.css */
/* Same grid/edit-panel pattern as SoegeprofilerSidebarCard.razor.css (CSS isolation
   means the rules must be duplicated per component - postnumre/tegnet område moved
   here so they sit next to the map instead of buried in the sidebar's grid). */

/* Stacked (1 column), not the 2-column layout used in the sidebar - this card is
   narrow (next to the map), so postnumre/tegnet område sit under each other. */
.soeg-det-criteria-grid[b-fzhip6m4sh] { display: grid; grid-template-columns: 1fr; }
.soeg-det-grid-cell[b-fzhip6m4sh] { border-bottom: 1px solid var(--mud-palette-divider); padding: 12px 0; min-width: 0; }
.soeg-det-grid-cell:last-child[b-fzhip6m4sh] { border-bottom: none; }

.soeg-det-criteria-trigger[b-fzhip6m4sh] { display: flex; align-items: center; gap: 12px; cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; transition: background var(--transition-fast); }
.soeg-det-criteria-trigger:hover[b-fzhip6m4sh] { background: var(--mud-palette-action-default-hover); }
.soeg-det-criteria-trigger:focus-visible[b-fzhip6m4sh] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Tegnet område er nu kun visning her (redigeres via blyanten på det rigtige kort). */
.soeg-det-criteria-trigger--static[b-fzhip6m4sh] { cursor: default; }
.soeg-det-criteria-trigger--static:hover[b-fzhip6m4sh] { background: none; }

.soeg-det-edit-panel[b-fzhip6m4sh] { margin-top: 8px; padding: 12px; background: var(--mud-palette-background-grey); border-radius: var(--radius-md); }

.soeg-det-criteria-icon[b-fzhip6m4sh] { flex-shrink: 0; }
.soeg-det-criteria-icon[b-fzhip6m4sh]  .mud-icon-root {
    font-size: 15px !important;
    color: var(--mud-palette-text-secondary) !important;
}

.soeg-det-area-map-label[b-fzhip6m4sh] { flex: 1; }
.soeg-det-area-map-label[b-fzhip6m4sh]  .area-map { margin-top: 6px; }

.soeg-sidebar-flex[b-fzhip6m4sh] { flex: 1; }
/* /Components/Pages/Soegeprofiler/SoegeprofilerMainContent.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  SØGEPROFIL HOVEDINDHOLD - Scoped styles     ══ */
/* ══  Match-tabs + match-kort                     ══ */
/* ══  (flyttet fra SoegeprofilerDetaljer.razor.css ══ */
/* ══  v. dekomp.)                                 ══ */
/* ══════════════════════════════════════════════════ */

/* ── Case link ── */
.soeg-det-case-link[b-ll4x76s7ec] { color: var(--mud-palette-primary); text-decoration: none; font-weight: 500; }
.soeg-det-case-link:hover[b-ll4x76s7ec] { text-decoration: underline; }
.soeg-det-case-link--inactive[b-ll4x76s7ec] { color: var(--mud-palette-text-primary); }
.soeg-det-case-address[b-ll4x76s7ec] { font-size: 0.875rem; font-weight: 500; display: block; }

/* ── Match row ── */
.soeg-det-match-row[b-ll4x76s7ec] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.soeg-det-match-row:last-child[b-ll4x76s7ec] { border-bottom: none; }

/* ── Thumbnail ── */
.soeg-det-match-thumb-wrap[b-ll4x76s7ec] {
    position: relative;
    flex-shrink: 0;
}
.soeg-det-match-thumb[b-ll4x76s7ec] {
    width: 52px;
    height: 42px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    display: block;
}
.soeg-det-match-thumb--placeholder[b-ll4x76s7ec] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-bg, var(--color-brand-alpha-06));
}
.soeg-det-match-thumb--placeholder i[b-ll4x76s7ec] { font-size: 16px; color: var(--mud-palette-primary); opacity: 0.4; }
.soeg-det-match-thumb--vurdering[b-ll4x76s7ec] { background: rgba(255,152,0,0.08); }
.soeg-det-match-thumb--vurdering i[b-ll4x76s7ec] { color: var(--mud-palette-warning); }
.soeg-det-match-thumb--aktiv[b-ll4x76s7ec] { background: rgba(76,175,80,0.08); }
.soeg-det-match-thumb--aktiv i[b-ll4x76s7ec] { color: var(--mud-palette-success); }
.soeg-det-match-thumb--tilsalg[b-ll4x76s7ec] { background: var(--color-brand-bg, var(--color-brand-alpha-06)); }
.soeg-det-match-thumb--tilsalg i[b-ll4x76s7ec] { color: var(--mud-palette-primary); }

/* Hover popup */
.soeg-det-match-thumb-popup[b-ll4x76s7ec] {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 9999;
    background: var(--mud-palette-background);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0,0,0,0.22);
    padding: 4px;
    pointer-events: none;
}
.soeg-det-match-thumb-wrap:hover .soeg-det-match-thumb-popup[b-ll4x76s7ec] { display: block; }
.soeg-det-match-thumb-popup-img[b-ll4x76s7ec] {
    width: 200px;
    height: 148px;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 2px);
    display: block;
}

/* ── Match body ── */
.soeg-det-match-body[b-ll4x76s7ec] { flex: 1; min-width: 0; }

.soeg-det-match-meta[b-ll4x76s7ec] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.soeg-det-match-meta-item[b-ll4x76s7ec] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.soeg-det-match-meta-item i[b-ll4x76s7ec] { font-size: 11px; }

.soeg-det-status-dot[b-ll4x76s7ec] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.soeg-det-status-dot--vurdering[b-ll4x76s7ec] { background: var(--mud-palette-warning); }
.soeg-det-status-dot--aktiv[b-ll4x76s7ec]     { background: var(--mud-palette-success); }
.soeg-det-status-dot--tilsalg[b-ll4x76s7ec]   { background: var(--mud-palette-primary); }
.soeg-det-status-dot--solgt[b-ll4x76s7ec]     { background: var(--mud-palette-text-disabled); }

.soeg-det-match-price[b-ll4x76s7ec] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
/* ── Actions ── */
.soeg-det-match-actions[b-ll4x76s7ec] { display: flex; flex-shrink: 0; }

/* ── Activity list rows (Aktiviteter-tab) ── */
.soeg-det-activity-item[b-ll4x76s7ec] {
    cursor: pointer;
    padding: 8px 6px;
    margin: 0 -6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.soeg-det-activity-item:hover[b-ll4x76s7ec] { background: var(--mud-palette-action-hover); }
.soeg-det-activity-item:last-child[b-ll4x76s7ec] { border-bottom: none; }

.soeg-det-activity-row[b-ll4x76s7ec] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.soeg-det-activity-icon[b-ll4x76s7ec] {
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--mud-palette-primary);
}

/* Link til sagen bag aktiviteten. Lille hus-ikon + adresse. */
.soeg-det-activity-case[b-ll4x76s7ec] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.8125rem;
}
.soeg-det-activity-case i[b-ll4x76s7ec] { font-size: 12px; }

/* ── Match empty state ── */
.soeg-det-empty[b-ll4x76s7ec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 16px;
    text-align: center;
}

/* NB: Formodentlig døde - klassen sidder på en MudIcon-komponent der
   aldrig får scope-attributten. Porteret 1:1; flagget i
   docs/frontend-cleanup-plan.md. */
.soeg-det-empty-icon[b-ll4x76s7ec] { flex-shrink: 0; }
.soeg-det-empty-icon[b-ll4x76s7ec]  .mud-icon-root {
    font-size: 36px !important;
    color: var(--mud-palette-text-disabled) !important;
}
/* /Components/Pages/Soegeprofiler/SoegeprofilerSidebarCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  SØGEPROFIL SIDEBAR - Scoped styles          ══ */
/* ══  Kriterier, inline-edit, køberstatus         ══ */
/* ══  (flyttet fra SoegeprofilerDetaljer.razor.css ══ */
/* ══  v. dekomp.)                                 ══ */
/* ══════════════════════════════════════════════════ */

/* ── Sidebar criteria rows ── */
.soeg-det-criteria-row[b-citixespuy] { border-bottom: 1px solid var(--mud-palette-divider); padding-bottom: 12px; margin-bottom: 12px; }

/* ── 2-kolonne kriterie-grid (mindsker lodret scroll) ── */
/* minmax(0,…) lader cellerne krympe, så chips/tekst ombrydes frem for at overløbe. */
.soeg-det-criteria-grid[b-citixespuy] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.soeg-det-grid-cell[b-citixespuy] { border-bottom: 1px solid var(--mud-palette-divider); padding: 12px 0; min-width: 0; transition: background var(--transition-fast); }
/* Den redigerede celle bliver i sin egen kolonne (spænder IKKE over begge) - et
   spring fra halv til fuld bredde ved hvert klik gav et "hoppende" layout. En
   blød baggrundstoning erstatter spring-effekten som visuelt signal. */
.soeg-det-grid-cell--editing[b-citixespuy] {
    background: var(--mud-palette-action-default-hover);
    border-radius: var(--radius-md);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}
@media (max-width: 599.98px) { .soeg-det-criteria-grid[b-citixespuy] { grid-template-columns: 1fr; } }

/* Hele rækken er klik-mål for redigering (erstatter blyant-knappen). */
.soeg-det-criteria-trigger[b-citixespuy] { display: flex; align-items: center; gap: 12px; cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; transition: background var(--transition-fast); }
.soeg-det-criteria-trigger:hover[b-citixespuy] { background: var(--mud-palette-action-default-hover); }
.soeg-det-criteria-trigger:focus-visible[b-citixespuy] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ── Edit panels ── */
.soeg-det-edit-panel[b-citixespuy] { margin-top: 8px; padding: 12px; background: var(--mud-palette-background-grey); border-radius: var(--radius-md); }

/* ── Range edit grids: Fra/Til side by side when there is room for a full price, else stacked.
   The edited cell keeps its half-width column (see above), so in the sidebar that is one
   input per row; on narrow screens the criteria grid is one column and both fit beside each other. ── */
.soeg-det-edit-grid[b-citixespuy] { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 8px; }

/* ── Property type options container ── */
.soeg-det-type-options[b-citixespuy] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* NB: Ikon-reglerne nedenfor er formodentlig døde - klasserne sidder på
   MudIcon-komponenter der aldrig får scope-attributten (samme mekanik som
   .akt-meta-icon m.fl.). Porteret 1:1; flagget i docs/frontend-cleanup-plan.md. */

/* ── Sidebar criteria icons ── */
.soeg-det-criteria-icon[b-citixespuy] { flex-shrink: 0; }
.soeg-det-criteria-icon[b-citixespuy]  .mud-icon-root {
    font-size: 15px !important;
    color: var(--mud-palette-text-secondary) !important;
}

.soeg-det-area-map-label[b-citixespuy] { flex: 1; }
.soeg-det-area-map-label[b-citixespuy]  .area-map { margin-top: 6px; }

/* ── Sidebar contact icons ── */
.soeg-det-contact-icon[b-citixespuy] { flex-shrink: 0; }
.soeg-det-contact-icon[b-citixespuy]  .mud-icon-root {
    font-size: 16px !important;
    color: var(--mud-palette-text-secondary) !important;
}

/* ── Status badge + dropdown (same design/behaviour as the Søgeprofiler list page,
   Soegeprofiler.razor.css - CSS isolation means the classes must be duplicated here). ── */
.soeg-status-wrap[b-citixespuy] {
    position: relative;
    display: inline-block;
}

.soeg-status-panel[b-citixespuy] {
    left: 0;
    right: auto;
}

.soeg-status-badge[b-citixespuy] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border: none;
}

.soeg-status-badge--active[b-citixespuy],
.soeg-status-badge--aktiv[b-citixespuy] {
    background: rgba(56, 142, 60, 0.1);
    color: var(--mud-palette-success);
}

.soeg-status-badge--inactive[b-citixespuy],
.soeg-status-badge--inaktiv[b-citixespuy],
.soeg-status-badge--ukendt[b-citixespuy] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mud-palette-text-secondary);
}

.soeg-status-caret[b-citixespuy]  .mud-icon-root {
    font-size: 13px !important;
    margin-left: 2px;
    margin-top: 1px;
    opacity: 0.6;
}

.soeg-status-dot--aktiv[b-citixespuy] { background: var(--color-text-success); }
.soeg-status-dot--inaktiv[b-citixespuy] { background: var(--color-text-soft); }

.soeg-check-icon[b-citixespuy]  .mud-icon-root {
    font-size: 14px !important;
    color: var(--color-success) !important;
    margin-left: auto;
}

/* ── Property type toggle chips ── */
.soeg-det-type-chip[b-citixespuy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.soeg-det-type-chip:hover:not(.soeg-det-type-chip--on)[b-citixespuy] {
    border-color: var(--mud-palette-text-disabled);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-disabled-background);
}

.soeg-det-type-chip--on[b-citixespuy] {
    background: var(--color-icon-brand-bg);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.soeg-det-type-chip-icon[b-citixespuy] { flex-shrink: 0; }
.soeg-det-type-chip-icon[b-citixespuy]  .mud-icon-root {
    font-size: 11px !important;
    color: var(--mud-palette-primary) !important;
}

/* Købeklar-badge: outlined pil, farve sættes inline pr. buyerStatus-værdi - samme
   mønster som listevisningens .soeg-buyerstatus-badge (Soegeprofiler.razor.css). */
.soeg-buyerstatus-badge[b-citixespuy] { background: transparent; border: 1px solid var(--mud-palette-lines-inputs); color: var(--mud-palette-text-secondary); }

/* ── Sub-section label ── */
.soeg-det-subsection-header[b-citixespuy] {
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    margin-top: 16px;
    margin-bottom: 8px;
}

/* ── Layout helpers ── */
.soeg-sidebar-flex[b-citixespuy]  { flex: 1; }
.soeg-sidebar-full[b-citixespuy]  { width: 100%; }
/* /Components/Pages/Soegeprofiler/SoegeprofilerTabBar.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  SØGEPROFIL TAB-BAR - Scoped styles          ══ */
/* ══  Tabs, søgefelt, filtre-knap                 ══ */
/* ══  (flyttet fra Soegeprofiler.razor.css        ══ */
/* ══  v. dekomp.)                                 ══ */
/* ══════════════════════════════════════════════════ */

/* ── List header (udenfor kortet) ── */
.mensen-list-header[b-k5w7f19xxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.mensen-card-search[b-k5w7f19xxg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mensen-card-search .mensen-search[b-k5w7f19xxg] {
    min-width: 260px;
}

/* ── Filter-knap: aktiv tilstand ── */
/* NB: .mensen-filter-btn-basisstylingen kommer globalt; kun
   --active-varianten er scoped her. */
.mensen-filter-btn--active[b-k5w7f19xxg] {
    color: #ffffff;
}

.mensen-filter-btn--active[b-k5w7f19xxg]  .mud-icon-root {
    color: #ffffff !important;
}

/* ── Responsiv ── */
@media (max-width: 599px) {
    .mensen-list-header[b-k5w7f19xxg] {
        flex-direction: column;
        align-items: flex-start;
    }

    .mensen-card-search[b-k5w7f19xxg] {
        width: 100%;
    }

    .mensen-card-search .mensen-search[b-k5w7f19xxg] {
        min-width: 0;
        flex: 1;
    }

    /* The Filtre panel (420px, capped to the viewport) is anchored to the button's right edge and
       starts off-screen when the button sits mid-row. Anchor it to this row instead, so it spans
       the row's width right under the buttons. */
    .mensen-card-search[b-k5w7f19xxg] {
        position: relative;
    }

    .mensen-card-search[b-k5w7f19xxg]  .filter-dropdown {
        position: static;
    }

    .mensen-card-search[b-k5w7f19xxg]  .filter-dropdown__panel {
        width: 100%;
        max-width: none;
    }
}
/* /Components/Pages/Zrm/HealthServiceDrilldown.razor.rz.scp.css */
/* ZRM Health drill-down dialog scoped styles */

.zrm-health-chart[b-201o9x8ek5] { padding: 8px 0; }

.zrm-health-drilldown-event[b-201o9x8ek5] { display: flex; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.zrm-health-drilldown-event:last-child[b-201o9x8ek5] { border-bottom: none; }

/* Mirror the parent page's classes so dot color stays consistent inside the dialog */
.zrm-health-incident-dot[b-201o9x8ek5] { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.zrm-health-incident-dot--healthy[b-201o9x8ek5] { background-color: var(--mud-palette-success); }
.zrm-health-incident-dot--degraded[b-201o9x8ek5] { background-color: var(--mud-palette-warning); }
.zrm-health-incident-dot--unhealthy[b-201o9x8ek5] { background-color: var(--mud-palette-error); }
.zrm-health-incident-dot--unknown[b-201o9x8ek5] { background-color: var(--mud-palette-text-secondary); }

.zrm-health-incident-body[b-201o9x8ek5] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.zrm-health-incident-desc[b-201o9x8ek5] { word-break: break-word; }

.zrm-health-pill[b-201o9x8ek5] { padding: 2px 10px; border-radius: var(--radius-lg); font-size: var(--mud-typography-caption-size); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; flex-shrink: 0; }
.zrm-health-pill--healthy[b-201o9x8ek5] { background-color: rgba(16, 185, 129, 0.12); color: var(--mud-palette-success); }
.zrm-health-pill--degraded[b-201o9x8ek5] { background-color: rgba(245, 158, 11, 0.14); color: var(--mud-palette-warning); }
.zrm-health-pill--unhealthy[b-201o9x8ek5] { background-color: rgba(239, 68, 68, 0.14); color: var(--mud-palette-error); }
.zrm-health-pill--unknown[b-201o9x8ek5] { background-color: rgba(148, 163, 184, 0.18); color: var(--mud-palette-text-secondary); }
/* /Components/Shared/Admin/ActivityTypeConfigEditor.razor.rz.scp.css */
.act-type-row[b-u1nm15ii0v] {
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
    cursor: grab;
    background: var(--mud-palette-surface);
    border: var(--card-border);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    margin-bottom: 4px;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.act-type-row:hover[b-u1nm15ii0v] {
    border-color: var(--mud-palette-text-disabled);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.act-drag-handle[b-u1nm15ii0v] {
    font-size: 18px;
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.act-type-row:hover .act-drag-handle[b-u1nm15ii0v] {
    color: var(--mud-palette-text-secondary);
}

.act-type-row.act-drag-over[b-u1nm15ii0v] {
    border-top: 2px solid var(--mud-palette-primary);
}

.act-dragging[b-u1nm15ii0v] {
    opacity: 0.3;
    box-shadow: none;
}

.act-hidden[b-u1nm15ii0v] {
    opacity: 0.4;
}

.act-hidden .type-rename[b-u1nm15ii0v]  .mud-input-slot {
    text-decoration: line-through;
}

.type-rename[b-u1nm15ii0v] {
    flex: 1;
}

.type-duration[b-u1nm15ii0v] {
    width: 90px;
    flex-shrink: 0;
}

.act-type-row:not(.act-editing)[b-u1nm15ii0v]  .mud-input-outlined-border {
    border-color: transparent !important;
}


.act-type-row:not(.act-editing)[b-u1nm15ii0v]  .mud-input-adornment {
    opacity: 0;
}
/* /Components/Shared/Calendar/ActivityParticipantsField.razor.rz.scp.css */
.apf-row[b-2ajzizxdjo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
/* /Components/Shared/Calendar/BookingWeekCalendar.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  BOOKINGWEEKCALENDAR - Scoped styles          ══ */
/* ══  Delt uge-kalender for booking-/opret-dialoger ══ */
/* ══════════════════════════════════════════════════ */

/* Grid-primitiverne (week-grid-card, week-header-row, week-col-*, week-day-col,
   week-hour-line, week-half-hour-line, week-now-line, week-time-gutter/label) kommer fra
   den GLOBALE wwwroot/css/week-calendar.css. Herunder kun `ba-week-*`-wrapperne (flyttet fra
   de to dialogers scoped CSS) + de få booking-specifikke lokale afvigelser. */

.ba-week[b-jeq37lkajt] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Uge-navigation ────────────────────────────────── */
.ba-week-nav[b-jeq37lkajt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ba-week-label[b-jeq37lkajt] {
    font-size: var(--mud-typography-h6-size);
    font-weight: 700;
    color: var(--color-text-heading);
}

.ba-week-nav-right[b-jeq37lkajt] { display: flex; align-items: center; gap: 12px; }
.ba-week-btns[b-jeq37lkajt] { display: flex; gap: 6px; }

.ba-week-btn[b-jeq37lkajt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 16px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    color: var(--mud-palette-text-primary);
}

.ba-week-btn:hover[b-jeq37lkajt] { background: var(--mud-palette-action-disabled-background); border-color: var(--mud-palette-text-disabled); }
.ba-week-btn--today[b-jeq37lkajt] { background: var(--color-brand); color: var(--color-bg-page); border-color: var(--color-brand); }
.ba-week-btn--today:hover[b-jeq37lkajt] { background: color-mix(in srgb, var(--color-brand) 82%, black); border-color: transparent; }

.ba-week-placeholder[b-jeq37lkajt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: var(--mud-typography-body1-size);
    background: var(--color-bg-card);
    border: 1px dashed var(--color-border-card);
    border-radius: 14px;
}

.ba-week-placeholder[b-jeq37lkajt]  .mud-icon-root { color: var(--color-border-light); }

/* ── Header-gutter + agent-grupper (multi-agent) ─────── */
/* grid-card + header-row: delte primitiver i week-calendar.css. */
.ba-week-gutter-h[b-jeq37lkajt] { width: var(--cal-gutter-width); flex-shrink: 0; border-right: 1px solid var(--color-bg-hover); }

/* Hver agent er en kolonne-gruppe (flex: 7) i BÅDE header og body, så navne-bjælken
   sidder over agentens dag-headere og datoerne flugter. */
.ba-week-agent-group[b-jeq37lkajt] {
    flex: 7;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ba-week-agent-days[b-jeq37lkajt] {
    display: flex;
}

.ba-week-agent-body-group[b-jeq37lkajt] {
    flex: 7;
    min-width: 0;
    display: flex;
}

.ba-week-agent-cell[b-jeq37lkajt] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-bottom: 1px solid var(--color-border-card);
}

.ba-week-agent-dot[b-jeq37lkajt] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ba-week-agent-name[b-jeq37lkajt] {
    flex: 1;
    min-width: 0;
    font-size: var(--mud-typography-body2-size);
    font-weight: 700;
    color: var(--color-text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Krop / scroll ─────────────────────────────────── */
.ba-week-body-scroll[b-jeq37lkajt] { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.ba-week-body-scroll[b-jeq37lkajt]::-webkit-scrollbar { display: none; }
/* Height sættes inline fra kalender-konstanterne (00–23 @ HourHeight). */
.ba-week-body[b-jeq37lkajt] { display: flex; position: relative; }

/* Day columns: base + varianter delt i week-calendar.css. Lokale booking-afvigelser: */
.week-day-col[b-jeq37lkajt] { user-select: none; }
.week-day-col:hover[b-jeq37lkajt] { background: rgba(220, 38, 38, 0.02); }

/* Events er read-only her, så overstyr den globale cursor:grab. WeekEventBar er en
   underkomponent, derfor ::deep. Baggrund sættes inline pr. agent-farve. */
[b-jeq37lkajt] .week-event { cursor: default; }

/* ── Slot-preview (valgt / under-træk) ──────────────── */
.ba-week-slot-preview[b-jeq37lkajt] {
    position: absolute;
    left: 3px;
    right: 3px;
    background: rgba(220, 38, 38, 0.12);
    border: 2px dashed var(--home-red);
    border-radius: var(--radius-sm);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    color: var(--home-red);
    cursor: grab;
    gap: 4px;
    overflow: hidden;
}

.ba-week-slot-agent[b-jeq37lkajt] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sort streg. Viser skel mellem to mægleres kalendere. Lys grå var for svag. */
.ba-week-agent-divider[b-jeq37lkajt], .ba-week-agent-divider-body[b-jeq37lkajt] { width: 1px; flex-shrink: 0; background: var(--color-text-heading); }

/* Telefon: the agent row grows with CalendarCloseButton's 44px touch target. */
@media (max-width: 599px) {
    .ba-week-agent-cell[b-jeq37lkajt] {
        height: 44px;
    }
}
/* /Components/Shared/Calendar/BusinessCalendarSelector.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  BUSINESSCALENDARSELECTOR - Scoped styles    ══ */
/* ══  Multi-business employee/calendar picker     ══ */
/* ══════════════════════════════════════════════════ */

/* ── EMPLOYEE SECTION ── */
.emp-section[b-m5lloowu0j] {
    background: var(--mud-palette-background);
    border-radius: var(--radius-xl);
    padding: 10px;
    flex: 1;
    min-height: 0;
    /* Column flex so .emp-list inside can claim the remaining height with
       flex: 1 1 auto; min-height: 0 (see .emp-list rule below). */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.emp-search-wrap[b-m5lloowu0j] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-pill);
    padding: 8px 12px;
    transition: border-color var(--transition-fast);
}
.emp-search-wrap:hover[b-m5lloowu0j] { border-color: var(--mud-palette-text-disabled); }
.emp-search-wrap:focus-within[b-m5lloowu0j] {
    border-color: var(--mud-palette-text-disabled);
}
/* Søgeikon: ::deep piercer MudIcon-grænsen (child component får ikke scope-attr) */
.emp-search-wrap[b-m5lloowu0j]  .mud-icon-root {
    font-size: 16px;
    color: var(--color-text-muted);
}

.emp-search-input[b-m5lloowu0j] {
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-subtle);
    width: 100%;
}

.emp-search-input[b-m5lloowu0j]::placeholder { color: var(--color-text-muted); }

.emp-list[b-m5lloowu0j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    overflow-y: auto;
    /* Fill remaining height of .emp-section (flex: 1; min-height: 0) instead of
       hard-capping at 320px. The hard cap kicked in around 8 employees even when
       the sidebar had plenty of room below; now we only scroll when the list
       would actually overflow its container. */
    flex: 1 1 auto;
    min-height: 0;
}

.emp-business[b-m5lloowu0j] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-heading);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background var(--transition-fast);
}

.emp-business:hover[b-m5lloowu0j],
.emp-business--expanded[b-m5lloowu0j] {
    background: var(--color-bg-subtle);
}

.emp-business-name[b-m5lloowu0j] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--mud-typography-body2-size);
    font-weight: 700;
}

.emp-business-count[b-m5lloowu0j] {
    min-width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background);
    color: var(--color-text-muted);
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
}

.emp-business-primary[b-m5lloowu0j] {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-bg);
    color: var(--color-brand);
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.emp-item[b-m5lloowu0j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left;
    width: 100%;
    font-family: inherit;
}

.emp-item:hover[b-m5lloowu0j] { background: var(--color-bg-subtle); }
.emp-item:focus-visible[b-m5lloowu0j] { outline: 2px solid var(--color-brand); outline-offset: -2px; border-radius: var(--radius-sm); }
.emp-item--selected[b-m5lloowu0j] { background: var(--color-brand-bg); }
.emp-item--locked[b-m5lloowu0j] { cursor: default; pointer-events: none; }

.emp-dot[b-m5lloowu0j] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}

.emp-item:not(.emp-item--selected) .emp-dot[b-m5lloowu0j] { opacity: 0; }
.emp-item:not(.emp-item--selected):hover .emp-dot[b-m5lloowu0j] { opacity: 1; }

.emp-name[b-m5lloowu0j] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--color-text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.emp-item--selected .emp-name[b-m5lloowu0j] { color: var(--color-text-heading); font-weight: 600; }

.emp-check[b-m5lloowu0j] {
    margin-left: auto;
    color: var(--color-brand);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.emp-empty[b-m5lloowu0j] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-muted);
    text-align: center;
    padding: 12px 0;
    margin: 0;
}

/* ══════════════════════════════════════════════════ */
/* ══  RESPONSIVE                                  ══ */
/* ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* In the page's stacked sidebar the selector sits beside the mini-calendar;
       flex-grow so both share the row. The .cal-mini half of this rule stays on
       the host page (Aktiviteter.razor.css). */
    .emp-section[b-m5lloowu0j] { flex: 1 1 240px; }
}
/* /Components/Shared/Calendar/CalendarCloseButton.razor.rz.scp.css */
.week-panel-close[b-ckgq9751z1] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.12s;
    flex-shrink: 0;
}

.week-panel-close:hover[b-ckgq9751z1] {
    background: var(--color-bg-error);
    color: var(--color-brand);
}

.week-panel-close[b-ckgq9751z1]  .mud-icon-root {
    font-size: var(--icon-size-table);
}

/* Telefon: touch-mål. Hosts grow their header row to match. */
@media (max-width: 599px) {
    .week-panel-close[b-ckgq9751z1] {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Shared/Cards/CommunicationLogCard.razor.rz.scp.css */
.comm-log[b-62fnkpn7kh] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Wrap to the card's available width, including narrow desktop activity columns. */
.comm-log[b-62fnkpn7kh]  .comm-log-header,
.comm-log[b-62fnkpn7kh]  .comm-log-filters,
.comm-log[b-62fnkpn7kh]  .comm-log-metadata {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.comm-log[b-62fnkpn7kh]  .mud-chip {
    max-width: calc(100% - 8px);
    height: auto;
    min-height: 24px;
}

.comm-log[b-62fnkpn7kh]  .mud-chip-content {
    min-width: 0;
    white-space: normal;
}

.comm-log[b-62fnkpn7kh]  .comm-log-date {
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
}

.comm-log-item[b-62fnkpn7kh] {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* MudIcon and MudText render their own component roots, so the scope attribute never lands on
   them and a direct rule would not apply. Anchored on .comm-log-item, which is real markup here.
   Size comes from the global .icon-sub; only the colour needs a rule. */
.comm-log-item[b-62fnkpn7kh]  .comm-log-icon { color: var(--mud-palette-text-secondary); }
.comm-log-item[b-62fnkpn7kh]  .comm-log-preview { white-space: pre-wrap; }
/* /Components/Shared/Cards/PendingActionCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  PENDINGACTIONCARD - Scoped styles           ══ */
/* ══════════════════════════════════════════════════ */

.pac[b-tot638obl7] {
    padding: 12px 20px;
    background: transparent;
    border-bottom: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background var(--transition-fast);
}

.pac:last-child[b-tot638obl7] {
    border-bottom: none;
}

.pac:hover[b-tot638obl7] {
    background: var(--mud-palette-action-hover-background);
}

/* ── Header-række: titel + menu ───────────────────── */
.pac__header[b-tot638obl7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.pac__title[b-tot638obl7] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
}

/* ── Samtykke-linje ───────────────────────────────── */
.pac__consent[b-tot638obl7] {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

/* ── Navn-wrapper: positioneringsanker til popoveren ── */
.pac__name-wrap[b-tot638obl7] {
    position: relative;
    display: inline;
}

/* ── Klikbart kundenavn ───────────────────────────── */
a.pac__customer-link[b-tot638obl7] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.pac__customer-link:hover[b-tot638obl7] {
    color: var(--mud-palette-primary);
}

/* ── Hover-popup kort ─────────────────────────────── */
/* Overfladen kommer fra den delte .dropdown-surface (global, i mudblazor-overrides.css) —
   popoveren er teleporteret ud af dette scope, så surface + bredde skal styres globalt. */

.pac__popup-loading[b-tot638obl7] {
    padding: 20px;
}

.pac__popup-body[b-tot638obl7] {
    display: flex;
    flex-direction: column;
}

.pac__popup-header[b-tot638obl7] {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.pac__popup-name[b-tot638obl7] {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pac__popup-info[b-tot638obl7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
}

.pac__popup-row[b-tot638obl7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pac__popup-icon[b-tot638obl7] {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
    margin-top: 14px;
}

.pac__popup-field[b-tot638obl7] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pac__popup-label[b-tot638obl7] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

.pac__popup-value[b-tot638obl7] {
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
}


/* ── Send-knap wrapper ────────────────────────────── */
/* ── Sendt-linje: erstatter send-knappen ─────────── */
.pac__sent[b-tot638obl7] {
    margin-top: 4px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

.pac__sent[b-tot638obl7]  .mud-icon-root {
    font-size: 16px;
}

.pac__btn-wrap[b-tot638obl7] {
    margin-top: 4px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: inline-flex;
    align-self: flex-start;
}

.pac__btn-wrap[b-tot638obl7]  .mud-button-root {
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 400;
}

.pac__btn-wrap[b-tot638obl7]  .mud-button-root:hover::before {
    opacity: 0;
}

.pac__btn-wrap[b-tot638obl7]  .mud-button-root:hover {
    background-color: var(--mud-palette-primary);
}

.pac__btn-wrap[b-tot638obl7]  .mud-button-root:hover .mud-button-label,
.pac__btn-wrap[b-tot638obl7]  .mud-button-root:hover .mud-icon-root {
    color: #ffffff !important;
}
/* /Components/Shared/Cards/StatCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  STATCARD - Scoped styles                    ══ */
/* ══════════════════════════════════════════════════ */

.stat-card[b-uw7a1f14gk] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--mud-palette-background);
    font-family: 'Home', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.stat-card__value[b-uw7a1f14gk],
.stat-card__top[b-uw7a1f14gk]  .mud-typography,
.stat-card__metric[b-uw7a1f14gk]  .mud-typography {
    font-family: 'Home', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}


.stat-card__inner[b-uw7a1f14gk] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.stat-card__content[b-uw7a1f14gk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.stat-card__top[b-uw7a1f14gk] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}

.stat-card__top[b-uw7a1f14gk]  .mud-typography-subtitle2 {
    font-size: var(--mud-typography-subtitle1-size);
}

.stat-card__metric[b-uw7a1f14gk] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-card__metric[b-uw7a1f14gk]  .mud-typography-caption {
    font-size: var(--mud-typography-body2-size);
}

.stat-card__value[b-uw7a1f14gk] {
    font-size: var(--mud-typography-h1-size);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
}

/* ── Titel: tillad wrap på smalle kort ────────────── */
.stat-card__top[b-uw7a1f14gk]  .mud-typography {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ── Tablet/desktop: reducer titel lidt ───────────── */
@media (max-width: 1200px) {
    .stat-card__top[b-uw7a1f14gk]  .mud-typography-subtitle2 {
        font-size: var(--mud-typography-h6-size);
    }
}

/* ── Mobil: kompakt kortlayout ────────────────────── */
@media (max-width: 599px) {
    .stat-card[b-uw7a1f14gk] {
        padding: 14px !important;
    }

    .stat-card .icon-container[b-uw7a1f14gk] {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-md);
    }

    .stat-card__top[b-uw7a1f14gk] {
        gap: 10px;
        margin-bottom: 6px;
    }

    .stat-card__top[b-uw7a1f14gk]  .mud-typography-subtitle2 {
        font-size: var(--mud-typography-body2-size);
    }

    .stat-card__top[b-uw7a1f14gk]  .mud-typography {
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .stat-card__value[b-uw7a1f14gk] {
        font-size: var(--mud-typography-h3-size);
    }

    .stat-card__metric[b-uw7a1f14gk]  .mud-typography-caption {
        font-size: var(--mud-typography-caption-size);
    }
}

/* Clickable tiles blend into the page, grey on hover, a firmer grey when picked.
   Mixing towards the text colour keeps the steps visible in dark mode too. */
.stat-card--clickable[b-uw7a1f14gk] {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: transparent;
    transition: transform 150ms ease, background-color 150ms ease;
}

/* MudPaper paints its own surface; clear it so the frame colour shows through. */
.stat-card--clickable[b-uw7a1f14gk]  .stat-card {
    background: transparent;
}

.stat-card--clickable:hover:not(.stat-card--selected)[b-uw7a1f14gk],
.stat-card--clickable:focus-visible:not(.stat-card--selected)[b-uw7a1f14gk] {
    outline: none;
    z-index: 1;
    transform: translateY(-2px);
    background: var(--mud-palette-action-disabled-background);
}

.stat-card--selected[b-uw7a1f14gk] {
    background: color-mix(in srgb, var(--mud-palette-action-disabled-background), var(--mud-palette-text-primary) 7%);
}
/* /Components/Shared/Charts/SimpleBarChart.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  SIMPLE BAR CHART - Scoped styles            ══ */
/* ══════════════════════════════════════════════════ */

.sbc-root[b-qs7bv5ld2i] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.sbc-grid[b-qs7bv5ld2i] {
    stroke: var(--mud-palette-divider);
    stroke-width: 1;
    fill: none;
}

.sbc-bar-bg[b-qs7bv5ld2i] {
    fill: var(--mud-palette-action-disabled-background);
}

.sbc-bar-data[b-qs7bv5ld2i] {
    fill: var(--mud-palette-primary);
}

/* Labels are rendered via MarkupString (SVG <text> conflicts with Razor) */
/* fill and font-size are set inline in SvgLabel() */
/* /Components/Shared/Dialogs/Admin/ErrorDetailDialog.razor.rz.scp.css */
.err-dlg-label-cell[b-kntfa70bqa] {
    width: 120px;
}

.err-dlg-value-cell[b-kntfa70bqa] {
    word-break: break-all;
}

.err-dlg-pre[b-kntfa70bqa] {
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.err-dlg-pre--request[b-kntfa70bqa] {
    background: var(--color-brand-bg);
    max-height: 150px;
    border: 1px solid var(--color-border-red-light);
}

.err-dlg-pre--response[b-kntfa70bqa] {
    background: var(--color-bg-neutral);
    max-height: 200px;
}

.err-dlg-pre--stack[b-kntfa70bqa] {
    font-size: 11px;
    max-height: 300px;
}
/* /Components/Shared/Dialogs/Admin/TemplateMergeFieldPicker.razor.rz.scp.css */
.tmpl-ph-section[b-avwlp6y4wu] {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 12px;
}

.tmpl-chip-area[b-avwlp6y4wu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tmpl-ph-group[b-avwlp6y4wu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tmpl-ph-group-label[b-avwlp6y4wu] {
    color: var(--mud-palette-text-secondary);
    font-size: var(--mud-typography-overline-size);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tmpl-ph-chips[b-avwlp6y4wu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tmpl-ph-chip[b-avwlp6y4wu] {
    align-items: center;
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-lg);
    cursor: grab;
    display: inline-flex;
    font-family: monospace;
    font-size: var(--mud-typography-caption-size);
    padding: 2px 8px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    user-select: none;
    white-space: nowrap;
}

.tmpl-ph-chip:hover[b-avwlp6y4wu] {
    background: var(--mud-palette-action-hover);
    border-color: var(--mud-palette-primary);
    cursor: pointer;
}

.tmpl-ph-chip:active[b-avwlp6y4wu] {
    cursor: grabbing;
}
/* /Components/Shared/Dialogs/ChooseBusinessDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  ChooseBusinessDialog - Scoped styles        ══ */
/* ══  Liste til valg af aktiv forretning          ══ */
/* ══════════════════════════════════════════════════ */

/* ── Søgefelt ── */
.choose-biz-search[b-rfkg6lj83b] {
    min-width: 280px;
    margin-bottom: 4px;
}

/* ── Liste ── */
.choose-biz-list[b-rfkg6lj83b] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
    min-width: 280px;
}

/* ── Række ── */
.choose-biz-item[b-rfkg6lj83b] {
    all: unset;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    transition: background 120ms ease;
    width: 100%;
    box-sizing: border-box;
}

.choose-biz-item:hover[b-rfkg6lj83b] {
    background: var(--mud-palette-action-disabled-background);
}

.choose-biz-item--active[b-rfkg6lj83b] {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary-darken);
}

.choose-biz-item--active:hover[b-rfkg6lj83b] {
    background: var(--mud-palette-primary-lighten);
}

/* ── Ikoner ── */
.choose-biz-icon[b-rfkg6lj83b] {
    font-size: 16px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.choose-biz-item--active .choose-biz-icon[b-rfkg6lj83b] {
    color: var(--mud-palette-primary);
}

.choose-biz-check[b-rfkg6lj83b] {
    font-size: 15px;
    color: var(--mud-palette-primary);
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Navn ── */
.choose-biz-name[b-rfkg6lj83b] {
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choose-biz-item--active .choose-biz-name[b-rfkg6lj83b] {
    font-weight: 600;
}

/* ── Tom liste ── */
.choose-biz-empty[b-rfkg6lj83b] {
    padding: 16px 12px;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-align: center;
}
/* /Components/Shared/Dialogs/Create/CreateActivityDialog.razor.rz.scp.css */

.ba-context-toggle[b-cgmpi1rhhs] {
    display: flex;
    width: 100%;
}

.ba-context-toggle .seg-item[b-cgmpi1rhhs] {
    flex: 1;
    justify-content: center;
}

.ba-titlebar[b-cgmpi1rhhs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.ba-close-btn[b-cgmpi1rhhs] {
    flex-shrink: 0;
    color: var(--color-text-secondary) !important;
}

.ba-layout[b-cgmpi1rhhs] {
    display: flex;
    gap: 20px;
    height: 100%;
    min-height: 500px;
    /* Keyed on the dialog's own width, as in BookAftalDialog: Split View, Stage Manager or a
       zoomed iPad give a wide screen but a narrow dialog. */
    container-type: inline-size;
}

/* Form + middle wrapper; only takes part in the layout when the dialog is narrow. */
.ba-side[b-cgmpi1rhhs] {
    display: contents;
}

.ba-form[b-cgmpi1rhhs] {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    background: var(--mud-palette-background);
    border-radius: var(--radius-xl);
    box-shadow: none;
    padding: 12px;
}

.ba-middle[b-cgmpi1rhhs] {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

/* Uge-kalenderen (.ba-week + ba-week-* + week-* overrides) er flyttet til den delte
   BookingWeekCalendar-komponent. */

.ba-person-card[b-cgmpi1rhhs] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px 0 6px;
}

.ba-person-card-header[b-cgmpi1rhhs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ba-person-clear[b-cgmpi1rhhs] {
    all: unset;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 2px;
    transition: color 0.12s, background 0.12s;
}

.ba-person-clear:hover[b-cgmpi1rhhs] {
    color: var(--color-text-primary);
    background: var(--color-bg-subtle);
}

.ba-person-name[b-cgmpi1rhhs] {
    font-size: var(--mud-typography-body1-size);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}

.ba-contact-info[b-cgmpi1rhhs] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.ba-field[b-cgmpi1rhhs] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ba-label[b-cgmpi1rhhs] {
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ba-required[b-cgmpi1rhhs] {
    color: var(--mud-palette-error);
}

.ba-date-row[b-cgmpi1rhhs] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.ba-date-label-row[b-cgmpi1rhhs] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ba-duration-caption[b-cgmpi1rhhs] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-muted);
}

.ba-date-chip[b-cgmpi1rhhs] {
    height: 36px;
    border-radius: 10px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border-card);
    color: var(--color-text-primary);
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.ba-date-chip--date[b-cgmpi1rhhs] {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ba-date-chip--date[b-cgmpi1rhhs] {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-weight: 600;
    outline: none;
    white-space: nowrap;
}

.ba-date-chip--date:focus[b-cgmpi1rhhs] { border-color: var(--color-brand); box-shadow: var(--focus-ring-brand-soft); }

.ba-date-chip--placeholder[b-cgmpi1rhhs] {
    flex: 1;
    color: var(--color-text-secondary);
    justify-content: flex-start;
    border-color: var(--color-border-subtle);
}

.ba-duration-chip[b-cgmpi1rhhs] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 36px;
    min-height: 36px;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
}

.ba-date-separator[b-cgmpi1rhhs] {
    color: var(--color-text-disabled);
    font-size: var(--mud-typography-body1-size);
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}

.ba-time-select-wrap[b-cgmpi1rhhs] {
    width: 84px;
    flex-shrink: 0;
}

.ba-time-input[b-cgmpi1rhhs] {
    width: 100%;
    /* iOS gives native date/time inputs an intrinsic minimum width that ignores width: 100%,
       so the date row overflowed the 340 px form on an iPad. */
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 36px;
    padding: 0 8px;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border-card);
    border-radius: 10px;
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    color: var(--color-text-primary);
    outline: none;
    box-sizing: border-box;
    cursor: text;
}

.ba-time-input:hover[b-cgmpi1rhhs] { border-color: var(--color-text-muted); }

.ba-time-input:focus[b-cgmpi1rhhs] {
    border-color: var(--color-brand);
    box-shadow: var(--focus-ring-brand-soft);
}

.ba-time-input[b-cgmpi1rhhs]::-webkit-calendar-picker-indicator { display: none; }

.ba-time-select-wrap[b-cgmpi1rhhs]  .mud-input-control { margin-bottom: 0 !important; }
.ba-time-select-wrap[b-cgmpi1rhhs]  .mud-input-outlined { background: var(--color-bg-muted) !important; }
.ba-time-select-wrap[b-cgmpi1rhhs]  .mud-input-outlined .mud-input-outlined-border { border-color: var(--color-border-card) !important; border-radius: 10px !important; }
.ba-time-select-wrap[b-cgmpi1rhhs]  .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--color-text-muted) !important; }
.ba-time-select-wrap[b-cgmpi1rhhs]  .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--color-brand) !important; box-shadow: var(--focus-ring-brand-soft) !important; }
.ba-time-select-wrap[b-cgmpi1rhhs]  .mud-select-input { font-size: var(--mud-typography-body2-size) !important; font-weight: 600 !important; color: var(--color-text-primary) !important; cursor: pointer; }
.ba-time-select-wrap[b-cgmpi1rhhs]  .mud-input-slot { padding-left: 10px !important; }
.ba-time-select-wrap[b-cgmpi1rhhs]  .mud-input-adornment button, .ba-time-select-wrap[b-cgmpi1rhhs]  .mud-input-adornment-end button { background: transparent !important; box-shadow: none !important; }
.ba-time-select-wrap[b-cgmpi1rhhs]  .mud-input-adornment button:hover, .ba-time-select-wrap[b-cgmpi1rhhs]  .mud-input-adornment-end button:hover { background: transparent !important; box-shadow: none !important; }
.ba-time-select-wrap[b-cgmpi1rhhs]  .mud-ripple { display: none !important; }

.cal-mini[b-cgmpi1rhhs] {
    box-shadow: none;
}

/* The grouped business selector (BusinessCalendarSelector, root .emp-section) now
   lives here under the mini-calendar. Let it take the remaining height and scroll
   its own list inside this narrower middle column. */
.ba-middle[b-cgmpi1rhhs]  .emp-section {
    flex: 1;
    min-height: 0;
}

/* Uge-kalenderens styles (ba-week-nav/-btn/-placeholder/-grid/-agent/-body/-slot-preview
   + week-day-col/week-event overrides) er flyttet til den delte
   BookingWeekCalendar-komponents scoped CSS. */

.ba-form[b-cgmpi1rhhs]  .mud-input-outlined .mud-input-outlined-border { border-color: var(--color-border-card) !important; border-radius: 10px !important; }
.ba-form[b-cgmpi1rhhs]  .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--color-text-muted) !important; }
.ba-form[b-cgmpi1rhhs]  .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--color-brand) !important; box-shadow: var(--focus-ring-brand-soft) !important; }
.ba-form[b-cgmpi1rhhs]  .mud-input-slot { font-size: var(--mud-typography-body2-size) !important; }
.ba-form[b-cgmpi1rhhs]  .mud-input-adornment button, .ba-form[b-cgmpi1rhhs]  .mud-input-adornment-end button { background: transparent !important; box-shadow: none !important; }
.ba-form[b-cgmpi1rhhs]  .mud-input-adornment button:hover, .ba-form[b-cgmpi1rhhs]  .mud-input-adornment button:active, .ba-form[b-cgmpi1rhhs]  .mud-input-adornment-end button:hover, .ba-form[b-cgmpi1rhhs]  .mud-input-adornment-end button:active { background: transparent !important; box-shadow: none !important; }
.ba-form[b-cgmpi1rhhs]  .mud-input-adornment .mud-ripple, .ba-form[b-cgmpi1rhhs]  .mud-input-adornment-end .mud-ripple { display: none !important; }
.ba-form[b-cgmpi1rhhs]  .mud-input-numeric-spin { right: 4px !important; }
.ba-form[b-cgmpi1rhhs]  .mud-input-numeric-spin button, .ba-form[b-cgmpi1rhhs]  .mud-input-numeric-spin .mud-icon-button { background: transparent !important; background-color: transparent !important; box-shadow: none !important; }
.ba-form[b-cgmpi1rhhs]  .mud-input-numeric-spin button:hover, .ba-form[b-cgmpi1rhhs]  .mud-input-numeric-spin button:active, .ba-form[b-cgmpi1rhhs]  .mud-input-numeric-spin .mud-icon-button:hover, .ba-form[b-cgmpi1rhhs]  .mud-input-numeric-spin .mud-icon-button:active { background: transparent !important; background-color: transparent !important; box-shadow: none !important; }
.ba-form[b-cgmpi1rhhs]  .mud-input-numeric-spin .mud-ripple { display: none !important; }

/* ── Case search item in autocomplete dropdown ── */
.ba-case-search-item[b-cgmpi1rhhs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    min-width: 0;
}

.ba-case-search-thumb[b-cgmpi1rhhs] {
    flex-shrink: 0;
    width: 44px;
    height: 36px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ba-case-search-img[b-cgmpi1rhhs] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ba-case-search-info[b-cgmpi1rhhs] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ba-case-search-address[b-cgmpi1rhhs] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ba-case-search-meta[b-cgmpi1rhhs] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.ba-case-search-number[b-cgmpi1rhhs] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ba-case-search-status[b-cgmpi1rhhs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.ba-case-search-dot[b-cgmpi1rhhs] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ba-case-search-status--vurdering[b-cgmpi1rhhs] { color: var(--mud-palette-warning-darken, #e65100); }
.ba-case-search-status--vurdering .ba-case-search-dot[b-cgmpi1rhhs] { background: var(--mud-palette-warning); }
.ba-case-search-status--aktiv[b-cgmpi1rhhs] { color: var(--mud-palette-success-darken, #2e7d32); }
.ba-case-search-status--aktiv .ba-case-search-dot[b-cgmpi1rhhs] { background: var(--mud-palette-success); }
.ba-case-search-status--tilsalg[b-cgmpi1rhhs] { color: var(--mud-palette-primary); }
.ba-case-search-status--tilsalg .ba-case-search-dot[b-cgmpi1rhhs] { background: var(--mud-palette-primary); }

.ba-case-search-broker[b-cgmpi1rhhs] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Narrow dialog (tablet): form + middle share one scrolling column, as in BookAftalDialog ── */
@media (min-width: 600px) {
    @container (max-width: 1099px) {
        .ba-side[b-cgmpi1rhhs] {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: min-content;
            flex-shrink: 0;
            min-height: 0;
            overflow-y: auto;
        }

        .ba-form[b-cgmpi1rhhs] {
            flex-shrink: 0;
            overflow-y: visible;
        }

        .ba-middle[b-cgmpi1rhhs] {
            width: auto;
            flex-shrink: 0;
            contain: inline-size;
        }

        .ba-layout[b-cgmpi1rhhs]  .ba-week-nav,
        .ba-layout[b-cgmpi1rhhs]  .ba-week-nav-right {
            flex-wrap: wrap;
            min-width: 0;
        }
    }
}

/* ── Phones: the three columns stack (same as BookAftalDialog); app.css lets .ba-dialog scroll ── */
@media (max-width: 599px) {
    .ba-layout[b-cgmpi1rhhs] {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .ba-form[b-cgmpi1rhhs],
    .ba-middle[b-cgmpi1rhhs] {
        width: auto;
        flex-shrink: 1;
    }

    .ba-form[b-cgmpi1rhhs] {
        overflow-y: visible;
    }

    .ba-layout[b-cgmpi1rhhs]  .ba-week-nav,
    .ba-layout[b-cgmpi1rhhs]  .ba-week-nav-right {
        flex-wrap: wrap;
        min-width: 0;
    }

    .ba-layout[b-cgmpi1rhhs]  .ba-week {
        height: 480px;
        min-height: 0;
        flex: 0 0 auto;
    }
}
/* /Components/Shared/Dialogs/Create/CreateLeadDialog.razor.rz.scp.css */
.lead-customer-loading[b-33a0mla71w] {
    display: flex;
    align-items: center;
}

.lead-customer-card[b-33a0mla71w] {
    padding: 12px 14px;
}

.lead-customer-card-head[b-33a0mla71w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lead-customer-card-row[b-33a0mla71w] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
/* /Components/Shared/Dialogs/Create/CreateReferralDialog.razor.rz.scp.css */
/* ── Dialog layout ── */
/* To kolonner så den ellers lange popup fylder bredt og scroller mindre.
   AFSENDER + OPSÆTNING (og Danske Bank-flowet) spænder fuld bredde; de simple
   detalje-paneler (modtager/postnumre/detaljer) tiler i to kolonner. */
.ref-create[b-k1bxqjxpy2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.ref-panel--full[b-k1bxqjxpy2],
.ref-col-full[b-k1bxqjxpy2] {
    grid-column: 1 / -1;
}

.ref-col-full[b-k1bxqjxpy2] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 820px) {
    .ref-create[b-k1bxqjxpy2] {
        grid-template-columns: 1fr;
    }
}

.ref-panel[b-k1bxqjxpy2] {
    border: 1px solid var(--color-border-card);
    border-radius: 14px;
    background: var(--color-bg-page);
    padding: 18px 18px 16px;
}

.ref-panel--soft[b-k1bxqjxpy2] {
    background: var(--color-bg-subtle);
}

.ref-panel-header[b-k1bxqjxpy2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ref-panel-eyebrow[b-k1bxqjxpy2] {
    display: block;
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.ref-panel-title[b-k1bxqjxpy2] {
    font-size: var(--mud-typography-h6-size);
    font-weight: 700;
    color: var(--color-text-heading);
    line-height: 1.3;
}

.ref-panel-subtitle[b-k1bxqjxpy2] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-soft);
    margin-top: 4px;
    line-height: 1.45;
}

.ref-summary-grid[b-k1bxqjxpy2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ref-summary-item[b-k1bxqjxpy2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.92);
}

.ref-summary-label[b-k1bxqjxpy2],
.ref-customer-label[b-k1bxqjxpy2] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--color-text-soft);
}

.ref-summary-value[b-k1bxqjxpy2],
.ref-customer-value[b-k1bxqjxpy2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--color-text-heading);
    line-height: 1.35;
}

.ref-customer-card[b-k1bxqjxpy2] {
    margin-top: 6px;
    padding: 16px;
    border: 1px solid var(--color-bg-error);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.72) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.ref-customer-header[b-k1bxqjxpy2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ref-customer-name[b-k1bxqjxpy2] {
    font-size: var(--mud-typography-h6-size);
    font-weight: 700;
    color: var(--color-text-heading);
    line-height: 1.3;
}

.ref-customer-badge[b-k1bxqjxpy2] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: rgba(239, 68, 68, 0.1);
    color: var(--home-red-dark);
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    white-space: nowrap;
}

.ref-customer-grid[b-k1bxqjxpy2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ref-customer-item[b-k1bxqjxpy2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(254, 202, 202, 0.9);
}

[b-k1bxqjxpy2] .ref-radio-row .mud-radio-group {
    align-items: center;
}

/* ── Timeslot section ── */
.ref-timeslots[b-k1bxqjxpy2] {
    margin-top: 6px;
    padding: 16px;
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.ref-timeslots-header[b-k1bxqjxpy2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ref-timeslots-label[b-k1bxqjxpy2] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-soft);
}

.ref-timeslots-subtitle[b-k1bxqjxpy2] {
    margin-top: 4px;
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-soft);
}

/* ── Date chips ── */
.ref-date-row[b-k1bxqjxpy2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.ref-date-chip[b-k1bxqjxpy2] {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--color-border-card);
    font-size: var(--mud-typography-body2-size);
    cursor: pointer;
    background: var(--color-bg-page);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    user-select: none;
}

.ref-date-chip:hover[b-k1bxqjxpy2] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.ref-date-chip--active[b-k1bxqjxpy2] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--color-bg-page);
    font-weight: 600;
}

/* ── Branch filter chips (Danske Bank afdelinger) ── */
.ref-branch-row[b-k1bxqjxpy2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border-card);
}

.ref-branch-chip[b-k1bxqjxpy2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-card);
    background: var(--color-bg-page);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    user-select: none;
}

.ref-branch-chip:hover[b-k1bxqjxpy2] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.ref-branch-chip--active[b-k1bxqjxpy2] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--color-bg-page);
    font-weight: 600;
}

.ref-branch-chip--active:hover[b-k1bxqjxpy2] {
    color: var(--color-bg-page);
}

.ref-branch-chip-count[b-k1bxqjxpy2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
}

/* ── Period label ── */
.ref-period-label[b-k1bxqjxpy2] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-soft);
    margin: 16px 0 10px;
}

/* ── Adviser card grid ── */
.ref-adviser-grid[b-k1bxqjxpy2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}

.ref-adviser-card[b-k1bxqjxpy2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 10px 12px;
    border: 2px solid var(--color-border-card);
    border-radius: 10px;
    background: var(--color-bg-page);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    gap: 4px;
}

.ref-adviser-card:hover[b-k1bxqjxpy2] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ref-adviser-card--active[b-k1bxqjxpy2] {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ref-adviser-avatar[b-k1bxqjxpy2] {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: var(--mud-typography-h6-size);
}

.ref-adviser-name[b-k1bxqjxpy2] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-subtle);
}

.ref-adviser-branch[b-k1bxqjxpy2] {
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-soft);
    line-height: 1.3;
}

.ref-adviser-time[b-k1bxqjxpy2] {
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    background: var(--color-border-card);
    color: var(--color-text-soft);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ref-adviser-time--active[b-k1bxqjxpy2] {
    background: var(--mud-palette-primary);
    color: var(--color-bg-page);
}

.ref-adviser-check[b-k1bxqjxpy2] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--mud-palette-primary) !important;
}

/* ── Loading / empty state ── */
.ref-loading-center[b-k1bxqjxpy2] {
    display: flex;
    justify-content: center;
    padding: 24px;
}

.ref-empty-row[b-k1bxqjxpy2] {
    display: flex;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
}

/* ── Consent text ── */
.ref-consent-box[b-k1bxqjxpy2] {
    padding: 16px 18px 14px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.ref-consent-text[b-k1bxqjxpy2] {
    font-size: var(--mud-typography-body2-size);
}

@media (max-width: 768px) {
    .ref-summary-grid[b-k1bxqjxpy2],
    .ref-customer-grid[b-k1bxqjxpy2] {
        grid-template-columns: 1fr;
    }

    .ref-customer-header[b-k1bxqjxpy2],
    .ref-timeslots-header[b-k1bxqjxpy2] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Shared/Dialogs/Create/CreateSagFromActivityDialog.razor.rz.scp.css */
[b-wifximg7np] .mud-dialog {
    max-width: 960px !important;
    width: 100% !important;
}

[b-wifximg7np] .mud-dialog-content {
    padding: 8px 24px 12px !important;
}

[b-wifximg7np] .mud-dialog-actions {
    padding: 10px 24px 16px !important;
    gap: 8px;
}

.csa-titlebar[b-wifximg7np] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.csa-close-btn[b-wifximg7np] {
    flex-shrink: 0;
    color: var(--color-text-secondary) !important;
}

.csa-form[b-wifximg7np] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 0;
}

.csa-row[b-wifximg7np] {
    display: grid;
    gap: 12px;
    align-items: end;
}

.csa-row--4[b-wifximg7np] {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.csa-row--2[b-wifximg7np] {
    grid-template-columns: 1fr 1fr;
}

.csa-field[b-wifximg7np] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.csa-label[b-wifximg7np] {
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.csa-checkboxes[b-wifximg7np] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 4px 0 0;
}

@media (max-width: 900px) {
    .csa-row--4[b-wifximg7np] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .csa-row--4[b-wifximg7np] {
        grid-template-columns: 1fr;
    }

    .csa-row--2[b-wifximg7np] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Dialogs/Create/CreateSearchProfileDialog.razor.rz.scp.css */
.create-sp-map[b-o8spzs9j3c] {
    --area-map-height: 320px;
    margin-top: 8px;
}
/* /Components/Shared/Dialogs/Create/NoteEditorDialog.razor.rz.scp.css */
.ne-type-divider[b-catqcxw8cy] {
    border-top: 1px solid var(--color-border);
    margin: 16px 0;
}

.ne-type-grid[b-catqcxw8cy] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ne-type-pill[b-catqcxw8cy] {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1.5px solid var(--pill-color, var(--color-border));
    background: transparent;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ne-type-pill:hover[b-catqcxw8cy] {
    background: color-mix(in srgb, var(--pill-color, var(--color-border)) 10%, transparent);
}

.ne-type-pill--active[b-catqcxw8cy] {
    background: var(--pill-color, var(--color-border));
    color: var(--mud-palette-background);
}

.ne-type-pill--saelger[b-catqcxw8cy]       { --pill-color: var(--note-pill-saelger); }
.ne-type-pill--servicecenter[b-catqcxw8cy] { --pill-color: var(--note-pill-servicecenter); }
.ne-type-pill--koebsaftale[b-catqcxw8cy]   { --pill-color: var(--note-pill-koebsaftale); }
.ne-type-pill--fremvisning[b-catqcxw8cy]   { --pill-color: var(--note-pill-fremvisning); }
.ne-type-pill--koeber[b-catqcxw8cy]        { --pill-color: var(--note-pill-koeber); }
.ne-type-pill--ehandel[b-catqcxw8cy]       { --pill-color: var(--note-pill-ehandel); }
.ne-type-pill--refusion[b-catqcxw8cy]      { --pill-color: var(--note-pill-refusion); }
.ne-type-pill--aitekst[b-catqcxw8cy]       { --pill-color: var(--note-pill-aitekst); }
/* /Components/Shared/Dialogs/Create/PersonDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  PERSONDIALOG - Scoped styles                ══ */
/* ══  To-kolonne udvidet visning + kontakt-rækker  ══ */
/* ══════════════════════════════════════════════════ */

/* ── Udvidet visning: to lige kolonner (50/50) ──
   Dialogen gøres bredere (Medium) i ToggleAdvanced når man udvider.
   Falder til én kolonne på smal skærm. */
.pdlg-two-col[b-blp5cb5php] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .pdlg-two-col[b-blp5cb5php] {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

/* ── Kontakt-rækker (telefon/e-mail) ──
   Kompakt 2-linjers layout så en række passer i en halv kolonne:
   felt + type øverst, flag på egen flex-linje. */
.pdlg-contact-row[b-blp5cb5php] {
    margin-bottom: 12px;
}

.pdlg-contact-flags[b-blp5cb5php] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 2px;
}

/* Landekode-feltet holdes smalt så det ikke fylder flag-linjen. */
.pdlg-contact-flags[b-blp5cb5php]  .pdlg-cc-field {
    width: 84px;
    flex: 0 0 84px;
}

/* Slet-knappen skubbes ud til højre på flag-linjen. */
.pdlg-contact-flags[b-blp5cb5php]  .pdlg-contact-trash {
    margin-left: auto;
}
/* /Components/Shared/Dialogs/Feedback/FeedbackDialog.razor.rz.scp.css */
.feedback-categories[b-16njg1edw8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 4px;
}

.feedback-card[b-16njg1edw8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--mud-palette-lines-default, #d0d0d0);
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #1a1a1a);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
    font-size: var(--mud-typography-body1-size);
    text-align: center;
    line-height: 1.2;
}

.feedback-card:hover[b-16njg1edw8] {
    background: var(--mud-palette-action-default-hover, #f5f5f5);
}

.feedback-card--selected[b-16njg1edw8] {
    border-color: var(--color-brand);
    background: var(--color-brand-alpha-08);
}

.feedback-card span[b-16njg1edw8] {
    font-weight: 500;
}

.feedback-drop[b-16njg1edw8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 12px;
    border-radius: 8px;
    border: 1px dashed var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    text-align: center;
    transition: border-color 120ms ease, background 120ms ease;
}

.feedback-drop:hover[b-16njg1edw8] {
    background: var(--mud-palette-action-default-hover);
}

.feedback-drop--active[b-16njg1edw8] {
    border-color: var(--color-brand);
    background: var(--color-brand-alpha-08);
}

.feedback-drop__icon[b-16njg1edw8] {
    font-size: 40px; /* empty-state icon scale */
    color: var(--mud-palette-text-secondary);
}

/* Transparent overlay: covers the zone so click/keyboard/drop hit the real <input type=file>.
   ::deep because InputFile renders the <input> as child-component output, out of scoped reach. */
.feedback-drop[b-16njg1edw8]  .feedback-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.feedback-thumbs[b-16njg1edw8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, 72px);
    gap: 8px;
    margin-top: 10px;
}

.feedback-thumb[b-16njg1edw8] {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
}

.feedback-thumb__img[b-16njg1edw8] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feedback-thumb[b-16njg1edw8]  .feedback-thumb__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 2px;
    background: var(--mud-palette-surface);
}

.feedback-thumb__size[b-16njg1edw8] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1px 0;
    text-align: center;
    background: var(--mud-palette-overlay-dark);
    color: var(--mud-palette-white);
}
/* /Components/Shared/Dialogs/Help/ManualDialog.razor.rz.scp.css */
/* Tabs share the title row instead of taking a row of their own above the content. */
.laering-title[b-29z5v2ern7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

/* The dialog opens full screen; fill the window minus the title row and the button row.
   dvh, not vh, so the mobile address bar does not push the Luk button off screen. */
.laering-frame[b-29z5v2ern7],
.laering-updates[b-29z5v2ern7]  .relhist-scroll {
    width: 100%;
    height: calc(100dvh - 170px);
}

.laering-frame[b-29z5v2ern7] {
    border: none;
    border-radius: var(--radius-xs);
}

/* On phones the tabs wrap below the title, so the title row is taller. */
@media (max-width: 599px) {
    .laering-frame[b-29z5v2ern7],
    .laering-updates[b-29z5v2ern7]  .relhist-scroll {
        height: calc(100dvh - 220px);
    }
}
/* /Components/Shared/Dialogs/Help/ReleaseHistory.razor.rz.scp.css */
/* Height is set by ManualDialog so it matches the manual iframe. */
.relhist-scroll[b-gg9t32qkx5] {
    overflow-y: auto;
}

.relhist-title[b-gg9t32qkx5] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.relhist-scroll[b-gg9t32qkx5]  .relhist-empty-icon {
    font-size: 40px;
    color: var(--mud-palette-lines-default);
}
/* /Components/Shared/Dialogs/Send/BookAftalDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  BookAftalDialog - Scoped styles             ══ */
/* ══  Matcher Aktiviteter-kalenderens design      ══ */
/* ══════════════════════════════════════════════════ */

/* ── Dialog override ────────────────────────────── */

/* ── Titlebar ───────────────────────────────────── */
.ba-titlebar[b-911144tufe] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.ba-titlebar__text[b-911144tufe] {
    min-width: 0;
}

.ba-close-btn[b-911144tufe] {
    flex-shrink: 0;
    color: var(--color-text-secondary) !important;
}

/* ── Main layout ────────────────────────────────── */
.ba-layout[b-911144tufe] {
    display: flex;
    gap: 20px;
    height: 100%;
    min-height: 500px;
    /* The narrow-dialog rule below keys on the dialog's own width, not the viewport: Split View,
       Stage Manager or a zoomed iPad give a wide screen but a narrow dialog. */
    container-type: inline-size;
}

/* Form + middle wrapper; only takes part in the layout when the dialog is narrow. */
.ba-side[b-911144tufe] {
    display: contents;
}

/* ── Left: form panel ───────────────────────────── */
.ba-form[b-911144tufe] {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    background: var(--mud-palette-background);
    border-radius: var(--radius-xl);
    box-shadow: none;
    padding: 12px;
}

/* ── Middle: calendar + employees ──────────────── */
.ba-middle[b-911144tufe] {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

/* Uge-kalenderen (.ba-week + ba-week-* + week-* overrides) er flyttet til den delte
   BookingWeekCalendar-komponent (Components/Shared/Calendar/BookingWeekCalendar.razor). */

/* ══════════════════════════════════════════════════ */
/* ══  PERSON CARD                                 ══ */
/* ══════════════════════════════════════════════════ */
.ba-person-card[b-911144tufe] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px 0 6px;
}

.ba-person-name[b-911144tufe] {
    font-size: var(--mud-typography-body1-size);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}

/* Name left, "Fjern kunde" right on a lead booking. */
.ba-person-card-header[b-911144tufe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Name is a link. No line. Line shows on hover. */
.ba-person-name--link[b-911144tufe] {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.ba-person-name--link:hover[b-911144tufe] {
    text-decoration: underline;
}

.ba-contact-info[b-911144tufe] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ══════════════════════════════════════════════════ */
/* ══  FORM FIELDS                                 ══ */
/* ══════════════════════════════════════════════════ */
.ba-field[b-911144tufe] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ba-field-row[b-911144tufe] {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 8px;
    align-items: stretch;
}

.ba-field-row .ba-field[b-911144tufe] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ba-label[b-911144tufe] {
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Lead meta info strip ── */
.ba-lead-meta[b-911144tufe] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 2px;
}

.ba-lead-meta-item[b-911144tufe] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ba-lead-meta-label[b-911144tufe] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.ba-lead-meta-value[b-911144tufe] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-primary);
}

/* ── Read-only lead description ── */
.ba-description-readonly[b-911144tufe] {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    font-size: var(--mud-typography-body2-size);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Date row ── 1:1 med kalenderens Opret aftale-dialog. */
.ba-date-row[b-911144tufe] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.ba-date-label-row[b-911144tufe] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ba-duration-caption[b-911144tufe] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-muted);
}

.ba-date-chip[b-911144tufe] {
    height: 36px;
    border-radius: 10px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border-card);
    color: var(--color-text-primary);
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.ba-date-chip--date[b-911144tufe] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ba-date-chip--date[b-911144tufe] {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-weight: 600;
    outline: none;
    white-space: nowrap;
}

.ba-date-chip--date:focus[b-911144tufe] { border-color: var(--color-brand); box-shadow: var(--focus-ring-brand-soft); }

.ba-date-chip--placeholder[b-911144tufe] {
    flex: 1;
    color: var(--color-text-secondary);
    justify-content: flex-start;
    border-color: var(--color-border-subtle);
}

.ba-duration-chip[b-911144tufe] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 36px;
    min-height: 36px;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
}

.ba-date-separator[b-911144tufe] {
    color: var(--color-text-disabled);
    font-size: var(--mud-typography-body1-size);
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}

.ba-time-select-wrap[b-911144tufe] {
    width: 84px;
    flex-shrink: 0;
}

.ba-time-input[b-911144tufe] {
    width: 100%;
    /* iOS gives native date/time inputs an intrinsic minimum width that ignores width: 100%,
       so the date row overflowed the 340 px form on an iPad. */
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 36px;
    padding: 0 8px;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border-card);
    border-radius: 10px;
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    color: var(--color-text-primary);
    outline: none;
    box-sizing: border-box;
    cursor: text;
}

.ba-time-input:hover[b-911144tufe] { border-color: var(--color-text-muted); }

.ba-time-input:focus[b-911144tufe] {
    border-color: var(--color-brand);
    box-shadow: var(--focus-ring-brand-soft);
}

.ba-time-input[b-911144tufe]::-webkit-calendar-picker-indicator { display: none; }

.ba-time-select-wrap[b-911144tufe]  .mud-input-control {
    margin-bottom: 0 !important;
}

.ba-time-select-wrap[b-911144tufe]  .mud-input-outlined {
    background: var(--color-bg-muted) !important;
}

.ba-time-select-wrap[b-911144tufe]  .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-border-card) !important;
    border-radius: 10px !important;
}

.ba-time-select-wrap[b-911144tufe]  .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--color-text-muted) !important;
}

.ba-time-select-wrap[b-911144tufe]  .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--color-brand) !important;
    box-shadow: var(--focus-ring-brand-soft) !important;
}

.ba-time-select-wrap[b-911144tufe]  .mud-select-input {
    font-size: var(--mud-typography-body2-size) !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    cursor: pointer;
}

.ba-time-select-wrap[b-911144tufe]  .mud-input-slot {
    padding-left: 10px !important;
}

/* ── SAG-søgeforslag i autocomplete-dropdown — 1:1 med kalenderens Opret aftale ── */
.ba-case-search-item[b-911144tufe] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    min-width: 0;
}

.ba-case-search-thumb[b-911144tufe] {
    flex-shrink: 0;
    width: 44px;
    height: 36px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ba-case-search-img[b-911144tufe] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ba-case-search-info[b-911144tufe] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ba-case-search-address[b-911144tufe] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ba-case-search-meta[b-911144tufe] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.ba-case-search-number[b-911144tufe] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ba-case-search-status[b-911144tufe] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.ba-case-search-dot[b-911144tufe] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ba-case-search-status--vurdering[b-911144tufe] { color: var(--mud-palette-warning-darken, #e65100); }
.ba-case-search-status--vurdering .ba-case-search-dot[b-911144tufe] { background: var(--mud-palette-warning); }
.ba-case-search-status--aktiv[b-911144tufe] { color: var(--mud-palette-success-darken, #2e7d32); }
.ba-case-search-status--aktiv .ba-case-search-dot[b-911144tufe] { background: var(--mud-palette-success); }
.ba-case-search-status--tilsalg[b-911144tufe] { color: var(--mud-palette-primary); }
.ba-case-search-status--tilsalg .ba-case-search-dot[b-911144tufe] { background: var(--mud-palette-primary); }

.ba-case-search-broker[b-911144tufe] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════ */
/* ══  CALENDAR SELECTOR (BusinessCalendarSelector) ══ */
/* ══════════════════════════════════════════════════ */
.cal-mini[b-911144tufe] {
    box-shadow: none;
}

/* The grouped business selector (BusinessCalendarSelector, root .emp-section) now
   lives here under the mini-calendar. Let it take the remaining height and scroll
   its own list inside this narrower middle column. */
.ba-middle[b-911144tufe]  .emp-section {
    flex: 1;
    min-height: 0;
}

/* Uge-kalenderens styles (ba-week-nav/-btn/-placeholder/-grid/-agent/-body/-slot-preview
   + week-day-col/week-event overrides) er flyttet til den delte
   BookingWeekCalendar-komponents scoped CSS. */

/* ── Hjælpetekst under DATO når tiden er foreslået ud fra et åbent hus ── */
.ba-openhouse-hint[b-911144tufe] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

.ba-openhouse-hint .ph[b-911144tufe] {
    color: var(--mud-palette-warning);
    margin-top: 1px;
    flex-shrink: 0;
}

/* ── MudBlazor input overrides ──────────────────── */
.ba-form[b-911144tufe]  .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-border-card) !important;
    border-radius: 10px !important;
}

.ba-form[b-911144tufe]  .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--color-text-muted) !important;
}

.ba-form[b-911144tufe]  .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--color-brand) !important;
    box-shadow: var(--focus-ring-brand-soft) !important;
}

.ba-form[b-911144tufe]  .mud-input-slot {
    font-size: var(--mud-typography-body2-size) !important;
}

/* Fjern grå baggrund på input adornments (spinner, dropdown-pil) */
.ba-form[b-911144tufe]  .mud-input-adornment button,
.ba-form[b-911144tufe]  .mud-input-adornment-end button {
    background: transparent !important;
    box-shadow: none !important;
}

.ba-form[b-911144tufe]  .mud-input-adornment button:hover,
.ba-form[b-911144tufe]  .mud-input-adornment button:active,
.ba-form[b-911144tufe]  .mud-input-adornment button:focus,
.ba-form[b-911144tufe]  .mud-input-adornment-end button:hover,
.ba-form[b-911144tufe]  .mud-input-adornment-end button:active,
.ba-form[b-911144tufe]  .mud-input-adornment-end button:focus {
    background: transparent !important;
    box-shadow: none !important;
}

.ba-form[b-911144tufe]  .mud-input-adornment .mud-ripple,
.ba-form[b-911144tufe]  .mud-input-adornment-end .mud-ripple {
    display: none !important;
}

.ba-time-select-wrap[b-911144tufe]  .mud-input-adornment button,
.ba-time-select-wrap[b-911144tufe]  .mud-input-adornment-end button {
    background: transparent !important;
    box-shadow: none !important;
}

.ba-time-select-wrap[b-911144tufe]  .mud-input-adornment button:hover,
.ba-time-select-wrap[b-911144tufe]  .mud-input-adornment button:active,
.ba-time-select-wrap[b-911144tufe]  .mud-input-adornment-end button:hover,
.ba-time-select-wrap[b-911144tufe]  .mud-input-adornment-end button:active {
    background: transparent !important;
    box-shadow: none !important;
}

.ba-time-select-wrap[b-911144tufe]  .mud-ripple {
    display: none !important;
}

/* ── Varighed spinner ─────────────────────────────── */
.ba-form[b-911144tufe]  .mud-input-numeric-spin {
    right: 4px !important;
}

.ba-form[b-911144tufe]  .mud-input-numeric-spin button,
.ba-form[b-911144tufe]  .mud-input-numeric-spin .mud-icon-button {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.ba-form[b-911144tufe]  .mud-input-numeric-spin button:hover,
.ba-form[b-911144tufe]  .mud-input-numeric-spin button:active,
.ba-form[b-911144tufe]  .mud-input-numeric-spin button:focus-within,
.ba-form[b-911144tufe]  .mud-input-numeric-spin .mud-icon-button:hover,
.ba-form[b-911144tufe]  .mud-input-numeric-spin .mud-icon-button:active,
.ba-form[b-911144tufe]  .mud-input-numeric-spin .mud-icon-button:focus-within {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.ba-form[b-911144tufe]  .mud-input-numeric-spin .mud-ripple {
    display: none !important;
}

/* ── Lead notes (internal) ── */
.ba-notes[b-911144tufe] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* "Opret note" button: clearly disabled until text is entered; red hover when active. */
.ba-notes-add[b-911144tufe]  .ba-note-add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Smal dialog (tablet): form + middle share one scrolling column ──
   Two fixed columns (340 + 240 px) left the week calendar about 100 px on an iPad (#1785).
   Stacking form and middle on the left gives it the rest of the width at full height, which
   also works in landscape where there is no room to put it underneath. Phones keep the
   stacked layout further down, hence the viewport guard. */
@media (min-width: 600px) {
    @container (max-width: 1099px) {
        .ba-side[b-911144tufe] {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: min-content;
            flex-shrink: 0;
            min-height: 0;
            overflow-y: auto;
        }

        /* The form keeps its 340 px (the date row needs it); the column sizes to it. */
        .ba-form[b-911144tufe] {
            flex-shrink: 0;
            overflow-y: visible;
        }

        /* Long employee names must not widen the column past the form. */
        .ba-middle[b-911144tufe] {
            width: auto;
            flex-shrink: 0;
            contain: inline-size;
        }

        .ba-layout[b-911144tufe]  .ba-week-nav,
        .ba-layout[b-911144tufe]  .ba-week-nav-right {
            flex-wrap: wrap;
            min-width: 0;
        }
    }
}

/* ── Telefon: de tre kolonner stables ──
   Formularen først, så mini-kalender/medarbejdere, så ugekalenderen. Ugekalenderen mister sin
   flex-højde i kolonne-layoutet og får en fast højde i stedet; selve dialogens
   scroll slås til i app.css (.ba-dialog sætter overflow: hidden på indholdet). */
@media (max-width: 599px) {
    .ba-layout[b-911144tufe] {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .ba-form[b-911144tufe],
    .ba-middle[b-911144tufe] {
        width: auto;
        flex-shrink: 1;
    }

    .ba-form[b-911144tufe] {
        overflow-y: visible;
    }

    /* "Uge 36 - 31. aug. til 6. sep. 2026", three buttons and the view toggle do not fit one line at 390 px. */
    .ba-layout[b-911144tufe]  .ba-week-nav,
    .ba-layout[b-911144tufe]  .ba-week-nav-right {
        flex-wrap: wrap;
        min-width: 0;
    }

    /* Fixed height so the week body keeps its own scroll instead of unrolling all 24 hours. */
    .ba-layout[b-911144tufe]  .ba-week {
        height: 480px;
        min-height: 0;
        flex: 0 0 auto;
    }
}
/* /Components/Shared/Dialogs/Send/RecipientMessagePreview.razor.rz.scp.css */
.message-preview[b-xtgycxyf2x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-bg-page);
}

.message-preview[b-xtgycxyf2x]  .message-preview-head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

/* Same hint surface as the dialog's own .sc-empty-note, left-aligned with an icon. */
.message-preview-hint[b-xtgycxyf2x] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

.message-preview-hint i[b-xtgycxyf2x] {
    font-size: var(--icon-size-sub);
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}

.message-preview-body[b-xtgycxyf2x] {
    font-size: var(--mud-typography-body1-size);
    line-height: 1.6;
    color: var(--color-text-primary);
    word-break: break-word;
}

.message-preview-sms[b-xtgycxyf2x] {
    white-space: pre-wrap;
}
/* /Components/Shared/Dialogs/Send/SendAppointmentConfirmationDialog.razor.rz.scp.css */
/* ── Dialog size ── */
[b-wmtpti40y1] .mud-dialog.sc-dialog {
    max-width: 960px !important;
    width: 960px !important;
}

[b-wmtpti40y1] .mud-dialog.sc-dialog .mud-dialog-content {
    padding: 0 20px 8px !important;
    overflow: hidden !important;
    min-height: 480px;
}

[b-wmtpti40y1] .mud-dialog.sc-dialog .mud-dialog-actions {
    padding: 10px 24px 16px !important;
    border-top: 1px solid var(--color-border);
}

/* ── Titlebar ── */
.sc-titlebar[b-wmtpti40y1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.sc-close-btn[b-wmtpti40y1] {
    color: var(--color-text-secondary) !important;
    flex-shrink: 0;
}

/* ── Two-panel layout ── */
.sc-layout[b-wmtpti40y1] {
    display: flex;
    gap: 0;
    min-height: 0;
    height: min(720px, calc(100dvh - 160px));
    padding-top: 8px;
}

/* ── Left sidebar ── */
.sc-sidebar[b-wmtpti40y1] {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    flex-shrink: 0;
    overflow: hidden;
    min-height: 0;
    border-right: 1px solid var(--color-border);
    padding: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-sidebar--bulk[b-wmtpti40y1] {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
}

/* ── Sidebar section buttons ── */
.sc-sidebar > *[b-wmtpti40y1] {
    flex-shrink: 0;
}

.sc-sidebar > .sc-recipient-list[b-wmtpti40y1] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Bulk: one group heading + search above the list instead of a "Kunde" title per row. */
.sc-sidebar-head[b-wmtpti40y1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--color-border);
}

.sc-sidebar-head-row[b-wmtpti40y1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.sc-sidebar-head-row[b-wmtpti40y1]  .sc-sidebar-count {
    white-space: nowrap;
}

/* Kunde with no channel on: still listed, visibly not receiving anything. */
.sc-section--off .sc-recipient-name[b-wmtpti40y1] {
    color: var(--color-text-muted);
}

.sc-section--off .sc-recipient-status[b-wmtpti40y1] {
    color: var(--color-text-error);
}

.sc-recipient-search-wrap[b-wmtpti40y1] {
    position: relative;
    display: flex;
    align-items: center;
}

.sc-recipient-search-wrap i[b-wmtpti40y1] {
    position: absolute;
    left: 10px;
    font-size: var(--icon-size-caret);
    color: var(--color-text-muted);
    pointer-events: none;
}

.sc-recipient-search[b-wmtpti40y1] {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-btn);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    box-sizing: border-box;
    transition: var(--transition-fast);
}

.sc-recipient-search[b-wmtpti40y1]::placeholder {
    color: var(--color-text-muted);
}

.sc-recipient-search:focus[b-wmtpti40y1] {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.sc-recipient-status[b-wmtpti40y1] {
    display: block;
    padding: 6px 12px;
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
}

.sc-section .sc-recipient-status[b-wmtpti40y1] {
    padding: 0;
}

.sc-recipient-pages[b-wmtpti40y1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 0;
    border-top: 1px solid var(--color-border);
}

.sc-page-label[b-wmtpti40y1] {
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
}

.sc-recipient-empty[b-wmtpti40y1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px 12px;
    text-align: center;
}

.sc-recipient-empty i[b-wmtpti40y1] {
    font-size: var(--icon-size-title);
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.sc-page-btn[b-wmtpti40y1] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    background: var(--color-bg-page);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

/* Same proportions as the notes pager on Sager-detalje (32px button, 16px glyph). */
.sc-page-btn i[b-wmtpti40y1] {
    font-size: var(--icon-size-btn);
    line-height: 1;
}

.sc-page-btn:hover:not([disabled])[b-wmtpti40y1] {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
}

.sc-page-btn[disabled][b-wmtpti40y1] {
    opacity: 0.45;
    cursor: default;
}

/* Bulk rows drop the per-row title, so they sit tighter than the single-kunde section. */
.sc-section--row[b-wmtpti40y1] {
    padding: 6px 12px;
}

.sc-section--row .sc-recipient[b-wmtpti40y1] {
    align-items: center;
}

.sc-bulk-channels[b-wmtpti40y1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.sc-bulk-channels-label[b-wmtpti40y1] {
    margin-right: 4px;
}

.sc-bulk-channels[b-wmtpti40y1]  .mud-checkbox .mud-typography {
    font-size: var(--mud-typography-body2-size);
}

.sc-section[b-wmtpti40y1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 8px 12px 8px 12px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
    box-sizing: border-box;
}

.sc-section:focus-visible[b-wmtpti40y1] {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

.sc-section:hover[b-wmtpti40y1] {
    background: var(--color-bg-subtle);
}

.sc-section--active[b-wmtpti40y1] {
    border-left-color: var(--color-brand);
    background: var(--color-brand-bg);
}

.sc-section--active .sc-section-title[b-wmtpti40y1] {
    color: var(--color-brand);
}

.sc-section-title[b-wmtpti40y1] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

/* Info hint next to the "Medarbejder" title — only shown when multiple calendars are selected. */
.sc-section-info[b-wmtpti40y1] {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    cursor: help;
    vertical-align: middle;
}

.sc-section-divider[b-wmtpti40y1] {
    height: 1px;
    background: var(--color-border);
    margin: 8px 0 4px;
}

.sc-recipient[b-wmtpti40y1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.sc-recipient-meta[b-wmtpti40y1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sc-recipient-name[b-wmtpti40y1] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-recipient-sub[b-wmtpti40y1] {
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-recipient-icons[b-wmtpti40y1] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    padding-top: 1px;
}

.sc-channel-icon[b-wmtpti40y1] {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
}

.sc-channel-icon i[b-wmtpti40y1] {
    font-size: 14px;
    line-height: 1;
}

/* Medarbejder picker trigger (sidebar) — switches the appointment's assignee + sender */
.sc-sender-trigger[b-wmtpti40y1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: var(--transition-fast);
}

.sc-sender-trigger:hover[b-wmtpti40y1] {
    border-color: var(--color-text-muted);
}

/* MudMenu wraps the activator in an inline element by default, so the trigger button
   shrinks to its content. Force the wrapper full-width so the box fills the column and
   its left edge aligns with the "Medarbejder" title. */
.sc-section--employee[b-wmtpti40y1]  .mud-menu,
.sc-section--employee[b-wmtpti40y1]  .mud-menu > div {
    width: 100%;
    display: block;
}

/* Clickable channel toggles in the Kunde row */
.sc-channel-toggle[b-wmtpti40y1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    /* Off = empty dashed slot, on = filled brand chip, so the two states read at a glance. */
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    opacity: 0.6;
    cursor: pointer;
    transition: var(--transition-fast);
}

.sc-channel-toggle:hover[b-wmtpti40y1] {
    background: var(--color-bg-page);
    border-color: var(--color-text-muted);
    color: var(--color-text-primary);
    opacity: 1;
}

.sc-channel-toggle--active[b-wmtpti40y1] {
    color: var(--color-brand);
    background: var(--color-brand-bg);
    border-style: solid;
    border-color: transparent;
    opacity: 1;
}

.sc-channel-toggle--active:hover[b-wmtpti40y1] {
    color: var(--color-brand);
    background: var(--color-brand-bg);
    border-color: var(--color-brand);
}

.sc-channel-toggle i[b-wmtpti40y1] {
    font-size: var(--icon-size-table);
    line-height: 1;
}

/* ── Right content ── */
.sc-main[b-wmtpti40y1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.sc-main > .sc-send-to-note[b-wmtpti40y1] {
    flex-shrink: 0;
    margin: 8px 4px 0 20px;
}

.sc-body[b-wmtpti40y1] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 4px 0 20px;
}

/* ── Context header ── */
.sc-body-header[b-wmtpti40y1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.sc-header-label[b-wmtpti40y1] {
    flex: 1;
    min-width: 0;
}

.sc-header-title[b-wmtpti40y1] {
    font-size: var(--mud-typography-h6-size);
    font-weight: 700;
    color: var(--color-text-primary);
}

.sc-header-position[b-wmtpti40y1] {
    font-size: var(--mud-typography-caption-size);
    color: var(--color-brand);
    font-weight: 600;
    margin-top: 2px;
}

.sc-header-subtitle[b-wmtpti40y1] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-muted);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-avatar[b-wmtpti40y1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

/* ── Kanal-toggle ── */
.sc-toggle-row[b-wmtpti40y1] {
    display: flex;
    gap: 8px;
}

.sc-toggle-btn[b-wmtpti40y1] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-btn);
    background: var(--color-bg-page);
    color: var(--color-text-medium);
    font-family: inherit;
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.sc-toggle-btn:hover[b-wmtpti40y1] {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
}

.sc-toggle-btn--active[b-wmtpti40y1] {
    background: var(--color-brand-bg);
    color: var(--color-brand);
    border-color: var(--color-brand);
}

.sc-toggle-btn--active:hover[b-wmtpti40y1] {
    background: var(--color-brand-bg);
    border-color: var(--color-brand);
}

.sc-toggle-btn svg[b-wmtpti40y1] { flex-shrink: 0; }

/* ── Native inputs ── */
.sc-select[b-wmtpti40y1],
.sc-input[b-wmtpti40y1] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-btn);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--mud-typography-body1-size);
    box-sizing: border-box;
    transition: var(--transition-fast);
}

.sc-select:focus[b-wmtpti40y1],
.sc-input:focus[b-wmtpti40y1] {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.sc-select[b-wmtpti40y1] {
    cursor: pointer;
}

.sc-input[b-wmtpti40y1]::placeholder {
    color: var(--color-text-muted);
}

/* ── Custom template dropdown (MudMenu) trigger — replaces native <select> ── */
.sc-tmpl-trigger[b-wmtpti40y1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-btn);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--mud-typography-body1-size);
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
}

.sc-tmpl-trigger:hover[b-wmtpti40y1] {
    border-color: var(--color-text-muted);
}

.sc-tmpl-trigger-label[b-wmtpti40y1] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-tmpl-trigger-caret[b-wmtpti40y1] {
    font-size: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* ── Hjælpetekst ── */
.sc-char-count[b-wmtpti40y1] {
    display: block;
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
    margin-top: 2px;
    text-align: right;
}

/* ── Channel section wrapper (keeps composition siblings flowing as one
       block instead of becoming separate flex items of .sc-body) ── */
.sc-channel-section[b-wmtpti40y1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.sc-channel-section--email[b-wmtpti40y1] {
    flex: 1;
    min-height: 0;
}

/* Make the template MudMenu trigger fill the row width (left-aligned under the
   SMS/E-mail tabs) instead of shrinking to content width. */
.sc-channel-section[b-wmtpti40y1]  .mud-menu,
.sc-channel-section[b-wmtpti40y1]  .mud-menu > div {
    width: 100%;
    display: block;
}

/* MudTextField/MudSelects outlined-variant har ingen hvid baggrund sat globalt -
   match den hvide boks skabelon-triggeren og e-mail-editoren allerede bruger. */
.sc-channel-section[b-wmtpti40y1]  .mud-input-outlined {
    background: var(--color-bg-page) !important;
}

.sc-channel-section[b-wmtpti40y1]  .mud-input-outlined input,
.sc-channel-section[b-wmtpti40y1]  .mud-input-outlined textarea,
.sc-channel-section[b-wmtpti40y1]  .mud-select-input {
    font-size: var(--mud-typography-body1-size) !important;
    font-family: inherit !important;
}

/* ── Empty state (no channels selected) ── */
.sc-empty-note[b-wmtpti40y1] {
    padding: 14px 16px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-size: var(--mud-typography-body2-size);
    line-height: 1.5;
    text-align: center;
}

/* ── Sælger summary ── */
.sc-summary[b-wmtpti40y1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 6px);
}

.sc-summary-row[b-wmtpti40y1] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sc-summary-label[b-wmtpti40y1] {
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
    width: 72px;
    flex-shrink: 0;
}

.sc-summary-value[b-wmtpti40y1] {
    font-size: var(--mud-typography-body1-size);
    color: var(--color-text-primary);
    font-weight: 500;
}

.sc-summary-note[b-wmtpti40y1] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-muted);
    margin: 6px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

/* ── Footer ── */
.sc-footer-sender[b-wmtpti40y1] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-muted);
}

/* ── Slim channel pills (replaces the old tab-sized toggle) ── */
.sc-pills[b-wmtpti40y1] {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    align-self: flex-start;
}

.sc-pill[b-wmtpti40y1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition-fast);
}

.sc-pill i[b-wmtpti40y1] {
    font-size: 14px;
    line-height: 1;
}

.sc-pill:hover[b-wmtpti40y1] {
    color: var(--color-text-primary);
}

.sc-pill--active[b-wmtpti40y1] {
    background: var(--color-bg-page);
    color: var(--color-brand);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

/* ── Email editor shell with absolutely-positioned vertical toolbar ── */
.sc-editor-shell[b-wmtpti40y1] {
    position: relative;
    flex: 1;
    /* Floor matches the editor's MinHeight: a tall Xink signature scrolls .sc-body instead of crushing the editor. */
    min-height: 240px;
    display: flex;
}

.sc-editor-shell > :first-child[b-wmtpti40y1] {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* Style the RichTextEditor (its classes have no global styling) */
[b-wmtpti40y1] .sc-editor-shell .rte {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-page);
    overflow: hidden;
}

[b-wmtpti40y1] .sc-editor-shell .rte-editor {
    flex: 1;
    min-height: 0;
    padding: 14px 56px 14px 16px; /* extra right padding for floating toolbar */
    font-size: var(--mud-typography-body1-size);
    line-height: 1.6;
    color: var(--color-text-primary);
    outline: none;
    overflow-y: auto;
    word-break: break-word;
}

[b-wmtpti40y1] .sc-editor-shell .rte-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
}

.sc-format-toolbar[b-wmtpti40y1] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
    background: color-mix(in srgb, var(--color-bg-page) 92%, transparent);
    border-radius: var(--radius-btn);
}

.sc-format-btn[b-wmtpti40y1] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-brand);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 0;
}

.sc-format-btn:hover[b-wmtpti40y1] {
    background: var(--color-brand-bg);
}

.sc-format-btn:active[b-wmtpti40y1] {
    background: color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.sc-format-btn i[b-wmtpti40y1] {
    font-size: 18px;
    line-height: 1;
}

.sc-format-btn--disabled[b-wmtpti40y1],
.sc-format-btn[disabled][b-wmtpti40y1] {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.55;
}

.sc-format-btn--disabled:hover[b-wmtpti40y1],
.sc-format-btn[disabled]:hover[b-wmtpti40y1] {
    background: transparent;
}

/* ── Multi-recipient send-to note ── */
.sc-send-to-note[b-wmtpti40y1] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    background: var(--color-brand-bg);
    border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-medium);
    font-size: var(--mud-typography-body2-size);
    line-height: 1.4;
}

.sc-own-copy-note[b-wmtpti40y1] {
    display: block;
    margin-top: 8px;
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
}

.sc-send-to-note i[b-wmtpti40y1] {
    font-size: 15px;
    color: var(--color-brand);
    flex-shrink: 0;
    margin-top: 1px;
}

[b-wmtpti40y1] .mud-dialog.sc-dialog .sc-cta--secondary {
    background-color: color-mix(in srgb, var(--color-brand) 88%, black) !important;
}

/* ── Custom "Indsæt link" dialog (replaces the native browser prompt) ── */
.sc-link-overlay[b-wmtpti40y1] {
    position: fixed;
    inset: 0;
    z-index: 1410;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sc-link-backdrop[b-wmtpti40y1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
}

.sc-link-card[b-wmtpti40y1] {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.28), 0 4px 16px -4px rgba(0, 0, 0, 0.16);
    animation: sc-link-in-b-wmtpti40y1 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sc-link-in-b-wmtpti40y1 {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.sc-link-card-header[b-wmtpti40y1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sc-link-card-header i[b-wmtpti40y1] {
    font-size: 18px;
    color: var(--mud-palette-text-secondary);
}

.sc-link-input[b-wmtpti40y1] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-md, 8px);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-fast);
}

.sc-link-input:focus[b-wmtpti40y1] {
    border-color: var(--mud-palette-primary);
}

.sc-link-input[b-wmtpti40y1]::placeholder {
    color: var(--mud-palette-text-disabled);
}

.sc-link-actions[b-wmtpti40y1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Time-change banner (drag reschedule) ─────────────────── */

.sc-time-change[b-wmtpti40y1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    font-size: var(--mud-typography-body2-size);
}

.sc-time-change-row[b-wmtpti40y1] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-tc-label[b-wmtpti40y1] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    min-width: 34px;
}

.sc-time-change-row--old .sc-tc-value[b-wmtpti40y1] {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

.sc-time-change-row--new .sc-tc-value[b-wmtpti40y1] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.sc-tc-arrow[b-wmtpti40y1] {
    font-size: 16px;
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

/* Named sc-genlink-* rather than sc-link-*: the latter is already the "Indsæt link"
   overlay's namespace further up this file. */
.sc-genlink-row[b-wmtpti40y1] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sc-genlink-input[b-wmtpti40y1] {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-body);
    background: var(--color-bg-subtle);
    outline: none;
}

.sc-genlink-input:focus[b-wmtpti40y1] {
    border-color: var(--color-brand);
}

.sc-genlink-copy[b-wmtpti40y1] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-bg-page);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.sc-genlink-copy:hover[b-wmtpti40y1],
.sc-genlink-copy:focus-visible[b-wmtpti40y1] {
    background: var(--color-bg-hover);
    color: var(--color-text-body);
}

/* ── Phones: sidebar becomes a wrapping row of section buttons above the content ── */
@media (max-width: 599px) {
    .sc-layout[b-wmtpti40y1] {
        flex-direction: column;
        min-height: 0;
        height: auto;
    }

    .sc-sidebar[b-wmtpti40y1] {
        width: auto;
        min-width: 0;
        max-width: none;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 0 0 8px;
    }

    .sc-section[b-wmtpti40y1] {
        width: auto;
        max-width: none;
    }

    /* Stacked content grows past 100dvh; the desktop overflow: hidden above would trap it. */
    [b-wmtpti40y1] .mud-dialog.sc-dialog .mud-dialog-content {
        overflow-y: auto !important;
    }
}

/* Who the message goes out as. Sits above the recipient header because the sender is the same
   for every kunde and sælger in the dialog. */
.sc-sender[b-wmtpti40y1] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 12px;
}

.sc-sender-field[b-wmtpti40y1] {
    flex: 1 1 220px;
    min-width: 0;
}

/* Same heading as SmsSenderSelect's own label, so the two fields read as one row. */
.sc-sender-label[b-wmtpti40y1] {
    display: block;
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

/* MudSelect keeps its pointer cursor when read-only. */
.sc-sender[b-wmtpti40y1]  .sc-sender-select--fixed .mud-select-input {
    cursor: default;
}
/* /Components/Shared/Dialogs/Send/SendDocumentsDialog.razor.rz.scp.css */
/* Visual language mirrors SendAppointmentConfirmationDialog (sc-*), scoped here.
   Dialog width comes from DialogOptions (MaxWidth.Medium + FullWidth) at the
   call site — the dialog is teleported by DialogProvider, so width can't be set
   from this scoped stylesheet. */

/* ── Titlebar ── */
.sd-titlebar[b-5pc9yzv3qy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.sd-close-btn[b-5pc9yzv3qy] {
    color: var(--color-text-secondary) !important;
    flex-shrink: 0;
}

/* ── Two-panel layout ── */
.sd-layout[b-5pc9yzv3qy] {
    display: flex;
    gap: 0;
    min-height: 440px;
    height: 100%;
    padding-top: 8px;
}

/* ── Left sidebar ── */
.sd-sidebar[b-5pc9yzv3qy] {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    padding: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sd-section[b-5pc9yzv3qy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    box-sizing: border-box;
}

.sd-section-title[b-5pc9yzv3qy] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.sd-hint[b-5pc9yzv3qy] {
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* ── Recipient rows (compact, toggle by click) ── */
.sd-recipient[b-5pc9yzv3qy] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
    box-sizing: border-box;
}

.sd-recipient:hover[b-5pc9yzv3qy] {
    background: var(--color-bg-subtle);
}

.sd-recipient--active[b-5pc9yzv3qy] {
    background: var(--color-brand-bg);
    border-color: color-mix(in srgb, var(--color-brand) 25%, transparent);
}

.sd-recipient--disabled[b-5pc9yzv3qy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sd-recipient-check[b-5pc9yzv3qy] {
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.sd-recipient--active .sd-recipient-check[b-5pc9yzv3qy] {
    color: var(--color-brand);
}

.sd-recipient-meta[b-5pc9yzv3qy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sd-recipient-name[b-5pc9yzv3qy] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-recipient-sub[b-5pc9yzv3qy] {
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-lead-tag[b-5pc9yzv3qy] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand);
    flex-shrink: 0;
}

/* ── Right content ── */
.sd-body[b-5pc9yzv3qy] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 4px 0 20px;
}

.sd-body-header[b-5pc9yzv3qy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.sd-header-label[b-5pc9yzv3qy] {
    flex: 1;
    min-width: 0;
}

.sd-header-title[b-5pc9yzv3qy] {
    font-size: var(--mud-typography-h6-size);
    font-weight: 700;
    color: var(--color-text-primary);
}

.sd-header-subtitle[b-5pc9yzv3qy] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-avatar[b-5pc9yzv3qy] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sd-avatar i[b-5pc9yzv3qy] {
    font-size: 18px;
    line-height: 1;
}

/* ── Documents (top of body) ── */
.sd-docs[b-5pc9yzv3qy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sd-doc-chip[b-5pc9yzv3qy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-pill);
    background: var(--color-bg-page);
    color: var(--color-text-medium);
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    max-width: 100%;
}

.sd-doc-chip span[b-5pc9yzv3qy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-doc-chip i[b-5pc9yzv3qy] {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

.sd-doc-chip:hover[b-5pc9yzv3qy] {
    border-color: var(--color-text-muted);
}

.sd-doc-chip--active[b-5pc9yzv3qy] {
    background: var(--color-brand-bg);
    color: var(--color-brand);
    border-color: var(--color-brand);
}

/* ── Channel pills ── */
.sd-pills[b-5pc9yzv3qy] {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    align-self: flex-start;
}

.sd-pill[b-5pc9yzv3qy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition-fast);
}

.sd-pill i[b-5pc9yzv3qy] {
    font-size: 14px;
    line-height: 1;
}

.sd-pill:hover[b-5pc9yzv3qy] {
    color: var(--color-text-primary);
}

.sd-pill--active[b-5pc9yzv3qy] {
    background: var(--color-bg-page);
    color: var(--color-brand);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

/* ── Native subject input ── */
.sd-input[b-5pc9yzv3qy] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-btn);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--mud-typography-body1-size);
    box-sizing: border-box;
    transition: var(--transition-fast);
}

.sd-input:focus[b-5pc9yzv3qy] {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.sd-input[b-5pc9yzv3qy]::placeholder {
    color: var(--color-text-muted);
}

/* ── Email editor shell ── */
.sd-editor-shell[b-5pc9yzv3qy] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
}

.sd-editor-shell > :first-child[b-5pc9yzv3qy] {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

[b-5pc9yzv3qy] .sd-editor-shell .rte {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-page);
    overflow: hidden;
}

[b-5pc9yzv3qy] .sd-editor-shell .rte-editor {
    flex: 1;
    min-height: 0;
    padding: 14px 16px;
    font-size: var(--mud-typography-body1-size);
    line-height: 1.6;
    color: var(--color-text-primary);
    outline: none;
    overflow-y: auto;
    word-break: break-word;
}

[b-5pc9yzv3qy] .sd-editor-shell .rte-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
}

/* ── Char count ── */
.sd-char-count[b-5pc9yzv3qy] {
    display: block;
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
    margin-top: 2px;
    text-align: right;
}

.sc-own-copy-note[b-5pc9yzv3qy] {
    display: block;
    margin-top: 8px;
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
}

/* MudTextField/MudSelects outlined-variant har ingen hvid baggrund sat globalt. */
[b-5pc9yzv3qy] .mud-input-outlined {
    background: var(--color-bg-page) !important;
}

[b-5pc9yzv3qy] .mud-input-outlined input,
[b-5pc9yzv3qy] .mud-input-outlined textarea,
[b-5pc9yzv3qy] .mud-select-input {
    font-size: var(--mud-typography-body1-size) !important;
    font-family: inherit !important;
}

/* ── Phones: sidebar becomes a wrapping row above the content ── */
@media (max-width: 599px) {
    .sd-layout[b-5pc9yzv3qy] {
        flex-direction: column;
        min-height: 0;
        height: auto;
    }

    .sd-sidebar[b-5pc9yzv3qy] {
        width: auto;
        min-width: 0;
        max-width: none;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 0 0 8px;
    }

    .sd-section[b-5pc9yzv3qy] {
        width: auto;
        max-width: none;
    }
}
/* /Components/Shared/Dialogs/Send/SendPreparationFormDialog.razor.rz.scp.css */
/* Keep link actions readable without exposing a long forms URL. */
.fd-link-row[b-7l2hzsx0il] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ── Kanal-pilleknapper — samme udseende som SendAppointmentConfirmationDialog ── */
.sc-pills[b-7l2hzsx0il] {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    align-self: flex-start;
}

.sc-pill[b-7l2hzsx0il] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition-fast);
}

.sc-pill i[b-7l2hzsx0il] {
    font-size: 14px;
    line-height: 1;
}

.sc-pill:hover[b-7l2hzsx0il] {
    color: var(--color-text-primary);
}

.sc-pill--active[b-7l2hzsx0il] {
    background: var(--color-bg-page);
    color: var(--color-brand);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

/* MudTextField/MudSelects outlined-variant har ingen hvid baggrund sat globalt -
   match den hvide boks skabelon-dropdownen allerede bruger. */
[b-7l2hzsx0il] .mud-input-outlined {
    background: var(--color-bg-page) !important;
}

[b-7l2hzsx0il] .mud-input-outlined input,
[b-7l2hzsx0il] .mud-input-outlined textarea,
[b-7l2hzsx0il] .mud-select-input {
    font-size: var(--mud-typography-body1-size) !important;
    font-family: inherit !important;
}

/* ── Hjælpetekst ── */
.fd-char-count[b-7l2hzsx0il] {
    display: block;
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-muted);
    margin-top: 4px;
}

.fd-note[b-7l2hzsx0il] {
    display: block;
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-muted);
    margin-top: 12px;
    font-style: italic;
}

/* ── Rich text editor ── */
.rte[b-7l2hzsx0il] {
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-page);
}

.rte--minimal[b-7l2hzsx0il] {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.rte-editor[b-7l2hzsx0il] {
    padding: 12px 14px;
    font-size: var(--mud-typography-body1-size);
    line-height: 1.6;
    color: var(--color-text-primary);
    outline: none;
    min-height: 180px;
    overflow-y: auto;
    word-break: break-word;
}

.rte-editor:empty[b-7l2hzsx0il]::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
}

.rte-editor:focus[b-7l2hzsx0il] {
    background: var(--color-bg-page);
}

/* ── E-mail-editor i MudField (samme grå boks som "Send e-mail"-dialogen) ── */
/* Rammen kommer fra MudFields .mud-input-outlined-border. Vi nulstiller slot-padding
   og lægger tekst-inset + font på editoren, så det matcher de andre mail-dialoger. */
.rte-field[b-7l2hzsx0il]  .mud-input-slot {
    padding: 0 !important;
}

.rte-field[b-7l2hzsx0il]  .rte-editor {
    padding: 10.5px 14px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    outline: none !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rte-field[b-7l2hzsx0il] {
    min-width: 0;
    max-width: 100%;
}

.rte-field[b-7l2hzsx0il]  .rte-editor:empty::before {
    content: attr(data-placeholder);
    color: currentColor;
    opacity: 0.42;
}
/* /Components/Shared/Dialogs/Send/SmsSenderSelect.razor.rz.scp.css */
.sms-sender-label[b-oqgju4o6e6] {
    display: block;
    font-size: var(--mud-typography-overline-size);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

/* Samme flade, hvide boks som skabelon-dropdownen og e-mail-editoren - MudSelects
   outlined-variant har ellers ingen hvid baggrund sat globalt. */
.sms-sender-select[b-oqgju4o6e6]  .mud-input-outlined {
    background: var(--color-bg-page) !important;
}

.sms-sender-select[b-oqgju4o6e6]  .mud-select-input {
    font-size: var(--mud-typography-body1-size) !important;
    font-family: inherit !important;
}
/* /Components/Shared/Dialogs/View/AktivitetQuickViewDialog.razor.rz.scp.css */
/* ══════════════════════════════════════════════════ */
/* ══  AKTIVITET QUICK VIEW - compact event popup  ══ */
/* ══════════════════════════════════════════════════ */

/* Typografisk skala (bevidst kun 3 niveauer, så dialogen er rolig at skimme):
   - værdier/navne: body2, navne i 600
   - sekundært (tid, kontakt, meta): caption i soft
   - sektions-etiketter: 11px uppercase muted */

/* The notes target checkbox sits under the composer; MudCheckBox renders outside this scope. */
.aqv-side-scroll[b-byg4kqwqpy]  .aqv-note-target { margin-top: 4px; }

/* The composer stays at the bottom of the side column and only the notes scroll. Popup-only: on the
   pages the window scrolls, and a shared sticky rule would pin the composer to the screen edge. */
.aqv-side-scroll[b-byg4kqwqpy]  .notes-add {
    position: sticky;
    /* Minus the column's 4px bottom padding, or the notes show through the gap under the composer. */
    bottom: -4px;
    /* Same 4px in flow, so the resting place at the end of the scroll matches the stuck one (no jump). */
    margin-bottom: -4px;
    padding: 8px 0 8px;
    /* MudDialog paints itself in surface, not background. */
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.aqv-header[b-byg4kqwqpy] {
    display: flex;
    align-items: center;
    gap: 10px;
    /* The title bar lays its content out as a flex item; without this the header shrinks to the
       title text and the route icon's margin-left: auto has nothing to push against. */
    width: 100%;
    /* The compact popup is as wide as its widest row; the title must not be that row, so it is
       kept out of the intrinsic width and wraps inside whatever the body decides. */
    contain: inline-size;
}

.aqv-header[b-byg4kqwqpy]  .mud-stack,
.aqv-header[b-byg4kqwqpy]  .mud-stack > div {
    min-width: 0;
}

.aqv-header[b-byg4kqwqpy]  .mud-stack {
    flex: 1 1 auto;
}

.aqv-type-dot[b-byg4kqwqpy] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── "Markér som afholdt" øverst ── */
.aqv-top[b-byg4kqwqpy] {
    display: flex;
    /* Both sides sit on the band's bottom line, so type and date move down with it when Følg op
       gains its date line. */
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.aqv-top-meta[b-byg4kqwqpy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.aqv-top-line[b-byg4kqwqpy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

.aqv-top-item[b-byg4kqwqpy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-heading);
}

/* Følg op at the band's right edge. */
.aqv-top-right[b-byg4kqwqpy] {
    display: flex;
    align-items: flex-end;
    margin-left: auto;
    flex-shrink: 0;
}

.aqv-followup[b-byg4kqwqpy] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* Mirrored: the bell sits at the right edge, the caret left-most, a Klaret chip left of them. */
.aqv-followup-head[b-byg4kqwqpy] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
}

/* Plain text that opens the menu: no button chrome, underline on hover like the other links here. */
.aqv-followup-trigger[b-byg4kqwqpy] {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.aqv-followup-trigger:hover .aqv-followup-label[b-byg4kqwqpy],
.aqv-followup-trigger:focus-visible .aqv-followup-label[b-byg4kqwqpy] { text-decoration: underline; }

.aqv-followup-label[b-byg4kqwqpy] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    color: var(--color-text-heading);
}

.aqv-followup-trigger[b-byg4kqwqpy]  .aqv-row-icon { margin-top: 0; }

.aqv-followup-trigger[b-byg4kqwqpy]  .aqv-followup-caret {
    font-size: var(--icon-size-table) !important;
    color: var(--color-text-muted);
}

/* The Anden dato picker sits under the trigger, kept clear of the bell on the right (16px icon + 8px gap). */
.aqv-followup[b-byg4kqwqpy]  .aqv-followup-date { margin-right: 24px; }

.aqv-followup-sub[b-byg4kqwqpy] { white-space: nowrap; }

.aqv-followup[b-byg4kqwqpy]  .aqv-followup-date { max-width: 180px; }

/* ── Rækker (tid / lokation / sag) ── */
.aqv-rows[b-byg4kqwqpy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px;
    /* Use the screen: the viewport minus the title bar, top band, footer and dialog margins. */
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

.aqv-row[b-byg4kqwqpy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* ::deep: MudIcon renders the <svg> as a child component, so the scoped
   attribute never lands on it — pierce via the scoped parent to reach it. */
.aqv-rows[b-byg4kqwqpy]  .aqv-row-icon,
.aqv-top[b-byg4kqwqpy]  .aqv-row-icon {
    font-size: 16px !important;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-top: 1px;
}

.aqv-row-value[b-byg4kqwqpy] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-heading);
    line-height: 1.35;
}

/* Beskrivelse kan indeholde linjeskift fra MW — bevar dem. #44293. */
.aqv-row-value--multiline[b-byg4kqwqpy] {
    white-space: pre-wrap;
    word-break: break-word;
}

.aqv-row-sub[b-byg4kqwqpy] {
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-soft);
    margin-top: 1px;
}

/* Klikbare felter der linker videre til kunde/sag (#44098). Neutral tekstfarve
   ligesom MudLink Color.Default andre steder i systemet - ikke brand-rød. */
.aqv-link-value[b-byg4kqwqpy] {
    display: inline-block;
    cursor: pointer;
    color: inherit;
}
.aqv-link-value:hover[b-byg4kqwqpy] { text-decoration: underline; }

/* ── Sektioner (Deltagere / Beskrivelse / Noter) ── */
.aqv-section[b-byg4kqwqpy] {
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 12px;
}

/* A label with its icon in front; the icon drops to the label's scale. */
.aqv-section-label--icon[b-byg4kqwqpy] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.aqv-rows[b-byg4kqwqpy]  .aqv-section-label--icon .aqv-row-icon {
    font-size: var(--icon-size-table) !important;
    margin-top: 0;
}

/* The top band already draws a line, so the first section does not draw a second one under it. */
.aqv-rows > .aqv-section:first-child[b-byg4kqwqpy] {
    border-top: none;
    padding-top: 0;
}

.aqv-section-label[b-byg4kqwqpy] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

/* ── Personer: ét fælles layout for købere og sælgere ── */
/* Kunder, sælgere and beskrivelse show in full while the column has room; when it runs out, these
   sections give in proportion, the lists down to two rows (49px each: 20px name line, 20px contact
   line 1px apart, 4px padding above and below), the text down to about three lines, and scroll inside. */
.aqv-section--people[b-byg4kqwqpy],
.aqv-section--text[b-byg4kqwqpy] {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
}

.aqv-section--people .aqv-section-label[b-byg4kqwqpy],
.aqv-section--text .aqv-section-label[b-byg4kqwqpy] { flex: 0 0 auto; }

.aqv-section--text .aqv-row-value--multiline[b-byg4kqwqpy] {
    flex: 0 1 auto;
    min-height: 60px;
    overflow-y: auto;
}

.aqv-person-list[b-byg4kqwqpy] {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* The two-row floor only once there are two rows; a single kunde or sælger ends where the row ends. */
.aqv-person-list:has(.aqv-person:nth-child(2))[b-byg4kqwqpy] {
    min-height: 98px;
}

.aqv-person[b-byg4kqwqpy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.aqv-person-avatar[b-byg4kqwqpy] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info-darken);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.aqv-person-body[b-byg4kqwqpy] {
    flex: 1;
    min-width: 0;
}

.aqv-person-top[b-byg4kqwqpy] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.aqv-person-name[b-byg4kqwqpy] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    color: var(--color-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aqv-person-role[b-byg4kqwqpy] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 7px;
    border-radius: 20px;
    flex-shrink: 0;
}

.aqv-person-role--saelger[b-byg4kqwqpy] {
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
}

/* A køber in køberkartoteket; Nej and unknown keep the neutral sælger look. */
.aqv-person-role--kartotek-ja[b-byg4kqwqpy] {
    background: var(--mud-palette-success-lighten);
    color: var(--mud-palette-success-darken);
}

.aqv-person-contact[b-byg4kqwqpy] {
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-soft);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aqv-person-actions[b-byg4kqwqpy] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.aqv-person-actions[b-byg4kqwqpy]  .aqv-inline-btn {
    padding: 2px !important;
    color: var(--color-text-muted) !important;
}
.aqv-person-actions[b-byg4kqwqpy]  .aqv-inline-btn:hover {
    background: transparent !important;
    color: var(--color-text-heading) !important;
}
.aqv-person-actions[b-byg4kqwqpy]  .aqv-inline-btn .mud-icon-root { font-size: 15px !important; }

/* ── Sag ── */
.aqv-case[b-byg4kqwqpy] { flex: 1; min-width: 0; }

.aqv-case-main[b-byg4kqwqpy] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aqv-case-main--clickable[b-byg4kqwqpy] { cursor: pointer; border-radius: var(--radius-sm); }
.aqv-case-main--clickable:hover .aqv-case-info .aqv-link-value[b-byg4kqwqpy] { text-decoration: underline; }

.aqv-case-thumb[b-byg4kqwqpy] {
    width: 56px;
    height: 44px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.aqv-case-thumb--placeholder[b-byg4kqwqpy] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-disabled);
}
.aqv-case-thumb--placeholder i[b-byg4kqwqpy] { font-size: 20px; }

.aqv-case-info[b-byg4kqwqpy] { min-width: 0; flex: 1; }

.aqv-case-meta[b-byg4kqwqpy] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* Samme mønster som søgebarens .search-result-contact-item, så sags-rækken her
   ser ud som søgeresultaterne (ikon + tekst, ikke en pille). */
.aqv-case-meta-item[b-byg4kqwqpy] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--mud-typography-caption-size);
    color: var(--color-text-soft);
    white-space: nowrap;
}

.aqv-case-meta-item i[b-byg4kqwqpy] {
    font-size: 11px;
    flex-shrink: 0;
}

.aqv-case-status-dot[b-byg4kqwqpy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

.aqv-case-status-dot--aktiv[b-byg4kqwqpy] { background: var(--mud-palette-primary); }
.aqv-case-status-dot--tilsalg[b-byg4kqwqpy],
.aqv-case-status-dot--vurdering[b-byg4kqwqpy] { background: var(--mud-palette-warning); }
.aqv-case-status-dot--solgt[b-byg4kqwqpy] { background: var(--mud-palette-success); }
.aqv-case-status-dot--retur[b-byg4kqwqpy],
.aqv-case-status-dot--aflyst[b-byg4kqwqpy],
.aqv-case-status-dot--tabtkommission[b-byg4kqwqpy] { background: var(--mud-palette-error); }

/* Send dokumenter sits right of the sag card, centred on it. MudButton renders as a child component, hence ::deep. */
.aqv-rows[b-byg4kqwqpy]  .aqv-case-send {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: center;
    margin-left: auto;
}

/* Tabs (Seneste aftaler, Sagsnoter, Noter) in a right-hand column beside the details, stacked under
   them on narrow screens. The left column sets the height; the right column's scroller is taken out
   of flow, so a long or short tab never resizes the dialog. */
.aqv-body--split[b-byg4kqwqpy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 20px;
    min-height: 320px;
}

/* Tab row with the collapse caret at its right end. */
.aqv-side-head[b-byg4kqwqpy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    /* The tab bar's height, kept when the row holds only the caret, so the caret does not move. */
    min-height: 34px;
}

.aqv-side[b-byg4kqwqpy]  .aqv-side-toggle {
    padding: 4px !important;
    color: var(--color-text-muted) !important;
}

/* Title size, so the caret reads as a control next to the tabs; 28px in all, inside the 32px rail. */
.aqv-side[b-byg4kqwqpy]  .aqv-side-toggle .mud-icon-root { font-size: var(--icon-size-title) !important; }

/* The collapsed rail: the same head row as the open column, now holding only the reopen caret, with
   the scroller's padding so the caret keeps its exact spot. */
.aqv-side--collapsed[b-byg4kqwqpy] { padding: 4px 2px 4px 0; }

.aqv-side--collapsed .aqv-side-head[b-byg4kqwqpy] {
    justify-content: flex-end;
    margin-bottom: 0;
}

.aqv-body--collapsed[b-byg4kqwqpy] {
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 12px;
}

/* Three tabs with counts on one row: tighter pads than the page bars, and a label never wraps. */
.aqv-side[b-byg4kqwqpy]  .aqv-side-tabs .seg-item {
    padding: 6px 10px;
    white-space: nowrap;
}

.aqv-side[b-byg4kqwqpy] {
    position: relative;
    border-left: 1px solid var(--mud-palette-divider);
}

.aqv-side-scroll[b-byg4kqwqpy] {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    /* Long meta lines wrap instead of scrolling the column sideways. */
    overflow-x: hidden;
    padding: 4px 2px 4px 16px;
}

@media (max-width: 767px) {
    .aqv-body--split[b-byg4kqwqpy] {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .aqv-body--collapsed[b-byg4kqwqpy] { grid-template-columns: minmax(0, 1fr); }

    /* Stacked, the right column flows with its content under the left one. */
    .aqv-side[b-byg4kqwqpy] {
        border-left: none;
        border-top: 1px solid var(--mud-palette-divider);
    }

    .aqv-side--collapsed[b-byg4kqwqpy] { padding: 12px 2px 4px; }

    /* The panel is below the details here, so the carets point up (collapse) and down (reopen). */
    .aqv-side[b-byg4kqwqpy]  .aqv-side-toggle .mud-icon-root { transform: rotate(-90deg); }

    .aqv-side-scroll[b-byg4kqwqpy] {
        position: static;
        padding: 12px 2px 4px;
    }
}

/* ── Noter ── */
.aqv-notes-list[b-byg4kqwqpy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

/* MudTextField defaults to a larger input font than the rest of the popup's
   body2-sized text/values. */
.aqv-note-add[b-byg4kqwqpy]  .mud-input-slot { font-size: var(--mud-typography-body2-size) !important; }

/* ── Handlinger ── */
.aqv-actions[b-byg4kqwqpy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.aqv-actions-secondary[b-byg4kqwqpy],
.aqv-actions-primary[b-byg4kqwqpy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* When the footer wraps on a narrow screen, Luk and Udvid keep to the right of their own row. */
.aqv-actions-primary[b-byg4kqwqpy] { margin-left: auto; }

/* Rediger/Aflys er tekst-knapper; skru ikonet ned så det balancerer med teksten. */
.aqv-actions-secondary[b-byg4kqwqpy]  .mud-icon-root { font-size: 16px !important; }

/* The address is a directions link; it keeps the row's look and gains a touch target on phones. */
.aqv-row-map[b-byg4kqwqpy] {
    color: inherit;
    text-decoration: none;
}

.aqv-row-map:hover[b-byg4kqwqpy],
.aqv-row-map:focus-visible[b-byg4kqwqpy] { text-decoration: underline; }

.aqv-case-route[b-byg4kqwqpy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 2px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}

.aqv-case-route:hover[b-byg4kqwqpy],
.aqv-case-route:focus-visible[b-byg4kqwqpy] { color: var(--color-text-heading); }

.aqv-case-route i[b-byg4kqwqpy] { font-size: var(--icon-size-sub); }

@media (max-width: 599px) {
    .aqv-case-route[b-byg4kqwqpy] {
        min-width: 44px;
        min-height: 44px;
        color: var(--color-text-heading);
        /* A 44px tap target that still starts at the band's left edge. */
        justify-content: flex-start;
    }

    .aqv-case-route i[b-byg4kqwqpy] { font-size: var(--icon-size-title); }

    .aqv-row-map[b-byg4kqwqpy] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}
/* /Components/Shared/Dialogs/View/CardHelpDialog.razor.rz.scp.css */
/* The clip gets as much of the screen as possible. On wide screens the text sits in a narrow column
   beside it, so the clip has the full height left after the title and the Luk row; on narrow
   screens they stack. The clips are recorded at 2x, so they stay sharp when scaled up. */
.chd-layout[b-rxrmjboc02] {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 24px;
    align-items: start;
}

.chd-clip[b-rxrmjboc02] {
    display: block;
    width: 100%;
    height: calc(100dvh - 260px);
    object-fit: contain;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
}

@media (max-width: 899px) {
    .chd-layout[b-rxrmjboc02] {
        grid-template-columns: 1fr;
    }

    .chd-clip[b-rxrmjboc02] {
        height: auto;
        max-height: calc(100dvh - 320px);
    }
}
/* /Components/Shared/Dialogs/View/CaseDocumentsDialog.razor.rz.scp.css */
.cdd-toolbar[b-f14e2cmbw7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-section);
}

/* Up to 35 documents: the list scrolls inside the dialog, the buttons stay in view. */
.cdd-list[b-f14e2cmbw7] {
    max-height: 60vh;
    overflow-y: auto;
}

.cdd-row[b-f14e2cmbw7] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}

.cdd-row + .cdd-row[b-f14e2cmbw7] {
    border-top: 1px solid var(--color-border-section);
}

.cdd-row__icon[b-f14e2cmbw7] {
    font-size: var(--icon-size-sub);
    color: var(--mud-palette-text-secondary);
}

.cdd-row__info[b-f14e2cmbw7] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    /* Mindworking file names have no spaces, so they only wrap if allowed to break anywhere. */
    overflow-wrap: anywhere;
}

.cdd-link[b-f14e2cmbw7],
.cdd-name[b-f14e2cmbw7] {
    font-size: var(--mud-typography-body2-size);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.cdd-link:hover[b-f14e2cmbw7] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.cdd-actions[b-f14e2cmbw7] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

/* Phones: full-width buttons, Send on top where the thumb is. */
@media (max-width: 599.98px) {
    .cdd-actions[b-f14e2cmbw7] {
        flex-direction: column-reverse;
    }

    .cdd-actions[b-f14e2cmbw7]  .mud-button-root {
        width: 100%;
    }
}
/* /Components/Shared/Dialogs/View/CaseNotesDialog.razor.rz.scp.css */
/* Long note lists scroll inside the dialog; the Luk button stays in view. The dialog itself no longer
   scrolls (cnd-dialog lets the tag list out), so on a low screen (a phone on its side) the list gives
   up height: 260px is kept free for the title, filter, Luk and the dialog padding. */
.cnd-list[b-rqi4y4bcv7] {
    max-height: min(60vh, calc(100svh - 260px));
    overflow-y: auto;
}

/* One line whatever the number of tags: the tag filter is a FilterDropdown, the hint sits next to it. */
.cnd-filter[b-rqi4y4bcv7] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

/* Layout only: the button sits on the left, so the panel opens from the left edge and stays inside
   the dialog. The surface itself comes from the global dropdown-surface. */
.cnd-filter[b-rqi4y4bcv7]  .filter-dropdown__panel {
    left: 0;
    right: auto;
    width: 300px;
}

.cnd-filter__options[b-rqi4y4bcv7] {
    display: flex;
    flex-direction: column;
    margin: -6px -16px -8px;
}

.cnd-filter__option[b-rqi4y4bcv7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 16px;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-primary);
    text-align: left;
    cursor: pointer;
}

.cnd-filter__option:hover[b-rqi4y4bcv7] {
    background: var(--mud-palette-action-default-hover);
}

.cnd-filter__option--active[b-rqi4y4bcv7] {
    font-weight: 700;
}

.cnd-filter__count[b-rqi4y4bcv7] {
    margin-left: 4px;
    font-weight: 400;
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}

.cnd-actions[b-rqi4y4bcv7] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

/* Phones: full-width button, like the documents dialog. */
@media (max-width: 599.98px) {
    .cnd-actions[b-rqi4y4bcv7]  .mud-button-root {
        width: 100%;
    }
}
/* /Components/Shared/Dialogs/View/KontaktSaelgerDialog.razor.rz.scp.css */
.ks-person[b-4nmv5zx8o6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 12px;
}

.ks-avatar[b-4nmv5zx8o6] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    flex-shrink: 0;
}

.ks-body[b-4nmv5zx8o6] {
    flex: 1;
    min-width: 0;
}

.ks-actions[b-4nmv5zx8o6] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ks-actions[b-4nmv5zx8o6]  .mud-button-root {
    text-transform: none;
}
/* /Components/Shared/Dialogs/View/NoteDetailDialog.razor.rz.scp.css */
.ndd-text[b-15p46qk2l2] {
    margin: 0 0 12px;
    font-size: var(--mud-typography-body1-size);
    color: var(--mud-palette-text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.ndd-tags[b-15p46qk2l2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ndd-tag[b-15p46qk2l2] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/Dialogs/View/PreparationFormAnswersDialog.razor.rz.scp.css */
.pfa-summary[b-tg0lw7fwv8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-md);
}

.pfa-summary__items[b-tg0lw7fwv8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pfa-item[b-tg0lw7fwv8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pfa-rows[b-tg0lw7fwv8] {
    margin: 0;
}

/* Label left, value right; the label column is fixed so the values line up. */
.pfa-row[b-tg0lw7fwv8] {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    overflow-wrap: anywhere;
}

.pfa-row:last-child[b-tg0lw7fwv8] {
    border-bottom: none;
}

.pfa-row dt[b-tg0lw7fwv8],
.pfa-row dd[b-tg0lw7fwv8] {
    margin: 0;
}

@media (max-width: 599px) {
    .pfa-row[b-tg0lw7fwv8] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}
/* /Components/Shared/Dialogs/View/ReferralDetailDialog.razor.rz.scp.css */
/* ── HEADER ── */
.ref-dlg-header[b-sakm00k9ji] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ref-dlg-badges[b-sakm00k9ji] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-right: 36px;
}

.ref-dlg-badge[b-sakm00k9ji] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    white-space: nowrap;
}

.ref-dlg-badge--neutral[b-sakm00k9ji] {
    background: transparent;
    border: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-primary);
}

.ref-dlg-badge--light[b-sakm00k9ji] {
    background: var(--color-bg-success);
    color: var(--color-text-success);
}

/* ── Cell icons ── */
.ref-dlg-cell-icon .mud-icon-root[b-sakm00k9ji] {
    font-size: 16px;
}

/* ── SECTION LABEL ── */
.ref-dlg-section-label[b-sakm00k9ji] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--mud-typography-body2-size);
    font-weight: 700;
    color: var(--color-text-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
}

/* ── GRID ── */
.ref-dlg-grid[b-sakm00k9ji] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 8px;
}

.ref-dlg-cell[b-sakm00k9ji] {
    min-width: 0;
}

.ref-dlg-cell-label[b-sakm00k9ji] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.ref-dlg-cell-icon[b-sakm00k9ji] {
    display: inline-flex;
    color: var(--color-text-muted);
}

.ref-dlg-cell-value[b-sakm00k9ji] {
    font-size: var(--mud-typography-body1-size);
    color: var(--color-text-heading);
    word-break: break-word;
}

.ref-dlg-cell-sub[b-sakm00k9ji] {
    font-size: var(--mud-typography-body2-size);
    color: var(--color-text-soft);
    margin-top: 2px;
}

/* ── NOTE ── */
.ref-dlg-note-section[b-sakm00k9ji] {
    margin-top: 20px;
}

.ref-dlg-note-box[b-sakm00k9ji] {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-card);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: var(--mud-typography-body1-size);
    color: var(--color-text-dark);
    line-height: 1.5;
    white-space: pre-wrap;
    margin-top: 6px;
}

@media (max-width: 599px) {
    .ref-dlg-grid[b-sakm00k9ji] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Dialogs/View/ReleaseNoteBlocks.razor.rz.scp.css */
/* Layout only - typography comes from MudText, colour from tokens. */
.relnotes-body[b-hucl19axfh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 72ch;
    max-height: 60vh;
    overflow-y: auto;
}

/* The Opdateringer tab scrolls as a whole, so each release shows in full. */
.relnotes-body--unbounded[b-hucl19axfh] {
    max-height: none;
    overflow-y: visible;
}

/* One accent per section type; the tag and the item dots share it so the eye links them. */
.relnotes-group[b-hucl19axfh] {
    --relnotes-accent: var(--color-text-secondary);
    --relnotes-tag-bg: var(--color-bg-muted);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.relnotes-group--new[b-hucl19axfh] {
    --relnotes-accent: var(--color-brand);
    --relnotes-tag-bg: var(--color-brand-alpha-08);
}

.relnotes-group--improved[b-hucl19axfh] {
    --relnotes-accent: var(--color-text-info);
    --relnotes-tag-bg: var(--color-bg-info);
}

.relnotes-group--fixed[b-hucl19axfh] {
    --relnotes-accent: var(--color-text-success);
    --relnotes-tag-bg: var(--color-bg-success);
}

.relnotes-group-head[b-hucl19axfh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.relnotes-tag[b-hucl19axfh] {
    display: inline-flex;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--relnotes-tag-bg);
    color: var(--relnotes-accent);
}

.relnotes-item[b-hucl19axfh] {
    position: relative;
    padding-left: 1.125rem;
}

.relnotes-item[b-hucl19axfh]::before {
    content: "";
    position: absolute;
    left: 0.125rem;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--relnotes-accent);
}

.relnotes-body[b-hucl19axfh]  .relnotes-item-title,
.relnotes-body[b-hucl19axfh]  .relnotes-item-text,
.relnotes-body[b-hucl19axfh]  .relnotes-text {
    margin: 0;
}

.relnotes-body[b-hucl19axfh]  .relnotes-item-text {
    margin-top: 0.125rem;
}
/* /Components/Shared/Inputs/AddressInput.razor.rz.scp.css */
.address-input-wrapper[b-wh266kxcmv] {
    position: relative;
    width: 100%;
}

.address-input-dropdown[b-wh266kxcmv] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: var(--radius-sm);
    background-color: var(--mud-palette-background, #ffffff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.address-input-item--focused[b-wh266kxcmv] {
    background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.12)) !important;
}
/* /Components/Shared/Inputs/CreateKundeButton.razor.rz.scp.css */
/* Static markup, so the scoped styles follow the row into the teleported popover. */
.psi-create-btn[b-4p70h57j04] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--dropdown-bg, var(--mud-palette-background));
    color: var(--mud-palette-primary);
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.psi-create-btn:hover[b-4p70h57j04] {
    background: var(--mud-palette-action-hover);
}

.psi-create-btn i[b-4p70h57j04] {
    font-size: var(--icon-size-sub);
    flex-shrink: 0;
}

.psi-no-items[b-4p70h57j04] {
    padding: 10px 16px;
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/Notes/CaseShowingNotes.razor.rz.scp.css */
.csn-field[b-gldvpalgix] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Same look as the dialogs' .ba-label. MudText renders outside this scope, hence ::deep. */
.csn-field[b-gldvpalgix]  .csn-label {
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.csn-list[b-gldvpalgix] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-card);
    border-radius: 10px;
    overflow: hidden;
}

.csn-note[b-gldvpalgix] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-card);
}

.csn-note:last-child[b-gldvpalgix] {
    border-bottom: none;
}

.csn-note-header[b-gldvpalgix] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.csn-note-header[b-gldvpalgix]  .csn-note-meta {
    display: flex;
    gap: 6px;
    color: var(--mud-palette-text-disabled);
    margin-left: auto;
    white-space: nowrap;
}

.csn-note[b-gldvpalgix]  .csn-note-text {
    margin: 0 0 4px;
    color: var(--mud-palette-text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Shared/Notes/NotesSection.razor.rz.scp.css */
.notes-list[b-gfou7ezbg8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notes-item[b-gfou7ezbg8] {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.notes-item--clickable[b-gfou7ezbg8] {
    cursor: pointer;
}

.notes-item:last-child[b-gfou7ezbg8] {
    border-bottom: none;
    padding-bottom: 0;
}

.notes-meta[b-gfou7ezbg8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notes-dot[b-gfou7ezbg8] {
    color: var(--mud-palette-text-secondary);
}

.notes-meta-spacer[b-gfou7ezbg8] {
    flex: 1;
}

.notes-actions[b-gfou7ezbg8] {
    display: inline-flex;
    align-items: center;
}

[b-gfou7ezbg8] .notes-action-btn {
    padding: 4px;
}

[b-gfou7ezbg8] .notes-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.notes-tags[b-gfou7ezbg8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.notes-tag[b-gfou7ezbg8] {
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
}

/* Where the note comes from, not a category: outlined so it never reads as a tag the mægler set. */
.notes-tag--source[b-gfou7ezbg8] {
    display: inline-block;
    margin-bottom: 4px;
    background: transparent;
    border: 1px solid var(--home-red);
}

.notes-empty[b-gfou7ezbg8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 0;
}

.notes-empty-icon[b-gfou7ezbg8] {
    color: var(--mud-palette-text-disabled);
}

.notes-add[b-gfou7ezbg8] {
    margin-top: 12px;
}

.notes-section--spacious .notes-list[b-gfou7ezbg8] {
    gap: 0;
    margin: 0 -12px;
}

.notes-section--spacious .notes-item[b-gfou7ezbg8],
.notes-section--spacious .notes-item:last-child[b-gfou7ezbg8] {
    padding: 12px;
    border-bottom: none;
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast);
}

.notes-section--spacious .notes-item[b-gfou7ezbg8] {
    position: relative;
}

/* Inset to the text edge, so the line stays straight against the rounded hover surface. */
.notes-section--spacious .notes-item + .notes-item[b-gfou7ezbg8]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: var(--mud-palette-divider);
}

.notes-tags--inline[b-gfou7ezbg8] {
    margin: 0 0 0 4px;
}

.notes-section--spacious .notes-item--clickable:hover[b-gfou7ezbg8],
.notes-section--spacious .notes-item--clickable:focus-visible[b-gfou7ezbg8] {
    background: var(--mud-palette-table-hover);
    outline: none;
}

.notes-section--spacious[b-gfou7ezbg8]  .notes-text {
    margin-top: 2px;
}

/* Same low-contrast-until-hover treatment as .icon-edit, so the actions don't compete with the text. */
.notes-section--spacious[b-gfou7ezbg8]  .notes-action-btn {
    color: var(--mud-palette-text-disabled);
}

.notes-section--spacious[b-gfou7ezbg8]  .notes-action-btn .mud-icon-root {
    font-size: var(--icon-size-row-action);
}

.notes-section--spacious .notes-item:hover[b-gfou7ezbg8]  .notes-action-btn,
.notes-section--spacious .notes-item:focus-within[b-gfou7ezbg8]  .notes-action-btn {
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/UI/AreaMap.razor.rz.scp.css */
.area-map-shell[b-7fh2wyjpkp] {
    display: grid;
    gap: 8px;
}

.area-map-frame[b-7fh2wyjpkp] {
    position: relative;
}

/* Fullscreen toggle, bottom right so it stays clear of the detail page's pencil overlay. */
.area-map-expand[b-7fh2wyjpkp] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
    cursor: pointer;
}

.area-map-expand:hover[b-7fh2wyjpkp] {
    background: var(--mud-palette-background-grey);
}

/* The shell is the fullscreen element so the drawing buttons stay visible while expanded. */
.area-map-shell:fullscreen[b-7fh2wyjpkp] {
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 8px;
    background: var(--mud-palette-background);
}

.area-map-shell:fullscreen .area-map-frame[b-7fh2wyjpkp],
.area-map-shell:fullscreen .area-map[b-7fh2wyjpkp] {
    height: 100%;
    min-height: 0;
}

.area-map[b-7fh2wyjpkp] {
    width: 100%;
    /* Default keeps existing callers at 240px; a parent can size the map by setting
       --area-map-height on any ancestor (custom properties inherit through scopes). */
    height: var(--area-map-height, 240px);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
}

.area-map--editable[b-7fh2wyjpkp] {
    height: var(--area-map-height, 320px);
}

/* MapLibre injects its canvas at 100% of the container; the height above
   gives it something to fill since the canvas has no intrinsic size. */
.area-map[b-7fh2wyjpkp]  .maplibregl-canvas {
    border-radius: var(--radius-md);
}

/* Terra Draw has no touch support for freehand drawing, so the button goes on coarse pointers. */
@media (pointer: coarse) {
    .area-map-actions[b-7fh2wyjpkp]  .area-map-mode--mouse {
        display: none;
    }
}

.area-map-actions[b-7fh2wyjpkp] {
    min-height: 30px;
}
/* /Components/Shared/UI/CardHelp.razor.rz.scp.css */
.card-help[b-nsgjkaunrk] {
    display: inline-flex;
    align-items: center;
}

/* Muted so it does not compete with the title, like the icon actions on the cards. */
.card-help[b-nsgjkaunrk]  .card-help__btn {
    padding: 2px !important;
    color: var(--color-text-muted) !important;
}

.card-help[b-nsgjkaunrk]  .card-help__btn:hover,
.card-help[b-nsgjkaunrk]  .card-help__btn:focus-visible {
    background: transparent !important;
    color: var(--color-text-heading) !important;
}

.card-help[b-nsgjkaunrk]  .card-help__btn .mud-icon-root {
    font-size: var(--icon-size-sub) !important;
}
/* /Components/Shared/UI/ContactActions.razor.rz.scp.css */
/* The value still reads as the row's text; only the button chrome is reset, plus a hover hint
   that it does something. Inside a whole-row link the click is stopped by the component. */
.contact-action[b-5ufmmgo38j] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-action:hover[b-5ufmmgo38j],
.contact-action:focus-visible[b-5ufmmgo38j] { text-decoration: underline; }
/* /Components/Shared/UI/ContactAddForm.razor.rz.scp.css */
.contact-add__actions[b-65o8j8w0ei] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}
/* /Components/Shared/UI/CustomerHistoryList.razor.rz.scp.css */
/* Same timeline rows as PersonSidebarCard.razor.css: scoped CSS cannot be shared across
   components, so the rules are copied. The classes sit on plain div/i, so no ::deep. */
.pers-det-activity-item[b-s982qzeokk] {
    cursor: pointer;
    padding: 8px 6px;
    margin: 0 -6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.pers-det-activity-item:hover[b-s982qzeokk] { background: var(--mud-palette-action-hover); }

.pers-det-timeline-row[b-s982qzeokk] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pers-det-timeline-icon[b-s982qzeokk] {
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

.pers-det-timeline-icon--activity[b-s982qzeokk] { color: var(--mud-palette-primary); }
/* /Components/Shared/UI/FilterDropdown.razor.rz.scp.css */
.filter-dropdown[b-7urb19ttmt] {
    position: relative;
}

.filter-dropdown[b-7urb19ttmt]  .pill-select__caret {
    margin-left: 2px;
}

.filter-dropdown__backdrop[b-7urb19ttmt] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* Kun placering og layout — fladen kommer fra den globale .dropdown-surface.
   overflow: visible overskriver surfacens hidden, så et felt i panelet kan åbne sin
   egen lille popover uden at blive klippet af panelkanten. */
.filter-dropdown__panel[b-7urb19ttmt] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    width: 420px;
    max-width: calc(100vw - 32px);
    overflow: visible;
}

.filter-dropdown__head[b-7urb19ttmt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 9px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.filter-dropdown__title[b-7urb19ttmt] {
    font-size: var(--mud-typography-overline-size);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.filter-dropdown__clear[b-7urb19ttmt] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    color: var(--mud-palette-primary);
    cursor: pointer;
    line-height: 1;
}

/* To kolonner, så fra/til-par står side om side. Et felt kan fylde hele bredden
   med .filter-dropdown__wide. */
.filter-dropdown__grid[b-7urb19ttmt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 16px 16px;
}

.filter-dropdown__grid[b-7urb19ttmt]  .filter-dropdown__wide {
    grid-column: 1 / -1;
}

@media (max-width: 599px) {
    .filter-dropdown__grid[b-7urb19ttmt] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/UI/PersonSearchResultRow.razor.rz.scp.css */
.psr-row[b-jnaxkz5t27] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 2px 0;
}

.psr-avatar[b-jnaxkz5t27] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info-darken);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.psr-content[b-jnaxkz5t27] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.psr-title[b-jnaxkz5t27] {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.psr-contact-row[b-jnaxkz5t27] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.psr-contact-item[b-jnaxkz5t27] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.psr-contact-item .ph[b-jnaxkz5t27] {
    font-size: 11px;
    flex-shrink: 0;
}
/* /Components/Shared/UI/PhoneLink.razor.rz.scp.css */
/* Reads as the surrounding text, like ContactActions, with an underline hinting it acts. */
.phone-link[b-w3z112u8yr] {
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.phone-link:hover[b-w3z112u8yr],
.phone-link:focus-visible[b-w3z112u8yr] { text-decoration: underline; }
/* /Components/Shared/UI/RowLink.razor.rz.scp.css */
.row-link[b-076uz2ybbs] {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: pointer;
}
/* /Components/Shared/UI/XinkSignaturePreview.razor.rz.scp.css */
.xink-signature-preview[b-kuahlt11hq] {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg-subtle);
}

.xink-signature-preview__label[b-kuahlt11hq] {
    margin-bottom: 6px;
    color: var(--color-text-muted);
    font-size: var(--mud-typography-caption-size);
    font-weight: 600;
}

.xink-signature-preview__html[b-kuahlt11hq] {
    overflow-x: auto;
}

.xink-signature-preview__html[b-kuahlt11hq]  img {
    max-width: 100%;
    height: auto;
}