/* =====================================================
   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);
}


/* =====================================================
   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;
}

/* =====================================================
   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;
}

/* 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. HOST NOTICES AND MY DELIVERIES

   The row at the top of the host front page (Views/Next/Home/Partials/_HostNotices):
   the drop's inline status alert (profile/lunches.php), stacked, with a link at the
   end. And the lookup form on "My deliveries" (Views/Next/Packages/Partials/_MyPackages),
   which sits where a section's toolbar goes. font-weight goes with its "wght", as
   app.css requires.
===================================================== */

.bmg-host-notices .alert {
    margin-bottom: .5rem;
    font-size: .9rem;
}

/* .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 and the notices render only when they have something to show, so for a user with
   neither, the first panel on the host front page 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-host-notices .alert:last-child {
    margin-bottom: 0;
}

.bmg-host-notices .alert > i {
    flex-shrink: 0;
    font-size: 1rem;
}

.bmg-host-notices .alert-link {
    font-weight: 600;
    font-variation-settings: "wght" 650;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.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;
}

.bmg-reception-buildings {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.bmg-reception-buildings .btn.active {
    background: rgb(var(--bmg-font-rgb));
    border-color: rgb(var(--bmg-font-rgb));
    color: #fff;
}

.bmg-reception-buildings .btn .badge {
    font-size: .65rem;
    text-shadow: none;
}

.bmg-reception-buildings .btn.active .badge {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.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;
}

/* --- 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-card {
    border: 1px solid var(--bmg-border-subtle);
    box-shadow: none;
}

.bmg-addon-card.is-active {
    border-color: rgba(var(--bmg-success-rgb), .5);
}

.bmg-addon-card.is-muted {
    background: var(--bmg-surface-muted);
}

.bmg-addon-card.is-muted .bmg-addon-icon img {
    filter: grayscale(1);
    opacity: .7;
}

.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;
}

/* The name wraps rather than truncates: "Evacuation Multi User Host" cut to "Evacuation Multi U…" tells the admin
   nothing. Two lines at most, then the description. */
.bmg-addon-name {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* --- 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;
}

.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 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;
}

.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, EditPrinter, PrintTemplates and EditPrintTemplate. 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);
}

.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;
}

/* =====================================================
   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;
}

.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;
}

/* =====================================================
   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);
}

/* ---- 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,
.bmg-reception .bmg-block.bmg-tone-started .bmg-block-foot,
.bmg-reception .bmg-block.bmg-tone-soon .bmg-block-foot {
    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: one pill per step, the current one filled, a done one ticked. */
.bmg-guide .bmg-guide-nav ol {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bmg-guide .bmg-guide-nav-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem .35rem .35rem;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 999px;
    background: var(--bmg-surface);
    color: var(--bmg-secondary);
    font-size: .875rem;
    font-weight: 600;
    font-variation-settings: "wght" 600;
    line-height: 1.2;
}

.bmg-guide .bmg-guide-nav-item:hover {
    color: var(--bs-body-color);
}

.bmg-guide .bmg-guide-nav-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--bmg-surface-subtle);
    font-size: .75rem;
}

.bmg-guide .bmg-guide-nav-item.is-current {
    border-color: rgba(var(--bmg-active-rgb), 1);
    background: rgba(var(--bmg-active-rgb), 1);
    color: rgba(var(--bmg-font-rgb), 1);
}

.bmg-guide .bmg-guide-nav-item.is-current .bmg-guide-nav-mark {
    background: var(--bmg-surface);
}

.bmg-guide .bmg-guide-nav-item.is-done .bmg-guide-nav-mark {
    background: rgba(var(--bmg-success-rgb), .15);
    color: var(--bs-success);
}

/* 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 report travels: four stops, side by side where there is room. */
.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;
    align-items: flex-start;
    gap: .75rem;
    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;
    }
}

/* 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 on the Basics step, beside its file input. */
.bmg-guide .bmg-guide-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border: 1px solid var(--bmg-border-subtle);
    border-radius: 1rem;
    background: var(--bmg-white);
    color: var(--bmg-secondary);
    font-size: 1.5rem;
}

.bmg-guide .bmg-guide-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 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 badges, chips, buttons), tightened for a long list. One visit is one <tbody>: its row and a folded
   details row.
===================================================== */

/* 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;
}

.bmg-desk-table thead th {
    padding: .55rem .75rem;
}

.bmg-desk-table tbody td {
    padding: .4rem .75rem;
}

.bmg-desk-table .bmg-trow {
    cursor: pointer;
}

/* 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;
}

.bmg-tcol-status {
    width: 10rem;
}

.bmg-tcol-time,
.bmg-tcol-times,
.bmg-tcol-actions {
    width: 1%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bmg-desk-table .bmg-row-times {
    min-width: 0;
    justify-content: flex-start;
}

/* The guest: the line's avatar and name, the name opening the details. */
.bmg-trow-who {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    max-width: 20rem;
}

.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. */
.bmg-desk-table .bmg-row-chips {
    justify-content: flex-start;
}

.bmg-trow-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

.bmg-trow-actions .btn {
    height: 2rem;
    min-height: 2rem;
    padding-block: 0;
}

.bmg-trow-actions .dropdown > .btn {
    width: 2.25rem;
    padding-inline: 0 !important;
    justify-content: center;
}

/* On a phone the check-in and check-out buttons are their icons. */
@media (max-width: 575.98px) {
    .bmg-trow-actions .bmg-row-checkin,
    .bmg-trow-actions .bmg-row-checkout {
        min-width: 2.25rem;
        padding-inline: .6rem;
    }

    .bmg-tcol-status {
        width: auto;
    }

    .bmg-trow-who {
        max-width: 11rem;
    }
}

/* 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);
    }
}