/* =====================================================
   APP CSS STRUCTURE

   01. Settings      – design tokens, Bootstrap overrides, fonts
   02. Generic       – browser defaults, base elements, typography
   03. Layout        – app shell, content areas, responsive shell
   04. Navigation    – sidebar navigation, topnav, dropdowns, pagination
   05. Media         – avatars, image circles, upload affordances
   06. Overlays      – assistant, offcanvas, floating actions
   07. Components    – cards, incidents, visitor cards, chat, panels
   08. Controls      – buttons, toggles, badges, progress, collapse controls
   09. Utilities     – color, text, width and helper classes
   10. Forms         – Bootstrap form overrides and placeholder hooks
===================================================== */

/* =====================================================
   01. SETTINGS – DESIGN TOKENS
===================================================== */

:root {
    /* ---------------------------------
     Bootstrap overrides
  --------------------------------- */
    --bs-body-font-family: "Neue Montreal", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-font-size: 1rem;
    --bs-border-color: #E4E4E4;
    --bs-border-radius: 0.8rem;
    --bs-btn-active-border-color: rgba(0, 0, 0, 0.1);
    --bs-btn-border-radius: 0.8rem;
    --bs-headline-font-family: var(--bs-body-font-family);
    --bs-navbar-toggler-padding-x: 0px;
    --bs-navbar-toggler-padding-y: 0px;
    --bs-navbar-nav-link-padding-x: 12px;
    --bs-navbar-nav-link-padding-y: 12px;
    --bs-nav-link-font-size: 14px;
    --bs-offcanvas-padding-x: 2rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-inner-box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px, rgba(0, 0, 0, 0.07) 0px 2.098631px 4.197263px 0px inset;
    /* ---------------------------------
     Layout
  --------------------------------- */
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;
    --sidebar-current: var(--sidebar-width);
    /* ---------------------------------
     Brand
  --------------------------------- */
    --bmg-font: #0b1219;
    --bmg-font-rgb: 11, 18, 25;
    --bs-button-color: rgb(var(--bmg-font-rgb));
    --bmg-white: #fff;
    --bmg-white-rgb: 255, 255, 255;
    --bmg-bg-opacity-light: .2;
    --bmg-primary: #2C3E50;
    --bmg-primary-rgb: 44, 62, 80;
    --bmg-secondary: #5E6E82;
    --bmg-secondary-rgb: 98, 112, 129;
    --bmg-tertiary: #dfeeff;
    --bmg-tertiary-rgb: 223, 238, 255;
    --bmg-generic-gradient: linear-gradient(22deg,
            rgb(28, 40, 52),
            rgb(44, 62, 80) 48%,
            rgb(66, 88, 110));
    --bmg-host-gradient: linear-gradient(22deg,
            rgb(70, 72, 128),
            rgb(213, 151, 156));
    /*rgb(205, 171, 174));*/
    --bmg-incident-gradient: linear-gradient(22deg,
            rgb(10, 24, 50),
            rgb(59, 65, 130),
            rgb(151, 158, 192));
    --bmg-lend-lease-gradient: linear-gradient(22deg,
            rgb(70, 72, 128),
            rgb(67, 125, 128));
    --bmg-mailroom-gradient: linear-gradient(22deg,
            rgb(59, 87, 130),
            rgb(102, 122, 130));

    /* ---------------------------------
     Status – Active
  --------------------------------- */
    --bmg-active: #E5ECF4;
    --bmg-active-rgb: 229, 236, 244;
    /* ---------------------------------
     Status – Red
  --------------------------------- */
    --bmg-danger: #dc3545;
    --bmg-danger-rgb: 220, 53, 69;
    --bmg-danger-light-rgb: 250, 217, 218;
    /*246, 218, 217;*/
    /* ---------------------------------
     Status – Orange
  --------------------------------- */
    --bmg-warning: #ffbd2f;
    --bmg-warning-rgb: 255, 189, 47;
    --bmg-warning-light-rgb: 255, 242, 217;
    /*253, 242, 220;*/
    /* ---------------------------------
     Status – Green
  --------------------------------- */
    --bmg-success: #00993e;
    --bmg-success-rgb: 0, 153, 62;
    /* ---------------------------------
     Background
  --------------------------------- */
    --bmg-bg-light: #F5F7FA;
    --bmg-bg-light-rgb: 245, 247, 250;
    --bmg-bg-light-gradient-rgb:
        160deg, rgba(250, 253, 255, 1) 0%, rgba(228, 231, 235, 1) 100%;
    --bmg-bg-dark-rgb: 57, 73, 91;
    /*rgba(247, 247, 249, 1) 80%;*/

    /* ---------------------------------
     Surfaces, spacing & components
  --------------------------------- */
    --bmg-surface: #fff;
    --bmg-surface-rgb: 255, 255, 255;
    --bmg-surface-muted: #f8f9fb;
    --bmg-surface-subtle: #f1f3f7;
    --bmg-card-header-bg: #f9fafd;
    --bmg-border-subtle: rgba(var(--bmg-font-rgb), .08);
    --bmg-border-muted: rgba(var(--bmg-font-rgb), .12);
    --bmg-text-muted-rgb: 86, 96, 108;
    --bmg-card-gap: 1rem;
    --bmg-card-radius: 2rem;
    --bmg-control-radius: 1.5rem;
    --bmg-pill-radius: 999px;
    --bmg-btn-height-sm: 36px;
    --bmg-btn-height-xs: 34px;
    --bmg-icon-size-xs: 9px;
    --bmg-icon-size-sm: .95rem;
    --bmg-icon-size-md: 1rem;
    --bmg-icon-size-lg: 1.25rem;
    --bmg-status-indicator-size: 20px;
    --bmg-avatar-size: 88px;
    --bmg-avatar-sm-size: 40px;
    --bmg-avatar-status-size: 12px;
    --bmg-avatar-status-sm-size: 9px;
    --bmg-action-badge-size: 16px;
    --bmg-shadow-card:
        rgba(var(--bmg-primary-rgb), .02) 0px 3px 6px 0px,
        rgba(0, 0, 0, .03) 0px 3px 4px 0px;
    --bmg-shadow-card-hover:
        rgba(var(--bmg-primary-rgb), .20) 0px 3px 6px 0px,
        rgba(0, 0, 0, .10) 0px 1px 3px;
    --bmg-shadow-card-raised:
        rgba(var(--bmg-primary-rgb), .05) 0px 7px 14px 0px,
        rgba(0, 0, 0, .07) 0px 3px 6px 0px,
        inset rgba(var(--bmg-surface-rgb), 1) 0px 4px 4px -4px;
    --bmg-shadow-control:
        inset 0 4px 4px 0 rgba(var(--bmg-surface-rgb), .3),
        0 0 0 1px rgba(var(--bmg-primary-rgb), .04),
        0 2px 5px rgba(var(--bmg-primary-rgb), .08),
        0 1px 1.5px rgba(0, 0, 0, .03),
        0 1px 2px rgba(0, 0, 0, .02);
    --bmg-shadow-control-hover:
        0 0 0 1px rgba(var(--bmg-primary-rgb), .05),
        0 4px 10px rgba(var(--bmg-primary-rgb), .12),
        0 2px 4px rgba(0, 0, 0, .05);
    /* Blødere hvid inset – til farvede knapper (danger/warning) */
    --bmg-shadow-control-soft:
        inset 0 4px 4px 0 rgba(var(--bmg-surface-rgb), .12),
        0 0 0 1px rgba(var(--bmg-primary-rgb), .04),
        0 2px 5px rgba(var(--bmg-primary-rgb), .08),
        0 1px 1.5px rgba(0, 0, 0, .03),
        0 1px 2px rgba(0, 0, 0, .02);
}

/* =====================================================
   01. SETTINGS – FONTS
===================================================== */

@font-face {
    font-family: 'Neue Montreal';
    src: url('../fonts/PPNeueMontreal-Variable.ttf') format('truetype');
    font-weight: 1 999;
    font-display: swap;
    font-stretch: normal;
}

/* =====================================================
   02. GENERIC – SCROLLBARS
===================================================== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* WebKit (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.4);
}


@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
    .scrollbar-gutter-stable {
        scrollbar-gutter: stable;
    }

}

/* Når en modal/offcanvas åbner, låser Bootstrap scroll på <body> med inline
   overflow:hidden og kompenserer for den forsvundne scrollbar med inline
   padding-right. Vi beholder låsen, men vil ikke have hoppet.

   Bootstrap 5 sætter kun .modal-open på body – offcanvas får ingen klasse –
   så vi hooker på panelet selv med :has(). Body får en stabil gutter, så
   pladsen allerede er reserveret, og kompensationen annulleres.
   !important er nødvendigt for at slå Bootstraps inline style. */
/* Reservér scrollbarens plads mens panelet er åbent, så indholdet ikke
   udvider sig når scroll-låsen fjerner scrollbaren. Uden overlay-scrollbars
   er scrollbar-gutter en no-op, så reglen er sikker på touch. */
html:has(body.modal-open),
html:has(.offcanvas.show),
html:has(.offcanvas.showing) {
    scrollbar-gutter: stable;
  
}

/* ... og annullér Bootstraps kompensation, der ellers ville skubbe
   indholdet den anden vej. */
body.modal-open,
body:has(.offcanvas.show),
body:has(.offcanvas.showing) {
    padding-right: 0 !important;
}

.scrollbar-gutter-stable::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-gutter-stable::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.scrollbar-gutter-stable::-webkit-scrollbar-thumb:hover {
    background-color: transparent;
}

/* =====================================================
   02. GENERIC – BASE ELEMENTS
===================================================== */


html,
body {
    height: auto;
    margin: 0;
    padding-right: 0 !important;
    overflow-y: auto;
    background-color: rgba(228, 231, 235, 1)
}

@media (min-width:576px) {
    html {
        /*scrollbar-gutter: stable; */
    }

}

body {
    color: var(--bmg-font);
    background: rgb(var(--bmg-bg-light-rgb));
    background: linear-gradient(var(--bmg-bg-light-gradient-rgb));
    font-family: var(--bs-body-font-family);
    font-weight: 400;
    font-variation-settings: "wght" 450;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

html:has(.offcanvas.show),
body:has(.offcanvas.show),
body[style*="overflow: hidden"] {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html:has(.offcanvas.show)::-webkit-scrollbar,
body:has(.offcanvas.show)::-webkit-scrollbar,
body[style*="overflow: hidden"]::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}



body.chat-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}


.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--bmg-font);
    font-weight: 600 !important;
    font-variation-settings: "wght" 700 !important;
}

/* =====================================================
   02. GENERIC – CHAT SCROLLBAR
===================================================== */

.chat-thread::-webkit-scrollbar {
    width: 6px;
}

.chat-thread::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

/* =====================================================
   03. LAYOUT – APP SHELL
===================================================== */

.app {
    --sidebar-current: var(--sidebar-width);
}

p,
li {
    font-family: var(--bs-body-font-family);
    font-weight: 400;
    font-variation-settings: "wght" 450;
}

.app.sidebar-collapsed {
    --sidebar-current: var(--sidebar-collapsed);
}

.sidebar-no-transition .sidebar,
.sidebar-no-transition .sidebar *,
.sidebar-no-transition .content,
.sidebar-no-transition #topnav,
.sidebar-no-transition #topnav * {
    transition: none !important;
}

@media (min-width: 576px) {
    .app {
        min-height: 100vh;
    }
}

@media (min-width: 992px) {

    .container-lg,
    .container {
        max-width: 1140px;
        /* din nye bredde */
    }
}

::selection {
    text-shadow: none;
    background: transparent;
}

/* =====================================================
   03. LAYOUT – SIDEBAR
===================================================== */

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    padding: 1rem;
    color: var(--bmg-white);
    background: var(--bmg-generic-gradient);
    box-shadow: inset -10px 10px 20px rgba(0, 0, 0, 0.3);
    transition: width .25s ease, padding .25s ease, transform .25s ease;
    z-index: 1040;
}

.sidebar-profile,
.sidebar-visitor-management {
    background: var(--bmg-generic-gradient);
}

.sidebar-host-management {
    background: var(--bmg-host-gradient);
}

.sidebar-incident-management {
    background: var(--bmg-incident-gradient);
}

.sidebar-lend-lease-management {
    background: var(--bmg-lend-lease-gradient);
}

.sidebar-mailroom-management {
    background: var(--bmg-mailroom-gradient);
}

/* =====================================================
   03. LAYOUT – SIDEBAR COLLAPSED STATE
===================================================== */

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
    padding: .5rem;
}

.sidebar .sidebar-profile-info,
.sidebar .nav-link>span,
.sidebar .submenu-chevron {
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
    white-space: nowrap;
}

.sidebar .nav-link>span,
.sidebar .submenu-chevron {
    display: inline-block;
}

.sidebar.labels-visible .sidebar-profile-info,
.sidebar.labels-visible .nav-link>span,
.sidebar.labels-visible .submenu-chevron {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease;
}

.sidebar.collapsed .sidebar-profile-info,
.sidebar.collapsed .nav-link>span,
.sidebar.collapsed .submenu-chevron {
    display: none !important;
    opacity: 0;
    visibility: hidden;
}

/* Skjul tekst-elementer */
.sidebar.collapsed .sidebar-title {
    display: none !important;
}

.sidebar .submenu.show {
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
}

.sidebar.labels-visible .submenu.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease;
}

/* Avatar mindre */
.sidebar.collapsed .avatar-circle {
    width: 44px;
    height: 44px;
}

.sidebar.collapsed .avatar-online::after {
    width: 10px;
    height: 10px;
    right: 3px;
    bottom: 3px;
}

/* Nav-links centreres korrekt */
.sidebar.collapsed .sidebar-nav .nav-link {
    justify-content: center !important;
    padding-left: .75rem;
    padding-right: .75rem;
    gap: 0 !important;

}

/* Hvis der er indre wrapper-div */
.sidebar.collapsed .sidebar-nav .nav-link>div {
    justify-content: center !important;
    gap: 0 !important;
}

/* Ikon centreres 100% */
.sidebar.collapsed .sidebar-nav .nav-link i {
    margin: 0 auto;
    display: block;
}

/* Logout nederst centreres i collapsed state */
.sidebar.collapsed .sidebar-logout,
.sidebar.collapsed .logout-link,
.sidebar.collapsed .nav-link[href*="logout"] {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 0 !important;
    padding-left: .75rem;
    padding-right: .75rem;
    text-align: center;
}

.sidebar.collapsed .sidebar-logout i,
.sidebar.collapsed .logout-link i,
.sidebar.collapsed .nav-link[href*="logout"] i {
    margin: 0 auto;
    display: block;
}

/* Submenus må aldrig vises i collapsed state */
.sidebar.collapsed .submenu {
    display: none !important;
}

/* =====================================================
   03. LAYOUT – RESPONSIVE APP SHELL
===================================================== */


@media (max-width: 991.98px) {
    .app {
        --sidebar-current: 0px;
    }

    .app.sidebar-open {
        --sidebar-current: var(--sidebar-width);
    }

    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .app.sidebar-open .content {
        margin-right: calc(-1 * var(--sidebar-width));
        overflow-x: hidden;
    }

    .app.sidebar-open .content main {
        opacity: 0.5;
        pointer-events: none;
        user-select: none;
    }

    .content {
        margin-left: var(--sidebar-current);
    }
}

/* =====================================================
   03. LAYOUT – CONTENT AREA
===================================================== */
.content {
    margin-left: var(--sidebar-current);
    transition: margin-left .25s ease;
    /* Klip vandret overflow fra .content-panel.negative (negative margins),
       men lad lodret indhold (dropdowns, tooltips) stikke ud. */
    overflow-x: clip;
    overflow-y: visible;
    min-height: 100dvh;
}

/* =====================================================
   03. LAYOUT – RESPONSIVE TOOLBARS
===================================================== */

@media (max-width: 991.98px) {
    .incident-toolbar {
        grid-template-columns: 100%;
        height: auto;
        /* 👈 vigtig */
        row-gap: .75rem;
    }

    .incident-toolbar-left,
    .incident-toolbar-right {
        width: 100%;
        padding: 0;
    }

    .incident-toolbar-right {
        justify-content: flex-start;
    }

    .incident-toolbar-actions {
        width: 100%;
    }

    .incident-search {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.incident-row {
    padding: 1.25rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.incident-row:last-child {
    border-bottom: 0;
}

.incident-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.incident-progress {
    max-width: 350px;
    flex-grow: 1;
}

.progress {
    height: 6px;
    background-color: #e9ecef;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0 -1px 2px rgba(255, 255, 255, 0.1)
}

.progress.progress-thin {
    height: 6px;
    border-radius: 999px;
}

/* =====================================================
   03. LAYOUT – RESPONSIVE VISITOR CARDS
===================================================== */

@media (max-width: 1199.98px) {

    .card-body-card-grid .row.g-5 {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 2rem;
    }

    .card-body-person-layout {
        gap: 1rem !important;
    }

    .card-body-card-grid .col-xl-4>.d-flex:nth-child(2) {
        justify-content: flex-start;
    }

}

/* =====================================================
   03. LAYOUT – CONTENT PANELS & HISTORY DIVIDER
===================================================== */

.content-panel {
    background: rgba(0, 0, 0, .02);
    border: 1px solid rgba(0, 0, 0, .05);
    border-bottom-color: rgba(255, 255, 255, .85);
    border-radius: 24px;
    padding: 1.5rem 1.5rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, .08),
        inset 0 12px 24px rgba(255, 255, 255, .08),
        inset 0 -12px 24px rgba(0, 0, 0, .035);
}

.content-panel.negative {
    margin: 0 -1.5rem 1.5rem;
}

/* Border-radius på .content-panel kun ved tilstrækkelig bredde:
   - normalt:           over 1420px
   - collapsed sidebar: over 1240px */
@media (max-width: 1419.98px) {
    .content-panel {
        border-radius: 0;
    }
}

@media (min-width: 1240px) and (max-width: 1419.98px) {
    .sidebar-collapsed .content-panel {
        border-radius: 24px;
    }
}

.history-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 4rem 0 2rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.history-divider::before,
.history-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, .08);
}

/* =====================================================
   03. LAYOUT – EMPTY VIEW PLACEHOLDER
===================================================== */

.empty-view-preview {
    width: min(520px, 100%);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(var(--bmg-secondary-rgb), .12);
    border-radius: 8px;
    background: rgba(var(--bmg-surface-rgb), .72);
    box-shadow: inset 0 1px 0 rgba(var(--bmg-surface-rgb), .85);
}

.empty-view-preview-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgba(var(--bmg-secondary-rgb), .82);
    background: rgba(var(--bmg-secondary-rgb), .1);
    border-radius: 8px;
}

.empty-view-preview-content {
    display: grid;
    gap: .45rem;
    flex: 1;
}

.empty-view-preview-content span {
    display: block;
    height: .5rem;
    border-radius: 999px;
    background: rgba(var(--bmg-secondary-rgb), .14);
}

.empty-view-preview-content span:nth-child(1) {
    width: 78%;
}

.empty-view-preview-content span:nth-child(2) {
    width: 56%;
}

.empty-view-preview-content span:nth-child(3) {
    width: 36%;
}

/* =====================================================
   04. NAVIGATION – PAGINATION
===================================================== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .2rem;
    margin-bottom: .35rem !important;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.page-item {
    border: 0 !important;
}

.page-item+.page-item {
    border-left: 0 !important;
}

.page-link {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875em;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(var(--bmg-font-rgb), .75);
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}

.page-link i {
    font-size: .75rem;
}

.page-item.active .page-link {
    background: #fff;
    color: rgba(var(--bmg-font), .8);
    box-shadow: rgba(65, 69, 88, 0.02) 0px 3px 6px 0px,
        rgba(0, 0, 0, 0.03) 0px 3px 4px 0px;
}

.page-item.disabled .page-link {
    opacity: .35;
    pointer-events: none;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 50%;
}

.page-link:hover {
    background: rgba(var(--bmg-font-rgb), .06) !important;
    color: var(--bmg-font) !important;
}

/* =====================================================
   04. NAVIGATION – DROPDOWN MENUS
===================================================== */
.dropdown-header {
    color: rgb(var(--bmg-font-rgb), 1);
    padding: var(--bs-dropdown-header-padding-y) 0;

}

.dropdown-menu {
    border-color: rgba(0, 0, 0, .01);
    padding: 1.5rem;
    min-width: auto;

}

.workspace-switcher-menu {
    min-width: 300px;
}

/* Workspace-punkt: ikon-flise, titel og chevron på én linje. */
.workspace-switcher-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .55rem .35rem;
    border-radius: .5rem;
}

.workspace-switcher-item + .workspace-switcher-item,
.workspace-switcher-menu li + li > .workspace-switcher-item {
    position: relative;
}

/* Hårfin adskillelse mellem punkterne, indrykket forbi ikon-flisen. */
.workspace-switcher-menu li + li > .workspace-switcher-item::before {
    content: "";
    position: absolute;
    top: 0;
    right: .35rem;
    left: 3.1rem;
    border-top: 1px solid rgba(var(--bmg-font-rgb), .07);
}

.workspace-switcher-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .65rem;
    background: rgba(var(--bmg-bg-light-rgb), 1);
    color: rgba(var(--bmg-font-rgb), .75);
    font-size: .95rem;
}

.workspace-switcher-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-switcher-chevron {
    flex-shrink: 0;
    color: rgba(var(--bmg-font-rgb), .35);
    font-size: .85rem;
}

