/* ══════════════════════════════════════════════════ */
/* ══  UTILITY CLASSES                             ══ */
/* ══  Genbrugelige hjælpeklasser til font-vægt,  ══ */
/* ══  shadows, borders, radii og transitions     ══ */
/* ══════════════════════════════════════════════════ */

/* ── Responsive kolonne-skjul ── */
@media (max-width: 599px) {
    .col-hide-mobile { display: none !important; }
}

@media (max-width: 959px) {
    .col-hide-tablet { display: none !important; }
}

/* ── Font Weight ── */
.fw-medium   { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold     { font-weight: 700 !important; }

/* ══════════════════════════════════════════════════ */
/* ══  SEGMENTED CONTROL                           ══ */
/* ══  Delt af: Dashboard.razor, Personer.razor    ══ */
/* ══════════════════════════════════════════════════ */

.seg-control {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--mud-palette-action-disabled-background);
    border-radius: 10px;
    padding: 3px;
}

.seg-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: var(--mud-typography-body1-size);
    font-weight: 500;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
    font-family: inherit;
    line-height: 1.5;
}

.seg-item:hover:not(.seg-item--active) {
    color: var(--mud-palette-text-primary);
    background: rgba(0, 0, 0, 0.04);
}

.seg-item--active {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--shadow-segmented);
}

.seg-tab-count {
    margin-left: 4px;
    font-size: var(--mud-typography-caption-size);
    opacity: 0.7;
}

/* Wrapper around the bar and its phone dropdown; the Class parameter (margins) sits on both children. */
.seg-wrap {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
}

.seg-dropdown {
    display: none;
    position: relative;
}

.seg-dropdown__panel {
    min-width: 220px;
}

.seg-dropdown__panel .seg-tab-count {
    margin-left: auto;
}

@media (max-width: 599px) {
    .seg-label { font-size: var(--mud-typography-caption-size); }

    /* Phones get the dropdown instead of the bar: four tabs with counts are ~450px wide, and a
       sideways scroll hides the rest without anyone noticing. */
    .seg-wrap { display: flex; width: 100%; }
    .seg-wrap .seg-control { display: none; }
    .seg-dropdown { display: block; width: 100%; }
    /* Full-width status row above the filter grid (see .pill-anchor-row). */
    .seg-dropdown__btn { width: 100%; justify-content: flex-start; }

    /* SegmentedItem HideOnPhone: same class on the bar button and the dropdown option. Two
       classes so it outranks .dropdown-option { display: flex }, which is declared later. */
    .seg-item.seg-item--phone-hidden,
    .dropdown-option.seg-item--phone-hidden { display: none; }

    /* Opt-out for a control with few, short tabs that fit a phone: Class="seg-keep-bar" keeps the
       bar (scrolling sideways as a fallback) and drops the dropdown. */
    .seg-wrap .seg-control.seg-keep-bar { display: flex; overflow-x: auto; max-width: 100%; }
    .seg-wrap .seg-keep-bar .seg-item { flex-shrink: 0; }
    .seg-dropdown.seg-keep-bar { display: none; }
}

/* Tablets keep the bar but let it scroll sideways: Sager has nine tabs with counts (~860px),
   which is wider than the content column between 600 and 959px. */
@media (min-width: 600px) and (max-width: 959px) {
    .seg-control { overflow-x: auto; max-width: 100%; }
    .seg-item { flex-shrink: 0; }
}

/* ══════════════════════════════════════════════════ */
/* ══  DIALOG HEADER                               ══ */
/* ══  Delt af: alle DlgHeader-instanser           ══ */
/* ══════════════════════════════════════════════════ */

.dlg-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--mud-palette-action-disabled-background);
    flex-shrink: 0;
}

.dlg-icon-box .mud-icon-root {
    font-size: 18px;
}

/* ── Borders ── */
.border-hover:hover { border-color: var(--mud-palette-divider) !important; }

/* ── Empty states ── */
.empty-state-centered {
    padding: 60px;
    text-align: center;
}

/* ── Text colors ── */
.text-muted     { color: var(--mud-palette-text-disabled) !important; }
.text-secondary { color: var(--mud-palette-text-secondary) !important; }
.text-danger    { color: var(--mud-palette-primary-lighten) !important; }
.text-sm        { font-size: var(--mud-typography-body2-size) !important; }

