/* =====================================================
   BMG NEXT - OUR LAYER ON TOP OF THE DESIGN

   Everything under ~/assets/next/css, /js, /fonts, /img and /logo is the
   agency's drop and gets overwritten on the next hand-off. This file is ours.
   Put every BmyGuest-side addition and third-party integration here, and load
   it after app.css.

   01. Third party - intl-tel-input
   02. Third party - Select2
   03. Toasts
   04. Bare shell
   05. Error page
   06. Wallboard V2
   07. Customer overview
   08. Verification gate
   09. Guest check-in chip
   10. New meeting slide-in
   11. Avatars
   12. Mailroom pickup codes
   13. New design banner
   14. Reception desk
   15. Locations
   16. Hosts
   17. Global search
   18. Workspace navigation
   19. Utilities the design does not ship
   20. Meeting room calendar
===================================================== */


/* =====================================================
   01. THIRD PARTY - INTL-TEL-INPUT

   intlTelInput moves the input into a <div class="iti"> wrapper. That makes the
   input no longer a direct child of .form-floating, so every Bootstrap floating
   label selector (.form-floating > .form-control ~ label) stops matching: the
   label never floats and lands on top of the flag selector.

   These rules re-create the floating behaviour through the wrapper. app.css
   already relies on :has(), so using it here is consistent with the design.
===================================================== */

.form-floating > .iti {
    width: 100%;
}

/* Re-apply what .form-floating > .form-control would have given the input. */
.form-floating > .iti > .form-control {
    height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    padding: 1rem 0.75rem;
    /* Room for the flag + dial code selector. */
    padding-left: 3.25rem;
    line-height: 1.25;
}

/* The label must clear the flag selector and never swallow clicks on it. */
.form-floating:has(> .iti) > label {
    padding-left: 3.25rem;
    pointer-events: none;
    z-index: 3;
}

.form-floating:has(> .iti) > label::after {
    background-color: transparent;
}

/* The flag is a leading icon, centred at the left. A floated label keeps clearing it, so it
   lines up with the number beneath instead of landing on the flag. Bootstrap's floated
   transform scales the padding as well, hence the division. */
.form-floating:has(> .iti > .form-control:focus) > label,
.form-floating:has(> .iti > .form-control:not(:placeholder-shown)) > label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    padding-left: calc(3.25rem / 0.85 - 0.15rem);
}

.form-floating > .iti > .form-control:focus,
.form-floating > .iti > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* The country dropdown has to clear the floating label and any card edges. */
.iti__country-list {
    z-index: 5;
    border-radius: var(--bs-border-radius);
    border-color: var(--bs-border-color);
}


/* =====================================================
   02. THIRD PARTY - SELECT2

   Every <select> in the Next UI is upgraded to a searchable Select2 by
   bmg-next.js. Select2 4.0.8 ships a Bootstrap 3 era skin, so it is restyled
   here against the design tokens to be indistinguishable from .form-select.
===================================================== */

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    color: var(--bmg-font);
    background-color: var(--bmg-surface);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 8px 12px rgba(255, 255, 255, 0.08);
    font-variation-settings: "wght" 450;
}

.select2-container--default .select2-selection--single {
    height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    padding: 1rem 2.25rem 1rem 0.75rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: rgba(var(--bmg-primary-rgb), 0.5);
    outline: 0;
}

/* A multiple select (company administrators, meeting attendees, ...) holds one
   chip per chosen option, so its box matches the single select when empty and
   grows with the chips instead of clipping them: min-height, never height. */
.select2-container--default .select2-selection--multiple {
    min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    padding: 0.5rem 0.75rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    overflow: visible;
    white-space: normal;
    line-height: 1.25;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    float: none;
    margin: 0;
    padding: 0.375rem 0.625rem;
    color: var(--bmg-font);
    background-color: var(--bmg-bg-light);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-size: 0.875rem;
    line-height: 1.25;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    order: 2;
    margin: 0;
    color: rgba(var(--bmg-secondary-rgb), 0.85);
    font-weight: 400;
    line-height: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--bmg-font);
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
    float: none;
    flex: 1 1 8rem;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    margin: 0;
    padding: 0.375rem 0;
    color: var(--bmg-font);
    font-family: inherit;
    line-height: 1.25;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: rgba(var(--bmg-secondary-rgb), 0.75);
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    float: none;
    order: 3;
    margin: 0 0 0 auto;
    color: rgba(var(--bmg-secondary-rgb), 0.85);
    font-weight: 400;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    color: rgba(var(--bmg-secondary-rgb), 0.85);
    border-color: #dbdbdb;
    background-color: rgba(218, 221, 225, 0.7);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.25;
    color: var(--bmg-font);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(var(--bmg-secondary-rgb), 0.75);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 0.75rem;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(var(--bmg-secondary-rgb), 0.9) transparent transparent transparent;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    color: rgba(var(--bmg-secondary-rgb), 0.85);
    border-color: #dbdbdb;
    background-color: rgba(218, 221, 225, 0.7);
}

/* A Select2 sitting inside .form-floating keeps the floating label working:
   the control always has a value, so the label stays in its floated position. */
.form-floating:has(> .select2-container) > label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    pointer-events: none;
    z-index: 3;
}

.form-floating > .select2-container .select2-selection--single {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.select2-dropdown {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-inner-box-shadow);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown {
    padding: 0.5rem;
    background-color: var(--bmg-bg-light);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 0.5rem 0.75rem;
    color: var(--bmg-font);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    outline: 0;
}

.select2-container--default .select2-results__option {
    padding: 0.5rem 0.75rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: var(--bmg-font);
    background-color: var(--bmg-active);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    color: var(--bmg-white);
    background-color: var(--bmg-primary);
}

.select2-container--default .select2-results__message {
    color: rgba(var(--bmg-secondary-rgb), 0.85);
}

/* Select2 renders its dropdown in a body-level portal, which has to sit above
   Bootstrap modals (1055) and offcanvas panels (1045). */
.select2-container--open {
    z-index: 1060;
}


/* =====================================================
   03. TOASTS

   The drop ships no toast component, so this is built from the vocabulary it
   does use for transient feedback: .checkout-status (app.css) states a tone as
   a translucent wash of the semantic colour over a matching hairline border,
   with a circular tone-tinted icon beside the text. That is reproduced here in
   Bootstrap's toast shell, using the design's own tokens rather than Bootstrap's
   .bg-success / .text-bg-danger utilities, which carry none of that language.

   Bottom-end rather than the classic toastr's top-right: the redesign puts a
   fixed top nav and a left sidebar on every page, and a top-right toast lands
   on the user menu.
===================================================== */

.bmg-toast-container {
    /* Above the offcanvas (1045) and the modal (1055), so a message raised by a
       slide-in is not hidden behind it. */
    z-index: 1090;
}

.bmg-toast {
    --bmg-toast-rgb: var(--bmg-secondary-rgb);

    align-items: center;
    background-color: var(--bmg-surface);
    background-image: linear-gradient(
        rgba(var(--bmg-toast-rgb), .12),
        rgba(var(--bmg-toast-rgb), .12));
    border: 1px solid rgba(var(--bmg-toast-rgb), .18);
    border-radius: var(--bmg-control-radius);
    box-shadow: var(--bmg-shadow-card-raised);
    color: var(--bmg-font);
}

/* The tone wash is painted over an opaque surface rather than straight onto the
   page, so the toast stays legible against whatever it happens to cover. */

.bmg-toast.success {
    --bmg-toast-rgb: var(--bmg-success-rgb);
}

.bmg-toast.danger {
    --bmg-toast-rgb: var(--bmg-danger-rgb);
}

.bmg-toast.warning {
    --bmg-toast-rgb: var(--bmg-warning-rgb);
}

/* Belt and braces for the same failure: whatever happens to a transition, a shown
   toast is opaque. Beats .fade:not(.show) on specificity and cannot be left mid-fade. */
.bmg-toast.show {
    opacity: 1;
}

.bmg-toast-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
}

.bmg-toast-icon {
    /* Sized and rounded like .card-body-action-icon, the drop's own small tone
       circle, rather than the 64px .checkout-status-icon meant for a modal. */
    width: 30px;
    height: 30px;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--bmg-toast-rgb), .15);
    color: rgb(var(--bmg-toast-rgb));
}

.bmg-toast-text {
    flex-grow: 1;
    min-width: 0;
    /* A server message can be a sentence; let it wrap rather than clip. */
    overflow-wrap: anywhere;
}

.bmg-toast .btn-close {
    flex-shrink: 0;
    margin-left: 0.25rem;
}


/* =====================================================
   04. BARE SHELL

   Chrome for ~/Views/Next/Shared/_LayoutBare.cshtml: the pages that have to render
   without a signed-in user, and therefore without the sidebar and top nav. The
   page keeps the shell's background (body, app.css) so it still reads as the
   same product, and centres its single block of content in the viewport.
===================================================== */

.bmg-bare {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.bmg-bare-header {
    padding: 1.5rem 2rem 0;
}

.bmg-bare-logo {
    /* Same 100px lockup as .topnav-logo, so the two shells line up. */
    display: block;
    width: 100%;
    max-width: 100px;
}

.bmg-bare-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* The optional headerEnd section (the sign-in page's language picker), opposite the
   logo. Only a header that has one becomes a row, so the error pages are untouched. */
.bmg-bare-header:has(> .bmg-bare-header-end) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bmg-bare-header-end {
    flex: 0 0 auto;
}

.bmg-bare main {
    flex: 1;
    display: flex;
    align-items: center;
    /* app.css gives every main a 50px tail; here the flex centring supplies the
       spacing instead, and the tail would push the content off centre. */
    margin-bottom: 0;
}

.bmg-bare main > .container-lg {
    width: 100%;
}


/* =====================================================
   05. ERROR PAGE

   The drop ships no error screen, so this is built from the vocabulary it does
   use for "there is nothing here": .empty-view-preview (app.css) states absence
   as a muted, secondary-tinted icon tile above secondary text. That tile is
   reproduced at display size, over the same brand gradient the shell already
   uses for the sidebar profile and the workspace chips - so a 404 reads as a
   page of the app rather than as a browser error.

   Deliberately not a .card or a .content-panel: those are containers for data,
   and boxing an apology makes the page look like it is still trying to show
   something.
===================================================== */

.bmg-error-page {
    /* The only thing that separates a 404 from a 500: the tile's tint. Everything
       else - numeral, glow, type, actions - is deliberately identical, so the two
       read as one family rather than as two unrelated dead ends. */
    --bmg-error-tone-rgb: var(--bmg-secondary-rgb);

    max-width: 640px;
    margin: 0 auto;
    padding: clamp(2rem, 8vh, 5rem) 0 4rem;
    text-align: center;
    /* Own stacking context, so the glow behind the numeral (z-index: -1) stays in
       front of the page background instead of disappearing behind body's. */
    isolation: isolate;
}

.bmg-error-page.tone-danger {
    --bmg-error-tone-rgb: var(--bmg-danger-rgb);
}

.bmg-error-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bmg-control-radius);
    font-size: 1.6rem;
    /* .empty-view-preview-icon's tint and shape, at display size. */
    color: rgba(var(--bmg-error-tone-rgb), .82);
    background: rgba(var(--bmg-error-tone-rgb), .1);
}

.bmg-error-code {
    position: relative;
    margin: 1.5rem 0 1rem;
    font-size: clamp(5rem, 16vw, 8.5rem);
    font-weight: 700;
    font-variation-settings: "wght" 700;
    line-height: 1;
    letter-spacing: -.05em;
    /* Painted first as flat brand navy, then filled with the gradient. A renderer
       that does not do background-clip: text keeps a legible numeral. */
    color: var(--bmg-primary);
    background: var(--bmg-generic-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* The glow sits behind the numeral rather than on it: with the background clipped
   to the glyphs there is nowhere on the element itself to put it. */
.bmg-error-code::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: min(480px, 110%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side,
            rgba(var(--bmg-tertiary-rgb), 1),
            rgba(var(--bmg-tertiary-rgb), .55) 55%,
            rgba(var(--bmg-tertiary-rgb), 0));
}

.bmg-error-title {
    margin-bottom: .75rem;
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.bmg-error-text {
    max-width: 48ch;
    margin: 0 auto;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-error-path {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    max-width: 100%;
    margin: 1.75rem 0 0;
    padding: .5rem 1rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: var(--bmg-pill-radius);
    background: rgba(var(--bmg-surface-rgb), .72);
    font-size: .85rem;
    text-align: left;
}

.bmg-error-path-label {
    flex: 0 0 auto;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-error-path code {
    min-width: 0;
    color: var(--bmg-font);
    /* A long path is still the user's own URL; wrap it rather than let it widen
       the page. */
    overflow-wrap: anywhere;
}

.bmg-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
}

/* Confirmation that the error report was sent. Success tone, stated in the same
   pill shape as .bmg-error-path so the block keeps one silhouette. */
.bmg-error-note {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: 100%;
    margin: 1.75rem 0 0;
    padding: .55rem 1rem;
    border: 1px solid rgba(var(--bmg-success-rgb), .25);
    border-radius: var(--bmg-pill-radius);
    background: rgba(var(--bmg-success-rgb), .1);
    font-size: .9rem;
    text-align: left;
}

.bmg-error-note i {
    flex: 0 0 auto;
    color: rgb(var(--bmg-success-rgb));
}

/* The remaining ways out, below the buttons: real but secondary, so they are text
   links rather than a third and fourth button competing with the primary action. */
.bmg-error-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.25rem;
    margin-top: 2rem;
    font-size: .875rem;
}

.bmg-error-links a {
    color: rgb(var(--bmg-text-muted-rgb));
    text-decoration: underline;
    text-underline-offset: .2em;
}

.bmg-error-links a:hover,
.bmg-error-links a:focus {
    color: var(--bmg-primary);
}


/* =====================================================
   06. WALLBOARD V2

   ~/Views/Next/Home/WallboardV2.cshtml. The drop has no wallboard page, so the
   screen is composed from the vocabulary it does have: .content-panel sections,
   .kpi-card tiles with .stat-number and .kpi-icon, .section-stat pills,
   .badge-soft-* tones, and the visitor list's .arrival-chart bar plot. What is
   ours is the layout inside a stat card, the sparkline, the section stamp, the
   alert tone on a card, and plain Bootstrap tables that the drop never styled.
===================================================== */

/* Section stamp: "Updated 12:03" with a dot that pulses while loading and turns
   red when the last load failed. Driven by data-wb-state on the section. */
.bmg-wb-stamp-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: rgb(var(--bmg-success-rgb));
    box-shadow: 0 0 0 3px rgba(var(--bmg-success-rgb), .18);
    flex-shrink: 0;
}

[data-wb-state="loading"] .bmg-wb-stamp-dot {
    background: rgb(var(--bmg-warning-rgb));
    box-shadow: 0 0 0 3px rgba(var(--bmg-warning-rgb), .2);
    animation: bmg-wb-pulse 1s ease-in-out infinite;
}

[data-wb-state="error"] .bmg-wb-stamp-dot {
    background: rgb(var(--bmg-danger-rgb));
    box-shadow: 0 0 0 3px rgba(var(--bmg-danger-rgb), .2);
    animation: none;
}

[data-wb-state="error"] [data-wb-updated] {
    color: var(--bmg-danger);
}

@keyframes bmg-wb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    [data-wb-state="loading"] .bmg-wb-stamp-dot {
        animation: none;
    }
}

/* The Live pill in the page title: the design's .section-stat with a status dot.
   Same dot as the arrival chart's live marker, so "live" looks the same twice. */
.bmg-wb-live-pill {
    gap: .45rem;
}

.bmg-wb-live-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: rgb(var(--bmg-danger-rgb));
    box-shadow: 0 0 0 3px rgba(var(--bmg-danger-rgb), .2);
}

.bmg-wb-live-pill.is-paused .bmg-wb-live-dot {
    background: rgb(var(--bmg-secondary-rgb));
    box-shadow: 0 0 0 3px rgba(var(--bmg-secondary-rgb), .2);
}

.bmg-wb-live-pill.is-error .bmg-wb-live-dot {
    background: rgb(var(--bmg-warning-rgb));
    box-shadow: 0 0 0 3px rgba(var(--bmg-warning-rgb), .25);
}

/* The big number. Same typography as the design's .stat-number, but its own class:
   generic.js counts every .stat-number up from data-counter on page load and would
   overwrite a number filled in over the wire with "NaN" (and race the next refresh).
   No fade-in either; a number that changes every minute must not blink each time. */
.bmg-wb-number {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    font-variant-numeric: tabular-nums;
}

/* Stat card: the design's .card, with the number top-left and the icon tile
   top-right so a row of them scans as a row of numbers. */
.bmg-wb-stat .card-body {
    padding: 1.1rem 1.25rem;
}

.bmg-wb-stat .bmg-wb-number {
    font-size: 1.85rem;
}

.bmg-wb-stat-icon {
    width: 44px;
    height: 44px;
    margin-left: 0;
    flex-shrink: 0;
    font-size: var(--bmg-icon-size-md);
}

/* Alert tone. Only cards that declare data-wb-alert-card can turn red, and only
   while their number is above zero; at zero they get a quiet green tint. */
.bmg-wb-stat.is-danger {
    background: rgba(var(--bmg-danger-rgb), .06);
    box-shadow: var(--bmg-shadow-card), 0 0 0 1px rgba(var(--bmg-danger-rgb), .25);
}

.bmg-wb-stat.is-danger .bmg-wb-number {
    color: var(--bmg-danger);
}

.bmg-wb-stat.is-danger .bmg-wb-stat-icon {
    background: rgba(var(--bmg-danger-rgb), .12);
    color: var(--bmg-danger);
}

.bmg-wb-stat.is-ok .bmg-wb-stat-icon {
    background: rgba(var(--bmg-success-rgb), .12);
    color: var(--bmg-success);
}

.bmg-wb-alert-count.is-danger {
    background: rgba(var(--bmg-danger-rgb), .15);
    color: var(--bmg-danger);
}

/* Delta badge: the design's soft tone badges, sized to sit inline with small text. */
.bmg-wb-delta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2em .55em;
    border-radius: var(--bmg-pill-radius);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bmg-wb-delta.is-muted {
    color: rgba(var(--bmg-secondary-rgb), .8);
}

.bmg-wb-delta i {
    font-size: .7rem;
}

.bmg-wb-count {
    background: rgba(var(--bmg-font-rgb), .12);
    color: rgb(var(--bmg-font-rgb));
    border-radius: var(--bmg-pill-radius);
    font-weight: 700;
    font-variation-settings: "wght" 800;
}

.bmg-wb-count.is-zero {
    background: rgba(var(--bmg-success-rgb), .12);
    color: var(--bmg-success);
}

/* Sparkline: an inline SVG the script fills with a path. currentColor so a card
   that changes tone recolours its line with it. */
.bmg-wb-spark {
    display: block;
    width: 100%;
    height: 32px;
    color: rgb(var(--bmg-primary-rgb));
    overflow: visible;
}

.bmg-wb-spark-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.bmg-wb-spark-area {
    fill: currentColor;
    opacity: .1;
}

/* Chart.js canvases need a sized, positioned box to be responsive in. */
.bmg-wb-chart {
    position: relative;
    height: 280px;
}

.bmg-wb-chart-missing {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .bmg-wb-chart {
        height: 220px;
    }
}

/* Weekday profile reuses the arrival plot: two bars per weekday, this window's beside
   the previous one's in a lighter tint, and a delta badge under the day name. The
   plot gets extra bottom room for that second line under the axis. */
.bmg-wb-weekday-chart {
    --arrival-plot-height: 160px;
    --arrival-bar-width: 18px;
}

.bmg-wb-weekday-chart .arrival-chart-plot {
    padding-bottom: 3.4rem;
}

.bmg-wb-weekday-chart .arrival-chart-slot {
    gap: 5px;
}

.bmg-wb-bar-previous {
    background: rgba(var(--bmg-secondary-rgb), .22);
}

.arrival-chart-slot:hover .bmg-wb-bar-previous {
    background: rgba(var(--bmg-secondary-rgb), .4);
}

.bmg-wb-bar-delta {
    position: absolute;
    bottom: -3.1rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Legend for the two bar tints. */
.bmg-wb-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: rgba(var(--bmg-secondary-rgb), .55);
    vertical-align: -1px;
}

.bmg-wb-legend-swatch.is-previous {
    background: rgba(var(--bmg-secondary-rgb), .22);
}

/* Share rows in the adoption card: label, percentage and the design's thin
   progress bar under them. */
.bmg-wb-share + .bmg-wb-share {
    margin-top: .85rem;
}

.bmg-wb-progress {
    height: 6px;
    margin-top: .35rem;
    border-radius: 999px;
}

.bmg-wb-progress .progress-bar {
    border-radius: 999px;
    background-color: rgb(var(--bmg-primary-rgb));
}

.bmg-wb-chip {
    font-weight: 500;
    font-variation-settings: "wght" 530;
}

/* Tables. The drop never styled a data table, so this is Bootstrap's .table with
   the design's hairlines and muted uppercase headings, inside a .card. */
.bmg-wb-table {
    --bs-table-bg: transparent;
    font-size: .875rem;
}

.bmg-wb-table thead th {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--bmg-border-muted);
    color: rgb(var(--bmg-text-muted-rgb));
    font-size: .72rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bmg-wb-table tbody td {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--bmg-border-subtle);
    vertical-align: middle;
}

.bmg-wb-table tbody tr:last-child td {
    border-bottom: 0;
}

/* The big lists (companies, locations, host sync) scroll inside their card with
   the heading pinned, so a hundred locations do not make the board a mile long. */
.bmg-wb-table-scroll {
    max-height: 560px;
    overflow: auto;
}

.bmg-wb-table-scroll .bmg-wb-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bmg-surface);
}

.bmg-wb-table td.text-end,
.bmg-wb-table th.text-end {
    font-variant-numeric: tabular-nums;
}

.bmg-wb-table a {
    color: var(--bmg-primary);
    font-weight: 500;
    font-variation-settings: "wght" 530;
    text-decoration: none;
}

.bmg-wb-table a:hover {
    text-decoration: underline;
}

.bmg-wb-message {
    max-width: 32ch;
    overflow-wrap: anywhere;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-wb-sync-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Table filter: a small search field with the icon inside, matching the toolbar
   inputs elsewhere in the shell. */
.bmg-wb-search {
    position: relative;
    min-width: 220px;
}

.bmg-wb-search i {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(var(--bmg-secondary-rgb), .8);
    pointer-events: none;
}

.bmg-wb-search .form-control {
    padding-left: 2.2rem;
    height: var(--bmg-btn-height-xs);
    border-radius: var(--bmg-pill-radius);
}

/* A sample-data board must never be mistaken for the real thing. */
.bmg-wb-sample {
    background: rgba(var(--bmg-warning-rgb), .18);
    color: color-mix(in srgb, var(--bmg-warning) 60%, var(--bmg-font));
    border: 1px solid rgba(var(--bmg-warning-rgb), .3);
}

/* "Needs attention", the top of the board. Its tables are the first thing on the
   page, so they scroll inside a shorter box than the big lists further down: fifty
   quiet locations must not push "Right now" off the screen. Sortable headings are
   the reception table's .bmg-th-sort, as they are; nothing here restyles them. */
.bmg-wb-table-scroll.is-short {
    max-height: 320px;
}

/* A job that failed or went quiet: the whole row is tinted, not just its badge,
   because on a wall it is read from across the room. */
.bmg-wb-table tbody tr.is-danger td {
    background: rgba(var(--bmg-danger-rgb), .06);
}

/* What the job last said, under its name: the line from its latest OK, or the
   failure while it is failing. Wraps rather than widening the table. */
.bmg-wb-job-detail {
    max-width: 58ch;
    margin-top: .15rem;
    overflow-wrap: anywhere;
    color: rgb(var(--bmg-text-muted-rgb));
    font-size: .8rem;
    line-height: 1.35;
}

.bmg-wb-table tbody tr.is-danger .bmg-wb-job-detail {
    color: var(--bmg-danger);
}

/* A failure count as one line: icon, what it counts, the number. Neutral until
   the number is known, quiet green at zero, red above it. */
.bmg-wb-check {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--bmg-border-subtle);
    font-size: .875rem;
}

.bmg-wb-check:last-child {
    border-bottom: 0;
}

.bmg-wb-check-icon {
    width: 1.25rem;
    flex-shrink: 0;
    text-align: center;
    color: rgba(var(--bmg-secondary-rgb), .8);
}

.bmg-wb-check-count {
    min-width: 2.25rem;
    background: rgba(var(--bmg-font-rgb), .08);
    color: rgb(var(--bmg-font-rgb));
    border-radius: var(--bmg-pill-radius);
    font-variant-numeric: tabular-nums;
}

.bmg-wb-check.is-ok .bmg-wb-check-count {
    background: rgba(var(--bmg-success-rgb), .12);
    color: var(--bmg-success);
}

.bmg-wb-check.is-danger {
    color: var(--bmg-danger);
    font-weight: 600;
    font-variation-settings: "wght" 650;
}

.bmg-wb-check.is-danger .bmg-wb-check-icon {
    color: var(--bmg-danger);
}

.bmg-wb-check.is-danger .bmg-wb-check-count {
    background: rgba(var(--bmg-danger-rgb), .15);
    color: var(--bmg-danger);
}

/* The total beside "Needs attention": green at zero, so an all-clear reads as one. */
.bmg-wb-alert-count.is-ok {
    background: rgba(var(--bmg-success-rgb), .12);
    color: var(--bmg-success);
}

/* Each failure line opens what lies behind its count: a button for the failures
   slide-in, a link for Hangfire's own failed list. Both keep the look of the line
   they were; the label underlines and the chevron darkens on hover. */
button.bmg-wb-check,
a.bmg-wb-check {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bmg-border-subtle);
    border-radius: 0;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

button.bmg-wb-check:hover,
a.bmg-wb-check:hover {
    color: inherit;
}

.bmg-wb-check.is-danger:hover {
    color: var(--bmg-danger);
}

.bmg-wb-check:hover .bmg-wb-check-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.bmg-wb-check-go {
    flex-shrink: 0;
    font-size: .75rem;
    color: rgba(var(--bmg-text-muted-rgb), .7);
    transition: color .15s ease, transform .15s ease;
}

.bmg-wb-check:hover .bmg-wb-check-go {
    color: rgb(var(--bmg-font-rgb));
    transform: translateX(2px);
}

.bmg-wb-check.is-danger .bmg-wb-check-go {
    color: var(--bmg-danger);
}

/* The failures slide-in: wide enough for a provider's error on two or three lines. */
.offcanvas.offcanvas-end.bmg-wb-failures-canvas {
    --bs-offcanvas-width: min(36rem, 100vw);
}

.bmg-wb-failure-reasons {
    margin-bottom: 1rem;
    padding: .75rem;
    border-radius: .5rem;
    background: rgba(var(--bmg-danger-rgb), .05);
}

.bmg-wb-failure-reason {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .2rem 0;
    font-size: .8rem;
    line-height: 1.35;
}

.bmg-wb-failure-reason .bmg-wb-check-count {
    flex-shrink: 0;
    background: rgba(var(--bmg-danger-rgb), .15);
    color: var(--bmg-danger);
}

/* A reason is one representative message: two lines, the rest on hover. */
.bmg-wb-failure-reason-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.bmg-wb-failure {
    padding: .75rem 0;
    border-bottom: 1px solid var(--bmg-border-subtle);
}

.bmg-wb-failure:last-child {
    border-bottom: 0;
}

.bmg-wb-failure-title {
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.bmg-wb-failure-where {
    margin-top: .1rem;
    overflow-wrap: anywhere;
}

.bmg-wb-failure-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .9rem;
    margin-top: .25rem;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

/* The error as the log kept it: set apart, and wrapped rather than widening the sheet. */
.bmg-wb-failure-message {
    margin-top: .4rem;
    padding: .45rem .6rem;
    border-radius: .375rem;
    background: rgba(var(--bmg-danger-rgb), .06);
    color: var(--bmg-danger);
    font-family: var(--bs-font-monospace);
    font-size: .75rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 12rem;
    overflow-y: auto;
}

.bmg-wb-failure-notes {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .9rem;
    margin-top: .35rem;
    font-size: .75rem;
    color: rgb(var(--bmg-text-muted-rgb));
}


/* =====================================================
   07. CUSTOMER OVERVIEW

   ~/Views/Next/CustomerAccounts/Index.cshtml. An editing grid: a few hundred
   customers, every field editable where it stands. The drop has no such screen,
   so it is built from the vocabulary it does have - .card, .kpi-icon,
   .section-stat, the .btn-white xs control - with a dense table of small inputs
   that is ours.

   The controls are deliberately quiet: at this density a page of bordered,
   shadowed inputs reads as noise. A cell looks like text until it is hovered or
   focused, which is when it needs to look like a field.
===================================================== */

/* This page is a data grid with thirteen columns and an editing form under each row,
   so the shell's 1140px cap cuts it off on exactly the screens that could show it all.
   Scoped with :has() to this page only - every other page keeps the reading width the
   design chose for it. app.css already relies on :has(), so this is consistent with it. */
@media (min-width: 992px) {
    main > .container-lg:has(> .bmg-ca) {
        max-width: none;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.bmg-ca-number {
    font-size: 1.6rem;
    line-height: 1.1;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    font-variant-numeric: tabular-nums;
}

.bmg-ca-stat .card-body {
    padding: 1rem 1.15rem;
}

.bmg-ca-stat-icon {
    width: 42px;
    height: 42px;
    margin-left: 0;
    flex-shrink: 0;
    font-size: var(--bmg-icon-size-md);
}

/* The save indicator. Green at rest, amber while a request is out, red when the
   last one failed - the same three states as the wallboard's section stamp, so
   the two pages say "working" the same way. */
.bmg-ca-savestate {
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-ca-savedot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    display: inline-block;
    background: rgb(var(--bmg-success-rgb));
    box-shadow: 0 0 0 3px rgba(var(--bmg-success-rgb), .18);
}

.bmg-ca-savestate.is-saving .bmg-ca-savedot {
    background: rgb(var(--bmg-warning-rgb));
    box-shadow: 0 0 0 3px rgba(var(--bmg-warning-rgb), .2);
    animation: bmg-wb-pulse 1s ease-in-out infinite;
}

.bmg-ca-savestate.is-error {
    color: var(--bmg-danger);
}

.bmg-ca-savestate.is-error .bmg-ca-savedot {
    background: rgb(var(--bmg-danger-rgb));
    box-shadow: 0 0 0 3px rgba(var(--bmg-danger-rgb), .2);
}

@media (prefers-reduced-motion: reduce) {
    .bmg-ca-savestate.is-saving .bmg-ca-savedot {
        animation: none;
    }
}

/* Search and filter controls in the toolbar. */
.bmg-ca-search {
    position: relative;
    min-width: 260px;
}

.bmg-ca-search i {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(var(--bmg-secondary-rgb), .8);
    pointer-events: none;
}

.bmg-ca-search .form-control {
    padding-left: 2.2rem;
    height: var(--bmg-btn-height-xs);
    border-radius: var(--bmg-pill-radius);
}

.bmg-ca-filter {
    width: auto;
    min-width: 140px;
    height: var(--bmg-btn-height-xs);
    border-radius: var(--bmg-pill-radius);
    padding-top: 0;
    padding-bottom: 0;
}

/* The grid scrolls inside its card with the heading pinned; a few hundred
   customers must not turn the page into a mile of scrollbar. */
.bmg-ca-scroll {
    max-height: calc(100vh - 420px);
    min-height: 320px;
    overflow: auto;
}

.bmg-ca-table {
    --bs-table-bg: transparent;
    font-size: .875rem;
    margin-bottom: 0;
}

.bmg-ca-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bmg-surface);
    padding: .75rem .6rem;
    border-bottom: 1px solid var(--bmg-border-muted);
    color: rgb(var(--bmg-text-muted-rgb));
    font-size: .7rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bmg-ca-table tbody td {
    padding: .3rem .4rem;
    border-bottom: 1px solid var(--bmg-border-subtle);
    vertical-align: middle;
}

.bmg-ca-row:hover td {
    background: rgba(var(--bmg-active-rgb), .5);
}

.bmg-ca-col-select { width: 38px; }
.bmg-ca-col-toggle { width: 74px; }
.bmg-ca-col-name { min-width: 220px; }
.bmg-ca-col-actions { width: 56px; }

.bmg-ca-row.is-selected td {
    background: rgba(var(--bmg-primary-rgb), .06);
}

/* The merge bar floats over the grid rather than sitting above it: with the table
   scrolling inside its own card, a bar in the flow would leave the screen exactly when
   the rows being ticked are still on it. */
.bmg-ca-selectionbar {
    position: sticky;
    bottom: 1.25rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: fit-content;
    margin: -3.5rem auto 1rem;
    padding: .6rem 1rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: var(--bmg-pill-radius);
    background: var(--bmg-surface);
    box-shadow: var(--bmg-shadow-card-raised);
}

/* In the GRID, a field stays quiet until you reach for it: 345 rows of thirteen
   bordered boxes each would be a wall of chrome. A hairline keeps it discoverable
   without shouting. The form below gets the opposite treatment. */
.bmg-ca-input {
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none !important;
    border-radius: .5rem;
    min-height: 32px;
    padding: .25rem .5rem;
    font-size: .875rem;
}

.bmg-ca-row:hover .bmg-ca-input {
    border-color: var(--bmg-border-subtle);
    background: rgba(var(--bmg-surface-rgb), .7);
}

.bmg-ca-input:hover {
    border-color: var(--bmg-border-muted);
    background: var(--bmg-surface);
}

.bmg-ca-input:focus {
    border-color: rgba(var(--bmg-primary-rgb), .5);
    background: var(--bmg-surface);
    box-shadow: 0 0 0 .15rem rgba(var(--bmg-primary-rgb), .12) !important;
}

.bmg-ca-input:disabled {
    color: rgba(var(--bmg-secondary-rgb), .5);
    background: transparent;
}

/* Number fields lose their spinners: at this density the arrows are noise, and
   a mis-scroll over one would silently change a price. */
.bmg-ca-input[type="number"] {
    -moz-appearance: textfield;
}

.bmg-ca-input[type="number"]::-webkit-outer-spin-button,
.bmg-ca-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

select.bmg-ca-input {
    padding-right: 1.75rem;
    background-position: right .35rem center;
}

/* Status colour, applied to the row's own select so the state is legible while
   scanning rather than only when read. */
.bmg-ca-row[data-status="Active"] .bmg-ca-status { color: var(--bmg-success); }
.bmg-ca-row[data-status="Terminated"] .bmg-ca-status,
.bmg-ca-row[data-status="Lost"] .bmg-ca-status { color: var(--bmg-danger); }
.bmg-ca-row[data-status="Poc"] .bmg-ca-status,
.bmg-ca-row[data-status="Paused"] .bmg-ca-status {
    color: color-mix(in srgb, var(--bmg-warning) 72%, var(--bmg-font));
}

.bmg-ca-row[data-status="Terminated"] .bmg-ca-col-name .bmg-ca-input,
.bmg-ca-row[data-status="Lost"] .bmg-ca-col-name .bmg-ca-input {
    color: rgba(var(--bmg-font-rgb), .55);
}

.bmg-ca-renewal-soon {
    color: color-mix(in srgb, var(--bmg-warning) 68%, var(--bmg-font));
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

/* Expand control: chevron plus the number of contract lines behind it. */
.bmg-ca-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .5rem;
    min-height: 28px;
}

.bmg-ca-toggle i {
    transition: transform .15s ease;
    font-size: .7rem;
}

.bmg-ca-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.bmg-ca-toggle-count {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-ca-company {
    max-width: 190px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 30px;
    font-size: .8rem;
}

.bmg-ca-company i {
    font-size: .75rem;
    color: rgba(var(--bmg-secondary-rgb), .8);
}

.bmg-ca-company.is-linked i {
    color: rgb(var(--bmg-success-rgb));
}

.bmg-ca-danger:hover {
    color: var(--bmg-danger);
    border-color: rgba(var(--bmg-danger-rgb), .3);
}

/* The expanded contract area, set into the row it belongs to. */
.bmg-ca-detail-row td {
    padding: 0 !important;
    background: rgba(var(--bmg-font-rgb), .04);
}

.bmg-ca-detail {
    padding: 1.25rem 1.5rem 1.5rem;
    border-left: 3px solid rgba(var(--bmg-primary-rgb), .25);
}

/* The card is tinted and the fields on it are white. That is the whole trick behind
   the form reading as a set of fields rather than a grey mass: the contrast has to
   sit between the field and what it lies on, and on a white card there is none. */
.bmg-ca-contract {
    background: var(--bmg-surface-subtle);
    border: 1px solid var(--bmg-border-subtle);
    border-radius: var(--bmg-control-radius);
    padding: 1rem 1.15rem .35rem;
    margin-bottom: 1rem;
}

.bmg-ca-contract[data-status="Terminated"],
.bmg-ca-contract[data-status="Ended"] {
    opacity: .82;
}

.bmg-ca-contract[data-status="Draft"] {
    border-style: dashed;
    border-color: var(--bmg-border-muted);
}

.bmg-ca-contract-head {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
    padding-bottom: 1rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--bmg-border-muted);
}

/* A heading per group of fields. Without them the form is forty labelled boxes in a
   row, which is what made it hard to look at. */
.bmg-ca-section-title {
    margin: 1rem 0 .6rem;
    color: rgb(var(--bmg-text-muted-rgb));
    font-size: .7rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bmg-ca-contract-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem .85rem;
    margin-bottom: .75rem;
}

.bmg-ca-field {
    min-width: 0;
}

.bmg-ca-field.w-xs { width: 96px; }
.bmg-ca-field.w-sm { width: 132px; }
.bmg-ca-field.w-md { width: 200px; }
.bmg-ca-field.w-lg { grid-column: span 2; }

.bmg-ca-field-label {
    display: block;
    margin-bottom: .2rem;
    color: rgba(var(--bmg-font-rgb), .62);
    font-size: .68rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* In the FORM a field is a field: white, bordered, and carrying the same inset the
   design gives .form-control, so it matches every other form in the product. */
.bmg-ca-detail .bmg-ca-input {
    border: var(--bs-border-width) solid var(--bs-border-color);
    background: var(--bmg-surface);
    border-radius: .6rem;
    min-height: 38px;
    padding: .4rem .7rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06),
                inset 0 8px 12px rgba(255, 255, 255, .08) !important;
}

.bmg-ca-detail .bmg-ca-input:hover {
    border-color: rgba(var(--bmg-primary-rgb), .3);
}

.bmg-ca-detail .bmg-ca-input:focus {
    border-color: rgba(var(--bmg-primary-rgb), .55);
    box-shadow: 0 0 0 .18rem rgba(var(--bmg-primary-rgb), .14) !important;
}

.bmg-ca-detail textarea.bmg-ca-input {
    min-height: 62px;
}

/* The money a customer actually pays is the number people come to this form for. */
.bmg-ca-detail .bmg-ca-input.fw-semibold {
    border-color: rgba(var(--bmg-primary-rgb), .25);
    background: rgba(var(--bmg-tertiary-rgb), .35);
}

/* A value the server owns. Deliberately NOT a white box: it is not editable, and
   dressing it as a field would invite people to try. */
.bmg-ca-readonly {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: .4rem .7rem;
    border: 1px dashed var(--bmg-border-muted);
    border-radius: .6rem;
    font-size: .875rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--bmg-font-rgb), .7);
}