.workspace-switcher-item.active .workspace-switcher-title {
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

/* Den aktive ikon-flise bærer workspacets egen gradient – samme mapping som
   sidebaren (.sidebar-<workspace>), så menuen og sidebaren stemmer overens. */
.workspace-switcher-item.active .workspace-switcher-icon {
    background: var(--bmg-generic-gradient);
}

/* .dropdown-item i sætter farven direkte på <i>, så den skal overstyres her –
   nedarvning fra flisen er ikke nok. */
.workspace-switcher-item.active .workspace-switcher-icon,
.workspace-switcher-item.active .workspace-switcher-icon i {
    color: var(--bmg-white);
}

.workspace-switcher-item.active.switcher-host-management .workspace-switcher-icon {
    background: var(--bmg-host-gradient);
}

.workspace-switcher-item.active.switcher-incident-management .workspace-switcher-icon {
    background: var(--bmg-incident-gradient);
}

.workspace-switcher-item.active.switcher-lend-lease-management .workspace-switcher-icon {
    background: var(--bmg-lend-lease-gradient);
}

.workspace-switcher-item.active.switcher-mailroom-management .workspace-switcher-icon {
    background: var(--bmg-mailroom-gradient);
}

/* Profil er ikke et workspace. Den afgrænses som et selvstændigt, fyldt felt
   nederst i menuen – lys baggrund med fin kant. */
.workspace-switcher-footer {
    margin: .75rem -.3rem 0;
    padding: .2rem .5rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .5rem;
    background: rgba(var(--bmg-bg-light-rgb), 1);
}

.workspace-switcher-profile {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .2rem;
    border-radius: .35rem;
    color: inherit;
    text-decoration: none;
}

.workspace-switcher-avatar {
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
}

.workspace-switcher-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Online-prik ligger i avatarens kant, så wrapperen må ikke klippe. */
.workspace-switcher-avatar.is-online::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: .7rem;
    height: .7rem;
    border: 2px solid rgba(var(--bmg-bg-light-rgb), 1);
    border-radius: 50%;
    background: rgba(var(--bmg-success-rgb), 1);
}

.workspace-switcher-profile-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.workspace-switcher-profile-name {
    font-size: .85rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-switcher-profile-title {
    color: rgba(var(--bmg-font-rgb), .55);
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Profil"-knap til højre i feltet – egen hvid pille, så den læses som en
   handling frem for endnu en menulinje. */
.workspace-switcher-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .5rem;
    background: rgba(var(--bmg-font-rgb), .04);
    color: rgba(var(--bmg-font-rgb), .8);
    font-size: .85rem;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.workspace-switcher-profile:hover .workspace-switcher-profile-btn,
.workspace-switcher-profile:focus-visible .workspace-switcher-profile-btn {
    border-color: rgba(var(--bmg-font-rgb), .2);
    background: rgba(var(--bmg-white-rgb), 1);
    color: rgb(var(--bmg-font-rgb));
}

/* Står man på profil-workspacet, bærer knappen profilens gradient – samme
   som .sidebar-profile, der bruger generic-gradienten. */
.workspace-switcher-profile.active .workspace-switcher-profile-btn {
    border-color: transparent;
    background: var(--bmg-generic-gradient);
}

.workspace-switcher-profile.active .workspace-switcher-profile-btn,
.workspace-switcher-profile.active .workspace-switcher-profile-btn i {
    color: var(--bmg-white);
}

/* Under 576px er der ikke plads til knappen ved siden af navnet – hele
   rækken er linket, så profilen stadig kan rammes. */
@media (max-width: 575.98px) {
    .workspace-switcher-profile-btn {
        display: none;
    }
}

.workspace-switcher-profile-btn > i:first-child {
    font-size: 1.05rem;
    color: rgba(var(--bmg-font-rgb), .55);
}

/* Log ud i eget bånd i fuld bredde – de negative margener ophæver menuens
   1.5rem padding, så den vandrette streg går helt ud til kanterne. */
.workspace-switcher-actions {
    display: flex;
    align-items: center;
    margin: 1rem -1.5rem -1.5rem;
    padding: .6rem .5rem .7rem .5rem;
    border-top: 1px solid rgba(var(--bmg-font-rgb), .08);
    background: rgba(var(--bmg-bg-light-rgb), 1);
    /* Menuen er overflow: visible, så båndets nederste hjørner skal selv
       følge menuens radius – ellers stikker de ud af det runde hjørne. */
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.workspace-switcher-action {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .5rem;
    border-radius: .5rem;
    color: rgba(var(--bmg-font-rgb), .8);
    font-size: .875em;
    text-decoration: none;
}

.workspace-switcher-action i {
    color: rgba(var(--bmg-font-rgb), .55);
}

.workspace-switcher-action:hover,
.workspace-switcher-action:focus-visible {
    background: rgba(var(--bmg-white-rgb), 1);
    color: rgb(var(--bmg-font-rgb));
}

.visitor-toptools-menu,
.check-action-menu {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .22),
        0 6px 14px rgba(0, 0, 0, .14);
}

.visitor-toptools-menu {
    min-width: 340px;
}

.check-action-menu {
    min-width: 160px;
}

/* Grid-nav dropdown (System Administration): felter i et 3-kolonne net,
   adskilt af hårfine linjer i stedet for margener. */
.grid-nav-menu {
    width: min(680px, calc(100vw - 2rem));
    padding: 0;
}

/* Afklipningen sidder på griddet, ikke på menuen, så tip-pilen (::after)
   uden for menuens boks ikke klippes væk. */
.grid-nav {
    overflow: hidden;
    border-bottom-left-radius: var(--bs-dropdown-border-radius);
    border-bottom-right-radius: var(--bs-dropdown-border-radius);
}

.grid-nav-head {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(var(--bmg-font-rgb), .08);
}

.grid-nav-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    color: rgb(var(--bmg-font-rgb));
}

.grid-nav-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid-nav-row+.grid-nav-row {
    border-top: 1px solid rgba(var(--bmg-font-rgb), .08);
}

.grid-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .35rem;
    padding: 1.4rem 1rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
}

.grid-nav-item+.grid-nav-item {
    border-left: 1px solid rgba(var(--bmg-font-rgb), .08);
}

.grid-nav-item:hover,
.grid-nav-item:focus-visible {
    background: rgba(var(--bmg-secondary-rgb), .1);
}

.grid-nav-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: .3rem;
}

.grid-nav-item-title {
    font-size: .875rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    color: rgb(var(--bmg-font-rgb));
}

.grid-nav-item-desc {
    font-size: .75rem;
    line-height: 1.35;
    color: rgba(var(--bmg-font-rgb), .55);
}

@media (max-width: 575.98px) {
    .grid-nav-row {
        grid-template-columns: 1fr;
    }

    .grid-nav-item+.grid-nav-item {
        border-left: 0;
        border-top: 1px solid rgba(var(--bmg-font-rgb), .08);
    }
}

/* Match the split-button label: same colour, size and weight. */
.check-action-menu .dropdown-item {
    color: rgb(var(--bmg-font-rgb));
    font-size: .8rem;
    font-weight: 500;
    font-variation-settings: "wght" 530;
}

/* Each guest in the meeting dropdown gets a little breathing room. */
.check-action-menu-item {
    padding: .35rem 0;
    white-space: nowrap;
}

.card-body-guest-row {
    margin-left: 0;
    margin-right: 0;
}

/* "Om besøg"-rækken under gæstelisten. Afstanden lå før som pt-4 i
   markup'en; her holdes den samlet med de øvrige card-body-regler. */
.card-body-visit-row {
    margin-top: 2rem;
}
/* Expanded card body: all meeting guests share one body, one row each. */
.card-body-guest-row + .card-body-guest-row {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--bmg-font-rgb), .08);
}

/* De gæster kortet selv dækker – dem man klikkede på – markeres med en
   lodret streg i venstre kant, så øjet fanger dem blandt mødets øvrige
   deltagere. Stregen ligger som ::before, da rækken er en .row hvis
   padding hører til grid-systemet. */
.card-body-guest-row-current {
    position: relative;
}

.card-body-guest-row-current::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* Trukket ud mod card-body'ens kant (padding-left er 24px), så stregen
       sidder i margenen frem for inde i indholdet. */
    left: -16px;
    width: 4px;
    border-radius: 2rem;
    background-color: rgba(var(--bmg-text-muted-rgb), 1);
}

/* Undergrupper i mødeoversigten: mangler at ankomme / på lokationen /
   online / forladt. Grupperingen gør det muligt at se hvem der mangler
   uden at læse hver række. */
.card-body-guest-group + .card-body-guest-group {
    margin-top: 1.25rem;
}

/* Overskriften er selve skillelinjen: centreret label med en streg ud til
   hver side – samme mønster som .history-divider. Stregen hører dermed til
   titlen, ikke til gruppen, så labelen står midt i skellet frem for under
   det. */
/* Kompakt gæsteliste under en sammenfoldet gruppe: initialer, navn og
   tidspunkt, så man kan se hvem der gemmer sig uden at folde ud. */

/* "Værter"-switchen i toptools viser mødet som ÉN række pr. møde: gæsten
   fjernes fra lead-kortet, så værten står alene, og deltager-kortene
   skjules helt. Lead-kortet får derfor sine runde hjørner tilbage, da det
   ikke længere er toppen af en stak.

   Klassen sættes på <body>, så den gælder alle kort på siden. */
/* Gæsten fjernes på ALLE kort – også enkelt-gæst-kort, som ikke har en
   group-klasse. Skillelinjen før blokken følger med. */
body.show-meeting-hosts .card.visitor .card-title-collapsed-guest,
body.show-meeting-hosts .card.visitor .card-title-collapsed-guest-vr {
    display: none !important;
}

/* Deltager-kortene skjules, men group-end må IKKE fjernes: den er
   container for mødets delte body, som lead-kortets collapse peger på.
   Derfor skjules kun dens header, og kortet gøres visuelt usynligt uden
   at forsvinde fra layoutet – præcis som når gruppen er foldet ud. */
body.show-meeting-hosts .card.group-middle {
    display: none !important;
}

body.show-meeting-hosts .card.group-end > .card-header {
    display: none !important;
}

/* Kun mens mødet er FOLDET SAMMEN må kortet gøres usynligt. Er bodyen
   foldet ud, er group-end dens container: fjerner man baggrunden dér,
   mister hele mødeoversigten sin hvide flade og sidens grå slår igennem. */
body.show-meeting-hosts .card.group-end:not(:has(.collapse.show)):not(:has(.collapsing)):not(.is-body-closing) {
    border: 0;
    background: none;
    box-shadow: none;
}

/* Udfoldet slutter bodyen mødet af: firkantet foroven (headeren sidder
   lige over) og rund forneden.

   VIGTIGT: .collapsing skal med. Bootstrap giver panelet .collapsing under
   hele åbne-animationen (.35s) og sætter først .show BAGEFTER. Matcher man
   kun .show, kommer den hvide baggrund derfor et halvt sekund for sent. */
body.show-meeting-hosts .card.group-end:has(.collapse.show),
body.show-meeting-hosts .card.group-end:has(.collapsing),
body.show-meeting-hosts .card.group-end.is-body-closing {
    border-radius: 0 0 var(--bmg-card-radius) var(--bmg-card-radius) !important;
}

/* Lead-kortet står alene, når mødet er FOLDET SAMMEN, og skal derfor være
   rundt hele vejen. Er mødet foldet ud, fortsætter bodyen nedenunder, og
   bundhjørnerne skal blive firkantede – derfor :not(...) frem for en
   ubetinget regel: !important her ville gennemtvinge runde hjørner i begge
   tilstande. */
body.show-meeting-hosts .card.group-start:not(:has(.card-toggle[aria-expanded="true"])):not(.is-body-closing) {
    border-bottom-left-radius: var(--bmg-card-radius) !important;
    border-bottom-right-radius: var(--bmg-card-radius) !important;
}

/* Headeren fylder hele lead-kortet, når mødet er foldet sammen, og kortet er
   overflow: visible (så print-dropdownen kan stikke ud). Den klippes derfor
   ikke af kortet og skal selv runde alle fire hjørner – ellers stikker to
   firkantede hjørner frem forneden. Samme mønster som enkelt-gæst-kortet
   ovenfor. !important slår .card.group-start > .card-header, der sætter
   kun top-hjørnerne. */
body.show-meeting-hosts .card.visitor.group-start:not(:has(.card-toggle[aria-expanded="true"])):not(.is-body-closing) > .card-header {
    border-radius: var(--bmg-card-radius) !important;
}

/* MENS bodyen lukker (.is-body-closing sættes i generic.js på hide.bs.collapse
   og fjernes på hidden.bs.collapse) beholder headeren firkantede bundhjørner.
   aria-expanded er allerede false på det tidspunkt, så CSS kan ikke selv se
   forskel på "ved at lukke" og "lukket". */
body.show-meeting-hosts .card.visitor.group-start.is-body-closing > .card-header {
    border-radius: var(--bmg-card-radius) var(--bmg-card-radius) 0 0 !important;
}

/* Er mødet foldet ud, fortsætter bodyen nedenunder: kun top-hjørnerne runde.
   Rettes ud med det samme, da bodyen folder sig ud fra første frame. */
body.show-meeting-hosts .card.visitor.group-start:has(.card-toggle[aria-expanded="true"]) > .card-header {
    border-radius: var(--bmg-card-radius) var(--bmg-card-radius) 0 0 !important;
}

/* Bundmargin ligger på mødets SIDSTE kort – group-end – uanset om mødet er
   foldet ud eller ej. Lead-kortet må ikke bære den: er mødet foldet ud,
   ligger bodyen i group-end lige under headeren, og en margin der ville slå
   et hul mellem de to. */
body.show-meeting-hosts .card.group-end {
    margin-bottom: var(--bmg-card-gap) !important;
}

/* I værts-visning ER værten indholdet, så den må ikke forsvinde på smalle
   skærme. Blokken er normalt d-none d-xl-flex (den er sekundær ved siden af
   gæsten); her følger den i stedet gæstens logik: altid synlig, og avataren
   først fra md som .card-title-collapsed-guest.

   !important er nødvendig: d-none er en Bootstrap-utility. */
body.show-meeting-hosts .card.visitor .card-title-collapsed.card-header-host {
    display: flex !important;
}

/* Avataren følger gæstens breakpoint (d-none d-md-flex). */
@media (max-width: 767.98px) {
    body.show-meeting-hosts .card.visitor .card-header-host .avatar-sm {
        display: none !important;
    }
}

/* Skillelinjen før værten følger gæstens (d-none d-lg-block), så der ikke
   står en løs streg på de smalleste skærme. */
body.show-meeting-hosts .card.visitor .vr.card-header-host {
    display: none !important;
}

@media (min-width: 992px) {
    body.show-meeting-hosts .card.visitor .vr.card-header-host {
        display: block !important;
    }
}

/* Værts-switchen sidder i sin egen pille, bygget af .visitor-toptools-group
   (ramme, runde ender, skillelinje). Her sættes kun det labelen selv skal:
   pegefinger og ingen tekstmarkering, da hele pillen er klikbar. */
.visitor-toptools-hosts {
    cursor: pointer;
    user-select: none;
}

/* De to segmenter arver .visitor-toptools-btn (40px høj, centreret). De er
   <span>, ikke knapper, så klik falder igennem til <label> og skifter
   checkboxen. */
.visitor-toptools-hosts-icon,
.visitor-toptools-hosts-switch {
    pointer-events: none;
}

/* Ikon-segmentet er tonet, så det skiller sig fra switch-segmentet.
   To klasser er nødvendige: .visitor-toptools-btn sætter selv
   background: transparent LANGT senere i filen (sektion 09), og ved samme
   specificitet vinder den sidste regel. Ægte specificitet frem for
   !important. */
.visitor-toptools-hosts .visitor-toptools-hosts-icon {
    background-color: rgba(0, 0, 0, .05);
}

/* Ikonet dæmpes når visningen er slået fra, så pillen viser sin tilstand
   selv når knoppen er i venstre side. */
.visitor-toptools-hosts:has(.visitor-toptools-switch:not(:checked)) .visitor-toptools-hosts-icon {
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

/* Selve kontakten. appearance: none fjerner browserens eget afkrydsningsfelt,
   så elementet kan tegnes frit – knappen indeni er ::after. */
.visitor-toptools-switch {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    position: relative;
    width: 46px;
    height: 27px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: rgba(var(--bmg-font-rgb), .18);
    box-shadow: inset 0 1px 2px rgba(var(--bmg-font-rgb), .12);
    transition: background-color .25s ease, border-color .25s ease;
    cursor: pointer;
}

.visitor-toptools-switch::after {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bmg-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .25s ease;
}

.visitor-toptools-switch:checked {
    background-image: linear-gradient(22deg, rgb(70, 72, 128), rgb(213, 151, 156));
    box-shadow: none;
}

.visitor-toptools-switch:checked::after {
    transform: translateX(19px);
}

.visitor-toptools-switch:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .5);
    outline-offset: 2px;
}

/* Kortet om listen – samme ramme som de øvrige bokse i card-body. */
/* Hele den kompakte gæsteliste folder gruppen ud, ikke kun overskriften.
   Derfor pegefinger og et tydeligt fokus-omrids, da wrappen er en
   role="button" og kan tabbes til. */
.card-body-guest-preview-wrap {
    cursor: pointer;
    border-radius: var(--bmg-card-radius);
}

.card-body-guest-preview-wrap:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .5);
    outline-offset: 2px;
}

.card-body-guest-preview {
    margin: .5rem 0 0;
    padding: .35rem 1rem;
    list-style: none;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 1rem;
    background: rgba(var(--bs-light-rgb), .35);
}

/* Navn til venstre, tid til højre, tynd streg mellem rækkerne. */
.card-body-guest-preview-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(var(--bmg-font-rgb), .06);
}

.card-body-guest-preview-item:last-child {
    border-bottom: 0;
}

/* Genbruger .avatar-circle .profile-circle (via .avatar-sm) så cirklen ser
   ud som de store rækkers avatar – kun indholdet er initialer i stedet for
   et billede. */
.card-body-guest-preview-avatar {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
}

.card-body-guest-preview-avatar .avatar-circle {
    display: inline-flex;
}

/* Statusbadge nederst til højre – samme farver som på de store avatarer. */
.card-body-guest-preview-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid rgb(var(--bmg-surface-rgb));
    color: var(--bmg-white);
    font-size: .4rem;
}

.attendance-pending .card-body-guest-preview-badge {
    background-color: rgb(var(--bmg-secondary-rgb));
}

.attendance-in .card-body-guest-preview-badge {
    background-color: rgb(var(--bmg-success-rgb));
}

.attendance-out .card-body-guest-preview-badge {
    background-color: rgba(var(--bmg-text-muted-rgb), .8);
}

.attendance-online .card-body-guest-preview-badge {
    background-color: rgb(var(--bmg-primary-rgb));
}

/* Navn og tid på samme linje: tiden skubbes helt til højre. */
.card-body-guest-preview-text {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-grow: 1;
    min-width: 0;
    line-height: 1.25;
}

.card-body-guest-preview-text .card-header-time-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.card-body-guest-preview-name {
    font-size: .875rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    color: rgb(var(--bmg-font-rgb));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tidsbadget skal ikke arve .card-header-time-value's faste 40px – her
   står det under navnet, ikke i en kolonne der skal flugte. */
.card-body-guest-preview-text .card-header-time-value {
    width: auto;
    text-align: left;
}

/* Mindre indikator end i kort-headeren: her står den under navnet i en
   kompakt liste, ikke som selvstændigt element i headeren. */
.card-body-guest-preview-text .card-header-time-indicator {
    width: 1rem;
    height: 1rem;
}

.card-body-guest-preview-text .card-header-time-indicator i {
    font-size: .5rem;
}

.card-body-guest-preview-time {
    font-size: .85em;
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

/* Foldbar sektionsoverskrift ("Om besøg", "Forplejning", "Formål",
   "Yderligere information"). Ser ud som den almindelige overskrift den
   erstattede – tekst til venstre, ingen streger ud til siden som
   gruppe-titlerne – men er en knap med chevron yderst til højre. */
.card-body-section-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.card-body-section-toggle .card-body-guest-group-chevron {
    margin-left: auto;
}

/* Hover: dæmpet pille bag hele overskriften, så det er tydeligt at rækken
   kan klikkes. Negativ margin modsvarer paddingen, så teksten står samme
   sted som uden hover – pillen vokser ud i margenen i stedet for at rykke
   indholdet. */
.card-body-section-toggle {
    margin-left: -.6rem;
    margin-right: -.6rem;
    padding: .35rem .6rem;
    border-radius: .5rem;
    transition: background-color .15s ease;
}

.card-body-section-toggle:hover,
.card-body-section-toggle:focus-visible {
    background-color: rgba(var(--bmg-font-rgb), .06);
}

/* Samme hover på gruppe-titlerne ("Allerede indregistrerede"), så de to
   slags foldbare overskrifter opfører sig ens. */
.card-body-guest-group-title:hover,
.card-body-guest-group-title:focus-visible {
    background-color: rgba(var(--bmg-font-rgb), .06);
}

/* Sammenfoldet er overskriften sidste synlige element, så dens
   margin-bottom ville efterlade et tomt hul. */
.card-body-section-toggle.collapsed {
    margin-bottom: 0;
}

.card-body-guest-group-title {
    /* Arver typografien (font-size, vægt, uppercase, farve) fra
       .card-body-section-title, som elementet også bærer. Her står kun det
       der gør den til en skillelinje frem for en overskrift.

       Elementet er en <button>, da den folder gruppen ud – derfor nulstilles
       knap-defaults (baggrund, ramme, padding, bredde). */
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    /* Negativ margin modsvarer paddingen, så hover-pillen vokser ud i
       margenen frem for at rykke teksten. */
    margin-left: -.6rem;
    margin-right: -.6rem;
    padding: .35rem .6rem;
    border: 0;
    border-radius: .5rem;
    background: none;
    letter-spacing: .06em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease;
}

/* Antallet i den sammenfoldede gruppe – en lille dæmpet pille, så man kan
   se hvor mange der gemmer sig uden at folde ud. */
.card-body-guest-group-count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    padding: 0 .35rem;
    border-radius: 1rem;
    background: rgba(var(--bmg-font-rgb), .07);
    font-size: .95em;
    line-height: 1.45;
}

.card-body-guest-group-chevron {
    flex-shrink: 0;
    font-size: .8em;
    transition: transform .2s ease;
}

/* Gælder både gruppe-titlerne og de foldbare sektionsoverskrifter. */
.card-body-guest-group-title:not(.collapsed) .card-body-guest-group-chevron,
.card-body-section-toggle:not(.collapsed) .card-body-guest-group-chevron {
    transform: rotate(180deg);
}

.card-body-guest-group-title::before,
.card-body-guest-group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(var(--bmg-font-rgb), .08);
}