/* ── Spacing utilities ── */
.ms-auto       { margin-left: auto !important; }
.mb-0          { margin-bottom: 0 !important; }
.cursor-pointer { cursor: pointer; }

/* ── Dropdown empty states ── */
.dropdown-no-results {
    padding: 10px 12px;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-disabled);
}

/* ══════════════════════════════════════════════════ */
/* ══  FILTER CHIPS                                ══ */
/* ══════════════════════════════════════════════════ */

.filter-chip {
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.filter-chip:hover { background: #f1f5f9; }

.filter-chip--active {
    background: var(--color-accent);
    color: var(--mud-palette-text-primary);
    border-color: var(--color-accent);
}

.filter-chip--active:hover { background: var(--color-accent-hover); }

/* ══════════════════════════════════════════════════ */
/* ══  ROLE PILL — genbrugelig rolle-tag (Kunde/    ══ */
/* ══  Sælger/Lejer…). Neutral dæmpet stil.         ══ */
/* ══════════════════════════════════════════════════ */

.role-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: var(--radius-btn);
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-primary);
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.role-pill:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, var(--mud-palette-action-disabled-background));
}

/* Tilpasset (override): dæmpet advarsels-tone — skiller sig ud via farve, ikke ramme. */
.role-pill--override {
    background: color-mix(in srgb, var(--mud-palette-warning) 15%, var(--mud-palette-surface));
    color: var(--mud-palette-warning-darken);
}

.role-pill--override:hover {
    background: color-mix(in srgb, var(--mud-palette-warning) 24%, var(--mud-palette-surface));
}

/* ══════════════════════════════════════════════════ */
/* ══  CONTACT LIST — etiket/værdi-rækker i et kort ══ */
/* ══  Delt af: PersonSidebarCard, aktivitetssidens ══ */
/* ══  kundekort. Global, fordi de to sider ligger  ══ */
/* ══  i hver sit scope.                            ══ */
/* ══════════════════════════════════════════════════ */
.crm-contact-list { display: flex; flex-direction: column; }

.crm-contact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

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