/* Details / History tabs on a contract line. */
.bmg-ca-tabs {
    display: flex;
    gap: .25rem;
    margin: .85rem 0 .25rem;
    border-bottom: 1px solid var(--bmg-border-muted);
}

.bmg-ca-tab {
    padding: .4rem .9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: rgb(var(--bmg-text-muted-rgb));
    font-size: .8rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

.bmg-ca-tab:hover {
    color: rgb(var(--bmg-font-rgb));
}

.bmg-ca-tab.is-active {
    color: var(--bmg-primary);
    border-bottom-color: rgb(var(--bmg-primary-rgb));
}

/* One entry per editing session, newest first, each listing what changed in it. */
.bmg-ca-revision {
    padding: .7rem 0;
    border-bottom: 1px solid var(--bmg-border-subtle);
}

.bmg-ca-revision:last-child {
    border-bottom: 0;
}

.bmg-ca-revision-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .8rem;
}

.bmg-ca-revision-kind {
    padding: .1rem .5rem;
    border-radius: var(--bmg-pill-radius);
    background: rgba(var(--bmg-font-rgb), .1);
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

.bmg-ca-revision-kind.tone-created {
    background: rgba(var(--bmg-success-rgb), .14);
    color: var(--bmg-success);
}

.bmg-ca-revision-kind.tone-deleted {
    background: rgba(var(--bmg-danger-rgb), .12);
    color: var(--bmg-danger);
}

.bmg-ca-revision-kind.tone-moved {
    background: rgba(var(--bmg-warning-rgb), .18);
    color: color-mix(in srgb, var(--bmg-warning) 68%, var(--bmg-font));
}

.bmg-ca-revision-when {
    font-variant-numeric: tabular-nums;
}

.bmg-ca-revision-who {
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-ca-revision-number {
    margin-left: auto;
    color: rgba(var(--bmg-font-rgb), .35);
    font-variant-numeric: tabular-nums;
}

.bmg-ca-revision-note {
    margin-top: .35rem;
    color: rgb(var(--bmg-text-muted-rgb));
    font-size: .8rem;
}

.bmg-ca-revision-changes {
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* Field name, old value, arrow, new value. A fixed label column so a run of changes
   reads down the page rather than zig-zagging. */
.bmg-ca-revision-change {
    display: grid;
    grid-template-columns: minmax(120px, 190px) 1fr auto 1fr;
    align-items: baseline;
    gap: .5rem;
    font-size: .82rem;
}

.bmg-ca-revision-field {
    color: rgb(var(--bmg-text-muted-rgb));
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

.bmg-ca-revision-from {
    color: rgba(var(--bmg-font-rgb), .55);
    text-decoration: line-through;
    overflow-wrap: anywhere;
}

.bmg-ca-revision-arrow {
    font-size: .65rem;
    color: rgba(var(--bmg-font-rgb), .35);
}

.bmg-ca-revision-to {
    font-weight: 600;
    font-variation-settings: "wght" 700;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .bmg-ca-revision-change {
        grid-template-columns: 1fr;
        gap: .1rem;
    }

    .bmg-ca-revision-arrow {
        display: none;
    }
}

/* Printer serial numbers: a list of chips plus a box to add to it. A contract can
   carry several printers, and one long comma-separated line is neither readable nor
   safely editable. */
.bmg-ca-serials {
    padding: .5rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bmg-surface);
}

.bmg-ca-serial-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .4rem;
}

.bmg-ca-serial-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .3rem .15rem .6rem;
    border-radius: var(--bmg-pill-radius);
    background: rgba(var(--bmg-primary-rgb), .08);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.bmg-ca-serial-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(var(--bmg-font-rgb), .5);
    font-size: 1rem;
    line-height: 1;
}

.bmg-ca-serial-remove:hover {
    background: rgba(var(--bmg-danger-rgb), .12);
    color: var(--bmg-danger);
}

.bmg-ca-serial-empty {
    color: rgba(var(--bmg-secondary-rgb), .7);
    font-size: .8rem;
}

/* The serials and the printer count are two statements about the same thing, so
   when they disagree one of them is wrong and only a person knows which. */
.bmg-ca-serial-note {
    margin-top: .35rem;
    color: color-mix(in srgb, var(--bmg-warning) 68%, var(--bmg-font));
    font-size: .75rem;
}

.bmg-ca-detail .bmg-ca-serials .bmg-ca-serial-input {
    min-height: 30px;
    border-style: dashed;
    box-shadow: none !important;
}

/* The two switches sit in a field slot of their own, so they line up with the row
   of inputs beside them instead of floating against the label grid. */
.bmg-ca-switches {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;
    min-height: 38px;
    padding-top: 1rem;
}

.bmg-ca-switches .form-check {
    margin-bottom: 0;
}

/* The settings panel is a working surface, not a dialog: it needs the width. */
.bmg-ca-settings {
    width: min(720px, 100vw);
}

.bmg-ca-rate {
    max-width: 120px;
    margin-left: auto;
}


/* ---------------------------------------------------------------------------
   TEMPORARY - spreadsheet import panel. Delete this block with the rest of the
   import feature; see CUSTOMER_IMPORT_REMOVAL.md.
   --------------------------------------------------------------------------- */

.bmg-ca-import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: .85rem 1rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: var(--bmg-control-radius);
    background: var(--bmg-surface-muted);
}

.bmg-ca-import-line {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.bmg-ca-import-line-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-variation-settings: "wght" 800;
    font-variant-numeric: tabular-nums;
}

.bmg-ca-import-line-label {
    font-size: .8rem;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-ca-import-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(var(--bmg-font-rgb), .2);
    vertical-align: -2px;
}

.bmg-ca-import-sample {
    max-height: 320px;
    overflow: auto;
}

/* The one rule that moves a row onto a different customer than its cell names, so it
   is coloured rather than left among the muted lines. */
.bmg-ca-import-tenant {
    flex-basis: 100%;
    color: color-mix(in srgb, var(--bmg-warning) 68%, var(--bmg-font));
    font-weight: 500;
    font-variation-settings: "wght" 530;
}


/* =====================================================
   08. VERIFICATION GATE

   ~/Views/Next/Profile/NotVerified.cshtml, on the bare shell. Built from the same
   vocabulary as the error page above and deliberately kept in its own section:
   the two look alike because they are the same *kind* of page - a centred
   statement on an empty shell, with the ways out underneath - but one apologises
   for a dead end and the other asks for something, so nothing is shared that
   would make a change to one silently restyle the other.

   No .card and no .content-panel, for the reason given in section 05: those are
   containers for data, and this page has none to show.
===================================================== */

.bmg-gate {
    max-width: 480px;
    margin: 0 auto;
    padding: clamp(2rem, 8vh, 5rem) 0 4rem;
    text-align: center;
}

.bmg-gate-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bmg-control-radius);
    font-size: 1.6rem;
    /* .empty-view-preview-icon's tint and shape, at display size. */
    color: rgba(var(--bmg-primary-rgb), .82);
    background: rgba(var(--bmg-primary-rgb), .1);
}

.bmg-gate-title {
    margin: 1.5rem 0 .75rem;
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.bmg-gate-text {
    max-width: 44ch;
    margin: 0 auto;
    color: rgb(var(--bmg-text-muted-rgb));
}

/* Which account is being confirmed. Stated as a pill rather than a line of body
   text because it is the one piece of the page the user has to check against
   their own inbox. */
.bmg-gate-identity {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    max-width: 100%;
    margin: 1.5rem 0 0;
    padding: .5rem 1rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: var(--bmg-pill-radius);
    background: rgba(var(--bmg-surface-rgb), .72);
    font-size: .85rem;
    text-align: left;
}

.bmg-gate-identity-label {
    flex: 0 0 auto;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-gate-identity-value {
    min-width: 0;
    font-weight: 500;
    font-variation-settings: "wght" 530;
    /* A long address is still the user's own; wrap it rather than widen the page. */
    overflow-wrap: anywhere;
}

/* The outcome of "e-mail me a link". The bare shell loads no script bundle, so the
   Bootstrap toasts the full shell uses cannot run here and the message is stated
   in the page instead - same pill silhouette as .bmg-gate-identity, tinted. */
.bmg-gate-note {
    --bmg-gate-note-rgb: var(--bmg-success-rgb);

    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: 100%;
    margin: 1.5rem 0 0;
    padding: .55rem 1rem;
    border: 1px solid rgba(var(--bmg-gate-note-rgb), .25);
    border-radius: var(--bmg-pill-radius);
    background: rgba(var(--bmg-gate-note-rgb), .1);
    font-size: .9rem;
    text-align: left;
}

.bmg-gate-note.tone-warning {
    --bmg-gate-note-rgb: var(--bmg-warning-rgb);
}

.bmg-gate-note.tone-danger {
    --bmg-gate-note-rgb: var(--bmg-danger-rgb);
}

.bmg-gate-note i {
    flex: 0 0 auto;
    color: rgb(var(--bmg-gate-note-rgb));
}

/* The two identity providers. Full width and stacked: on this page they are the
   fastest route through, not a secondary option, and a provider button whose
   width depends on the length of its label reads as an afterthought. */
.bmg-gate-sso {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 2rem;
}

.bmg-gate-sso-btn {
    /* .btn-white's geometry, at the height and full width this page needs. Written
       out rather than composed from .btn .btn-white in the markup because app.css
       sets `display: inline !important` on .btn.w-100, which would break the row. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    min-height: 52px;
    padding: .8rem 1.2rem;
    border: 1px solid var(--bmg-white);
    border-radius: var(--bmg-control-radius);
    background: var(--bmg-white);
    color: rgb(var(--bmg-font-rgb));
    font-weight: 500;
    font-variation-settings: "wght" 530;
    line-height: 1;
    box-shadow: var(--bmg-shadow-control);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.bmg-gate-sso-btn:hover,
.bmg-gate-sso-btn:focus-visible {
    transform: translateY(-0.5px);
    box-shadow: var(--bmg-shadow-control-hover);
}

.bmg-gate-sso-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1);
}

/* The provider marks are supplied as their own artwork: Microsoft's and Google's
   brand guidelines both require the colour lockup, so these are not swapped for
   the monochrome Font Awesome brand glyphs. */
.bmg-gate-sso-btn img {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* "or", ruled across the column: the e-mail route below is an alternative to the
   providers above, not the next step after them. */
.bmg-gate-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0;
    color: rgb(var(--bmg-text-muted-rgb));
    font-size: .85rem;
}

.bmg-gate-divider::before,
.bmg-gate-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--bmg-border-subtle);
}

.bmg-gate-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* Logging out is real but secondary, so it is a text link rather than a third
   button competing with the two routes that actually get the user in. */
.bmg-gate-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.25rem;
    margin-top: 2rem;
    font-size: .875rem;
}

.bmg-gate-links a {
    color: rgb(var(--bmg-text-muted-rgb));
    text-decoration: underline;
    text-underline-offset: .2em;
}

.bmg-gate-links a:hover,
.bmg-gate-links a:focus {
    color: var(--bmg-primary);
}


/* =====================================================
   09. GUEST CHECK-IN CHIP

   The per-guest "Check in" and "Check out" in a card body's chip row. It is a .chip-outline
   like the vCard chip beside it, so shape and type come from app.css, and
   .card-body-chips already strips the press animation. Hover and focus copy
   .card-body-guest-edit, the drop's own action chip, so the actions in the row
   behave alike.
===================================================== */

button.bmg-guest-checkin,
button.bmg-guest-checkout {
    cursor: pointer;
}

button.bmg-guest-checkin:hover,
button.bmg-guest-checkin:focus-visible,
button.bmg-guest-checkout:hover,
button.bmg-guest-checkout:focus-visible {
    color: rgb(var(--bmg-font-rgb));
    border-color: rgb(var(--bmg-secondary-rgb));
    background: var(--bmg-white);
}

/* =====================================================
   10. NEW MEETING SLIDE-IN

   Only what the design's new-meeting-offcanvas.php leans on and app.css does
   not ship: its border-dashed upload area, and the guest suggestions the
   classic form offered through a typeahead plugin the Next shell does not load.
===================================================== */

.meeting-import-drop.border-dashed {
    border-style: dashed !important;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.meeting-import-drop.is-dragover,
.meeting-import-drop:hover {
    border-color: rgb(var(--bmg-secondary-rgb)) !important;
    background-color: rgba(var(--bmg-secondary-rgb), .06);
}

/* The import review sits in the narrow slide-in: a long file scrolls inside the table, not the panel. */
.meeting-import-table {
    max-height: 40vh;
    overflow-y: auto;
}

.meeting-import-table th,
.meeting-import-table td {
    white-space: nowrap;
}

/* Hangs under its input inside .form-floating, which is position: relative. */
.meeting-guest-lookup {
    position: relative;
}

.meeting-guest-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    z-index: 1060;
}

/* Colleagues (Michael, 2026-09-28): the meeting's internal attendees, one line each in a light card
   below the guests, divided as a list. The name and address shorten rather than push the buttons out. */
.meeting-colleague-row + .meeting-colleague-row {
    border-top: 1px solid var(--bmg-border-subtle);
}

.meeting-colleague-row > .flex-grow-1 {
    min-width: 0;
}

/* A synced meeting's date and time (Michael, 2026-10-01) are Outlook's and read-only: greyed like the edit guest
   slide-in's locked e-mail, without the picker icon that would invite a click, and without the floating label's white
   backing strip, which would show on the grey. */
.meeting-time-locked .form-control[readonly] {
    background: rgba(var(--bmg-secondary-rgb), .08);
    color: rgba(var(--bmg-text-muted-rgb), 1);
    cursor: not-allowed;
}

.meeting-time-locked .form-control[readonly]::-webkit-calendar-picker-indicator {
    display: none;
}

.meeting-time-locked .form-floating > .form-control[readonly] ~ label::after {
    background-color: transparent;
}

/* =====================================================
   11. AVATARS

   app.css gives .avatar-circle font-size: 2.4rem so the initials scale with the
   circle, but leaves the photo an inline <img>. An inline image sits on a text
   line, and at that font size with Bootstrap's 1.5 line-height the line is about
   58px tall. The 88px circle covers it; the 44px circle in the collapsed sidebar
   does not, so the photo drops about 11px, leaving an empty band at the top and
   clipping its bottom. As a block it fills the circle at any size. Circles that
   are flex containers already blockify it, so nothing else moves.
===================================================== */

.avatar-circle img {
    display: block;
}

/* A circle holding a COMPANY LOGO rather than a face (a visit's location on "My visits" and on the visitor's own
   check-in history). app.css covers the circle with the image, which is right for a portrait and wrong for a logo:
   a wide lockup is blown up and cropped to the middle of itself, which is what PFA's logo looked like (Michael,
   2026-09-21). Here the logo is shown whole, inside the circle, on the white it was drawn for - the treatment
   .bmg-location-logo and .bmg-tq-logo-preview already give a logo elsewhere. */
.avatar-circle.bmg-logo-circle {
    background-color: var(--bmg-white);
}

.avatar-circle.bmg-logo-circle img {
    object-fit: contain;
    padding: 12%;
}

/* The body's "Time" row on a visit card is a wide row, not the header's narrow time column: keep the range on one
   line on phones too, where app.css stacks .card-time-range and hides its separator. */
.card-body-info-row .card-time-range .card-time-start,
.card-body-info-row .card-time-range .card-time-sep,
.card-body-info-row .card-time-range .card-time-end {
    display: inline;
}

/* The workspace switcher's avatar (app.css) styles an <img> only, and is not an .avatar-circle, so it neither
   clips nor sets the base font .avatar-initials scales from. A user without a profile image gets the initials
   the sidebar shows, kept round and sized to the 2.75rem circle. */
.workspace-switcher-avatar .avatar-initials {
    height: 100%;
    border-radius: 50%;
    font-size: .95rem;
}

/* =====================================================
   12. MAILROOM PICKUP CODES

   The code a delivery gets when it is registered: reception writes it on the parcel,
   and the recipient reads it out at the desk. A tag wherever a delivery is listed
   (Views/Next/Packages: _PackageDesk, _PackageHistory, _PackagePanel, the scanner),
   and large, with an entrance, in the modal shown right after registering
   (_PackagePickupCodeModal). font-weight goes with its "wght", as app.css requires.
===================================================== */

.bmg-pickup-tag {
    display: inline-flex;
    align-items: center;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: rgba(var(--bmg-primary-rgb), .1);
    color: rgb(var(--bmg-primary-rgb));
    font-size: .95rem;
    font-weight: 700;
    font-variation-settings: "wght" 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    line-height: 1.35;
    white-space: nowrap;
    text-shadow: none;
}

.bmg-pickup-tag.lg {
    padding: .2rem .8rem;
    font-size: 1.3rem;
}

.bmg-pickup-code {
    color: rgb(var(--bmg-primary-rgb));
    font-size: clamp(3.5rem, 14vw, 6.5rem);
    font-weight: 700;
    font-variation-settings: "wght" 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    line-height: 1;
    text-shadow: none;
    word-break: break-all;
}

.bmg-pickup-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(var(--bmg-success-rgb), .15);
    color: rgb(var(--bmg-success-rgb));
    font-size: 1.5rem;
}

.modal.show .bmg-pickup-check {
    animation: bmg-pickup-check .4s cubic-bezier(.2, .9, .3, 1.4) both;
}

.modal.show .bmg-pickup-code {
    animation: bmg-pickup-code .65s cubic-bezier(.2, .9, .3, 1.25) .15s both;
}

@keyframes bmg-pickup-check {
    from {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes bmg-pickup-code {
    0% {
        opacity: 0;
        transform: scale(.5);
        letter-spacing: .4em;
    }

    70% {
        opacity: 1;
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
        letter-spacing: .04em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal.show .bmg-pickup-check,
    .modal.show .bmg-pickup-code {
        animation: none;
    }
}

/* =====================================================
   13. NEW DESIGN BANNER

   The beta notice above the top nav for a session that opted in with ?ui=next
   (Views/Next/Shared/Partials/_NewDesignBanner). The drop has no notice bar, so
   this is built from its tokens: the soft brand tint (--bmg-tertiary) under
   primary type, with BETA as a solid primary pill. Neutral on purpose: the
   sidebar beside it changes gradient per workspace, and a tone colour would read
   as a warning. The classic shell's banner writes the same colours out.

   In the flow above #topnav, not fixed over it: generic.js pins the top nav once
   the page has scrolled a hard-coded 80px, and by then this strip has scrolled
   away, so the two never overlap.
===================================================== */

.bmg-beta-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .75rem;
    padding: .4rem 1rem;
    background: var(--bmg-tertiary);
    border-bottom: 1px solid var(--bmg-border-subtle);
    color: rgb(var(--bmg-primary-rgb));
    font-size: .875rem;
    line-height: 1.4;
    text-align: center;
}

.bmg-beta-banner-tag {
    padding: .05rem .55rem;
    border-radius: var(--bmg-pill-radius);
    background: rgb(var(--bmg-primary-rgb));
    color: var(--bmg-white);
    font-size: .7rem;
    font-weight: 700;
    font-variation-settings: "wght" 800;
    letter-spacing: .08em;
}

/* Two classes deep so it also beats the link colours app.css and Bootstrap set on :hover. */
.bmg-beta-banner .bmg-beta-banner-link,
.bmg-beta-banner .bmg-beta-banner-link:hover,
.bmg-beta-banner .bmg-beta-banner-link:focus {
    color: rgb(var(--bmg-primary-rgb));
    font-weight: 600;
    font-variation-settings: "wght" 650;
    text-decoration: underline;
    text-underline-offset: .2em;
}

@media print {
    .bmg-beta-banner {
        display: none;
    }
}

/* =====================================================
   14. MY DELIVERIES

   The lookup form on "My deliveries" (Views/Next/Packages/Partials/_MyPackages), which
   sits where a section's toolbar goes. The host's delivery and loan notices are lines on
   the host front page since 2026-09-18 (section 36).
===================================================== */

/* .content-panel has no top margin of its own: in the drop's host page the action bar (toptools, mt-4 mb-3)
   always sits above it. Ours renders only when it has something to show, so for a user without it the first
   panel on "My guests" and on My meetings touched the top nav. Same margin as the action bar's mt-4. */
main > .container-lg > .content-panel:first-child,
main > [data-bmg-layout-container] > .content-panel:first-child {
    margin-top: 1.5rem;
}

.bmg-my-packages-location {
    min-width: 12rem;
}

.bmg-my-packages-number {
    width: 16rem;
    max-width: 100%;
}

/* =====================================================
   14. RECEPTION DESK
   Views/Next/Home/ReceptionDesk.cshtml: the header controls, the overview panel behind the robot
   button (the design's assistant offcanvas with our content), the day-load chart inside it, the
   evacuation banner in the shell, the NPS card and the walk-in slide-in. Colours through the
   design's tokens, as app.css does.
===================================================== */

.bmg-reception-date {
    width: auto;
}

.bmg-reception-day .btn.active {
    background: rgba(var(--bmg-primary-rgb), .1);
}

/* The design sizes the date block (28px) and the guest block (260px) but lets the time block grow with its label.
   The desk's labels vary a lot ("Arrived 2 h 47 min ago", "Here since 10. sep"), which pushed the guest and host
   blocks around from card to card. A fixed column keeps them aligned; the label never wraps inside it. */
@media (min-width: 576px) {
    .bmg-reception .card.visitor .card-time-block {
        flex: 0 0 10rem;
        min-width: 10rem;
    }

    .bmg-reception .card.visitor .card-time-block > span {
        white-space: nowrap;
    }
}

/* The no-show list is folded until it is opened; its toggle sits with the section's toolbar. */
.bmg-reception-collapsed-toggle[aria-expanded="true"] .fa-eye::before {
    content: "\f070"; /* fa-eye-slash */
}

/* Label state on the header's print button (the design's .card-print-btn): a guest without a label wears a warning
   dot, a meeting lead the count of labels missing, a printed one a quiet green check. A participant row shows the
   same mark in the 40px slot the design reserves for it, without the menu. */
.bmg-reception .card-print-btn {
    position: relative;
    overflow: visible;
}

.bmg-reception .card-print-btn.bmg-print-missing {
    border-color: rgba(var(--bmg-warning-rgb), .9);
}

.bmg-reception .bmg-print-state {
    color: rgba(var(--bmg-text-muted-rgb), .75);
    cursor: default;
}

.bmg-reception .bmg-print-mark {
    position: absolute;
    top: -.4rem;
    right: -.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .25rem;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: .55rem;
    font-weight: 700;
    line-height: 1;
}

.bmg-reception .bmg-print-mark.missing {
    background: rgba(var(--bmg-warning-rgb), 1);
    color: rgb(var(--bmg-font-rgb));
}

.bmg-reception .bmg-print-mark.missing:empty {
    min-width: .8rem;
    height: .8rem;
    padding: 0;
}

.bmg-reception .bmg-print-mark.printed {
    background: rgba(var(--bmg-success-rgb), 1);
    color: #fff;
}

.bmg-reception .bmg-print-mark.printed i {
    font-size: .5rem;
}

/* A section's "N to print" pill next to its count, in the warning tone, only while something is missing. */
.bmg-reception .bmg-print-stat {
    background: rgba(var(--bmg-warning-rgb), .3);
    font-size: .9rem;
}

.bmg-reception .bmg-print-stat i {
    font-size: .7rem;
    margin-right: .15rem;
}

/* The desk's live status in the header intro: a dot and a word. Quiet while live (green dot) or carried by the
   poll (grey), amber once nothing has been heard for half a minute, red after two minutes, when offline, or when
   the session has ended. The dot pulses in the two waiting states only. */
.bmg-live-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: rgba(var(--bmg-text-muted-rgb), 1);
    white-space: nowrap;
    vertical-align: middle;
}

.bmg-live-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: rgba(var(--bmg-text-muted-rgb), .5);
    flex-shrink: 0;
}

.bmg-live-status[data-state="live"] .bmg-live-dot {
    background: rgba(var(--bmg-success-rgb), 1);
    box-shadow: 0 0 0 3px rgba(var(--bmg-success-rgb), .18);
}

.bmg-live-status[data-state="paused"] {
    color: rgb(var(--bmg-font-rgb));
}

.bmg-live-status[data-state="paused"] .bmg-live-dot {
    background: rgba(var(--bmg-warning-rgb), 1);
}

.bmg-live-status[data-state="degraded"],
.bmg-live-status[data-state="offline"],
.bmg-live-status[data-state="ended"] {
    color: rgb(var(--bmg-danger-rgb));
    font-weight: 600;
}

.bmg-live-status[data-state="degraded"] .bmg-live-dot,
.bmg-live-status[data-state="offline"] .bmg-live-dot,
.bmg-live-status[data-state="ended"] .bmg-live-dot {
    background: rgba(var(--bmg-danger-rgb), 1);
}

@keyframes bmg-live-pulse {
    50% { opacity: .3; }
}

@media (prefers-reduced-motion: no-preference) {
    .bmg-live-status[data-state="paused"] .bmg-live-dot,
    .bmg-live-status[data-state="degraded"] .bmg-live-dot {
        animation: bmg-live-pulse 1.6s ease-in-out infinite;
    }
}

/* The multi-house desk: the building on each card header (the design's status-chip, kept narrow), the row of
   building filters under the tiles, and the per-building table in the overview. */
.bmg-reception .bmg-location-chip {
    max-width: 11rem;
    flex-shrink: 1;
    min-width: 0;
}

.bmg-reception .bmg-location-chip .text-truncate {
    display: inline-block;
    max-width: 9rem;
}

/* The plate suggestions under a parking plate field (Trello card 430): the visitor card's parking slide-in and the
   Parking page's New parking form. The field sits in a .form-floating, which is already position:relative, so the
   list hangs under it without any positioning script. */
.bmg-plate-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 16rem;
    overflow-y: auto;
}

/* app.css clips every .card (overflow: hidden), and both plate fields sit in one, near its bottom edge: the open list
   was cut off at the card's edge, which at a location without a phone field left nothing of it to see. While it is
   open the card lets it out, and sits above the cards after it (the Parking page's Driver card is positioned too). */
.card:has(.bmg-plate-suggestions.show) {
    overflow: visible;
    z-index: 6;
}

/* The printer indicator on the desk's print button (Trello card 426, Ulrik, 2026-09-23). Opposite corner to the
   label-count badge, so the two never sit on each other. Grey is "we could not ask the backend", which is not the
   same as "the printer is down" and must not look like it. */
.bmg-printer-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--bs-secondary, #6c757d);
}

.bmg-printer-dot.is-up {
    background: var(--bs-success, #198754);
}

.bmg-printer-dot.is-down {
    background: var(--bs-danger, #dc3545);
}

.bmg-printer-dot.is-unknown {
    background: var(--bs-secondary, #6c757d);
}

/* The multi-house desk's building filter is the header's location dropdown since 2026-09-30 (.bmg-location-switch-*,
   section 27, twenty-second round); nothing of the chips row or the select that followed it is left here. */

.bmg-overview-buildings th {
    font-size: .75rem;
    color: rgba(var(--bmg-text-muted-rgb), 1);
    font-weight: 600;
}

/* The toptools printer button's count of labels still to print today. */
.bmg-reception .visitor-toptools-btn .bmg-print-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    font-size: .6rem;
    padding: .25em .45em;
    text-shadow: none;
}

/* The robot button's badge: the count of things needing attention, as the design's notifications bell has one. */
#assistant-btn .badge {
    font-size: .7rem;
    text-shadow: none;
}

/* The design's arrival chart inside an overview section card: always shown (its collapse class stays for the styling). */
.bmg-overview-chart .arrival-chart.show {
    display: block;
}

.bmg-overview-chart .arrival-chart-bar {
    position: relative;
    overflow: hidden;
}

/* How many of the hour's expected guests have arrived, filled from the bottom of the bar. */
.bmg-arrival-bar-arrived {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(var(--bmg-success-rgb));
    border-radius: inherit;
}

a.arrival-chart-weekday {
    text-decoration: none;
}

.arrival-chart-weekday.is-today {
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

/* NPS prompt as an overview card. */
.bmg-nps-scale {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.bmg-nps-score {
    min-width: 2rem;
    padding: .125rem .25rem;
    font-variant-numeric: tabular-nums;
}

/* The evacuation banner in the Next shell (Views/Next/Evacuation/Partials/_EvacuationBanner.cshtml). */
.bmg-evacuation-banner {
    display: block;
    background: rgb(var(--bmg-danger-rgb));
    color: rgb(var(--bmg-white-rgb));
    text-align: center;
    padding: .9rem 1.5rem;
    font-weight: 700;
    font-variation-settings: "wght" 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    animation: bmg-evacuation-pulse 1.5s infinite;
}

.bmg-evacuation-banner:hover {
    color: rgb(var(--bmg-white-rgb));
    filter: brightness(.92);
    text-decoration: none;
}

.bmg-evacuation-banner-hint {
    display: block;
    font-size: .875rem;
    font-weight: 400;
    font-variation-settings: "wght" 450;
    text-transform: none;
}

.bmg-evacuation-banner-demo {
    display: inline-block;
    background: #ffb822;
    color: #111111;
    border-radius: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    font-size: .875rem;
    vertical-align: middle;
}

@keyframes bmg-evacuation-pulse {
    0% { opacity: 1; }
    50% { opacity: .75; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bmg-evacuation-banner {
        animation: none;
    }
}

@media print {
    .bmg-evacuation-banner,
    #assistant-btn {
        display: none;
    }
}

/* The walk-in slide-in: the loading veil while a guest is looked up, and the e-mail suggestions under the field. */
.bmg-guest-form-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bmg-white-rgb), .7);
}

.bmg-guest-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 16rem;
    overflow: auto;
}

.bmg-guest-suggestions .list-group-item {
    text-align: left;
}

/* Sidebar: the design's danger entry for evacuation. */
.sidebar .nav-link.danger {
    background: rgba(var(--bmg-danger-rgb), .85);
}

.sidebar .nav-link.danger:hover,
.sidebar .nav-link.danger.active {
    background: rgb(var(--bmg-danger-rgb));
}

/* =====================================================
   15. LOCATIONS
   Views/Next/Locations/Index.cshtml (the overview cards) and Views/Next/Locations/Edit.cshtml
   (the settings page: the section rail, the setting rows, the rich-text editors, the add-on
   catalogue, the wide slide-in). Colours through the design's tokens, as app.css does.
===================================================== */

/* --- Overview cards --- */

.bmg-location-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bmg-location-logo {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 1rem;
    background: var(--bmg-surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bmg-secondary);
    font-size: 1.4rem;
}

.bmg-location-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: .35rem;
}

.bmg-location-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    font-size: .85rem;
    color: var(--bmg-secondary);
}

.bmg-location-facts i {
    margin-right: .3rem;
}

/* --- Settings page: the rail --- */

/* app.css gives both html and body overflow-y: auto. With html's overflow set, body's is not propagated to the
   viewport, so body is a scroll container of its own that never scrolls (its height is auto), and position: sticky
   anywhere on a page has nothing to stick to. On the pages that carry the rail, body is put back to visible; the
   viewport still scrolls through html exactly as before, and Bootstrap's inline overflow: hidden on body for a modal
   or slide-in behaves as it did (it was never propagated either). */
body:has(.bmg-settings-rail) {
    overflow-y: visible;
}

.bmg-settings-rail {
    position: sticky;
    top: 1rem;
}

/* Once the page has scrolled, generic.js pins #topnav (60px, position: fixed) and marks body.has-fixed-nav; the rail
   and the section anchors keep clear of it. */
body.has-fixed-nav .bmg-settings-rail {
    top: 76px;
}

body.has-fixed-nav .bmg-settings-section {
    scroll-margin-top: 76px;
}

.bmg-settings-nav .nav-link {
    color: var(--bmg-font);
    border-radius: .8rem;
    padding: .55rem .85rem;
    font-weight: 500;
}

.bmg-settings-nav .nav-link:hover {
    background: rgba(var(--bmg-primary-rgb), .06);
}

.bmg-settings-nav .nav-link.active {
    background: rgba(var(--bmg-primary-rgb), .1);
    color: var(--bmg-primary);
}

.bmg-settings-nav .nav-link.is-search-miss {
    opacity: .4;
}

.bmg-settings-dirty-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: rgb(var(--bmg-warning-rgb));
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .bmg-settings-rail {
        position: static;
    }

    .bmg-settings-nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: .25rem;
        padding-bottom: .25rem;
    }

    .bmg-settings-nav .nav-link {
        white-space: nowrap;
    }
}

/* --- Settings page: sections and rows --- */

.bmg-settings-section {
    margin-bottom: 1.5rem;
    scroll-margin-top: 1rem;
}

.bmg-settings-section-head {
    margin-bottom: 1.25rem;
}

.bmg-settings-group-title {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bmg-secondary);
    margin: 1.75rem 0 .5rem;
}

.bmg-settings-group-title:first-of-type {
    margin-top: 1rem;
}

.bmg-setting {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: .5rem 1.5rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid var(--bmg-border-subtle);
}

.bmg-setting.bmg-setting-stacked {
    grid-template-columns: minmax(0, 1fr);
}

.bmg-setting.is-off {
    opacity: .5;
}

.bmg-setting.is-search-hidden {
    display: none;
}

/* While a search runs, the group titles say little about what is left; the row texts do. */
.bmg-settings-section.is-searching .bmg-settings-group-title {
    display: none;
}

.bmg-setting-label {
    display: block;
    font-weight: 600;
    margin-bottom: .15rem;
}

.bmg-setting-help {
    font-size: .85rem;
    color: var(--bmg-secondary);
}

.bmg-setting-control .form-check.form-switch {
    padding-top: .25rem;
}

.bmg-setting-control .form-check-input {
    cursor: pointer;
}

.bmg-settings-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    background: var(--bmg-surface-muted);
    border-top: 1px solid var(--bmg-border-subtle);
    padding: .85rem 1.5rem;
}

.bmg-settings-empty {
    padding: 2rem 0;
}

.bmg-settings-support {
    border: 1px dashed rgba(var(--bmg-warning-rgb), .8);
}

/* The "switch off this add-on" card at the foot of an add-on settings page. */
.bmg-settings-danger-zone {
    border: 1px dashed rgba(var(--bmg-danger-rgb), .6);
}

.bmg-code {
    font-size: .8rem;
    line-height: 1.4;
    white-space: pre;
    overflow-x: auto;
}

@media (max-width: 767.98px) {
    .bmg-setting {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Images and the QR block --- */

.bmg-image-field {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.bmg-image-preview {
    width: 100%;
    max-width: 260px;
    height: 96px;
    border-radius: .8rem;
    border: 1px solid var(--bmg-border-subtle);
    background: var(--bmg-surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bmg-secondary);
    font-size: 1.5rem;
}

.bmg-image-preview.is-dark {
    background: var(--bmg-primary);
}

.bmg-image-preview.is-wide {
    max-width: 100%;
    height: 140px;
}

.bmg-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: .5rem;
}

.bmg-image-preview.is-wide img {
    object-fit: cover;
    padding: 0;
    width: 100%;
    height: 100%;
}

.bmg-qr-block {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.bmg-qr-image {
    width: 128px;
    height: 128px;
    border-radius: .8rem;
    border: 1px solid var(--bmg-border-subtle);
    background: #fff;
    flex: 0 0 auto;
}

.bmg-qr-actions {
    flex: 1 1 220px;
    min-width: 0;
}

/* A QR code that opens full size in the lightbox (bmg-next.js, wireLightbox): the image is the button's face. */
.bmg-qr-zoom {
    position: relative;
    display: block;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: .8rem;
    background: none;
    line-height: 0;
    cursor: zoom-in;
}

.bmg-qr-zoom:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .6);
    outline-offset: 3px;
}

.bmg-qr-zoom-badge {
    position: absolute;
    right: .4rem;
    bottom: .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(var(--bmg-primary-rgb), .88);
    color: #fff;
    font-size: .75rem;
    line-height: 1;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}

.bmg-qr-zoom:hover .bmg-qr-zoom-badge,
.bmg-qr-zoom:focus-visible .bmg-qr-zoom-badge {
    opacity: 1;
    transform: none;
}

/* On touch there is no hover to discover it by. */
@media (hover: none) {
    .bmg-qr-zoom-badge {
        opacity: 1;
        transform: none;
    }
}

.bmg-lightbox .bmg-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 12rem);
    width: auto;
    height: auto;
    margin-inline: auto;
    border-radius: .8rem;
    background: #fff;
}

.bmg-lightbox .bmg-lightbox-caption {
    overflow-wrap: anywhere;
}