/* Sammenfoldet gruppe: overskriften er sidste element, så dens
   margin-bottom ville efterlade et tomt hul. */
.card-body-guest-group-title.collapsed {
    margin-bottom: 0;
}

/* Grupper uden overskrift (fx "mangler at ankomme" når den ikke står
   først) skal stadig skilles fra den foregående. */
.card-body-guest-group + .card-body-guest-group:not(:has(> .card-body-guest-group-title)) {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(var(--bmg-font-rgb), .08);
}

/* Rækkerne har selv en streg mellem sig (.card-body-guest-row + …), men den
   må ikke tegnes på gruppens første række – der står gruppens egen streg og
   overskrift allerede. */
.card-body-guest-group>.card-body-guest-row:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* "Tilføj gæst til mødet" – centreret, prominent add-knap under gæstelisten.
   Knappen sad tidligere med negativ margin, så den lagde sig oven på rækkens
   border-bottom. Den står nu i normalt flow uden at ramme nogen streg. */
/* Centreret i bunden af gæste-kolonnen. Kolonnen har pe-xl-4 (24px), som
   ellers ville skubbe midten til venstre – margin-right ophæver den, så
   knappen står midt i kolonnens synlige bredde. */
.card-body-add-guest-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

@media (min-width: 1200px) {
    .card-body-add-guest-wrap {
        margin-right: -1.5rem;
    }
}

.card-body-add-guest {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem 1.6rem .55rem .55rem;
    margin-bottom: -24px;
    border: thin solid var(--bs-border-color);
    border-radius: 999px;
    background-color: #fff;
    color: rgb(var(--bmg-font-rgb));
    font-size: .95rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

/* Plus i en fyldt mørk cirkel-badge, så knappen får visuel tyngde. */
.card-body-add-guest-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(var(--bmg-text-muted-rgb), 1) !important;
    color: var(--bmg-white);
    font-size: .85rem;
    transition: transform .18s ease;
}

/* Hover: solid lys grå baggrund (ikke transparent) + lidt mørkere border. */
.card-body-add-guest:hover,
.card-body-add-guest:focus-visible {
    border-color: rgba(var(--bmg-font-rgb), .35);
    background-color: #f5f5f5;
}

.card-body-add-guest:hover .card-body-add-guest-icon,
.card-body-add-guest:focus-visible .card-body-add-guest-icon {
    transform: scale(1.06);
}

/* "Check alle gæster ud" – participant list */
.checkout-guest-list .checkout-guest {
    padding: .8rem 0;
}

.checkout-guest-list .checkout-guest + .checkout-guest {
    border-top: 1px solid rgba(var(--bmg-font-rgb), .08);
}

.checkout-guest-loans {
    list-style: none;
    margin: .65rem 0 0;
    padding: 0;
    display: none;
    flex-direction: column;
    gap: .45rem;
    font-size: .875rem;
    color: rgba(var(--bmg-font-rgb), .7);
}

#loanAllView.details-on .checkout-guest-loans {
    display: flex;
}

.checkout-loan-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--bmg-font-rgb), .06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    color: rgba(var(--bmg-font-rgb), .7);
    flex-shrink: 0;
}

/* Invisible placeholder that reserves the button/separator slot on participant
   rows so their check-in time badge lines up with the lead rows above. */
.check-action-ghost {
    visibility: hidden;
}

span.check-action-ghost.check-action-btn,
span.check-action-ghost.check-action-group,
span.check-action-ghost.card-print-btn {
    display: inline-block;
}

/* Ghost-slots på deltager-rækker skal reservere PRÆCIS de samme bredder som
   lead-rækkens rigtige knapper (check-alle-gruppe + møde-print), så
   check-ind-tiden flugter lodret. flex: 0 0 forhindrer at flex-containeren
   krymper dem. Bredderne er målt fra lead-rækken. */
span.check-action-ghost.check-action-group {
    flex: 0 0 150px;
    width: 150px;
}

span.check-action-ghost.card-print-btn {
    flex: 0 0 40px;
    width: 40px;
}

/* Under md er check-ind/-ud-tiden skjult i headeren, og ghost-slottene har
   dermed intet at flugte med. De optog 150px + 40px af en i forvejen smal
   række, så navnene blev afkortet ("Amina O…"). Pladsen gives til navnene
   i stedet. */
@media (max-width: 767.98px) {
    .card.visitor > .card-header .check-action-ghost {
        display: none !important;
    }
}

/* All check-in/out buttons share the same 150px length so they line up.
   Icon stays at its left placement; the label fills the rest and centers. */
.check-action-btn {
    width: 150px;
    justify-content: flex-start;
    /* Reserve the icon width + gap on the right so the label is centred in
       the whole button (single buttons only; overridden for split buttons).
       !important to beat the .btn.xs padding shorthand. */
    padding-right: calc(.7rem + 11.83px + .5rem) !important;
}

.check-action-btn > span {
    flex: 1 1 auto;
    text-align: center;
}

.check-action-group {
    width: 150px;
}

.check-action-group > .check-action-btn {
    width: auto;
    flex: 1 1 auto;
    padding-right: .7rem !important;
}

/* På smalle skærme skrumper knappen til kun ikonet. Placeret efter
   basisreglerne ovenfor, så den vinder ved samme specificitet. */
@media (max-width: 767.98px) {
    .check-action-btn {
        width: 10px;
    }

    .check-action-group {
        width: auto;
    }
}

/* Møde-print-knap: samme btn-white xs-udseende som check-knapperne, men
   kompakt/kvadratisk til det ene ikon. Skjuler Bootstraps dropdown-caret. */
.card-print-btn {
    padding-left: .55rem;
    padding-right: .55rem;
}

/* Print-ikonet gøres en anelse mindre, så det passer grafisk til de øvrige
   ikoner i knap-rækken. */
.card-print-btn i {
    font-size: .85em;
}

.card-print-btn::after {
    display: none;
}

/* SMS-knappen ved siden af print – samme udtryk. */
.card-sms-btn {
    padding-left: .55rem;
    padding-right: .55rem;
}

.card-sms-btn i {
    font-size: .85em;
}

.card-sms-btn::after {
    display: none;
}

/* SMS + print som én gruppe. Knapperne ligger hver i sin .dropdown, så
   .btn-group's egne :first-child/:last-child-regler rammer wrapperne og
   ikke knapperne – hjørnerne sættes derfor her. */
.card-header-action-group>.dropdown:not(:first-child)>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.card-header-action-group>.dropdown:not(:last-child)>.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Den hoverede knap skal ligge over naboens kant. */
.card-header-action-group>.dropdown>.btn:hover,
.card-header-action-group>.dropdown>.btn:focus-visible,
.card-header-action-group>.dropdown>.btn.show {
    position: relative;
    z-index: 2;
}

/* Reserve a consistent action-column width so the meeting-host column lines
   up vertically across rows whether or not a check-in/out time badge is shown. */
@media (min-width: 992px) {
    .card-header-actions {
        min-width: 238px;
        justify-content: flex-end;
    }
}

.dropdown-item {
    color: rgb(var(--bmg-font-rgb), .6);
    font-size: .875em;
    padding: .6rem 0rem;
    font-weight: 500;
    font-variation-settings: "wght" 530;
    margin: 0;
    transition: color .2s linear, background-color .2s linear, border-color .2s linear, box-shadow .2s linear, transform .2s linear, opacity .2s linear, width .2s linear, height .2s linear, border-radius .2s linear, padding-left .2s ease;
    border-top: 0.25px solid #e3e3e3;
}

.dropdown-item.has-strong-divider {
    border-top-color: #c3c3c3;
    border-top-width: 1px;
    padding-top: 1rem;
    margin-top: .4rem;
}

.dropdown-item i {
    color: rgb(var(--bmg-font-rgb), .4);

}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item:hover i,
.dropdown-item:hover svg {
    background-color: transparent;
    color: rgb(var(--bmg-font-rgb));
}

.dropdown-item:not(.active):focus,
.dropdown-item:not(.active):hover {
    padding-left: .6rem;
}

.dropdown-item:hover::after {
    left: -2px;
    content: '';
    position: absolute;
    width: 4px;
    height: 26px;
    border-radius: 2rem;
    background-color: rgb(185, 195, 207);
}

.dropdown-item:active::after,
.dropdown-item.active::after {
    left: -2px;
    content: '';
    position: absolute;
    width: 4px;
    height: 26px;
    border-radius: 2rem;
    background-color: rgb(var(--bmg-secondary-rgb));
}

/* Aktiv-markøren sidder på -2px, hvilket rammer uden for punktet i menuer
   uden padding. Workspace-menuen har 1.5rem padding, så markøren trækkes ud
   til menuens kant i stedet for at ligge inde i boksen. Placeret EFTER
   basisreglen, da de har samme specificitet og rækkefølgen afgør. */
.workspace-switcher-item:hover::after,
.workspace-switcher-item:active::after,
.workspace-switcher-item.active::after {
    left: calc(-1.5rem - 2px);
}



.dropdown-item.active,
.dropdown-item:active {
    color: rgba(var(--bmg-font-rgb), .8);
    background-color: transparent;
    text-decoration: none;
    font-variation-settings: "wght" 700;
    font-weight: 600;
}

[class*="dropdown-menu-tip-"]::after {
    content: '';
    position: absolute;
    width: .5rem;
    height: .5rem;
    background-color: #fff;
    border: 0.25px solid #ebebeb;
    border-bottom: none;
    border-left: none;
}

.dropdown-menu-tip-ne::after {
    top: calc(-.25rem - 1px);
    right: .9rem;
    transform: rotate(-45deg);
}

/* =====================================================
   04. NAVIGATION – SIDEBAR LINKS
===================================================== */

.sidebar .btn,
.sidebar .nav-pills .nav-link,
.sidebar .nav-pills .nav-link.active,
.sidebar .nav-pills .show>.nav-link {
    color: var(--bmg-white);
    cursor: pointer;
}

.sidebar .nav-pills .nav-link {
    transition: background-color .2s ease;
}

.sidebar .nav-pills .nav-link:hover,
.sidebar .nav-pills .nav-link.active:hover,
.sidebar .nav-pills .show>.nav-link:hover {
    background-color: rgba(128, 159, 205, 0.2);
}

.sidebar .nav-pills .nav-link.active,
.sidebar .nav-pills .show>.nav-link {
    background-color: rgba(128, 159, 205, 0.5);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .08),
        inset 0 3px 6px rgba(255, 255, 255, .08),
        inset 0 -3px 6px rgba(0, 0, 0, .035);
}

.sidebar .nav-pills .nav-link.danger.active,
.sidebar .nav-pills .show>.nav-link.danger {
    background-color: rgba(var(--bmg-danger-rgb), 0.8);

}

/* =====================================================
   04. NAVIGATION – SUBMENU CHEVRONS
===================================================== */

.submenu-chevron {
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}

/* Roter når åben */
.nav-link[aria-expanded="true"] .submenu-chevron {
    transform: rotate(90deg);
}

/* =====================================================
   04. NAVIGATION – TOPNAV
===================================================== */

#topnav {
    color: rgb(var(--bmg-secondary-rgb));
    background: transparent;
    height: 80px;
    transition:
        /*width .25s ease,*/
        height .25s ease, box-shadow .25s ease;
}

#topnav button,
#topnav button:hover #topnav button:focus,
#topnav button:active {
    color: rgb(var(--bmg-secondary-rgb));
    background-color: transparent;
}

#toggleSidebar:active,
#toggleSidebar:focus,
#toggleSidebar:hover {
    color: #fff;
    background-color: var(--bmg-primary);
}

#topnav.sticky {
    position: fixed;
    top: 0;
    left: var(--sidebar-current);
    width: calc(100% - var(--sidebar-current));
    height: 60px;
    z-index: 1031;
    color: rgb(var(--bmg-primary-rgb));
    fill: rgb(var(--bmg-primary-rgb));
    /*background-image: linear-gradient(22deg,
        rgb(255, 255, 255),
        rgb(252, 254, 255) 48%,
        rgb(249, 251, 253));*/
    background-color: #fff;
    box-shadow:
        0px 4px 10px rgba(0, 0, 0, 0.2),
        inset 0 0 5px rgba(255, 255, 255, 0.1);
    animation: fadeInDownMenu .4s ease forwards;
}

#topnav.sticky button {
    color: rgb(var(--bmg-primary-rgb));
}

/* Navbar animation */
@keyframes fadeInDownMenu {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

#topnav .topnav-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    pointer-events: none;
    /* så den ikke blokerer klik */
}

/* Selve containeren der matcher main */
#topnav .topnav-inner {
    max-width: 1212px;
    margin: 0 auto;
    padding: 0 58px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
    transition: opacity .25s ease;
}

/* når den skal være aktiv */
#topnav .topnav-inner.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Offset content when sticky */
main {
    overflow: visible;
    margin-bottom: 50px;
}

body.has-fixed-nav main {
    margin: 80px 0 50px;
}

@media (max-width: 991.98px) {
    #topnav {
        height: 60px !important;
    }

    #topnav.sticky {
        left: var(--sidebar-current);
        width: calc(100% - var(--sidebar-current));
    }

}

.topnav-logo {
    width: 100%;
    max-width: 100px;
    display: block;
}

.topnav-logo .svg-logo {
    display: block;
    width: 100%;
    height: auto;
}

#topnav.sticky .topnav-logo {
    display: none;
}



@media (min-width:1520px) {
    #topnav.sticky .topnav-logo {
        display: block !important;
    }
}

/* =====================================================
   04. NAVIGATION – TOPNAV ACTIONS
===================================================== */

#topnav .topnav-actions {
    gap: 0;
}

#topnav .topnav-actions .dropdown>button,
#topnav .topnav-actions>button {
    min-width: 42px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    color: var(--bmg-secondary);
    transition:
        opacity .18s ease,
        transform .18s ease,
        color .18s ease;
}

#topnav .topnav-actions .dropdown>button:hover,
#topnav .topnav-actions>button:hover {
    opacity: .75;
    transform: translateY(-1px);
}

#topnav .topnav-actions>* {
    position: relative;
    padding-inline: .5rem;
}

#topnav .topnav-actions>*:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 34px;
    background: rgba(var(--bmg-secondary-rgb), .15);
    transform: translateY(-50%);
}

#topnav .topnav-actions .dropdown>button:focus-visible,
#topnav .topnav-actions>button:focus-visible {
    outline: none;
    box-shadow: none;
}

#topnav .topnav-actions .fa-chevron-down {
    position: relative;
    top: 1px;
    font-size: .7rem;
    opacity: .7;
}


#topnav .topnav-actions .badge {
    position: absolute;
    top: 8px !important;
    left: calc(100% - 14px) !important;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: .65rem;
    line-height: 1;
    box-shadow: 0 2px 3px rgba(var(--bmg-font-rgb), .25);
}

#topnav .topnav-icon-btn {
    border: 0;
    background: transparent;
}

/* =====================================================
   04. NAVIGATION – PROFILE TABS
===================================================== */
.profile-tabs {
    gap: .5rem;
}

.profile-tabs .nav-link {
    color: rgb(44, 62, 80);
    background-color: rgba(255, 255, 255, .55);
    border: 1px solid rgba(44, 62, 80, .16);
    display: inline-flex;
    align-items: center;
    padding: .7rem 1rem;
    border-radius: .8rem;
    font-weight: 500;
    font-variation-settings: "wght" 530;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        0 1px 2px rgba(0, 0, 0, .04);
}

.profile-tabs .nav-link:hover,
.profile-tabs .nav-link:focus {
    color: #fff;
    background-color: #3b5782;
    border-color: #3a5580;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 2px 4px rgba(0, 0, 0, .12);
}

.profile-tabs .nav-link.active,
.profile-tabs .show>.nav-link {
    color: #fff !important;
    background-color: rgb(44, 62, 80) !important;
    border-color: rgb(44, 62, 80) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 2px 4px rgba(0, 0, 0, .12);
}

.profile-tabs .nav-link:active,
.profile-tabs .nav-link.active:active {
    color: #fff !important;
    background-color: #3b6e82 !important;
    border-color: #38697c !important;
    transform: translateY(0);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.profile-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 .25rem rgba(44, 62, 80, .25),
        0 2px 4px rgba(0, 0, 0, .12);
}

.profile-tabs .nav-link i {
    margin-right: .35rem;
}

.profile-toggle {
    margin-bottom: 2rem;
}

.profile-toggle .btn-group {
    width: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, .08),
        inset 0 1px 0 rgba(255, 255, 255, .7);
}

.profile-toggle .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 64px;
    border: 0;
    background: #fff;
    color: rgb(44, 62, 80);
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.profile-toggle .btn:hover {
    background: #f6f7f8;
}

.profile-toggle .btn.active,
.profile-toggle .btn:active {
    background: rgb(44, 62, 80);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 2px 4px rgba(0, 0, 0, .15);
}

.profile-toggle .btn i {
    font-size: 1rem;
}

/* Button group fix */

.btn-group>.btn {
    border-radius: 0;
    position: relative;
    z-index: 1;
}


.btn-group>.btn-white:first-child,
.btn-group>.btn-danger:first-child,
.btn-group>.btn-warning:first-child,
.btn-group>.btn-success:first-child {
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}

.btn-group>.btn:last-child {
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}

/* Split-button chevron: the dropdown-menu <ul> is the group's last child,
   so :last-child never reaches the toggle — round its right edge directly
   so the whole split button reads as one pill. */
.btn-group>.dropdown-toggle-split {
    border-top-right-radius: var(--bmg-control-radius);
    border-bottom-right-radius: var(--bmg-control-radius);
}

.btn-group>.btn {
    border-left: 0;
}

.btn-group>.btn:hover {
    z-index: 2;
}

/* The split-button dropdown only lives on the meeting-lead (group-start) card,
   which has no body of its own — so keep that card unclipped permanently. The
   menu is then never clipped, not even mid-click while :has(.show) is settling
   (which is why it only appeared on mouse-up before). Since the card no longer
   clips, round its header to restore the top corners. */

/* Fallback for any other in-card dropdown. */
.card.group-start >.card-header:has(.dropdown-menu.show) {
    overflow: visible;
    position: relative;
}

/* Enkelt-gæst-kort (card-spaced UDEN group-klasse) har intet kort under sig og
   ingen delt body, så det kan – ligesom .card.group-start – være permanent
   overflow: visible. Det er netop DEN case hvor møde-print-dropdownen ellers
   klippes, fordi kortet er så kort at menuen rækker ud over dets bund. */
.card.card-spaced:not(.group-start):not(.group-middle):not(.group-end) {
    overflow: visible;
}

/* Når kortet ikke længere klipper, skal den farvede header selv afrunde sine
   hjørner (den fylder hele kortet i collapsed tilstand) – ellers stikker
   firkantede hjørner frem. Kun border-radius (ikke overflow: hidden), så
   print-dropdownen i headeren stadig kan stikke ud.
   Collapsed: alle fire hjørner runde. Ekspanderet: kun top runde, da
   body'en fortsætter nedenunder. */
.card.card-spaced:not(.group-start):not(.group-middle):not(.group-end) > .card-header {
    border-radius: var(--bmg-card-radius) !important;
}

.card.card-spaced:not(.group-start):not(.group-middle):not(.group-end):has(.card-toggle[aria-expanded="true"]) > .card-header {
    border-radius: var(--bmg-card-radius) var(--bmg-card-radius) 0 0 !important;
}

/* group-end deler body med gruppen og skal klippe, når den er lukket – men når
   dens egen print-dropdown er åben, gøres kort + header kortvarigt synlige. */
.card.group-end:has(.card-print-btn ~ .dropdown-menu.show),
.card.group-end:has(.card-print-btn ~ .dropdown-menu.show) > .card-header {
    overflow: visible;
    position: relative;
}

.card.group-start >.card-header{
    border-top-left-radius: var(--bmg-card-radius) !important;
    border-top-right-radius: var(--bmg-card-radius) !important;
}

#toggleSidebar {
    border-radius: .5rem;
    border-color: rgba(var(98, 112, 129), 1);
}

/* =====================================================
   05. MEDIA – AVATARS & IMAGE CIRCLES
===================================================== */

.avatar-circle,
.location-circle,
.incident-circle {
    position: relative;
    width: var(--bmg-avatar-size);
    height: var(--bmg-avatar-size);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(var(--bmg-surface-rgb), .9);
    transition: width .25s ease, height .25s ease;
}

.incident-circle,
.profile-circle {
    box-shadow:
        0 3px 8px rgba(0, 0, 0, .1)
}

.avatar-circle img,
.location-circle img,
.incident-circle img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Initialer som fallback når gæsten ikke har et rigtigt billede. Fylder
   cirklen på samme måde som et <img>, så alle avatarer ser ens ud.
   z-index: 2 lægger dem over .avatar-circle::before-glansen. */
.avatar-initials {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 105%;
    background: rgba(var(--bmg-font-rgb), .07);
    color: rgba(var(--bmg-text-muted-rgb), 1);
    font-weight: 600;
    font-variation-settings: "wght" 700;
    letter-spacing: .04em;
    line-height: 1;
    user-select: none;
}

/* Initialerne er .62em, men em'en skal følge cirklens diameter – ikke den
   16px cirklen ellers arver fra sin kontekst. Derfor sættes en basis-font
   på selve cirklen, så initialerne fylder samme andel uanset størrelse. */
.avatar-circle {
    font-size: 2.4rem;
}

.avatar-sm .avatar-circle,
.card-body-guest-preview-avatar .avatar-circle {
    font-size: 1.1rem;
}

.avatar-initials {
    font-size: .62em;
}

.avatar-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(to bottom,
            rgba(var(--bmg-surface-rgb), .35) 0%,
            rgba(var(--bmg-surface-rgb), 0) 50%,
            rgba(var(--bmg-font-rgb), .15));
    pointer-events: none;
    z-index: 0;
}

.avatar-online::after {
    content: '';
    position: absolute;
    width: var(--bmg-avatar-status-size);
    height: var(--bmg-avatar-status-size);
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    background: rgb(var(--bmg-success-rgb));
    background: color-mix(in srgb, rgb(var(--bmg-success-rgb)) 70%, var(--bmg-surface));
    border: 1px solid color-mix(in srgb, rgb(var(--bmg-success-rgb)) 55%, var(--bmg-surface));
    /* Subtil glow */
    box-shadow: 0 0 0 2px rgba(var(--bmg-success-rgb), .25);
    animation: avatarPulse 2.2s infinite;
    z-index: 5;
}