.crm-contact-item__tag {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.crm-contact-item__val {
    font-size: var(--mud-typography-body2-size);
    font-weight: var(--mud-typography-body2-weight);
    color: var(--mud-palette-text-primary);
    text-align: right;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Cell text (sekundær farve i tabelceller) ── */
.cell-text { color: var(--mud-palette-text-secondary); }

/* ── Icon box (korthoveder, sektion-ikoner) ── */
.icon-box {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-box .mud-icon-root {
    color: var(--mud-palette-text-primary);
}

/* ── Ikon-størrelser (rolle-baseret skala — se docs/design/icons.md) ──
   Global CSS: rammer både <i class="ph …"> og MudIcons .mud-icon-root
   (klassen lander direkte på svg-roden) uden ::deep. */
.icon-title { font-size: var(--icon-size-title) !important; }
.icon-sub   { font-size: var(--icon-size-sub)   !important; }
.icon-table { font-size: var(--icon-size-table) !important; }
.icon-nav   { font-size: var(--icon-size-nav)   !important; }
/* Blyanten markerer at feltet kan redigeres, den skal ikke konkurrere med værdien: lav kontrast
   indtil rækken er under musen. Samme adfærd som .cell-edit-icon i tabellerne. */
.icon-edit  { font-size: var(--icon-size-edit)  !important; color: var(--mud-palette-text-disabled); transition: color var(--transition-fast); }
*:hover > .icon-edit { color: var(--mud-palette-text-secondary); }

/* Knap-ikoner: klassen sidder på knappen → ram start-ikon + ikon-kun-ikon. */
.icon-btn .mud-icon-root { font-size: var(--icon-size-btn) !important; }
.icon-btn > i.ph         { font-size: var(--icon-size-btn) !important; }

/* ── Type pill picker (kontakt- og adressetype) ──
   Afløser .ctype-pill (telefon/email) og .addr-new-type-btn (adresse), som var samme
   kontrol med kosmetisk drift. Hover er neutral grå, ikke brandfarvet: rød hover blev
   prøvet og rullet tilbage på .card-actions, og .seg-item bruger samme neutrale tint.
   font-family: inherit er nødvendig, fordi native <button> ikke arver skriften. */
.type-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.type-pill {
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* Værnet som .seg-item, så hover aldrig kæmper mod den aktive tilstand. */
.type-pill:hover:not(.type-pill--active) {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.type-pill--active {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.type-pill--active:hover {
    background: var(--mud-palette-primary-darken);
    border-color: var(--mud-palette-primary-darken);
}

/* ── MudPaper card container ── */
/* Kanonisk kort er .crm-card; de fire ældre navne er aliaser, indtil kaldstederne
   er omdøbt (se docs/design/decisions.md). Radius kom før fra to steder — 8px
   hardcodet her og --radius-md i mudblazor-overrides — plus 5px på detaljekort,
   som matchede intet token. Nu ét sted, én værdi, fra temaet. */
.mud-paper.crm-card,
.mud-paper.mensen-card,
.mud-paper.leads-card,
.mud-paper.henv-table-card,
.mud-paper.pers-det-card {
    border-radius: var(--radius-md) !important;
    overflow: visible !important;
    background: var(--mud-palette-background) !important;
    box-shadow: none !important;
}

.mud-paper.sager-card--grid {
    background: transparent !important;
    box-shadow: none !important;
}

/* ── Card action buttons (blød outlined-stil uden for dialoger) ── */
/* font-weight 400 matcher dashboardets handlingsknapper (PendingActionCard) —
   temaets 700 er til primære knapper. */
/* Knapperne er Variant.Text som dashboardets PendingActionCard — rammen kommer
   herfra, ikke fra MudBlazor. Outlined dækkes også (ældre sider); Filled (Gem/
   Tilknyt) holdes bevidst udenfor og beholder primær-fyldet. */
.card-actions .mud-button-text,
.card-actions .mud-button-outlined,
.card-actions .mud-icon-button {
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--radius-md) !important;
    padding: 6px 14px !important;
    min-height: 36px;
    font-size: var(--mud-typography-body2-size) !important;
    font-weight: 400 !important;
    color: var(--mud-palette-text-primary) !important;
}
/* Hover = let mørkere flade, samme som .mensen-filter-btn. */
.card-actions .mud-button-text:hover,
.card-actions .mud-button-outlined:hover,
.card-actions .mud-icon-button:hover {
    border-color: var(--mud-palette-text-disabled) !important;
    background-color: var(--mud-palette-action-disabled-background) !important;
}
/* Disabled (fx Ring op/SMS uden tlf): grå flade + dæmpet tekst/ikon, så
   inaktiv tilstand kan ses — basis-reglens !important-farver vinder ellers. */
.card-actions .mud-button-root:disabled,
.card-actions .mud-button-root.mud-disabled {
    color: var(--mud-palette-text-disabled) !important;
    background-color: var(--mud-palette-action-disabled-background) !important;
    border-color: var(--mud-palette-divider) !important;
}
.card-actions .mud-button-root:disabled .mud-icon-root,
.card-actions .mud-button-root.mud-disabled .mud-icon-root {
    color: var(--mud-palette-text-disabled) !important;
}
/* Ikon-knapper i card-actions: kvadratisk padding (14px vandret er til tekst-knapper);
   8px giver 36px højde som tekst-knapperne (20px-ikon + 2×8). */
.card-actions .mud-icon-button { padding: 8px !important; }

/* ── MudSimpleTable full width ── */
.mensen-table table { width: 100%; }

/* ── PersonDetaljer tab tables ── */
.pd-tab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mud-typography-body1-size);
}
.pd-tab-table thead tr {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.pd-tab-table thead th {
    padding: 0 12px 8px 0;
    text-align: left;
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.pd-tab-table tbody tr {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background 150ms ease;
}
.pd-tab-table tbody tr:last-child { border-bottom: none; }
.pd-tab-table tbody tr:hover { background: var(--mud-palette-action-hover); }
.pd-tab-table td {
    padding: 10px 12px 10px 0;
    vertical-align: middle;
    white-space: nowrap;
}
.pd-tab-table .pd-pd-tab-table-action { width: 32px; text-align: right; padding-right: 0; }
/* Long cells (address/name) truncate instead of wrapping; short cells just stay single-line. */
.pd-tab-table .pd-pd-tab-table-name {
    font-weight: 500;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-activity-agent-shop { display: block; font-size: var(--mud-typography-caption-size); color: var(--mud-palette-text-secondary); }
.pd-tab-table tbody tr.pd-tab-row-locked {
    opacity: 0.6;
    cursor: default;
}
.pd-tab-table tbody tr.pd-tab-row-locked:hover {
    background: transparent;
}

/* In card mode (.crm-table-cards) the single-line/ellipsis rules above would clip the value. */
@media (max-width: 599px) {
    .pd-tab-table.crm-table-cards td { white-space: normal; }
    .pd-tab-table.crm-table-cards .pd-pd-tab-table-name { max-width: none; overflow: visible; }

    /* Same for the other per-tab ellipsis classes, and the wrapper hover that paints td. */
    :is(.mud-table, table).crm-table-cards .sp-tab-name-cell,
    :is(.mud-table, table).crm-table-cards .sag-buyer-contact { white-space: normal; overflow: visible; }
    .mensen-table-wrapper .crm-table-cards tbody tr:hover td { background: transparent; }
}

.pd-tab-arrow-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 150ms ease;
}
.pd-tab-arrow-btn:hover {
    background: var(--mud-palette-action-hover);
    color: var(--mud-palette-text-primary);
}

/* ── Tab section header ── */
.pd-tab-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.pd-tab-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pd-tab-section-icon {
    font-size: 16px !important;
    color: var(--mud-palette-text-secondary) !important;
    width: 16px !important;
    height: 16px !important;
}

/* ── Skemaer form cards grid ── */
.pd-forms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
.pd-form-card {
    border: var(--card-border);
    border-radius: 12px;
    padding: 16px;
    background: var(--mud-palette-background);
}
.pd-form-card__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.pd-form-card__title-row { display: flex; align-items: center; gap: 10px; }
.pd-form-card__title-copy { display: flex; flex-direction: column; gap: 2px; }
.pd-form-card__title { font-size: var(--mud-typography-body1-size); font-weight: 600; color: var(--mud-palette-text-primary); }
.pd-form-card__subtitle { font-size: var(--mud-typography-caption-size); color: var(--mud-palette-text-secondary); }
.pd-form-card__meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.pd-form-card__meta-label { font-size: var(--mud-typography-overline-size); font-weight: 600; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.pd-form-card__activity-link { font-size: var(--mud-typography-body2-size); color: var(--mud-palette-primary); text-decoration: none; }
.pd-form-card__activity-link:hover { text-decoration: underline; }
.pd-form-card__summary { margin-bottom: 12px; }
.pd-form-card__summary-text { font-size: var(--mud-typography-body2-size); color: var(--mud-palette-text-secondary); margin: 4px 0 0; line-height: 1.5; }
.pd-form-card__actions { display: flex; gap: 8px; }

/* ── Tillad dropdown at vise sig uden for tabellens scroll-container ── */
.mud-paper.mensen-card .mud-table-container,
.mud-paper.leads-card .mud-table-container {
    overflow: visible !important;
}

/* ── Fjern border-bottom på sidste tabelrække i card-tabeller ── */
.mud-paper.mensen-card .mud-table-container table tbody > tr:last-child > td,
.mud-paper.leads-card .mud-table-container table tbody > tr:last-child > td {
    border-bottom: none !important;
}

/* ── Responsive column visibility ── */
@media (max-width: 599px) {
    .col-hide-mobile { display: none !important; }
}

/* ══════════════════════════════════════════════════ */
/* ══  Shared list-page primitives (mensen-*)      ══ */
/* ══  Used by /personer, /zrm/health, and any     ══ */
/* ══  future page that follows the same shape.    ══ */
/* ══════════════════════════════════════════════════ */

/* ── Card header (title + optional right-side controls) ── */
.mensen-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.mensen-card-header--flush {
    padding-left: 0;
    padding-right: 0;
}

.mensen-card-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Tab strip (segmented control container) ── */
.mensen-card-tabs {
    padding: 8px 24px;
}

/* ── Filter trigger button ── */
.mensen-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    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;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.mensen-filter-btn:hover {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-text-disabled);
}

.mensen-filter-btn--active {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #ffffff;
}

.mensen-filter-btn--active:hover {
    background: var(--mud-palette-primary-darken);
    border-color: var(--mud-palette-primary-darken);
}

/* --set = "der ER filtre sat", til forskel fra --active der er en åben/lukket-toggle.
   Samme mørkegrå flade som hover, så markeringen ikke skriger som brandrød. */
.mensen-filter-btn--set {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-text-disabled);
}

.filter-count {
    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;
}

.mensen-filter-btn .mud-icon-root {
    font-size: 16px !important;
}

.mensen-filter-btn--active .mud-icon-root {
    color: #ffffff !important;
}

/* Danger variant — red outline/text/icon, same shape as the base button. */
.mensen-filter-btn--danger {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.mensen-filter-btn--danger:hover {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-error-darken);
    color: var(--mud-palette-error-darken);
}

.mensen-filter-btn--danger .mud-icon-root {
    color: var(--mud-palette-error) !important;
}

.mensen-filter-btn--danger:hover .mud-icon-root {
    color: var(--mud-palette-error-darken) !important;
}

/* ── Filter dropdown row ── */
.mensen-card-filters {
    padding: 12px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mensen-card-filters > * {
    flex: 1;
    min-width: 160px;
}

/* ── Empty state ── */
.mensen-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}

.mensen-empty .mud-icon-root {
    font-size: 40px !important;
    color: var(--mud-palette-text-disabled) !important;
}

/* ── Table wrapper (handles overflow + cell theming) ── */
.mensen-table-wrapper {
    overflow-x: auto;
}

.mensen-table-wrapper .mud-table {
    border-radius: 0 !important;
}

.mensen-table-wrapper tr {
    cursor: pointer;
}

.mensen-table-wrapper thead th {
    padding: 10px 24px;
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
}

.mensen-table-wrapper tbody td {
    padding: 16px 24px;
    font-size: var(--mud-typography-body1-size);
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-divider);
    vertical-align: middle;
}

.mensen-table-wrapper tbody tr:last-child td {
    border-bottom: none;
}

.mensen-table-wrapper tbody tr {
    transition: background-color 0.15s ease;
}

.mensen-table-wrapper tbody tr:hover td {
    background: var(--mud-palette-action-disabled-background);
}

/* ── Avatar inside name-cell ── */
.mensen-cell-name .mud-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: var(--mud-typography-h6-size) !important;
}

/* ── Compound name-cell (avatar + primary/sub text) ── */
.mensen-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mensen-cell-name__info {
    display: flex;
    flex-direction: column;
}

.mensen-cell-name__primary {
    font-weight: 500;
    font-size: var(--mud-typography-body1-size);
}

.mensen-cell-name__sub {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}

/* ── Card footer (counts, pagination, etc.) ── */
.mensen-card-footer {
    padding: 10px 24px;
    border-top: 1px solid var(--mud-palette-divider);
}

/* ── Generic flex helpers ── */
.flex-grow {
    flex: 1;
}

/* ── Icon rotation: 90deg used to repurpose CaretLeft as up-arrow ── */
.rotate-90 {
    transform: rotate(90deg);
}

/* ── Dropdown: søge-ikon i .dropdown-search-wrap ── */
.dropdown-search-wrap .mud-icon-root {
    font-size: 15px;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

/* ── Dropdown: loading spinner wrapper ── */
.dropdown-loading {
    padding: 12px;
    text-align: center;
}

/* ── Dropdown: clear/fjern option ── */
.dropdown-option--clear { color: var(--mud-palette-text-secondary); }

/* ── Dropdown: X-ikon i clear-option ── */
.dropdown-clear-icon.mud-icon-root,
.dropdown-option--clear .mud-icon-root {
    font-size: 14px !important;
    color: var(--mud-palette-text-disabled) !important;
}

/* ── Dropdown: check-ikon på valgt item ── */
.dropdown-option-icon--check {
    font-size: 14px !important;
    color: var(--color-success) !important;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── List page row + arrow ── */
.lp-row {
    transition: background 0.12s;
}

.lp-row--clickable {
    cursor: pointer;
}

.lp-row--clickable:hover td {
    background: var(--mud-palette-background-grey);
}

.lp-row:hover { background: var(--mud-palette-surface); }

.lp-row td {
    padding: 16px 18px;
    font-size: var(--mud-typography-body1-size);
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-action-disabled-background);
    vertical-align: middle;
}

.lp-row:last-child td { border-bottom: none; }
.lp-row td:first-child { padding-left: 18px; }
.lp-row td:last-child  { padding-right: 28px; }

.lp-arrow-cell {
    text-align: right;
    width: 48px;
}

.lp-arrow-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrasttext);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s;
}

.lp-arrow-btn:hover { opacity: 0.85; }

.lp-arrow-btn .mud-icon-root { color: #ffffff !important; }

/* ── View Toggle ── */
.view-toggle {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border: none;
    border-radius: 8px;
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.toggle-btn:hover { color: var(--mud-palette-text-primary); }

.toggle-btn--active {
    background: var(--color-accent);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.toggle-btn--active:hover { color: var(--mud-palette-text-primary); }

/* ── Inline Editing ── */
.editable-cell {
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
}

.editable-cell:hover {
    background: var(--mud-palette-background-grey);
}

.cell-text {
    display: inline;
    pointer-events: none;
}

/* Shared list-cell truncation: no text cell on a list view may wrap to a second line -
   overflow is cut with an ellipsis instead. Bound the width via the column (th/td width
   or max-width); this element then truncates within it. Combine with .cell-text. */
.cell-truncate {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-edit-icon {
    display: inline-flex;
    align-items: center;
    color: #cbd5e1;
    opacity: 0;
    margin-left: 4px;
    transition: opacity 0.12s;
    pointer-events: none;
}

.editable-cell:hover .cell-edit-icon {
    opacity: 1;
}

.inline-input {
    width: 100%;
    min-width: 80px;
    padding: 6px 10px;
    border: 1.5px solid var(--mud-palette-info);
    border-radius: 6px;
    font-size: var(--mud-typography-body1-size);
    font-family: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.inline-input:focus {
    border-color: var(--color-type-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.inline-input::placeholder {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

/* ── Dropdown Panels (inline editing) ── */
.dropdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

.dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    min-width: 180px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 10px -4px rgba(0,0,0,0.06);
    z-index: 100;
    padding: 4px;
    animation: dropdown-in 0.12s ease-out;
}

.dropdown-panel--left {
    left: 0;
    right: auto;
}

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: var(--mud-typography-body2-size);
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: background 0.1s;
    text-align: left;
}

.dropdown-option:hover { background: var(--mud-palette-action-disabled-background); }

.dropdown-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dropdown-option-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-panel--wide {
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
}

.dropdown-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 2px;
}

.dropdown-search {
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-primary);
    width: 100%;
}

.dropdown-search::placeholder { color: var(--mud-palette-text-disabled); }

.dropdown-option--clear {
    border-top: 1px solid #f1f5f9;
    margin-top: 2px;
    padding-top: 10px;
    border-radius: 0 0 6px 6px;
}

@media (max-width: 768px) {
    .lp-row td {
        padding: 0;
        border-bottom: none;
    }
}

/* ══════════════════════════════════════════════════ */
/* ══  BOOKING CALENDAR (mini-kalender)            ══ */
/* ══  Bruges af: Aktiviteter.razor,               ══ */
/* ══             BookAftalDialog.razor            ══ */
/* ══  Præfiks: cal-                               ══ */
/* ══════════════════════════════════════════════════ */

.cal-mini {
    background: var(--mud-palette-background);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    padding: 10px;
}

.cal-mini--lg {
    border-radius: 16px;
    padding: 18px;
}

.cal-mini--sm {
    border-radius: 10px;
    padding: 12px;
}

.cal-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cal-mini--lg .cal-mini-header { margin-bottom: 10px; }
.cal-mini--sm .cal-mini-header { margin-bottom: 6px; }

.cal-month {
    font-size: var(--mud-typography-body1-size);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    text-transform: capitalize;
}

.cal-mini--lg .cal-month { font-size: var(--cal-daynum-size); }
.cal-mini--sm .cal-month { font-size: var(--mud-typography-body2-size); }

.cal-nav {
    width: 28px;
    height: 28px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-mini--lg .cal-nav { width: 30px; height: 30px; }
.cal-mini--sm .cal-nav { border: none; background: none; border-radius: 6px; }

.cal-nav:hover {
    background: var(--mud-palette-background-grey);
    border-color: #cbd5e1;
    color: var(--mud-palette-text-primary);
}

.cal-mini--sm .cal-nav:hover { background: var(--mud-palette-background-grey); }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    text-align: center;
}

.cal-grid--weeknums {
    grid-template-columns: auto repeat(7, 1fr);
}

.cal-week-header {
    /* Empty cell above week number column — aligns with day headers */
}

.cal-week-num {
    font-size: 10px;
    font-weight: 500;
    color: var(--mud-palette-text-disabled);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* push text down to center of the 24px cal-day-num circle:
       1px (cal-day padding-top) + (24px circle - 1em line-height) / 2  */
    padding-top: calc(1px + (24px - 1em) / 2);
    padding-right: 4px;
    line-height: 1;
}

.cal-day-header {
    font-size: var(--mud-typography-overline-size);
    font-weight: 600;
    color: var(--mud-palette-text-disabled);
    padding: 2px 0;
}

.cal-mini--sm .cal-day-header {
    font-size: var(--cal-day-header-sm-size);
    font-weight: 700;
    color: var(--mud-palette-text-disabled);
}

.cal-day {
    width: 24px;
    max-width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--mud-typography-caption-size);
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin: auto;
    padding: 1px 0;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-day-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-mini--lg .cal-day { font-size: var(--mud-typography-caption-size); font-weight: 500; }
.cal-mini--sm .cal-day { font-size: var(--mud-typography-overline-size); }

.cal-day:hover .cal-day-num { background: #f1f5f9; }
.cal-mini--sm .cal-day:hover .cal-day-num { background: var(--mud-palette-background-grey); }

.cal-day--other { color: var(--mud-palette-divider-light); }
.cal-mini--lg .cal-day--other { color: #cbd5e1; }

/* Only the picked day is filled and today is light, the same way round as Mindworking. */
.cal-day--today .cal-day-num {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.cal-day--today:hover .cal-day-num {
    background: var(--mud-palette-primary-lighten);
}

.cal-day--selected .cal-day-num {
    background: var(--mud-palette-primary);
    color: #ffffff;
    font-weight: 600;
}

.cal-day--selected:hover .cal-day-num {
    background: color-mix(in srgb, var(--mud-palette-primary) 85%, black);
    color: #ffffff;
}

/* ══════════════════════════════════════════════════ */
/* ══  FILTER-FELT MED EGEN POPOVER                ══ */
/* ══  Felt i et FilterDropdown-panel der åbner    ══ */
/* ══  sin egen liste (checkbokse, datoer).        ══ */
/* ══════════════════════════════════════════════════ */

.filter-field {
    position: relative;
}

/* Over filter-panelet (z-index 100). */
.filter-field__backdrop {
    position: fixed;
    inset: 0;
    z-index: 101;
}

.filter-field__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 102;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-field__panel--scroll {
    max-height: 280px;
    overflow-y: auto;
    padding: 10px 14px;
    gap: 2px;
}

/* ══════════════════════════════════════════════════ */
/* ══  PILL SELECT                                 ══ */
/* ══  Compact pill-button + dropdown popover.     ══ */
/* ══  Shared base for BusinessSelector,           ══ */
/* ══  PillSelect, and any future enum-pickers.    ══ */
/* ══════════════════════════════════════════════════ */

.pill-select {
    position: relative;
}

.pill-select__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    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;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.pill-select__btn:hover {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-text-disabled);
}

.pill-select__btn--open {
    border-color: var(--mud-palette-text-disabled);
}

.pill-select__caret {
    font-size: var(--icon-size-caret);
    color: var(--mud-palette-text-secondary);
    transition: transform var(--transition-fast);
}

.pill-select__btn--open .pill-select__caret {
    transform: rotate(180deg);
}

.pill-select__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    min-width: 260px;
    width: max-content;
    max-width: min(420px, 90vw);
    background: var(--dropdown-bg);
    border: var(--dropdown-border);
    border-radius: var(--dropdown-radius);
    box-shadow: var(--dropdown-shadow);
    z-index: 1000;
    overflow: hidden;
}

/* Set by js/pill-select.js when a right-anchored panel would leave the content area. */
.pill-select__dropdown[data-align="left"] {
    left: 0;
    right: auto;
}

.pill-select__header {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.pill-select__scroll {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
}

.pill-select__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: var(--mud-typography-body1-size);
    font-weight: 400;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.pill-select__item:hover {
    background: var(--mud-palette-action-disabled-background);
}

.pill-select__item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.pill-select__item--active {
    font-weight: 600;
}

/* Multi-select-varianten markerer valg med et flueben-ikon, så fed skrift bliver
   overflødig støj (og gør panelet uroligt). Behold normal vægt her. */
.pill-select--multi .pill-select__item--active {
    font-weight: 400;
}

.pill-select__backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.pill-select__check-icon {
    font-size: 22px;
    margin-right: 8px;
    flex-shrink: 0;
    line-height: 1;
}

/* Phones: the panel is anchored to the pill's right edge and grows to max-content, so next to a
   screen edge half of it ends up off-screen. Hosts opt in with pill-anchor-row on the toolbar row
   that holds the pill; the panel then spans that row right under the buttons, like the Filtre
   panels do. */
@media (max-width: 599px) {
    /* Full width so the row is the same box on every page; some rows are right-aligned (Dashboard)
       or narrow (Sager: pill + view toggle), and the panel below must span the content width. */
    .pill-anchor-row {
        position: relative;
        width: 100%;
        /* Two equal columns instead of wrapped natural widths, so the buttons line up on every
           page; a lone trailing control spans both columns. !important: the host rows set
           display: flex in scoped CSS, which outranks this single class. */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: stretch;
    }

    .pill-anchor-row > * {
        min-width: 0;
        width: 100%;
        margin: 0;
    }

    .pill-anchor-row > *:nth-child(odd):last-child {
        grid-column: 1 / -1;
    }

    .pill-anchor-row > button,
    .pill-anchor-row > * > button {
        width: 100%;
        justify-content: flex-start;
    }

    /* Label stays left, caret goes to the right edge, in the grid cells and the status row. */
    .pill-anchor-row .ph-caret-down,
    .pill-anchor-row .ph-caret-up,
    .seg-dropdown__btn .ph-caret-down,
    .seg-dropdown__btn .ph-caret-up {
        margin-left: auto;
    }

    .pill-anchor-row .pill-select {
        position: static;
    }

    .pill-anchor-row .pill-select__dropdown {
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* Admin → Aktivitetstyper: keep the duration column narrow so the rename field
   keeps the bulk of the row width. The numeric field defaults to ~220px which
   crowds the row. */
.type-duration {
    width: 120px;
    flex: 0 0 120px;
}

/* ══════════════════════════════════════════════════ */
/* ══  GLOBAL PRINT                                ══ */
/* ══  Skjuler layout-shell; kun mi-print-target   ══ */
/* ══  vises. margin:0 fjerner browserens          ══ */
/* ══  dato/URL-header fra print-marginen.         ══ */
/* ══════════════════════════════════════════════════ */

@page { size: A4 portrait; margin: 0; }

@media print {
    /* Nulstil html/body/layout heights — MudBlazors flex-layout har ellers
       height:100vh, som optager én hel side og skubber indhold til side 2 */
    html, body              { height: auto !important; }

    /* Skjul layout-shell (sidebar, topbar, dashboard-tabs, bannere) */
    .mud-drawer,
    .inline-toolbar,
    .dash-header-row,
    .announcement-banner    { display: none !important; }

    /* Nulstil MudLayout fra flex-kolonne til simpelt block */
    .mud-layout             { display: block !important;
                              height: auto !important;
                              min-height: unset !important; }

    /* Nulstil MudMainContent: fjern drawer-offset og min-height */
    .mud-main-content,
    .main-content           { display: block !important;
                              height: auto !important;
                              min-height: unset !important;
                              margin: 0 !important;
                              padding: 0 !important; }

    /* Nulstil MudContainer og alle indre wrappers — fjerner eventuelle
       viewport-høje flex-stretchede containere der skubber indhold ned */
    .mud-container,
    .animate-fade-in,
    .dash-page              { display: block !important;
                              height: auto !important;
                              min-height: 0 !important;
                              padding-bottom: 0 !important; }

    /* Print-target fylder siden med egne indre marginer, ingen skygge/border */
    .mi-print-target,
    .mi-card                { display: block !important;
                              height: auto !important;
                              min-height: 0 !important;
                              overflow: visible !important;
                              border-radius: 0 !important;
                              box-shadow: none !important;
                              border: none !important; }
    .mi-print-target        { padding: 12mm 10mm !important; }
}