/* --- Rich-text editors (Quill 2, snow theme) in the design's shapes --- */

.bmg-editor .ql-toolbar.ql-snow {
    border: 1px solid var(--bs-border-color);
    border-radius: .8rem .8rem 0 0;
    background: var(--bmg-surface-muted);
}

.bmg-editor .ql-container.ql-snow {
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    border-radius: 0 0 .8rem .8rem;
    font-family: var(--bs-body-font-family);
    font-size: .95rem;
    background: var(--bmg-surface);
}

.bmg-editor .ql-editor {
    min-height: inherit;
}

.bmg-editor .ql-editor.ql-blank::before {
    color: var(--bmg-secondary);
    font-style: normal;
}

/* Paragraphs and lists spaced as the check-in pages space them (Bootstrap's 1rem after each, style.css's line-height 1.5),
   so Enter looks here the way a visitor sees it. Those stylesheets and each location's custom CSS decide the spacing and
   are not changed; the editor follows them. A line break without the space is Shift+Enter (bmg-location-settings.js). */
.bmg-editor .ql-editor {
    line-height: 1.5;
}

.bmg-editor .ql-editor p,
.bmg-editor .ql-editor ol {
    margin-bottom: 1rem;
}

.bmg-editor .ql-editor > :last-child {
    margin-bottom: 0;
}

/* Under an editor: the line-break hint and "Preview as visitor". */
.bmg-editor-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-top: .5rem;
}

/* The preview dialog (Locations/Partials/_CustomerHtmlPreviewModal): the check-in page in a frame, at full or phone width. */
.bmg-html-preview {
    display: flex;
    justify-content: center;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .8rem;
    overflow: hidden;
    background: var(--bmg-surface-muted);
}

.bmg-html-preview-frame {
    display: block;
    width: 100%;
    height: min(75vh, 820px);
    border: 0;
    background: #fff;
}

.bmg-html-preview.is-phone .bmg-html-preview-frame {
    width: 390px;
    max-width: 100%;
}

/* --- Required terms --- */

.bmg-terms-list {
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .8rem;
    overflow: hidden;
}

.bmg-terms-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
}

.bmg-terms-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .7rem;
    background: rgba(var(--bmg-primary-rgb), .08);
    color: var(--bmg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* --- Add-ons --- */

.bmg-related-addons {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bmg-border-subtle);
}

.bmg-addon-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .7rem .35rem .4rem;
    border-radius: 999px;
    border: 1px solid var(--bmg-border-muted);
    background: var(--bmg-surface);
    color: var(--bmg-font);
    font-size: .85rem;
    text-decoration: none;
}

a.bmg-addon-chip:hover {
    background: rgba(var(--bmg-primary-rgb), .06);
    color: var(--bmg-font);
}

.bmg-addon-chip.is-muted {
    opacity: .6;
}

.bmg-addon-chip img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    border-radius: 50%;
}

.bmg-addon-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .9rem;
    background: var(--bmg-surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
}

.bmg-addon-icon img {
    width: 2.1rem;
    height: 2.1rem;
    object-fit: contain;
}

/* An add-on with no icon file: a generic glyph in the same box, never a broken image. */
.bmg-addon-icon i,
.bmg-addon-chip i {
    color: var(--bs-secondary-color, #6c757d);
}

.bmg-addon-icon i {
    font-size: 1.35rem;
}

.bmg-addon-chip i {
    width: 1.5rem;
    text-align: center;
}

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

/* --- The add-on catalogue (UtilityPartials/AddOns/_AddOnCatalogue): rows grouped by what the owner has --- */

.bmg-addon-group + .bmg-addon-group {
    margin-top: 1.75rem;
}

.bmg-addon-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.bmg-addon-group-head .bmg-settings-group-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

/* The group says the status (a row has no badge), so its title stays while "find a setting" runs, which hides the
   other sections' group titles. */
.bmg-settings-section.is-searching .bmg-addon-group .bmg-settings-group-title {
    display: flex;
}

.bmg-addon-group[data-addon-group="active"] .bmg-settings-group-title i {
    color: var(--bmg-success);
}

.bmg-addon-group[data-addon-group="available"] .bmg-settings-group-title i {
    color: var(--bmg-primary);
}

.bmg-addon-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .4rem;
    border-radius: var(--bmg-pill-radius, 999px);
    background: rgba(var(--bmg-font-rgb), .08);
    color: rgb(var(--bmg-font-rgb));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 0;
}

.bmg-addon-group-hint {
    margin-top: -.25rem;
}

/* No overflow: hidden, or the system administrator's menu could not leave the list; the rows round their own corners. */
.bmg-addon-list {
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .8rem;
    background: var(--bmg-surface);
}

.bmg-addon-list > .bmg-addon-row:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.bmg-addon-list > .bmg-addon-row:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.bmg-addon-list.is-collapsed {
    display: none;
}

/* Ready to set up is the group that asks for something, so it is the one that stands out. */
.bmg-addon-group[data-addon-group="available"] .bmg-addon-list {
    border-color: rgba(var(--bmg-primary-rgb), .25);
    background: rgba(var(--bmg-tertiary-rgb), .35);
}

/* The shop window: quieter than the settings above it. */
.bmg-addon-group[data-addon-group="more"] .bmg-addon-list {
    background: var(--bmg-surface-muted);
}

.bmg-addon-group[data-addon-group="more"] .bmg-addon-icon img {
    filter: grayscale(1);
    opacity: .7;
}

.bmg-addon-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    background: transparent;
    border-color: var(--bmg-border-subtle);
}

.bmg-addon-row.is-link:hover {
    background: rgba(var(--bmg-primary-rgb), .04);
}

.bmg-addon-row .bmg-addon-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
}

.bmg-addon-row .bmg-addon-icon img {
    width: 1.75rem;
    height: 1.75rem;
}

.bmg-addon-row .bmg-addon-icon i {
    font-size: 1.1rem;
}

/* A name wraps between words, never inside one ("Parkeringsko / mpagniet" on the old cards). */
.bmg-addon-name {
    overflow-wrap: break-word;
}

.bmg-addon-row .bmg-addon-description {
    -webkit-line-clamp: 2;
}

.bmg-addon-row-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

/* The menu button sits above the row's stretched link. Only the button: a z-index on the dropdown itself would make it
   a stacking context, and the next row's button would then paint over the open menu. */
.bmg-addon-admin > .btn {
    position: relative;
    z-index: 2;
}

.bmg-addon-row.is-search-hidden,
.bmg-addon-row.is-addon-hidden {
    display: none;
}

/* A group left with no row by either search goes, and the folded group opens while one runs. */
.bmg-addon-group:not(:has(.bmg-addon-row:not(.is-search-hidden):not(.is-addon-hidden))) {
    display: none;
}

.bmg-settings-section.is-searching .bmg-addon-list.is-collapsed,
.is-filtering .bmg-addon-list.is-collapsed {
    display: flex;
}

.bmg-settings-section.is-searching [data-addon-more-toggle],
.is-filtering [data-addon-more-toggle] {
    display: none;
}

[data-addon-more-toggle][aria-expanded="true"] [data-when="collapsed"],
[data-addon-more-toggle][aria-expanded="false"] [data-when="expanded"] {
    display: none;
}

@media (max-width: 575.98px) {
    .bmg-addon-row {
        flex-wrap: wrap;
    }

    .bmg-addon-row-actions {
        width: 100%;
        padding-left: 3.35rem;
    }
}

/* --- The wide slide-in (a rich-text editor needs the room) --- */

.offcanvas.offcanvas-end.bmg-offcanvas-wide {
    --bs-offcanvas-width: 860px;
    max-width: 100vw;
}

.bmg-offcanvas-wide .offcanvas-footer {
    background: var(--bmg-surface);
}

/* =====================================================
   16. HOSTS
   Views/Next/Hosts. The list while bmg-hosts.js fetches a search, a filter or another page:
   dimmed and not clickable, so a click cannot land on a card that is about to be replaced.
===================================================== */

.bmg-host-list-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* =====================================================
   17. COMPANY SWITCHER
   Views/Next/Shared/Partials/_TopNav and _CompanySwitchMenu. The design drop has no company switcher: the menu is
   built from the top nav's own pieces (dropdown-header, dropdown-item, the toolbar search box), so all it needs
   here is a width, a scrolling list and a status line.
===================================================== */

/* A fixed width, so the menu does not jump when its list arrives, and never wider than the screen. */
.bmg-company-switch-menu {
    width: 18rem;
    max-width: calc(100vw - 1rem);
}

/* bmg-next.js moves the menu right when it would run off the left of a narrow screen; the tip stays on the button. */
.bmg-company-switch-menu.dropdown-menu-tip-ne::after {
    right: calc(.9rem + var(--bmg-company-switch-shift, 0px));
}

/* Out to the menu's edges, so the scrollbar sits at the edge. Positioned, so the active and hover markers
   (.dropdown-item::after) are placed from this box and scroll with their company instead of staying behind. */
.bmg-company-switch-list {
    position: relative;
    max-height: min(22rem, 55vh);
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bmg-company-switch-list .dropdown-item::after {
    left: 0;
}

/* Lets a long company name shrink and truncate inside its flex row. */
.bmg-company-switch-name {
    min-width: 0;
}

.bmg-company-switch-status {
    margin: 0;
    padding: .6rem 0;
    font-size: .875em;
    color: rgba(var(--bmg-font-rgb), .6);
}

/* =====================================================
   17. GLOBAL SEARCH
   The search box in the top nav (Views/Next/Shared/Partials/_TopNav) with its quick results
   (Views/Next/Search/Partials/_QuickResults), and the search result page (Views/Next/Search/Index).
===================================================== */

/* --- The box in the top nav: the design's smart-search, sized for the nav --- */

.bmg-topnav-search {
    position: relative;
    width: 360px;
    max-width: 40vw;
}

.bmg-topnav-search .incident-search {
    width: 100%;
    min-width: 0;
    height: 36px;
    margin: 0;
}

.bmg-topnav-search .incident-search .form-control {
    width: 100%;
}

.bmg-topnav-search input[type="search"]::-webkit-search-decoration,
.bmg-topnav-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* --- The quick results: a dropdown-menu of the design, opened by script rather than Bootstrap --- */

.bmg-search-menu {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    display: block;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: .5rem 0;
    z-index: 1060;
}

.bmg-search-menu[hidden] {
    display: none;
}

.bmg-search-group {
    padding: .5rem 1rem .25rem;
    font-size: 10px;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(var(--bmg-secondary-rgb), .85);
}

.bmg-search-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem 1rem;
    color: rgb(var(--bmg-font-rgb));
    text-decoration: none;
}

.bmg-search-item:hover,
.bmg-search-item.is-active {
    background: rgba(var(--bmg-primary-rgb), .06);
    color: rgb(var(--bmg-font-rgb));
}

.bmg-search-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.bmg-search-item-text > span {
    display: block;
}

.bmg-search-empty {
    padding: .75rem 1rem;
    font-size: .875rem;
    color: rgba(var(--bmg-secondary-rgb), .9);
}

.bmg-search-footer {
    margin-top: .25rem;
    padding: .5rem 1rem 0;
    border-top: 1px solid rgba(var(--bmg-font-rgb), .08);
}

.bmg-search-footer .btn.is-active {
    background: rgba(var(--bmg-primary-rgb), .06);
}

/* --- What is not a person: an icon in the avatar's place, in the hit card and the quick results --- */

.bmg-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bmg-avatar-sm-size, 36px);
    height: var(--bmg-avatar-sm-size, 36px);
    border-radius: 50%;
    background: rgba(var(--bmg-primary-rgb), .08);
    color: rgb(var(--bmg-primary-rgb));
    font-size: .95rem;
    text-shadow: none;
}

/* --- The result page: the design's search box, full width and a little taller --- */

.bmg-search-hero .card-toolbar-wrapper {
    max-width: 720px;
}

.bmg-search-hero .incident-search {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
}

.bmg-search-hero .incident-search .form-control {
    width: 100%;
    font-size: 1rem;
}

.bmg-search-hero input[type="search"]::-webkit-search-decoration,
.bmg-search-hero input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

#searchPage .btn.btn-white.sm.active {
    background: rgba(var(--bmg-primary-rgb), .08);
    border-color: rgba(var(--bmg-primary-rgb), .25);
}


/* =====================================================
   18. WORKSPACE NAVIGATION
   Views/Next/Shared/Partials/_TopNav, _Layout and Views/Next/Account/Partials. None of it is in the design drop:
   the active workspace's name on the switcher button, so a page names where it is with the sidebar folded; the
   personal assistant menu, built like the company switcher beside it (17); and the banner shown while an assistant
   acts on behalf of somebody, which sits with the beta banner (13).
===================================================== */

.bmg-workspace-switcher-label {
    max-width: 14rem;
    margin: 0 .1rem 0 .4rem;
    overflow: hidden;
    font-size: .875rem;
    font-weight: 500;
    font-variation-settings: "wght" 530;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A sidebar submenu heading (Reception's Company settings, NextNavLink.Group; Michael, 2026-09-18). The design's submenu
   markup wraps the heading's icon and label in a div, but app.css folds and fades only a link's direct-child span, so in
   the folded sidebar the label spilled out beside the icon. The same three states app.css gives .nav-link>span. */
.sidebar .nav-link > div > span {
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
    white-space: nowrap;
}

.sidebar.labels-visible .nav-link > div > span {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease;
}

.sidebar.collapsed .nav-link > div > span {
    display: none !important;
}

.bmg-assistant-switch-menu {
    width: 20rem;
    max-width: calc(100vw - 1.5rem);
}

.bmg-assistant-switch-list {
    max-height: 20rem;
    overflow-y: auto;
}

.bmg-assistant-switch-status {
    margin: 0;
    padding: .5rem 1rem;
    font-size: .875rem;
    color: rgba(var(--bmg-secondary-rgb), .9);
}

.bmg-acting-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem 1rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    text-align: center;
    color: rgb(var(--bmg-font-rgb));
    background: rgba(var(--bmg-danger-rgb), .1);
}

.bmg-acting-banner-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    text-decoration: underline;
}

/* --- Add-on settings pages (Views/Next/AddOns): rows of records inside a settings card --- */

.bmg-field-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.bmg-field-row {
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .8rem;
    padding: 1rem;
    background: var(--bmg-surface, #fff);
}

.bmg-field-row-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.bmg-field-order {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(var(--bmg-primary-rgb), .1);
    color: var(--bmg-primary);
    font-weight: 600;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .35rem;
}

.bmg-field-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bmg-field-row-options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--bmg-border-subtle);
}

.bmg-field-row-options .form-check {
    margin-bottom: 0;
}

.bmg-field-legend dt {
    font-weight: 600;
    margin-top: .35rem;
}

.bmg-field-legend dd {
    margin-bottom: 0;
}

/* Visitor types: a category with its rows; doors, access levels and catalogue lists reuse the row. */
.bmg-vt-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bmg-vt-group {
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .8rem;
    padding: 1rem;
}

.bmg-vt-group-ungrouped {
    border-style: dashed;
}

.bmg-vt-group-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .75rem;
}

.bmg-vt-rows {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.bmg-vt-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .6rem;
    background: var(--bmg-surface, #fff);
}

.bmg-vt-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: var(--bmg-surface-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bmg-vt-category {
    flex: 0 0 auto;
    min-width: 11rem;
}

.bmg-vt-empty {
    margin-top: .5rem;
}

@media (max-width: 767.98px) {
    .bmg-vt-row {
        flex-wrap: wrap;
    }

    .bmg-vt-category {
        flex-basis: 100%;
    }
}

/* TeleGate (AddOns/ConfigureAddOn_TeleGate, Partials/_CreateEditTeleGateAccessLevel, 2026-09-17): the setup steps, the
   facts under a door or access level, the choices under a radio, the chosen hosts and "Check a person". */
.bmg-telegate-steps {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bmg-telegate-steps > li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .6rem;
    background: var(--bmg-surface, #fff);
}

.bmg-telegate-step-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bmg-surface-muted);
    font-size: .85rem;
    font-weight: 600;
}

.bmg-telegate-steps > li.is-done .bmg-telegate-step-mark {
    background: rgba(var(--bmg-success-rgb), .15);
    color: rgb(var(--bmg-success-rgb));
}

.bmg-telegate-steps > li > .btn {
    flex: 0 0 auto;
    align-self: center;
}

.bmg-telegate-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1rem;
    min-width: 0;
}

.bmg-telegate-meta > span {
    min-width: 0;
    max-width: 100%;
}

.bmg-telegate-meta .fa-fw {
    margin-right: .25rem;
}

.bmg-telegate-choices {
    margin: .75rem 0 0 1.75rem;
}

.bmg-telegate-filter {
    width: 11rem;
}

.bmg-telegate-people {
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .6rem;
    background: var(--bmg-surface, #fff);
}

.bmg-telegate-person {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bmg-border-subtle);
}

.bmg-telegate-person:last-child {
    border-bottom: 0;
}

.bmg-telegate-check {
    max-width: 32rem;
}

.bmg-telegate-check-levels {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bmg-telegate-check-levels li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .bmg-telegate-steps > li {
        flex-wrap: wrap;
    }

    .bmg-telegate-steps > li > .btn {
        margin-left: 2.75rem;
    }

    .bmg-telegate-choices {
        margin-left: 0;
    }

    .bmg-telegate-filter {
        width: 100%;
    }
}

/* A visitor type (AddOns/CreateEditVisitorType): the translations fold, the icon picker, the sticky save bar. */
.bmg-translation-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .5rem;
    align-items: center;
    margin-bottom: .35rem;
}

.bmg-icon-current {
    width: 3rem;
    justify-content: center;
    font-size: 1.1rem;
}

.bmg-icon-picker {
    margin-top: .5rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .8rem;
    padding: .75rem;
    background: var(--bmg-surface, #fff);
}

.bmg-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
    gap: .25rem;
    max-height: 16rem;
    overflow-y: auto;
    margin-top: .5rem;
}

.bmg-icon-grid button {
    border: 1px solid transparent;
    border-radius: .5rem;
    background: none;
    height: 2.5rem;
    font-size: 1.1rem;
    color: inherit;
}

.bmg-icon-grid button:hover,
.bmg-icon-grid button.is-selected {
    border-color: var(--bmg-border-subtle);
    background: var(--bmg-surface-muted);
}

.bmg-icon-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--bmg-border-subtle);
}

/* One form spans the whole page, so its Save follows the reader down. */
.bmg-settings-sticky-save {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}

@media (max-width: 767.98px) {
    .bmg-translation-row {
        grid-template-columns: minmax(0, 1fr);
        gap: .15rem;
    }
}

/* Meeting rooms: one imported room. */
.bmg-room {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .8rem;
    padding: 1rem;
}

.bmg-room-image {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.bmg-room-image img {
    width: 96px;
    height: 96px;
    border-radius: .6rem;
    object-fit: cover;
    background: var(--bmg-surface-muted);
}

.bmg-room-body {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .bmg-room {
        flex-direction: column;
    }
}

/* Teams bot: the language strip and one trigger. */
.bmg-flag {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    object-fit: cover;
}

.bmg-teams-trigger textarea {
    font-family: inherit;
}

/* Visitor catering: product cards, image preview and the menu builder. */
.bmg-hosp-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: .6rem;
    object-fit: cover;
    background: var(--bmg-surface-muted);
}

.bmg-hosp-thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bmg-secondary);
}

.bmg-hosp-product.is-unavailable {
    opacity: .55;
}

.bmg-hosp-image-preview {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: .6rem;
    border: 1px solid var(--bmg-border-subtle);
    background: var(--bmg-surface-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bmg-secondary);
    font-size: 1.4rem;
}

.bmg-hosp-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#hospProductTags [data-hosp-tag].active {
    background: var(--bmg-primary);
    border-color: var(--bmg-primary);
    color: #fff;
}

.bmg-hosp-menu-category {
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .6rem;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
}

.bmg-hosp-rule {
    width: 4.5rem;
}


/* =====================================================
   19. UTILITIES THE DESIGN DOES NOT SHIP
===================================================== */

/* Bootstrap 5 has no .min-w-0, yet the Next views use it (as Tailwind spells it) on the growing flex child that carries
   a truncated or clamped text. Without it a flex item never shrinks below its content, so a nowrap title pushes its
   siblings out of the card: the company add-on catalogue overflowed exactly so. */
.min-w-0 {
    min-width: 0 !important;
}

/* app.css ships `::selection { background: transparent }` (a normalize.css remnant with the colour taken out), so
   text can be selected on every Next page but the highlight never shows: dragging over a name or a phone number
   looks like nothing happened. Give the selection back a visible colour, a soft tint of the design's primary so it
   reads on the white cards and the grey ground alike. Keep the drop's text-shadow reset. */
::selection {
    background: rgba(var(--bmg-primary-rgb), 0.22);
    color: inherit;
    text-shadow: none;
}

::-moz-selection {
    background: rgba(var(--bmg-primary-rgb), 0.22);
    color: inherit;
    text-shadow: none;
}

/* =====================================================
   20. MEETING ROOM CALENDAR

   Views/Next/MeetingRooms/Calendar.cshtml + bmg-meeting-room-calendar.js. The design's calendar
   (dist/css/calendar.css: week-calendar, calendar-header, executor-col, executor, cell, event)
   is a grid of executors by weekday. Here it is rooms by hour: the rows keep the design's
   classes and look, and this section replaces the five-column grid with a flex row whose
   lane is --bmg-mrc-hour wide per hour. Every position in the lane is a calc() on that one
   variable, set by the script, so zoom and resize never re-render.
===================================================== */

.bmg-mrc-calendar {
    --bmg-mrc-hour: 96px;
    --bmg-mrc-hours: 14;
    --bmg-mrc-room-w: 220px;
    --bmg-mrc-header-h: 48px;
    position: relative;
    overflow: auto;
    max-height: calc(100vh - 220px);
    min-height: 240px;
    scrollbar-gutter: stable;
}

@media (max-width: 767.98px) {
    .bmg-mrc-calendar {
        --bmg-mrc-room-w: 150px;
        max-height: calc(100vh - 160px);
    }
}

/* The design's header and body are CSS grids of six columns; here both are stacks of flex rows. */
.bmg-mrc-calendar .calendar-header,
.bmg-mrc-calendar .calendar-body {
    display: block;
    overflow: visible;
    max-height: none;
    min-width: max-content;
}

.bmg-mrc-calendar .calendar-header {
    display: flex;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 7;
    height: var(--bmg-mrc-header-h);
}

.bmg-mrc-corner {
    flex: 0 0 var(--bmg-mrc-room-w);
    width: var(--bmg-mrc-room-w);
    position: sticky;
    left: 0;
    z-index: 8;
    background: rgb(var(--bmg-secondary-rgb));
    font-size: 0.95rem;
    padding: 0.85rem 1rem 0 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bmg-mrc-axis {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--bmg-mrc-hour) * var(--bmg-mrc-hours));
    height: 100%;
    background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px var(--bmg-mrc-hour));
}

.bmg-mrc-hour {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 0 0 0.6rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    pointer-events: none;
}

.bmg-mrc-now-marker {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    transform: translateX(-50%);
    padding-top: 0.35rem;
    pointer-events: none;
    z-index: 2;
}

.bmg-mrc-now-marker span {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: var(--bmg-pill-radius, 999px);
    background: rgb(var(--bmg-danger-rgb));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.bmg-mrc-row {
    display: flex;
    align-items: stretch;
    min-width: max-content;
}

/* The design's executor cell, made compact: two lines, sticky at the left. */
.bmg-mrc-calendar .executor.bmg-mrc-room {
    flex: 0 0 var(--bmg-mrc-room-w);
    width: var(--bmg-mrc-room-w);
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.5rem 1rem;
    cursor: default;
    min-width: 0;
}

.bmg-mrc-calendar .executor.bmg-mrc-room::after {
    content: none;
}

.bmg-mrc-room-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    line-height: 1.25;
}

.bmg-mrc-room-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.bmg-mrc-room-status {
    color: #8c98a4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: calc(10px + 0.5rem);
}

.bmg-mrc-room-status.is-busy {
    color: rgb(var(--bmg-danger-rgb));
    font-weight: 600;
}

.bmg-mrc-room-status.is-free {
    color: rgb(var(--bmg-success-rgb));
}

/* The lane: one row of the day, hour gridlines drawn from the variable. */
.bmg-mrc-calendar .cell.bmg-mrc-lane {
    flex: 0 0 auto;
    width: calc(var(--bmg-mrc-hour) * var(--bmg-mrc-hours));
    min-height: 48px;
    border-right: 0;
    background-image:
        repeating-linear-gradient(to right, rgb(219, 226, 231) 0 1px, transparent 1px var(--bmg-mrc-hour)),
        repeating-linear-gradient(to right, transparent 0 calc(var(--bmg-mrc-hour) / 2), rgba(219, 226, 231, 0.5) calc(var(--bmg-mrc-hour) / 2) calc(var(--bmg-mrc-hour) / 2 + 1px), transparent calc(var(--bmg-mrc-hour) / 2 + 1px) var(--bmg-mrc-hour));
    transition: background-color 0.15s ease;
}

.bmg-mrc-calendar .cell.bmg-mrc-lane.is-drop {
    background-color: rgba(var(--bmg-secondary-rgb), 0.08);
    box-shadow: inset 0 0 0 2px rgba(var(--bmg-secondary-rgb), 0.25);
}

.bmg-mrc-nowline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: rgb(var(--bmg-danger-rgb));
    pointer-events: none;
    z-index: 2;
}

/* The design's event block, laid out along the hour axis rather than down the day cell. */
.bmg-mrc-calendar .event.bmg-mrc-event {
    right: auto;
    padding: 4px 8px;
    line-height: 1.25;
    cursor: pointer;
    border-left: 3px solid rgba(var(--bmg-secondary-rgb), 0.55);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bmg-mrc-calendar .event.bmg-mrc-event:hover,
.bmg-mrc-calendar .event.bmg-mrc-event:focus-visible {
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
    outline: none;
}

.bmg-mrc-calendar .event.bmg-mrc-event.is-movable {
    cursor: grab;
}

.bmg-mrc-calendar .event.bmg-mrc-event.is-visitors {
    background-color: rgba(var(--bmg-success-rgb), 0.14);
    border-left-color: rgb(var(--bmg-success-rgb));
}

.bmg-mrc-calendar .event.bmg-mrc-event.is-private {
    background-color: #f0f1f5;
    border-left-color: #a6adba;
    color: #74788d;
}

.bmg-mrc-calendar .event.bmg-mrc-event.is-allday {
    border-left-style: dashed;
}

.bmg-mrc-calendar .event.bmg-mrc-event.is-source {
    opacity: 0.35;
}

.bmg-mrc-calendar .event.bmg-mrc-event .title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1px;
    min-width: 0;
}

.bmg-mrc-calendar .event.bmg-mrc-event .title > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bmg-mrc-calendar .event.bmg-mrc-event .title i {
    flex: 0 0 auto;
    opacity: 0.7;
    font-size: 0.7rem;
}

.bmg-mrc-calendar .event.bmg-mrc-event .meta {
    font-size: 0.7rem;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bmg-mrc-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0.35rem;
    border-radius: var(--bmg-pill-radius, 999px);
    background: rgb(var(--bmg-success-rgb));
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.5;
}

.bmg-mrc-badge.is-remote {
    background: rgba(var(--bmg-secondary-rgb), 0.85);
}

.bmg-mrc-badge i {
    opacity: 1;
    font-size: 0.6rem;
}

/* A short meeting at a narrow zoom: the tint stays, the text goes, the tooltip tells. */
.bmg-mrc-calendar .event.bmg-mrc-event.is-narrow .meta,
.bmg-mrc-calendar .event.bmg-mrc-event.is-narrow .bmg-mrc-badge,
.bmg-mrc-calendar .event.bmg-mrc-event.is-tiny .title {
    display: none;
}

.bmg-mrc-calendar .event.bmg-mrc-event.is-narrow {
    padding: 4px 6px;
}

.bmg-mrc-calendar .event.bmg-mrc-event.is-narrow .title {
    height: 100%;
    margin: 0;
}

/* Dragging: the ghost follows the pointer along the target lane, and no block gets in elementFromPoint's way. */
.bmg-mrc-calendar .event.bmg-mrc-ghost {
    pointer-events: none;
    opacity: 0.9;
    transform: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    border-left-color: rgb(var(--bmg-secondary-rgb));
}

body.bmg-mrc-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

body.bmg-mrc-dragging .bmg-mrc-event {
    pointer-events: none;
}

.bmg-mrc-nothing {
    padding: 2rem 1rem;
    text-align: center;
    position: sticky;
    left: 0;
    width: 100%;
    max-width: 100vw;
}

.bmg-mrc-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1.5rem;
    z-index: 20;
}

.bmg-mrc-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 3px;
    background: rgba(var(--bmg-white-rgb), 1);
    border: 1px solid rgba(var(--bmg-font-rgb), 0.15);
    border-left: 3px solid rgba(var(--bmg-secondary-rgb), 0.55);
}

.bmg-mrc-legend-swatch.is-visitors {
    background: rgba(var(--bmg-success-rgb), 0.14);
    border-left-color: rgb(var(--bmg-success-rgb));
}

.bmg-mrc-legend-swatch.is-private {
    background: #f0f1f5;
    border-left-color: #a6adba;
}

/* The confirmation before a move (SweetAlert2 body). */
.bmg-mrc-confirm-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.bmg-mrc-confirm-line > span:first-child {
    flex: 0 0 4rem;
}

.bmg-mrc-confirm-warning {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(var(--bmg-warning-rgb), 0.12);
    font-size: 0.85rem;
}

.bmg-mrc-confirm-warning.is-info {
    background: rgba(var(--bmg-secondary-rgb), 0.08);
}

.bmg-mrc-confirm-conflicts {
    margin: 0.35rem 0 0;
    padding-left: 1.2rem;
}

/* The details slide-in. */
.bmg-mrc-details-head {
    padding: 0.25rem 0 0.25rem 0.85rem;
    border-left: 4px solid rgb(var(--bmg-secondary-rgb));
}

.bmg-mrc-details-status {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(var(--bmg-secondary-rgb), 0.06);
}

.bmg-mrc-details-status.is-linked {
    background: rgba(var(--bmg-success-rgb), 0.08);
}

/* =====================================================
   21. CATERING ORDERS
   Views/Next/HospitalityOrders. The drop has no catering pages; these are the few
   pieces its vocabulary does not cover: the production list in "To produce", the
   order lines table, the delivered-quantity inputs and the order's audit trail.
===================================================== */

.bmg-produce-list li + li {
    border-top: 1px solid var(--bmg-border-subtle);
}