.avatar-offline::after {
    content: '';
    position: absolute;
    width: var(--bmg-avatar-status-size);
    height: var(--bmg-avatar-status-size);
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    background: rgb(var(--bmg-danger-rgb));
    background: color-mix(in srgb, rgb(var(--bmg-danger-rgb)) 80%, var(--bmg-surface));
    border: 1px solid color-mix(in srgb, rgb(var(--bmg-danger-rgb)) 65%, var(--bmg-surface));
    /* Subtil glow */
    box-shadow: 0 0 0 2px rgba(var(--bmg-danger-rgb), .20);
    animation: avatarPulseRed 2.2s infinite;
    z-index: 5;
}

.avatar-sm.avatar-online::after,
.avatar-sm.avatar-offline::after {
    content: '';
    position: absolute;
    width: var(--bmg-avatar-status-sm-size);
    height: var(--bmg-avatar-status-sm-size);
    right: 2px;
    bottom: 2px;
    border-radius: 50%;
    box-shadow: none;
    z-index: 5;
}

/* Small version */
.avatar-sm .avatar-circle,
.location-sm .location-circle {
    width: var(--bmg-avatar-sm-size);
    height: var(--bmg-avatar-sm-size);
    border: 2px solid var(--bmg-white);
    background-color: #fff;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, .1)
}

.incident-sm .incident-circle {
    width: 55px;
    height: 55px;
    border: 2px solid var(--bmg-white);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, .1)
}

.upload {
    position: relative;
    display: none;
}

.card.editing .upload {
    display: block;
}

.upload>div {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid rgba(var(--bmg-secondary-rgb), 0.1);
    background: rgba(var(--bmg-secondary-rgb), 0.08);
    box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.08);
    color: rgb(var(--bmg-secondary-rgb));
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.upload>div::before {
    content: "\2b";
    font-family: "Font Awesome 6 Pro";
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.upload>div:hover {
    background: rgba(var(--bmg-secondary-rgb), 0.12);
    border-color: rgba(var(--bmg-secondary-rgb), 0.4);
}

/* Stack */
.avatar-stack .avatar-sm {
    margin-left: -7px;
}

.avatar-stack .avatar-sm:first-child {
    margin-left: 0;
}

/* Secondary lidt dæmpet */
.avatar-secondary {
    opacity: .85;
    transform: scale(.92);
}

@keyframes avatarPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes avatarPulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bmg-danger-rgb), 0.5);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--bmg-danger-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--bmg-danger-rgb), 0);
    }
}

@keyframes avatarPulseSmall {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }

    70% {
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.fa-icon-large i,
i.fa-icon-large {
    font-size: 1.7em
}

.incident-image::after {
    content: "\f00e";
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: "Font Awesome 6 Pro";
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    color: rgb(var(--bmg-secondary-rgb));
    background: #fefefe;
    /* border: 1px solid rgba(var(--bmg-white-rgb), 0.9); */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    z-index: 5;
    pointer-events: none;
}

.incident-image.incident-sm::after {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 8px;
}

/* Edit mode → show delete icon */
.card.editing .incident-image::after {
    content: "\f2ed";
    /* regular trash */
    font-weight: 400;
    color: #fff;
    background: rgba(var(--bmg-danger-rgb), 1);
    border: none;
}

/* =====================================================
   06. OVERLAYS – OUTLOOK SYNC
===================================================== */
#outlook-sync {
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 1010;
    /* over cards */
}

/* =====================================================
   06. OVERLAYS – ASSISTANT
===================================================== */

#assistant-btn {
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 1010;

}

#assistant-btn .btn {
    height: 55px;
    width: 55px;
}

#assistant-btn .btn i {
    background: var(--bmg-incident-gradient);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.assistant-kpi-card,
.assistant-section-card {
    border-radius: 1.5rem;
}

.assistant-kpi-card {
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.assistant-kpi-card:hover {
    transform: translateY(-1px);
}


.assistant-link-icon {
    opacity: 0;
    visibility: hidden;
    color: rgba(var(--bmg-secondary-rgb), .15);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease, color .18s ease;
}


.assistant-kpi-card:hover .assistant-link-icon,
.assistant-kpi-card:focus-visible .assistant-link-icon {
    opacity: 1;
    visibility: visible;
    color: rgba(var(--bmg-secondary-rgb), .7);
    transform: translateX(2px);
}

.assistant-icon-soft {
    width: 52px;
    height: 52px;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.assistant-icon-blue {
    color: #2457a6;
    background: rgba(36, 87, 166, .1);
}

.assistant-icon-green {
    color: #1f7a4d;
    background: rgba(31, 122, 77, .12);
}

.assistant-icon-purple {
    color: #7a42c7;
    background: rgba(122, 66, 199, .12);
}

.assistant-icon-orange {
    color: #d86612;
    background: rgba(216, 102, 18, .12);
}

.assistant-list,
.assistant-activity-list {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 1rem;
    overflow: hidden;
}

.assistant-list-item,
.assistant-activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
}

.assistant-list-item+.assistant-list-item,
.assistant-activity-item+.assistant-activity-item {
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.assistant-time {
    width: 54px;
    color: rgba(var(--bmg-secondary-rgb), .9);
    font-weight: 500;
}

.assistant-welcome {
    padding: 1rem 1.25rem;
}

.assistant-section-card {
    border: 1px solid rgba(0, 0, 0, .06);
}

.assistant-kpi-card h3 {
    font-size: 2rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .assistant-offcanvas {
        --bs-offcanvas-width: 100vw;
    }

    .assistant-list-item,
    .assistant-activity-item {
        align-items: flex-start;
    }
}

/* =====================================================
   06. OVERLAYS – OFFCANVAS CARDS
===================================================== */

.offcanvas.offcanvas-end {
    --bs-offcanvas-width: 560px;
    width: var(--bs-offcanvas-width) !important;
}

.offcanvas-body {
    background-color: #fafafa;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}

.offcanvas-body .card {
    margin-bottom: .75rem;
    box-shadow: none;
    position: relative;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .0)
}

.offcanvas-body:hover .card {
    border: 1px solid rgba(0, 0, 0, .08)
}

.offcanvas-body .card:hover,
.offcanvas-body .card.editing {
    cursor: pointer;
    background: #fff;
    box-shadow:
        rgba(65, 69, 88, 0.2) 0px 3px 6px 0px,
        rgba(0, 0, 0, 0.1) 0px 1px 3px !important;
    border: 1px solid rgba(0, 0, 0, .0)
}

.offcanvas-body .card-body {
    border-radius: var(--bs-border-radius-lg) !important;
}

.offcanvas-body .card-body .btn-edit {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    border-radius: 50% !important;
}

.offcanvas-body .card:hover .btn-edit,
.offcanvas-body .card.editing .btn-edit {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* =====================================================
   06. OVERLAYS – CHAT MODAL
===================================================== */

.chat-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overscroll-behavior: contain;
}

.chat-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.chat-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    background: #fff;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.chat-modal-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-modal .chat-thread {
    overflow-y: auto;
    max-height: 100%;
}

.chat-modal .chat-input {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #fafafa;
}

.chat-modal .chat-input .chat-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Checklist inputs */
.chat-input .form-control {
    height: 34px;
    border-radius: .6rem 0 0 .6rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-right: none;
    box-shadow: none;
    background: #fff;
}

.chat-input .form-control:focus {
    border-color: rgba(var(--bmg-secondary-rgb), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--bmg-secondary-rgb), 0.08);
}

.chat-input .btn {
    height: 34px;
    width: 46px;
    padding: 0;
    border-radius: 0 .6rem .6rem 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: none;
    background: #f1f3f5;
    color: rgb(var(--bmg-secondary-rgb));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.checklist-edit .btn-primary:hover {
    background: rgb(var(--bmg-secondary-rgb));
    color: #fff;
}

.chat-preview {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 130px;
}

.chat-preview .chat-bubble {
    font-size: 0.8rem;
    padding: 0.45rem 0.6rem;
}

.chat-preview .chat-meta {
    font-size: 0.65rem;
}

.chat-preview::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom,
            rgba(250, 250, 250, 0.1),
            rgba(250, 250, 250, 1));
    pointer-events: none;
}

.card:hover .chat-preview::after {
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 1));
}

/* =====================================================
   07. COMPONENTS – EDIT BUTTONS
===================================================== */
.offcanvas-body .btn-edit {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: rgb(var(--bmg-secondary-rgb));
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, border-radius 0.2s ease;
}

.offcanvas-body .btn-edit:hover {
    background: rgb(var(--bmg-secondary-rgb));
    color: #fff;
    transform: scale(1.05);
    border-radius: 50%;
}

.offcanvas-body .btn-edit:active {
    transform: scale(0.95);
}

/* Stronger edit button in edit mode */
.offcanvas-body .card.editing .btn-edit {
    background: rgb(var(--bmg-secondary-rgb));
    color: #fff;
}

/* =====================================================
   07. COMPONENTS – CHECKLIST
===================================================== */

.checklist-edit {
    margin-top: .25rem;
}

/* Item row */
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .35rem .4rem;
    border-radius: .6rem;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Hover */
.checklist-item:hover {
    background: rgba(var(--bmg-secondary-rgb), 0.06);
    border-color: rgba(var(--bmg-secondary-rgb), 0.12);
}

/* Content */
.checklist-item .flex-grow-1 {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Title */
.checklist-item .flex-grow-1>div:first-child {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Meta */
.checklist-item .small {
    font-size: 0.7rem;
    color: rgba(var(--bmg-secondary-rgb), 0.8);
}

/* Remove button */
.checklist-item .btn-link {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.8rem;
    opacity: 0.5;
    color: rgb(var(--bmg-secondary-rgb));
    text-decoration: none;
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.checklist-item .btn-link:hover {
    opacity: 1;
    color: rgb(var(--bmg-danger-rgb));
    background: rgba(var(--bmg-danger-rgb), 0.1);
    transform: scale(1.1);
    text-decoration: none;
}

/* Spacing */
.checklist-item+.checklist-item {
    margin-top: .25rem;
}

.checklist-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* =====================================================
   07. COMPONENTS – CHECKLIST STATES
===================================================== */

.checklist-item.is-checked .flex-grow-1 {
    opacity: 0.6;
}

.checklist-item.is-checked .flex-grow-1>div {
    text-decoration: line-through;
}

.checklist-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(var(--bmg-secondary-rgb), 0.25);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* Check icon */
.checklist-checkbox::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 10px;
    opacity: 0;
    transform: scale(.6);
    transition: transform .15s ease, opacity .15s ease;
}

/* Checked state */
.checklist-item.is-checked .checklist-checkbox {
    background: rgba(var(--bmg-primary-rgb), 1);
    border-color: rgba(var(--bmg-primary-rgb), 1);
    color: #fff;
}

.checklist-item.is-checked .checklist-checkbox::after {
    opacity: 1;
    transform: scale(1);
}

/* =====================================================
   07. COMPONENTS – EDIT MODE TOGGLES
===================================================== */

.card.editing .checklist-view {
    display: none;
}

.card.editing .checklist-edit {
    display: block !important;
}

/* Icons swap */
.card .icon-edit {
    display: inline-block;
}

.card .icon-close {
    display: none;
    font-size: 0.9rem;
}

.card.editing .icon-edit {
    display: none !important;
}

.card.editing .icon-close {
    display: inline-block !important;
}

/* Checklist inputs */
.checklist-edit .form-control {
    height: 34px;
    border-radius: .6rem 0 0 .6rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-right: none;
    box-shadow: none;
    background: #fff;
}

.checklist-edit .form-control:focus {
    border-color: rgba(var(--bmg-secondary-rgb), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--bmg-secondary-rgb), 0.08);
}

.checklist-edit .btn {
    height: 34px;
    width: 34px;
    padding: 0;
    border-radius: 0 .6rem .6rem 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: none;
    background: #f1f3f5;
    color: rgb(var(--bmg-secondary-rgb));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.checklist-edit .btn.delete {
    border-radius: 50%;
}

/* .checklist-edit .btn-primary:hover er allerede defineret identisk længere
   oppe i 07. COMPONENTS – CHECKLIST STATES; dubletten er fjernet her. */

/* =====================================================
   07. COMPONENTS – DESCRIPTION EDIT MODE
===================================================== */

.card.editing .description-view {
    display: none;
}

.card.editing .description-edit {
    display: block !important;
    font-size: 0.9rem;
    border-radius: .6rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

.card.editing .description-edit:focus {
    border-color: rgba(var(--bmg-secondary-rgb), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--bmg-secondary-rgb), 0.08);
}

.card.editing #descriptionDetailsCollapse .description-details-view {
    display: none;
}

.card.editing #descriptionDetailsCollapse .description-details-edit {
    display: block !important;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .6rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    padding: 0 !important;
    box-sizing: border-box;
}

.card.editing #descriptionDetailsCollapse .description-details-edit:focus {
    border-color: rgba(var(--bmg-secondary-rgb), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--bmg-secondary-rgb), 0.08);
}

/* =====================================================
   07. COMPONENTS – DESCRIPTION CLAMP
===================================================== */

.description-clamp {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.description-clamp::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0), rgba(250, 250, 250, 1));
}

.card:hover .description-clamp::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.description-expanded {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
}

.description-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0.35rem;
    transition: opacity 0.2s ease;
}

.description-toggle-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: rgb(var(--bmg-secondary-rgb));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.description-toggle-btn:hover {
    background: rgb(var(--bmg-secondary-rgb));
    color: #fff;
    transform: scale(1.05);
}

.description-toggle-btn .icon-minus {
    display: none;
}

.card.description-expanded-state .description-toggle-btn .icon-plus {
    display: none;
}

.card.description-expanded-state .description-toggle-btn .icon-minus {
    display: inline-block;
}

.card.editing .description-toggle-wrap {
    opacity: 0;
    pointer-events: none;
}

/* =====================================================
   07. COMPONENTS – DETAILS EDIT MODE
===================================================== */
.card.editing .details-view {
    display: none;
}

.card.editing .details-edit {
    display: block !important;
}

.details-edit {
    display: none;
    margin-top: .25rem;
}

.select-pill,
.user-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .55rem;
    border-radius: .6rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    font-size: 0.9rem;
}

.select-pill {
    cursor: pointer;
}

.user-pill img,
.user-chip img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.user-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .4rem;
    border-radius: .5rem;
    background: rgba(var(--bmg-secondary-rgb), 0.08);
    font-size: 0.75rem;
}

.user-chip .fa-xmark {
    cursor: pointer;
}

.user-chip.add {
    background: transparent;
    border: 1px dashed rgba(var(--bmg-secondary-rgb), 0.3);
    cursor: pointer;
}

/* =====================================================
   07. COMPONENTS – DEADLINE EDIT MODE
===================================================== */
.card.editing .deadline-view {
    display: none;
}

.card.editing .deadline-edit {
    display: block !important;
}

.deadline-edit .form-control,
.deadline-edit .form-select {
    border-radius: .6rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    background: #fff;
    height: 36px;
}

.deadline-edit .form-control:focus,
.deadline-edit .form-select:focus {
    border-color: rgba(var(--bmg-secondary-rgb), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--bmg-secondary-rgb), 0.08);
}

/* =====================================================
   07. COMPONENTS – CARDS
===================================================== */
.incident-card,
.kpi-card,
.card {
    overflow: hidden;
    border: 0;
    border-radius: var(--bmg-card-radius);
    box-shadow: var(--bmg-shadow-card);
    transition: transform .18s ease, opacity .2s ease, box-shadow .25s ease;
    text-shadow: 0px 1px 0 rgba(var(--bmg-surface-rgb), 1);
}

.kpi-card {
    transition:
        background-color .25s ease,
        box-shadow .25s ease,
        transform .18s ease,
        border-color .25s ease,
        color .2s ease;
}

.kpi-card[role="button"] {
    cursor: pointer;
}

/* Labelen under tallet i et KPI-tile. Erstatter "small text-secondary", så
   tekststørrelse, farve og afkortning ligger ét sted – og så tilene kan
   ændres uden at rette i tre status-partials.

   Afkortes med ellipse: tilets bredde er bestemt af slideren
   (--kpi-per-page), så en lang label ville ellers presse layoutet.
   min-width: 0 er nødvendig – uden den nægter flex-forælderen at krympe
   under indholdets bredde, og text-overflow får aldrig noget at gøre. */
/* Tekstkolonnen skal kunne krympe under sit indhold, ellers får
   text-overflow i .kpi-label aldrig noget at afkorte. Flex-items har
   min-width: auto som standard. */
.kpi-card .card-body > .flex-grow-1 {
    min-width: 0;
}

.kpi-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875em;
    color: rgb(var(--bmg-secondary-rgb));
}

/* "Opret nyt møde"-tilet er et rigtigt <button>, ikke et div med
   role="button": det skal kunne tabbes til og aktiveres med tastatur uden
   ekstra JS. Browserens egen knap-styling nulstilles, så det ser ud som de
   øvrige tiles – bredden skal være 100%, ellers krymper knappen til sit
   indhold i stedet for at fylde kolonnen. */
button.kpi-card {
    width: 100%;
    padding: 0;
    text-align: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}



.kpi-card.active {
    background-color: rgba(255, 255, 255, 1);
    box-shadow:
        inset 0px 3px 4px rgba(65, 69, 88, 0.1),
        inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(0px);
    border: 1px solid rgba(222, 222, 222, 0.9);
}

.kpi-card.active:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow:
        inset 0px 3px 4px rgba(65, 69, 88, 0.15),
        inset 0px 0px 4px rgba(0, 0, 0, 0.1) !important;


}

.kpi-card:not(.active) {
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid rgba(222, 222, 222, 0.55);
    box-shadow: none;
}

.kpi-card:not(.active):hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translateY(0px);
}

.kpi-card:not(.active):active {
    transform: translateY(0px);
}



/* Alle inaktive KPI-ikoner får en neutral grå fyld, uanset text-bg-farve. */
.kpi-card:not(.active) .kpi-icon {
    color: #fff !important;
    background-color: rgb(208, 215, 224) !important;

}

.kpi-card:not(.active) .card-body .flex-grow-1 {
    color: rgba(88, 97, 102, 1);

}

/* "Opret ny visning" er en HANDLING, ikke et nøgletal. Kortet beholder sin
   almindelige ramme som de øvrige tiles – det er IKONET der bærer signalet:
   stiplet kant og accentfarve i stedet for en fyldt grå flise.

   Farven er --bmg-primary (44, 62, 80), husets mørke blågrå. Den er
   tydeligt en accent uden at introducere en ny kulør i paletten. */
.kpi-card.kpi-card-add .kpi-icon {
    background-color: rgba(var(--bmg-primary-rgb), .04) !important;
    border: 1px dashed rgba(var(--bmg-primary-rgb), 0.2);
    color: rgb(var(--bmg-primary-rgb)) !important;
    transition:
        border-color .25s ease,
        background-color .25s ease,
        color .25s ease;
}

/* Plusset må gerne fylde lidt mere end de øvrige KPI-ikoner: det er en
   knap, ikke et symbol der ledsager et tal. */
.kpi-card.kpi-card-add .kpi-icon i {
    font-size: 1.35rem;
}

.kpi-card.kpi-card-add .card-body .flex-grow-1,
.kpi-card.kpi-card-add .text-secondary {
    color: rgba(var(--bmg-font-rgb), .85) !important;
}

/* Hover: stiplingen strammer op, og fladen får et strejf mere fyld – samme
   "den bliver fast"-effekt som de øvrige tiles har. */
.kpi-card.kpi-card-add:hover .kpi-icon,
.kpi-card.kpi-card-add:focus-visible .kpi-icon {
    background-color: rgba(var(--bmg-primary-rgb), .09) !important;
    border-color: rgba(var(--bmg-primary-rgb), .45);
}

.kpi-card .kpi-icon {
    margin: 0 0 -2px 2px !important;
    transition:
        background-color .25s ease,
        color .25s ease,
        transform .2s ease;
}

.card:not(.kpi-card):not(.group-start):hover {
    cursor: pointer;
    /*transform: scale(0.995);*/
    box-shadow: var(--bmg-shadow-card-hover) !important;
    /* will-change udelades her: på enkelt-gæst-kort (overflow: visible til
       møde-print-dropdownen) skaber det en ny containing-kontekst, der ophæver
       kortets afklipning af den farvede header – så tinten lækker ud over de
       runde hjørner ved hover. */
}

.card:not(.no-scale):has(.card-toggle[aria-expanded="false"]):active {
    transform: scale(0.995);
}

.card.card-spaced {
    margin-bottom: var(--bmg-card-gap) !important;
}

.card.group-start{overflow: visible;}

.card.group-start,
.card.group-middle,
.card.group-end {

    margin-bottom: 0 !important;

}

.card.group-start {

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

}

.card.group-middle {
    border-radius: 0;
}

.card.group-end {

    border-top-left-radius: 0;

    border-top-right-radius: 0;
    margin-bottom: var(--bmg-card-gap) !important;

}

.card.group-middle .card-date-block,
.card.group-end .card-date-block {
    opacity: 0;
}

/* When a meeting group is open, the shared body is shown once on the last card.
   Hide the now-redundant sub-rows (all middle rows + the last card's own header)
   so only the lead header and the body remain. Every header in the group shares
   aria-expanded, so :has() picks up the open state on each card. */
.card.group-middle:has(.card-toggle[aria-expanded="true"]),
.card.group-end:has(.card-toggle[aria-expanded="true"]) > .card-header {
    display: none !important;
}



.card-header {
    color: rgb(var(--bmg-font-rgb));
    background-color: var(--bmg-card-header-bg);
    border-bottom-color: rgba(var(--bmg-font-rgb), .05);
    min-height: 50px;
    padding: 0;
    border-radius: 0px !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* BEMAERK: saet ikke `contain` paa .card-header. Selv `contain: layout style`
   goer headeren til en containing block og faengsler dropdown-menuernes
   stacking-kontekst, saa menuen i .card-header-actions bliver tegnet UNDER
   det naeste korts header. Maalt: menuen stikker korrekt ud (bund y=595 mod
   headerens 541), men elementFromPoint rammer naboens .card-header i stedet
   for menuen. Ydelsesgevinsten (-20% style-recalc) er ikke besvaeret vaerd. */

/* Hover */
.card-header:hover {
    background-color: var(--bmg-surface-subtle);
    border-bottom-color: var(--bmg-border-subtle);
}

/* Collapsed state */
.card-header:has(.incident-toggle[aria-expanded="false"]),
.card-header:has(.incident-toggle[aria-expanded="false"]) {
    background-color: var(--bmg-white);
    border-bottom-color: transparent;
}

/* Hover når collapsed */
.card-header:has(.incident-toggle[aria-expanded="false"]):hover {
    background-color: var(--bmg-surface-muted);
}

/* Tydeligere id når collapsed */
.card-header:has(.incident-toggle[aria-expanded="false"]) .incident-id {}

.card-header.dark {
    background-color: rgba(var(--bmg-secondary-rgb), 1) !important;
}

.card-header.dark>.btn h5 {
    color: var(--bmg-white);
    margin: 0
}

.incident-open {
    padding: 1.5rem 1.5rem 1em 1.5rem !important;
}

.priority-info,
.priority-normal,
.priority-secondary {
    box-shadow: var(--bmg-shadow-card-raised);
}

.priority-danger,
.priority-warning,
.priority-normal,
.priority-danger-dark {
    box-shadow: var(--bmg-shadow-card-raised);
}

.priority-danger-dark {
    box-shadow: var(--bmg-shadow-card-raised);
    animation: pulse-danger-dark 1.8s ease-out infinite;
}

@keyframes pulse-danger-dark {
    0% {
        box-shadow:
            0 0 0 0 rgba(var(--bmg-danger-rgb), .5),
            var(--bmg-shadow-card-raised);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(var(--bmg-danger-rgb), 0),
            var(--bmg-shadow-card-raised);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(var(--bmg-danger-rgb), 0),
            var(--bmg-shadow-card-raised);
    }
}


.card-header:has(.btn[aria-expanded="false"]) {
    background-color: var(--bmg-surface);
}

/* Samme moenster som .priority-warning nedenfor: IKKE scopet til
   .incident-card. Visitor-kort ("card visitor no-scale priority-danger")
   har ingen .incident-card-klasse, saa den scopede udgave ramte dem
   aldrig – deres body forblev gennemsigtig, mens headeren var roed. */
.priority-danger-dark .card-body,
.priority-danger .card-body {
    background: rgba(var(--bmg-danger-rgb), .03);
}


.priority-warning .card-body {
    background: rgba(var(--bmg-warning-rgb), .03);
}

.priority-danger-dark .card-header {
    color: var(--bmg-white);
    background-color: rgba(var(--bmg-danger-rgb), .9) !important;
}

.priority-danger-dark .card-header .btn {
    color: var(--bmg-white);
}

.priority-danger .card-header {
    background-color: rgba(var(--bmg-danger-rgb), .2) !important;

}

.priority-warning .card-header {
    background-color: rgba(var(--bmg-warning-rgb), .2) !important
}

.priority-normal .card-header {
    color: var(--bmg-white);
    background-color: rgba(var(--bmg-secondary-rgb), 1) !important;
}


.card-header .btn {
    color: rgb(var(--bmg-font-rgb));

}

.card-header .btn-link {
    padding: 0.9rem 1.5rem 0.7rem 1.5rem;
    border: 0;
}

.card-header .btn i,
.card-time-block i,
.license-plate i,
.card-body-info-label i,
.card-body-host-card i {
    font-size: var(--bmg-icon-size-sm);
    line-height: 1;
}

/* Samme udtryk som "Tilføj ny gæst": hvid pille med tynd ramme, ingen
   skygge. De to knapper står side om side i bunden af kortet og skal
   læses som samme slags handling. */
.card-body-edit{
    position: absolute;
    bottom: 15px;
    right: 20px;
    height: 52px;
    width: 52px;
    border: thin solid var(--bs-border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: rgb(var(--bmg-font-rgb));
    opacity: 0;
    transition: opacity .2s ease, border-color .18s ease, background-color .18s ease;
    cursor: pointer;
}

.card-body-edit:hover {
    border-color: rgba(var(--bmg-font-rgb), .35);
    background-color: #f5f5f5;
}
.card-body:hover .card-body-edit {
    opacity: 1;
}

/* Tids-badgen er højrestillet mod separatoren. Uden fast bredde krymper den
   til sin egen tekst, så ikonet flytter sig vandret alt efter hvor brede
   cifrene er (14:57 er bredere end 15:05) – det får rækkerne til at "springe".
   En fast, centreret bredde på tallet låser ikonets position, så badges
   flugter lodret på tværs af rækker. 40px rummer det bredeste HH:MM
   (målt 37,2px) med lidt luft. */
.card-header-time-badge {
    flex-shrink: 0;
}

/* Under md forsvinder de faktiske check-ind/-ud-tider fra oversigten.
   Pladsen skal bruges på hvem besøget handler om (gæst/vært) og på
   check-knapperne; det præcise klokkeslæt kan læses i kortets body.

   Skillelinjen FØR badgen ryger med – ellers står der en løs streg
   tilbage, hvor tiden var. Samme for ghost-slottet, der kun findes for at
   holde deltager-rækker i flugt med lead-rækken. */
@media (max-width: 767.98px) {
    /* Scopet til KORT-HEADEREN. Uden > .card-header ramte reglen også
       badgen inde i card body'en, hvor tiden netop skal kunne læses. */
    .card.visitor > .card-header .card-header-time-badge,
    .card.visitor > .card-header .card-header-time-badge + .vr,
    .card.visitor > .card-header .vr:has(+ .card-header-time-badge) {
        display: none !important;
    }
}

.card-header-time-value {
    display: inline-block;
    width: 40px;
    text-align: center;
}

.card-header-time-indicator {
    width: var(--bmg-status-indicator-size);
    height: var(--bmg-status-indicator-size);
    flex-shrink: 0;
}

.card-header-time-indicator i {
    font-size: var(--bmg-icon-size-xs);
    line-height: 1;
}

.card-header-time-indicator.success {
    color: rgba(var(--bmg-success-rgb), 1);
    background: rgba(var(--bmg-success-rgb), .15);
}

.card-header-time-indicator.danger {
    color: rgba(var(--bmg-danger-rgb), 1);
    background: rgba(var(--bmg-danger-rgb), .12);
}

/* Endnu ikke ankommet – dæmpet, da tidspunktet er planlagt og ikke sket. */
.card-header-time-indicator.pending {
    color: rgba(var(--bmg-text-muted-rgb), 1);
    background: rgba(var(--bmg-font-rgb), .08);
}

.card-body {
    color: rgb(var(--bmg-font-rgb));
}

.incident-card.urgent {
    background: rgba(var(--bmg-danger-rgb), .06);
    border-color: rgba(var(--bmg-danger-rgb), .35);
    box-shadow: rgba(var(--bmg-danger-rgb), .075) 0px 2px 4px 0px;
}

.incident-card.warning {
    background: rgba(var(--bmg-warning-rgb), .22);
    border-color: rgb(var(--bmg-warning-rgb));
    box-shadow: rgba(var(--bmg-warning-rgb), .075) 0px 2px 4px 0px;
}

.incident-card .h5 {
    font-weight: 500 !important;
    font-variation-settings: "wght" 530;
}

.kpi-icon {
    height: 56px;
    width: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: rgba(var(--bmg-primary-rgb), .08);
}

/* Skjul KPI-ikonet på små skærme, så tallet får hele bredden. */
@media (max-width: 575.98px) {
    .kpi-icon {
        display: none;
    }
}

/* KPI-tiles bliver en vandret swipe-slider under xl. To tiles ad gangen under
   md, tre tiles fra md til xl; fra xl og op falder rækken tilbage til
   Bootstraps 4-kolonne grid. Pile + dots + musetræk tilføjes af JS
   (initKpiStatusSlider); JS læser antal synlige tiles fra --kpi-per-page. */

/* Slider-chrome (pile, dots) er skjult som udgangspunkt – vises kun når
   slideren er aktiv (.is-slider sættes af media queries eller overflow-klassen). */
.kpi-status-arrow,
.kpi-status-dots {
    display: none;
}

/* ---- Antal synlige tiles pr. side ----
   Slideren er aktiv i to tilfælde:
   1) under xl (< 1200px), hvor der ikke er plads til fire tiles, og
   2) altid når der er flere end 4 tiles (.kpi-status-slider--overflow, sat i
      status.php ud fra antal tiles) – også på brede skærme (4 ad gangen). */
@media (max-width: 1199.98px) {
    .kpi-status-slider {
        --kpi-per-page: 3;
    }
}

@media (max-width: 767.98px) {
    .kpi-status-slider {
        --kpi-per-page: 2;
    }
}

@media (min-width: 1200px) {
    .kpi-status-slider--overflow {
        --kpi-per-page: 4;
    }
}

.kpi-status-slider,
.kpi-status-slider--overflow {
    position: relative;
}

/* ---- Slider-mekanik: aktiveres under xl for enhver slider ---- */
@media (max-width: 1199.98px) {
    .kpi-status-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-left: -12px;
        margin-right: -12px;
        scroll-padding-inline: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kpi-status-row > [class*="col-"] {
        flex: 0 0 calc(100% / var(--kpi-per-page) - var(--bs-gutter-x, .75rem));
        max-width: calc(100% / var(--kpi-per-page) - var(--bs-gutter-x, .75rem));
        scroll-snap-align: start;
    }

    .kpi-status-slider .kpi-status-arrow,
    .kpi-status-slider .kpi-status-dots {
        display: flex;
    }
}

/* Samme mekanik når overflow-klassen er sat – på alle bredder. */
.kpi-status-slider--overflow .kpi-status-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-left: -12px;
    margin-right: -12px;
    scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.kpi-status-slider--overflow .kpi-status-row > [class*="col-"] {
    flex: 0 0 calc(100% / var(--kpi-per-page) - var(--bs-gutter-x, .75rem));
    max-width: calc(100% / var(--kpi-per-page) - var(--bs-gutter-x, .75rem));
    scroll-snap-align: start;
}

.kpi-status-slider--overflow .kpi-status-arrow,
.kpi-status-slider--overflow .kpi-status-dots {
    display: flex;
}

/* Fælles slider-detaljer (uafhængigt af aktiverings-betingelse). */
.kpi-status-row::-webkit-scrollbar {
    display: none;
}

.kpi-status-row.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

.kpi-status-row.is-gliding {
    scroll-snap-type: none;
}

.kpi-status-arrow {
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: rgb(var(--bmg-font-rgb));
    background: var(--bmg-white);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, .12),
        0 0 0 1px rgba(var(--bmg-font-rgb), .06);
    transition: opacity .15s ease;
}

.kpi-status-arrow-prev {
    left: -6px;
}

.kpi-status-arrow-next {
    right: -6px;
}

.kpi-status-arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

.kpi-status-dots {
    justify-content: center;
    gap: .4rem;
    margin-top: .75rem;
}

.kpi-status-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--bmg-font-rgb), .2);
    transition: background-color .15s ease, width .15s ease;
}

.kpi-status-dot.active {
    width: 18px;
    border-radius: 999px;
    background: rgb(var(--bmg-secondary-rgb));
}

.stat-number {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 600 !important;
    font-variation-settings: "wght" 700;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .45s ease, transform .45s ease;
}

.stat-number.visible {
    opacity: 1;
    transform: translateY(0);
}

#incidentList.filterOverdue .incident-card:not([data-overdue="true"]) {
    display: none;
}

#incidentList.filterUnassigned .incident-card:not([data-assigned="false"]) {
    display: none;
}

#incidentList.filterUrgent .incident-card:not([data-priority="urgent"]) {
    display: none;
}

/* =====================================================
   07. COMPONENTS – INCIDENT LAYOUT
===================================================== */

.incident-wrapper {
    border: 0;
    border-radius: 0.75rem;
}

.incident-wrapper .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

/* =====================================================
   07. COMPONENTS – CARD HEADER & COLLAPSE STATE
===================================================== */

.incident-toggle,
.card-toggle {
    min-width: 0;
}



.incident-id,
.card-date {
    width: 120px;
}

.card-date.card-date-lg {
    width: 220px;
}

.incident-id,
.incident-title-collapsed,
.card-date,
.card-title-collapsed {
    white-space: nowrap;
}



.card-header .incident-toggle[aria-expanded="true"] .incident-title-collapsed,
.card-header .incident-toggle[aria-expanded="true"] .incident-header-badges,
.card-header .card-toggle[aria-expanded="true"] .card-title-collapsed,
.card-header .card-toggle[aria-expanded="true"] .history-card-title,
.card-header .card-toggle[aria-expanded="true"] .card-header-badges,
.card-header .card-toggle[aria-expanded="true"] .card-time-block,
.card-header .card-toggle[aria-expanded="true"] .fade-collapsed {
    /* Ingen transition: blokkene skjules med det samme. Før fadede seks
       selektorer opacity OG transform på hvert eneste kort samtidig, hvilket
       både belastede browseren og konkurrerede med mødeblokkens indfoldning
       — to bevægelser i hver sin retning på én gang læses som rod.
       Nu er der én animation i headeren: mødeblokken der folder ud. */
    opacity: 0 !important;
}

/* Mødetitel + lokale er det OMVENDTE af .fade-collapsed: skjult mens kortet
   er sammenfoldet (dér er gæst og vært det væsentlige), og foldet ind når man
   åbner kortet og skal vide hvilket møde detaljerne hører til.

   Blokken står FØR tiden, og fylder intet i hvile (max-width: 0). Når den
   folder ud, skubber den af sig selv tid, gæst og vært til højre – de fader
   samtidig ud via .fade-collapsed, så bevægelsen læses som ét skift frem for
   to konkurrerende animationer.

   Samme varighed og easing som .fade-collapsed (.4s ease), ellers kommer
   ind- og udfadning ud af trit. */
.card-header-meeting {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    /* INGEN transition i hvile-tilstanden: den ville også gælde ved lukning,
       hvor bredden animerer tilbage mod 0 og får blokken til at se ud som om
       den glider ind fra højre. Lukningen skal være øjeblikkelig – ligesom
       de øvrige blokke, der heller ikke fader længere. Animationen ligger
       derfor kun på den åbne tilstand nedenfor.

       transition: none frem for at udelade den: blokken arver ellers
       "all" fra Bootstraps .btn på card-toggle. */
    transition: none;
}

.card-header .card-toggle[aria-expanded="true"] .card-header-meeting {
    /* Bredden skal rumme den længste tekst i datasættet:
       "Budget- og ressourceplanlægning" (31 tegn) og
       "Mødelokale 3.01 – Bestyrelsen" (29 tegn) – målt til ~240px.
       flex-basis + min-width er nødvendige, fordi min-w-0 og
       overflow-hidden ellers lader blokken krympe til sit indhold og
       afkorte, længe før max-width bliver aktuel. */
    flex: 0 0 auto;
    min-width: 15.5rem;
    max-width: 22rem;
    /* .75 frem for 1: samme dæmpede udtryk som gæste-blokken (opacity-75),
       men styret her, så den kan fade fra 0 – utilityen har !important og
       ville låse værdien i begge tilstande. */
    opacity: .75;
    pointer-events: auto;
    margin-right: .75rem;
    /* Kun ved ÅBNING: folder ud og skubber de øvrige til højre. */
    transition: opacity .4s ease, max-width .4s ease;
}

.card-header .card-toggle[aria-expanded="false"]+.hide-collapsed {
    width: 0;
    overflow: hidden;
}

.card-header .card-toggle[aria-expanded="true"] .show-collapsed {
    display: none !important;
}