.bmg-produce-qty {
    min-width: 3rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bmg-order-lines th,
.bmg-order-lines td {
    font-size: .85rem;
}

.bmg-order-lines th {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.bmg-order-delivered {
    width: 6rem;
}

/* A note is free text typed by the host: keep its line breaks, never its markup. */
.bmg-order-note {
    white-space: pre-line;
}

.bmg-order-log li + li {
    border-top: 1px solid var(--bmg-border-subtle);
}

.bmg-order-log-time {
    min-width: 8rem;
}

/* =====================================================
   22. VISITOR HISTORY DISTRIBUTION
   Views/Next/Visitors/History. The classic page's check-ins-per-weekday heat map,
   which the drop has no equivalent for: a plain table whose cells darken with the
   count, on the design's primary tone.
===================================================== */

.bmg-heat-legend {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.bmg-heat-swatch {
    display: inline-block;
    width: 20px;
    height: 12px;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 2px;
}

.bmg-heat-table th,
.bmg-heat-table td {
    text-align: center;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bmg-heat-table th {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.bmg-heat-sticky {
    position: sticky;
    left: 0;
    background: #fff;
    text-align: left !important;
    z-index: 1;
}

.bmg-heat-total {
    font-weight: 600;
    background: rgba(var(--bmg-font-rgb), .03);
}

.bmg-heat-grand-total {
    font-weight: 700;
}

.bmg-heat-0 { background: transparent; }
.bmg-heat-1 { background: rgba(var(--bmg-primary-rgb), .08); }
.bmg-heat-2 { background: rgba(var(--bmg-primary-rgb), .18); }
.bmg-heat-3 { background: rgba(var(--bmg-primary-rgb), .30); }
.bmg-heat-4 { background: rgba(var(--bmg-primary-rgb), .45); color: #fff; }
.bmg-heat-5 { background: rgba(var(--bmg-primary-rgb), .65); color: #fff; }
.bmg-heat-6 { background: rgba(var(--bmg-primary-rgb), .85); color: #fff; }

/* =====================================================
   23. COMPANY GUEST PROFILE
   Views/Next/Visitors/CompanyGuestProfile. The drop has no page for looking at
   somebody else, so a few of its parts are adapted: the profile page's pill tabs
   take up to five entries in an 8-column panel, the summary column's info rows get
   a narrower label column, and the consent page's inert sticky-summary-panel hook
   is given its stickiness.
===================================================== */

.bmg-guest-profile .bmg-guest-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

/* Five entries have to share an 8-column panel: no minimum width, tighter padding, and the
   count pill only where there is room for it. */
.bmg-guest-profile .bmg-guest-tabs .btn {
    min-width: 0;
    flex: 1 1 auto;
    padding-left: .85rem;
    padding-right: .85rem;
    white-space: nowrap;
}

.bmg-guest-profile .bmg-guest-tab-count {
    display: none;
    font-size: .65em;
}

@media (min-width: 1400px) {
    .bmg-guest-profile .bmg-guest-tab-count {
        display: inline-flex;
    }
}

/* A date or a time in a tile, next to the counted numbers: the same weight and rhythm as
   .stat-number, but off that class, because generic.js counts every .stat-number up from
   data-counter and would print NaN over it. */
.bmg-guest-kpi-text {
    font-size: 1.35rem;
    line-height: 1.1;
    font-weight: 600 !important;
    font-variation-settings: "wght" 700;
}

/* The label under a tile may take two lines here; the tiles are narrower than on the reception desk. */
.bmg-guest-profile .kpi-label {
    white-space: normal;
    line-height: 1.2;
}

.bmg-guest-summary .card-body-info-row {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: .75rem;
}

@media (max-width: 1199.98px) {
    .bmg-guest-summary .card-body-info-row {
        grid-template-columns: 1fr;
        gap: .15rem;
    }
}

@media (min-width: 1200px) {
    .bmg-guest-profile .sticky-summary-panel {
        position: sticky;
        top: 1.5rem;
    }
}

.bmg-guest-host-row {
    color: inherit;
    border-radius: .75rem;
    padding: .25rem .5rem;
    margin: 0 -.5rem;
}

.bmg-guest-host-row:hover {
    background: rgba(var(--bmg-font-rgb), .05);
    color: inherit;
}

.bmg-guest-profile h1 .badge,
.bmg-guest-profile h1 .status-chip {
    font-size: .45em;
    vertical-align: middle;
}

/* =====================================================
   24. SYSTEM ADMINISTRATION
   The system administrators' pages under AdminController. The drop ships no table, so .bmg-admin-table is the
   Customers grid's heading style (section 07) without its sticky scroll box, for the admin lists to share. Then
   Views/Next/Admin/MultiHouseManagement.cshtml: positions, move buttons, the add-location results.
===================================================== */

.bmg-admin-table {
    --bs-table-bg: transparent;
    font-size: .875rem;
}

.bmg-admin-table thead th {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bmg-border-muted);
    color: rgb(var(--bmg-text-muted-rgb));
    font-size: .7rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bmg-admin-table tbody td {
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--bmg-border-subtle);
    vertical-align: middle;
}

.bmg-admin-table tbody:last-child tr:last-child td {
    border-bottom: 0;
}

.bmg-admin-table tbody tr:hover td {
    background: rgba(var(--bmg-active-rgb), .5);
}

/* --- Multi-house management --- */

.bmg-mh-col-order,
.bmg-mh-col-narrow {
    width: 1%;
    white-space: nowrap;
}

.bmg-mh-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: rgba(var(--bmg-primary-rgb), .08);
    color: var(--bmg-primary);
    font-size: .8rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

.bmg-mh-move {
    gap: 2px;
}

.bmg-mh-move .btn {
    min-height: 0;
    padding: .05rem .45rem;
    line-height: 1.1;
    font-size: .7rem;
}

.bmg-mh-move .btn:disabled {
    opacity: .3;
}

@keyframes bmg-mh-moved {
    from {
        background-color: rgba(var(--bmg-primary-rgb), .14);
    }

    to {
        background-color: transparent;
    }
}

.bmg-admin-table tbody tr.is-moved td {
    animation: bmg-mh-moved 1s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .bmg-admin-table tbody tr.is-moved td {
        animation: none;
    }
}

.bmg-mh-also-managed {
    color: var(--bs-warning-text-emphasis);
}

.bmg-admin-table tbody tr.is-removed td {
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-mh-removed-title {
    background: var(--bmg-surface-subtle);
}

.bmg-mh-option {
    line-height: 1.3;
    padding: .1rem 0;
}

/* Select2 paints the highlighted result in the primary colour; the muted and warning lines follow its text colour
   there. .text-muted carries !important itself, hence the specificity and the !important. */
.select2-container .select2-results__option--highlighted .bmg-mh-option .text-muted,
.select2-container .select2-results__option--highlighted .bmg-mh-option .bmg-mh-also-managed {
    color: inherit !important;
    opacity: .85;
}

/* =====================================================
   24. SYSTEM LOGS
   Views/Next/Admin/Logs. The drop has no system administration pages. Its arrival
   chart plots all 24 hours here, as links, with the worst level in each hour as the
   bar's tone and a selected hour; a stack trace needs a code block the drop does not
   ship; the day menu scrolls, as a log is kept for 90 days.
===================================================== */

.bmg-log-day-menu {
    max-height: 22rem;
    overflow-y: auto;
}

/* A removable filter: a status chip that may shrink, with its text cut short. */
.bmg-log-filter-chip {
    min-width: 0;
    max-width: 100%;
    flex-shrink: 1;
}

.bmg-log-filter-chip .text-truncate {
    min-width: 0;
    max-width: 28rem;
}

.bmg-log-filter-chip:hover {
    background: rgba(var(--chip-rgb), .2);
}

.bmg-log-hours .arrival-chart-slot {
    color: inherit;
    text-decoration: none;
    border-radius: .5rem;
}

.bmg-log-hours .arrival-chart-slot:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .45);
    outline-offset: 2px;
}

.bmg-log-hours .arrival-chart-slot.has-warnings .arrival-chart-bar {
    background: rgba(var(--bmg-warning-rgb), .9);
}

.bmg-log-hours .arrival-chart-slot.has-errors .arrival-chart-bar {
    background: rgba(var(--bmg-danger-rgb), .75);
}

.bmg-log-hours.has-selection .arrival-chart-slot:not(.is-selected) .arrival-chart-bar {
    opacity: .35;
}

.bmg-log-hours .arrival-chart-slot.is-selected .arrival-chart-hour {
    color: rgb(var(--bmg-font-rgb));
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

/* 24 labels do not fit side by side below lg: every other hour. */
@media (max-width: 991.98px) {
    .bmg-log-hours .arrival-chart-slot:nth-child(even) .arrival-chart-hour {
        display: none;
    }
}

.bmg-log-pre {
    margin: 0;
    padding: 1rem;
    max-height: 28rem;
    overflow: auto;
    border-radius: .75rem;
    background: rgba(var(--bmg-font-rgb), .04);
    color: rgb(var(--bmg-font-rgb));
    font-size: .8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    /* .card sets a white text-shadow, which blurs small monospace text. */
    text-shadow: none;
}

.bmg-log-signature {
    font-family: var(--bs-font-monospace);
    font-size: .8rem;
    word-break: break-all;
}

.bmg-log-thread {
    max-width: 12rem;
}

.bmg-log-thread .text-truncate {
    min-width: 0;
}

/* The issue whose occurrences are listed below it. An outline, because the cards' hover shadow is !important. */
.bmg-log-card-selected {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .45);
    outline-offset: -2px;
}

/* Clear of the sticky top nav when a link jumps to the entries. */
.bmg-log-anchor {
    scroll-margin-top: 6rem;
}

/* =====================================================
   25. SYSTEM ADMINISTRATION: TILES, CHARTS, NPS, SUBSCRIPTION REVENUE
   More for the system administrators' pages, beside section 24's .bmg-admin-table:
   a tile value that is not counted up, a change badge, a chart box, a paged or long
   table, and table footers, for any admin page to share. Then
   Views/Next/Admin/NpsDashboard and Views/Next/SubscriptionRevenue/Index.
===================================================== */

/* A tile value set on the server: the type of the design's .stat-number, without the
   count-up. generic.js counts every .stat-number up from data-counter and cannot show
   a sign, a decimal or a percentage. Proportional figures, as a standalone number has. */
.bmg-admin-kpi-value {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

.bmg-admin-kpi-sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A change beside a tile value: the design's soft tone badges at the size of small text.
   The arrow and the sign say the direction; the tone only repeats it. */
.bmg-admin-delta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
    padding: .15em .5em;
    border-radius: var(--bmg-pill-radius);
    font-size: .75rem;
    white-space: nowrap;
}

.bmg-admin-delta i {
    font-size: .65rem;
}

.bmg-admin-delta.is-flat {
    background: rgba(var(--bmg-font-rgb), .06);
    color: rgb(var(--bmg-text-muted-rgb));
    border: 1px solid rgba(var(--bmg-font-rgb), .08);
    font-weight: 700;
    font-variation-settings: "wght" 800;
}

/* Chart.js needs a sized, positioned box. The height takes in the axis labels, which
   Chart.js draws inside the canvas, so a card never gets a scrollbar of its own. */
.bmg-admin-chart {
    position: relative;
    height: 260px;
}

.bmg-admin-chart-empty,
.bmg-admin-chart-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bmg-admin-chart-empty {
    min-height: 200px;
}

.bmg-admin-chart-missing {
    position: absolute;
    inset: 0;
}

@media (max-width: 575.98px) {
    .bmg-admin-chart {
        height: 220px;
    }
}

/* Section 24 draws .bmg-admin-table's rules under each row and drops the last one. A paged
   or searched list hides rows, so its last visible row is not the last child and would end
   on a rule against the card's edge: such a list draws the rule above each row instead. */
.bmg-admin-table thead:has(+ tbody [data-pagination-card]) th {
    border-bottom: 0;
}

.bmg-admin-table tbody:has([data-pagination-card]) td {
    border-top: 1px solid var(--bmg-border-subtle);
    border-bottom: 0;
}

.bmg-admin-table td.text-end,
.bmg-admin-table th.text-end {
    font-variant-numeric: tabular-nums;
}

.bmg-admin-table a:not(.btn) {
    color: var(--bmg-primary);
    font-weight: 500;
    font-variation-settings: "wght" 530;
    text-decoration: none;
}

.bmg-admin-table a:not(.btn):hover {
    text-decoration: underline;
}

/* A verbatim answer quoted inside a cell: Microsoft Graph's own JSON on the Entra diagnostics
   page. Monospace, because what is being read there is the shape of a value (whether a number
   carries a country code) as much as the value; wrapped, so one long line cannot widen the
   table; and capped in height, so a long body cannot push the rest of the page out of reach. */
.bmg-admin-raw {
    max-height: 18rem;
    overflow: auto;
    margin: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: var(--bmg-control-radius);
    background: var(--bmg-surface-muted);
    font-size: .78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* A table footer: the totals, set off by the stronger rule the heading uses. */
.bmg-admin-table tfoot th {
    padding: .7rem 1rem;
    border-top: 1px solid var(--bmg-border-muted);
    border-bottom: 0;
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

/* A long list scrolls inside its card under a heading that stays put, as on WallboardV2. */
.bmg-admin-table-scroll {
    max-height: 560px;
    overflow: auto;
}

.bmg-admin-table-scroll .bmg-admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bmg-surface);
}

/* --- Subscription revenue (Views/Next/SubscriptionRevenue/Index) ---
   Every amount is drawn with and without Danish VAT and the switch shows one: without VAT
   unless it is turned off, as on the classic page. */
.bmg-sr [data-sr-results] .bmg-vat-incl {
    display: none;
}

.bmg-sr [data-sr-results].is-incl-vat .bmg-vat-incl {
    display: inline;
}

.bmg-sr [data-sr-results].is-incl-vat .bmg-vat-ex {
    display: none;
}

/* --- QR code batches (Views/Next/Admin/GenerateQrBatch) ---
   The picker of whose batches to list, beside the list's heading: wide enough for a company name. */
.bmg-qr-show {
    width: 100%;
    max-width: 20rem;
}

/* --- Translations (Views/Next/Translations/Index) ---
   The key list scrolls within the window's height, each row opens the slide-in, and the
   slide-in is wide enough for a paragraph in each language. */
.bmg-admin-table-scroll.bmg-tr-scroll {
    max-height: calc(100vh - 22rem);
    min-height: 320px;
}

.bmg-tr-key {
    font-family: var(--bs-font-monospace);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.bmg-translations tbody tr[data-tr-key] {
    cursor: pointer;
}

.bmg-translations tbody tr[data-tr-key]:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .45);
    outline-offset: -2px;
}

.bmg-tr-missing {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* A key the search found by its text in another language: that text, under the English, after its language code. */
.bmg-tr-match {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.bmg-tr-match .inner-badge {
    flex: none;
}

.offcanvas.bmg-tr-canvas {
    --bs-offcanvas-width: min(640px, 100vw);
}

.bmg-admin-table a.text-muted {
    font-weight: 400;
    font-variation-settings: "wght" 450;
}

/* --- NPS dashboard (Views/Next/Admin/NpsDashboard) ---
   Colour means one thing here: the NPS band. Detractors red, passives the neutral grey
   of the design's own chart bars, promoters green, on marks only (the bar, the score
   bars, the swatches, the dots); the text beside a mark keeps the text colours. */
.bmg-nps {
    --bmg-nps-detractor: rgb(var(--bmg-danger-rgb));
    --bmg-nps-passive: rgba(var(--bmg-secondary-rgb), .55);
    --bmg-nps-promoter: rgb(var(--bmg-success-rgb));
    --bmg-nps-dismissed: rgba(var(--bmg-font-rgb), .18);
}

.bmg-nps .is-detractor {
    --bmg-nps-tone: var(--bmg-nps-detractor);
}

.bmg-nps .is-passive {
    --bmg-nps-tone: var(--bmg-nps-passive);
}

.bmg-nps .is-promoter {
    --bmg-nps-tone: var(--bmg-nps-promoter);
}

.bmg-nps .is-dismissed {
    --bmg-nps-tone: var(--bmg-nps-dismissed);
}

/* Detractors, passives and promoters as one bar of the answers. The gap between the
   segments is the card's surface, not a border. */
.bmg-nps-split {
    display: flex;
    gap: 2px;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bmg-surface);
}

.bmg-nps-split.is-empty {
    background: rgba(var(--bmg-font-rgb), .06);
}

.bmg-nps-split-segment {
    flex: 1 1 0;
    min-width: 4px;
    background: var(--bmg-nps-tone);
}

.bmg-nps-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--bmg-nps-tone);
}

.bmg-nps-legend {
    display: grid;
    gap: .15rem;
}

.bmg-nps-legend-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    margin: 0;
    padding: .55rem .75rem;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
}

.bmg-nps-legend-row:hover,
.bmg-nps-legend-row:focus-visible {
    background: rgba(var(--bmg-font-rgb), .05);
}

.bmg-nps-legend-row:disabled {
    background: transparent;
    cursor: default;
}

.bmg-nps-legend-value {
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.bmg-nps-legend-count {
    min-width: 2.5ch;
}

/* The score distribution: the design's arrival chart with a bar per score in its band's
   colour. The slot is named in each rule so the design's grey hover (".arrival-chart-slot:hover
   .arrival-chart-bar") does not repaint the bands. Room at the top for the count on the
   tallest bar. */
.bmg-nps-score-chart {
    --arrival-plot-height: 190px;
    --arrival-bar-width: 18px;
}

.bmg-nps-score-chart .arrival-chart-plot {
    padding-top: 1.35rem;
}

.bmg-nps-score-chart .arrival-chart-slot .arrival-chart-bar {
    background: var(--bmg-nps-tone);
}

.bmg-nps-score-chart .arrival-chart-slot .arrival-chart-bar.is-empty {
    background: rgba(var(--bmg-font-rgb), .1);
}

.bmg-nps-score-chart .arrival-chart-slot:hover .arrival-chart-bar {
    filter: brightness(.92);
}

.bmg-nps-bar-count {
    position: absolute;
    bottom: calc(100% + .3rem);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(var(--bmg-font-rgb), .75);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .bmg-nps-score-chart {
        --arrival-plot-height: 150px;
        --arrival-bar-width: 12px;
    }
}

/* The response list. */
.bmg-nps-person,
.bmg-nps-companies {
    min-width: 12rem;
}

.bmg-nps-person a {
    overflow-wrap: anywhere;
}

.bmg-nps-company + .bmg-nps-company {
    margin-top: .15rem;
}

.bmg-nps-response {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.bmg-nps-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bmg-nps-tone);
}

.bmg-nps-response-score {
    min-width: 1.4ch;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    font-variant-numeric: tabular-nums;
    text-align: end;
}


/* =====================================================
   24. EMAIL TEMPLATES
   Views/Next/EmailTemplates, the designer: the emails in the section rail, the scope and language row, the code
   editor and its merge fields, the preview in a mail client's frame, and the colour swatches of the branding slide-in.
===================================================== */

.bmg-et-rail .bmg-et-nav {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    padding-right: .25rem;
}

.bmg-et-group .bmg-settings-group-title {
    margin: 1rem 0 .35rem;
}

.bmg-et-group:first-child .bmg-settings-group-title {
    margin-top: 0;
}

.bmg-et-rail .bmg-settings-nav .nav-link {
    padding: .45rem .7rem;
    font-size: .9rem;
}

.bmg-et-nav-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bmg-et-langs {
    flex: 0 0 auto;
    color: var(--bmg-secondary);
    font-variant-numeric: tabular-nums;
}

.bmg-et-langs.is-empty {
    color: rgb(var(--bmg-danger-rgb));
}

@media (max-width: 991.98px) {
    /* The shared rail turns its nav into a sideways strip on a small screen. Thirty emails in categories stay a list,
       in a box of their own. */
    .bmg-et-rail .bmg-settings-nav {
        flex-direction: column !important;
        overflow-x: visible;
    }

    .bmg-et-rail .bmg-et-nav {
        max-height: 18rem;
    }
}

.bmg-et-empty-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto;
    border-radius: 1rem;
    background: rgba(var(--bmg-primary-rgb), .08);
    color: var(--bmg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.bmg-et-routing {
    width: 100%;
    max-width: 22rem;
}

.bmg-et-scope-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bmg-border-subtle);
}

.bmg-et-location {
    width: 22rem;
    max-width: 100%;
}

.bmg-et-secondary {
    width: 14rem;
    max-width: 100%;
}

.bmg-et-languages {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
}

.bmg-et-flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem .2rem .25rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: 999px;
    background: var(--bmg-surface);
    color: var(--bmg-font);
    font-size: .8rem;
    font-weight: 500;
    font-variation-settings: "wght" 530;
    line-height: 1.2;
}

.bmg-et-flag img {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    object-fit: cover;
}

.bmg-et-flag:hover {
    background: rgba(var(--bmg-primary-rgb), .06);
}

.bmg-et-flag.active {
    border-color: var(--bmg-primary);
    background: rgba(var(--bmg-primary-rgb), .1);
    color: var(--bmg-primary);
}

.bmg-et-flag.is-missing img {
    filter: grayscale(1);
    opacity: .45;
}

.bmg-et-flag.is-missing span {
    opacity: .6;
}

/* CodeMirror 5 in the design's field shape. */
.bmg-et-code .CodeMirror {
    height: 520px;
    border: 1px solid var(--bs-border-color);
    border-radius: .8rem;
    font-size: 13px;
}

.bmg-et-code .CodeMirror-gutters {
    border-top-left-radius: .8rem;
    border-bottom-left-radius: .8rem;
}

.bmg-et-fields-wrap {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bmg-border-subtle);
}

.bmg-et-fields-title {
    margin-bottom: .35rem;
    font-size: .75rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bmg-secondary);
}

.bmg-et-field-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .75rem;
}

.bmg-et-field {
    padding: .15rem .5rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: .5rem;
    background: var(--bmg-surface);
    color: var(--bmg-font);
    font-family: var(--bs-font-monospace);
    font-size: .78rem;
    line-height: 1.5;
}

.bmg-et-field:hover {
    background: rgba(var(--bmg-primary-rgb), .08);
    border-color: rgba(var(--bmg-primary-rgb), .35);
}

/* An optional field may be empty when the email is sent. */
.bmg-et-field.is-optional {
    border-style: dashed;
}

.bmg-et-mail {
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .8rem;
    overflow: hidden;
}

.bmg-et-mail-head {
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--bmg-border-subtle);
    background: var(--bmg-surface);
    font-size: .8rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.bmg-et-stage {
    padding: .75rem;
    background: var(--bmg-surface-subtle);
}

.bmg-et-frame {
    display: block;
    width: 100%;
    height: 640px;
    margin: 0 auto;
    border: 0;
    border-radius: .5rem;
    background: #fff;
}

.bmg-et-stage.is-mobile .bmg-et-frame {
    width: 390px;
    max-width: 100%;
}

.bmg-et-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .6rem;
}

.bmg-et-swatch {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .4rem .5rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .7rem;
    cursor: pointer;
}

.bmg-et-swatch .form-control-color {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: .15rem;
    border-radius: .5rem;
}

.bmg-et-swatch-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.bmg-et-swatch-text code {
    color: var(--bmg-secondary);
}

[data-et-branding-body].is-busy {
    opacity: .6;
    pointer-events: none;
}


/* =====================================================
   25. PRINTERS
   Views/Next/Admin: Printers, CreatePrinter and EditPrinter (with Partials/_PrinterLabelTemplate, the printer's own
   template editor; the standalone template pages are retired, 2026-09-21). The gateway state in the printer list, the
   serial number slide-in, the command blocks of the gateway panel, and the label preview.
===================================================== */

.bmg-printer-serial {
    text-decoration: underline dotted;
    text-underline-offset: .2em;
}

/* .text-reset sets its colour with !important. */
.bmg-printer-serial:hover {
    color: var(--bmg-primary) !important;
}

.bmg-gateway-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    white-space: nowrap;
}

.bmg-gateway-dot {
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: rgba(var(--bmg-font-rgb), .3);
}

.bmg-gateway-state.is-success .bmg-gateway-dot {
    background: rgb(var(--bmg-success-rgb));
}

.bmg-gateway-state.is-warning .bmg-gateway-dot {
    background: rgb(var(--bmg-warning-rgb));
}

.bmg-gateway-state.is-danger {
    color: rgb(var(--bmg-danger-rgb));
}

.bmg-gateway-state.is-danger .bmg-gateway-dot {
    background: rgb(var(--bmg-danger-rgb));
}

.bmg-gateway-state.is-muted {
    color: var(--bmg-secondary);
}

.bmg-gateway-state.is-info .bmg-gateway-dot {
    background: rgb(var(--bmg-primary-rgb));
}

/* The migration column of the printer list: the verdict in a few words, the full sentence on hover. */
.bmg-migration-state {
    white-space: normal;
    min-width: 9rem;
}

.bmg-printer-stage-filter {
    min-width: 13rem;
}

/* The migration checklist on the printer page (Views/Next/Admin/Partials/_PrinterGatewayMigration, 2026-10-01): one
   verdict on top, then a setting row per step with its state as an icon. */
.bmg-migration-verdict {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.bmg-migration-firewall-text {
    font-size: .8rem;
    line-height: 1.45;
    background: var(--bmg-surface);
}

.bmg-migration-step-icon {
    flex: 0 0 auto;
    width: 1.1rem;
    margin-top: .2rem;
    text-align: center;
    color: rgba(var(--bmg-font-rgb), .35);
}

.bmg-migration-step.is-done .bmg-migration-step-icon {
    color: rgb(var(--bmg-success-rgb));
}

.bmg-migration-step.is-problem .bmg-migration-step-icon {
    color: rgb(var(--bmg-danger-rgb));
}

.bmg-migration-step.is-waiting .bmg-migration-step-icon {
    color: rgb(var(--bmg-warning-rgb));
}

/* The design's warning yellow is too light for text on white: the text stays readable, the icon carries the colour. */
.bmg-migration-note {
    color: rgb(var(--bmg-font-rgb));
}

.bmg-migration-note > .fa-triangle-exclamation {
    color: rgb(var(--bmg-warning-rgb));
}

.bmg-migration-time:not(:empty) {
    margin-left: .25rem;
    white-space: nowrap;
}

/* While the test print waits for the printer, the card stays put but takes no clicks. */
.bmg-migration-card.is-busy .bmg-migration-step,
.bmg-migration-card.is-busy .bmg-migration-verdict {
    opacity: .6;
    pointer-events: none;
}

.offcanvas.offcanvas-end.bmg-printer-serial-canvas {
    --bs-offcanvas-width: 560px;
    max-width: 100vw;
}

.bmg-serial-instance {
    border: 1px solid var(--bmg-border-subtle);
    box-shadow: none;
}

.bmg-serial-instance.is-active {
    border-color: rgba(var(--bmg-success-rgb), .5);
}

.bmg-serial-instance .card-body-info-row {
    grid-template-columns: 9.5rem minmax(0, 1fr);
}

.bmg-command-block {
    font-size: .78rem;
    line-height: 1.45;
    white-space: pre;
    background: var(--bmg-surface-muted);
}

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

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

.bmg-gateway-template-select {
    min-width: 14rem;
}

/* The label preview stays in view beside a long template. As on the settings rail, body has to stop being a scroll
   container of its own for sticky to have something to stick to. */
body:has(.bmg-sticky-panel) {
    overflow-y: visible;
}

@media (min-width: 1200px) {
    .bmg-sticky-panel {
        position: sticky;
        top: 1rem;
    }

    body.has-fixed-nav .bmg-sticky-panel {
        top: 76px;
    }
}

.bmg-zpl-editor {
    min-height: 28rem;
    font-size: .8rem;
    line-height: 1.45;
}

.bmg-label-sample {
    width: 12rem;
}

.bmg-label-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 12rem;
    padding: 1rem;
    border-radius: .8rem;
    background: var(--bmg-surface-subtle);
    text-align: center;
}

.bmg-label-preview img {
    max-width: 100%;
    border: 1px solid var(--bmg-border-subtle);
    background: #fff;
}

.bmg-label-preview-error {
    width: 100%;
    white-space: pre-wrap;
}

/* "Locations using this printer" (Views/Next/Admin/Partials/_PrinterLocationTemplates): one row per location,
   its editor folded away under it until opened. */
.bmg-printer-location + .bmg-printer-location {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bmg-border-subtle);
}

.bmg-printer-location-editor {
    padding: 1rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .8rem;
}

/* =====================================================
   26. SYSTEM ADMIN: COMPANY AND LOCATION
   Views/Next/Admin/EditCompany and EditLocation: setting cards in one form, with a save
   bar that stays in view, a summary column beside them, and CodeMirror for a location's
   check-in CSS. The rows, sections and danger zone themselves are section 15's.
===================================================== */

/* The save bar sticks to the foot of the window. As on the settings pages (section 15), body
   has to stop being a scroll container of its own first, or position: sticky has nothing to
   stick to. */
body:has(.bmg-admin-savebar) {
    overflow-y: visible;
}

.bmg-admin-savebar {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    box-shadow: 0 .5rem 1.5rem rgba(var(--bmg-font-rgb), .1);
}

/* The status badges beside the company or location name. */
.bmg-admin-edit h1 .badge {
    font-size: .45em;
    vertical-align: middle;
}

/* From 1200px the summary column is a third of the page: a narrower label column. */
@media (min-width: 1200px) {
    .bmg-admin-summary .card-body-info-row {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: .75rem;
    }
}

/* CodeMirror (loaded from cdnjs by EditLocation) in the shape of the design's fields. */
.bmg-admin-code .CodeMirror {
    height: 22rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .8rem;
    font-size: .8rem;
}

.bmg-admin-code .CodeMirror-gutters {
    background: var(--bmg-surface-muted);
    border-right: 1px solid var(--bmg-border-subtle);
}

/* =====================================================
   27. RECEPTION DESK: MEETING BLOCKS
   Views/Next/Home/Partials/_ReceptionMeetingBlock and _ReceptionGuestRow (2026-09-14): a meeting
   is one header line with a guest line per guest under it; a visit without a meeting is a single
   line. The Details switch flips .bmg-reception[data-view] between simple (exceptions as words)
   and advanced (every chip as an icon, the legend). Our own component, in the design's tokens;
   the print marks and the location chip are section 14's.
===================================================== */

.bmg-reception .bmg-block-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bmg-reception .bmg-block {
    overflow: visible;
}

/* ---- Header line ---- */

.bmg-block-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--bmg-border-muted);
    border-radius: var(--bmg-card-radius) var(--bmg-card-radius) 0 0;
}

.bmg-block-main {
    display: grid;
    grid-template-columns: 2.5rem 8.5rem minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.bmg-block-main.is-toggle {
    cursor: pointer;
}

.bmg-block-main.is-toggle:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .6);
    outline-offset: 2px;
    border-radius: .5rem;
}