.card-header .incident-toggle[aria-expanded="false"] .incident-title-collapsed {
    display: inline-block;
    width: calc(100% - 1rem);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.card-header .card-toggle[aria-expanded="false"] .card-date {
    opacity: 0 !important;
}

@media (min-width: 576px) {

    .card-header .incident-toggle[aria-expanded="false"] .incident-id,
    .card-header .card-toggle[aria-expanded="false"] .card-date {
        display: inline;
    }

}

@media (min-width: 992px) {

    .card-header .incident-toggle[aria-expanded="false"] .incident-header-badges,
    .card-header .card-toggle[aria-expanded="false"] .card-header-badges {
        display: inline-flex;
        min-width: 0;
        white-space: nowrap;
    }

    .card-header .incident-toggle[aria-expanded="false"] .incident-title-collapsed {
        width: 220px;
    }

    .card-header  .card-title-collapsed {
        width: 290px;
    }

    .incident-id {
        width: 120px;
    }

    .card-date {
        width: 150px;
    }
}


.collapse-chevron {
    transition: transform .25s ease;
}

button[aria-expanded="false"] .collapse-chevron {
    transform: rotate(-90deg);
}

.incident-header-actions {
    padding: 0.9rem 1.5rem 0.7rem 0rem
}

.incident-header-actions .rounded-pill {
    position: relative;
    margin: 0;
}

.card-toggle {
   
    align-items: center;
    gap: 1rem;
    width: 100%;

}

.visitor-history-card-toggle {
    grid-template-columns: minmax(100px, auto) 2px minmax(180px, 1fr);
}

.card-date-block {
    width: 28px;
    height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    border-radius: 50%;

    flex-shrink: 0;
}

.card-header:has(.btn[aria-expanded="true"]) .card-date-block {
    background: #fff;

}

.card-date-block .fs-5 {
    line-height: 1;
    margin-bottom: 2px;
}

.card-date-block .smallest {
    line-height: 1;
    letter-spacing: .05em;
}


.card-time-block {
    min-width: 40px;
}

/* Tidsinterval: én linje over 576px, to linjer under. */
@media (max-width: 575.98px) {
    .card-time-range .card-time-start,
    .card-time-range .card-time-end {
        display: block;
    }

    .card-time-range .card-time-sep {
        display: none;
    }
}

/* Checked-in guests: dim the check-in time and emphasise the expected
   check-out so it reads first. Header only – the body keeps a plain format. */
[data-visitor-group-filter="filterCheckedIn"] .card-header .card-time-range .card-time-start,
[data-visitor-group-filter="filterCheckedIn"] .card-header .card-time-range .card-time-sep {
    opacity: .45;
}

[data-visitor-group-filter="filterCheckedIn"] .card-header .card-time-range .card-time-end {
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

/* Pre-registered guests: the opposite – dim the check-out time and emphasise
   the expected arrival (check-in) so it reads first. Header only. */
[data-visitor-group-filter="filterPreregistered"] .card-header .card-time-range .card-time-end,
[data-visitor-group-filter="filterPreregistered"] .card-header .card-time-range .card-time-sep {
    opacity: .45;
}

[data-visitor-group-filter="filterPreregistered"] .card-header .card-time-range .card-time-start {
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.card-title-collapsed {
    min-width: 0;
}

/* Gæste-titlen (navn + firma) får en fast, lidt kortere bredde, så
   print-knappen i højre side har plads. Kan stadig krympe på smalle skærme
   (min-width: 0 fra reglen ovenfor), men vokser ikke ud over 260px. */
.card-title-collapsed-guest {
    flex: 0 1 260px;
    max-width: 260px;
}

.history-card-title {
    min-width: 0;
}

.card-header-badges {
    justify-self: end;
}

.meeting-host-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .5rem;
    padding: .25rem .5rem;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: rgba(var(--bmg-active-rgb), 1);
    color: rgba(var(--bmg-font-rgb), 1);
    font-size: .55rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Antal manglende gæstekort i møde-print-dropdownen. Samme diskrete chip-look
   som .meeting-host-badge, men rund (pill) og uden uppercase, da den viser tal. */
.meeting-print-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: .25rem .45rem;
    border-radius: var(--bmg-pill-radius);
    border: 1px solid #e0e0e0;
    background: rgba(var(--bmg-active-rgb), 1);
    color: rgba(var(--bmg-font-rgb), 1);
    font-size: .55rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    line-height: 1;
    vertical-align: middle;
}


.vr {
    background-color: rgba(0, 0, 0, .0);
    border-right: thin solid rgba(255, 255, 255, .15);
    border-left: thin solid rgba(0, 0, 0, .1);
    opacity: 1;
}

@media (min-width: 768px) {
  .card-date-block {
    width: 52px;
    }
    .card-time-block {
    min-width: 100px;
}
}


@media (max-width: 991.98px) {
    .card-toggle {
        display: flex !important;
    }
    
}

/* Generisk "chip" – dæmpet outline i pille-form med fælles typografi/spacing.
   Deles af nummerpladen og vCard-knappen, så de altid ser ens ud. */
.chip-outline {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem .25rem .5rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: .7rem;
    background: var(--bmg-surface);
    color: rgb(var(--bmg-font-rgb));
    font-size: .8rem;
    font-weight: 530;
    font-variation-settings: "wght" 600;
    letter-spacing: .05em;
}
.chip-outline i{
color:rgba(var(--bmg-text-muted-rgb), 1);
}
/* .license-plate arver hele sit udseende fra .chip-outline – ingen egne
   basisregler. Kun -add/-edit-varianterne og bilikonet har egne styles. */

/* Både udfyldt plade (redigér) og tom (tilføj) er klikbare knapper. Fælles
   hover indikerer at man kan trykke for at tilføje/rette. */
button.license-plate {
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

button.license-plate:hover,
button.license-plate:focus-visible {
    border-color: rgb(var(--bmg-secondary-rgb));
    background: rgba(var(--bmg-secondary-rgb), .08);
}

/* "Tilføj plade"-knap for gæster uden nummerplade: samme (solide) border som
   .license-plate, men dæmpet farve så den læses som en add-handling. gap er 0 i
   hvile (kun bilikonet ses), og åbnes når plus'et glider ind ved hover. */
.license-plate-add {
    gap: 0;
    /* Lysere/dæmpet border så add-varianten står svagere end en udfyldt plade. */
    border-color: var(--bmg-border-muted);
    color: rgba(var(--bmg-font-rgb), .5);
    background: transparent;
    transition: gap .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* Bilikonet på tilføj-knappen er lysere end på en udfyldt plade. */
.license-plate-add i {
    color: rgba(var(--bmg-font-rgb), .4);
    transition: color .15s ease;
}

.license-plate-add:hover,
.license-plate-add:focus-visible {
    gap: .35rem;
    color: rgb(var(--bmg-font-rgb));
}

.license-plate-add:hover i,
.license-plate-add:focus-visible i {
    color: rgb(var(--bmg-font-rgb));
}

/* Handlings-ikon (redigér-pen på udfyldt plade, plus på tom): skjult i hvile,
   glider ind ved hover/fokus. */
.license-plate-edit-icon,
.license-plate-add-icon {
    font-size: .7em;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .15s ease, opacity .15s ease, margin-left .15s ease;
}

.license-plate-edit:hover .license-plate-edit-icon,
.license-plate-edit:focus-visible .license-plate-edit-icon,
.license-plate-add:hover .license-plate-add-icon,
.license-plate-add:focus-visible .license-plate-add-icon {
    max-width: 1em;
    opacity: .7;
    margin-left: .1rem;
}

/* =====================================================
   07. COMPONENTS – VISITOR CARD BODY
===================================================== */

.card-body-section-title {
    margin-top: 2rem;
    margin-bottom: 1rem;

    font-size: .75rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    text-transform: uppercase;

    color: rgba(var(--bmg-text-muted-rgb), 1) !important;
}

/* =====================================================
   07. COMPONENTS – VISITOR PERSON AREA
===================================================== */

/* "Rediger gæst" ligger i forlængelse af vCard og arver hele sit udseende fra
   .chip-outline – her kun interaktion og hover-visning. Knappen er skjult i
   hvile og fader ind når man er over personen (samme idé som .card-body-edit
   på mødet). Bredden animeres med, så den ikke reserverer plads i hvile.
   Knappen var en overgang slået fra, fordi navne-rækken var for smal og
   chippen wrappede til ny linje. Rækken er siden blevet bredere (458px mod
   ~393px), og markup'en er aktiv igen. */
/* Chippene (vCard, Rediger, Afbud) er permanent synlige og ligger på egen
   række under navnet. De var før foldet ud ved hover på person-layoutet;
   det skjulte handlinger og fik rækken til at hoppe, når de kom til syne. */
.card-body-guest-edit {
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
    /* Ingen transition: hverken ind-/udfoldning eller klik-animation. */
    transition: none;
}

.card-body-guest-edit:hover,
.card-body-guest-edit:focus-visible {
    color: rgb(var(--bmg-font-rgb));
    border-color: rgb(var(--bmg-secondary-rgb));
    background: var(--bmg-white);
}

/* Ingen klik-animation på nogen af chippene: .chip-outline arver en
   transform/box-shadow fra knap-stilen, som gav et lille "tryk". */
.card-body-chips .chip-outline,
.card-body-chips .chip-outline:active,
.card-body-chips .chip-outline:focus {
    transform: none;
    box-shadow: none;
    transition: none;
}

/* Egen række under navnet. */
.card-body-chips {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

/* Status-chips i modalernes gæstelister ("Klar", "3 udlån", "Betingelser
   mangler"). Erstatter Bootstraps badge rounded-pill + bg-*-subtle, som gav
   tre forskellige klassekombinationer for samme slags mærkat.

   Fladt udtryk: ingen ramme, ingen skygge – kun en let tonet flade i
   tilstandens egen farve. Farven bæres af --chip-rgb, så en ny tilstand kun
   kræver én linje. Samme geometri og typografi som .chip-outline, så de to
   familier ser ud af samme hus. */
.status-chip {
    --chip-rgb: var(--bmg-secondary-rgb);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    padding: .25rem .6rem;
    border-radius: .7rem;
    background: rgba(var(--chip-rgb), .12);
    color: rgb(var(--chip-rgb));
    font-size: .8rem;
    font-weight: 530;
    font-variation-settings: "wght" 600;
    white-space: nowrap;
}

.status-chip i {
    font-size: .85em;
    /* .card sætter en hvid text-shadow, der arves og gør ikonet grødet. */
    text-shadow: none;
}

.status-chip.is-success {
    --chip-rgb: var(--bmg-success-rgb);
}

.status-chip.is-warning {
    /* Gul på lys flade er svær at læse, så teksten holdes mørk og kun
       fladen tones. */
    --chip-rgb: var(--bmg-warning-rgb);
    background: rgba(var(--bmg-warning-rgb), .22);
    color: rgb(var(--bmg-font-rgb));
}

.status-chip.is-danger {
    --chip-rgb: var(--bmg-danger-rgb);
}

/* Grønt flueben yderst i gæsterækken i check-ind-modalen: betingelserne er
   accepteret. Cirklen er dæmpet, så listen ikke bliver en række grønne
   prikker – det er fraværet (det gule badge) man skal opdage. */
/* Afbud deler hover-mekanikken med Rediger (samme klasse), men markerer et
   frafald og får derfor en rød tone. Kun farverne sættes her – bredde,
   opacity og transition arves. */
.card-body-guest-noshow,
.card-body-guest-noshow i {
    color: rgb(var(--bmg-danger-rgb));
}

.card-body-guest-noshow:hover,
.card-body-guest-noshow:focus-visible,
.card-body-guest-noshow:hover i,
.card-body-guest-noshow:focus-visible i {
    color: rgb(var(--bmg-danger-rgb));
    border-color: rgb(var(--bmg-danger-rgb));
    background: var(--bmg-white);
    box-shadow: 0 4px 10px rgba(var(--bmg-danger-rgb), .15);
}

/* Skillelinje mellem gæsteliste og vært – kun når de to står side om side.
   Under xl stables kolonnerne, og en lodret streg ville hænge løst. */
@media (min-width: 1200px) {
    .border-start-xl {
        border-left: 1px solid var(--bmg-border-subtle);
    }
}

/* Gæstetype under navnet. Samme etiket-design som .meeting-host-badge, så de
   to badges i kortet er visuelt beslægtede. align-self holder bredden nede,
   da elementet sidder i en flex-kolonne. */
.card-body-guest-type {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .35rem;
    padding: .25rem .5rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: rgba(var(--bmg-active-rgb), 1);
    color: rgba(var(--bmg-font-rgb), 1);
    font-size: .55rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Online-deltager: dæmpet tekst frem for opacity-50, så baggrunde og
   borders beholder deres kontrast og kun farven ændres.

   Efterkommer-selektoren er nødvendig: chip, links og ikoner sætter selv
   color, så de arver ikke fra wrapperen. Under opacity-50 blev de dæmpet
   med, og det skal de blive ved med. */
.card-body-person-online,
.card-body-person-online .card-body-person-online,
.card-body-person-online *,
.card-body-person-online .text-muted,
.card-body-person-online .text-body-secondary {
    color: rgba(var(--bmg-text-muted-rgb), .7) !important;
}

/* vCard-chippen er en handling, ikke information om gæsten, og skal se ens
   ud uanset om gæsten er online. Den arver ellers dæmpningen ovenfor via
   `.card-body-person-online *`. `revert` ville lande på arv fra den dæmpede
   forælder, så farverne sættes eksplicit tilbage. */
.card-body-person-online .card-body-vcard {
    color: rgb(var(--bmg-font-rgb)) !important;
}

.card-body-person-online .card-body-vcard span {
    color: rgb(var(--bmg-font-rgb)) !important;
}

.card-body-person-online .card-body-vcard i {
    color: rgba(var(--bmg-text-muted-rgb), 1) !important;
}

.card-body-person-layout .avatar-circle {
    flex-shrink: 0;
}

.card-body-person-layout .avatar-circle img {
    object-fit: cover;
}

/* Online-deltager: kamera-badge nederst til højre på avataren. */
.avatar-online-badge {
position: absolute;
right: -4px;
bottom: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #fff;
color: rgb(var(--bmg-secondary-rgb));
font-size: .7rem;
transform: scale(.9);
border: thin solid var(--bs-border-color);
/* Over .avatar-circle::before-glansen, som også er z-index 1 og ellers
   vinder på dokumentrækkefølge. */
z-index: 2;
}

/* text-shadow nulstilles på alle avatar- og status-elementer: .card sætter
   en hvid skygge, og text-shadow ARVES – så den lander på ikoner og
   initialer og giver en udvasket kant på farvet baggrund.

   Både elementet og dets <i> skal nævnes: ikonet arver ellers videre. */
.avatar-online-badge[class*="attendance-"],
.avatar-online-badge[class*="attendance-"] i,
.avatar-initials,
.card-body-guest-preview-badge,
.card-body-guest-preview-badge i,
.card-header-time-indicator,
.card-header-time-indicator i {
    text-shadow: none;
}

/* Statusfarver pr. tilstand i mødeoversigten. Badgen bruges til alle fire
   tilstande (forhåndsregistreret / indregistreret / udregistreret /
   online), ikke kun online. */

/* Forhåndsregistreret er "endnu ikke sket" og beholder derfor basis-udtrykket:
   farvet ikon på hvid baggrund. Er kortet markeret danger/warning, følger
   badgen den markering, så hastesagen er tydelig hele vejen igennem. */
.avatar-online-badge.attendance-pending {
    color: rgb(var(--bmg-secondary-rgb));
    background-color: var(--bmg-white);
}

.priority-danger .avatar-online-badge.attendance-pending {
    color: var(--bmg-white);
    background-color: rgb(var(--bmg-danger-rgb));
}

/* Rød puls som .avatar-offline – gæsten er ventet og ikke dukket op.
   Basis-badgen har ingen ::after (den er scopet til attendance-online),
   så ringen tegnes her. */
.priority-danger .avatar-online-badge.attendance-pending::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(var(--bmg-danger-rgb), .20);
    animation: avatarPulseRed 2.2s infinite;
    pointer-events: none;
}

.priority-warning .avatar-online-badge.attendance-pending {
    color: var(--bmg-white);
    background-color: rgb(var(--bmg-warning-rgb));
}

/* Indregistreret og udregistreret er tilstande der ER indtruffet, og fylder
   derfor mere: hvidt ikon på farvet baggrund. */
.avatar-online-badge.attendance-in {
    color: var(--bmg-white);
    background-color: rgb(var(--bmg-success-rgb));
}

.avatar-online-badge.attendance-out {
    color: var(--bmg-white);
    background-color: rgba(var(--bmg-text-muted-rgb), .8);
}

/* Online beholder basis-udtrykket: farvet ikon på hvid baggrund. */
.avatar-online-badge.attendance-online {
    color: rgb(var(--bmg-primary-rgb));
    background-color: var(--bmg-white);
}

/* Pulserende mørk ring via ::after – som .avatar-offline men mørk i stedet for rød.
   Kun for online: en udregistreret gæst skal ikke pulse som om noget er live. */
.avatar-online-badge.attendance-online::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(var(--bmg-font-rgb), .20);
    animation: avatarPulseDark 2.2s infinite;
    pointer-events: none;
}

@keyframes avatarPulseDark {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bmg-font-rgb), .35);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(var(--bmg-font-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--bmg-font-rgb), 0);
    }
}

/* vCard-download – inline efter navn/plade i gæste-rækken, så den ikke øger
   rækkens højde. Kompakt pille; download-pilen glider ind ved hover (samme
   sprog som license-plate/add-guest). */
.card-body-vcard {
    /* Form + typografi arves fra .chip-outline; her kun interaktion. */
    justify-content: center;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.card-body-vcard:hover,
.card-body-vcard:focus-visible {
    color: rgb(var(--bmg-font-rgb));
    border-color: rgb(var(--bmg-secondary-rgb));
    background: var(--bmg-white);
    box-shadow: 0 4px 10px rgba(var(--bmg-primary-rgb), .1);
}

/* Download-pil skjult i hvile; glider ind ved hover og skubber vCard-ikonet. */
.card-body-vcard-dl {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    font-size: .85em;
    transition: max-width .15s ease, opacity .15s ease, margin-right .15s ease;
}

.card-body-vcard:hover .card-body-vcard-dl,
.card-body-vcard:focus-visible .card-body-vcard-dl {
    max-width: 1em;
    opacity: 1;
    margin-right: .1rem;
}

/* Under sm er der ingen hover at bygge på (touch), og animationen ville
   blot udvide chippen og skubbe rækken. Pilen holdes helt væk her. */
@media (max-width: 575.98px) {
    .card-body-vcard-dl {
        display: none;
    }

    .card-body-vcard:hover .card-body-vcard-dl,
    .card-body-vcard:focus-visible .card-body-vcard-dl {
        max-width: 0;
        opacity: 0;
        margin-right: 0;
    }
}

/* =====================================================
   07. COMPONENTS – VISITOR CARD GRID
===================================================== */

.card-body-card-grid .col-xl-4 {
    display: flex;
    flex-direction: column;
}

.card-body-card-grid .col-xl-4>.d-flex:nth-child(2) {
    /*min-height: 90px;
    justify-content: flex-end;*/
}

/* =====================================================
   07. COMPONENTS – VISITOR DETAIL CARDS
===================================================== */

.card-open .row.g-4 {
    align-items: stretch;
}

.card-open .row.g-4>[class*="col-"] {
    display: flex;
    flex-direction: column;
}

.card-body-details-card,
.card-body-host-card {
    flex: 1 1 auto;

    padding: 1.25rem;

    font-size: .85rem;

    background: rgba(var(--bs-light-rgb), .35);

    border: 1px solid var(--bmg-border-subtle);
    border-radius: 1rem;
}

/* Forplejnings-opsummering. Genbruger .card-body-host-card som ramme, så
   de to bokse under hinanden ser ens ud. */
/* "Booket via": bookingkilden som en dæmpet chip. Teksten er lidt mindre
   end rækkens, så chippens samlede højde (tekst + padding + border) matcher
   de øvrige rækkers linjehøjde og tabellen ikke hopper. */
.booking-source {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .5rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .4rem;
    background: rgba(var(--bs-light-rgb), .5);
    font-size: .85em;
    line-height: 1.3;
    white-space: nowrap;
}

.card-body-catering-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.card-body-catering-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(var(--bmg-font-rgb), .06);
}

.card-body-catering-list li:first-child {
    padding-top: 0;
}

.card-body-catering-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.card-body-catering-name {
    flex-grow: 1;
    min-width: 0;
    font-weight: 500;
    font-variation-settings: "wght" 530;
}

/* Antallet holdes til højre og skal ikke klemmes af lange navne. */
.card-body-catering-qty {
    flex-shrink: 0;
    color: rgba(var(--bmg-text-muted-rgb), 1);
    font-variant-numeric: tabular-nums;
}

/* "Kontakt vært" under værtens oplysninger. Skilt fra teksten med en fin
   streg, så kortet stadig læses som ét hele. */
.card-body-host-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Dæmpet gråt ikon – knappen er en sekundær handling i værtskortet.
   .check-action-btn reserverer 150px + plads til et højre-ikon; her er hverken
   det ene eller det andet nødvendigt, så bredden får lov at følge teksten. */
.card-body-host-contact-icon {
    color:rgba(var(--bmg-text-muted-rgb), 1);
}

.card-body-host-actions .check-action-btn {
  width: auto;
padding-right: 1rem !important;
font-variation-settings: "wght" 700;
font-weight: 600;
box-shadow: none;
border: thin solid var(--bs-border-color);
}

/* =====================================================
   07. COMPONENTS – VISIT INFORMATION
===================================================== */

.card-body-info-table {
    width: 100%;
    font-size: .85rem;
}

.card-body-info-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);

    gap: 1rem;

    padding: .5rem 0;

    border-bottom: 1px solid var(--bmg-border-subtle);
}

.card-body-info-row:last-child {
    border-bottom: 0;
}

/* Under 1200px staar "Om besøg" i fuld bredde, men den faste 180px
   label-kolonne aeder pladsen fra vaerdien (ved 500px blev der kun 187px
   tilbage). Rækkerne stables derfor i stedet.

   Reglen laa tidligere i sektion 02 og havde ingen effekt: samme
   specificitet som base-reglen her i 08, og filraekkefoelgen afgjorde. */
@media (max-width: 1199.98px) {
    .card-body-info-row {
        grid-template-columns: minmax(0, 1fr);
        gap: .15rem;
        padding: .6rem 0;
    }
}

.card-body-info-label {
    display: flex;
    align-items: center;
    gap: .75rem;

    font-weight: 500;
    color: var(--bs-secondary-color);
}

.card-body-info-label i {
    width: 18px;
    text-align: center;
}

.section-stat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 28px;
    height: 28px;
    padding: 0 .7rem;
    border-radius: var(--bmg-pill-radius);
    background: rgba(var(--bmg-font-rgb), .15);
    color: rgb(var(--bmg-font-rgb));
    font-size: 1rem;
    font-weight: 700;
    font-variation-settings: "wght" 800;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ordet efter tallet (fx "på vej") er mindre end selve tallet. */
.section-stat-word {
    font-size: 10px;
}

/* =====================================================
   07. COMPONENTS – CHECK IN / OUT STATUS
===================================================== */

.check-status-icon {
    width: 48px;
    height: 48px;
}

.check-status-icon i {
    font-size: var(--bmg-icon-size-lg) !important;
    line-height: 1;
}

.check-status-icon.success {
    color: rgba(var(--bmg-success-rgb), 1);
    background: rgba(var(--bmg-success-rgb), .15);
}

.check-status-icon.danger {
    color: rgba(var(--bmg-danger-rgb), 1);
    background: rgba(var(--bmg-danger-rgb), .12);
}

.check-status-icon.pending {
    color: rgba(var(--bmg-secondary-rgb), .75);
    background: rgba(var(--bmg-secondary-rgb), .12);
}

.check-status-time {
    min-width: 68px;
    text-align: right;
}

.check-status-time.pending {
    color: rgba(var(--bmg-secondary-rgb), .75);
}

/* =====================================================
   07. COMPONENTS – RIG TOOLTIP

   Tooltip med ikon, overskrift og valgfri brødtekst. Slås til pr. element
   med data-tip-title/-text/-icon (se generic.js). Almindelige tekst-
   tooltips er urørte.
===================================================== */

.tip-rich-tooltip {
    --bs-tooltip-max-width: 225px;
    --bs-tooltip-bg: rgb(var(--bmg-font-rgb));
    --bs-tooltip-opacity: 1;
    --bs-tooltip-padding-x: 0;
    --bs-tooltip-padding-y: 0;
    --bs-tooltip-border-radius: .7rem;
}

.tip-rich-tooltip .tooltip-inner {
    max-width: none;
    padding: .6rem .75rem;
    border-radius: var(--bs-tooltip-border-radius);
    text-align: left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

.tip-rich {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.tip-rich-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(var(--bmg-white-rgb), .12);
    color: rgba(var(--bmg-white-rgb), .9);
    font-size: .65rem;
}

.tip-rich-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.tip-rich-title {
    color: var(--bmg-white);
    font-size: .8rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    line-height: 1.3;
}

.tip-rich-text {
    color: rgba(var(--bmg-white-rgb), .7);
    font-size: .7rem;
    font-weight: 400;
    font-variation-settings: "wght" 450;
    line-height: 1.4;
}

/* =====================================================
   07. COMPONENTS – CHAT MESSAGE LAYOUT
===================================================== */

.chat-msg {
    max-width: 75%;
    margin-bottom: .5rem;
    margin-bottom: 0.25rem;
    display: flex;
}

.chat-left {
    align-self: flex-start;
    flex-direction: row;
}

.chat-right {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* =====================================================
   07. COMPONENTS – CHAT BUBBLES
===================================================== */

.chat-bubble {
    font-size: 0.875rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.6rem;
    background: #f1f3f5;
    text-shadow: none;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Right (current user) */
.chat-right .chat-bubble {
    background: rgba(var(--bmg-primary-rgb), 1);
    color: #fff;
    border-top-right-radius: 0.25rem;
}

/* Left (others) */
.chat-left .chat-bubble {
    border-top-left-radius: 0.25rem;
}

.chat-meta {
    margin: 2px 0 0 6px;
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Elementerne bærer også Bootstraps .small-utility (.875em). Utilities ligger
   sidst i filen og vinder ved samme specificitet, så skriftstørrelsen scopes
   til beskeden for at bevare 0.7rem. Samme greb som .chat-preview .chat-meta. */
.chat-msg .chat-meta {
    font-size: 0.7rem;
}

/* =====================================================
   07. COMPONENTS – CHAT THREAD
===================================================== */

.chat-thread {
    max-height: 100px;
    /* collapsed height */
    overflow: hidden;
    position: relative;
    padding-right: 4px;
    padding-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overscroll-behavior-y: contain;
}

/* Expanded state */
.card.editing .chat-thread {
    max-height: 260px;
    overflow-y: auto;
}

/* =====================================================
   07. COMPONENTS – CHAT SCROLL FADES
===================================================== */

.chat-thread::before,
.chat-thread::after {
    content: "";
    position: sticky;
    left: 0;
    right: 0;
    height: 12px;
    z-index: 2;
    pointer-events: none;
}

/* Hide fade when expanded */
.card.editing .chat-thread::before,
.card.editing .chat-thread::after {
    display: none;
}

/* Top fade */
.chat-thread::before {
    top: 0;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
}



.card:hover .chat-thread::after {
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1));
}

/* =====================================================
   07. COMPONENTS – CHAT INPUT
===================================================== */

.chat-input {
    display: none;
    /* hidden by default */
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 0.5rem;
}

.card.editing .chat-input {
    display: block;
}

/* .chat-input .form-control, dens :focus og .chat-input .btn deklareres i
   06. OVERLAYS – CHAT MODAL. De blev tidligere gentaget her: form-control
   med identiske værdier, .btn med andre. Hvem der vandt afhang udelukkende
   af blokkenes rækkefølge i filen, så duplikaterne er fjernet. */

/* =====================================================
   07. COMPONENTS – EXECUTOR INCIDENT FLOW
===================================================== */

.incident-step-card {
    overflow: hidden;
    border-radius: 1.25rem;
}

.incident-step-card .card-body {
    min-height: inherit;
    display: flex;
    flex-direction: column;
}

#incidentStepsCarousel,
#incidentStepsCarousel .carousel-inner,
#incidentStepsCarousel .carousel-item {
    flex: 1 1 auto;
    min-height: inherit;
}

#incidentStepsCarousel .carousel-item>div {
    display: flex;
    flex-direction: column;
    min-height: inherit;
    height: 100%;
}

.incident-progress {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.incident-progress-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(var(--bs-secondary-rgb), .08);
    font-weight: 600;
    font-variation-settings: "wght" 700 !important;
    gap: .2rem;
}

.incident-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.incident-category-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 85%;
    padding: .875rem 1rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 1rem;
    background: #fff;
    color: var(--bs-body-color);
    font-weight: 600;
    font-variation-settings: "wght" 700 !important;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.incident-category-option i {
    width: 24px;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 1.05rem;
}

.btn-check:checked+.incident-category-option {
    border-color: rgba(var(--bmg-active-rgb), 1);
    background: rgba(var(--bmg-active-rgb), 1);
    box-shadow: none;
}

.btn-check:checked+.incident-category-option i {}

#incidentRoom {
    min-height: 58px;
}

.incident-description-input {
    min-height: 130px;
    resize: vertical;
}

.form-floating>.incident-description-input.form-control {
    height: auto;
    min-height: 130px;
}

.incident-step-header {
    max-width: 520px;
    margin-inline: auto;
}
.incident-step-icon-sm, .incident-step-icon-xs{

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--bmg-active-rgb), 1);
    color: rgba(var(--bmg-font-rgb), 1);
}
.incident-step-icon-sm {
    width: 120px;
    height: 120px;

    font-size: 3rem;
}
.incident-step-icon-xs {
       width: 35px;
    height: 35px;
     font-size: 1rem;
 }

.incident-step-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.incident-step-description {
    font-size: 1.25rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

.incident-divider {
    opacity: .08;
}

.incident-step-actions {
    margin-top: auto;
    padding-top: 2rem;
}

@media (max-width: 575.98px) {
    .incident-step-card {
        min-height: calc(100dvh - 155px);
    }

    .incident-step-icon-sm {
        width: 96px;
        height: 96px;
        font-size: 2.5rem;
    }

    .incident-step-title {
        font-size: 1.8rem;
    }

    .incident-step-description {
        font-size: 1.1rem;
    }
}

/* =====================================================
   08. CONTROLS – VIEW TOGGLE
===================================================== */

.card-view,
.calendar-view {
    transition: opacity .2s ease;
}

/* skjul helt */
body[data-view="list"] .calendar-view {
    display: none;
}

body[data-view="calendar"] .card-view {
    display: none;
}

/* =====================================================
   08. CONTROLS – BUTTONS
===================================================== */
.view-toggle .btn {
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.view-toggle .btn {
    min-width: 160px;
}

@media (max-width: 575.98px) {
    .view-toggle .btn {
        min-width: 100px;
    }
}



.btn {
    font-weight: 500;
    font-variation-settings: "wght" 530;
    text-align: center;
}
.btn.w-50,.btn.w-100{display: inline !important;}
.btn-white {
    border: 1px solid var(--bmg-white);
    background: var(--bmg-white);
    color: rgb(var(--bmg-font-rgb));
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .6rem .8rem;
    border-radius: var(--bmg-control-radius);
    line-height: 1rem;
    white-space: nowrap;
    /* Only the properties that actually change on hover/active – lets the
       browser optimise instead of watching every property. */
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
    box-shadow: var(--bmg-shadow-control);
    margin-left: 0 !important;
}

.btn-white i,
.btn i {
    line-height: 1;
}

.btn-white.sm,
.btn.sm {
    font-size: .875rem;
    min-height: var(--bmg-btn-height-sm);
    padding: .75rem .9rem;
}

.btn-white.xs,
.btn.xs {
    font-size: .8rem;
    min-height: var(--bmg-btn-height-xs);
    padding: .45rem .7rem;
}

.btn-white:hover,
.btn-white:active {
    transform: translateY(-0.5px);
    background-color: var(--bmg-white) !important;
    box-shadow: var(--bmg-shadow-control-hover);

}

.btn-white.active,
.btn-check:checked+.btn-white {
    background-color: rgb(var(--bmg-bg-dark-rgb)) !important;
    border-color: rgb(var(--bmg-bg-dark-rgb)) !important;
    color: var(--bmg-white) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, .15),
        0 2px 6px rgba(0, 0, 0, .15);
}

.btn-white:active {
    transform: translateY(0);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1);
}

.btn-white .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    background-color: rgb(var(--bmg-bg-dark-rgb));
}

.btn-white.active .dot {
    background-color: var(--bmg-white);
}

/* =====================================================
   FARVEDE KNAPPER – samme geometri som .btn-white,
   men med danger/warning/success-farver fra :root.
===================================================== */

/* ---------- DANGER ---------- */
.btn-danger {
    border: 1px solid var(--bmg-danger);
    background: var(--bmg-danger);
    color: var(--bmg-white);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .6rem .8rem;
    border-radius: var(--bmg-control-radius);
    line-height: 1rem;
    white-space: nowrap;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
    box-shadow: var(--bmg-shadow-control-soft);
    margin-left: 0 !important;
}

.btn-danger i {
    line-height: 1;
}

.btn-danger.sm {
    font-size: .875rem;
    min-height: var(--bmg-btn-height-sm);
    padding: .75rem .9rem;
}

.btn-danger.xs {
    font-size: .8rem;
    min-height: var(--bmg-btn-height-xs);
    padding: .45rem .7rem;
}

.btn-danger:hover,
.btn-danger:active {
    transform: translateY(-0.5px);
    background-color: var(--bmg-danger) !important;
    border-color: var(--bmg-danger);
    color: var(--bmg-white) !important;
    box-shadow: var(--bmg-shadow-control-hover);
}

.btn-danger.active,
.btn-check:checked+.btn-danger {
    background-color: color-mix(in srgb, var(--bmg-danger) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--bmg-danger) 82%, #000) !important;
    color: var(--bmg-white) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, .15),
        0 2px 6px rgba(0, 0, 0, .15);
}

.btn-danger:active {
    transform: translateY(0);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1);
}

.btn-danger .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    background-color: var(--bmg-white);
}

/* ---------- WARNING ---------- */
.btn-warning {
    border: 1px solid var(--bmg-warning);
    background: var(--bmg-warning);
    color: rgb(var(--bmg-font-rgb));
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .6rem .8rem;
    border-radius: var(--bmg-control-radius);
    line-height: 1rem;
    white-space: nowrap;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
    box-shadow: var(--bmg-shadow-control-soft);
    margin-left: 0 !important;
}

.btn-warning i {
    line-height: 1;
}

.btn-warning.sm {
    font-size: .875rem;
    min-height: var(--bmg-btn-height-sm);
    padding: .75rem .9rem;
}

.btn-warning.xs {
    font-size: .8rem;
    min-height: var(--bmg-btn-height-xs);
    padding: .45rem .7rem;
}

.btn-warning:hover,
.btn-warning:active {
    transform: translateY(-0.5px);
    background-color: var(--bmg-warning) !important;
    border-color: var(--bmg-warning);
    color: rgb(var(--bmg-font-rgb)) !important;
}

.btn-warning.active,
.btn-check:checked+.btn-warning {
    background-color: color-mix(in srgb, var(--bmg-warning) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--bmg-warning) 82%, #000) !important;
    color: rgb(var(--bmg-font-rgb)) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, .15),
        0 2px 6px rgba(0, 0, 0, .15);
}

.btn-warning:active {
    transform: translateY(0);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1);
}

.btn-warning .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    background-color: rgb(var(--bmg-bg-dark-rgb));
}

/* ---------- SUCCESS ---------- */
.btn-success {
    border: 1px solid var(--bmg-success);
    background: var(--bmg-success);
    color: var(--bmg-white);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .6rem .8rem;
    border-radius: var(--bmg-control-radius);
    line-height: 1rem;
    white-space: nowrap;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
    margin-left: 0 !important;
}

.btn-success i {
    line-height: 1;
}

.btn-success.sm {
    font-size: .875rem;
    min-height: var(--bmg-btn-height-sm);
    padding: .75rem .9rem;
}

.btn-success.xs {
    font-size: .8rem;
    min-height: var(--bmg-btn-height-xs);
    padding: .45rem .7rem;
}

.btn-success:hover,
.btn-success:active {
    transform: translateY(-0.5px);
    background-color: var(--bmg-success) !important;
    border-color: var(--bmg-success);
    color: var(--bmg-white) !important;
}

.btn-success.active,
.btn-check:checked+.btn-success {
    background-color: color-mix(in srgb, var(--bmg-success) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--bmg-success) 82%, #000) !important;
    color: var(--bmg-white) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, .15),
        0 2px 6px rgba(0, 0, 0, .15);
}

.btn-success:active {
    transform: translateY(0);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1);
}

.btn-success .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    background-color: var(--bmg-white);
}

.view-toggle.btn-group>.btn-white {
    border-radius: 0;

}

.view-toggle.btn-group>.btn {
    border-radius: 0;

}

.view-toggle.btn-group>.btn:first-child {
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;

}

.view-toggle.btn-group>.btn:last-child {
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;

}

/* --- Combined solid/outline dark blue button styles --- */
.btn-dark-blue,
.btn-outline-dark-blue {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .8rem;
    border-radius: 1.5rem;
    line-height: 1rem;
    white-space: nowrap;

    border-width: thin;
    border-width: .01rem;

    padding: .8rem 1.2rem;
    font-weight: 500;
    font-variation-settings: "wght" 530;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.btn-dark-blue {
    color: #fff;
    background-color: rgb(44, 62, 80);
    border-color: rgb(44, 62, 80);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 2px 4px rgba(0, 0, 0, .12);
}

.btn-outline-dark-blue {
    color: rgb(44, 62, 80);
    background-color: transparent;
    border-color: rgb(44, 62, 80);
    text-shadow: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        0 1px 2px rgba(0, 0, 0, .04);
}

.btn-dark-blue:hover,
.btn-dark-blue:focus,
.btn-dark-blue.focus,
.btn-outline-dark-blue:hover,
.btn-outline-dark-blue:focus,
.btn-outline-dark-blue.focus {
    color: #fff;
    background-color: #3b5782;
    border-color: #3a5580;
}

.btn-dark-blue:focus,
.btn-dark-blue.focus,
.btn-outline-dark-blue:focus,
.btn-outline-dark-blue.focus {
    box-shadow: 0 0 0 .25rem rgba(44, 62, 80, .25);
}

.btn-dark-blue:active,
.btn-dark-blue.active,
.show>.btn-dark-blue.dropdown-toggle,
.btn-outline-dark-blue:active,
.btn-outline-dark-blue.active,
.show>.btn-outline-dark-blue.dropdown-toggle {
    color: #fff !important;
    background-color: #3b6e82 !important;
    border-color: #38697c !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.btn-dark-blue:active:focus,
.btn-dark-blue.active:focus,
.btn-outline-dark-blue:active:focus,
.btn-outline-dark-blue.active:focus {
    box-shadow:
        inset 0 3px 5px rgba(0, 0, 0, .125),
        0 0 0 .25rem rgba(44, 62, 80, .25);
}

.btn-dark-blue:disabled,
.btn-dark-blue.disabled,
.btn-outline-dark-blue:disabled,
.btn-outline-dark-blue.disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-dark-blue:disabled,
.btn-dark-blue.disabled {
    color: #fff;
    background-color: rgb(44, 62, 80);
    border-color: rgb(44, 62, 80);
}

.btn-outline-dark-blue:disabled,
.btn-outline-dark-blue.disabled {
    color: rgb(44, 62, 80);
    background-color: transparent;
    border-color: rgb(44, 62, 80);
}

.btn-high {
    min-height: 56px;
}

.btn-truncate {
    min-width: 0;
}

.btn-truncate span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================
   08. CONTROLS – BADGES & PILLS
===================================================== */

.badge {
    position: relative;
    color: rgb(var(--bmg-font-rgb));
    background: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
    font-size: .7em;
    font-weight: 600 !important;
    font-variation-settings: "wght" 700;
    gap: .5rem !important;
    padding: .65em .95em;
    border-radius: var(--bmg-pill-radius);
    line-height: 1;
    box-shadow:
        /*inset 0 5px 5px rgba(255, 255, 255, .005),
        inset 0px 0px 1px 0px rgba(0, 0, 0, .2),*/
        inset 0 -3px 0 rgba(var(--bmg-font-rgb), .02),
        0 2px 4px rgba(var(--bmg-primary-rgb), .02),
        0 1px 1.5px rgba(0, 0, 0, 0.2),
        0 0px 1px rgba(0, 0, 0, .1);
    text-shadow: 0px 1px 0 rgba(var(--bmg-surface-rgb), .2);
}

.badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(rgba(var(--bmg-surface-rgb), .2),
            rgba(var(--bmg-surface-rgb), 0) 80%);
    pointer-events: none;
}

.badge.small {
    --bs-badge-padding-y: 0.25em;
    font-size: .685rem;
    line-height: 1.3;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
}

.badge.smaller {
    --bs-badge-padding-y: 0.25em;
    font-size: .485rem;
    line-height: 1.25;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
}

.badge.equal-padding {
    padding: .65em .85em;
}

.badge-soft {
    background: rgba(var(--bmg-primary-rgb), .10);
    color: var(--bmg-primary);
    font-weight: 600;
}

.badge.primary {
    color: var(--bmg-white);
    background: var(--bmg-primary);
    text-shadow: 0px 1px 0 rgba(var(--bmg-font-rgb), 1);
}

.badge.secondary {
    color: var(--bmg-white);
    background: var(--bmg-secondary);
    text-shadow: 0px 1px 0 rgba(var(--bmg-font-rgb), 1);
}

.badge.tertiary {
    color: rgb(var(--bmg-font-rgb));
    background: var(--bmg-tertiary);
    text-shadow: 0px 1px 0 var(--bmg-white);
}

.badge.warning {
    color: var(--bmg-font);
    background: rgba(var(--bmg-warning-rgb), 1);
    text-shadow: 0px 1px 0 rgba(var(--bmg-surface-rgb), .4);
}

.badge.danger {
    color: var(--bmg-white);
    background: rgba(var(--bmg-danger-rgb), 1);
    text-shadow: 0px 1px 0 rgba(var(--bmg-surface-rgb), .4);
}

.badge.success {
    color: var(--bmg-white);
    background: rgba(var(--bmg-success-rgb), 1);
    text-shadow: 0px 1px 0 rgba(var(--bmg-surface-rgb), .4);
}

/*
  --bmg-font: #0b1219;
    --bmg-font-rgb: 11, 18, 25;--bmg-white: #fff;
    --bmg-white-rgb: 255, 255, 255;--bmg-primary: #2C3E50;
    --bmg-primary-rgb: 44, 62, 80;--bmg-secondary: #5E6E82;
    --bmg-secondary-rgb: 98, 112, 129;
*/



.badge.success {}

.badge-soft-danger {
    background: rgba(var(--bmg-danger-rgb), .10);
    color: var(--bmg-danger);
    border: 1px solid rgba(var(--bmg-danger-rgb), .18);
    font-weight: 700;
}

.badge-soft-warning {
    background: rgba(var(--bmg-warning-rgb), .16);
    color: color-mix(in srgb, var(--bmg-warning) 72%, var(--bmg-font));
    border: 1px solid rgba(var(--bmg-warning-rgb), .22);
    font-weight: 700;
}

.badge-soft-success {
    background: rgba(var(--bmg-success-rgb), .12);
    color: var(--bmg-success);
    border: 1px solid rgba(var(--bmg-success-rgb), .18);
    font-weight: 700;
}

.inner-badge {
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 600 !important;
    font-variation-settings: "wght" 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 1rem;
    text-shadow: none;

}

.inner-badge.transparent {
    /* background-color: rgba(255,255,255, 0.8);
box-shadow: rgba(255, 255, 255, 0.1) 0px -3px 6px inset, rgba(0, 0, 0, 0.1) 0px 1px 3px inset;
border: 1px solid rgba(0, 0, 0, 0.1);
text-shadow: 0px 1px 0 rgba(255, 255, 255, .4);*/

}

.incident-muted {
    color: rgba(33, 37, 41, .6);
}

/* =====================================================
   08. CONTROLS – TOOLBARS & SEARCH
===================================================== */


.incident-toolbar {
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: center;
    height: 65px;
    column-gap: 0rem;
}

/* Fjern gamle max-width regler */
.incident-toolbar-left,
.incident-toolbar-right {
    min-width: 0;
    max-width: none;
    padding-left: 0.7rem !important;
}

/* Sørg for at indholdet ikke bryder højden */
.incident-toolbar-left>*,
.incident-toolbar-right>* {
    height: 100%;
    display: flex;
    align-items: center;
}

.incident-toolbar-left {
    padding-left: 0.7rem !important;
}

/* Højre side align */
.incident-toolbar-right {
    display: flex;
    justify-content: flex-end;
    height: 35px;
    padding-right: 1rem !important;
}

.incident-toolbar-actions,
.card-toolbar-actions {
    align-items: stretch;
}

/* Mobil: toolbaren stables, og søgefelt + handlinger fylder fuld bredde. */
@media (max-width: 575.98px) {
    .card-toolbar-wrapper {
        width: 100%;
        gap: 0 !important;
        flex-direction: column;
    }

    .incident-search.smart-search {
        display: flex;
        width: 100%;
        min-width: 0;
    }

    .card-toolbar-actions {
        width: 100%;
    }

    .card-toolbar-actions > .dropdown {
        flex: 1 1 auto;
    }

    .card-toolbar-actions > .dropdown > .btn {
        width: 100%;
        justify-content: center;
    }
}

.card-toolbar-actions {
    display: flex;
}

/* Dropdown-menuen med sidestørrelser er smallere end knappen, den hænger
   under. En min-bredde holder den i flugt med knappen. */
.card-toolbar-actions .dropdown-menu {
    min-width: 130px;
}

.card-toolbar-actions .btn {
    font-size: .8rem;
}

.card-toolbar-actions>* {
    margin-left: -1px;
}

.card-toolbar-actions>*:first-child {
    margin-left: 0;
}

/* :not(.dropdown-menu *) holder reglerne på selve toolbar-knapperne – uden
   den arver knapper inde i dropdown-menuerne gruppens pille-radius. */
.card-toolbar-actions>*:first-child .btn:not(.dropdown-menu *),
.card-toolbar-actions>*:first-child input:not(.dropdown-menu *),
.card-toolbar-actions>*:first-child .form-control:not(.dropdown-menu *) {
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    ;
}

.card-toolbar-actions>*:not(:first-child) .btn:not(.dropdown-menu *),
.card-toolbar-actions>*:not(:first-child) .form-control:not(.dropdown-menu *) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.card-toolbar-actions>*:not(:last-child) .btn:not(.dropdown-menu *),
.card-toolbar-actions>*:not(:last-child) .form-control:not(.dropdown-menu *) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Når sidste handling (toggle-all-cards) skjules under lg, skal
   det nu synlige sidste element have afrundet højre side igen. */
@media (max-width: 991.98px) {
    .card-toolbar-actions:has(> .toggle-all-cards:last-child) > *:nth-last-child(2) .btn,
    .card-toolbar-actions:has(> .toggle-all-cards:last-child) > *:nth-last-child(2) .form-control,
    .card-toolbar-actions:has(> .toggle-all-cards:last-child) > .btn:nth-last-child(2) {
        border-top-right-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
    }
}

.visitor-toptools-group {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(var(--bmg-font-rgb), .08);
    border-radius: 999px;
}

.visitor-toptools-btn {
    width: auto;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    color: rgba(var(--bmg-font-rgb), .82);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: .95rem;
}

/* Skillelinjer og runde yderhjørner regnes ud fra gruppens direkte børn, så en
   knap pakket ind i en .dropdown-wrapper tæller som ét element. */
.visitor-toptools-group>*+* {
    border-left: 1px solid rgba(var(--bmg-font-rgb), .08);
}

.visitor-toptools-group>:first-child,
.visitor-toptools-group>:first-child>.visitor-toptools-btn {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.visitor-toptools-group>:last-child,
.visitor-toptools-group>:last-child>.visitor-toptools-btn {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.visitor-toptools-group>.visitor-toptools-btn:first-child,
.visitor-toptools-group>:first-child>.visitor-toptools-btn {
    padding-left: 16px;
}

.visitor-toptools-group>.visitor-toptools-btn:last-child,
.visitor-toptools-group>:last-child>.visitor-toptools-btn {
    padding-right: 16px;
}

.visitor-toptools-btn:hover,
.visitor-toptools-btn:focus-visible {
    color: rgb(var(--bmg-font-rgb));
    background: rgba(var(--bmg-secondary-rgb), .1);
}

/* Collapse-knappen markeres, når panelet den styrer er åbent.
   :not(.dropdown-toggle) holder print-dropdownen udenfor. */
.visitor-toptools-btn:not(.dropdown-toggle)[aria-expanded="true"] {
    color: rgb(var(--bmg-font-rgb));
    background: rgba(var(--bmg-secondary-rgb), .14);
}

/* Fælles caret for gruppens to udvidbare knapper (collapse + dropdown),
   tegnet som Bootstraps trekant. Den vender opad, når panelet er åbent. */
.visitor-toptools-btn.dropdown-toggle::after,
.visitor-toptools-btn.visitor-toptools-caret::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    opacity: .55;
    transition: transform .2s ease;
}

.visitor-toptools-btn[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {

    .visitor-toptools-btn.dropdown-toggle::after,
    .visitor-toptools-btn.visitor-toptools-caret::after {
        transition: none;
    }
}


/* =====================================================
   ARRIVAL CHART – ankomster kl. 08-19
===================================================== */
.arrival-chart {
    --arrival-plot-height: 150px;
    --arrival-bar-width: 14px;
}

.arrival-chart-weekdays {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin-bottom: 1.25rem;
}

.arrival-chart-weekday {
    padding: 0 0 .35rem;
    color: rgba(var(--bmg-font-rgb), .55);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: .8rem;
    font-weight: 500;
    font-variation-settings: "wght" 530;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .15s ease, border-color .15s ease;
}

.arrival-chart-weekday:hover {
    color: rgb(var(--bmg-font-rgb));
}

.arrival-chart-weekday.active {
    color: rgb(var(--bmg-font-rgb));
    border-bottom-color: rgb(var(--bmg-primary-rgb));
}

/* "Live"-labelen centreres over den aktuelle times søjle via inline left. */
.arrival-chart-live-row {
    position: relative;
    height: 1.5rem;
    margin-bottom: .75rem;
}

.arrival-chart-live {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    font-size: .95rem;
}

.arrival-chart-live-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: rgb(var(--bmg-danger-rgb));
    box-shadow: 0 0 0 3px rgba(var(--bmg-danger-rgb), .2);
}

.arrival-chart-live-label {
    color: rgb(var(--bmg-danger-rgb));
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

.arrival-chart-live-status {
    color: rgb(var(--bmg-font-rgb));
}

.arrival-chart-plot {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: end;
    gap: .25rem;
    height: var(--arrival-plot-height);
    padding-bottom: 1.5rem;
}

.arrival-chart-slot {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.arrival-chart-bar {
    position: relative;
    z-index: 1;
    width: var(--arrival-bar-width);
    min-height: 4px;
    border-radius: 999px;
    background: rgba(var(--bmg-secondary-rgb), .55);
    transition: background-color .15s ease;
}

.arrival-chart-slot:hover .arrival-chart-bar {
    background: rgba(var(--bmg-secondary-rgb), .8);
}

/* Den aktuelle time markeres og får en lodret ledelinje op til "Live".
   Linjen fylder hele søjlens spor; søjlen tegnes ovenpå via z-index. */
.arrival-chart-slot.is-now .arrival-chart-bar {
    background: rgb(var(--bmg-danger-rgb));
}

.arrival-chart-slot.is-now::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-.75rem - 1px);
    bottom: 0;
    width: 0;
    border-left: 1px dotted rgba(var(--bmg-font-rgb), .35);
}

/* Klokkeslættet under aksen – én label pr. time. */
.arrival-chart-hour {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(var(--bmg-font-rgb), .55);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .arrival-chart {
        --arrival-plot-height: 120px;
        --arrival-bar-width: 10px;
    }

    .arrival-chart-weekdays {
        gap: .9rem;
    }
}

.incident-search {
    min-width: 220px;
    height: 39px;
    display: inline-flex;
    align-items: center;

    gap: .4rem;
    padding: 0 .75rem;
    margin: -1px 0;
    color: rgb(var(--bmg-secondary-rgb));
    background: var(--bmg-white);
    border: none;
    border-right: 0;
    border-radius: 1.5rem;
    box-shadow:
        inset 0px 3px 4px rgba(65, 69, 88, 0.1),
        inset 0px 0px 4px rgba(0, 0, 0, 0.2) !important
}

.incident-search i {
    font-size: .85rem;
    color: rgba(var(--bmg-secondary-rgb), .75);
}

.incident-search .form-control {
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    font-size: .875rem;
    color: rgb(var(--bmg-font-rgb));
    box-shadow: none !important;
}

.incident-search .form-control:focus {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.incident-search .form-control::placeholder {
    color: rgba(var(--bmg-secondary-rgb), .75);
}

   .checkout-status {
        border-radius: 1rem;
        padding: 1.5rem;
        border: 1px solid transparent;
    }

    .checkout-status.success {
        background: rgba(var(--bs-success-rgb), .12);
        border-color: rgba(var(--bs-success-rgb), .18);
    }

    .checkout-status.warning {
        background: rgba(var(--bs-warning-rgb), .18);
        border-color: rgba(var(--bs-warning-rgb), .45);
    }

    .checkout-status-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1.5rem;
    }

    .checkout-status.success .checkout-status-icon {
        background: rgba(var(--bs-success-rgb), .15);
        color: rgba(var(--bs-success-rgb), 1);
    }

    .checkout-status.warning .checkout-status-icon {
        /* Ren gul på en lys gul flade giver for lav kontrast – ikonet
           forsvandt nærmest. Fladen tones kraftigere, og selve ikonet får
           tekstfarven, så det kan læses. */
        background: rgba(var(--bs-warning-rgb), .35);
        color: rgb(var(--bmg-font-rgb));
    }

    .loan-list .list-group-item {
        border-left: 0;
        border-right: 0;
        padding-inline: 0;
    }

    .loan-list .list-group-item:first-child {
        border-top: 0;
    }

    .loan-list i {
        width: 22px;
        text-align: center;
        color: var(--bs-secondary-color);
    }

    #loanCheckoutBtn:disabled {
        opacity: .55;
        pointer-events: none;
    }

/* =====================================================
   08. CONTROLS – PROGRESS
===================================================== */
.progress-bar {
    width: 0%;
    transition: width .6s ease;
}

@keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem;
    }
}