.bmg-block-time {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.bmg-block-status {
    color: rgba(var(--bmg-text-muted-rgb), 1);
    white-space: nowrap;
}

.bmg-block-title {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.bmg-block-source {
    font-size: .68rem;
    font-weight: 600;
    padding: .05rem .45rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: .4rem;
    background: var(--bmg-surface);
    color: rgba(var(--bmg-text-muted-rgb), 1);
    white-space: nowrap;
}

.bmg-block-room i {
    margin-right: .25rem;
}

.bmg-block-room-sep {
    margin: 0 .25rem;
}

.bmg-block-hint {
    color: rgba(var(--bmg-text-muted-rgb), .85);
}

.bmg-block-host {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

/* The tones: red once the meeting has started with someone still expected, amber within
   ReceptionBlockBuilder.SoonMinutes of its start. The section subtitle spells them out in the advanced view. */
.bmg-tone-started .bmg-block-head {
    background: rgba(var(--bmg-danger-rgb), .12);
}

.bmg-tone-started .bmg-block-status {
    color: rgb(var(--bmg-danger-rgb));
    font-weight: 500;
}

.bmg-tone-soon .bmg-block-head {
    background: rgba(var(--bmg-warning-rgb), .2);
}

.bmg-tone-soon .bmg-block-status {
    color: rgb(var(--bmg-font-rgb));
    font-weight: 500;
}

/* ---- Counters and actions ---- */

.bmg-block-side {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    margin-left: auto;
}

.bmg-block-counts {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem .6rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: .6rem;
    background: var(--bmg-surface);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.bmg-count {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.bmg-count i {
    font-size: .75rem;
}

.bmg-count.is-in {
    color: rgb(var(--bmg-success-rgb));
}

.bmg-count.is-out {
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-count.is-late {
    color: rgb(var(--bmg-danger-rgb));
}

.bmg-block-actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.bmg-block-btn {
    width: 2.25rem;
    padding-inline: 0 !important;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.bmg-block-chevron,
.bmg-row-toggle {
    color: rgba(var(--bmg-text-muted-rgb), 1);
    width: 2rem;
    padding-inline: 0 !important;
    text-decoration: none;
}

.bmg-block-chevron-ghost {
    display: inline-block;
    width: 2rem;
}

.bmg-block-chevron i,
.bmg-row-toggle i {
    transition: transform .15s ease;
}

.bmg-block[data-bmg-show-all="1"] .bmg-block-chevron i,
.bmg-row-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* The bulk button in the design's green: the one primary action on the line. */
.bmg-reception .btn-success.xs {
    min-height: var(--bmg-btn-height-xs);
    padding: .45rem .7rem;
    font-size: .8rem;
    border-radius: var(--bmg-control-radius);
}

.bmg-reception .btn-success.xs:hover {
    filter: brightness(.95);
}

/* ---- Guest lines ---- */

.bmg-block-rows,
.bmg-block-others {
    display: flex;
    flex-direction: column;
}

.bmg-block-others {
    display: none;
}

.bmg-block[data-bmg-show-all="1"] .bmg-block-others {
    display: flex;
}

.bmg-row {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1.6fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .55rem 1rem;
    border-top: 1px solid var(--bmg-border-muted);
}

.bmg-block-rows > .bmg-row:first-child {
    border-top: 0;
}

.bmg-row-other {
    background: rgba(var(--bmg-secondary-rgb), .06);
}

.bmg-row-other .bmg-row-who {
    opacity: .75;
}

.bmg-row-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
    font-size: .85rem;
    font-weight: 500;
}

.bmg-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgb(var(--bmg-warning-rgb));
}

.bmg-dot.is-in {
    background: rgb(var(--bmg-success-rgb));
}

.bmg-dot.is-out {
    background: rgba(var(--bmg-text-muted-rgb), .7);
}

.bmg-dot.is-late {
    background: rgb(var(--bmg-danger-rgb));
}

.bmg-row-status-time {
    font-variant-numeric: tabular-nums;
}

.bmg-row-status-arrow {
    font-size: .7rem;
    margin: 0 .2rem;
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-row-status-detail {
    font-size: .75rem;
    font-weight: 400;
    color: rgba(var(--bmg-text-muted-rgb), 1);
    white-space: nowrap;
}

.bmg-row-late .bmg-row-status-text {
    color: rgb(var(--bmg-danger-rgb));
}

.bmg-row-out .bmg-row-status-text {
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

/* A registration reception cancelled as made by mistake (docs/spec-next-cancel-entries.md): the desk's "Show
   cancelled" group. The line's name is struck through by utility classes; the dot and the word go quiet danger. */
.bmg-dot.is-cancelled {
    background: rgba(var(--bmg-danger-rgb), .5);
}

.bmg-row-cancelled .bmg-row-status-text {
    color: rgba(var(--bmg-danger-rgb), .8);
}

.bmg-row-who {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.bmg-row-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}

.bmg-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

/* Keeps the chevrons in one column when a line has no action. */
.bmg-row-action-ghost {
    display: inline-block;
    min-width: 5.5rem;
}

.bmg-row-sms {
    width: 2.25rem;
    padding-inline: 0 !important;
}

.bmg-row-details-body {
    padding: .75rem 1rem 1rem;
    border-top: 1px dashed var(--bmg-border-muted);
    background: rgba(var(--bmg-secondary-rgb), .04);
}

.bmg-row-details-body .card-body-guest-row {
    margin: 0;
}

/* A single line: the date and time first, the status under the time, then the guest, the host, the chips. */
.bmg-row-single {
    grid-template-columns: 2.5rem 8.5rem minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    grid-template-rows: auto auto;
    row-gap: .1rem;
    border-top: 0;
}

.bmg-row-single .bmg-row-lead {
    display: contents;
}

.bmg-row-single .card-date-block {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.bmg-row-single .bmg-block-time-range {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}

.bmg-row-single .bmg-row-status {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

.bmg-row-single .bmg-row-who {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.bmg-row-single .bmg-row-host {
    grid-column: 4;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.bmg-row-single .bmg-row-chips {
    grid-column: 5;
    grid-row: 1 / span 2;
}

.bmg-row-single .bmg-row-actions {
    grid-column: 6;
    grid-row: 1 / span 2;
}

/* ---- Chips ---- */

.bmg-chip {
    --chip-rgb: var(--bmg-secondary-rgb);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border: 1px solid rgba(var(--chip-rgb), .35);
    border-radius: 999px;
    background: rgba(var(--chip-rgb), .12);
    color: rgb(var(--bmg-font-rgb));
    font: inherit;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: default;
    text-shadow: none;
}

button.bmg-chip {
    cursor: pointer;
}

button.bmg-chip:hover,
button.bmg-chip:focus-visible {
    background: rgba(var(--chip-rgb), .24);
}

.bmg-chip i {
    font-size: .7rem;
}

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

.bmg-chip.is-warning {
    --chip-rgb: var(--bmg-warning-rgb);
    background: rgba(var(--bmg-warning-rgb), .26);
}

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

.bmg-chip.is-muted {
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-chip-count {
    font-weight: 700;
}

/* Simple: only the exceptions, as words. Advanced: every chip as an icon (the count stays), the legend, the host's
   title, the source badge and the finer status texts. */
.bmg-reception[data-view="simple"] .bmg-chip:not(.is-exception) {
    display: none;
}

.bmg-reception[data-view="simple"] .bmg-advanced-only {
    display: none !important;
}

.bmg-reception[data-view="simple"] .bmg-row-status-detail:not(.is-always) {
    display: none;
}

.bmg-reception[data-view="advanced"] .bmg-row-chips .bmg-chip-text {
    display: none;
}

.bmg-reception[data-view="advanced"] .bmg-row-chips .bmg-chip {
    padding: .2rem .45rem;
}

.bmg-chip-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .6rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: var(--bmg-card-radius);
    background: var(--bmg-surface);
    font-size: .8rem;
}

.bmg-chip-legend-title {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--bmg-text-muted-rgb), 1);
    margin-right: .25rem;
}

.bmg-chip-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.bmg-chip-legend-tones {
    display: inline-flex;
    gap: 1rem;
    margin-left: auto;
}

.bmg-section-legend {
    margin-left: .25rem;
}

/* ---- Foot and the meeting's panels ---- */

.bmg-block-foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem 1rem;
    border-top: 1px solid var(--bmg-border-muted);
    background: rgba(var(--bmg-secondary-rgb), .04);
}

.bmg-block-foot .bmg-block-add {
    position: static;
    margin: 0;
}

.bmg-block > .collapse > .card-body,
.bmg-block > .collapsing > .card-body {
    border-top: 1px solid var(--bmg-border-muted);
}

.bmg-block .card-body-section-title.mt-xl-4:first-child {
    margin-top: 0 !important;
}

/* ---- Narrow screens ---- */

@media (max-width: 991.98px) {
    .bmg-block-head {
        flex-wrap: wrap;
    }

    .bmg-block-main {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .bmg-block-title,
    .bmg-block-host {
        grid-column: 1 / -1;
    }

    .bmg-block-side {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .bmg-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .bmg-row-status,
    .bmg-row-chips {
        grid-column: 1 / -1;
    }

    .bmg-row-single {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        grid-template-rows: auto;
    }

    .bmg-row-single .card-date-block,
    .bmg-row-single .bmg-block-time-range,
    .bmg-row-single .bmg-row-status,
    .bmg-row-single .bmg-row-who,
    .bmg-row-single .bmg-row-host,
    .bmg-row-single .bmg-row-chips,
    .bmg-row-single .bmg-row-actions {
        grid-column: auto;
        grid-row: auto;
    }

    .bmg-row-single .bmg-row-status,
    .bmg-row-single .bmg-row-host,
    .bmg-row-single .bmg-row-chips {
        grid-column: 1 / -1;
    }

    .bmg-chip-legend-tones {
        margin-left: 0;
    }
}

/* ---- Section 27, second round (Michael, 2026-09-14 afternoon) ---- */

/* A chip shown in both views whatever its state: the note tile. */
.bmg-reception[data-view="simple"] .bmg-chip.is-always {
    display: inline-flex;
}

/* A set note: the primary tone, so it is seen. */
.bmg-chip.is-info {
    --chip-rgb: var(--bmg-primary-rgb);
    background: rgba(var(--bmg-primary-rgb), .16);
    border-color: rgba(var(--bmg-primary-rgb), .5);
    font-weight: 600;
}

/* Something went wrong that reception must see at once: a parking registration the system refused. Solid red,
   the words kept in both views, and a pulse (none when the viewer asks for less motion). */
.bmg-chip.is-alarm {
    background: rgb(var(--bmg-danger-rgb));
    border-color: rgb(var(--bmg-danger-rgb));
    color: #fff;
    font-weight: 700;
    animation: bmg-chip-alarm 1.6s ease-in-out infinite;
}

.bmg-reception[data-view="advanced"] .bmg-row-chips .bmg-chip.is-alarm .bmg-chip-text {
    display: inline;
}

button.bmg-chip.is-alarm:hover,
button.bmg-chip.is-alarm:focus-visible {
    background: rgba(var(--bmg-danger-rgb), .85);
}

@keyframes bmg-chip-alarm {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bmg-danger-rgb), .55); }
    50% { box-shadow: 0 0 0 6px rgba(var(--bmg-danger-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .bmg-chip.is-alarm {
        animation: none;
    }
}

/* The search hides the lines that do not match, line by line, and the block says how many it hides. */
.bmg-row[data-search-hidden="true"],
.bmg-row[data-search-hidden="true"] + .collapse {
    display: none;
}

.bmg-block-search-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-top: 1px solid var(--bmg-border-muted);
    background: rgba(var(--bmg-warning-rgb), .12);
    font-size: .78rem;
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

/* A cancelled guest on an opened meeting: struck through, quiet, with Undo cancellation as its action. */
.bmg-row-cancelled .bmg-row-who {
    opacity: .6;
}

.bmg-row-cancelled .bmg-row-who .fw-semibold {
    text-decoration: line-through;
}

.bmg-count.is-cancelled {
    color: rgba(var(--bmg-danger-rgb), .8);
}

/* Alignment: the chips sit against the actions, the actions take one column of a fixed width, the primary button
   has one width, and every control on a line is the same height, so the lines read as a table. */
.bmg-row-chips {
    justify-content: flex-end;
}

.bmg-row-actions {
    min-width: 12.5rem;
}

.bmg-row-actions .btn,
.bmg-block-actions > .btn,
.bmg-block-actions > .dropdown > .btn {
    height: 2rem;
    min-height: 2rem;
    padding-block: 0;
}

.bmg-row-checkin,
.bmg-row-checkout,
.bmg-row-action-ghost {
    min-width: 6.75rem;
    justify-content: center;
}

.bmg-row-actions .dropdown > .btn {
    width: 2.25rem;
    padding-inline: 0 !important;
    justify-content: center;
}

.bmg-block-bulk .btn:first-child {
    min-width: 8.5rem;
    justify-content: center;
}

/* ---- Section 27, third round (Michael, 2026-09-14): a compact counter, no note line under the title. ---- */
.bmg-block-counts {
    gap: .5rem;
    padding: .25rem .5rem;
    font-size: .78rem;
}

.bmg-block-room {
    margin-top: .1rem;
}

.bmg-reception .bmg-block-source {
    font-size: .62rem;
}
/* ---- Section 27, fourth round (Michael, 2026-09-14): the split check-all button as one control. ---- */
.bmg-block-bulk {
    display: inline-flex;
    align-items: stretch;
}

.bmg-block-bulk > .btn {
    height: 2rem;
    min-height: 2rem;
    padding-block: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.bmg-block-bulk > .btn:first-child {
    border-top-left-radius: var(--bmg-control-radius);
    border-bottom-left-radius: var(--bmg-control-radius);
}

.bmg-block-bulk > .btn:last-child {
    border-top-right-radius: var(--bmg-control-radius);
    border-bottom-right-radius: var(--bmg-control-radius);
    border-left: 1px solid rgba(255, 255, 255, .35);
    width: 1.75rem;
    padding-inline: 0 !important;
    justify-content: center;
}

.bmg-block-bulk > .btn-white:last-child {
    border-left-color: var(--bmg-border-muted);
}

.bmg-block-bulk > .btn.dropdown-toggle-split::after {
    margin: 0;
}
/* ---- Section 27, fifth round (Michael, 2026-09-14): a compact header with a clock, filter pills in one bar with
   the tools, and the date picker as a button. ---- */
.bmg-reception .bmg-desk-head {
    margin: 1rem 0 .75rem;
}

.bmg-reception .bmg-desk-head h1 {
    font-size: 1.9rem;
    line-height: 1.1;
}

.bmg-desk-clock {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    min-width: 6.2ch;
}

.bmg-desk-day {
    line-height: 1.2;
}

.bmg-reception .bmg-desk-head .bmg-live-status {
    padding: .15rem .55rem;
    border-radius: 999px;
    background: rgba(var(--bmg-success-rgb), .12);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The pill is green only while the desk is live (2026-09-30). It kept its green ground in every state, so
   "Updated 14:06" and "paused" read as live at a glance. "waiting": an update is held back by a slide-in or a question
   open on the page (bmg-reception-desk.js, evaluateLive). */
.bmg-reception .bmg-desk-head .bmg-live-status:not([data-state="live"]) {
    background: rgba(var(--bmg-text-muted-rgb), .12);
}

.bmg-reception .bmg-desk-head .bmg-live-status[data-state="paused"],
.bmg-reception .bmg-desk-head .bmg-live-status[data-state="waiting"] {
    background: rgba(var(--bmg-warning-rgb), .16);
}

.bmg-reception .bmg-desk-head .bmg-live-status[data-state="degraded"],
.bmg-reception .bmg-desk-head .bmg-live-status[data-state="offline"],
.bmg-reception .bmg-desk-head .bmg-live-status[data-state="ended"] {
    background: rgba(var(--bmg-danger-rgb), .12);
}

.bmg-live-status[data-state="waiting"] {
    color: rgb(var(--bmg-font-rgb));
}

.bmg-live-status[data-state="waiting"] .bmg-live-dot {
    background: rgba(var(--bmg-warning-rgb), 1);
}

.bmg-desk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: .5rem;
}

.bmg-desk-bar .visitor-toptools {
    margin: 0 !important;
    flex: 1 1 auto;
}

.bmg-kpi-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.bmg-kpi {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: var(--bmg-btn-height-sm);
    padding: 0 .9rem 0 .75rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: 999px;
    background: var(--bmg-surface);
    color: rgb(var(--bmg-font-rgb));
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
    white-space: nowrap;
}

.bmg-kpi i {
    font-size: .8rem;
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-kpi .stat-number {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bmg-kpi .bmg-kpi-label {
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-kpi:hover {
    box-shadow: var(--bmg-shadow-control-hover);
}

.bmg-kpi:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .6);
    outline-offset: 2px;
}

.bmg-kpi.active {
    background: rgb(var(--bmg-dark-rgb));
    border-color: rgb(var(--bmg-dark-rgb));
    color: #fff;
}

.bmg-kpi.active i,
.bmg-kpi.active .bmg-kpi-label {
    color: rgba(255, 255, 255, .8);
}

/* The date button is the control; the input only carries the browser's picker. */
.bmg-date-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.bmg-reception-day {
    position: relative;
}

.bmg-reception .bmg-reception-collapsed-toggle,
.bmg-reception .visitor-toptools .btn-group .btn {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .bmg-desk-clock {
        font-size: 1.4rem;
    }
}
/* ---- Section 27, sixth round (Michael, 2026-09-14): the design's KPI tiles back, with their numbers and active
   state, only smaller; one height for the header's controls. ---- */
.bmg-desk-bar > #receptionTiles {
    flex: 1 1 100%;
    min-width: 0;
}

.bmg-reception .bmg-kpi-compact {
    margin-bottom: 0 !important;
}

.bmg-reception .bmg-kpi-compact .kpi-card .card-body {
    padding: .5rem .85rem;
    gap: .75rem !important;
}

.bmg-reception .bmg-kpi-compact .kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: .7rem;
    font-size: .9rem;
}

.bmg-reception .bmg-kpi-compact .stat-number {
    font-size: 1.35rem;
    line-height: 1.05;
}

.bmg-reception .bmg-kpi-compact .kpi-label {
    font-size: .8rem;
}

.bmg-reception .bmg-reception-day > .dropdown > .btn,
.bmg-reception .bmg-reception-day > .btn-group > .btn,
.bmg-reception .bmg-reception-day > .bmg-date-btn {
    height: var(--bmg-btn-height-sm);
    min-height: var(--bmg-btn-height-sm);
    padding-block: 0;
}

.bmg-desk-clock {
    font-family: inherit;
}
/* ---- Section 27, seventh round (Michael, 2026-09-14). ---- */

/* A loan chip carries its count in the words in the simple view ("2 on loan") and on the icon in the detailed view;
   never both. */
.bmg-reception[data-view="simple"] .bmg-row-chips .bmg-chip-count {
    display: none;
}

/* A search that matches a folded line unfolds the block's other lines while it runs; the non-matching ones stay
   hidden by data-search-hidden. */
.bmg-block[data-bmg-search-reveal="1"] .bmg-block-others {
    display: flex;
}

/* The guest's name opens the line's details. */
.bmg-row-who[role="button"] {
    cursor: pointer;
    border-radius: .5rem;
}

.bmg-row-who[role="button"]:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .6);
    outline-offset: 2px;
}

.bmg-row-who[role="button"]:hover .fw-semibold {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The visit's visitor type beside the name (Views/Next/Home/Partials/_ReceptionVisitorTypeIcon): the icon the
   customer chose in the add-on's settings, quiet enough not to compete with the chips, with the type's name in
   the tooltip. Never shrinks or wraps, so a long name truncates before the icon goes. */
.bmg-row-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* The icon sits inside the name, which opens the line: it must not offer a different affordance. */
    cursor: inherit;
    font-size: .85rem;
    line-height: 1;
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-row-type-img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* The name is struck through on a cancelled line; the icon is not text and keeps its own look. */
.bmg-row-cancelled .bmg-row-type {
    text-decoration: none;
}

/* =====================================================
   28. PARKING SLIDE-IN ACTIONS
   Views/Next/Home/Partials/_LicensePlateOffcanvas (2026-09-14): the footer's split button for "Save
   plate", "Register parking" and both, with a line under each menu entry saying what it does. The
   drop has no split button in a footer: the group follows the card headers' check-in split button
   (app.css .check-action-group), in the footer's own dark blue.
===================================================== */

/* app.css squares every button in a group and rounds only a white, danger, warning or success first
   child: round the dark-blue pair's outer corners as .btn-dark-blue rounds a single button. */
.bmg-plate-actions > .btn:first-child {
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}

/* Without a parking system the toggle is hidden and the button stands alone. */
.bmg-plate-actions:not(.has-menu) > .btn:first-child {
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}

.bmg-plate-actions > .dropdown-toggle-split {
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, .35);
    padding-inline: .6rem;
}

.bmg-plate-actions > .dropdown-toggle-split[hidden] {
    display: none !important;
}

.bmg-plate-actions > .dropdown-toggle-split::after {
    margin: 0;
}

.bmg-plate-action-menu {
    width: 22rem;
    max-width: calc(100vw - 2rem);
    padding: .35rem;
}

.bmg-plate-action-menu .bmg-plate-action {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: .6rem;
    white-space: normal;
}

.bmg-plate-action > i {
    flex: 0 0 1rem;
    margin-top: .15rem;
    text-align: center;
}

.bmg-plate-action-title {
    display: block;
}

.bmg-plate-action-hint {
    display: block;
    margin-top: .1rem;
    font-size: .75rem;
    font-weight: 400;
    font-variation-settings: normal;
    line-height: 1.35;
    color: rgba(var(--bmg-font-rgb), .6);
}

/* app.css gives the menu's entries the label colour, which outranks Bootstrap's disabled colour: fade an
   entry that needs a checked-in guest instead. */
.bmg-plate-action-menu .bmg-plate-action:disabled {
    opacity: .5;
}
/* ---- Section 27, eighth round (Ulrik, 2026-09-14): less height. One search and one Expand all in the toolbar, an
   empty section as one slim line, and the arrivals timeline. ---- */
.bmg-reception .visitor-toptools {
    flex-wrap: wrap;
}

.bmg-toolbar-search {
    margin-left: auto;
}

.bmg-toolbar-search + .visitor-toptools-group {
    margin-left: 0 !important;
}

.bmg-toolbar-search .smart-search {
    width: 16rem;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .bmg-toolbar-search {
        width: 100%;
        margin-left: 0;
    }

    .bmg-toolbar-search .smart-search {
        flex: 1 1 auto;
        width: auto;
    }
}

/* An empty section: the title, what is (not) there, and on "Arriving now" the next arrival, on one line. */
.bmg-section-empty {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem .6rem;
    padding-block: .15rem;
    font-size: .9rem;
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-section-empty-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgb(var(--bmg-font-rgb));
}

.bmg-section-empty-next {
    font-weight: 600;
    color: rgb(var(--bmg-font-rgb));
}

/* The arrivals timeline (reworked 2026-09-14: one pill per meeting in two lanes piled up on a busy location): hour ticks,
   a shaded past, a now line, and one bar per slot (15 minutes, 30 on a long day), as tall as its guests and coloured by
   where they are, bottom up. Every bar has a place of its own, so nothing overlaps. */
.bmg-timeline {
    position: relative;
    height: 3.6rem;
    margin: .25rem 0 .75rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: var(--bmg-card-radius);
    background: var(--bmg-surface);
    overflow: hidden;
}

.bmg-timeline-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.25rem;
    right: 1.25rem;
}

/* The baseline the bars stand on. */
.bmg-timeline-track::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.05rem;
    border-bottom: 1px solid rgba(var(--bmg-text-muted-rgb), .25);
    pointer-events: none;
}

.bmg-timeline-past {
    position: absolute;
    top: 0;
    bottom: 1.05rem;
    left: 0;
    background: rgba(var(--bmg-secondary-rgb), .07);
    pointer-events: none;
}

.bmg-timeline-hour {
    position: absolute;
    top: 0;
    bottom: 1.05rem;
    border-left: 1px dashed rgba(var(--bmg-text-muted-rgb), .2);
}

.bmg-timeline-hour > span {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateX(-50%);
    padding-top: .1rem;
    font-size: .62rem;
    line-height: 1;
    color: rgba(var(--bmg-text-muted-rgb), 1);
    font-variant-numeric: tabular-nums;
}

.bmg-timeline-now {
    position: absolute;
    top: 0;
    bottom: 1.05rem;
    width: 0;
    border-left: 2px solid rgb(var(--bmg-danger-rgb));
    z-index: 2;
    pointer-events: none;
}

.bmg-timeline-slot {
    position: absolute;
    top: .3rem;
    bottom: 1.05rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 1px;
    border: 0;
    border-radius: .25rem .25rem 0 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
}

.bmg-timeline-slot:hover,
.bmg-timeline-slot:focus-visible {
    background: rgba(var(--bmg-primary-rgb), .1);
    outline: none;
}

.bmg-timeline-slot:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(var(--bmg-primary-rgb), .5);
}

.bmg-timeline-bar {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    max-width: 1.1rem;
    height: 100%;
}

.bmg-timeline-segment {
    display: block;
    width: 100%;
    min-height: 2px;
    background: rgba(var(--bmg-primary-rgb), .35);
}

/* Column-reverse: the last segment is the top of the bar. */
.bmg-timeline-bar > .bmg-timeline-segment:last-child {
    border-radius: 2px 2px 0 0;
}

.bmg-timeline-segment.is-left {
    background: rgba(var(--bmg-secondary-rgb), .35);
}

.bmg-timeline-segment.is-inside {
    background: rgb(var(--bmg-success-rgb));
}

.bmg-timeline-segment.is-late {
    background: rgb(var(--bmg-danger-rgb));
}

.bmg-timeline-segment.is-soon {
    background: rgb(var(--bmg-warning-rgb));
}

.bmg-timeline-segment.is-expected {
    background: rgba(var(--bmg-primary-rgb), .35);
}

@media (max-width: 767.98px) {
    .bmg-timeline-hour.is-minor > span {
        display: none;
    }
}

/* The block a timeline marker jumped to, briefly outlined. */
.bmg-block-flash {
    animation: bmg-block-flash 1.6s ease-out;
}

@keyframes bmg-block-flash {
    0% { box-shadow: 0 0 0 3px rgba(var(--bmg-primary-rgb), .5); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bmg-primary-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .bmg-block-flash {
        animation: none;
        box-shadow: 0 0 0 3px rgba(var(--bmg-primary-rgb), .5);
    }
}
/* ---- Section 27, ninth round (Michael, 2026-09-14): on a phone a single check-in line put the guest into the date
   column, so only the avatar showed. The guest, the time range and the actions take the full width. ---- */
@media (max-width: 991.98px) {
    .bmg-row-single .bmg-block-time-range {
        grid-column: 2 / -1;
    }

    .bmg-row-single .bmg-row-who,
    .bmg-row-single .bmg-row-actions {
        grid-column: 1 / -1;
    }

    .bmg-row-single .bmg-row-actions {
        justify-content: flex-start;
    }
}

/* ---- Section 27, fourteenth round (Michael, 2026-09-14): a guest line's "More" menu sits right of the times, beside
   the chevron. A line without the menu keeps an empty place of the button's width, so times and chevrons stay in line. ---- */
.bmg-row-more-ghost {
    display: inline-block;
    width: 2.25rem;
    flex-shrink: 0;
}

/* ---- Section 27, fifteenth round (Michael, 2026-09-14): the "Show cancelled" switch is gone. Cancelled visits with
   nowhere else to be (no meeting, or a meeting whose every guest was cancelled) are one slim folded line after the
   history, a button that opens its list. ---- */
.bmg-section-fold {
    align-items: center;
    background: none;
    border: 0;
    padding-right: 0;
    text-align: start;
    cursor: pointer;
}

.bmg-section-fold .section-stat {
    font-size: .8rem;
}

.bmg-section-fold:hover .bmg-section-empty-title {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.bmg-section-fold:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .5);
    outline-offset: 2px;
    border-radius: .5rem;
}

.bmg-section-fold-chevron {
    font-size: .75rem;
    transition: transform .15s ease;
}

.bmg-section-fold[aria-expanded="true"] .bmg-section-fold-chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .bmg-section-fold-chevron {
        transition: none;
    }
}

/* ---- The top bar's page width toggle (Michael, 2026-09-14, NextUi/NextLayoutWidth): at the whole screen width the
   page keeps the same side room as the wide data pages (bmg-ca above), so nothing touches the screen edge. ---- */
@media (min-width: 992px) {
    main > .container-fluid[data-bmg-layout-container="user"] {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* =====================================================
   28. SHELL MENU SHEET (phones)
   Views/Next/Shared/Partials/_ShellMenuSheet and the menu button in _TopNav (Michael, 2026-09-14): below md the
   top nav's icon row gives way to one button and a slide-in with the same menus. Not in the design drop.
===================================================== */

.bmg-shell-menu-avatar,
.bmg-sheet-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(var(--bmg-primary-rgb), .08);
    color: rgb(var(--bmg-font-rgb));
    font-weight: 700;
}

.bmg-shell-menu-avatar {
    width: 32px;
    height: 32px;
    font-size: .72rem;
}

.bmg-sheet-profile-avatar {
    width: 42px;
    height: 42px;
    font-size: .85rem;
}

.bmg-shell-menu-avatar img,
.bmg-sheet-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The design draws a separator after every item but the last child. The phone button is the last child and is hidden
   from md up, so the item before it would keep a separator with nothing after it. */
@media (min-width: 768px) {
    #topnav .topnav-actions > :has(+ .bmg-shell-menu-btn:last-child)::after {
        display: none;
    }
}

.bmg-shell-sheet {
    --bs-offcanvas-width: min(22rem, 92vw);
}

.bmg-sheet-profile {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.bmg-sheet-section + .bmg-sheet-section {
    margin-top: 1.25rem;
}

.bmg-sheet-title {
    margin-bottom: .35rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-sheet-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 2.5rem;
    padding: .45rem .5rem;
    border-radius: .6rem;
    color: rgb(var(--bmg-font-rgb));
    font-weight: 500;
    text-decoration: none;
}

.bmg-sheet-link i {
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-sheet-link:hover,
.bmg-sheet-link:focus-visible {
    background: rgba(var(--bmg-primary-rgb), .06);
    color: rgb(var(--bmg-font-rgb));
}

.bmg-sheet-link.active {
    background: rgba(var(--bmg-primary-rgb), .1);
    font-weight: 600;
}

.bmg-sheet-languages {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.bmg-sheet-language {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: 999px;
    color: rgb(var(--bmg-font-rgb));
    font-size: .8rem;
    text-decoration: none;
    text-transform: uppercase;
}

.bmg-sheet-language.active {
    border-color: rgb(var(--bmg-primary-rgb));
    background: rgba(var(--bmg-primary-rgb), .08);
    font-weight: 600;
}

/* The company list in the sheet: no dropdown padding to reach out over, and room to scroll. */
.bmg-shell-sheet .bmg-company-switch-list {
    max-height: 45vh;
    margin-inline: 0;
    padding-inline: 0;
}

.bmg-shell-sheet .bmg-company-switch-list .dropdown-item {
    border-radius: .5rem;
}
/* ---- Section 27, tenth round (Michael, 2026-09-14): fewer lines. A section's description sits on its heading line,
   and the Details switch sits in the header beside the date. ---- */
.bmg-section-subtitle {
    font-size: .8rem;
    font-weight: 400;
    font-variation-settings: normal;
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-reception-day .bmg-view-switch .visitor-toptools-btn {
    height: var(--bmg-btn-height-sm);
    min-height: var(--bmg-btn-height-sm);
}
/* ---- Section 27, eleventh round (Michael, 2026-09-14): the edit guest slide-in (Partials/_EditGuestOffcanvas). ---- */

/* A verified e-mail: greyed, read-only, with a lock at the right. */
.bmg-edit-guest-email.is-locked .form-control {
    background: rgba(var(--bmg-secondary-rgb), .08);
    color: rgba(var(--bmg-text-muted-rgb), 1);
    cursor: not-allowed;
    padding-right: 2.5rem;
}

.bmg-edit-guest-lock {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: rgba(var(--bmg-text-muted-rgb), 1);
    font-size: .85rem;
    pointer-events: auto;
}

/* The host picker: an avatar and the name, the title or e-mail under it in the list. */
.bmg-host-option {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    max-width: 100%;
}

.bmg-host-option-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(var(--bmg-primary-rgb), .08);
    color: rgb(var(--bmg-font-rgb));
    font-size: .68rem;
    font-weight: 700;
}

.bmg-host-option-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bmg-host-option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.bmg-host-option-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bmg-host-option-detail {
    font-size: .75rem;
    color: rgba(var(--bmg-text-muted-rgb), 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Room for the avatar in the closed picker. */
.bmg-edit-guest .select2-container--default .select2-selection--single {
    min-height: 3.25rem;
    display: flex;
    align-items: center;
}

.bmg-edit-guest .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex;
    align-items: center;
    line-height: 1.2;
}
/* ---- Section 27, twelfth round (Michael, 2026-09-14): times and dividers as in the design's history rows. The meeting
   line and its guest lines share the first three columns (date, time or status, guest), with the design's vertical
   dividers before the second, the third and the host; the actual in and out times stand right of the button. ---- */
.bmg-block-main {
    grid-template-columns: 2.5rem 9.5rem minmax(0, 1.6fr) minmax(0, 1fr);
}

.bmg-row {
    grid-template-columns: 2.5rem 9.5rem minmax(0, 1.6fr) minmax(0, 1fr) auto;
}

.bmg-row-single {
    grid-template-columns: 2.5rem 9.5rem minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    row-gap: 0;
}

.bmg-row-spacer {
    display: block;
}

.bmg-block-main > .bmg-block-time,
.bmg-block-main > .bmg-block-title,
.bmg-block-main > .bmg-block-host,
.bmg-row > .bmg-row-status,
.bmg-row > .bmg-row-who,
.bmg-row-single > .bmg-row-host,
.bmg-row-single .bmg-block-time-range {
    align-self: stretch;
    padding-left: .85rem;
    border-left: 1px solid rgba(var(--bmg-secondary-rgb), .16);
}

.bmg-block-main > .bmg-block-time,
.bmg-block-main > .bmg-block-title {
    justify-content: center;
}

.bmg-row-single .bmg-block-time-range {
    display: flex;
    align-items: flex-end;
}

.bmg-row-single .bmg-row-status {
    align-items: flex-start;
}

.bmg-row-status-text {
    min-width: 0;
}

/* The actual times, right of the button. */
.bmg-row-times {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    min-width: 8.75rem;
    font-variant-numeric: tabular-nums;
}

.bmg-row-times .is-empty {
    visibility: hidden;
}

.bmg-row-times .vr {
    align-self: center;
    min-height: 1.1rem;
}

@media (max-width: 991.98px) {
    .bmg-block-main {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .bmg-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .bmg-row-single {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    }

    .bmg-row-spacer {
        display: none;
    }

    .bmg-block-main > .bmg-block-time,
    .bmg-block-main > .bmg-block-title,
    .bmg-block-main > .bmg-block-host,
    .bmg-row > .bmg-row-status,
    .bmg-row > .bmg-row-who,
    .bmg-row-single > .bmg-row-host,
    .bmg-row-single .bmg-block-time-range {
        padding-left: 0;
        border-left: 0;
    }

    .bmg-row-times {
        min-width: 0;
    }
}

/* ---- Section 27, sixteenth round (Michael, 2026-09-14): the host starts at the same place on a meeting's header line
   and on a single visit's line. Both lines sized the title or guest column as a fraction of what their buttons on the
   right left over, and those buttons differ in width, so the host moved. That column is now a share of the whole line,
   and the header lays its date, time, title and host on the line's own grid (subgrid), so only the columns before the
   host decide where it starts. A browser without subgrid keeps the previous header columns. At the end of the file: the twelfth round, further down than section 28, set these columns too and won while this sat above it. Desktop only: below lg both
   lines stack. ---- */
@media (min-width: 992px) {
    .bmg-block-head {
        display: grid;
        grid-template-columns: 2.5rem 9.5rem minmax(0, 26%) minmax(0, 1fr) auto;
        column-gap: 1rem;
    }

    .bmg-block-main {
        grid-column: 1 / 5;
        grid-template-columns: subgrid;
        column-gap: 1rem;
    }

    .bmg-block-side {
        grid-column: 5;
    }

    .bmg-row {
        grid-template-columns: 2.5rem 9.5rem minmax(0, 26%) minmax(0, 1fr) auto;
    }

    .bmg-row-single {
        grid-template-columns: 2.5rem 9.5rem minmax(0, 26%) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    }

    /* Seventeenth round (Michael, 2026-09-14): at the standard page width the chips' share left the host a few letters
       ("R..."). The chips take what they need, the host the rest, and never less than 9rem. */
    .bmg-row-single {
        grid-template-columns: 2.5rem 9.5rem minmax(0, 26%) minmax(9rem, 1fr) auto auto;
    }
}

/* ---- Section 27, thirteenth round (Michael, 2026-09-14): a single line's two text lines sat above the middle and its
   dot at the top of the status. Two equal rows put the planned time (or "Walk-in") on the upper half and the status on
   the lower, level with the name and the company beside them; the dot centres on its text. Desktop only: below lg the
   line stacks (ninth round). At the end of the file: the twelfth round, further down, set the status back to flex-start. ---- */
@media (min-width: 992px) {
    .bmg-row-single {
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bmg-row-single .bmg-row-status {
        align-content: flex-start;
        align-items: center;
        padding-top: .1rem;
    }

    .bmg-row-single .bmg-block-time-range {
        padding-bottom: .1rem;
        line-height: 1.3;
    }
}

/* ---- Section 27, seventeenth round (Michael, 2026-09-14): a click anywhere on a guest line or a meeting's header line
   opens it (bmg-reception-desk.js, wireSurfaceClicks), so the whole line says so. ---- */
#receptionSections .bmg-row,
#receptionSections .bmg-block-head {
    cursor: pointer;
}

/* ---- Section 17, second round (Michael, 2026-09-14): the search's overflow and design bugs. ---- */

/* The quick results never scroll sideways: a long name or line truncates, and the status badge keeps a readable size
   (the design's badge.smaller is sized for icon counts). */
.bmg-search-menu {
    overflow-x: hidden;
}

.bmg-search-item {
    min-width: 0;
}

.bmg-search-item-text {
    flex: 1 1 auto;
}

.bmg-search-item .badge,
#searchPage .card-header-badges .badge {
    font-size: .65rem;
    line-height: 1.2;
    padding: .3em .65em;
    white-space: nowrap;
}

/* The result page's search button stands as tall as the box beside it, on the same line. */
.bmg-search-hero .card-toolbar-wrapper {
    align-items: center !important;
}

.bmg-search-hero .card-toolbar-actions .btn {
    height: 44px;
    padding-inline: 1.1rem;
    border-radius: 1.5rem !important;
}

/* The group filter: the count is a small bubble, readable on the dark active pill too. */
#searchPage .bmg-search-filter {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

#searchPage .bmg-search-filter .section-stat {
    height: 1.35rem;
    min-width: 1.35rem;
    padding: 0 .45rem;
    font-size: .75rem;
}

#searchPage .bmg-search-filter.active .section-stat {
    background: rgba(255, 255, 255, .22);
    color: var(--bmg-white);
}

/* ---- Section 27, nineteenth round (Ulrik and Michael, 2026-09-15): a meeting's details open in a slide-in
   (Partials/_MeetingInfoOffcanvas) instead of unfolding under every guest of the block. ---- */
.bmg-meeting-info {
    --bs-offcanvas-width: min(36rem, 100vw);
}

.bmg-meeting-info .offcanvas-body > .collapse > .card-body {
    padding-top: 1rem;
}

/* ---- Section 27, twentieth round (Michael, 2026-09-15): the toolbar with the page's search sticks under the top nav
   while the list scrolls. As on the settings pages (section 15), body must stop being a scroll container of its own
   first, or position: sticky has nothing to stick to. From md up: on a phone the toolbar wraps to several lines and
   would cover the list. While stuck (bmg-reception-desk.js, wireStickyTools) it takes the page's ground and a shadow;
   generic.js pins the 60px top nav once the page has scrolled (body.has-fixed-nav). ---- */
body:has(.bmg-reception) {
    overflow-y: visible;
}

.bmg-reception > .visitor-toptools {
    margin-top: 0 !important;
    margin-bottom: .5rem !important;
}

@media (min-width: 768px) {
    .bmg-reception > .visitor-toptools {
        position: sticky;
        top: .5rem;
        /* Under Bootstrap's dropdown menus (1000): the location menu in the header opened behind it (2026-09-15). */
        z-index: 990;
        margin-inline: -.75rem;
        padding: .45rem .75rem;
        border-radius: var(--bmg-card-radius);
        transition: background-color .15s ease, box-shadow .15s ease;
    }

    body.has-fixed-nav .bmg-reception > .visitor-toptools {
        top: calc(60px + .5rem);
    }

    .bmg-reception > .visitor-toptools.is-stuck {
        background: rgba(var(--bmg-bg-light-rgb), .94);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 .5rem 1.25rem rgba(var(--bmg-font-rgb), .1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bmg-reception > .visitor-toptools {
        transition: none;
    }
}

/* ---- Section 3, second round (Michael, 2026-09-15): toasts stack in the corner with one gap between them, the newest
   nearest the corner. One that times out does so after four seconds, with a bar along its foot that empties over that
   time, stands full while the pointer or focus holds the toast, and starts again after (bmg-next.js, autohideToast).
   An error, or a toast raised to stay, has no bar. ---- */
.bmg-toast-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

.bmg-toast-container > .bmg-toast {
    margin-bottom: 0 !important;
}

.bmg-toast {
    position: relative;
    overflow: hidden;
}

.bmg-toast-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(var(--bmg-toast-rgb), .12);
    pointer-events: none;
}

.bmg-toast-progress > span {
    display: block;
    height: 100%;
    background: rgba(var(--bmg-toast-rgb), .75);
    transform-origin: left center;
    animation: bmg-toast-countdown var(--bmg-toast-delay, 4000ms) linear forwards;
}

.bmg-toast.is-held .bmg-toast-progress > span {
    animation: none;
}

@keyframes bmg-toast-countdown {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ---- Section 27, twenty-first round (Michael, 2026-09-15): the chevrons are gone. A click anywhere on a line opens it
   and the guest's name is its keyboard toggle, so the buttons move to the right edge, and the host shows its name at
   every width again (the eighteenth round's picture-only host is withdrawn). The .bmg-block-chevron and
   .bmg-row-toggle rules further up style nothing now. ---- */
.bmg-row-who[role="button"][aria-expanded="true"] .fw-semibold {
    color: rgb(var(--bmg-primary-rgb));
}

/* =====================================================
   29. LIVE MONITOR
   Views/Next/Home/LiveMonitor.cshtml, Partials/_LiveMonitorList and _LiveMonitorRow, bmg-live-monitor.js (2026-09-15):
   the classic wall screen of who is arriving and who is inside, as the design's visitor card headers on cards that
   never open. Not in the drop.
===================================================== */

/* The reception desk's compact tiles (section 27 keeps its own to .bmg-reception). */
.bmg-live-monitor .bmg-kpi-compact .kpi-card .card-body {
    padding: .5rem .85rem;
    gap: .75rem !important;
}

.bmg-live-monitor .bmg-kpi-compact .kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: .7rem;
    font-size: .9rem;
}

.bmg-live-monitor .bmg-kpi-compact .stat-number {
    font-size: 1.35rem;
    line-height: 1.05;
}

.bmg-live-monitor .bmg-kpi-compact .kpi-label {
    font-size: .8rem;
}

/* A line never opens. Its toggle is a div carrying the button's classes, which keeps the closed card's look; it should
   not look clickable either. */
.bmg-live-row .card-header .card-toggle {
    cursor: default;
    user-select: text;
}

/* The meeting block the design shows only on an opened card (app.css hides it while closed): this card never opens, and
   the classic monitor had the meeting as a column. The design's opened geometry, a little narrower, without the unfolding. */
.bmg-live-row .card-header .card-header-meeting {
    flex: 0 0 auto;
    min-width: 12rem;
    max-width: 18rem;
    opacity: .75;
    pointer-events: auto;
    margin-right: .25rem;
}

/* The location, as the multi-house desk marks it (section 14 keeps that rule to .bmg-reception). */
.bmg-live-monitor .bmg-location-chip {
    max-width: 11rem;
    flex-shrink: 1;
    min-width: 0;
}

.bmg-live-type-chip {
    max-width: 12rem;
    min-width: 0;
}

.bmg-live-type-img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.bmg-live-type-menu {
    min-width: 18rem;
    max-width: min(26rem, 92vw);
    max-height: 60vh;
    overflow-y: auto;
}

.bmg-live-type-menu .form-check-label {
    min-width: 0;
}

/* Full screen and the wall display (Michael, 2026-09-15): the monitor alone across the whole width, as the classic wall
   screen hid the menus. Full screen is the toolbar's button. The wall display is the copied link (?display=wall,
   .bmg-live-wall), drawn this way from the first paint, because a browser only goes full screen at a touch or key press.
   Neither shows the toolbar or the link that widens the filter: nothing on a wall display should lead away from what it
   shows. The evacuation and acting-for banners stay. */
html:fullscreen:has(#liveMonitor) #sidebar,
html:fullscreen:has(#liveMonitor) #topnav,
html:fullscreen:has(#liveMonitor) .bmg-beta-banner,
html:has(#liveMonitor.bmg-live-wall) #sidebar,
html:has(#liveMonitor.bmg-live-wall) #topnav,
html:has(#liveMonitor.bmg-live-wall) .bmg-beta-banner,
html:fullscreen #liveMonitor [data-live-monitor-toolbar],
html:fullscreen #liveMonitor [data-live-monitor-clear-filter],
#liveMonitor.bmg-live-wall [data-live-monitor-toolbar],
#liveMonitor.bmg-live-wall [data-live-monitor-clear-filter] {
    display: none !important;
}

html:fullscreen:has(#liveMonitor) .content,
html:has(#liveMonitor.bmg-live-wall) .content {
    margin-left: 0;
}

html:fullscreen:has(#liveMonitor) main > [data-bmg-layout-container],
html:has(#liveMonitor.bmg-live-wall) main > [data-bmg-layout-container] {
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ---- Section 27, twenty-second round (Michael, 2026-09-15): the desk's location menu gets a search box and a
   scrolling list for companies with many locations (bmg-reception-desk.js, wireLocationSwitch). The list reaches the
   menu's edges as the company switcher's does (section 17), so the scrollbar sits at the edge. ---- */
.bmg-location-switch-menu {
    width: 18rem;
    max-width: calc(100vw - 1rem);
}

.bmg-location-switch-list {
    position: relative;
    max-height: min(22rem, 55vh);
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bmg-location-switch-list .dropdown-item {
    white-space: normal;
}

.bmg-location-switch-list .dropdown-item::after {
    left: 0;
}

.bmg-location-switch-empty {
    padding: .6rem 0;
    font-size: .875em;
    color: rgba(var(--bmg-font-rgb), .6);
}

/* The multi-house desk's building filter is the same dropdown (Michael, 2026-09-30; Partials/_ReceptionLocationFilter):
   its items are buttons with the building's count at the right, and the header button names the chosen building
   with its count. A long building name is cut on the button, never in the list. */
.bmg-location-switch-current {
    max-width: 16rem;
}

.bmg-location-switch-count {
    flex-shrink: 0;
    min-width: 1.6rem;
    padding: .1rem .45rem;
    border-radius: 2rem;
    background: rgba(var(--bmg-font-rgb), .08);
    color: rgba(var(--bmg-font-rgb), .75);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Nobody expected or here: the count steps back, so the buildings with guests stand out in a long list. */
.bmg-location-switch-count.is-empty {
    background: transparent;
    color: rgba(var(--bmg-font-rgb), .4);
}

.bmg-location-switch-list .dropdown-item.active .bmg-location-switch-count {
    background: rgba(var(--bmg-secondary-rgb), .14);
    color: rgb(var(--bmg-font-rgb));
}

.bmg-location-switch-list button.dropdown-item > [data-bmg-location-name] {
    min-width: 0;
    text-align: left;
}

/* ---- Section 27, twenty-third round (Michael, 2026-09-15) ----
   The toolbar's arrival chart toggle hides the timeline (bmg-reception-desk.js, wireTimelineToggle).
   The visit tones are the twenty-fourth round's, below. */
.bmg-reception[data-timeline="hidden"] .bmg-timeline {
    display: none;
}

/* ---- Section 27, twenty-fourth round (Michael, 2026-09-15): the whole card takes the tone, as the design colours its
   cards: a meeting's header and every guest line under it, and a visit without a meeting, red once someone is due and
   not here and amber within ReceptionBlockBuilder.SoonMinutes of the start. The wash is on the card, so it follows its
   rounded corners and runs on under open details; the header's own wash and the foot's grey give way to it, so the card
   is one colour. A guest from another section keeps its muted wash on top. ---- */
.bmg-reception .bmg-block.bmg-tone-started {
    background-image: linear-gradient(rgba(var(--bmg-danger-rgb), .12), rgba(var(--bmg-danger-rgb), .12));
}

.bmg-reception .bmg-block.bmg-tone-soon {
    background-image: linear-gradient(rgba(var(--bmg-warning-rgb), .2), rgba(var(--bmg-warning-rgb), .2));
}

.bmg-reception .bmg-block.bmg-tone-started .bmg-block-head,
.bmg-reception .bmg-block.bmg-tone-soon .bmg-block-head {
    background: transparent;
}

/* ---- Section 27, twenty-fifth round (Michael, 2026-09-15) ----
   The location's logo before the desk's title, sized to the title line.
   On a red or amber card the lines of guests who are inside or have left are white: the tone is about the guests still
   expected, and these need nothing. Over a guest from another section's muted wash too. */
.bmg-desk-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 2.5rem;
    max-width: 8rem;
    object-fit: contain;
}

.bmg-reception .bmg-block.bmg-tone-started .bmg-row-in,
.bmg-reception .bmg-block.bmg-tone-started .bmg-row-out,
.bmg-reception .bmg-block.bmg-tone-soon .bmg-row-in,
.bmg-reception .bmg-block.bmg-tone-soon .bmg-row-out {
    background: var(--bmg-surface);
}

/* =====================================================
   29. SHELL FOOTER
   Views/Next/Shared/Partials/_ShellFooter (Michael, 2026-09-15): the BmyGuest logo, moved from the top nav, with the
   copyright and the privacy policy and terms links. The drop's footer.php is empty, so this is ours, in its tokens, and
   quiet: small muted text over a hairline, at the foot of the content however short the page is (.content is a
   flex column).
===================================================== */
.bmg-shell-footer {
    margin-top: auto;
    padding-block: 2.5rem 1.25rem;
    font-size: .75rem;
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-shell-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bmg-border-muted);
}

.bmg-shell-footer-brand {
    display: inline-flex;
}

.bmg-shell-footer-brand img {
    display: block;
    width: auto;
    height: .95rem;
    opacity: .5;
    transition: opacity .15s ease;
}

.bmg-shell-footer-brand:hover img,
.bmg-shell-footer-brand:focus-visible img {
    opacity: .85;
}

.bmg-shell-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}

.bmg-shell-footer-links a {
    color: inherit;
    text-decoration: none;
}

.bmg-shell-footer-links a:hover,
.bmg-shell-footer-links a:focus-visible {
    color: rgb(var(--bmg-font-rgb));
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* The page's own side room at the full width (twentieth round of section 27's width toggle rule), so the hairline lines
   up with the page above it. */
@media (min-width: 992px) {
    .bmg-shell-footer > .container-fluid[data-bmg-layout-container="user"] {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bmg-shell-footer-brand img {
        transition: none;
    }
}

/* ---- Section 27, twenty-sixth round (Michael, 2026-09-15): every section of the desk sits in the design's
   .content-panel negative, as the host page's groups do (partials/visitor-management/components/visitor-list.php), so it
   is plain where "Arriving now" ends and "Checked in" begins. The panel's own top padding replaces the header's top
   margin. An empty section and the folded Cancelled line keep their one slim line in a compact panel. ---- */
.bmg-reception .content-panel.bmg-section-panel {
    margin-bottom: 1rem;
}

.bmg-reception .content-panel.bmg-section-panel.is-slim {
    padding-block: .7rem;
}


/* =====================================================
   30. SIGN-IN

   ~/Views/Next/Account/SignIn.cshtml and ConfirmSignInLink.cshtml, on the bare
   shell. The drop ships no sign-in screen. Unlike the error page (05) and the
   verification gate (08), which state something and offer ways out, this page
   asks for input, so the steps sit in one panel: the page keeps its place while
   bmg-sign-in.js swaps the step inside it. The panel is .content-panel's radius
   on a white surface with .card-raised's shadow, so it reads as a raised form
   rather than a data well.

   Own classes throughout, including the provider buttons that look like the
   gate's: as in 08, nothing is shared that would let a change to one page
   restyle the other.
===================================================== */

.bmg-signin {
    max-width: 440px;
    margin: 0 auto;
    padding: clamp(1.5rem, 6vh, 4rem) 0 3rem;
}

.bmg-signin-panel {
    padding: 2rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 24px;
    background: var(--bmg-white);
    box-shadow: var(--bmg-shadow-card-raised);
}

@media (max-width: 575.98px) {
    .bmg-signin-panel {
        padding: 1.5rem 1.25rem;
        border-radius: 20px;
    }
}

.bmg-signin-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.4rem, 3.5vw, 1.75rem);
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

/* Focused by script after a step swap when the step has no field to focus. */
.bmg-signin-title:focus {
    outline: none;
}

.bmg-signin-text {
    margin: 0 0 1.5rem;
    color: rgb(var(--bmg-text-muted-rgb));
    overflow-wrap: anywhere;
}

/* The first step has no explainer, so its form sits under the title directly. */
.bmg-signin-title + .bmg-signin-form,
.bmg-signin-title + .bmg-signin-note {
    margin-top: 1.25rem;
}

/* A refusal or a confirmation, stated in the panel: the bare shell has no toasts. */
.bmg-signin-note {
    --bmg-signin-note-rgb: var(--bmg-success-rgb);

    display: flex;
    align-items: baseline;
    gap: .55rem;
    margin: 0 0 1.25rem;
    padding: .65rem .9rem;
    border: 1px solid rgba(var(--bmg-signin-note-rgb), .25);
    border-radius: 1rem;
    background: rgba(var(--bmg-signin-note-rgb), .1);
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.bmg-signin-note.tone-danger {
    --bmg-signin-note-rgb: var(--bmg-danger-rgb);
}

.bmg-signin-note i {
    flex: 0 0 auto;
    color: rgb(var(--bmg-signin-note-rgb));
}

.bmg-signin-form {
    display: grid;
    gap: 1rem;
}

/* Typed codes are easier to check spaced out. The server upper-cases what it gets,
   so upper-casing the display changes nothing it reads. */
.bmg-signin-code {
    letter-spacing: .2em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* Full width. Composed as .btn .btn-dark-blue plus this rather than .w-100, because
   app.css sets `display: inline !important` on .btn.w-100. */
.bmg-signin-submit {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 52px;
}

.bmg-signin-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0;
    color: rgb(var(--bmg-text-muted-rgb));
    font-size: .85rem;
}

.bmg-signin-divider::before,
.bmg-signin-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--bmg-border-subtle);
}

.bmg-signin-sso {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* .btn-white's look at full width and the submit button's height. On a white
   panel the white face alone disappears, so it keeps a visible border. */
.bmg-signin-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    min-height: 52px;
    padding: .8rem 1.2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bmg-control-radius);
    background: var(--bmg-white);
    color: rgb(var(--bmg-font-rgb));
    font-weight: 500;
    font-variation-settings: "wght" 530;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--bmg-shadow-control);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.bmg-signin-sso-btn:hover,
.bmg-signin-sso-btn:focus-visible {
    color: rgb(var(--bmg-font-rgb));
    transform: translateY(-0.5px);
    box-shadow: var(--bmg-shadow-control-hover);
}

.bmg-signin-sso-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1);
}

/* Microsoft's and Google's colour marks, as their brand guidelines require. */
.bmg-signin-sso-btn img {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.bmg-signin-back {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .875rem;
}

.bmg-signin-links {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .875rem;
}

.bmg-signin-back a,
.bmg-signin-links a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgb(var(--bmg-text-muted-rgb));
    text-decoration: underline;
    text-underline-offset: .2em;
}

.bmg-signin-back a:hover,
.bmg-signin-back a:focus,
.bmg-signin-links a:hover,
.bmg-signin-links a:focus {
    color: var(--bmg-primary);
}

/* =====================================================
   31. INCIDENT MODULE GUIDE (Views/Next/Admin/IncidentGuide.cshtml, Michael 2026-09-16)
   The system administrators' training and troubleshooting page for the Incident and asset module. Drawn from
   JSON by bmg-incident-guide.js. Tables reuse section 24's .bmg-admin-table; tiles reuse section 25's values.
   ===================================================== */

.bmg-ig .bmg-ig-tabs {
    gap: .25rem;
    border-bottom: 1px solid rgb(var(--bmg-border-rgb, 222, 226, 230));
    padding-bottom: .25rem;
}

.bmg-ig .bmg-ig-tabs .nav-link,
.bmg-ig .bmg-ig-subtabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    border-radius: .5rem;
    padding: .45rem .8rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgb(var(--bmg-text-muted-rgb));
    background: transparent;
}

.bmg-ig .bmg-ig-tabs .nav-link:hover,
.bmg-ig .bmg-ig-subtabs .nav-link:hover {
    color: var(--bmg-primary);
    background: rgba(var(--bmg-primary-rgb, 13, 110, 253), .06);
}

.bmg-ig .bmg-ig-tabs .nav-link.active,
.bmg-ig .bmg-ig-subtabs .nav-link.active {
    color: var(--bmg-primary);
    background: rgba(var(--bmg-primary-rgb, 13, 110, 253), .1);
}

.bmg-ig .bmg-ig-subtabs {
    gap: .25rem;
    flex-wrap: wrap;
}

.bmg-ig .bmg-ig-subtabs .bmg-ig-count {
    font-size: .7rem;
    font-weight: 600;
    padding: .05rem .4rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, .06);
}

/* Deep dive and troubleshooting: a rail beside the content on wide screens, stacked on narrow ones */
.bmg-ig-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (min-width: 992px) {
    .bmg-ig-layout {
        grid-template-columns: 17rem minmax(0, 1fr);
    }

    .bmg-ig-layout:has(> .bmg-ig-side) {
        grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 1fr);
    }

    .bmg-ig-rail,
    .bmg-ig-side {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow: auto;
    }
}

.bmg-ig-rail {
    background: var(--bmg-panel-bg, #fff);
    border-radius: .75rem;
    padding: .75rem;
    font-size: .875rem;
}

.bmg-ig-rail-section + .bmg-ig-rail-section {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgb(var(--bmg-border-rgb, 222, 226, 230));
}

.bmg-ig-rail-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    padding: .25rem .4rem;
    border-radius: .4rem;
}

.bmg-ig-rail-section.is-active .bmg-ig-rail-title {
    color: var(--bmg-primary);
    background: rgba(var(--bmg-primary-rgb, 13, 110, 253), .08);
}

.bmg-ig-rail-topics {
    display: none;
    flex-direction: column;
    margin-top: .25rem;
    padding-left: 1.4rem;
}

.bmg-ig-rail-section.is-active .bmg-ig-rail-topics {
    display: flex;
}

.bmg-ig-rail-topic {
    color: rgb(var(--bmg-text-muted-rgb));
    text-decoration: none;
    padding: .15rem .4rem;
    border-radius: .3rem;
    font-size: .8125rem;
}

.bmg-ig-rail-topic:hover {
    color: var(--bmg-primary);
    background: rgba(var(--bmg-primary-rgb, 13, 110, 253), .06);
}

.bmg-ig-section-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}

.bmg-ig-section-icon,
.bmg-ig-section-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    background: rgba(var(--bmg-primary-rgb, 13, 110, 253), .1);
    color: var(--bmg-primary);
    font-size: 1.15rem;
    flex: 0 0 auto;
}

/* Topics */
.bmg-ig-topic + .bmg-ig-topic {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--bmg-border-rgb, 222, 226, 230));
}

.bmg-ig-topic-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.bmg-ig-topic-title {
    margin: 0;
}

.bmg-ig-anchor {
    color: rgb(var(--bmg-text-muted-rgb));
    opacity: 0;
    font-size: .8rem;
    transition: opacity .15s;
}

.bmg-ig-topic:hover .bmg-ig-anchor,
.bmg-ig-anchor:focus-visible {
    opacity: 1;
}

.bmg-ig-topic-summary {
    margin-top: .35rem;
}

.bmg-ig-topic-toggle {
    margin-top: .25rem;
}

.bmg-ig-topic-body {
    margin-top: .75rem;
    padding: .9rem 1rem;
    border-radius: .6rem;
    background: rgba(0, 0, 0, .025);
}

.bmg-ig-files,
.bmg-ig-related,
.bmg-ig-checks,
.bmg-ig-fix {
    margin-top: .75rem;
    font-size: .8125rem;
}

.bmg-ig-files-label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgb(var(--bmg-text-muted-rgb));
    margin-bottom: .25rem;
}

.bmg-ig-file {
    display: inline-block;
    margin: 0 .35rem .35rem 0;
    padding: .15rem .45rem;
    border-radius: .35rem;
    background: rgba(0, 0, 0, .05);
    font-size: .75rem;
    white-space: nowrap;
}

.bmg-ig-tags {
    margin-top: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.bmg-ig-tag {
    cursor: pointer;
}

.bmg-ig-checks ul {
    margin: 0;
    padding-left: 1.2rem;
}

/* Start here */
.bmg-ig .kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .65rem;
    background: rgba(var(--bmg-primary-rgb, 13, 110, 253), .1);
    color: var(--bmg-primary);
    flex: 0 0 auto;
}

.bmg-ig-section-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: .75rem;
}

.bmg-ig-section-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border-radius: .75rem;
    border: 1px solid rgb(var(--bmg-border-rgb, 222, 226, 230));
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.bmg-ig-section-link:hover {
    border-color: var(--bmg-primary);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
    color: inherit;
}

.bmg-ig-section-link-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.bmg-ig-section-link-title {
    font-weight: 600;
}

.bmg-ig-section-link-desc {
    font-size: .8125rem;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-ig-section-link-count {
    font-size: .75rem;
    color: rgb(var(--bmg-text-muted-rgb));
    white-space: nowrap;
}

/* Search results */
.bmg-ig-results {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.bmg-ig-result {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .6rem .75rem;
    border-radius: .6rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
}

.bmg-ig-result:hover {
    border-color: rgb(var(--bmg-border-rgb, 222, 226, 230));
    background: rgba(0, 0, 0, .02);
    color: inherit;
}

.bmg-ig-result-type {
    flex: 0 0 8.5rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgb(var(--bmg-text-muted-rgb));
    padding-top: .2rem;
}

.bmg-ig-result-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bmg-ig-result-title {
    font-weight: 600;
}

.bmg-ig-result-snippet {
    font-size: .8125rem;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-ig mark {
    padding: 0 .1em;
    background: rgba(255, 193, 7, .35);
    border-radius: .2em;
}

@media (max-width: 575.98px) {
    .bmg-ig-result {
        flex-direction: column;
        gap: .2rem;
    }
}

/* Troubleshooting questions */
.bmg-ig-q {
    border: 1px solid rgb(var(--bmg-border-rgb, 222, 226, 230));
    border-radius: .6rem;
    padding: .5rem .75rem;
}

.bmg-ig-q + .bmg-ig-q {
    margin-top: .5rem;
}

.bmg-ig-q > summary {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    cursor: pointer;
    list-style: none;
    font-weight: 500;
}

.bmg-ig-q > summary::-webkit-details-marker {
    display: none;
}

.bmg-ig-q > summary::before {
    content: "\f078";
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 400;
    font-size: .7rem;
    color: rgb(var(--bmg-text-muted-rgb));
    transition: transform .15s;
}

.bmg-ig-q[open] > summary::before {
    transform: rotate(180deg);
}

.bmg-ig-q-area {
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bmg-primary);
}

.bmg-ig-q-body {
    padding: .5rem 0 .25rem 1.3rem;
    font-size: .875rem;
}

.bmg-ig-inline-search {
    min-width: 14rem;
}

/* Diagnostics */
.bmg-ig-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .2rem .75rem;
    margin: 0;
    font-size: .8125rem;
}

.bmg-ig-kv dt {
    font-weight: 500;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-ig-kv dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.bmg-ig-company + .bmg-ig-company {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgb(var(--bmg-border-rgb, 222, 226, 230));
}

.bmg-ig-count-pill {
    font-size: .75rem;
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, .05);
}

.bmg-ig-schema-script > summary {
    cursor: pointer;
    font-size: .8125rem;
    padding: .25rem 0;
}

.bmg-ig-diag-table {
    margin-top: .35rem;
}

.bmg-ig-table td,
.bmg-ig-table th {
    vertical-align: top;
}

.bmg-ig-table td .bmg-ig-md p:last-child {
    margin-bottom: 0;
}

/* Findings */
.bmg-ig-finding + .bmg-ig-finding {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--bmg-border-rgb, 222, 226, 230));
}

/* Markdown */
.bmg-ig-md {
    font-size: .875rem;
    line-height: 1.55;
}

.bmg-ig-md p {
    margin: 0 0 .6rem;
}

.bmg-ig-md p:last-child {
    margin-bottom: 0;
}

.bmg-ig-md ul,
.bmg-ig-md ol {
    margin: 0 0 .6rem;
    padding-left: 1.3rem;
}

.bmg-ig-md li + li {
    margin-top: .15rem;
}

.bmg-ig-md li > ul {
    margin: .15rem 0 0;
}

.bmg-ig-md code {
    font-size: .8em;
    padding: .1em .35em;
    border-radius: .3em;
    background: rgba(0, 0, 0, .05);
    color: inherit;
    overflow-wrap: anywhere;
}

.bmg-ig-md pre.bmg-ig-code {
    margin: 0 0 .75rem;
    padding: .75rem .9rem;
    border-radius: .5rem;
    background: #1f2430;
    color: #e6e9ef;
    font-size: .75rem;
    line-height: 1.5;
    overflow: auto;
    position: relative;
}

.bmg-ig-md pre.bmg-ig-code code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.bmg-ig-md pre.bmg-ig-code[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: .35rem;
    right: .6rem;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .55;
}

.bmg-ig-md h5,
.bmg-ig-md h6 {
    margin: .9rem 0 .4rem;
    font-weight: 600;
}

.bmg-ig-md .bmg-ig-h1,
.bmg-ig-md .bmg-ig-h2 {
    font-size: 1rem;
}

.bmg-ig-md .bmg-ig-h3,
.bmg-ig-md .bmg-ig-h4 {
    font-size: .9rem;
}

.bmg-ig-md blockquote.bmg-ig-quote {
    margin: 0 0 .75rem;
    padding: .4rem .9rem;
    border-left: 3px solid var(--bmg-primary);
    background: rgba(var(--bmg-primary-rgb, 13, 110, 253), .05);
    border-radius: 0 .4rem .4rem 0;
}

.bmg-ig-md hr {
    margin: .75rem 0;
}

.bmg-ig-md table {
    margin-bottom: .75rem;
}

/* The flash when a search hit or a link lands on an item */
.bmg-ig .is-flashed {
    animation: bmg-ig-flash 1.6s ease-out;
}

@keyframes bmg-ig-flash {
    0% { box-shadow: 0 0 0 .35rem rgba(var(--bmg-primary-rgb, 13, 110, 253), .35); }
    100% { box-shadow: 0 0 0 .35rem rgba(var(--bmg-primary-rgb, 13, 110, 253), 0); }
}

/* =====================================================
   32. INCIDENT MODULE MENU AND SETTINGS (Michael 2026-09-16, docs/spec-incident-menu-and-features.md)
   The group names in the incident menu (Views/Next/Incidents/Partials/_IncidentsSidebarNav), the new location
   checklist on the incident list (_IncidentsSetupChecklist) and the switch states on Views/Next/IncidentModuleSettings.
   The group names use the design's .sidebar-title, which app.css already hides while the sidebar is folded; here they
   also follow the labels' fade while it unfolds, like .nav-link > span.
===================================================== */

.sidebar .bmg-sidebar-group-title {
    padding: 0 1rem .35rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .7);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
}

.sidebar.labels-visible .bmg-sidebar-group-title {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease;
}

.bmg-inc-setup-steps {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.bmg-inc-setup-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    flex-wrap: wrap;
}

.bmg-inc-setup-step > .flex-grow-1 {
    min-width: 12rem;
    flex-basis: 0;
}

.bmg-inc-setup-mark {
    margin-top: .2rem;
    font-size: 1.1rem;
    color: var(--bs-secondary-color);
}

.bmg-inc-setup-step.is-done .bmg-inc-setup-mark {
    color: var(--bs-success);
}

.bmg-inc-setup-step.is-done .fw-semibold {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.bmg-inc-feature-status.is-locked {
    color: var(--bs-body-color);
}

.bmg-inc-settings-location {
    min-width: 14rem;
}

/* Incident notifications (docs/spec-incident-notifications.md): a .bmg-setting row per trigger with an E-mail and a Teams
   switch side by side, under column heads at the top of each group. Used by the module settings' Notifications card and by
   "My incident notifications" (IncidentNotificationSettings/Index). */
.bmg-inc-notify-head {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0 0 .35rem;
    border-bottom: 1px solid var(--bmg-border-subtle);
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.bmg-inc-notify-head > span,
.bmg-inc-notify-channel {
    width: 4.5rem;
    text-align: center;
}

.bmg-inc-notify-channels {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.bmg-inc-notify-channel {
    display: flex;
    justify-content: center;
    margin: 0;
}

.bmg-inc-notify-channel .form-check {
    margin: 0;
    padding-left: 2.5em;
    min-height: 0;
}

.bmg-inc-notify-org {
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.bmg-inc-notify-group + .bmg-inc-notify-group {
    margin-top: 1.5rem;
}

@media (max-width: 575.98px) {
    .bmg-inc-notify-head > span,
    .bmg-inc-notify-channel {
        width: 3.25rem;
    }
}

/* The notification level picker (Views/Next/IncidentModuleSettings/Partials/_NotificationsNextLevels): three radio cards, the
   checked one outlined in the primary colour. Used on the Notifications card and the setup guide's Notifications step. */
.bmg-inc-notify-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.bmg-inc-notify-level {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.bmg-inc-notify-level:hover {
    border-color: rgba(var(--bmg-primary-rgb), .45);
}

.btn-check:checked + .bmg-inc-notify-level {
    border-color: var(--bmg-primary);
    box-shadow: 0 0 0 1px var(--bmg-primary);
}

.btn-check:focus-visible + .bmg-inc-notify-level {
    outline: 2px solid var(--bmg-primary);
    outline-offset: 2px;
}

.bmg-inc-notify-level-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.bmg-inc-notify-level-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bmg-surface-muted);
}

.bmg-inc-notify-level-name {
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.bmg-inc-notify-level-badge {
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: rgba(var(--bmg-primary-rgb), .1);
    color: var(--bmg-primary);
    font-size: .72rem;
}

.bmg-inc-notify-level-check {
    margin-left: auto;
    color: var(--bmg-primary);
    visibility: hidden;
}

.btn-check:checked + .bmg-inc-notify-level .bmg-inc-notify-level-check {
    visibility: visible;
}

.bmg-inc-notify-level-text {
    color: var(--bs-body-color);
    font-size: .875rem;
}

.bmg-inc-notify-level-meta {
    margin-top: auto;
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.bmg-inc-notify-custom {
    margin: .75rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

/* =====================================================
   33. TICKET QUEUE (Views/Next/TicketQueue, Michael 2026-09-16)
   Index: a queue is a .bmg-field-row with its three shared links under it; the slide-in's
   logo, status switches and status screen colours. Statistics: the arrival charts' labels
   and peak, and the by-status rows. Script: bmg-ticket-queue.js.
===================================================== */

/* The join, display and terminal links of a queue, side by side where they fit. */
.bmg-tq-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--bmg-border-subtle);
}

.bmg-tq-link {
    min-width: 0;
}

.bmg-tq-link-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .1rem;
}

/* A queue that is switched off: its links no longer work for visitors. */
.bmg-tq-queue.is-inactive .bmg-tq-links {
    opacity: .6;
}

/* The logo as the join page shows it: whole, never cropped. */
.bmg-tq-logo-preview {
    flex: 0 0 96px;
    width: 96px;
    height: 64px;
    border-radius: .6rem;
    border: 1px solid var(--bmg-border-subtle);
    background: var(--bmg-surface-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bmg-secondary);
    font-size: 1.4rem;
}

.bmg-tq-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bmg-tq-status-switches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: .35rem 1.5rem;
}

.bmg-tq-status-switches .form-check {
    margin-bottom: 0;
}

/* Status screens: the status, its two colours and how they look together. */
.bmg-tq-color-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem minmax(0, 1.2fr);
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-top: 1px solid var(--bmg-border-subtle);
}

.bmg-tq-color-row.bmg-tq-color-head {
    border-top: 0;
    padding-top: 0;
}

.bmg-tq-color-row .form-control-color {
    width: 100%;
}

.bmg-tq-color-preview {
    display: block;
    min-width: 0;
    padding: .4rem .9rem;
    border-radius: .6rem;
    border: 1px solid var(--bmg-border-subtle);
    font-weight: 600;
    font-variation-settings: "wght" 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .bmg-tq-color-row {
        grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem;
    }

    .bmg-tq-color-row.bmg-tq-color-head {
        display: none;
    }

    .bmg-tq-color-preview {
        grid-column: 1 / -1;
    }
}

/* Statistics: the arrival charts. A day chart past 16 days names every few days only. */
.bmg-tq-chart .arrival-chart-slot.is-label-hidden .arrival-chart-hour {
    display: none;
}

.bmg-tq-chart .arrival-chart-hour {
    white-space: nowrap;
}

/* The busiest hour stands out; its count is in the card's subtitle as well. */
.bmg-tq-hour-chart .arrival-chart-slot.is-peak .arrival-chart-bar {
    background: rgb(var(--bmg-primary-rgb));
}

/* 24 labels do not fit side by side below lg: every other hour, as on the system logs. */
@media (max-width: 991.98px) {
    .bmg-tq-hour-chart .arrival-chart-slot:nth-child(even) .arrival-chart-hour {
        display: none;
    }
}

.bmg-tq-status-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.bmg-tq-status-row {
    display: grid;
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 3rem 2.75rem;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.bmg-tq-status-row .progress {
    height: .5rem;
}

/* =====================================================
   34. SETUP GUIDES (Michael 2026-09-17; docs/spec-location-setup-guide.md)
   The frame the step-by-step setup guides share, run by assets/next/bmg/bmg-setup-guide.js: the step menu, the heading of a
   working step, the short explanations, forms, ready-made tiles, trees, rows, roles and the "Try it" code. The step card,
   step icons and titles are the design drop's reporting wizard (app.css 07). Every rule is scoped under .bmg-guide, the
   page root. Used by the location guide (Views/Next/Locations/SetupGuide). The incident guide (Views/Next/IncidentSetup)
   still carries its own copy in bmg-incidents-setup.css section 18 until it moves onto this frame.
===================================================== */

/* The step menu (design review, 2026-09-18): a rail beside the step, held sticky by the settings page's .bmg-settings-rail,
   with the steps joined by a line; the current step tinted as the settings page's current section, a done one ticked. As
   pills above the card it wrapped and left the last step alone on a second line. On a narrow screen it is a row of pills
   that scrolls sideways, and bmg-setup-guide.js brings the current one into view. */
.bmg-guide .bmg-guide-nav ol {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bmg-guide .bmg-guide-nav li {
    position: relative;
}

/* The line from one step's mark down to the next one's, green once the step above it is done. */
.bmg-guide .bmg-guide-nav li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(.75rem + .8rem - 1px);
    top: 2.3rem;
    bottom: -.55rem;
    width: 2px;
    border-radius: 2px;
    background: var(--bmg-border-subtle);
    pointer-events: none;
}

.bmg-guide .bmg-guide-nav li:not(:last-child):has(> .bmg-guide-nav-item.is-done)::after {
    background: rgba(var(--bmg-success-rgb), .35);
}

.bmg-guide .bmg-guide-nav-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    padding: .5rem .75rem;
    border: 0;
    border-radius: .8rem;
    background: transparent;
    color: var(--bmg-secondary);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
}

.bmg-guide .bmg-guide-nav-item:hover {
    background: rgba(var(--bmg-primary-rgb), .06);
    color: var(--bmg-font);
}

/* Beside the mark's middle on one line, and wrapping under itself on two. */
.bmg-guide .bmg-guide-nav-label {
    padding-top: .25rem;
    min-width: 0;
}

.bmg-guide .bmg-guide-nav-mark {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 50%;
    background: var(--bmg-surface);
    font-size: .75rem;
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.bmg-guide .bmg-guide-nav-item.is-current {
    background: rgba(var(--bmg-primary-rgb), .1);
    color: var(--bmg-primary);
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.bmg-guide .bmg-guide-nav-item.is-done .bmg-guide-nav-mark {
    border-color: transparent;
    background: rgba(var(--bmg-success-rgb), .15);
    color: var(--bs-success);
}

.bmg-guide .bmg-guide-nav-item.is-current .bmg-guide-nav-mark {
    border-color: var(--bmg-primary);
    background: var(--bmg-primary);
    color: var(--bmg-white);
}

@media (max-width: 991.98px) {
    .bmg-guide .bmg-guide-nav ol {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: .5rem;
        overflow-x: auto;
        padding-bottom: .35rem;
        scrollbar-width: thin;
    }

    .bmg-guide .bmg-guide-nav li:not(:last-child)::after {
        display: none;
    }

    .bmg-guide .bmg-guide-nav-item {
        align-items: center;
        width: auto;
        padding: .35rem .85rem .35rem .35rem;
        border: 1px solid var(--bmg-border-subtle);
        border-radius: 999px;
        background: var(--bmg-surface);
        white-space: nowrap;
    }

    .bmg-guide .bmg-guide-nav-item.is-current {
        border-color: rgba(var(--bmg-primary-rgb), .35);
    }

    .bmg-guide .bmg-guide-nav-label {
        padding-top: 0;
    }
}

/* What we will set up, on the first step: every step ahead as a button to it, ticked when done. Not struck through, as the
   incident guide's checklist is: a done step here is a setting that can still be opened and changed. In two columns read
   downwards, so the first step leads the left one. */
.bmg-guide .bmg-guide-overview {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .bmg-guide .bmg-guide-overview {
        grid-auto-flow: column;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, auto);
        column-gap: .75rem;
    }
}

.bmg-guide .bmg-guide-overview-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    height: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .9rem;
    background: var(--bmg-surface);
    color: var(--bs-body-color);
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease;
}

.bmg-guide .bmg-guide-overview-item:hover {
    border-color: rgba(var(--bmg-primary-rgb), .3);
    background: rgba(var(--bmg-primary-rgb), .04);
}

.bmg-guide .bmg-guide-overview-mark {
    flex: 0 0 auto;
    font-size: 1.1rem;
    color: var(--bmg-secondary);
}

.bmg-guide .bmg-guide-overview-item.is-done .bmg-guide-overview-mark {
    color: var(--bs-success);
}

.bmg-guide .bmg-guide-overview-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.bmg-guide .bmg-guide-overview-title {
    font-size: .9rem;
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.bmg-guide .bmg-guide-overview-detail {
    color: var(--bmg-secondary);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.bmg-guide .bmg-guide-overview-go {
    flex: 0 0 auto;
    color: var(--bmg-secondary);
    font-size: .75rem;
}

/* A working step's heading: the small step icon beside the title, left-aligned so the forms under it have the width. */
.bmg-guide .bmg-guide-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bmg-guide .bmg-guide-head .incident-step-icon-xs {
    width: 3rem;
    height: 3rem;
    font-size: 1.35rem;
}

.bmg-guide .bmg-guide-head .incident-step-title {
    font-size: 1.6rem;
}

.bmg-guide .bmg-guide-head .incident-step-description {
    font-size: 1.05rem;
}

.bmg-guide .incident-step-title:focus {
    outline: none;
}

/* The two or three sentences that explain an idea. */
.bmg-guide .bmg-guide-points {
    display: grid;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.bmg-guide .bmg-guide-points li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.bmg-guide .bmg-guide-points i {
    width: 1.25rem;
    margin-top: .2rem;
    text-align: center;
    color: var(--bmg-secondary);
}

/* How a visit travels: four stops, side by side where there is room. The icon sits above the text, so a stop's title has
   the tile's whole width (beside it, the titles broke over three lines). On a phone, one stop a row with the icon beside. */
.bmg-guide .bmg-guide-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.bmg-guide .bmg-guide-flow li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 1rem;
    background: var(--bmg-surface-muted);
}

@media (max-width: 1199.98px) {
    .bmg-guide .bmg-guide-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .bmg-guide .bmg-guide-flow {
        grid-template-columns: 1fr;
    }

    .bmg-guide .bmg-guide-flow li {
        flex-direction: row;
        gap: .75rem;
    }
}

/* The forms on a step. */
.bmg-guide .bmg-guide-form {
    padding: 1rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 1rem;
    background: var(--bmg-surface-muted);
}

/* The ready-made category tiles: the design's category options with a second line for the SLA and priority. */
.bmg-guide .bmg-guide-starters {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.bmg-guide .bmg-guide-contents {
    display: contents;
}

.bmg-guide .bmg-guide-starter-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bmg-guide .bmg-guide-starter-name,
.bmg-guide .bmg-guide-starter-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bmg-guide .bmg-guide-starter-meta {
    color: var(--bmg-secondary);
    font-size: .8rem;
    font-weight: 400;
    font-variation-settings: "wght" 400 !important;
}

.bmg-guide .bmg-guide-starter-added {
    margin-left: auto;
    color: var(--bs-success);
    font-size: .75rem;
}

.bmg-guide .btn-check:disabled + .incident-category-option {
    cursor: default;
    opacity: .75;
}

/* The area tree. */
.bmg-guide .bmg-guide-tree-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bmg-guide .bmg-guide-tree-list .bmg-guide-tree-list {
    margin-left: .85rem;
    padding-left: 1rem;
    border-left: 1px solid var(--bmg-border-subtle);
}

.bmg-guide .bmg-guide-node {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    min-height: 2.75rem;
    padding: .3rem 0;
}

.bmg-guide .bmg-guide-node > i {
    color: var(--bmg-secondary);
}

.bmg-guide .bmg-guide-node-name {
    font-weight: 600;
    font-variation-settings: "wght" 600;
    overflow-wrap: anywhere;
}

.bmg-guide .bmg-guide-node-actions {
    display: inline-flex;
    gap: .35rem;
    margin-left: auto;
}

.bmg-guide .bmg-guide-subform {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .25rem 0 .5rem 1.6rem;
}

.bmg-guide .bmg-guide-subform .form-floating {
    min-width: 14rem;
}

/* A category, asset or person on a step. */
.bmg-guide .bmg-guide-list {
    border-top: 1px solid var(--bmg-border-subtle);
}

.bmg-guide .bmg-guide-list > p {
    padding-top: .75rem;
}

.bmg-guide .bmg-guide-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--bmg-border-subtle);
}

.bmg-guide .bmg-guide-row.is-sub {
    padding-left: 1.5rem;
}

.bmg-guide .bmg-guide-row-main {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.bmg-guide .bmg-guide-row-actions {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Where a category is offered: the area tree as ticks, under its row. */
.bmg-guide .bmg-guide-where {
    flex: 1 0 100%;
    padding: 1rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 1rem;
    background: var(--bmg-surface-muted);
}

.bmg-guide .bmg-guide-where-list {
    max-height: 18rem;
    overflow-y: auto;
}

.bmg-guide .bmg-guide-where-item {
    margin-left: calc(var(--bmg-guide-depth, 0) * 1.25rem);
}

/* What an asset can have later, on the Assets page: quieter than a form, so it reads as a pointer and not a task. */
.bmg-guide .bmg-guide-later {
    padding: 1rem;
    border: 1px dashed var(--bmg-border-subtle);
    border-radius: 1rem;
}

.bmg-guide .bmg-guide-later .bmg-guide-points {
    margin-bottom: .75rem;
}

/* The roles on the Team step. */
.bmg-guide .bmg-guide-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .75rem;
}

.bmg-guide .bmg-guide-role {
    padding: .85rem 1rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 1rem;
    background: var(--bmg-surface-muted);
}

.bmg-guide .bmg-guide-role i {
    color: var(--bmg-secondary);
}

/* The last step: the code beside its picker, link and status. */
.bmg-guide .bmg-guide-test {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.bmg-guide .bmg-guide-qr-wrap {
    flex: 0 0 auto;
    padding: .75rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 1rem;
    background: var(--bmg-white);
}

.bmg-guide .bmg-guide-qr {
    display: block;
    width: 13.75rem;
    height: 13.75rem;
    max-width: 100%;
    object-fit: contain;
}

.bmg-guide .bmg-guide-test-side {
    flex: 1 1 18rem;
    min-width: 0;
}

.bmg-guide .bmg-guide-status {
    padding: .75rem 1rem;
    border-radius: 1rem;
    background: var(--bmg-surface-muted);
}

@media (max-width: 575.98px) {
    .bmg-guide .bmg-guide-qr-wrap {
        margin-inline: auto;
    }

    .bmg-guide .bmg-guide-node-actions {
        margin-left: 0;
    }
}

/* Numbered instructions inside a step, such as setting up Microsoft Entra ID. */
.bmg-guide .bmg-guide-steps-list {
    display: grid;
    gap: .35rem;
    margin-bottom: 0;
    padding-left: 1.25rem;
}

/* A plain-text message or term, a few lines tall (form-floating fixes a height otherwise). */
.bmg-guide .form-floating > .bmg-guide-textarea.form-control {
    height: auto;
    min-height: 7rem;
}

/* The logo and the check-in page's background image on the Basics step: the settings page's image previews (.bmg-image-preview,
   the background one .is-wide and covered), each the width of its column and of one height, so the two sit level. */
.bmg-guide .bmg-guide-image-preview {
    max-width: 100%;
    height: 7.5rem;
    background: var(--bmg-white);
}

.bmg-guide .bmg-guide-image-preview.is-wide {
    background: var(--bmg-surface-subtle);
}

/* The check-in's first screen beside them, and larger in #locGuidePreviewModal: a device frame whose iframe is laid out at the
   device's own width and scaled down to fit (bmg-location-setupguide.js, fitDevices, sets the sizes and the scale). The page
   inside is a picture: nothing in it can be clicked, and on the step a click anywhere on it opens the larger one. */
.bmg-guide .bmg-guide-device-slot {
    position: relative;
    display: flex;
    justify-content: center;
}

.bmg-guide .bmg-guide-device {
    position: relative;
    overflow: hidden;
    width: 11rem;
    height: 23.75rem;
    border: .35rem solid #1f2328;
    border-radius: 1.6rem;
    background: #000;
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .14);
}

.bmg-guide .bmg-guide-device.is-tablet {
    border-width: .6rem;
    border-radius: 1.4rem;
}

.bmg-guide .bmg-guide-device-screen {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

.bmg-guide .bmg-guide-device-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bmg-surface-subtle);
    text-align: center;
}

/* The whole phone on the step is the button that opens the larger preview (the QR code's zoom button and badge). */
.bmg-guide .bmg-guide-device-open {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1.2rem;
}

.bmg-guide .bmg-guide-preview-devices {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
}

.bmg-guide .bmg-guide-preview-figure {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.bmg-guide .bmg-guide-preview-figure.is-wide {
    flex-grow: 2;
}

.bmg-guide .bmg-guide-preview-figure figcaption {
    margin-top: .6rem;
    color: var(--bmg-secondary);
    font-size: .85rem;
    text-align: center;
}

@media (max-width: 767.98px) {
    .bmg-guide .bmg-guide-preview-devices {
        flex-direction: column;
        align-items: stretch;
    }
}

/* The rows of a host import, checked or imported. */
.bmg-guide .bmg-guide-import-rows {
    max-height: 20rem;
    margin-top: .75rem;
    overflow: auto;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: .75rem;
    background: var(--bmg-white);
}

.bmg-guide .bmg-guide-import-rows table {
    font-size: .85rem;
}

/* The remove button inside a domain chip. */
.bmg-guide .bmg-guide-chip-remove {
    margin-left: .35rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
}

/* =====================================================
   35. RECEPTION DESK: TABLE LAYOUT (Michael, 2026-09-17)
   Views/Next/Home/Partials/_ReceptionTable.cshtml: every visit on the day in one table, the classic /home/index list,
   behind the header's Meetings | Table switch. .bmg-admin-table (section 24) with the guest lines' pieces inside it
   (status dot, time indicators, chips, buttons). One visit is one <tbody>: its row and a folded details row.

   Colour and size round (Michael, 2026-09-25): a customer's receptionists found the table "small, grey and colourless"
   beside the classic one. The rows now sit on a white card under a heading band, a little larger; every row has a bar
   in its state's colour on the left and its state as a pill (green inside, amber expected, red late or no-show, slate
   out), the status tiles take the same colours so they read as the legend, and the check-in and check-out buttons are
   solid and of one width. Checked out is slate rather than the classic list's red, because red is late here.
===================================================== */

/* The design's view toggle sits in the desk header beside the day controls, at the header's button height. */
.bmg-reception-day .bmg-layout-toggle .btn {
    min-width: 0;
    height: var(--bmg-btn-height-sm);
    min-height: var(--bmg-btn-height-sm);
    padding-inline: .85rem;
}

/* The white card the rows sit on, inside the section's grey panel. No overflow clipping: the rows' menus open past its
   edge. The padding keeps the rows' square corners clear of the card's round ones.
   It is also the query container the columns answer to (width round, end of this section): the room the table has
   depends on the sidebar and the width toggle as much as on the screen, so a media query cannot tell. Inline-size
   containment only, which neither clips nor becomes the menus' containing block. */
.bmg-desk-table-wrap {
    container: bmg-desk-table / inline-size;
    padding: .4rem .5rem .5rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: 1.25rem;
    background: var(--bmg-surface);
    box-shadow: var(--bmg-shadow-card);
}

.bmg-desk-table {
    font-size: .95rem;
}

/* The heading band: dark words in normal case on a light band, as the classic table's heading row. */
.bmg-desk-table thead th {
    padding: .7rem .85rem;
    border-bottom: 0;
    background: var(--bmg-surface-subtle);
    color: rgb(var(--bmg-font-rgb));
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: none;
}

.bmg-desk-table thead th:first-child {
    border-radius: .75rem 0 0 .75rem;
}

.bmg-desk-table thead th:last-child {
    border-radius: 0 .75rem .75rem 0;
}

.bmg-desk-table tbody td {
    padding: .7rem .85rem;
}

.bmg-desk-table .bmg-trow {
    --bmg-trow-rgb: var(--bmg-warning-rgb);
    cursor: pointer;
}

/* The row's state: a bar on its left edge (the classic table's coloured stripe) and the pill in the Status column.
   bmg-row-{tone} comes from the server; the script turns bmg-row-pending into bmg-row-late when a countdown runs out. */
.bmg-desk-table .bmg-trow.bmg-row-in {
    --bmg-trow-rgb: var(--bmg-success-rgb);
}

.bmg-desk-table .bmg-trow.bmg-row-late,
.bmg-desk-table .bmg-trow.bmg-row-cancelled {
    --bmg-trow-rgb: var(--bmg-danger-rgb);
}

.bmg-desk-table .bmg-trow.bmg-row-out {
    --bmg-trow-rgb: var(--bmg-secondary-rgb);
}

.bmg-desk-table .bmg-trow > td:first-child {
    box-shadow: inset 4px 0 0 rgb(var(--bmg-trow-rgb));
}

.bmg-desk-table .bmg-trow.bmg-row-cancelled > td:first-child {
    box-shadow: inset 4px 0 0 rgba(var(--bmg-trow-rgb), .4);
}

/* Secondary text a step darker than the list pages' muted grey: company, job title, walk-in, room. */
.bmg-desk-table .bmg-trow .text-muted {
    color: rgba(var(--bmg-font-rgb), .7) !important;
}

/* A cancelled registration stays quiet: its struck-through name keeps the muted grey. */
.bmg-desk-table .bmg-trow.bmg-row-cancelled .text-muted {
    color: rgba(var(--bmg-text-muted-rgb), .85) !important;
}

.bmg-desk-table .bmg-tname {
    font-size: 1rem;
}

/* ---- Status: the pill with the state's word, and the number beside it ---- */
.bmg-desk-table .bmg-tstatus {
    flex-wrap: wrap;
    gap: .3rem .6rem;
}

.bmg-tstatus-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem .25rem .55rem;
    border: 1px solid rgba(var(--bmg-trow-rgb), .45);
    border-radius: 999px;
    background: rgba(var(--bmg-trow-rgb), .14);
    color: rgb(var(--bmg-font-rgb));
    font-size: .8rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* Amber is light: a stronger fill and a darker rim, with dark words. */
.bmg-trow.bmg-row-pending .bmg-tstatus-pill {
    border-color: rgba(var(--bmg-trow-rgb), .8);
    background: rgba(var(--bmg-trow-rgb), .28);
}

.bmg-trow.bmg-row-in .bmg-tstatus-pill {
    color: color-mix(in srgb, rgb(var(--bmg-success-rgb)) 70%, #000);
}

.bmg-trow.bmg-row-late .bmg-tstatus-pill,
.bmg-trow.bmg-row-cancelled .bmg-tstatus-pill {
    color: color-mix(in srgb, rgb(var(--bmg-danger-rgb)) 78%, #000);
}

.bmg-trow.bmg-row-cancelled .bmg-tstatus-pill {
    border-color: rgba(var(--bmg-trow-rgb), .25);
    background: rgba(var(--bmg-trow-rgb), .06);
}

.bmg-trow.bmg-row-out .bmg-tstatus-pill {
    color: rgba(var(--bmg-font-rgb), .78);
}

.bmg-tstatus-pill .bmg-dot {
    width: .55rem;
    height: .55rem;
}

/* An expected guest's pill carries the Late word too, shown once the row turns late. */
.bmg-tstatus-word.is-late-word {
    display: none;
}

.bmg-trow.bmg-row-late .bmg-tstatus-pill.has-late-word > .bmg-tstatus-word {
    display: none;
}

.bmg-trow.bmg-row-late .bmg-tstatus-pill.has-late-word > .bmg-tstatus-word.is-late-word {
    display: inline;
}

.bmg-desk-table .bmg-tstatus-time {
    color: rgba(var(--bmg-font-rgb), .78);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Late keeps the guest lines' red number (.bmg-row-late .bmg-row-status-text), restated since the rule above comes later;
   a finished visit is not muted here. */
.bmg-desk-table .bmg-row-late .bmg-tstatus-time {
    color: rgb(var(--bmg-danger-rgb));
}

.bmg-desk-table .bmg-row-out .bmg-tstatus-time {
    color: rgba(var(--bmg-font-rgb), .7);
}

/* ---- The status tiles in the table layout: each in its rows' colour, so the tiles are the legend. The drop's markup
   stays text-bg-secondary on every tile; app.css greys an inactive tile's icon with !important, hence these. ---- */
.bmg-reception[data-layout="table"] #receptionTiles .kpi-card {
    --bmg-tile-rgb: var(--bmg-primary-rgb);
    --bmg-tile-ink: rgb(var(--bmg-font-rgb));
}

/* Live (the classic list's first tile, 2026-09-25): no row colour of its own, since it holds both expected and inside
   guests, so the classic tile's cyan, from Bootstrap's info colour. Light, so a dark icon, as on the amber tile. */
.bmg-reception[data-layout="table"] #receptionTiles .kpi-card[data-filter="filterLive"] {
    --bmg-tile-rgb: var(--bs-info-rgb, 13, 202, 240);
    --bmg-tile-ink: color-mix(in srgb, rgb(var(--bs-info-rgb, 13, 202, 240)) 50%, #000);
}

.bmg-reception[data-layout="table"] #receptionTiles .kpi-card[data-filter="filterPreregistered"] {
    --bmg-tile-rgb: var(--bmg-warning-rgb);
    --bmg-tile-ink: color-mix(in srgb, rgb(var(--bmg-warning-rgb)) 55%, #000);
}

.bmg-reception[data-layout="table"] #receptionTiles .kpi-card[data-filter="filterCheckedIn"] {
    --bmg-tile-rgb: var(--bmg-success-rgb);
    --bmg-tile-ink: color-mix(in srgb, rgb(var(--bmg-success-rgb)) 85%, #000);
}

.bmg-reception[data-layout="table"] #receptionTiles .kpi-card[data-filter="filterCheckedOut"] {
    --bmg-tile-rgb: var(--bmg-secondary-rgb);
    --bmg-tile-ink: rgb(var(--bmg-secondary-rgb));
}

.bmg-reception[data-layout="table"] #receptionTiles .kpi-card .kpi-icon,
.bmg-reception[data-layout="table"] #receptionTiles .kpi-card:not(.active) .kpi-icon {
    background-color: rgb(var(--bmg-tile-rgb)) !important;
    color: #fff !important;
}

.bmg-reception[data-layout="table"] #receptionTiles .kpi-card[data-filter="filterPreregistered"] .kpi-icon,
.bmg-reception[data-layout="table"] #receptionTiles .kpi-card[data-filter="filterLive"] .kpi-icon {
    color: rgb(var(--bmg-font-rgb)) !important;
}

.bmg-reception[data-layout="table"] #receptionTiles .kpi-card .stat-number {
    color: var(--bmg-tile-ink);
}

.bmg-reception[data-layout="table"] #receptionTiles .kpi-card.active {
    border-color: rgba(var(--bmg-tile-rgb), .8);
}