.progress {
    background: rgba(0, 0, 0, .1) !important;
}

.progress-bar {
    background-color: rgba(var(--bmg-bg-dark-rgb), .72);
}

/* =====================================================
   08. CONTROLS – COLLAPSE TOGGLE
===================================================== */
.collapse-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

.collapse-toggle-btn {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.collapse-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.collapse-toggle-btn .icon-minus {
    display: none;
}

/* når åben */
.collapse.show+.collapse-toggle-wrapper .icon-plus {
    display: none;
}

.collapse.show+.collapse-toggle-wrapper .icon-minus {
    display: inline;
}

/* =====================================================
   08. CONTROLS – CARD BODY ACTIONS
===================================================== */

.card-body-card-actions {
    /* Bredden skal komme fra knapperne, ikke fra en fast værdi: gruppen
       bruges med 3 knapper (host-management) og 4 (visitor-management),
       og skal også holde med 2. fit-content lægger sig om summen.

       Forælderen er en flex-kolonne, så et flex-item strækkes til fuld
       bredde som standard – align-self er bremsen der forhindrer det. */
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    padding: 1px 0 0 0;
    border: thin solid rgba(var(--bmg-font-rgb), .05);
    border-radius: .85rem;
    background-color: rgba(var(--bmg-font-rgb), .02);
}

.card-body-card-actions>.btn {
    position: relative;
    /* Alle kolonner præcis lige brede. shrink:0 er nødvendig:
       .btn-group giver knapperne shrink:1, og så klemmes de sammen til
       under det halve, fordi gruppen selv måles inde i en flex-kolonne.

       Bredden sættes pr. antal knapper nedenfor, så gruppen fylder det
       samme uanset om der er 3, 4 eller 5. */
    flex: 0 0 117px;
    width: 117px;
    min-width: 0;
    max-width: 117px;
    height: auto;
    min-height: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .3rem;
    padding: .5rem .35rem;
    border: 0;
    border-radius: .85rem !important;
    background-color: transparent;
    font-size: .7rem;
    box-shadow: none;
    transition:
        background-color .18s ease,
        transform .18s ease;
}

/* Tynde skillelinjer mellem kolonnerne – ingen ramme om gruppen. */
.card-body-card-actions>.btn:not(:first-child)::before {
    content: "";
    position: absolute;
    top: .35rem;
    bottom: .35rem;
    left: 0;
    width: 1px;
    background-color: rgba(var(--bmg-font-rgb), .1);
}

/* Samme samlede bredde uanset antal knapper. Gruppen ligger under hele
   person-layoutet og har derfor kortets fulde bredde (~598px i den
   smalleste kolonne, visitor-management ved xl).
   :has() bruges bevidst her – se CLAUDE.md. */
/* Knapperne fylder kun deres ikon. De antal-baserede kolonnebredder
   nedenfor var sat efter den bredeste label og gælder derfor ikke. */
.card-body-card-actions>.btn {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: .5rem .7rem;
}

/* Under sm er der ikke plads til seks ikoner på én række ved siden af
   avataren: person-layoutet løb over (målt 420px indhold i 387px ved
   500px vindue), og de sidste knapper blev klippet af kortet.

   Gruppen får lov at ombryde og fylde kolonnen, så knapperne lægger sig
   i to rækker i stedet. På større skærme er alt uændret. */
@media (max-width: 575.98px) {
    .card-body-card-actions {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
    }

    .card-body-card-actions>.btn {
        flex: 1 0 auto;
    }

    /* Skillelinjerne mellem knapperne giver ikke mening, når de ombryder. */
    .card-body-card-actions>.btn:not(:first-child)::before {
        display: none;
    }
}

.card-body-card-actions>.btn:hover {
    background-color: rgba(var(--bmg-surface-rgb), .9);
    transform: translateY(-1px);
    z-index: 2;
}

/* Skillelinjen skal ikke tegnes op ad et hoveret felt – hverken til
   venstre eller hoejre for det, saa den hoverede knap staar fri. */
.card-body-card-actions>.btn:hover::before,
.card-body-card-actions>.btn:hover+.btn::before {
    background-color: transparent;
}

/* Tonet flise bag ikonet. Farven sættes af .tone-*; grå er standard. */
.card-body-action-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: .6rem;
    color: rgba(var(--bmg-text-muted-rgb), 1);
    background-color: rgba(var(--bmg-font-rgb), .07);
}

.card-body-action-icon.tone-success {
    background-color: rgba(var(--bmg-success-rgb), .14);
}

.card-body-action-icon.tone-danger {
    background-color: rgba(var(--bmg-danger-rgb), .14);
}

.card-body-action-icon.tone-info {
    background-color: rgba(var(--bmg-primary-rgb), .12);
}

.card-body-action-icon.tone-warning {
    background-color: rgba(var(--bmg-secondary-rgb), .16);
}

.card-body-card-actions>.btn i {
    font-size: var(--bmg-icon-size-sm);
    line-height: 1;
   
}

/* Navnet under ikonet vises ikke – knapperne læses på ikon og badge, og
   tooltippet forklarer det enkelte ikon. Labelen står stadig i markup'en
   som tilgængelig tekst. */
.card-body-action-label {
    display: none;
}

.card-body-action-label {
    max-width: 100%;
    font-size: .68rem;
    line-height: 1.15;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    color: rgba(var(--bmg-font-rgb), .9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Statuslinjen under labelen – fx "Udlånt", "1 aktivt udlån". */
.card-body-action-status {
    /*max-width: 100%;
    font-size: .6rem;
    line-height: 1.15;
    font-weight: 400;
    font-variation-settings: "wght" 450;
    color: rgba(var(--bmg-font-rgb), .55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
    display: none;
}

.card-body-card-actions .badge {
    position: absolute;
    top: -.3rem;
    right: -.3rem;
    min-width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: .5rem;
    line-height: 1;
    border: 2px solid rgb(var(--bmg-surface-rgb));
    box-shadow: none;
    border-radius: 50%;
    z-index: 3;
}

.card-body-card-actions .badge i {
    font-size: .4rem;
}

/* Ingen særregel under 576px: uden navne er knapperne så smalle, at de
   fortsat er på én række. */

/* =====================================================
   09. UTILITIES – BACKGROUNDS
===================================================== */
.text-bg-primary {
    color: var(--bmg-white) !important;
    background-color: RGBA(var(--bmg-primary-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-secondary {
    color: var(--bmg-white) !important;
    background-color: RGBA(var(--bmg-secondary-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-success {
    color: var(--bmg-white) !important;
    background-color: RGBA(var(--bmg-success-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-info {
    color: var(--bmg-font) !important;
    background-color: RGBA(var(--bmg-info-rgb), var(--bs-bg-opacity, 1)) !important
}


.text-bg-warning {
    color: var(--bmg-font) !important;
    background-color: RGBA(var(--bmg-warning-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-warning-light {
    color: var(--bmg-warning) !important;
    background-color: RGBA(var(--bmg-warning-rgb), var(--bmg-bg-opacity-light, 0.2)) !important
}

.text-bg-danger {
    color: var(--bmg-white) !important;
    background-color: RGBA(var(--bmg-danger-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-danger-light {
    color: var(--bmg-danger) !important;
    background-color: RGBA(var(--bmg-danger-rgb), var(--bmg-bg-opacity-light, 0.2)) !important
}

.text-bg-light {
    color: var(--bmg-font) !important;
    background-color: RGBA(var(--bmg-light-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-dark {
    color: var(--bmg-white) !important;
    background-color: RGBA(var(--bmg-dark-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-no-shadow {
    text-shadow: none;
}

.fa-small {
    position: absolute;
    bottom: .3em;
    right: -.2em;
    font-size: 0.5em;
}

/* =====================================================
   09. UTILITIES – WIDTHS
===================================================== */
.min-w-130px {
    min-width: 120px
}

/* =====================================================
   09. UTILITIES – INTERACTION HELPERS
===================================================== */

.select-none {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* =====================================================
   09. UTILITIES – TYPOGRAPHY
===================================================== */

.small,
small {
    font-size: .875em;
}

.smaller {
    font-size: .75em;
}

.smallest {
    font-size: .65em;
}

.text-secondary {
    color: rgba(var(--bmg-font), .8) !important;
}

.text-muted {
    color: rgba(86, 96, 108, 1) !important;
}

.bg-succes {
    background-color: rgba(var(--bmg-success-rgb), 1) !important
}

.bg-warning {
    background-color: rgba(var(--bmg-warning-rgb), 1) !important
}

.bg-danger {
    background-color: rgba(var(--bmg-danger-rgb), 1) !important
}



.fw-lighter {
    font-weight: lighter !important;
    font-variation-settings: "wght" 200 !important;
}

.fw-light {
    font-weight: 300 !important;
    font-variation-settings: "wght" 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
    font-variation-settings: "wght" 450 !important;
}

.fw-medium {
    font-weight: 500 !important;
    font-variation-settings: "wght" 530 !important;
}

.fw-semibold {
    font-weight: 600 !important;
    font-variation-settings: "wght" 700 !important;
}

.fw-bold {
    font-weight: 700 !important;
    font-variation-settings: "wght" 800 !important;
}

.fw-bolder {
    font-weight: bolder !important;
    font-variation-settings: "wght" 900 !important;
}

/* =====================================================
   10. FORMS – FORM TYPOGRAPHY
===================================================== */
.form-label {
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

.form-control,
.form-select {
    font-variation-settings: "wght" 450;
}

/* =====================================================
   10. FORMS – CONTROLS
===================================================== */

.form-control {
    color: var(--bmg-font);
    border: var(--bs-border-width) solid var(--bs-border-color);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 8px 12px rgba(255, 255, 255, 0.08) !important
}

.form-control:focus {}

.form-control:disabled,
.form-control[readonly] {
    color: rgba(var(--bmg-secondary-rgb), .85) !important;
    border-color: #dbdbdb;
    background-color: rgba(218, 221, 225, 0.7);
}

.form-floating:has(.form-control:disabled)::after,

.form-floating:has(.form-control[readonly])::after {
    content: "\f023";
    font-family: "Font Awesome 6 Pro";
    font-size: .75rem;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(var(--bmg-secondary-rgb), .5);
    pointer-events: none;

}

.form-floating>.form-control:disabled~label::after,
.form-floating>:disabled~label::after {
    background: rgba(218, 221, 225, 0.7);
}

.form-control::placeholder {}

.form-control-sm {}

.form-control-lg {}

/* =====================================================
   10. FORMS – FLOATING LABELS
===================================================== */

.form-floating {}

.form-floating>.form-control {}

.form-floating>.form-control:focus {}

.form-floating>label {
    color: rgba(var(--bmg-secondary-rgb), .75);
}

/* =====================================================
   10. FORMS – SELECTS
===================================================== */

.form-select {
    border-width: thin;
    background-color: rgba(255, 255, 255, .92);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, .75),
        0 1px 2px rgba(0, 0, 0, .04),
        0 6px 14px rgba(0, 0, 0, .06) !important;
}

.form-select:focus {}

.form-select:disabled {}

.form-select-sm {}

.form-select-lg {}

/* =====================================================
   10. FORMS – CHECKBOXES & RADIOS
===================================================== */

.form-check {}

.form-check-input {}

.form-check-input:checked {
    background-color: rgb(44, 62, 80);
    border-color: rgb(44, 62, 80);
}

.form-check-input:focus {}

.form-check-label {}

/* =====================================================
   10. FORMS – SWITCHES
===================================================== */

.form-switch {}

.form-switch .form-check-input {}

.form-switch .form-check-input:checked {}

/* =====================================================
   10. FORMS – RANGE INPUTS
===================================================== */

.form-range {}

.form-range:focus {}

.form-range::-webkit-slider-thumb {}

.form-range::-moz-range-thumb {}

/* =====================================================
   10. FORMS – LABELS & HELP TEXT
===================================================== */

.form-label {}

.col-form-label {}

.form-text {
    font-size: .875rem;
    margin-left: .25rem;
}

/* =====================================================
   10. FORMS – VALIDATION HOOKS
===================================================== */

.is-valid {}

.is-invalid {}

.valid-feedback {}

.invalid-feedback {}

.valid-tooltip {}

.invalid-tooltip {}

/* =====================================================
   10. FORMS – INPUT GROUPS
===================================================== */

.input-group {}

.input-group-text {}

.input-group>.form-control {}

.input-group>.form-select {}

/* =====================================================
   10. FORMS – DATOFILTER-DROPDOWN
===================================================== */

.date-range-menu {
    min-width: 340px;
    padding: .5rem;
}

/* Rækkerne har egne skillelinjer og indryk, så .dropdown-item's standard
   border-top og hover-indryk slås fra her. */
.date-range-menu .date-range-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .5rem;
    border-top: 0;
    border-radius: .5rem;
}

.date-range-menu li + li .date-range-option {
    position: relative;
}

.date-range-menu li + li .date-range-option::before {
    content: "";
    position: absolute;
    top: 0;
    right: .5rem;
    left: 3.4rem;
    border-top: 1px solid rgba(var(--bmg-font-rgb), .07);
}

.date-range-menu .date-range-option:not(.active):hover,
.date-range-menu .date-range-option:not(.active):focus {
    padding-left: .5rem;
    background: rgba(var(--bmg-font-rgb), .04);
}

.date-range-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .6rem;
    background: rgba(var(--bmg-bg-light-rgb), 1);
    color: rgba(var(--bmg-font-rgb), .65);
    font-size: .9rem;
}

.date-range-option-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.date-range-option-title {
    color: rgb(var(--bmg-font-rgb));
    font-size: .875rem;
    line-height: 1.25;
}

.date-range-option-range {
    color: rgba(var(--bmg-font-rgb), .5);
    font-size: .75rem;
    line-height: 1.25;
}

/* Radio-indikator til højre – ren CSS, ingen input nødvendig. */
.date-range-option-radio {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid rgba(var(--bmg-font-rgb), .2);
    border-radius: 50%;
}

.date-range-menu .date-range-option.active {
    background: rgba(var(--bmg-bg-light-rgb), 1);
}

/* Rækkerne markerer selv aktiv/hover (baggrund + radio), så den generelle
   .dropdown-item::after-streg skal ikke også tegnes her – den lå halvt uden
   for menuen, fordi rækkerne har egen padding. */
.date-range-menu .date-range-option::after,
.date-range-menu .date-range-custom *::after {
    display: none;
}

.date-range-menu .date-range-option.active .date-range-option-title {
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

.date-range-menu .date-range-option.active .date-range-option-radio {
    border-color: rgb(var(--bmg-primary-rgb));
    background:
        radial-gradient(circle,
            rgb(var(--bmg-primary-rgb)) 0 34%,
            transparent 36%);
}

/* Specifikt interval */
.date-range-custom {
    margin-top: .5rem;
    padding: .85rem .5rem .25rem;
    border-top: 1px solid rgba(var(--bmg-font-rgb), .08);
    cursor: default;
}

.date-range-custom-title {
    display: block;
    margin-bottom: .6rem;
    color: rgba(var(--bmg-font-rgb), .45);
    font-size: .7rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.date-range-custom-fields {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-bottom: .75rem;
}

.date-range-custom-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1 1 0;
    margin: 0;
    min-width: 0;
}

.date-range-custom-field > span {
    color: rgba(var(--bmg-font-rgb), .6);
    font-size: .75rem;
}

.date-range-custom-field input {
    min-width: 0;
}

.date-range-custom-arrow {
    flex-shrink: 0;
    padding-bottom: .45rem;
    color: rgba(var(--bmg-font-rgb), .45);
    font-size: .8rem;
}

/* =====================================================
   10. FORMS – UDLÅNSVALG (multiselect i Ny gæst)
===================================================== */

/* Kort i et responsivt net – checkbox, ikon og navn på én linje. */
.loan-select {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .5rem;
}

.loan-select-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .7rem .85rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .75rem;
    background: var(--bmg-white);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.loan-select-option:hover {
    border-color: rgba(var(--bmg-font-rgb), .2);
}

/* Checkboxen er synlig her – Bootstraps .form-check-input er allerede
   stylet i projektet (mørk udfyldning når den er valgt). */
.loan-select-option .form-check-input {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}

.loan-select-icon {
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
    color: rgb(var(--bmg-font-rgb));
    font-size: 1.05rem;
}

.loan-select-label {
    min-width: 0;
    color: rgb(var(--bmg-font-rgb));
    font-size: .9rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Valgt kort tones let, så rækken kan skimmes. */
.loan-select-option:has(.form-check-input:checked) {
    border-color: rgba(var(--bmg-primary-rgb), .35);
    background: rgba(var(--bmg-primary-rgb), .04);
}

.loan-select-option:has(.form-check-input:focus-visible) {
    outline: 2px solid rgb(var(--bmg-primary-rgb));
    outline-offset: 2px;
}

/* =====================================================
   10. FORMS – BUTTON HOOKS
===================================================== */

.btn-check {}

.btn-check:checked+.btn {}

/* =====================================================
   10. FORMS – DISABLED STATES
===================================================== */

.form-control:disabled {}

.form-select:disabled {}

.form-check-input:disabled {}

/* =====================================================
   10. FORMS – FILE INPUTS
===================================================== */

.form-control[type="file"] {}

.form-control[type="file"]:focus {}

/* =====================================================
   10. FORMS – COLOR PICKERS
===================================================== */

.form-control-color {}

/* =====================================================
   10. FORMS – BOOTSTRAP GRID HOOKS
===================================================== */

.row {}

.col-form-label {}