/* The details row takes no room while it is folded, and never takes the hover. */
.bmg-desk-table .bmg-trow-details > td,
.bmg-desk-table tbody tr.bmg-trow-details:hover > td {
    padding: 0;
    border-bottom: 0;
    background: transparent;
}

.bmg-desk-table .bmg-trow-details .bmg-row-details-body {
    border-bottom: 1px solid var(--bmg-border-subtle);
}

/* Sortable headings: the heading's own look, with an arrow that is quiet until the column sorts. */
.bmg-th-sort {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    white-space: nowrap;
}

.bmg-th-sort:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .5);
    outline-offset: 2px;
    border-radius: .25rem;
}

.bmg-th-sort-icon {
    font-size: .65rem;
    opacity: .4;
}

th[aria-sort="ascending"] .bmg-th-sort-icon,
th[aria-sort="descending"] .bmg-th-sort-icon {
    opacity: 1;
}

/* Column widths (width round, 2026-09-28). The columns with words in them (status, visitor, host, meeting, building,
   type) are percentages, and the ones holding times and buttons are 1%, which leaves them their content's width. The
   percentages add up to less than 100 with every column shown, so the room left over is shared in their proportion.
   The name, host, meeting, building and type cells cut their text instead of growing to fit it: max-width: 0 on the
   cell takes its text out of the column's minimum, and the heading's min-width puts a floor back. Without that, one
   long job title under a name held the whole table wider than the screen, and the shell (.content, overflow-x: clip)
   cut the Check in button off. */
.bmg-desk-table .bmg-tcol-status {
    width: 12%;
}

.bmg-desk-table .bmg-tcol-visitor {
    width: 26%;
}

.bmg-desk-table .bmg-tcol-host {
    width: 16%;
}

.bmg-desk-table .bmg-tcol-building {
    width: 8%;
}

.bmg-desk-table .bmg-tcol-type {
    width: 7%;
}

.bmg-desk-table td.bmg-tcol-visitor,
.bmg-desk-table td.bmg-tcol-host,
.bmg-desk-table td.bmg-tcol-meeting,
.bmg-desk-table td.bmg-tcol-building,
.bmg-desk-table td.bmg-tcol-type {
    max-width: 0;
}

.bmg-desk-table th.bmg-tcol-visitor {
    min-width: 12rem;
}

.bmg-desk-table th.bmg-tcol-host {
    min-width: 9rem;
}

.bmg-desk-table th.bmg-tcol-meeting {
    min-width: 8rem;
}

.bmg-desk-table th.bmg-tcol-building,
.bmg-desk-table th.bmg-tcol-type {
    min-width: 7rem;
}

.bmg-tcol-time,
.bmg-tcol-print,
.bmg-tcol-details,
.bmg-tcol-actions {
    width: 1%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Expected, check-in and check-out: plain times, the in and out ones behind the guest lines' arrow indicators. */
.bmg-ttime {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.bmg-ttime-value {
    font-weight: 600;
    font-variation-settings: "wght" 700;
    font-variant-numeric: tabular-nums;
}

.bmg-ttime-until {
    color: rgba(var(--bmg-font-rgb), .62);
    font-variant-numeric: tabular-nums;
}

/* The guest: the line's avatar and name, the name opening the details, and the terms mark beside them. */
.bmg-tvisitor {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.bmg-trow-who {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    max-width: 24rem;
}

/* The terms mark as the classic list drew it: the icon alone, in its colour; the tooltip says the rest. */
.bmg-tname-chip {
    flex-shrink: 0;
    padding: .25rem .45rem;
}

.bmg-tname-chip .bmg-chip-text {
    display: none;
}

.bmg-tname-chip i {
    font-size: .8rem;
}

.bmg-tname-chip.is-success i {
    color: rgb(var(--bmg-success-rgb));
}

.bmg-tname-chip.is-warning i {
    color: color-mix(in srgb, rgb(var(--bmg-warning-rgb)) 55%, #000);
}

.bmg-tname-chip.is-danger i {
    color: rgb(var(--bmg-danger-rgb));
}

.bmg-tname-chip.is-muted i {
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

/* The host: a smaller avatar than the guest's, the name, and the job title under it. The avatar and name are the
   trigger for the host's details (section 27, host details round). */
.bmg-thost > .bmg-host-trigger {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    max-width: 18rem;
}

.bmg-thost .avatar-sm .avatar-circle {
    width: 34px;
    height: 34px;
}

.bmg-thost > .bmg-host-trigger:hover .bmg-thost-name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The meeting takes its share of the row and cuts its title there, instead of at a fixed 12rem while half the row
   stands empty; the building and the type do the same (max-width: 0 above lets their cells shrink below their text). */
.bmg-desk-table .bmg-tcol-meeting {
    width: 18%;
}

.bmg-desk-table td.bmg-tcol-meeting .bmg-tcell-text,
.bmg-desk-table td.bmg-tcol-building .bmg-tcell-text,
.bmg-desk-table td.bmg-tcol-type .bmg-tcell-text {
    display: block;
    max-width: 100%;
}

/* A meeting not yet over: its title opens the meeting slide-in in edit mode (2026-09-25). A plain button that reads as
   the title, underlined on hover as the host's name is, with the text's own ellipsis. */
.bmg-tmeeting-edit {
    display: block;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.bmg-tmeeting-edit:hover .bmg-tcell-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bmg-tmeeting-edit:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .5);
    outline-offset: 2px;
    border-radius: .25rem;
}

/* The label, one click away: green once printed, amber while an expected guest has none. */
.bmg-tprint {
    height: 2rem;
    min-height: 2rem !important;
    padding-block: 0 !important;
    gap: .4rem;
    border-color: var(--bmg-border-muted) !important;
}

.bmg-tprint i {
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-tprint.is-success {
    border-color: rgba(var(--bmg-success-rgb), .45) !important;
    background: rgba(var(--bmg-success-rgb), .1);
    color: color-mix(in srgb, rgb(var(--bmg-success-rgb)) 70%, #000);
}

.bmg-tprint.is-success:hover {
    background-color: rgba(var(--bmg-success-rgb), .18) !important;
}

.bmg-tprint.is-success i {
    color: rgb(var(--bmg-success-rgb));
}

.bmg-tprint.is-warning {
    border-color: rgba(var(--bmg-warning-rgb), .8) !important;
}

.bmg-tprint.is-warning i {
    color: color-mix(in srgb, rgb(var(--bmg-warning-rgb)) 55%, #000);
}

.bmg-trow-who:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .5);
    outline-offset: 2px;
    border-radius: .5rem;
}

.bmg-tcell-text {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* The chips read left to right here, not against an action column. They stay on one line up to 9rem and wrap beyond
   it: the box is as wide as the chips on one line (width: max-content) but never wider than that, so a row with many
   chips cannot widen the table past the screen. */
.bmg-desk-table .bmg-row-chips {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: max-content;
    max-width: 9rem;
}

.bmg-trow-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

.bmg-trow-actions .btn {
    height: 2.25rem;
    min-height: 2.25rem;
    padding-block: 0;
}

/* Solid, and one width, so the buttons stand in a column as the classic table's did. */
.bmg-trow-actions .bmg-row-checkin,
.bmg-trow-actions .bmg-row-checkout,
.bmg-trow-actions .bmg-row-action-ghost {
    min-width: 8.5rem;
}

.bmg-trow-actions .bmg-row-checkin,
.bmg-trow-actions .bmg-row-checkout {
    font-size: .875rem;
    font-weight: 600;
    font-variation-settings: "wght" 700;
}

.bmg-trow-actions .dropdown > .btn {
    width: 2.25rem;
    padding-inline: 0 !important;
    justify-content: center;
}

/* The state under the name: only where the Status column is gone (width round, below). */
.bmg-desk-table .bmg-tstatus-inline {
    display: none;
}

/* ---- Width round (Michael, 2026-09-28: "not responsive on multiple different screen sizes"). The table ran off the
   right edge at every width below about 1650px of table, taking the Check in button with it: the cells were shown and
   hidden by the SCREEN's width (d-lg-table-cell and friends) while the table's own room also depends on the sidebar
   (72px folded, 260px open) and the width toggle, and its word columns could not shrink below their text.
   Now the columns answer to the table's own width (the bmg-desk-table container on .bmg-desk-table-wrap), and go in a
   fixed order as the room runs out: type, building, meeting (wide), then, a little tighter all round, check-out,
   check-in, print, expected, details. Last the Status column goes, and the state moves under the name
   (.bmg-tstatus-inline) with the buttons as their icons, and on the narrowest phones the host goes too. Status, visitor
   and the buttons always stay. What leaves the row is in its details panel or its menu (Print label).
   The breakpoints are the sums of the columns' smallest widths (a pill, two times, a button of 8.5rem, the floors on
   the name and host headings) with some room to spare; a column added to the table needs a place in this order. ---- */
@container bmg-desk-table (max-width: 1719.98px) {
    .bmg-desk-table .bmg-tcol-type {
        display: none;
    }
}

@container bmg-desk-table (max-width: 1599.98px) {
    .bmg-desk-table .bmg-tcol-building {
        display: none;
    }
}

@container bmg-desk-table (max-width: 1479.98px) {
    .bmg-desk-table .bmg-tcol-meeting {
        display: none;
    }
}

/* Tighter all round: less room between the columns, lower floors under the name and the host, the print button its
   icon (green or amber says printed or not, the tooltip the rest), narrower check-in and check-out buttons. */
@container bmg-desk-table (max-width: 1359.98px) {
    .bmg-desk-table thead th,
    .bmg-desk-table .bmg-trow > td {
        padding-inline: .6rem;
    }

    .bmg-desk-table th.bmg-tcol-visitor {
        min-width: 10.5rem;
    }

    .bmg-desk-table th.bmg-tcol-host {
        min-width: 8rem;
    }

    .bmg-desk-table .bmg-row-chips {
        max-width: 7.5rem;
    }

    .bmg-desk-table .bmg-tprint-text {
        display: none;
    }

    .bmg-trow-actions .bmg-row-checkin,
    .bmg-trow-actions .bmg-row-checkout,
    .bmg-trow-actions .bmg-row-action-ghost {
        min-width: 7rem;
    }
}

@container bmg-desk-table (max-width: 1149.98px) {
    .bmg-desk-table .bmg-tcol-out {
        display: none;
    }
}

@container bmg-desk-table (max-width: 1059.98px) {
    .bmg-desk-table .bmg-tcol-in {
        display: none;
    }
}

@container bmg-desk-table (max-width: 964.98px) {
    .bmg-desk-table .bmg-tcol-print {
        display: none;
    }
}

@container bmg-desk-table (max-width: 894.98px) {
    .bmg-desk-table .bmg-tcol-expected {
        display: none;
    }
}

@container bmg-desk-table (max-width: 774.98px) {
    .bmg-desk-table .bmg-tcol-details {
        display: none;
    }
}

/* A phone, or a tablet with the sidebar open: the state moves under the name, the coloured bar with it, and the
   buttons are their icons (their aria-label and tooltip carry the words). */
@container bmg-desk-table (max-width: 629.98px) {
    .bmg-desk-table .bmg-tcol-status {
        display: none;
    }

    .bmg-desk-table .bmg-tstatus-inline {
        display: flex;
        margin-top: .3rem;
    }

    .bmg-desk-table thead th.bmg-tcol-visitor {
        border-radius: .75rem 0 0 .75rem;
    }

    .bmg-desk-table .bmg-trow > td.bmg-tcol-visitor {
        box-shadow: inset 4px 0 0 rgb(var(--bmg-trow-rgb));
    }

    .bmg-desk-table .bmg-trow.bmg-row-cancelled > td.bmg-tcol-visitor {
        box-shadow: inset 4px 0 0 rgba(var(--bmg-trow-rgb), .4);
    }

    .bmg-trow-who {
        max-width: none;
    }

    .bmg-desk-table .bmg-tact-text {
        display: none;
    }

    .bmg-trow-actions .bmg-row-checkin,
    .bmg-trow-actions .bmg-row-checkout,
    .bmg-trow-actions .bmg-row-action-ghost {
        min-width: 2.25rem;
    }

    .bmg-trow-actions .bmg-row-checkin,
    .bmg-trow-actions .bmg-row-checkout {
        padding-inline: .6rem;
    }
}

@container bmg-desk-table (max-width: 439.98px) {
    .bmg-desk-table .bmg-tcol-host {
        display: none;
    }
}

/* The timeline's jump to a row: a tbody draws no shadow, so its row's cells light up instead. */
.bmg-desk-table tbody.bmg-block-flash {
    animation: none;
    box-shadow: none;
}

.bmg-desk-table tbody.bmg-block-flash > .bmg-trow > td {
    animation: bmg-trow-flash 1.6s ease-out;
}

@keyframes bmg-trow-flash {
    0% { background: rgba(var(--bmg-primary-rgb), .18); }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .bmg-desk-table tbody.bmg-block-flash > .bmg-trow > td {
        animation: none;
        background: rgba(var(--bmg-primary-rgb), .12);
    }
}

/* The table takes the whole screen (ViewBag.NextContainerClass on the desk), with the side room the other wide pages
   keep, so no column touches the screen edge. A page-forced width is not the user's, so the rule above misses it. */
@media (min-width: 992px) {
    main > .container-fluid:has(> .bmg-reception[data-layout="table"]),
    body:has(.bmg-reception[data-layout="table"]) .bmg-shell-footer > .container-fluid {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ---- Section 27, host details round (Michael, 2026-09-18): a click on the host's name opens the host's details
   (Partials/_HostInfoOffcanvas) rather than the meeting's. The name keeps the guest name's look as a toggle: pointer,
   underline on hover, a ring on keyboard focus. Only the avatar and the name are the trigger, not the rest of the host
   column, so a click beside them still opens the line as before. ---- */
.bmg-host-info {
    --bs-offcanvas-width: min(30rem, 100vw);
}

.bmg-block-host > .bmg-host-trigger {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    max-width: 100%;
}

.bmg-host-trigger[role="button"] {
    cursor: pointer;
    border-radius: .5rem;
}

.bmg-host-trigger[role="button"]:focus-visible {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .6);
    outline-offset: 2px;
}

/* The table's host column has its own rule (.bmg-thost, section 35). */
.bmg-block-host > .bmg-host-trigger:hover .fw-semibold {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Section 27, add-guest round (Michael, 2026-09-25): "Add a guest to the meeting" was a bar under every meeting and
   cost a whole line. It is now the counter's last segment on the header line, and a walk-in's "Put on a meeting" is a
   round button in the same look, left of the line's action. A light green wash over the surface colour (so it stays
   green on a red or amber card) with the icon in the success colour: an offer, quieter than the check-in button. Their
   own elements, not .btn-white, whose hover forces a white background with !important. The counter group is the
   reception desk's; the incident pages' .bmg-block-counts is not wrapped and keeps its look. ---- */
.bmg-add-person {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid rgba(var(--bmg-success-rgb), .35);
    background: linear-gradient(rgba(var(--bmg-success-rgb), .08), rgba(var(--bmg-success-rgb), .08)) var(--bmg-surface);
    color: rgb(var(--bmg-success-rgb));
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.bmg-add-person:hover,
.bmg-add-person:focus-visible {
    background: linear-gradient(rgba(var(--bmg-success-rgb), .16), rgba(var(--bmg-success-rgb), .16)) var(--bmg-surface);
    border-color: rgba(var(--bmg-success-rgb), .55);
}

.bmg-add-person:focus-visible {
    outline: 2px solid rgba(var(--bmg-success-rgb), .5);
    outline-offset: 2px;
}

/* The counter and its segment as one control, as tall as the header's buttons. */
.bmg-block-counts-group {
    display: inline-flex;
    align-items: stretch;
    min-height: 2rem;
}

.bmg-block-counts-group.has-add > .bmg-block-counts {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* The counter's own grey border runs on around the segment, and its left edge is the divider. */
.bmg-block-counts-group > .bmg-block-add-guest {
    width: 2.25rem;
    margin-left: -1px;
    border-color: var(--bmg-border-muted);
    border-radius: 0 .6rem .6rem 0;
}

.bmg-block-counts-group > .bmg-block-add-guest:hover,
.bmg-block-counts-group > .bmg-block-add-guest:focus-visible {
    border-color: var(--bmg-border-muted);
}

.bmg-row-actions > .bmg-row-add-to-meeting {
    width: 2.25rem;
    height: 2rem;
    border-radius: var(--bmg-control-radius);
}

/* =====================================================
   36. HOST FRONT PAGE: RIGHT NOW (Michael, 2026-09-18)
   Views/Next/Home/HostDashboard.cshtml with Partials/_HostHomeSection and _HostHomeRow:
   what matters to the host now, as lines to read on a phone. A section is the
   visitor-list header over one card of lines. A line is an avatar (or a notice's
   icon), a name with one line of detail under it, and on the right the reception
   desk's chip (section 27) over the line's buttons. The name is stretched over the
   whole line: a guest's opens the "My guests" card body under the line (the caret
   turns), a notice's follows its link; the buttons sit above it. Also where
   "My guests" stops a linked section, clear of the pinned top nav.
   font-weight goes with its "wght", as app.css requires.
===================================================== */

.bmg-now-section + .bmg-now-section {
    margin-top: 2rem;
}

.bmg-now-list {
    margin-bottom: var(--bmg-card-gap);
}

.bmg-now-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 4rem;
    padding: .7rem 1.25rem;
    transition: background-color .15s ease;
}

/* Every line but the first, also one after an opened body. */
.bmg-now-item:not(:first-child),
.bmg-now-more {
    border-top: 1px solid var(--bmg-border-muted);
}

.bmg-now-item:hover,
.bmg-now-item:focus-within {
    background: rgba(var(--bmg-secondary-rgb), .05);
}

/* Just arrived: a green wash under the design's pulsing dot. Late: the desk's late red down the left edge. */
.bmg-now-item.is-fresh {
    background: rgba(var(--bmg-success-rgb), .07);
}

.bmg-now-item.is-late {
    box-shadow: inset 3px 0 0 rgb(var(--bmg-danger-rgb));
}

.bmg-now-lead {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

/* A notice's icon in the avatar's place and size. */
.bmg-now-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bmg-avatar-sm-size);
    height: var(--bmg-avatar-sm-size);
    border-radius: 50%;
    background: rgba(var(--bmg-secondary-rgb), .12);
    color: rgb(var(--bmg-font-rgb));
    font-size: 1rem;
}

.bmg-now-icon.is-danger {
    background: rgba(var(--bmg-danger-rgb), .14);
    color: rgb(var(--bmg-danger-rgb));
}

.bmg-now-icon.is-warning {
    background: rgba(var(--bmg-warning-rgb), .3);
}

.bmg-now-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.bmg-now-title {
    overflow: hidden;
    color: inherit;
    font-weight: 600;
    font-variation-settings: "wght" 650;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.bmg-now-title:hover,
a.bmg-now-title:focus {
    color: inherit;
}

/* A guest's line toggles its body: a bare button, reading as the name it is. */
button.bmg-now-title {
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
}

/* The focus ring goes round the whole line, which is what the title opens. */
.bmg-now-title:focus-visible {
    outline: none;
}

.bmg-now-title:focus-visible::after {
    outline: 2px solid rgba(var(--bmg-primary-rgb), .6);
    outline-offset: -2px;
}

.bmg-now-caret {
    flex: 0 0 auto;
    color: rgba(var(--bmg-text-muted-rgb), .8);
    font-size: .8rem;
    transition: transform .15s ease;
}

.bmg-now-item:has(> .bmg-now-main > .bmg-now-title[aria-expanded="true"]) {
    background: rgba(var(--bmg-secondary-rgb), .07);
}

.bmg-now-item:has(> .bmg-now-main > .bmg-now-title[aria-expanded="true"]) .bmg-now-caret {
    transform: rotate(180deg);
}

/* The opened body under its line: the card body of "My guests", set off as the reception desk sets off a line's
   details (section 27). */
.bmg-now-list > .collapse > .card-body,
.bmg-now-list > .collapsing > .card-body {
    border-top: 1px dashed var(--bmg-border-muted);
    background: rgba(var(--bmg-secondary-rgb), .03);
}

.bmg-now-sub {
    overflow: hidden;
    color: rgba(var(--bmg-text-muted-rgb), 1);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A notice's sentence is read in full. */
.bmg-now-sub.is-wrap {
    white-space: normal;
}

.bmg-now-side {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
}

.bmg-now-side .bmg-chip {
    font-variant-numeric: tabular-nums;
}

.bmg-now-actions {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.bmg-now-btn {
    min-width: 2.25rem;
    justify-content: center;
}

.bmg-now-chevron {
    color: rgba(var(--bmg-text-muted-rgb), .8);
    font-size: .8rem;
}

.bmg-now-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 1.25rem;
    color: inherit;
    font-size: .85rem;
    font-weight: 500;
    font-variation-settings: "wght" 550;
    text-decoration: none;
}

.bmg-now-more:hover,
.bmg-now-more:focus {
    background: rgba(var(--bmg-secondary-rgb), .05);
    color: inherit;
}

.bmg-now-more i {
    color: rgba(var(--bmg-text-muted-rgb), .8);
    font-size: .8rem;
}

.bmg-now-links {
    margin: 1rem 0;
}

/* Phones: a smaller greeting, a tighter line, and two avatars are enough to say "a group". */
@media (max-width: 575.98px) {
    .bmg-now-head h1 {
        font-size: 1.6rem;
    }

    .bmg-now-item {
        gap: .7rem;
        padding: .65rem 1rem;
    }

    .bmg-now-list > .collapse > .card-body,
    .bmg-now-list > .collapsing > .card-body {
        padding-inline: 1rem !important;
    }

    .bmg-now-more {
        padding-inline: 1rem;
    }

    .bmg-now-lead .avatar-stack .avatar-sm:nth-child(n+3) {
        display: none;
    }
}

/* "My guests": a section the front page links to stops clear of the pinned top nav (60px), as the settings sections
   do. */
.bmg-my-guests-section {
    scroll-margin-top: 76px;
}

/* =====================================================
   37. BILLING BANNER (self-service plan, 2026-09-18; docs/spec-self-service-saas.md)
   A self-service company's trial or payment status above the page, for its administrators only
   (BillingController.Banner, fetched into #billingBanner by Views/Next/Shared/_Layout.cshtml).
   ===================================================== */
.bmg-billing-banner {
    --bmg-billing-banner-rgb: var(--bmg-primary-rgb);

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    margin: 0 0 1rem;
    padding: .6rem .9rem;
    border: 1px solid rgba(var(--bmg-billing-banner-rgb), .25);
    border-radius: 1rem;
    background: rgba(var(--bmg-billing-banner-rgb), .08);
    color: rgb(var(--bmg-font-rgb));
}

.bmg-billing-banner.tone-warning {
    --bmg-billing-banner-rgb: var(--bmg-warning-rgb);
}

.bmg-billing-banner.tone-danger {
    --bmg-billing-banner-rgb: var(--bmg-danger-rgb);
}

.bmg-billing-banner > i {
    color: rgb(var(--bmg-billing-banner-rgb));
}

.bmg-billing-banner-text {
    flex: 1 1 16rem;
    min-width: 0;
}

.bmg-billing-banner-link {
    font-weight: 600;
    white-space: nowrap;
}


/* =====================================================
   38. A LIST WAITING FOR THE SERVER (Michael, 2026-09-23)

   Changing the reception desk's "Checked in" order is a round trip: the choice
   goes to the server, and the sections are asked for again and redrawn. Until
   they land, the old list is still there in the old order, which reads as
   nothing having happened. So it says it is working: the list dims, stops
   taking clicks, and a spinner sits in the middle of the screen. The class
   goes on #receptionSections, which survives the redraw of its children
   (bmg-reception-desk.js, setSectionsBusy); the dropdown's own button becomes
   a spinner at the same time, where the click was.

   Nothing else on the page is covered, so the toolbar, the tiles and the
   location switch stay usable while it works.
===================================================== */

.bmg-sections-busy {
    position: relative;
    pointer-events: none;
}

.bmg-sections-busy > * {
    opacity: .4;
    transition: opacity .12s ease-in-out;
}

/* Fixed, not absolute: the sections can be metres long and scrolled anywhere,
   and the spinner has to be where the eye is. */
.bmg-sections-busy::after {
    content: "";
    position: fixed;
    top: 45%;
    left: 50%;
    z-index: 3;
    width: 2.75rem;
    height: 2.75rem;
    margin: -1.375rem 0 0 -1.375rem;
    border: 3px solid rgba(var(--bmg-primary-rgb), .18);
    border-top-color: rgba(var(--bmg-primary-rgb), .75);
    border-radius: 50%;
    animation: bmg-sections-busy-spin .7s linear infinite;
}

@keyframes bmg-sections-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bmg-sections-busy::after {
        animation-duration: 2.4s;
    }
}

/* =====================================================
   39. MY MEETINGS: A HEADER THAT STAYS PUT (Michael, 2026-09-23)
   Views/Next/CalendarAppointments/MyMeetings.cshtml.

   The drop's visitor card swaps its header when it opens: app.css fades
   .card-time-block, .card-title-collapsed and every .fade-collapsed separator to
   opacity 0, and folds .card-header-meeting out in their place, so an open card
   shows only the date and the meeting title. That reads well on a GUEST card,
   where the header names the guest and the meeting is the context you gain on
   opening it.

   On "My meetings" the card IS the meeting: its header already names the meeting,
   and opening it only reveals the guests. Losing the time and the subject there
   is a header that changes for no gain, so the page keeps the folded header
   exactly as it is and only grows a body. The view leaves out
   .card-header-meeting and drops .fade-collapsed from its separators; this undoes
   what is left. The selector is one class longer than app.css's, and both carry
   !important, so this wins.

   The header's own open-state background (app.css: .card-header:has(.btn
   [aria-expanded="false"]) is surface, open is --bmg-card-header-bg, and the date
   circle turns white against it) is deliberately left alone: it is the same
   open-card tint every Next page uses, and it moves nothing.
===================================================== */

.bmg-meeting-card .card-header .card-toggle[aria-expanded="true"] .card-title-collapsed,
.bmg-meeting-card .card-header .card-toggle[aria-expanded="true"] .card-time-block {
    opacity: 1 !important;
}

/* =====================================================
   40. PROFILE: THE TAB SWITCHER (Michael, 2026-09-24)
   Views/Next/Profile/Edit.cshtml, #profileTabs.

   The drop's profile page has two pill tabs; ours has three (Privacy and terms),
   in a col-md-6 panel. At app.css's 160px minimum per tab, and wider for "My
   visitor profile", the row needs about 510px. On a phone, a tablet and most
   laptops the panel is narrower, and the centred group ran out of it on both
   sides: the first tab was cut off at the screen's edge and the last one past it.

   The row is a size container. Its tabs drop the minimum and share the panel's
   width, and a label too long for its tab wraps inside it instead of pushing the
   row wider. Where the panel is too narrow for icon and label side by side, the
   icon sits above the label and the three tabs take a third each. Measured on
   the panel, not the viewport, because col-md-6 makes the panel narrower at
   800px than at 700px. Where there is room, nothing changes: the group keeps its
   natural width and stays centred.

   The !important on gap and line-height is only to beat the button's own
   Bootstrap utilities (gap-2, lh-base).
===================================================== */

.bmg-profile-tabs {
    container-type: inline-size;
}

.bmg-profile-tabs .view-toggle {
    max-width: 100%;
}

.bmg-profile-tabs .view-toggle > .btn {
    min-width: 0;
    white-space: normal;
    text-wrap: balance;
}

@container (max-width: 419.98px) {
    .bmg-profile-tabs .view-toggle {
        width: 100%;
    }

    .bmg-profile-tabs .view-toggle > .btn {
        flex: 1 1 0;
        flex-direction: column;
        gap: .25rem !important;
        padding: .55rem .4rem;
        font-size: .8125rem;
        line-height: 1.25 !important;
    }
}

/* =====================================================
   41. BILLING: START YOUR FREE TRIAL (self-service plan, Michael 2026-09-24)
   Views/Next/Billing/Partials/_CardWelcome.cshtml, open over the Subscription page while a new self-service company
   has no card (AwaitingCard). The new administrator lands there straight from the signup, so it is the first screen of
   the product they see, and it asks for one thing.

   The design drop has neither a billing page nor a welcome screen. The dialog is put together from its own parts: the
   sidebar's generic gradient and inset shadow for the side that welcomes, the card radius and control shadows for the
   side that asks, the error page's gradient numeral for the free days, and the setup guide's step marks (section 34)
   for how far the signup has come. On a phone the two sides stack and the steps turn into a row, so the button is
   not pushed three screens down.

   Rendered open by the server, so the plain page underneath never shows first. The view's script makes .app inert while
   it is open and removes it on close. z-index: above the sidebar (1040), Bootstrap's modals (1055) and Swal (1060);
   below the toasts (1090), which carry any error from Stripe back.
===================================================== */

html:has(.bmg-trial-welcome) {
    overflow: hidden;
}

.bmg-trial-welcome {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    padding: clamp(1rem, 5vh, 3rem) 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(var(--bmg-font-rgb), .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: bmg-trial-welcome-fade-in .25s ease-out both;
}

/* Focused on open (the view's script) only so a screen reader starts at the title; it is not a control. */
.bmg-trial-welcome:focus {
    outline: none;
}

.bmg-trial-welcome.is-closing {
    animation: bmg-trial-welcome-fade-out .18s ease-in both;
}

/* margin: auto rather than align-items: center, so a dialog taller than the screen scrolls from its top instead of
   losing it above the fold. */
.bmg-trial-welcome-dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    width: 100%;
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    border-radius: var(--bmg-card-radius);
    background: var(--bmg-surface);
    box-shadow:
        0 32px 80px rgba(var(--bmg-font-rgb), .32),
        0 8px 24px rgba(var(--bmg-font-rgb), .16);
    animation: bmg-trial-welcome-rise .4s cubic-bezier(.2, .8, .2, 1) both;
}

.bmg-trial-welcome-close {
    position: absolute;
    top: 1.35rem;
    right: 1.35rem;
    z-index: 2;
}

/* ---- The welcome: gradient side ---- */

.bmg-trial-welcome-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem 2.25rem;
    overflow: hidden;
    color: var(--bmg-white);
    background: var(--bmg-generic-gradient);
    box-shadow: inset -10px 10px 20px rgba(0, 0, 0, .3);
}

/* A soft light in the upper corner, so the gradient reads as a surface rather than a flat fill. */
.bmg-trial-welcome-hero::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -35%;
    z-index: -1;
    width: 90%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--bmg-tertiary-rgb), .2), transparent);
    pointer-events: none;
}

/* The logo is drawn in black; on the gradient it is shown white. */
.bmg-trial-welcome-logo {
    width: 136px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: .92;
}

.bmg-trial-welcome-hero-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 600;
    font-variation-settings: "wght" 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.bmg-trial-welcome-hero-text {
    margin: 0;
    color: rgba(var(--bmg-white-rgb), .78);
}

/* The welcome and the steps sit together in the middle of the space under the logo: the white side is usually the
   taller, and pinned apart they left an empty band of gradient between them. */
.bmg-trial-welcome-intro {
    margin-top: auto;
}

.bmg-trial-welcome-steps {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 1rem 0 auto;
    padding: 0;
    list-style: none;
}

.bmg-trial-welcome-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

/* The line from one mark down to the next, as the setup guide's step menu joins its steps. */
.bmg-trial-welcome-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.15rem;
    bottom: -.9rem;
    left: calc(.9rem - 1px);
    width: 2px;
    border-radius: 2px;
    background: rgba(var(--bmg-white-rgb), .18);
}

.bmg-trial-welcome-step.is-done:not(:last-child)::after {
    background: rgba(var(--bmg-white-rgb), .55);
}

.bmg-trial-welcome-step-mark {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid rgba(var(--bmg-white-rgb), .35);
    border-radius: 50%;
    color: rgba(var(--bmg-white-rgb), .8);
    font-size: .75rem;
    font-weight: 600;
    font-variation-settings: "wght" 600;
}

.bmg-trial-welcome-step.is-done .bmg-trial-welcome-step-mark {
    border-color: transparent;
    background: var(--bmg-success);
    color: var(--bmg-white);
}

.bmg-trial-welcome-step.is-current .bmg-trial-welcome-step-mark {
    border-color: var(--bmg-white);
    background: var(--bmg-white);
    color: var(--bmg-primary);
    animation: bmg-trial-welcome-pulse 2.4s ease-in-out infinite;
}

.bmg-trial-welcome-step-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    padding-top: .2rem;
}

.bmg-trial-welcome-step-label {
    font-weight: 500;
    font-variation-settings: "wght" 530;
    line-height: 1.3;
}

.bmg-trial-welcome-step:not(.is-done):not(.is-current) .bmg-trial-welcome-step-label {
    color: rgba(var(--bmg-white-rgb), .72);
}

.bmg-trial-welcome-step.is-current .bmg-trial-welcome-step-label {
    font-weight: 600;
    font-variation-settings: "wght" 650;
}

.bmg-trial-welcome-step-note {
    font-size: .8rem;
    color: rgba(var(--bmg-white-rgb), .62);
    overflow-wrap: anywhere;
}

/* ---- The ask: white side ---- */

.bmg-trial-welcome-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2.5rem 2.5rem 2rem;
}

.bmg-trial-welcome-title {
    margin: 0 2.5rem .5rem 0;
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
    font-weight: 600;
    font-variation-settings: "wght" 600;
    line-height: 1.15;
    letter-spacing: -.015em;
}

.bmg-trial-welcome-lead {
    max-width: 46ch;
    margin: 0 0 1.5rem;
    color: rgb(var(--bmg-text-muted-rgb));
}

/* "No card was added" after coming back from Checkout, and "Payment is not available yet". */
.bmg-trial-welcome-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 2.5rem 1.25rem 0;
    padding: .7rem 1rem;
    border: 1px solid rgba(var(--bmg-warning-rgb), .45);
    border-radius: 1rem;
    background: rgba(var(--bmg-warning-rgb), .12);
    font-size: .875rem;
    line-height: 1.4;
}

.bmg-trial-welcome-note i {
    margin-top: .15rem;
    color: rgb(var(--bmg-font-rgb));
}

.bmg-trial-welcome-body > .bmg-trial-welcome-note:not(:first-child) {
    margin: 1.75rem 0 0;
}

.bmg-trial-welcome-offer {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(var(--bmg-primary-rgb), .08);
    border-radius: var(--bmg-control-radius);
    background: rgba(var(--bmg-tertiary-rgb), .6);
}

.bmg-trial-welcome-offer-free {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

/* The error page's numeral (section 05): flat navy first, then the gradient where background-clip: text is supported. */
.bmg-trial-welcome-offer-number {
    font-size: 3.25rem;
    font-weight: 700;
    font-variation-settings: "wght" 700;
    letter-spacing: -.04em;
    color: var(--bmg-primary);
    background: var(--bmg-generic-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bmg-trial-welcome-offer-unit {
    margin-top: .4rem;
    font-size: .72rem;
    font-weight: 600;
    font-variation-settings: "wght" 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bmg-primary);
    white-space: nowrap;
}

.bmg-trial-welcome-offer-then {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(var(--bmg-primary-rgb), .15);
}

.bmg-trial-welcome-offer-price {
    font-size: .95rem;
    line-height: 1.35;
}

.bmg-trial-welcome-offer-price strong {
    font-size: 1.1rem;
    font-weight: 600;
    font-variation-settings: "wght" 650;
    white-space: nowrap;
}

.bmg-trial-welcome-offer-rule {
    font-size: .8rem;
    line-height: 1.35;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-trial-welcome-facts-title {
    margin: 1.5rem 0 .65rem;
    font-size: .72rem;
    font-weight: 600;
    font-variation-settings: "wght" 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-trial-welcome-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bmg-trial-welcome-fact {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: .85rem .9rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 1rem;
    background: var(--bmg-surface);
    box-shadow: var(--bmg-shadow-card-raised);
}

.bmg-trial-welcome-fact i {
    margin-bottom: .4rem;
    color: rgba(var(--bmg-primary-rgb), .7);
}

.bmg-trial-welcome-fact-value {
    font-size: 1.35rem;
    font-weight: 600;
    font-variation-settings: "wght" 650;
    line-height: 1;
}

.bmg-trial-welcome-fact-label {
    font-size: .78rem;
    line-height: 1.25;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-trial-welcome-facts-note {
    margin: .6rem 0 0;
    font-size: .8rem;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-trial-welcome-promises {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.bmg-trial-welcome-promises li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.bmg-trial-welcome-promises i {
    flex: 0 0 1rem;
    text-align: center;
    color: var(--bmg-success);
}

.bmg-trial-welcome-form {
    margin: 1.75rem 0 0;
}

.bmg-trial-welcome-cta {
    justify-content: center;
    width: 100%;
    min-height: 56px;
    font-size: 1rem;
}

.bmg-trial-welcome-cta-idle,
.bmg-trial-welcome-cta-busy {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.bmg-trial-welcome-cta-arrow {
    transition: transform .18s ease;
}

.bmg-trial-welcome-cta:hover .bmg-trial-welcome-cta-arrow,
.bmg-trial-welcome-cta:focus-visible .bmg-trial-welcome-cta-arrow {
    transform: translateX(3px);
}

/* Bootstrap fades a disabled button to half; while Checkout opens it is working, not unavailable. */
.bmg-trial-welcome-cta.is-busy:disabled {
    opacity: .9;
}

/* Inline, so the lock stays at the start of the sentence when it wraps on a phone. */
.bmg-trial-welcome-secure {
    margin: .75rem 0 0;
    font-size: .8rem;
    text-align: center;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-trial-welcome-secure i {
    margin-right: .4rem;
}

.bmg-trial-welcome-later {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--bmg-border-subtle);
    font-size: .8rem;
    text-align: center;
    color: rgb(var(--bmg-text-muted-rgb));
}

.bmg-trial-welcome-later-btn {
    padding: .25rem .5rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--bmg-primary);
    font-size: .9rem;
    font-weight: 500;
    font-variation-settings: "wght" 530;
    text-decoration: underline;
    text-decoration-color: rgba(var(--bmg-primary-rgb), .35);
    text-underline-offset: 3px;
}

.bmg-trial-welcome-later-btn:hover,
.bmg-trial-welcome-later-btn:focus-visible {
    text-decoration-color: currentColor;
}

@keyframes bmg-trial-welcome-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bmg-trial-welcome-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes bmg-trial-welcome-rise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bmg-trial-welcome-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--bmg-white-rgb), .16); }
    50% { box-shadow: 0 0 0 8px rgba(var(--bmg-white-rgb), .05); }
}

@media (prefers-reduced-motion: reduce) {
    .bmg-trial-welcome,
    .bmg-trial-welcome.is-closing,
    .bmg-trial-welcome-dialog {
        animation: none;
    }

    .bmg-trial-welcome-step.is-current .bmg-trial-welcome-step-mark {
        animation: none;
        box-shadow: 0 0 0 4px rgba(var(--bmg-white-rgb), .16);
    }
}

/* Stacked: the welcome on top, compact, with the steps as a row of marks; the close button then sits on the gradient. */
@media (max-width: 767.98px) {
    .bmg-trial-welcome {
        padding: .75rem;
    }

    .bmg-trial-welcome-dialog {
        grid-template-columns: minmax(0, 1fr);
        border-radius: var(--bmg-control-radius);
    }

    .bmg-trial-welcome-close {
        top: 1rem;
        right: 1rem;
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    .bmg-trial-welcome-hero {
        gap: 1rem;
        padding: 1.5rem 1.25rem 1.35rem;
    }

    .bmg-trial-welcome-logo {
        width: 112px;
    }

    .bmg-trial-welcome-hero-title {
        margin-bottom: .35rem;
        font-size: 1.35rem;
    }

    .bmg-trial-welcome-hero-text {
        font-size: .875rem;
    }

    .bmg-trial-welcome-steps {
        flex-direction: row;
        gap: .5rem;
        margin-top: .25rem;
    }

    .bmg-trial-welcome-step {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: .4rem;
        min-width: 0;
        text-align: center;
    }

    /* Across to the next mark: from this mark's right edge over the rest of the step and the gap. */
    .bmg-trial-welcome-step:not(:last-child)::after {
        top: calc(.9rem - 1px);
        bottom: auto;
        left: calc(50% + 1.2rem);
        width: calc(100% + .5rem - 2.4rem);
        height: 2px;
    }

    .bmg-trial-welcome-step-text {
        align-items: center;
        padding-top: 0;
    }

    .bmg-trial-welcome-step-label {
        font-size: .72rem;
        line-height: 1.2;
    }

    .bmg-trial-welcome-step-note {
        display: none;
    }

    .bmg-trial-welcome-body {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .bmg-trial-welcome-title,
    .bmg-trial-welcome-note {
        margin-right: 0;
    }

    .bmg-trial-welcome-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479.98px) {
    .bmg-trial-welcome-offer {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.1rem 1.25rem;
    }

    .bmg-trial-welcome-offer-free {
        flex-direction: row;
        align-items: baseline;
        gap: .5rem;
    }

    .bmg-trial-welcome-offer-number {
        font-size: 2.6rem;
    }

    .bmg-trial-welcome-offer-then {
        padding: .9rem 0 0;
        border-top: 1px solid rgba(var(--bmg-primary-rgb), .15);
        border-left: 0;
        align-self: stretch;
    }
}


/* =====================================================
   42. GUIDED TOURS (Michael, 2026-09-25; docs/spec-reception-desk-tour.md)

   The overlay tours and the "Where is ...?" spotlight (assets/next/bmg/bmg-tour.js), and the reception desk's help
   button and finder menu (Views/Next/Home/Partials/_ReceptionHelpMenu, bmg-reception-tour.js). Ours, not the drop's:
   the design has no tour component, so the card is its card (white, rounded, the soft control shadow) and the buttons
   are its btn-white / btn-dark-blue.

   Layers: above the page, the sidebar (1040), the sticky top nav (1031), slide-ins (1045), modals (1055) and Select2
   (1060); below the toasts (1090), so a real arrival is never hidden behind a tour. The shield takes every click on the
   dimmed page; the lit part is a hole cut by the spot's shadow, not a raised copy of the element.
===================================================== */

.bmg-tour {
    position: fixed;
    inset: 0;
    z-index: 1085;
    pointer-events: none;
}

.bmg-tour-shield {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    background: transparent;
    transition: background-color .2s ease;
}

/* A step with nothing to light (the welcome): the whole page dims. */
.bmg-tour-shield.is-dim {
    background: rgba(var(--bmg-font-rgb), .55);
}

.bmg-tour-spot {
    position: fixed;
    border-radius: .9rem;
    box-shadow:
        0 0 0 3px rgba(var(--bmg-white-rgb), .95),
        0 0 0 9999px rgba(var(--bmg-font-rgb), .55);
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
    pointer-events: none;
}

.bmg-tour-spot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(var(--bmg-white-rgb), .7);
    animation: bmg-tour-pulse 2.2s ease-out infinite;
}

@keyframes bmg-tour-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--bmg-white-rgb), .7); }
    70% { box-shadow: 0 0 0 12px rgba(var(--bmg-white-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bmg-white-rgb), 0); }
}

.bmg-tour-card {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 1.1rem 1.25rem 1.1rem;
    border-radius: 1rem;
    background: var(--bmg-white);
    color: rgb(var(--bmg-font-rgb));
    box-shadow: 0 18px 48px rgba(var(--bmg-font-rgb), .28), 0 2px 6px rgba(var(--bmg-font-rgb), .12);
    pointer-events: auto;
    transition: top .25s ease, left .25s ease;
    outline: none;
}

.bmg-tour-card.is-centred {
    width: 440px;
}

.bmg-tour-card.is-nudged {
    animation: bmg-tour-nudge .35s ease;
}

@keyframes bmg-tour-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.bmg-tour-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .35rem;
}

.bmg-tour-count {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgb(var(--bmg-secondary-rgb));
}

.bmg-tour-close {
    font-size: .7rem;
}

.bmg-tour-title {
    margin: 0 0 .4rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.bmg-tour-text {
    margin: 0 0 .75rem;
    font-size: .9rem;
    line-height: 1.45;
    color: rgb(var(--bmg-secondary-rgb));
}

.bmg-tour-missing {
    font-style: italic;
}

.bmg-tour-items {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.bmg-tour-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .875rem;
    line-height: 1.35;
}

.bmg-tour-item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: rgba(var(--bmg-tertiary-rgb), .8);
    color: var(--bmg-primary);
    font-size: .85rem;
}

.bmg-tour-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: .3rem;
}

.bmg-tour-item-before {
    font-size: .78rem;
    color: rgb(var(--bmg-secondary-rgb));
}

/* Where it was on the classic UI: a quiet note, not a warning. */
.bmg-tour-before {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 .85rem;
    padding: .6rem .75rem;
    border-radius: .7rem;
    background: rgba(var(--bmg-tertiary-rgb), .55);
    font-size: .83rem;
    line-height: 1.4;
    color: rgb(var(--bmg-primary-rgb));
}

.bmg-tour-before i {
    margin-top: .15rem;
}

.bmg-tour-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
}

/* Back sits at the left, the way forward at the right. */
.bmg-tour-foot [data-bmg-tour-action="back"] {
    margin-right: auto;
}

.bmg-tour-link {
    padding-left: .25rem;
    padding-right: .25rem;
    color: rgb(var(--bmg-secondary-rgb));
    text-decoration: none;
}

.bmg-tour-link:hover,
.bmg-tour-link:focus {
    color: rgb(var(--bmg-font-rgb));
    text-decoration: underline;
}

/* A step with its own answers (the welcome's Show me / Not now / Don't show again): the way on at the right, first in
   the markup so it has the focus and comes first on Tab; the quiet link at the far left. */
.bmg-tour-foot.is-choices {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.bmg-tour-foot.is-choices .bmg-tour-link {
    margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
    .bmg-tour-spot,
    .bmg-tour-card,
    .bmg-tour-shield {
        transition: none;
    }

    .bmg-tour-spot::after,
    .bmg-tour-card.is-nudged {
        animation: none;
    }
}

/* The reception desk's help button: a round icon button beside the header's switches. */
.bmg-help-btn {
    justify-content: center;
    width: var(--bmg-btn-height-sm, 2.5rem);
    padding-left: 0;
    padding-right: 0;
    border-radius: 50%;
}

.bmg-help-btn i {
    font-size: 1rem;
}

.bmg-help-menu {
    width: 22rem;
    max-width: calc(100vw - 32px);
    padding: .5rem .75rem .75rem;
}

.bmg-help-menu-tour {
    font-weight: 600;
    border-radius: .6rem;
}

.bmg-help-menu-heading {
    margin: .25rem 0 .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgb(var(--bmg-secondary-rgb));
}

.bmg-finder-list {
    max-height: min(50vh, 22rem);
    overflow-y: auto;
}

.bmg-finder-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .45rem .5rem;
    border-radius: .6rem;
    white-space: normal;
}

.bmg-finder-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(var(--bmg-tertiary-rgb), .8);
    color: var(--bmg-primary);
    font-size: .8rem;
}

.bmg-finder-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: .15rem;
}

.bmg-finder-label {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
}

.bmg-finder-before {
    font-size: .75rem;
    line-height: 1.3;
    color: rgb(var(--bmg-secondary-rgb));
}

.bmg-finder-empty {
    padding: .5rem;
    font-size: .85rem;
    color: rgb(var(--bmg-secondary-rgb));
}

/* 42b. The demo guests (the "Guest cards" tour, docs/spec-reception-desk-tour.md section 9). While the list shows made-up
   guests it must never be mistaken for the real one: the banner above it (_ReceptionDemoBanner), a dashed amber frame
   round the list with the demo mark in its corner (data-bmg-demo-label, set by bmg-reception-desk.js), and the mark in
   the tab's title. */

.bmg-demo-banner {
    position: relative;
    border: 1px solid rgba(var(--bmg-warning-rgb), .6);
    border-radius: .9rem;
    background: rgba(var(--bmg-warning-light-rgb), 1);
    color: rgb(var(--bmg-font-rgb));
    padding: .75rem 1rem;
}

.bmg-demo-banner-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
}

.bmg-demo-banner-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(var(--bmg-warning-rgb), .35);
    font-size: 1rem;
}

.bmg-demo-banner-text {
    flex: 1 1 18rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: .9rem;
    line-height: 1.4;
}

.bmg-demo-banner-real {
    margin-top: .25rem;
    font-weight: 600;
    color: rgb(var(--bmg-primary-rgb));
}

.bmg-demo-banner-real[hidden] {
    display: none;
}

#receptionDesk[data-demo="on"] #receptionSections {
    position: relative;
    padding: 1.25rem .75rem .5rem;
    border: 2px dashed rgba(var(--bmg-warning-rgb), .9);
    border-radius: 1rem;
    background: rgba(var(--bmg-warning-light-rgb), .35);
}

#receptionDesk[data-demo="on"] #receptionSections::before {
    content: attr(data-bmg-demo-label);
    position: absolute;
    top: -.8rem;
    left: 1rem;
    padding: .1rem .6rem;
    border-radius: 999px;
    background: rgb(var(--bmg-warning-rgb));
    color: rgb(var(--bmg-font-rgb));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
}

/* 42c. Numbered markers (Michael, 2026-09-25: "I cannot see the marks the guide is referring to"). A legend line in a tour
   card is numbered, and the same number sits on the thing on the page, centred on its top-left corner. */

.bmg-tour-marker {
    position: fixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--bmg-primary);
    color: var(--bmg-white);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--bmg-white), 0 2px 6px rgba(var(--bmg-font-rgb), .35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.bmg-tour-item-number {
    background: var(--bmg-primary);
    color: var(--bmg-white);
    font-size: .75rem;
    font-weight: 700;
}

/* =====================================================
   43. MY MEETINGS: ON SITE OR ONLINE (Michael, 2026-09-25)

   The switch on each guest of a meeting on "My meetings" that has not arrived
   (Views/Next/UtilityPartials/Person/_VisitorGuestBlock, bmg-host-dashboard.js,
   CalendarAppointments.SetGuestAttendance). Ours: the drop draws online
   participants (.card-body-person-online, .attendance-online) but has no control
   to move someone between on site and online. Two of the row's own
   .chip-outline chips joined into one pill, the current choice pressed in the
   primary tint the drop gives online attendance, so it reads as a state that
   can be changed rather than as two more actions.
===================================================== */
.bmg-attendance-switch {
    display: inline-flex;
    align-items: stretch;
}

.bmg-attendance-switch > .bmg-attendance-option {
    cursor: pointer;
}

.bmg-attendance-switch > .bmg-attendance-option:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bmg-attendance-switch > .bmg-attendance-option:last-child {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bmg-attendance-switch > .bmg-attendance-option:not(.is-active):hover {
    background: rgba(var(--bmg-font-rgb), .04);
}

/* Raised over its neighbour, so the pressed side's border is the one seen
   where the two overlap. */
.bmg-attendance-switch > .bmg-attendance-option.is-active {
    position: relative;
    z-index: 1;
    border-color: rgba(var(--bmg-primary-rgb), .45);
    background: rgba(var(--bmg-primary-rgb), .08);
    color: rgb(var(--bmg-primary-rgb));
    cursor: default;
}

.bmg-attendance-switch > .bmg-attendance-option.is-active i {
    color: rgb(var(--bmg-primary-rgb));
}

/* app.css mutes everything in an online row (.card-body-person-online *, with
   !important). The switch is an action, not information about the guest, so it
   keeps its colours, as app.css does for the vCard chip in the same row. */
.card-body-person-online .bmg-attendance-switch .bmg-attendance-option,
.card-body-person-online .bmg-attendance-switch .bmg-attendance-option span {
    color: rgb(var(--bmg-font-rgb)) !important;
}

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

.card-body-person-online .bmg-attendance-switch .bmg-attendance-option.is-active,
.card-body-person-online .bmg-attendance-switch .bmg-attendance-option.is-active span,
.card-body-person-online .bmg-attendance-switch .bmg-attendance-option.is-active i {
    color: rgb(var(--bmg-primary-rgb)) !important;
}

/* Waiting for the server: the chosen side spins (bmg-host-dashboard.js) and the
   switch takes no second click; the card body is .bmg-sections-busy meanwhile. */
.bmg-attendance-switch[aria-busy="true"] {
    pointer-events: none;
}

/* =====================================================
   44. QUESTIONS AND ALERTS: SWEETALERT IN THE NEXT LOOK (Michael, 2026-09-29)
   Every Swal.fire on a Next page goes through bmg-next.js ("SweetAlert2 in the Next shell"), which marks the container
   .bmg-swal, gives the buttons the Next classes unless the caller chose its own, and says on the popup how it reads:
   .bmg-swal-no-title, .bmg-swal-has-icon, .bmg-swal-icon-{name} and .bmg-swal-tone-{danger|warning|info|success}.

   The design drop has no question dialog. This one is put together from its own parts: the status block of the check-in
   and check-out modals (.checkout-status: a round tinted icon beside a bold title and muted text), the card radius, the
   trial welcome's dimmed and blurred backdrop (section 41), and the modal footer's buttons, cancel then the action, at
   the right. The vendored SweetAlert2 is 8.13.1; its animated icons are never drawn (bmg-next.js takes the icon out of
   the options), and the icon here is the Font Awesome glyph on the popup's ::before. On a phone it goes above the text.

   Scoped to .bmg-swal throughout, so a SweetAlert upgrade (the wrapper steps aside on 10.0 and later) falls back to its
   stock look rather than half of this one. z-index stays SweetAlert's 1060, over the modals and slide-ins and under the
   toasts (1090); the incident pages raise theirs over their own sheets (bmg-incidents.css).
===================================================== */

.swal2-container.bmg-swal {
    padding: 1rem;
}

.swal2-container.bmg-swal.swal2-shown {
    background-color: rgba(var(--bmg-font-rgb), .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.bmg-swal .swal2-popup {
    width: 440px;
    max-width: 100%;
    padding: 1.75rem 1.75rem 1.5rem;
    border-radius: var(--bmg-card-radius);
    background: var(--bmg-surface);
    color: rgb(var(--bmg-font-rgb));
    box-shadow:
        0 24px 64px rgba(var(--bmg-font-rgb), .24),
        0 6px 18px rgba(var(--bmg-font-rgb), .12);
}

.bmg-swal .swal2-header {
    align-items: flex-start;
}

.bmg-swal .swal2-title {
    margin: 0 0 .4rem;
    color: rgb(var(--bmg-font-rgb));
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

.bmg-swal .swal2-content {
    color: rgba(var(--bmg-text-muted-rgb), 1);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
}

.bmg-swal .swal2-content p:last-child {
    margin-bottom: 0;
}

/* No title: the text is the question ("Remove Fire and evacuation guide?"), so it reads as one. */
.bmg-swal .swal2-popup.bmg-swal-no-title .swal2-content {
    color: rgb(var(--bmg-font-rgb));
    font-size: 1rem;
    font-weight: 500;
}

/* Cancel, then the action, at the right, as in a modal footer. The gap spaces them; the ms-2 the confirm helpers still
   put on their confirm button would double it. */
.bmg-swal .swal2-actions {
    justify-content: flex-end;
    gap: .5rem;
    margin: 1.5rem 0 0;
}

.bmg-swal .swal2-actions > .btn {
    margin: 0 !important;
}

/* ---- The icon: a tinted circle beside the text, as in .checkout-status ---- */

.bmg-swal .swal2-popup.bmg-swal-has-icon {
    padding-left: calc(1.75rem + 3rem + 1rem);
}

.bmg-swal .swal2-popup.bmg-swal-has-icon::before {
    position: absolute;
    top: 1.75rem;
    left: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-family: var(--fa-style-family-classic, "Font Awesome 6 Pro");
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* A question on its own is one or two lines: centred on the icon rather than hanging from its top edge. */
.bmg-swal .swal2-popup.bmg-swal-has-icon.bmg-swal-no-title .swal2-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 3rem;
}

.bmg-swal .bmg-swal-icon-warning::before {
    content: "\f071"; /* triangle-exclamation */
}

.bmg-swal .bmg-swal-icon-error::before {
    content: "\f00d"; /* xmark */
}

.bmg-swal .bmg-swal-icon-success::before {
    content: "\f00c"; /* check */
}

.bmg-swal .bmg-swal-icon-info::before {
    content: "\f129"; /* info */
}

.bmg-swal .bmg-swal-icon-question::before {
    content: "\3f"; /* question */
}

.bmg-swal .bmg-swal-tone-danger::before {
    background: rgb(var(--bmg-danger-light-rgb));
    color: var(--bmg-danger);
}

/* As .checkout-status.warning: yellow on light yellow is too faint, so the circle is toned deeper and the glyph takes
   the text colour. */
.bmg-swal .bmg-swal-tone-warning::before {
    background: rgba(var(--bmg-warning-rgb), .35);
    color: rgb(var(--bmg-font-rgb));
}

.bmg-swal .bmg-swal-tone-success::before {
    background: rgba(var(--bmg-success-rgb), .15);
    color: var(--bmg-success);
}

.bmg-swal .bmg-swal-tone-info::before {
    background: var(--bmg-tertiary);
    color: var(--bmg-primary);
}

/* ---- Phones: the icon above the text, so the text keeps the width ---- */

@media (max-width: 479.98px) {
    .bmg-swal .swal2-popup,
    .bmg-swal .swal2-popup.bmg-swal-has-icon {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .bmg-swal .swal2-popup.bmg-swal-has-icon::before {
        position: static;
        align-self: flex-start;
        flex-shrink: 0;
        margin-bottom: 1rem;
    }

    .bmg-swal .swal2-popup.bmg-swal-has-icon.bmg-swal-no-title .swal2-content {
        min-height: 0;
    }
}

/* ---- In and out: a short rise instead of SweetAlert's bounce ---- */

.bmg-swal .swal2-popup.swal2-show:not(.swal2-noanimation) {
    animation: bmg-swal-in .22s cubic-bezier(.2, .8, .2, 1);
}

/* 8.x removes the dialog when this animation ends, so it must stay an animation (not none). */
.bmg-swal .swal2-popup.swal2-hide:not(.swal2-noanimation) {
    animation: bmg-swal-out .12s ease-in forwards;
}

@keyframes bmg-swal-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bmg-swal-out {
    to {
        opacity: 0;
        transform: scale(.98);
    }
}

@keyframes bmg-swal-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes bmg-swal-fade-out {
    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bmg-swal .swal2-popup.swal2-show:not(.swal2-noanimation) {
        animation-name: bmg-swal-fade-in;
    }

    .bmg-swal .swal2-popup.swal2-hide:not(.swal2-noanimation) {
        animation-name: bmg-swal-fade-out;
    }
}

/* =====================================================
   45. RECEPTION DESK: DRAG A WALK-IN ONTO A MEETING (Michael, 2026-09-30)
   Views/Next/Home/Partials/_WalkInDropDock with _ReceptionGuestRow and _ReceptionMeetingBlock;
   bmg-reception-desk.js (wireWalkInDrag). The receptionists asked for "Put on a meeting" to be
   easier still: a walk-in's line is picked up and dropped on a meeting, on another walk-in (a
   meeting with both), or on the dock at the foot of the screen (a meeting of the guest's own).

   Our own component in the design's tokens; the drop has no drag and drop. The offer's colour
   is the green of "Add a guest" and "Put on a meeting" (section 27, add-guest round), so the
   three read as one thing. While a line is in the air, .bmg-walkin-dragging on the desk:
     - a block that takes the guest is outlined with dashes and says "Drop here" where its
       buttons were, solid green with what the drop does once the line is held over it;
     - every other block steps back, the line's own place stays as a dashed gap;
     - nothing changes size, so the meeting being aimed at does not move under the pointer.
   Weights are the fw-* utilities on the markup, as app.css's variable font wants them.
===================================================== */

/* ---- The line that can be picked up ---- */

.bmg-reception .bmg-row-walkin {
    position: relative;
}

/* The grip sits in the line's own left padding, out of its grid, so no column moves. */
.bmg-row-grip {
    position: absolute;
    top: 50%;
    left: .15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .75rem;
    height: 1.75rem;
    border-radius: .3rem;
    color: rgba(var(--bmg-text-muted-rgb), .5);
    font-size: .8rem;
    transform: translateY(-50%);
    cursor: grab;
    transition: color .15s ease, background-color .15s ease;
}

.bmg-row-walkin:hover > .bmg-row-grip {
    background: rgba(var(--bmg-success-rgb), .12);
    color: rgb(var(--bmg-success-rgb));
}

/* The line is what is dragged, never the photo inside it. */
.bmg-row-walkin img {
    -webkit-user-drag: none;
}

/* No mouse, no drag: a grip would promise what a touch screen does not do. The line's button is the way there. */
@media (hover: none) {
    .bmg-row-grip {
        display: none;
    }
}

/* ---- While a line is in the air ---- */

.bmg-reception.bmg-walkin-dragging #receptionSections .bmg-block {
    transition: opacity .15s ease, box-shadow .12s ease, outline-color .12s ease;
}

/* What does not take the guest steps back. */
.bmg-reception.bmg-walkin-dragging #receptionSections .bmg-block:not(.bmg-drop-target):not(.bmg-drag-source-block) {
    opacity: .4;
}

/* Where the line came from: a dashed gap, so it is plain who is being moved. */
.bmg-reception.bmg-walkin-dragging .bmg-drag-source-block {
    opacity: .55;
    outline: 2px dashed rgba(var(--bmg-secondary-rgb), .55);
    outline-offset: -2px;
}

/* A block that takes the guest. */
.bmg-reception.bmg-walkin-dragging .bmg-drop-target {
    outline: 2px dashed rgba(var(--bmg-success-rgb), .65);
    outline-offset: 2px;
}

.bmg-reception.bmg-walkin-dragging .bmg-drop-target.bmg-drop-over {
    outline-style: solid;
    outline-color: rgb(var(--bmg-success-rgb));
    background-image: linear-gradient(rgba(var(--bmg-success-rgb), .12), rgba(var(--bmg-success-rgb), .12));
    box-shadow: 0 .6rem 1.75rem rgba(var(--bmg-success-rgb), .28);
}

/* Its own buttons make way for "Drop here" and keep their room, so nothing on the line moves. */
.bmg-reception.bmg-walkin-dragging .bmg-drop-target > .bmg-block-head > .bmg-block-side,
.bmg-reception.bmg-walkin-dragging .bmg-drop-target > .bmg-row > .bmg-row-actions {
    visibility: hidden;
}

/* Put in by the script on every block that takes the guest, where the buttons were: at the height of a meeting's
   header line and of a single visit's line alike. It never takes the pointer, so the block under it hears the drag. */
.bmg-drop-hint {
    position: absolute;
    top: .6rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2rem;
    padding: 0 .85rem;
    border: 1px dashed rgba(var(--bmg-success-rgb), .7);
    border-radius: var(--bmg-control-radius);
    background: linear-gradient(rgba(var(--bmg-success-rgb), .1), rgba(var(--bmg-success-rgb), .1)) var(--bmg-surface);
    color: rgb(var(--bmg-success-rgb));
    font-size: .8rem;
    white-space: nowrap;
    pointer-events: none;
}

.bmg-drop-hint-over {
    display: none;
}

.bmg-drop-over > .bmg-drop-hint {
    border-style: solid;
    border-color: rgb(var(--bmg-success-rgb));
    background: rgb(var(--bmg-success-rgb));
    color: #fff;
}

.bmg-drop-over > .bmg-drop-hint > .bmg-drop-hint-idle {
    display: none;
}

.bmg-drop-over > .bmg-drop-hint > .bmg-drop-hint-over {
    display: inline;
}

/* ---- The dock ---- */

/* At the foot of the screen, in the middle, while a line is in the air: who is being moved, and the place to drop
   them for a meeting of their own. Under the slide-ins and modals (1045, 1055), which are never open during a drag,
   and over the sticky toolbar (990). Hidden, it takes no pointer and no drop. */
.bmg-walkin-dock {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    z-index: 1040;
    display: flex;
    align-items: stretch;
    gap: .75rem;
    max-width: calc(100vw - 2rem);
    padding: .6rem;
    border: 1px solid var(--bmg-border-muted);
    border-radius: var(--bmg-control-radius);
    background: var(--bmg-surface);
    box-shadow: 0 1rem 2.5rem rgba(var(--bmg-font-rgb), .22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 1.5rem);
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .15s ease, visibility 0s linear .18s;
}

.bmg-walkin-dock.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.bmg-walkin-dock-lead {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding: 0 .5rem 0 .4rem;
}

.bmg-walkin-dock-grip {
    color: rgba(var(--bmg-text-muted-rgb), .8);
}

.bmg-walkin-dock-lead-text,
.bmg-walkin-dock-zone-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.bmg-walkin-dock-lead-text > .text-truncate {
    max-width: 18rem;
}

.bmg-walkin-dock-muted {
    color: rgba(var(--bmg-text-muted-rgb), 1);
}

.bmg-walkin-dock kbd {
    font-size: .7rem;
}

.bmg-walkin-dock-zone {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 17rem;
    padding: .6rem 1rem;
    border: 2px dashed rgba(var(--bmg-success-rgb), .65);
    /* The dock's own corner, less its padding, so the two curves run together. */
    border-radius: calc(var(--bmg-control-radius) - .4rem);
    background: rgba(var(--bmg-success-rgb), .08);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}

.bmg-walkin-dock-zone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(var(--bmg-success-rgb), .15);
    color: rgb(var(--bmg-success-rgb));
}

.bmg-walkin-dock-zone.bmg-drop-over {
    border-style: solid;
    border-color: rgb(var(--bmg-success-rgb));
    background: rgb(var(--bmg-success-rgb));
    color: #fff;
    transform: scale(1.02);
}

.bmg-walkin-dock-zone.bmg-drop-over .bmg-walkin-dock-muted {
    color: rgba(255, 255, 255, .88);
}

.bmg-walkin-dock-zone.bmg-drop-over .bmg-walkin-dock-zone-icon {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ---- What follows the pointer ---- */

/* The browser draws the dragged element from this one (setDragImage), so it is laid out like anything else, only
   parked above the screen. Fixed, so no ancestor's overflow clips it. */
.bmg-walkin-ghost {
    position: fixed;
    top: -6rem;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 18rem;
    padding: .45rem .9rem;
    border-radius: 2rem;
    background: rgb(var(--bmg-success-rgb));
    color: #fff;
    font-size: .85rem;
    white-space: nowrap;
    pointer-events: none;
}

.bmg-walkin-ghost > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- After the drop ---- */

/* The redraw that follows a drop lights up the guest who moved and the meeting they are on now. A ring and a wash
   laid over the line (an inset shadow), so the line's own background is never animated away. */
.bmg-reception .bmg-block-joined {
    animation: bmg-walkin-joined 2.4s ease-out 1;
}

.bmg-reception .bmg-row-joined {
    animation: bmg-walkin-joined-row 2.4s ease-out 1;
}

@keyframes bmg-walkin-joined {
    from {
        box-shadow: 0 0 0 3px rgba(var(--bmg-success-rgb), .75);
    }

    to {
        box-shadow: 0 0 0 3px rgba(var(--bmg-success-rgb), 0);
    }
}

@keyframes bmg-walkin-joined-row {
    from {
        box-shadow: inset 0 0 0 100vmax rgba(var(--bmg-success-rgb), .2);
    }

    to {
        box-shadow: inset 0 0 0 100vmax rgba(var(--bmg-success-rgb), 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bmg-reception.bmg-walkin-dragging #receptionSections .bmg-block,
    .bmg-walkin-dock,
    .bmg-walkin-dock-zone,
    .bmg-row-grip {
        transition: none;
    }

    .bmg-walkin-dock,
    .bmg-walkin-dock.is-open {
        transform: translate(-50%, 0);
    }

    .bmg-walkin-dock-zone.bmg-drop-over {
        transform: none;
    }
}