/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* CSS-only user menu using the native <details> disclosure, so it works in the static-SSR
   layout without an interactive circuit. */

/* The mark and product name together are a link home, so a click on either returns the user to
   the home page. It inherits the app-bar colour and shows no underline, so it still reads as chrome. */
.appbar__home[b-zprgtbxcl1] {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
}

.appbar__home:hover[b-zprgtbxcl1] {
    opacity: 0.9;
}

/* The default product mark sits in a light rounded badge so both its tones read on any app-bar
   colour, including a tenant's themed bar. */
.appbar__mark[b-zprgtbxcl1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 4px;
    background: #F6FAF9; /* Sea Salt */
    border-radius: 8px;
    flex: 0 0 auto;
}

.appbar__mark img[b-zprgtbxcl1] {
    display: block;
    height: 100%;
    width: auto;
}

/* A tenant's own uploaded logo shows as itself: no badge (so a transparent logo blends into the
   themed bar), larger, and free to be a wide wordmark up to a sensible cap. The product name keeps
   its own gap to the right, so the two never overlap. */
.appbar__mark--logo[b-zprgtbxcl1] {
    width: auto;
    height: 44px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.appbar__mark--logo img[b-zprgtbxcl1] {
    height: 100%;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

/* Keep the product name from crowding a wide logo. */
/* Default brand: the light (Sea Salt) wordmark sits straight on the app bar, no pill. Every scheme in
   the curated catalogue has a dark primary, so the app bar is always dark and the light wordmark (with
   its Mimosa underline intact) reads cleanly, without a white box floating in the bar. */
.appbar__mark--wordmark[b-zprgtbxcl1] {
    width: auto;
    height: 30px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.appbar__mark--wordmark img[b-zprgtbxcl1] {
    height: 100%;
    width: auto;
}

.appbar__name[b-zprgtbxcl1] {
    white-space: nowrap;
}

.usermenu[b-zprgtbxcl1] {
    position: relative;
}

.usermenu__trigger[b-zprgtbxcl1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(246, 250, 249, 0.55); /* a light outline so it reads as a button */
    color: #F6FAF9; /* Sea Salt on the Brunswick Green app bar */
    list-style: none;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.usermenu__trigger[b-zprgtbxcl1]::-webkit-details-marker {
    display: none;
}

.usermenu__trigger:hover[b-zprgtbxcl1] {
    background: rgba(246, 250, 249, 0.12);
    border-color: #F6FAF9;
}

.usermenu__name[b-zprgtbxcl1] {
    font-size: 0.9rem;
    font-weight: 500;
}

.usermenu__panel[b-zprgtbxcl1] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    color: #101418;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 20, 24, 0.18);
    padding: 0.5rem 0;
    z-index: 1300;
}

.usermenu__panel a[b-zprgtbxcl1] {
    padding: 0.65rem 1.25rem;
    color: #101418;
    text-decoration: none;
    font-size: 0.95rem;
}

.usermenu__panel a:hover[b-zprgtbxcl1] {
    background: var(--brand-hairline);
}

.impersonation-banner[b-zprgtbxcl1] {
    display: flex;
    /* Wrap on narrow screens: an unwrappable row (label, the view-as picker, Stop) is wider than a
       phone, and a single overflowing element forces the whole page to lay out at that width, so
       every properly sized card then renders zoomed out at two-thirds of the screen. */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--brand-mint-cream); /* Mint Cream */
    color: #101418;
    border-radius: 8px;
}

/* The view-as picker: grows to fill spare row width on desktop, wraps to its own full-width line
   on a phone, and its select can always shrink (min-width 0) rather than overflow. */
.impersonation-banner__viewas[b-zprgtbxcl1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 14rem;
    min-width: 0;
}

.impersonation-banner__viewas select[b-zprgtbxcl1] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 22rem;
    font: inherit;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--brand-brunswick-green);
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    color: inherit;
}

.impersonation-banner__viewas button[b-zprgtbxcl1] {
    font: inherit;
    font-weight: 500;
    color: var(--brand-brunswick-green);
    background: transparent;
    border: 1px solid var(--brand-brunswick-green);
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    cursor: pointer;
}

.impersonation-banner__stop[b-zprgtbxcl1] {
    margin-left: auto;
}

.impersonation-banner__stop button[b-zprgtbxcl1] {
    font: inherit;
    font-weight: 500;
    color: var(--brand-brunswick-green);
    background: transparent;
    border: 1px solid var(--brand-brunswick-green);
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    cursor: pointer;
}

.usermenu__divider[b-zprgtbxcl1] {
    border: none;
    border-top: 1px solid #E0E8E5;
    margin: 0.25rem 0;
}

/* The persistent drawer suits a wide desktop. On phones and tablets (up to 1264px) it becomes an
   off-canvas overlay, collapsed by default and opened by the hamburger, so it never overlaps the
   content. The user dropdown also carries the primary links as a quick fallback. */
@media (min-width: 1265px) {
    .usermenu__mobile[b-zprgtbxcl1] {
        display: none;
    }
}

@media (max-width: 1264px) {
    [b-zprgtbxcl1] .mud-main-content {
        margin-left: 0 !important;
    }
}
/* /Components/Pages/Account.razor.rz.scp.css */
.account__mfa-fixed[b-w1u1n1nnod] {
    padding: 0.4rem 0.6rem;
    border: 1px dashed var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 4px;
    color: var(--mud-palette-text-primary, #101418);
    background: var(--mud-palette-background, #f6faf9);
    font-weight: 500;
}

.account__mfa-choice[b-w1u1n1nnod] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.95rem;
    cursor: pointer;
}
/* /Components/Pages/AdminSso.razor.rz.scp.css */
.idp-platform[b-9y0kmz2eno] {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.idp-platform dt[b-9y0kmz2eno] {
    font-weight: 500;
    color: #142828;
}

.idp-platform dd[b-9y0kmz2eno] {
    margin: 0;
    color: #142828;
}
/* /Components/Pages/AdminTenants.razor.rz.scp.css */
.impersonate-button[b-netjwrttsk] {
    font: inherit;
    font-weight: 500;
    color: var(--brand-brunswick-green);
    background: transparent;
    border: 1px solid var(--brand-brunswick-green);
    border-radius: 999px;
    padding: 0.25rem 1rem;
    cursor: pointer;
}

.impersonate-button:hover[b-netjwrttsk] {
    background: var(--brand-hairline);
}

.tenant-badge[b-netjwrttsk] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Tenant lifecycle drawn from the shared status palette: Draft is waiting to go live (warning amber),
   Active is live and well (positive green), Suspended is stopped (negative red). */
.tenant-badge--draft[b-netjwrttsk] {
    color: var(--status-warning-ink);
    background: var(--status-warning-wash);
}

.tenant-badge--active[b-netjwrttsk] {
    color: var(--status-positive-ink);
    background: var(--status-positive-wash);
}

.tenant-badge--suspended[b-netjwrttsk] {
    color: var(--status-negative-ink);
    background: var(--status-negative-wash);
}

/* An operating draft: people hold working logons (the draft-onboarding override) while the badge
   still reads Draft. Outlined rather than filled, so it reads as a fact beside the status, not a
   second status. */
.tenant-badge--inuse[b-netjwrttsk] {
    color: var(--status-positive-ink);
    background: transparent;
    border: 1px dashed var(--status-positive-ink);
}

/* The Draft-only go-live area: one contained panel (checklist, add administrator, Take live, the
   draft-onboarding override), so the card reads as identity and stats plus one clear workflow. */
.tenant-golive[b-netjwrttsk] {
    margin-top: 1rem;
    border: 1px solid var(--brand-hairline);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 3%, var(--mud-palette-surface, #fff));
}

.tenant-golive__head[b-netjwrttsk] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
}

.tenant-golive__title[b-netjwrttsk] {
    font-weight: 500;
    font-size: 0.95rem;
}

.tenant-golive__checks[b-netjwrttsk] {
    list-style: none;
    margin: 0.6rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tenant-golive__check[b-netjwrttsk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--brand-muted);
}

/* Colour is never the only signal: the tick icon changes with the state too. */
.tenant-golive__check--done[b-netjwrttsk] {
    color: var(--status-positive-ink);
}

/* Tenant row: a logo (or initial) at the start, with the name, slug and status vertically centred. */
.tenant-head[b-netjwrttsk] {
    align-items: center;
}

.tenant-head__id[b-netjwrttsk] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* The action cluster sits inline to the right of the tenant identity, not wrapped onto its own
   full-width row. The shared .row-actions is width:100% so it fills a table cell; inside the tenant
   head it must hug its content instead, so space-between keeps Edit and Impersonate beside the name. */
.tenant-head .row-actions[b-netjwrttsk] {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.tenant-head__text[b-netjwrttsk] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
}

/* Line one: the organisation name with its status badge. */
.tenant-head__line1[b-netjwrttsk] {
    display: flex;
    align-items: center;
}

/* Line two: the web address and at-a-glance counts, so an administrator sees the shape of a tenant
   without opening it. */
.tenant-head__meta[b-netjwrttsk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
}

.tenant-stat[b-netjwrttsk] {
    font-size: 0.8rem;
    color: #4a5a5a;
}

/* The web address sits first in the meta row, so drop the inherited left margin. */
.tenant-head__meta .estate__building-site[b-netjwrttsk] {
    margin-left: 0;
}

.tenant-logo[b-netjwrttsk] {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-mint-cream); /* Mint Cream */
    color: var(--brand-brunswick-green); /* Brunswick Green */
    border: 1px solid var(--brand-hairline);
}

.tenant-logo img[b-netjwrttsk] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tenant-logo__initial[b-netjwrttsk] {
    font-size: 1.2rem;
    font-weight: 500;
}

/* Feature flags fieldset inside the Edit tenant dialog needs a top margin; the shared
   .estate__fieldset in app.css supplies the border, legend and inner spacing. */
[b-netjwrttsk] .estate__fieldset {
    margin-top: 0.75rem;
}
/* /Components/Pages/AdminTenantSupport.razor.rz.scp.css */
/* Tenant Support view. Dense operational surface for MCR admins: MudSimpleTable per section
   with a traffic-light indicator per row, driven by the Verdict enum in the razor. Colours use
   the MudBlazor palette so the page follows the portal theme in light and dark modes. Section
   titles use MudText Typo.h6 so typography stays on the portal's Poppins scale. */

[b-btfcfcndjc] .support-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: var(--mud-palette-background-grey, #f5f7f5);
    border: 1px solid var(--mud-palette-lines-default, rgba(20, 40, 40, 0.12));
    margin: 0 0 1rem;
    font-size: 0.92rem;
}

[b-btfcfcndjc] .support-summary__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.55rem 0.15rem 0.35rem;
    border-radius: 999px;
    font-weight: 500;
    line-height: 1.5;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}

[b-btfcfcndjc] .support-summary__count {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    padding: 0 0.35rem;
}

[b-btfcfcndjc] .support-summary__chip--error { background: rgba(163, 46, 46, 0.14); color: #8a2b2b; }
[b-btfcfcndjc] .support-summary__chip--warn  { background: rgba(242, 185, 73, 0.24); color: #7a5810; }
[b-btfcfcndjc] .support-summary__chip--info  { background: rgba(28, 78, 79, 0.12);  color: #1c4e4f; }
[b-btfcfcndjc] .support-summary__chip--good  { background: rgba(46, 107, 77, 0.16);  color: #1e5a3b; }

[b-btfcfcndjc] .support-summary__generated {
    margin-left: auto;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

[b-btfcfcndjc] .support-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.75rem;
}

[b-btfcfcndjc] .support-section__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--mud-palette-text-primary, #101418);
}

[b-btfcfcndjc] .support-section__meta {
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

[b-btfcfcndjc] .support-subhead {
    margin: 1rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

[b-btfcfcndjc] .support-empty {
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    background: var(--mud-palette-background-grey, #f5f7f5);
    border: 1px dashed var(--mud-palette-lines-default, rgba(20, 40, 40, 0.12));
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.92rem;
}

/* MudSimpleTable wraps the table in a Mud container; the .support-table class is the specific
   selector used by the razor. Override the defaults so the report reads dense and consistent. */
[b-btfcfcndjc] .support-table {
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, rgba(20, 40, 40, 0.12));
    overflow: hidden;
    background: var(--mud-palette-surface, #ffffff);
}

[b-btfcfcndjc] .support-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

[b-btfcfcndjc] .support-table th,
[b-btfcfcndjc] .support-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(20, 40, 40, 0.08));
    vertical-align: top;
    text-align: left;
}

[b-btfcfcndjc] .support-table tbody tr:last-child td { border-bottom: none; }

[b-btfcfcndjc] .support-table thead th {
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.72rem;
    background: var(--mud-palette-background-grey, #f5f7f5);
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(20, 40, 40, 0.12));
}

[b-btfcfcndjc] .support-table__light {
    width: 1.75rem;
    padding-left: 0.6rem;
    padding-right: 0;
}

[b-btfcfcndjc] .support-table__field {
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

[b-btfcfcndjc] .support-table__site {
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

/* A visible separator every time the Site changes, so the eye reads the block despite the
   consolidated table. Only the first row of a site's group is styled as a group start. */
[b-btfcfcndjc] .support-row--site-first td {
    border-top: 2px solid var(--mud-palette-lines-default, rgba(20, 40, 40, 0.18));
}
[b-btfcfcndjc] .support-table tbody tr.support-row--site-first:first-child td {
    border-top: none;
}

[b-btfcfcndjc] .support-light {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    margin-top: 0.15rem;
}

[b-btfcfcndjc] .support-light--good  { background: #2e6b4d; }
[b-btfcfcndjc] .support-light--info  { background: #1c4e4f; }
[b-btfcfcndjc] .support-light--warn  { background: #f2b949; }
[b-btfcfcndjc] .support-light--error { background: #a3322e; }

[b-btfcfcndjc] .support-row--good  td { background: rgba(46, 107, 77, 0.03); }
[b-btfcfcndjc] .support-row--info  td { background: transparent; }
[b-btfcfcndjc] .support-row--warn  td { background: rgba(242, 185, 73, 0.10); }
[b-btfcfcndjc] .support-row--error td { background: rgba(163, 46, 46, 0.08); }

[b-btfcfcndjc] .support-badge {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: capitalize;
}
[b-btfcfcndjc] .support-badge--good  { background: rgba(46, 107, 77, 0.16); color: #1e5a3b; }
[b-btfcfcndjc] .support-badge--info  { background: rgba(28, 78, 79, 0.12); color: #1c4e4f; }
[b-btfcfcndjc] .support-badge--warn  { background: rgba(242, 185, 73, 0.24); color: #7a5810; }
[b-btfcfcndjc] .support-badge--error { background: rgba(163, 46, 46, 0.14); color: #8a2b2b; }

[b-btfcfcndjc] .support-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    padding: 0 0.3em;
    border-radius: 3px;
    background: var(--mud-palette-background-grey, #f5f7f5);
    color: var(--mud-palette-text-primary, #101418);
}

[b-btfcfcndjc] .support-cell__name {
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}
[b-btfcfcndjc] .support-cell__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    word-break: break-all;
}
[b-btfcfcndjc] .support-cell__hint {
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

[b-btfcfcndjc] .support-note {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    background: var(--mud-palette-background-grey, #f5f7f5);
    border: 1px solid var(--mud-palette-lines-default, rgba(20, 40, 40, 0.12));
    color: var(--mud-palette-text-primary, #101418);
    font-size: 0.9rem;
}

[b-btfcfcndjc] .support-note__list {
    margin: 0.3rem 0 0;
    padding-left: 1.2rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

[b-btfcfcndjc] td form { margin: 0; }

@media (prefers-color-scheme: dark) {
    [b-btfcfcndjc] .support-row--good  td { background: rgba(120, 200, 150, 0.06); }
    [b-btfcfcndjc] .support-row--warn  td { background: rgba(242, 185, 73, 0.14); }
    [b-btfcfcndjc] .support-row--error td { background: rgba(230, 100, 100, 0.10); }
    [b-btfcfcndjc] .support-summary__chip--good  { background: rgba(120, 200, 150, 0.16); color: #a8d9bf; }
    [b-btfcfcndjc] .support-summary__chip--warn  { background: rgba(242, 185, 73, 0.22); color: #f2b949; }
    [b-btfcfcndjc] .support-summary__chip--info  { background: rgba(121, 166, 130, 0.18); color: #b6d2ad; }
    [b-btfcfcndjc] .support-summary__chip--error { background: rgba(230, 100, 100, 0.14); color: #e88a8a; }
    [b-btfcfcndjc] .support-badge--good  { background: rgba(120, 200, 150, 0.16); color: #a8d9bf; }
    [b-btfcfcndjc] .support-badge--warn  { background: rgba(242, 185, 73, 0.22); color: #f2b949; }
    [b-btfcfcndjc] .support-badge--info  { background: rgba(121, 166, 130, 0.18); color: #b6d2ad; }
    [b-btfcfcndjc] .support-badge--error { background: rgba(230, 100, 100, 0.14); color: #e88a8a; }
}
/* /Components/Pages/Analytics.razor.rz.scp.css */
/* Lightweight brand charts: horizontal bars and an SVG donut, no third-party chart component. */

.chart-bars[b-yj00jza4ml] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.chart-bars__row[b-yj00jza4ml] {
    display: grid;
    grid-template-columns: 11rem 1fr 2.5rem;
    align-items: center;
    gap: 0.6rem;
}

/* Two-line label: room name over its building and site, so identically named rooms are told apart. */
.chart-bars__label[b-yj00jza4ml] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: 0.85rem;
}

.chart-bars__name[b-yj00jza4ml],
.chart-bars__sub[b-yj00jza4ml] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-bars__sub[b-yj00jza4ml] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.chart-bars__track[b-yj00jza4ml] {
    height: 14px;
    background: var(--brand-hairline);
    border-radius: 999px;
    overflow: hidden;
}

.chart-bars__fill[b-yj00jza4ml] {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--brand-brunswick-green); /* Brunswick Green */
    border-radius: 999px;
}

.chart-bars__value[b-yj00jza4ml] {
    font-size: 0.85rem;
    font-weight: 500;
    text-align: right;
}

.chart-donut[b-yj00jza4ml] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.chart-donut__svg[b-yj00jza4ml] {
    width: 160px;
    height: 160px;
    transform: rotate(-90deg); /* start the first segment at 12 o'clock */
}

.chart-donut__hole[b-yj00jza4ml] {
    fill: transparent;
}

.chart-donut__seg[b-yj00jza4ml] {
    transition: stroke-dasharray 0.3s ease;
}

.chart-donut__legend[b-yj00jza4ml] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.chart-donut__legend li[b-yj00jza4ml] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.chart-donut__swatch[b-yj00jza4ml] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Shared filter row across the Analytics tabs: a MudDateRangePicker plus the Building and
   (once a building is chosen) Room selects, aligned along a single baseline so the Apply
   button never floats above or below the fields. Wraps on narrow screens without loss of
   any control. */
.analytics__filters[b-yj00jza4ml] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.analytics__filter[b-yj00jza4ml] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 12rem;
}

.analytics__filter-label[b-yj00jza4ml] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary, #101418);
}

.analytics__daterange[b-yj00jza4ml] {
    min-width: 16rem;
}

.analytics__select[b-yj00jza4ml] {
    min-width: 12rem;
}

.analytics__apply[b-yj00jza4ml] {
    align-self: flex-end;
}
/* /Components/Pages/Badges.razor.rz.scp.css */
/* Event picker + Download all as PDF on one row, right-aligned action. Wraps on narrow. */
.badges__picker[b-n1m08b85xw] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 1rem;
}

.badges__picker-field[b-n1m08b85xw] {
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.badges__picker-download[b-n1m08b85xw] {
    align-self: flex-end;
}

/* Configure tab: single Template card holds Content and Appearance sections. */
.badges__template-card[b-n1m08b85xw] {
    border-radius: 6px;
}

.badges__section-title[b-n1m08b85xw] {
    display: block;
    margin-block-end: 0.5rem;
}

.badges__section-heading[b-n1m08b85xw] {
    display: block;
    color: var(--mud-palette-text-primary, #101418);
    margin-block-end: 0.5rem;
}

/* Vertical stack of include-checkboxes, one per line. */
.badges__checkbox-stack[b-n1m08b85xw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-block-end: 0.75rem;
}

.badges__template-actions[b-n1m08b85xw] {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 1rem;
}

/* View issued: a plain table, styled the same as the estate catalogue's __table pattern so it
   does not read as raw unstyled markup. */
.badges__table[b-n1m08b85xw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.badges__table th[b-n1m08b85xw],
.badges__table td[b-n1m08b85xw] {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(20, 40, 40, 0.1);
}

.badges__table th[b-n1m08b85xw] {
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-weight: 500;
}

.badges__table a[b-n1m08b85xw] {
    color: var(--mud-palette-primary, #1c4e4f);
}

/* A retired badge (its invitation was revoked) stays in the list but reads as withdrawn. */
.badges__row--retired[b-n1m08b85xw] {
    opacity: 0.6;
}

.badges__not-issued[b-n1m08b85xw],
.badges__retired-label[b-n1m08b85xw] {
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.85rem;
}

/* Issue badges tab: presets, search, then the selectable list. */
.badges__form[b-n1m08b85xw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 46rem;
}

.badges__form-actions[b-n1m08b85xw] {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 0.5rem;
}

.badges__hint[b-n1m08b85xw] {
    margin: 0;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.85rem;
}

.badges__presets[b-n1m08b85xw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.badges__search[b-n1m08b85xw] {
    max-width: 22rem;
}

.badges__issue-list[b-n1m08b85xw] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.badges__issue-row[b-n1m08b85xw] {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
}

.badges__issue-row:hover[b-n1m08b85xw] {
    background: var(--mud-palette-background-grey, rgba(20, 40, 40, 0.04));
}

.badges__issue-row--on[b-n1m08b85xw] {
    background: color-mix(in srgb, var(--mud-palette-primary, #1c4e4f) 8%, transparent);
}

.badges__issue-row__company[b-n1m08b85xw] {
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.85rem;
}

.badges__issue-row__status[b-n1m08b85xw] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    white-space: nowrap;
}
/* /Components/Pages/BlackoutDates.razor.rz.scp.css */
/* Blackout dates read as a tight, scannable list rather than a wide, sparse table. Upcoming dates
   are grouped by month; past dates fold away. Colours come from the brand palette. */

.blackout-wrap[b-e6dfxcd5tj] {
    width: 100%;
}

.blackout-month[b-e6dfxcd5tj] {
    margin: 1.25rem 0 0.5rem;
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    color: var(--brand-primary-ink);
}

.blackout-month:first-child[b-e6dfxcd5tj] {
    margin-top: 0;
}

.blackout-card[b-e6dfxcd5tj] {
    display: flex;
    /* Wrap on narrow screens: without it the reason span is crushed to a single stray glyph
       between the scope chip and the remove button. */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.5rem;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, rgba(20, 40, 40, 0.14));
    border-radius: 10px;
}

.blackout-card--past[b-e6dfxcd5tj] {
    opacity: 0.75;
}

.blackout-card__date[b-e6dfxcd5tj] {
    font-weight: 500;
    min-width: 9.5rem;
}

/* Scope as a pill so it reads at a glance: whole-tenant in brand green, a single site in blue. */
.blackout-scope[b-e6dfxcd5tj] {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.blackout-scope--tenant[b-e6dfxcd5tj] {
    background: var(--brand-mint-cream, #D7E7E1);
    color: var(--brand-brunswick-green, #1C4E4F);
}

.blackout-scope--site[b-e6dfxcd5tj] {
    background: #DCE7F1;
    color: #244a63;
}

/* Imported from a bank holiday calendar: a warm supplementary tint so it reads apart from scope. */
.blackout-scope--imported[b-e6dfxcd5tj] {
    background: #FBEFD6;
    color: #7a5a12;
}

/* Bank holiday calendar cards. */
.blackout-cal__title[b-e6dfxcd5tj] {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--brand-brunswick-green, #1C4E4F);
}

.blackout-cal__intro[b-e6dfxcd5tj] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--brand-muted, #5b6b6b);
    max-width: 46rem;
}

.blackout-cal__grid[b-e6dfxcd5tj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.85rem;
}

.blackout-cal__card[b-e6dfxcd5tj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--mud-palette-lines-default, var(--brand-hairline, rgba(20, 40, 40, 0.14)));
    border-radius: 12px;
    /* Recessed from the panel surface: the page background is Sea Salt in light and near-black in dark,
       so an "off" calendar reads a step back from the panel in both themes rather than a fixed light box. */
    background: var(--mud-palette-background, #F6FAF9);
}

.blackout-cal__card--on[b-e6dfxcd5tj] {
    border-color: var(--brand-cambridge-blue, #79A682);
    /* An "on" calendar lifts to the panel surface (white in light, dark card in dark). */
    background: var(--mud-palette-surface, #fff);
    box-shadow: inset 0 0 0 1px var(--brand-cambridge-blue, #79A682);
}

.blackout-cal__head[b-e6dfxcd5tj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.blackout-cal__name[b-e6dfxcd5tj] {
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

.blackout-cal__pill[b-e6dfxcd5tj] {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking);
    background: var(--status-positive-wash);
    color: var(--status-positive-ink);
}

.blackout-cal__desc[b-e6dfxcd5tj] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary, var(--brand-muted, #5b6b6b));
}

.blackout-cal__btn[b-e6dfxcd5tj] {
    align-self: flex-start;
    margin-top: 0.25rem;
}

.blackout-confirm[b-e6dfxcd5tj] {
    margin: 0;
    line-height: 1.5;
    color: var(--mud-palette-text-primary, #101418);
}

.blackout-card__reason[b-e6dfxcd5tj] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary, #101418);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No reason given: a light, italic placeholder rather than a raw "(none)". */
.blackout-card__reason--none[b-e6dfxcd5tj] {
    font-style: italic;
    color: var(--brand-muted, #7a8a8a);
}

/* A quiet icon action that only turns red on hover, so the default list stays calm. */
.blackout-remove[b-e6dfxcd5tj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--brand-muted, #7a8a8a);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.blackout-remove:hover:not(:disabled)[b-e6dfxcd5tj] {
    background: #fbecea;
    color: #b3261e;
}

.blackout-remove:disabled[b-e6dfxcd5tj] {
    opacity: 0.5;
    cursor: not-allowed;
}

.blackout-past[b-e6dfxcd5tj] {
    margin-top: 1.5rem;
}

.blackout-past__summary[b-e6dfxcd5tj] {
    cursor: pointer;
    font-weight: 500;
    color: var(--brand-brunswick-green, #1C4E4F);
    padding: 0.4rem 0;
    list-style: none;
}

.blackout-past__summary[b-e6dfxcd5tj]::-webkit-details-marker {
    display: none;
}

.blackout-past__summary[b-e6dfxcd5tj]::before {
    content: "\25B8"; /* right-pointing triangle */
    display: inline-block;
    margin-right: 0.4rem;
    transition: transform 0.15s ease;
}

.blackout-past[open] .blackout-past__summary[b-e6dfxcd5tj]::before {
    transform: rotate(90deg);
}

/* Collapsible UK bank-holidays panel: starts closed so it does not dominate the page. */
.blackout-cal__panel > summary.blackout-cal__summary[b-e6dfxcd5tj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    list-style: none;
}

.blackout-cal__summary[b-e6dfxcd5tj]::-webkit-details-marker {
    display: none;
}

.blackout-cal__summary .blackout-cal__title[b-e6dfxcd5tj] {
    margin: 0;
}

.blackout-cal__chevron[b-e6dfxcd5tj] {
    margin-left: auto;
    transition: transform 0.15s ease;
}

.blackout-cal__panel[open] .blackout-cal__chevron[b-e6dfxcd5tj] {
    transform: rotate(180deg);
}

/* The years line and the on-card actions under a subscribed calendar. */
.blackout-cal__years[b-e6dfxcd5tj] {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.blackout-cal__actions[b-e6dfxcd5tj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* The clash list shown before a date is closed: one row per booking that would be cancelled. */
.blackout-conflicts[b-e6dfxcd5tj] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
    max-height: 22rem;
    overflow-y: auto;
}

.blackout-conflicts__date[b-e6dfxcd5tj] {
    margin: 0.6rem 0 0.15rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

.blackout-conflict[b-e6dfxcd5tj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--mud-palette-surface, #fff);
}

.blackout-conflict__room[b-e6dfxcd5tj] {
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

.blackout-conflict__site[b-e6dfxcd5tj],
.blackout-conflict__who[b-e6dfxcd5tj] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

/* The status chip reuses the scope pill shape, tinted by booking status. */
.blackout-scope--confirmed[b-e6dfxcd5tj] {
    background: var(--brand-mint-cream, #D7E7E1);
    color: var(--brand-brunswick-green, #1C4E4F);
}

.blackout-scope--pending[b-e6dfxcd5tj] {
    background: #FBEFD6;
    color: #7a5a12;
}

.blackout-scope--held[b-e6dfxcd5tj] {
    background: #E4E7EB;
    color: #3a4652;
}

@media (max-width: 599.98px) {
    /* The reason reads as its own line under the date and chips. */
    .blackout-card__reason[b-e6dfxcd5tj] {
        flex-basis: 100%;
        min-width: 0;
    }
}
/* /Components/Pages/Book.razor.rz.scp.css */
/* Capacity hint under the People field. */
.book-capacity[b-v6hcnqxiyv] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--brand-muted, #5b6b6b);
}

.book-capacity--over[b-v6hcnqxiyv] {
    color: #b00020;
    font-weight: 500;
}

/* A gentle right-size nudge under the People field: a calm note, never an alarm, since the booking
   is still allowed. */
.book-rightsize[b-v6hcnqxiyv] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: var(--brand-hairline);
    border: 1px solid var(--brand-hairline);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: var(--brand-primary-ink, var(--brand-brunswick-green));
}

/* A full-width row inside the two-column form grid. */
.book-field[b-v6hcnqxiyv] {
    margin-top: 1rem;
}

/* Theme text colour, never fixed Gunmetal: on the dark surface a fixed dark label disappears. */
.book-field__label[b-v6hcnqxiyv] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary, #142828);
}

/* Notes: a real textarea, not a squashed single-line control. */
.book-notes[b-v6hcnqxiyv] {
    min-height: 4.5rem;
    resize: vertical;
    line-height: 1.4;
}

/* Hold confirmation overlay. A plain conditionally-rendered dialog (no Mud popover). */
.held-overlay[b-v6hcnqxiyv] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(16, 20, 24, 0.55); /* Carbon Wing at 55% */
}

.held-dialog[b-v6hcnqxiyv] {
    max-width: 26rem;
    width: 100%;
    padding: 1.75rem;
    background: var(--mud-palette-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(16, 20, 24, 0.28);
    text-align: center;
}

.held-dialog__icon[b-v6hcnqxiyv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    border-radius: 999px;
    color: #A33509; /* deep amber: a hold is time-limited */
    background: #FBEEE6;
}

.held-dialog__title[b-v6hcnqxiyv] {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

.held-dialog__body[b-v6hcnqxiyv] {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary, #3f4b4a);
    line-height: 1.45;
}

.held-dialog__actions[b-v6hcnqxiyv] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Keep dropdowns and small numeric fields a natural width, not stretched across the grid column. */
select.estate__input[b-v6hcnqxiyv] {
    max-width: 26rem;
}

input[type="number"].estate__input[b-v6hcnqxiyv] {
    max-width: 10rem;
}

/* The booking / food-only mode toggle, shown only when the tenant's food switch is on. */
.book-mode[b-v6hcnqxiyv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.book-mode__hint[b-v6hcnqxiyv] {
    font-size: 0.85rem;
    color: var(--brand-muted);
    margin-left: var(--space-2);
}
/* /Components/Pages/BookingDetail.razor.rz.scp.css */
.booking-detail__back[b-n0v19qyh5b] {
    margin-bottom: 0.5rem;
}

.booking-detail__hero[b-n0v19qyh5b] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.booking-detail__image[b-n0v19qyh5b] {
    min-height: 220px;
    background-size: cover;
    background-position: center;
    background-color: var(--mud-palette-background-grey);
}

.booking-detail__image--placeholder[b-n0v19qyh5b] {
    background-image: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken));
}

.booking-detail__hero-body[b-n0v19qyh5b] {
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.booking-detail__eyebrow[b-n0v19qyh5b] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.booking-detail__title[b-n0v19qyh5b] {
    margin: 0;
}

.booking-detail__when[b-n0v19qyh5b] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
}

.booking-detail__chips[b-n0v19qyh5b] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

@media (max-width: 720px) {
    .booking-detail__hero[b-n0v19qyh5b] {
        grid-template-columns: 1fr;
    }

    .booking-detail__image[b-n0v19qyh5b] {
        min-height: 160px;
    }

    .booking-detail__hero-body[b-n0v19qyh5b] {
        padding: 1.25rem 1.5rem;
    }
}

.booking-detail__facts[b-n0v19qyh5b] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    margin: 0;
}

.booking-detail__facts dt[b-n0v19qyh5b] {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.booking-detail__facts dd[b-n0v19qyh5b] {
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.booking-detail__notes[b-n0v19qyh5b] {
    white-space: pre-line;
}

.booking-detail__contact[b-n0v19qyh5b] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.booking-detail__food[b-n0v19qyh5b] {
    background: var(--mud-palette-primary-hover);
}

.booking-detail__orders[b-n0v19qyh5b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.booking-detail__order[b-n0v19qyh5b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.booking-detail__order > span:first-child[b-n0v19qyh5b] {
    flex: 1 1 auto;
}

/* About the venue. Stacked so an image, the name, the venue's own prose, the map region and the
   deep link keep one rhythm however many of them the tenant has actually filled in. */
.booking-detail__venue[b-n0v19qyh5b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

/* A fixed 16:9 band with object-fit: cover, matching the venue page's own treatment: a tenant can
   upload anything, and a portrait logo centred in a band beats one cropped to its top edge. */
.booking-detail__venue-image[b-n0v19qyh5b] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md, 0.5rem);
    display: block;
}

.booking-detail__venue-name[b-n0v19qyh5b] {
    margin: 0;
    font-weight: 600;
}

.booking-detail__venue-body[b-n0v19qyh5b] {
    margin: 0;
    white-space: pre-line;
    color: var(--mud-palette-text-secondary);
}

/* The map region is deliberately a placeholder: a dashed, labelled box the same height a map will
   take, so the card does not visibly reflow when it is wired in, and nobody mistakes it for one. */
.booking-detail__venue-map[b-n0v19qyh5b] {
    width: 100%;
    min-height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px dashed var(--mud-palette-lines-default, #d7e7e1);
    border-radius: var(--radius-md, 0.5rem);
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
}

.booking-detail__thread[b-n0v19qyh5b] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.booking-detail__msg[b-n0v19qyh5b] {
    background: var(--mud-palette-background-grey);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    max-width: 88%;
    align-self: flex-start;
}

.booking-detail__msg--mine[b-n0v19qyh5b] {
    align-self: flex-end;
    background: var(--mud-palette-primary-hover);
}

.booking-detail__msg--highlight[b-n0v19qyh5b] {
    outline: 2px solid var(--mud-palette-warning);
    outline-offset: 2px;
    animation: booking-detail-flash-b-n0v19qyh5b 1.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .booking-detail__msg--highlight[b-n0v19qyh5b] { animation: none; }
}

@keyframes booking-detail-flash-b-n0v19qyh5b {
    0%, 100% { background: var(--mud-palette-background-grey); }
    30% { background: var(--mud-palette-warning-hover, #fff2cc); }
}

.booking-detail__msg-head[b-n0v19qyh5b] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.25rem;
}

.booking-detail__msg-body[b-n0v19qyh5b] {
    white-space: pre-line;
    color: var(--mud-palette-text-primary);
}

.booking-detail__composer[b-n0v19qyh5b] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.booking-detail__composer .mud-input-outlined[b-n0v19qyh5b] {
    flex: 1;
    min-width: 0;
}
/* /Components/Pages/DataProtection.razor.rz.scp.css */
/* Data subject request toolkit. */

.dsr-lookup[b-x5agv8nqki] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.dsr-lookup .mud-input-control[b-x5agv8nqki] {
    flex: 1 1 auto;
}

.dsr-subject__head[b-x5agv8nqki] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.dsr-badges[b-x5agv8nqki] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dsr-badge[b-x5agv8nqki] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.dsr-badge--restricted[b-x5agv8nqki] {
    background: var(--status-negative-wash);
    color: var(--status-negative-ink);
}

.dsr-badge--objected[b-x5agv8nqki] {
    background: var(--status-warning-wash);
    color: var(--status-warning-ink);
}

.dsr-badge--consent[b-x5agv8nqki] {
    background: var(--brand-primary-lozenge);
    color: var(--brand-primary-ink);
}

.dsr-badge--withdrawn[b-x5agv8nqki] {
    background: var(--status-neutral-wash);
    color: var(--status-neutral-ink);
}

/* Branded section kicker: shared eyebrow metrics in --brand-primary-ink, matching every other kicker. */
.dsr-section[b-x5agv8nqki] {
    margin: 1.5rem 0 0.6rem;
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    color: var(--brand-primary-ink);
}

.dsr-actions[b-x5agv8nqki] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dsr-action[b-x5agv8nqki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--brand-hairline, rgba(20, 40, 40, 0.14));
    border-radius: 10px;
}

.dsr-action--danger[b-x5agv8nqki] {
    /* A subtle error tint over the theme surface, so it reads in dark mode too (was a fixed light pink). */
    border-color: color-mix(in srgb, var(--mud-palette-error, #b3261e) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error, #b3261e) 10%, var(--mud-palette-surface, #fff));
}

.dsr-action__text[b-x5agv8nqki] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dsr-action__text strong[b-x5agv8nqki] {
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

.dsr-action__text span[b-x5agv8nqki] {
    font-size: 0.82rem;
    color: var(--brand-muted, #5b6b6b);
}

.dsr-action__pair[b-x5agv8nqki] {
    display: flex;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.dsr-action > .home-btn[b-x5agv8nqki] {
    flex: 0 0 auto;
}

.dsr-export[b-x5agv8nqki] {
    white-space: pre-wrap;
    overflow-x: auto;
    background: color-mix(in srgb, var(--mud-palette-text-primary, #101418) 6%, var(--mud-palette-surface, #fff));
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.82rem;
    max-height: 22rem;
}

.dsr-confirm[b-x5agv8nqki] {
    margin: 0;
    line-height: 1.5;
    color: var(--mud-palette-text-primary, #101418);
}
/* /Components/Pages/Diary.razor.rz.scp.css */
/* =====================================================================
   Room diary, reworked as a time-first FM job sheet.
   Scoped to Diary.razor so it does not clash with the shared job-card
   styles in app.css that other pages or in-flight work may still use.
   Brand palette only. UK English. No em dashes.
   ===================================================================== */

/* ---- Toolbar: status toggle and search ---- */
.fmd-toolbar[b-pxzikf9z27] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.fmd-toggle[b-pxzikf9z27] {
    display: inline-flex;
    padding: 0.2rem;
    gap: 0.2rem;
    background: var(--mud-palette-surface, #F6FAF9);
    border: 1px solid var(--mud-palette-lines-default, #E2ECE7);
    border-radius: 999px;
}

.fmd-toggle__btn[b-pxzikf9z27] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.95rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fmd-toggle__btn:hover[b-pxzikf9z27] {
    color: var(--mud-palette-primary, #1C4E4F);
}

.fmd-toggle__btn.is-active[b-pxzikf9z27],
.fmd-toggle__btn.is-active:hover[b-pxzikf9z27] {
    color: var(--mud-palette-primary-text, #F6FAF9); /* on-primary, kept on hover so an active pill never darkens */
    background: var(--mud-palette-primary, #1C4E4F);
}

.fmd-toggle__count[b-pxzikf9z27] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 999px;
    color: var(--mud-palette-primary, #1C4E4F);
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 12%, transparent);
}

.fmd-toggle__btn.is-active .fmd-toggle__count[b-pxzikf9z27] {
    color: var(--mud-palette-primary-text, #F6FAF9);
    background: rgba(255, 255, 255, 0.22);
}

.fmd-search[b-pxzikf9z27] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.7rem;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-inputs, #C4D3CC);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.fmd-search:focus-within[b-pxzikf9z27] {
    border-color: var(--brand-cambridge-blue, #79A682);
    outline: 2px solid var(--brand-cambridge-blue, #79A682);
    outline-offset: 1px;
}

.fmd-search__input[b-pxzikf9z27] {
    min-width: 14rem;
    padding: 0.5rem 0;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary, var(--brand-carbon-wing, #101418));
    background: transparent;
    border: 0;
    outline: none;
}

.fmd-toggle__btn:focus-visible[b-pxzikf9z27] {
    outline: 2px solid var(--brand-cambridge-blue, #79A682);
    outline-offset: 2px;
}

/* ---- The chronological list ---- */
.fmd-list[b-pxzikf9z27] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Full-width, softly tinted part-of-day banner. Not floating text. */
.fmd-daypart[b-pxzikf9z27] {
    margin: 0.6rem 0 0.15rem;
    padding: 0.4rem 0.85rem;
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    color: var(--brand-primary-ink);
    background: var(--brand-primary-wash);
    border-radius: 8px;
}

.fmd-daypart:first-child[b-pxzikf9z27] {
    margin-top: 0;
}

/* ---- Cards ---- */
.fmd-card[b-pxzikf9z27] {
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, #E2ECE7);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

.fmd-card__top[b-pxzikf9z27] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.fmd-card__lead[b-pxzikf9z27] {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    min-width: 0;
}

.fmd-card__time[b-pxzikf9z27] {
    flex: 0 0 auto;
    font-size: 1.05rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary, #101418);
}

.fmd-card__names[b-pxzikf9z27] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fmd-card__room[b-pxzikf9z27] {
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

.fmd-card__place[b-pxzikf9z27] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

/* The meeting title (non-private only), so the floor team knows what the room is for. */
.fmd-card__meeting[b-pxzikf9z27] {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.fmd-card__meta[b-pxzikf9z27] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.fmd-card__label[b-pxzikf9z27] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    color: var(--brand-muted);
}

.fmd-chips[b-pxzikf9z27] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fmd-chip[b-pxzikf9z27] {
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--brand-primary-ink);
    background: var(--brand-primary-lozenge);
    border-radius: 999px;
}

/* A tickable resource chip: the floor team checks it off once the item is in the room. */
.fmd-chip--check[b-pxzikf9z27] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 25%, transparent);
    background: var(--mud-palette-surface, #fff);
    user-select: none;
}

.fmd-chip--check input[b-pxzikf9z27] {
    margin: 0;
    accent-color: var(--mud-palette-primary, #1C4E4F);
}

.fmd-chip--check.is-on[b-pxzikf9z27] {
    color: var(--mud-palette-primary-text, #fff);
    background: var(--mud-palette-primary, #1C4E4F);
    border-color: var(--mud-palette-primary, #1C4E4F);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Booker's message: a stand-out Mimosa wash so it is not missed. */
.fmd-card__note[b-pxzikf9z27] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary, #101418);
    background: rgba(242, 185, 73, 0.16);
    border-left: 3px solid var(--brand-mimosa, #F2B949);
    border-radius: 8px;
}

.fmd-card__actions[b-pxzikf9z27] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Badges align with the action: amber "to prepare", green "ready". */
.fmd-badge[b-pxzikf9z27] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    padding: 0.12rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 999px;
    white-space: nowrap;
}

.fmd-badge--todo[b-pxzikf9z27] {
    color: var(--status-warning-ink);
    background: var(--status-warning-wash);
}

.fmd-badge--ready[b-pxzikf9z27] {
    color: var(--status-positive-ink);
    background: var(--status-positive-wash);
}

/* "Amended" / "Resources changed": a booking that changed after it was made, so the set-up team
   knows to re-check it. Reads as a warning without shouting. */
.fmd-badge--changed[b-pxzikf9z27] {
    color: var(--status-warning-ink);
    background: var(--status-warning-wash);
}

/* The status badges stack tidily when a booking is both changed and to prepare. */
.fmd-card__badges[b-pxzikf9z27] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    flex: 0 0 auto;
}

/* ---- Heavy card: requests resources, so it earns space and an accent. ---- */
.fmd-card--heavy[b-pxzikf9z27] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.05rem 1.15rem;
    border-left: 4px solid var(--brand-mimosa, #F2B949);
}

/* Keep the actions on the right on a resourced card too, so they do not jump to the bottom-left and
   read inconsistently with the slim cards. */
.fmd-card--heavy .fmd-card__actions[b-pxzikf9z27] {
    margin-top: 0.15rem;
    justify-content: flex-end;
}

/* ---- Light card: no resources, so a quiet slim row. ---- */
.fmd-card--light[b-pxzikf9z27] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    padding: 0.6rem 1.1rem;
    border-left: 3px solid var(--brand-celadon, #B6D2AD);
}

.fmd-card--light .fmd-card__top[b-pxzikf9z27] {
    flex: 1 1 16rem;
    min-width: 0;
}

.fmd-card--light .fmd-card__lead[b-pxzikf9z27] {
    align-items: center;
}

.fmd-card--light .fmd-card__names[b-pxzikf9z27] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.5rem;
}

.fmd-card--light .fmd-card__note[b-pxzikf9z27] {
    flex: 1 1 100%;
}

.fmd-card--light .fmd-card__actions[b-pxzikf9z27] {
    flex: 0 0 auto;
    margin-left: auto;
}

/* ---- Ready state: a brand accent, gently dimmed so attention stays on the queue. ---- */
.fmd-card--ready[b-pxzikf9z27] {
    border-left-color: var(--mud-palette-primary, #1C4E4F);
}

.fmd-card--ready.fmd-card--heavy[b-pxzikf9z27],
.fmd-card--ready.fmd-card--light[b-pxzikf9z27] {
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 4%, var(--mud-palette-surface, #fff));
}

@media (max-width: 640px) {
    .fmd-card--light .fmd-card__actions[b-pxzikf9z27] {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* Site grouping: each site is a collapsible section holding its day's cards (which keep the
   morning/afternoon split inside). Collapsed by default; a single-site tenant opens automatically. */
.fmd-site[b-pxzikf9z27] {
    border: 1px solid var(--mud-palette-lines-default, var(--brand-hairline));
    border-radius: 12px;
    background: var(--mud-palette-surface, #fff);
    margin-bottom: 0.85rem;
    overflow: hidden;
}

.fmd-site__bar[b-pxzikf9z27] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.fmd-site__bar[b-pxzikf9z27]::-webkit-details-marker {
    display: none;
}

.fmd-site__icon[b-pxzikf9z27] {
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.fmd-site__name[b-pxzikf9z27] {
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary, var(--brand-carbon-wing));
}

.fmd-site__count[b-pxzikf9z27] {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.fmd-site__chevron[b-pxzikf9z27] {
    color: var(--mud-palette-text-secondary, #4a5a5a);
    transition: transform 0.15s ease;
}

.fmd-site[open] .fmd-site__chevron[b-pxzikf9z27] {
    transform: rotate(180deg);
}

.fmd-site__body[b-pxzikf9z27] {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--mud-palette-lines-default, var(--brand-hairline));
}

/* The site label is a shared child component, so reach its name with ::deep to keep the bar's weight. */
.fmd-site__bar[b-pxzikf9z27]  .site-label__name {
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary, var(--brand-carbon-wing));
}

/* Per-site building filter pill in the site bar. */
.fmd-site__filter[b-pxzikf9z27] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, var(--brand-hairline));
    border-radius: 999px;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    cursor: pointer;
}

.fmd-site__filter.is-filtered[b-pxzikf9z27] {
    border-color: var(--mud-palette-primary, #1C4E4F);
    color: var(--mud-palette-primary, #1C4E4F);
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 12%, var(--mud-palette-surface, #fff));
}

.fmd-site__filter-select[b-pxzikf9z27] {
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    max-width: 12rem;
}

/* A clear banner inside a site when its building filter is on. */
.fmd-site__filternote[b-pxzikf9z27] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0 0.2rem;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.fmd-linkbtn[b-pxzikf9z27] {
    border: 0;
    background: none;
    padding: 0;
    color: var(--mud-palette-primary, #1C4E4F);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Next-day peek shown when there is nothing to prepare today. */
.fmd-nextday[b-pxzikf9z27] {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--mud-palette-lines-default, var(--brand-hairline));
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 5%, var(--mud-palette-surface, #fff));
}

.fmd-nextday__head[b-pxzikf9z27] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
    margin-bottom: 0.6rem;
}

.fmd-nextday__list[b-pxzikf9z27] {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.fmd-nextday__list li[b-pxzikf9z27] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.fmd-nextday__time[b-pxzikf9z27] {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

.fmd-nextday__room[b-pxzikf9z27] {
    color: var(--mud-palette-text-primary, #101418);
}

.fmd-nextday__place[b-pxzikf9z27] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}
/* /Components/Pages/EmailLog.razor.rz.scp.css */
.emaillog__stats[b-xrod3pv5xa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.emaillog__stat[b-xrod3pv5xa] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--mud-palette-lines-default, #D7E7E1);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--mud-palette-text-primary, #101418) 4%, var(--mud-palette-surface, #F6FAF9));
}

.emaillog__stat--ok[b-xrod3pv5xa] {
    border-color: color-mix(in srgb, var(--brand-cambridge-blue, #79A682) 60%, transparent);
}

.emaillog__stat--bad[b-xrod3pv5xa] {
    border-color: color-mix(in srgb, #b71c1c 40%, transparent);
    background: color-mix(in srgb, #b71c1c 6%, var(--mud-palette-surface, #F6FAF9));
}

.emaillog__stat-value[b-xrod3pv5xa] {
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #142828);
    line-height: 1.1;
}

.emaillog__stat-label[b-xrod3pv5xa] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #4a5c58);
}

.emaillog__pill[b-xrod3pv5xa] {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.emaillog__pill--ok[b-xrod3pv5xa] {
    color: var(--status-positive-ink);
    background: var(--status-positive-wash);
}

.emaillog__pill--bad[b-xrod3pv5xa] {
    color: var(--status-negative-ink);
    background: var(--status-negative-wash);
}
/* /Components/Pages/Estate.razor.rz.scp.css */
/* Estate admin, page-scoped polish. Kept out of app.css to avoid clashing with in-flight work.
   Brand palette only (custom properties defined in app.css :root). UK English throughout. */

/* ---- Toolbar and tree search ---- */
.estate__toolbar[b-kua3x8uz8h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.estate__search[b-kua3x8uz8h] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 16rem;
    max-width: 24rem;
    padding: 0 0.55rem;
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-inputs, rgba(20, 40, 40, 0.25));
}

.estate__search:focus-within[b-kua3x8uz8h] {
    border-color: var(--brand-cambridge-blue);
    outline: 2px solid var(--brand-cambridge-blue);
    outline-offset: -1px;
}

.estate__search__icon[b-kua3x8uz8h] {
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.estate__search input[b-kua3x8uz8h] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    padding: 0.45rem 0;
    color: var(--mud-palette-text-primary, #101418);
}

.estate__search__clear[b-kua3x8uz8h] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.estate__search__clear:hover[b-kua3x8uz8h] {
    color: var(--mud-palette-text-primary, #101418);
}

/* ---- Sticky room-table headers ---- */
.estate__matrix-scroll[b-kua3x8uz8h] {
    overflow: auto;
    max-height: 26rem;
}

/* Fixed layout with set column widths, so every building's table lines up with the next one down the
   page (auto layout sized each table to its own content, so the columns never matched). */
.estate__table[b-kua3x8uz8h] {
    table-layout: fixed;
    width: 100%;
}

.estate__table td[b-kua3x8uz8h] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.estate__table .estate__check-col[b-kua3x8uz8h] {
    width: 40px;
}

.estate__table thead th[b-kua3x8uz8h] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface, #fff);
    box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default, rgba(20, 40, 40, 0.1));
}

.estate__table td.estate__row-actions[b-kua3x8uz8h] {
    width: 1%;
    text-align: right;
}

/* ---- Colour-coded layout badges ---- */
.estate__layouts[b-kua3x8uz8h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.estate__layout-pill[b-kua3x8uz8h] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.estate__layout-pill__name[b-kua3x8uz8h] {
    font-weight: 500;
}

.estate__layout-pill__cap[b-kua3x8uz8h] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.estate__layout-pill--boardroom[b-kua3x8uz8h] {
    background: color-mix(in srgb, var(--brand-brunswick-green) 14%, #fff);
    color: var(--brand-brunswick-green);
    border-color: color-mix(in srgb, var(--brand-brunswick-green) 32%, transparent);
}

.estate__layout-pill--theatre[b-kua3x8uz8h] {
    background: color-mix(in srgb, var(--brand-cambridge-blue) 26%, #fff);
    color: #2c5233;
    border-color: color-mix(in srgb, var(--brand-cambridge-blue) 55%, transparent);
}

.estate__layout-pill--conference[b-kua3x8uz8h] {
    background: color-mix(in srgb, var(--brand-gunmetal) 12%, #fff);
    color: var(--brand-gunmetal);
    border-color: color-mix(in srgb, var(--brand-gunmetal) 30%, transparent);
}

.estate__layout-pill--cabaret[b-kua3x8uz8h] {
    background: color-mix(in srgb, var(--brand-mimosa) 30%, #fff);
    color: #7a5300;
    border-color: color-mix(in srgb, var(--brand-mimosa) 60%, transparent);
}

.estate__layout-pill--ushape[b-kua3x8uz8h] {
    background: color-mix(in srgb, var(--brand-celadon) 42%, #fff);
    color: #35563a;
    border-color: color-mix(in srgb, var(--brand-celadon) 70%, transparent);
}

.estate__layout-pill--other[b-kua3x8uz8h] {
    background: var(--brand-sea-salt);
    color: var(--brand-muted);
    border-color: var(--brand-hairline);
}

/* Bulk multi-select and inline quick-edit modes. */
.estate__mode--on[b-kua3x8uz8h] {
    background: var(--brand-mint-cream, #D7E7E1);
    border-color: var(--brand-cambridge-blue, #79A682);
    color: var(--brand-brunswick-green, #1C4E4F);
}

.estate__check-col[b-kua3x8uz8h] {
    width: 2.2rem;
    text-align: center;
}

.estate__row--selected[b-kua3x8uz8h] {
    background: var(--brand-mint-cream, #D7E7E1);
}

.estate__inline-input[b-kua3x8uz8h] {
    max-width: 16rem;
    padding: 0.3rem 0.5rem;
}

.estate__inline-check[b-kua3x8uz8h] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.estate__confirm[b-kua3x8uz8h] {
    margin: 0;
    line-height: 1.5;
    color: var(--mud-palette-text-primary, #101418);
}

/* Sticky bulk action bar, floats above the page bottom while rooms are selected. */
.estate__bulkbar[b-kua3x8uz8h] {
    position: sticky;
    bottom: 1rem;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: var(--brand-brunswick-green, #1C4E4F);
    color: #fff;
    box-shadow: 0 6px 24px rgba(16, 20, 24, 0.28);
}

.estate__bulkbar__count[b-kua3x8uz8h] {
    font-weight: 500;
}

.estate__bulkbar__actions[b-kua3x8uz8h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* The bulk bar sits on a dark ground, so lift the ghost buttons for contrast. */
.estate__bulkbar__actions .home-btn--ghost[b-kua3x8uz8h] {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
}

.estate__bulkbar__actions .home-btn--ghost:hover[b-kua3x8uz8h] {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

/* Delete sits on the dark bar too, where the usual dark-red-on-transparent all but disappears. Make
   it a solid red pill so the destructive action stands out clearly against the others. */
.estate__bulkbar__actions .home-btn--danger[b-kua3x8uz8h] {
    color: #fff;
    background: #e5484d;
    border-color: #e5484d;
}

.estate__bulkbar__actions .home-btn--danger:hover:not(:disabled)[b-kua3x8uz8h] {
    background: #cf3b40;
    border-color: #cf3b40;
}

/* ---- Reorder mode: drag handle and up/down movers ---- */
.estate__drag[b-kua3x8uz8h] {
    display: inline-flex;
    align-items: center;
    cursor: grab;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.estate__drag:active[b-kua3x8uz8h] {
    cursor: grabbing;
}

.estate__movers[b-kua3x8uz8h] {
    display: inline-flex;
    gap: 0.1rem;
    margin-right: 0.35rem;
}

.estate__mover[b-kua3x8uz8h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    border: 1px solid var(--brand-hairline);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
    cursor: pointer;
    color: var(--brand-brunswick-green);
}

.estate__mover:hover:not(:disabled)[b-kua3x8uz8h] {
    border-color: var(--brand-cambridge-blue);
}

.estate__mover:disabled[b-kua3x8uz8h] {
    opacity: 0.5;
    cursor: default;
}

/* A tight leading column for the room drag handle and movers. */
.estate__reorder-cell[b-kua3x8uz8h] {
    width: 5.5rem;
    white-space: nowrap;
}

.estate-tree__summary--reorder[b-kua3x8uz8h] {
    background: var(--brand-mint-cream);
}

/* ---- Live drag feedback: lift the card being dragged so it reads as picked up, while its
   siblings shuffle around it in place. ---- */
.estate-tree__summary--dragging[b-kua3x8uz8h],
.estate__building-head--dragging[b-kua3x8uz8h],
.estate__row--dragging[b-kua3x8uz8h] {
    opacity: 0.55;
    outline: 2px dashed var(--brand-cambridge-blue);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--brand-cambridge-blue) 16%, var(--mud-palette-surface, #fff));
}

.estate-tree__summary--dragging[b-kua3x8uz8h] {
    box-shadow: 0 6px 18px rgba(16, 20, 24, 0.22);
}

/* Whole tree gets a grab cursor while a drag is live. */
.estate__drag:active :deep(*)[b-kua3x8uz8h] {
    cursor: grabbing;
}

/* A tenant-provided site logo on the estate tree, in place of the building icon. Bounded so an
   oddly sized image can never break the row: fixed height, capped width, scaled to fit. */
.estate-tree__logo[b-kua3x8uz8h] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    max-width: 8rem;
}

.estate-tree__logo img[b-kua3x8uz8h] {
    height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Logo preview under the URL field in the edit-site form, same safe bounds. */
.estate__logo-preview[b-kua3x8uz8h] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.4rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, var(--brand-hairline));
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    max-width: 12rem;
}

.estate__logo-preview img[b-kua3x8uz8h] {
    height: 2rem;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* The bookings that clash with a room being taken out of use, listed for the administrator to
   cancel. Derives from the palette so it survives white-labelling and dark mode. */
.estate__oou-conflicts[b-kua3x8uz8h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 18rem;
    overflow-y: auto;
}

.estate__oou-conflict[b-kua3x8uz8h] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--mud-palette-lines-default, var(--brand-hairline));
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
}

.estate__oou-conflict-when[b-kua3x8uz8h] {
    font-weight: 500;
}

.estate__oou-conflict-who[b-kua3x8uz8h] {
    color: var(--mud-palette-text-secondary, #5a6a67);
}

.estate__space-type[b-kua3x8uz8h] {
    display: inline-block;
    margin-inline-start: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--status-info-wash);
    color: var(--status-info-ink);
}
/* /Components/Pages/EventDetail.razor.rz.scp.css */
.event-dash__loading[b-ojpttpna7c] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.event-dash__crumb[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* Breadcrumb to H1 is the top of the tight title stack, so use --gap-sm here rather than
       the 0.75rem this once carried. The wider 1.5rem rhythm applies BETWEEN section cards,
       never inside the header. */
    margin-block-end: var(--gap-sm, 0.5rem);
}

/* Header block: two-column grid. Title-block packs on the left, cover-block fills the remaining
   header width on the right. On narrow widths (up to 48rem) the cover stacks below the title.
   Vertical rhythm inside the header is tight: --gap-sm from breadcrumb to H1, 0.25rem from H1
   to subtitle, and a compressed padding-block so the title stack reads as one dense unit. The
   1.5rem --gap-lg rhythm is reserved for the gap BETWEEN section cards below the header. */
/* Bug F: header grid uses align-items: center so the cover / tenant logo sits vertically centred
   against the title block. Padding-block stays at the tight 0.75rem the header spacing tests pin. */
/* Three columns: title, key-date lozenges, cover. The lozenges used to sit stacked above the
   cover in the right column, which left a dead band between the title and the logo and made the
   header taller than it needed to be. They now fill that gap, beside the logo rather than over it.
   align-items: center keeps the logo vertically centred against the whole block (the PR #589
   item F fix); do not go back to a top-aligned row with uneven padding around the logo. */
.event-dash__header[b-ojpttpna7c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
    align-items: center;
    gap: 1rem;
    padding-block: 0.75rem;
    margin-block-end: 1.5rem;
}

/* Middle column: the key-date lozenges as one group next to the logo. Capped so they read as a
   block rather than sprawling across a very wide screen, and wrapping within the column so a
   narrower viewport flows them onto more lines instead of squeezing the logo out. */
.event-dash__key-dates[b-ojpttpna7c] {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.35rem;
    max-width: 22rem;
    min-width: 0;
}

/* Right column holds the cover only. */
.event-dash__header-right[b-ojpttpna7c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    min-width: 0;
}

/* Invitation row actions sit on one line, lower risk first (Resend, then Revoke). */
.event-dash__row-actions[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.event-dash__header-title[b-ojpttpna7c] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Tight stack: default row-to-row spacing is the H1-to-subtitle rhythm (0.25rem). The
       breadcrumb sits above via .event-dash__crumb's margin-block-end. */
    gap: 0.25rem;
}

/* The meta row (icons and dates) needs a hair more breathing room from the subtitle above so
   the icons do not feel bolted onto the tagline. Still well short of the between-cards 1.5rem. */
.event-dash__header-title > .event-dash__title-meta[b-ojpttpna7c] {
    margin-block-start: 0.5rem;
}

.event-dash__title-row[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.event-dash__title[b-ojpttpna7c] {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #101418);
}

.event-dash__subtitle[b-ojpttpna7c] {
    margin: 0;
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.95rem;
    line-height: 1.4;
}

.event-dash__title-meta[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.9rem;
}

.event-dash__edit[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Cover image block on the right of the header. Fills the remaining header column at desktop
   widths (via the header's 1fr 1fr grid) so a tenant logo or event PNG reads at real size,
   never cropped. Two shapes: an "has-image" frame with a hover overlay that carries Change and
   Remove chip-buttons attached to the image, and an "empty" frame that is one styled "Add
   cover" label hiding an <input type="file"> the button click activates. No free-floating
   "Remove" text link, no visible raw file input. */
.event-dash__cover[b-ojpttpna7c] {
    width: 100%;
    /* Cap the frame's height so it never pushes the page down. The frame carries a fixed height
       (not an aspect-ratio) so a full-width column does not stretch to something absurdly tall. */
    max-width: 22rem;
    justify-self: end;
}

.event-dash__cover-frame[b-ojpttpna7c] {
    position: relative;
    display: block;
    height: 14rem;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    /* Subtle surface behind the image so a transparent PNG does not float on the page ground. */
    background: var(--mud-palette-background-grey, var(--mud-palette-background, #f6faf9));
}

.event-dash__cover-img[b-ojpttpna7c] {
    display: block;
    width: 100%;
    height: 100%;
    /* Contain (never crop): the whole cover image stays visible. A tenant logo or an event
       poster keeps its aspect ratio; the frame's background token fills any bars. */
    object-fit: contain;
    object-position: center;
}

/* Hide the raw <input type="file"> visually and from the layout while keeping it focusable
   and click-activatable through its wrapping <label>. Absolute-positioned inside the label so
   the styled button is the only visible affordance. */
.event-dash__cover-input[b-ojpttpna7c] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.event-dash__cover-overlay[b-ojpttpna7c] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem;
    color: #fff;
    background: rgba(16, 20, 24, 0.55);
    opacity: 0;
    transition: opacity 120ms ease;
}

.event-dash__cover-frame--has-image:hover .event-dash__cover-overlay[b-ojpttpna7c],
.event-dash__cover-frame--has-image:focus-within .event-dash__cover-overlay[b-ojpttpna7c] {
    opacity: 1;
}

.event-dash__cover-overlay-btn[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--mud-palette-text-primary, #101418);
    font-size: 0.8rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    line-height: 1.2;
}
.event-dash__cover-overlay-btn:hover[b-ojpttpna7c] { background: #fff; }
.event-dash__cover-overlay-btn--remove[b-ojpttpna7c] { color: var(--status-negative-ink, #b00020); }
.event-dash__cover-overlay-btn:disabled[b-ojpttpna7c] { opacity: 0.6; cursor: not-allowed; }

.event-dash__cover-frame--empty[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mud-palette-primary, #1c4e4f), var(--mud-palette-primary-darken, #113435));
    color: #fff;
}

.event-dash__cover-add[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Narrow widths: the three columns stack in source order (title, lozenges, cover). */
@media (max-width: 48rem) {
    .event-dash__header[b-ojpttpna7c] {
        grid-template-columns: 1fr;
    }
    .event-dash__key-dates[b-ojpttpna7c] {
        max-width: 100%;
    }
    .event-dash__header-right[b-ojpttpna7c] {
        align-items: flex-start;
    }
    .event-dash__cover[b-ojpttpna7c] {
        width: min(100%, 20rem);
        justify-self: start;
    }
    .event-dash__cover-frame[b-ojpttpna7c] {
        /* Slightly shorter frame on narrow widths so it never dominates the viewport. */
        height: 10rem;
    }
}

/* Edit modal: change-preview list and step-2 rhythm. */
.event-dash__change-list[b-ojpttpna7c] {
    list-style: disc inside;
    margin: 0.5rem 0;
    padding: 0;
    color: var(--mud-palette-text-primary, #101418);
    font-size: 0.9rem;
}
.event-dash__change-list li[b-ojpttpna7c] { padding: 0.15rem 0; }

.event-dash__edit-row[b-ojpttpna7c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
}

.event-dash__state[b-ojpttpna7c] {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.event-dash__state--draft[b-ojpttpna7c] { background: var(--status-neutral-wash); color: var(--status-neutral-ink); }
.event-dash__state--published[b-ojpttpna7c] { background: var(--status-positive-wash); color: var(--status-positive-ink); }
.event-dash__state--closed[b-ojpttpna7c] { background: var(--status-warning-wash); color: var(--status-warning-ink); }

.event-dash__toolbar[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
    margin-block-end: 1.5rem;
    flex-wrap: wrap;
}

.event-dash__toolbar-meta[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.9rem;
}

.event-dash__meta[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.event-dash__toolbar-actions[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Bug I: KPI strip is now a MudGrid of five equal-width tiles (xs=6 md=2). Each tile carries a
   top accent bar in tenant palette, an uppercase small label, the big number, and a labelled
   trend line. No hard-coded hex; per-stage accent uses tenant palette tokens. */
/* Five equal tiles filling the row exactly.
   Not a 12-column grid: five does not divide into twelve, so `md=2` per tile came to ten of the
   twelve columns and the two left over were the ragged gap on the right. Five fractions cannot
   leave a remainder. The shared --gap-md token spaces them, matching the rest of the page.
   `align-items: stretch` (the grid default, stated here because it is the whole point) makes every
   tile take the row's height, so a tile carrying an extra chip does not make its neighbours short. */
.event-dash__kpi-grid[b-ojpttpna7c] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--gap-md);
}

.event-dash__kpi-item[b-ojpttpna7c] {
    display: flex;
    min-width: 0;
}

.event-dash__kpi-tile[b-ojpttpna7c] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.85rem 0.65rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    width: 100%;
    min-width: 0;
    /* Fill the stretched row rather than hugging the content: a tile with no sub-line and no chip
       must not shrink, and one with both must not grow. min-height stays as the floor for a row
       where every tile is bare. */
    height: 100%;
    min-height: 6.25rem;
    box-shadow: 0 1px 2px rgba(16, 20, 24, 0.03);
}

/* Internals are top-aligned in every tile, so the label and the number sit at the same height right
   across the strip and the optional sub-lines (the trend line, a "1 revoked" chip) hang below in
   whatever space the stretched tile has. Deliberately NOT auto-margined to the bottom: with two
   optional lines only the first would take the free space, which reads as a gap in the middle of one
   tile and not the others. */
.event-dash__kpi-tile[b-ojpttpna7c] {
    justify-content: flex-start;
}

/* Narrow widths: fewer columns, still equal width and height, still filling the row. */
@media (max-width: 64rem) {
    .event-dash__kpi-grid[b-ojpttpna7c] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .event-dash__kpi-grid[b-ojpttpna7c] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.event-dash__kpi-bar[b-ojpttpna7c] {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    border-start-start-radius: 8px;
    border-start-end-radius: 8px;
}
.event-dash__kpi-tile--stage1 .event-dash__kpi-bar[b-ojpttpna7c] { background: var(--mud-palette-primary); }
.event-dash__kpi-tile--stage2 .event-dash__kpi-bar[b-ojpttpna7c] { background: var(--mud-palette-primary-lighten); }
.event-dash__kpi-tile--stage3 .event-dash__kpi-bar[b-ojpttpna7c] { background: var(--mud-palette-secondary); }
.event-dash__kpi-tile--stage4 .event-dash__kpi-bar[b-ojpttpna7c] { background: var(--mud-palette-warning); }

/* Trend line inside the tile body, aligned under the number, labelled with the funnel base. */
.event-dash__kpi-trend[b-ojpttpna7c] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-block-start: 0.15rem;
}
.event-dash__kpi-trend--positive[b-ojpttpna7c] { color: var(--status-positive-ink); }
.event-dash__kpi-trend--warning[b-ojpttpna7c]  { color: var(--status-warning-ink); }
.event-dash__kpi-trend--negative[b-ojpttpna7c] { color: var(--status-negative-ink); }
.event-dash__kpi-trend--neutral[b-ojpttpna7c]  { color: var(--mud-palette-text-secondary); }

/* Legacy strip kept for the "hero card" rule below still referring to it. */
.event-dash__kpi[b-ojpttpna7c] {
    display: none;
}

.event-dash__kpi-cell[b-ojpttpna7c] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0.75rem;
    /* Brand-palette left accent per funnel stage: reinforces "further along the funnel". */
    border-inline-start: 3px solid transparent;
}
.event-dash__kpi-cell--stage1[b-ojpttpna7c] { border-inline-start-color: var(--mud-palette-primary, #1C4E4F); } /* Brunswick Green */
.event-dash__kpi-cell--stage2[b-ojpttpna7c] { border-inline-start-color: #79A682; }                              /* Cambridge Blue */
.event-dash__kpi-cell--stage3[b-ojpttpna7c] { border-inline-start-color: #B6D2AD; }                              /* Celadon */
.event-dash__kpi-cell--stage4[b-ojpttpna7c] { border-inline-start-color: #F2B949; }                              /* Mimosa */

.event-dash__kpi-label[b-ojpttpna7c] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary, #526670);
}

.event-dash__kpi-value[b-ojpttpna7c] {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #101418);
}

.event-dash__kpi-chip[b-ojpttpna7c] {
    align-self: flex-start;
    margin-block-start: 0.15rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--status-neutral-wash);
    color: var(--status-neutral-ink);
    font-size: 0.7rem;
    font-weight: 600;
}

.event-dash__kpi-arrow[b-ojpttpna7c] {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* Default (neutral) look, overridden per bracket. */
    color: var(--mud-palette-text-secondary, #526670);
    background: var(--mud-palette-background, #f6faf9);
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
}
.event-dash__kpi-arrow[b-ojpttpna7c]::before { content: "▼"; margin-inline-end: 0.25rem; font-size: 0.7em; opacity: 0.65; }
.event-dash__kpi-arrow--positive[b-ojpttpna7c] { background: var(--status-positive-wash); color: var(--status-positive-ink); border-color: transparent; }
.event-dash__kpi-arrow--warning[b-ojpttpna7c]  { background: var(--status-warning-wash);  color: var(--status-warning-ink);  border-color: transparent; }
.event-dash__kpi-arrow--negative[b-ojpttpna7c] { background: var(--status-negative-wash); color: var(--status-negative-ink); border-color: transparent; }
.event-dash__kpi-arrow--neutral[b-ojpttpna7c]  { background: var(--status-neutral-wash);  color: var(--status-neutral-ink);  border-color: transparent; }

.event-dash__grid[b-ojpttpna7c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
    margin-block-end: 1.5rem;
}

.event-dash__panel[b-ojpttpna7c] {
    border-radius: 6px;
}

/* Section-card rhythm comes from the shared `.card-stack` utility in app.css, which every card
   stack in the portal uses. Nothing page-local here: that is what let five pages drift apart.
   See the block comment on .card-stack for why sibling margins were the wrong mechanism. */

/* Exhibitor tasks: three columns on desktop, two on tablet, one on mobile via MudGrid; no
   list-style bullets; the row itself is a plain flex container and its label wraps. */
.event-dash__task-groups[b-ojpttpna7c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.event-dash__task-group-heading[b-ojpttpna7c] {
    display: block;
    margin-block-end: 0.5rem;
    color: var(--mud-palette-text-primary, #101418);
}
.event-dash__task-grid[b-ojpttpna7c] {
    /* MudGrid handles the column layout; this class exists so the row cells can style themselves
       against the grid without leaning on Mud internals. */
    width: 100%;
}
.event-dash__task-row[b-ojpttpna7c] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 0.25rem;
    min-width: 0; /* let the label wrap instead of pushing the cell wider than its column */
}
.event-dash__task-row .mud-switch-label[b-ojpttpna7c],
.event-dash__task-row label[b-ojpttpna7c] {
    white-space: normal;
    word-break: break-word;
}

.event-dash__panel-head[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-block-end: 0.75rem;
}

.event-dash__panel-controls[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.event-dash__panel-empty[b-ojpttpna7c] {
    color: var(--mud-palette-text-secondary, #526670);
    padding: 0.5rem 0;
}

.event-dash__hint[b-ojpttpna7c] {
    color: var(--mud-palette-text-secondary, #526670);
    margin: 0 0 0.75rem;
}

.event-dash__table[b-ojpttpna7c] {
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    overflow: hidden;
}

/* Right-align numeric columns explicitly so MudTable's default left-alignment doesn't fight the
   header hint. Applied via inline style="text-align:right" on the .razor. */

.event-dash__util[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 6rem;
}
.event-dash__util-bar[b-ojpttpna7c] {
    position: relative;
    display: inline-block;
    width: 4.5rem;
    height: 0.35rem;
    border-radius: 3px;
    background: var(--mud-palette-background, #f6faf9);
    overflow: hidden;
}
.event-dash__util-bar[b-ojpttpna7c]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--pct, 0);
    background: var(--mud-palette-primary, #1c4e4f);
    border-radius: 3px;
}

.event-dash__na[b-ojpttpna7c] {
    color: var(--mud-palette-text-secondary, #526670);
    font-style: italic;
}

/* Timeline strip. Bottom gap now comes from the shared .event-dash__panel + sibling rule so
   Timeline and the panels below it share one rhythm; a per-panel margin-block-end here would
   double up on that. */
.event-dash__timeline[b-ojpttpna7c] {
    /* no extra bottom margin: sibling-rule owns the gap */
}
.event-dash__strip[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.event-dash__strip-label[b-ojpttpna7c] {
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.8rem;
    min-width: 8rem;
}
.event-dash__strip-track[b-ojpttpna7c] {
    position: relative;
    flex: 1;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--mud-palette-background, #f6faf9);
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
}
.event-dash__strip-tick[b-ojpttpna7c] {
    position: absolute;
    top: 50%;
    left: var(--pos, 0%);
    transform: translate(-50%, -50%);
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-surface, #fff);
}
.event-dash__strip-tick--accepted[b-ojpttpna7c] { background: var(--status-info-ink); }
.event-dash__strip-tick--booked[b-ojpttpna7c] { background: var(--mud-palette-primary, #1c4e4f); }
.event-dash__strip-tick--checkedin[b-ojpttpna7c] { background: var(--status-positive-ink); }

.event-dash__strip-legend[b-ojpttpna7c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block-start: 0.5rem;
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.8rem;
    flex-wrap: wrap;
}
.event-dash__strip-legend-item[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.event-dash__strip-swatch[b-ojpttpna7c] {
    display: inline-block;
    position: static;
    transform: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

/* Pool of spaces: one grouped 4-column status grid per Building. Each cell is `[Name] [Status]`.
   Rows are laid out as pairs of cells, so a wide viewport shows two plot cells side by side (a
   two-cell row inside a 4-column visual band). The chips row and the flat tick-list this
   replaced are gone. */
.event-dash__pool-grid[b-ojpttpna7c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-end: 0.5rem;
}

.event-dash__pool-group[b-ojpttpna7c] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.event-dash__pool-heading[b-ojpttpna7c] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary, #526670);
}

.event-dash__pool-empty[b-ojpttpna7c] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--mud-palette-background, #f6faf9);
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.85rem;
}

.event-dash__pool-cells[b-ojpttpna7c] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem 0.75rem;
}
/* At very narrow widths collapse to a single column so a plot name and its status stay
   readable rather than wrapping. */
@media (max-width: 42rem) {
    .event-dash__pool-cells[b-ojpttpna7c] { grid-template-columns: 1fr; }
}

.event-dash__pool-cell[b-ojpttpna7c] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
    font-size: 0.9rem;
}
.event-dash__pool-cell--out[b-ojpttpna7c] { background: var(--mud-palette-background, #f6faf9); }

.event-dash__pool-cell-name[b-ojpttpna7c] {
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-dash__pool-cell-status[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.85rem;
}

.event-dash__pool-cell-label[b-ojpttpna7c] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--mud-palette-background, #f6faf9);
    color: var(--mud-palette-text-primary, #101418);
    font-weight: 500;
}

.event-dash__pool-add[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--mud-palette-primary, #1c4e4f);
    color: #fff;
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}
.event-dash__pool-add:hover[b-ojpttpna7c] { filter: brightness(1.05); }
.event-dash__pool-add:disabled[b-ojpttpna7c] { opacity: 0.6; cursor: not-allowed; }

.event-dash__pool-remove[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, background 120ms ease;
}
.event-dash__pool-cell:hover .event-dash__pool-remove[b-ojpttpna7c],
.event-dash__pool-cell:focus-within .event-dash__pool-remove[b-ojpttpna7c] {
    opacity: 1;
}
.event-dash__pool-remove:hover[b-ojpttpna7c] { background: var(--status-negative-wash); color: var(--status-negative-ink); }
.event-dash__pool-remove:disabled[b-ojpttpna7c] { opacity: 0.4; cursor: not-allowed; }

.event-dash__pool-refused[b-ojpttpna7c] {
    grid-column: 1 / -1;
    margin-block-start: 0.2rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--status-warning-wash);
    color: var(--status-warning-ink);
    font-size: 0.8rem;
}

/* Hotspot placement chip on in-pool cells. Two tokens: "Placed" (positive-status wash) is a
   static badge; "No hotspot" (warning-status wash) is an <a> link to the floor-plan editor at
   /estate/floor-plan/{BuildingId}, so an organiser can jump straight from the pool to the fix.
   Colours track the shared status tokens rather than a hard-coded hex so white-labelled tenants
   inherit the theme. */
.event-dash__pool-hotspot[b-ojpttpna7c] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}
.event-dash__pool-hotspot--missing[b-ojpttpna7c] {
    background: var(--status-warning-wash);
    color: var(--status-warning-ink);
    cursor: pointer;
}
.event-dash__pool-hotspot--missing:hover[b-ojpttpna7c],
.event-dash__pool-hotspot--missing:focus-visible[b-ojpttpna7c] {
    filter: brightness(0.97);
    text-decoration: underline;
}

.event-dash__pill[b-ojpttpna7c] {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.event-dash__pill--pending[b-ojpttpna7c] { background: var(--status-info-wash); color: var(--status-info-ink); }
.event-dash__pill--accepted[b-ojpttpna7c] { background: var(--status-positive-wash); color: var(--status-positive-ink); }
.event-dash__pill--declined[b-ojpttpna7c] { background: var(--status-neutral-wash); color: var(--status-neutral-ink); }
.event-dash__pill--revoked[b-ojpttpna7c] { background: var(--status-negative-wash); color: var(--status-negative-ink); }
.event-dash__pill--transactional[b-ojpttpna7c] { background: var(--status-info-wash); color: var(--status-info-ink); }
.event-dash__pill--marketing[b-ojpttpna7c] { background: var(--status-warning-wash); color: var(--status-warning-ink); }
.event-dash__pill--sent[b-ojpttpna7c] { background: var(--status-positive-wash); color: var(--status-positive-ink); }
.event-dash__pill--failed[b-ojpttpna7c] { background: var(--status-negative-wash); color: var(--status-negative-ink); }
.event-dash__pill--suppressed[b-ojpttpna7c] { background: var(--status-neutral-wash); color: var(--status-neutral-ink); }
.event-dash__pill--queued[b-ojpttpna7c] { background: var(--status-neutral-wash); color: var(--status-neutral-ink); }

.event-dash__invite-form[b-ojpttpna7c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    align-items: end;
    margin-block-start: 0.75rem;
}

/* Post-event summary. */
.event-dash__post[b-ojpttpna7c] {
    border-color: var(--status-info-ink);
}

.event-dash__post-grid[b-ojpttpna7c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    padding-block: 0.5rem;
    border-block: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    margin-block: 0.75rem;
}
.event-dash__post-cell[b-ojpttpna7c] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0.75rem;
}

.event-dash__post-tops[b-ojpttpna7c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.event-dash__topslist[b-ojpttpna7c] {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.event-dash__topslist li[b-ojpttpna7c] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--mud-palette-background, #f6faf9);
}
.event-dash__topslist-value[b-ojpttpna7c] {
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.85rem;
}

/* Broadcast composer inside the ModalDialog. Same rhythm as the invite form. */
.event-dash__compose[b-ojpttpna7c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Broadcast details modal. Meta rows are label-strong / value-plain pairs. */
.event-dash__details[b-ojpttpna7c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.event-dash__details-meta[b-ojpttpna7c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-background, #f6faf9);
    font-size: 0.9rem;
}
.event-dash__details-meta strong[b-ojpttpna7c] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary, #526670);
    font-weight: 600;
    margin-block-end: 0.15rem;
}

/* Post-event attendee feedback list. */
.event-dash__feedback[b-ojpttpna7c] {
    margin-block-start: 0.75rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--mud-palette-lines-default, #d0d7d3);
}
.event-dash__feedback-list[b-ojpttpna7c] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.event-dash__feedback-list li[b-ojpttpna7c] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
}
.event-dash__feedback-head[b-ojpttpna7c] {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}
.event-dash__feedback-company[b-ojpttpna7c] {
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.85rem;
}
.event-dash__feedback-rating[b-ojpttpna7c] {
    margin-inline-start: auto;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--status-info-wash);
    color: var(--status-info-ink);
    font-size: 0.75rem;
    font-weight: 600;
}
.event-dash__feedback-when[b-ojpttpna7c] {
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.8rem;
}
.event-dash__feedback-comment[b-ojpttpna7c] {
    margin: 0.35rem 0 0;
    color: var(--mud-palette-text-primary, #101418);
    font-size: 0.9rem;
    line-height: 1.4;
}
/* /Components/Pages/Events.razor.rz.scp.css */
.events__toolbar[b-ob4co6jksy] { margin-block-end: 1rem; }

.events__form[b-ob4co6jksy] {
    padding: 1rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-background, #f6faf9);
    margin-block-end: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.events__form h2[b-ob4co6jksy] { margin: 0; font-size: 1.1rem; font-weight: 600; }

.events__form label[b-ob4co6jksy] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.events__form label > span[b-ob4co6jksy] { font-weight: 500; }

.events__form input[b-ob4co6jksy],
.events__form select[b-ob4co6jksy],
.events__form textarea[b-ob4co6jksy] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-inputs, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #101418);
    font: inherit;
}

.events__row[b-ob4co6jksy] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }

.events__field[b-ob4co6jksy] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.events__field > span[b-ob4co6jksy] { font-weight: 500; }
.events__field input[b-ob4co6jksy] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-inputs, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #101418);
    font: inherit;
}

.events__form-actions[b-ob4co6jksy] { display: flex; gap: 0.5rem; }

.events__list[b-ob4co6jksy] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.events__item[b-ob4co6jksy] {
    display: grid;
    grid-template-columns: 2fr 2fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
}

.events__item-title[b-ob4co6jksy] { font-weight: 600; }
.events__item-when[b-ob4co6jksy] { color: var(--mud-palette-text-secondary, #526670); }

.events__filter[b-ob4co6jksy] { margin-block-end: 0.75rem; }
.events__filter label[b-ob4co6jksy] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; max-width: 240px; }
.events__filter label > span[b-ob4co6jksy] { font-weight: 500; }
.events__filter select[b-ob4co6jksy] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-inputs, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #101418);
    font: inherit;
}

.events__item--card[b-ob4co6jksy] {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.5rem;
    padding: 0.85rem 1rem 0.85rem 1.15rem;
    border-inline-start-width: 4px;
    border-inline-start-color: var(--mud-palette-lines-default, #d0d7d3);
    transition: box-shadow 120ms ease-in-out, transform 120ms ease-in-out, border-color 120ms ease-in-out;
    /* The whole card is one clickable object, so say so everywhere on it, not only on hover. */
    cursor: pointer;
}

/* Bug D: accent border by publish state uses tenant-palette tokens, not hard-coded hex.
   Draft = surface (subdued), Published = tenant primary, Closed = tenant warning. */
.events__item--draft[b-ob4co6jksy]     { border-inline-start-color: var(--mud-palette-lines-inputs, var(--mud-palette-lines-default)); }
.events__item--published[b-ob4co6jksy] { border-inline-start-color: var(--mud-palette-primary); }
.events__item--closed[b-ob4co6jksy]    { border-inline-start-color: var(--mud-palette-warning); }

/* Bug E: subtle lift on hover + tenant-token border cue. Cursor pointer signals the whole card
   is clickable. */
.events__item--card:hover[b-ob4co6jksy],
.events__item--card:focus-within[b-ob4co6jksy] {
    box-shadow: 0 4px 18px rgba(16, 20, 24, 0.08);
    transform: translateY(-1px);
    border-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* Stretched link covering the whole card. Every interactive control sits above it via z-index. */
.events__item-link[b-ob4co6jksy] {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}
.events__item-link:focus-visible[b-ob4co6jksy] {
    outline: 2px solid var(--mud-palette-primary, #1C4E4F);
    outline-offset: 2px;
}
/* Raised above the stretched link so they render legibly, and CLICK-THROUGH so the link still
   gets the click. Raising them without pointer-events: none is what made the card feel dead: the
   title, the date line, the chips and the stat blocks swallowed every click and only the empty
   gaps between them reached the anchor. Anything raised above the link that is not a real control
   needs this, the thumbnail included. */
.events__item-title[b-ob4co6jksy],
.events__item-when[b-ob4co6jksy],
.events__row-main[b-ob4co6jksy],
.events__row-badges[b-ob4co6jksy],
.events__row-stats[b-ob4co6jksy],
.events__item-thumb[b-ob4co6jksy] {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* The one exception: the row's real controls. Copy and Open do their own jobs and already stop
   the click from bubbling to the card. */
.events__row-actions[b-ob4co6jksy] {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

/* Bug C: the Open affordance is now the real anchor (its own click target sits above the
   stretched card link with pointer-events: auto). Bug D: hover uses the tenant palette's
   darken token, never a hard-coded green literal. */
.events__open-affordance[b-ob4co6jksy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    pointer-events: auto;
    transition: background-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}
.events__item--card:hover .events__open-affordance[b-ob4co6jksy],
.events__open-affordance:hover[b-ob4co6jksy],
.events__open-affordance:focus-visible[b-ob4co6jksy] {
    background: var(--mud-palette-primary-darken);
    box-shadow: 0 2px 6px rgba(16, 20, 24, 0.08);
}

.events__row-main[b-ob4co6jksy] { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.events__row-meta[b-ob4co6jksy] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; }
.events__row-actions[b-ob4co6jksy] { display: flex; gap: 0.5rem; }

.events__stat[b-ob4co6jksy] {
    color: var(--mud-palette-text-secondary, #526670);
    background: var(--mud-palette-background, #f6faf9);
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
}

.events__pill[b-ob4co6jksy] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
}

.events__pill--live[b-ob4co6jksy] { background: var(--status-positive-wash); color: var(--status-positive-ink); }
.events__pill--soon[b-ob4co6jksy] { background: var(--status-info-wash); color: var(--status-info-ink); }
.events__pill--past[b-ob4co6jksy] { background: var(--status-neutral-wash); color: var(--status-neutral-ink); }

.events__item-state[b-ob4co6jksy] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.events__item-state--draft[b-ob4co6jksy] { background: var(--status-neutral-wash); color: var(--status-neutral-ink); }
.events__item-state--published[b-ob4co6jksy] { background: var(--status-positive-wash); color: var(--status-positive-ink); }
.events__item-state--closed[b-ob4co6jksy] { background: var(--status-warning-wash); color: var(--status-warning-ink); }

.events__row-badges[b-ob4co6jksy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.events__row-stats[b-ob4co6jksy] {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 0.75rem;
    padding: 0.5rem 0 0.25rem;
    border-block-start: 1px solid var(--mud-palette-lines-default, #d0d7d3);
}

.events__stat-cell[b-ob4co6jksy] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.events__stat-label[b-ob4co6jksy] {
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.events__stat-value[b-ob4co6jksy] {
    color: var(--mud-palette-text-primary, #101418);
    font-weight: 600;
    font-size: 1rem;
}

.events__row-actions[b-ob4co6jksy] {
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}
/* Bug E: bigger scannable title, subdued meta line, extra breathing room in the card body. */
.events__item-title[b-ob4co6jksy] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.events__item-when[b-ob4co6jksy] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}
.events__item--card[b-ob4co6jksy] {
    padding-block: 1rem;
}
.events__row-badges[b-ob4co6jksy] { justify-content: flex-start; }

/* Cover-image thumbnail on the left of the row when Event.Image is set. Decorative (alt="")
   and lives inside the stretched-link card, so it does not offer its own click target. */
.events__item--has-thumb[b-ob4co6jksy] {
    padding-left: 0.85rem;
}

.events__item-thumb[b-ob4co6jksy] {
    display: block;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 6px;
    background-color: var(--mud-palette-background-grey, #F6FAF9);
    margin-bottom: 0.25rem;
}

/* /Components/Pages/ExhibitorHome.razor.rz.scp.css */
/* ExhibitorHome scoped CSS. The card layout is shared conceptually with MyEvents; each page
   owns its rules so a tweak to the exhibitor home does not silently move MyEvents. */

/* ---- Stat tiles ---- */

.exhibitor-stats[b-pptaquuv1t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.exhibitor-stat[b-pptaquuv1t] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #D7E7E1);
    border-radius: 10px;
    min-height: 5rem;
}

.exhibitor-stat__value[b-pptaquuv1t] {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--mud-palette-primary, #1C4E4F);
}

.exhibitor-stat__label[b-pptaquuv1t] {
    margin-top: 0.15rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, #526670);
}

/* ---- Sections and grid ---- */

.exhibitor-section[b-pptaquuv1t] {
    margin-bottom: 2rem;
}

.exhibitor-section--past[b-pptaquuv1t] {
    opacity: 0.92;
}

.exhibitor-section__head[b-pptaquuv1t] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.exhibitor-section__heading[b-pptaquuv1t] {
    margin: 0;
}

.exhibitor-section__hint[b-pptaquuv1t] {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, #526670);
}

/* Two-column grid so card cover images stay at a sensible aspect ratio on wide screens; falls
   to one column on narrow. Matches the shape the exhibitor asked for: an even, browsable list. */
.exhibitor-grid[b-pptaquuv1t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* ---- Card ---- */

.exhibitor-card[b-pptaquuv1t] {
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #D7E7E1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.08s ease-in-out, box-shadow 0.08s ease-in-out;
}

.exhibitor-card:hover[b-pptaquuv1t] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.exhibitor-card--past[b-pptaquuv1t] {
    background: var(--mud-palette-background-grey, #F6FAF9);
}

/* Card banner. cover keeps the event image filling the tile without distorting aspect ratio;
   a placeholder gradient renders when the organiser has not uploaded one. */
.exhibitor-card__image[b-pptaquuv1t] {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--mud-palette-background-grey, #F6FAF9);
}

.exhibitor-card__image--placeholder[b-pptaquuv1t] {
    background: linear-gradient(135deg, #79A682 0%, #B6D2AD 100%);
}

/* Venue-logo badge sits bottom-right on the banner. White pill so a transparent PNG stays
   legible on dark event covers. Larger than the card variant on the shared inbox to keep it
   readable at the smaller card size on this grid. */
.exhibitor-card__logo[b-pptaquuv1t] {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.exhibitor-card__logo img[b-pptaquuv1t] {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
}

.exhibitor-card__badge[b-pptaquuv1t] {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.exhibitor-card__badge--pending[b-pptaquuv1t] {
    background: #F2B949; /* Mimosa */
    color: #142828; /* Gunmetal */
}

.exhibitor-card__content[b-pptaquuv1t] {
    padding: 1rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
}

.exhibitor-card__title-link[b-pptaquuv1t] {
    text-decoration: none;
    color: inherit;
}

.exhibitor-card__title-link:hover .exhibitor-card__title[b-pptaquuv1t] {
    color: var(--mud-palette-primary, #1C4E4F);
}

.exhibitor-card__title[b-pptaquuv1t] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
}

.exhibitor-card__venue[b-pptaquuv1t] {
    margin: 0;
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.9rem;
    font-weight: 500;
}

.exhibitor-card__when[b-pptaquuv1t] {
    margin: 0;
    color: var(--mud-palette-text-primary, #101418);
    font-size: 0.9rem;
}

.exhibitor-card__status[b-pptaquuv1t] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.exhibitor-card__status-item[b-pptaquuv1t] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary, #101418);
}

.exhibitor-card__status-item--ok[b-pptaquuv1t] {
    color: #1C4E4F; /* Brunswick Green */
}

.exhibitor-card__status-item--todo[b-pptaquuv1t] {
    color: var(--mud-palette-text-secondary, #526670);
}

.exhibitor-card__actions[b-pptaquuv1t] {
    padding: 0.75rem 1.25rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}

/* ---- Empty state ---- */

.exhibitor-panel__empty[b-pptaquuv1t] {
    padding: 1.5rem;
    text-align: center;
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px dashed var(--mud-palette-lines-default, #D7E7E1);
    border-radius: 10px;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
    .exhibitor-stats[b-pptaquuv1t] {
        grid-template-columns: repeat(3, 1fr);
    }

    .exhibitor-stat__value[b-pptaquuv1t] {
        font-size: 1.5rem;
    }
}

@media (max-width: 720px) {
            .exhibitor-stats[b-pptaquuv1t] {
        grid-template-columns: 1fr 1fr;
    }

    .exhibitor-stats .exhibitor-stat:last-child[b-pptaquuv1t] {
        grid-column: 1 / -1;
    }

    .exhibitor-grid[b-pptaquuv1t] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Find.razor.rz.scp.css */
.find-exhibitor[b-27xg8d4hdc] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.find-exhibitor__toggle[b-27xg8d4hdc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font-size: 0.875rem;
}

.find-exhibitor__toggle:hover[b-27xg8d4hdc] {
    background: var(--mud-palette-background-grey);
}

.find-exhibitor__badge[b-27xg8d4hdc] {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.find-exhibitor__panel[b-27xg8d4hdc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem 1rem;
    padding: 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.find-exhibitor__field[b-27xg8d4hdc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.find-exhibitor__check[b-27xg8d4hdc] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
}

.find-exhibitor__clear[b-27xg8d4hdc] {
    grid-column: 1 / -1;
    background: none;
    border: none;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-align: left;
    padding: 0;
    font-size: 0.875rem;
}

/* ---- Refine panel (a native <details>, so the disclosure chevron and open state are CSS-only) ---- */
.finder-refine[b-27xg8d4hdc] {
    margin-block-end: var(--gap-lg, 1.5rem);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.finder-refine__summary[b-27xg8d4hdc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    font-weight: 500;
}

.finder-refine__summary[b-27xg8d4hdc]::-webkit-details-marker {
    display: none;
}

.finder-refine__count[b-27xg8d4hdc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.75rem;
}

.finder-refine__chevron[b-27xg8d4hdc] {
    margin-inline-start: auto;
    transition: transform 0.15s ease-in-out;
}

.finder-refine[open] .finder-refine__chevron[b-27xg8d4hdc] {
    transform: rotate(180deg);
}

.finder-refine__body[b-27xg8d4hdc] {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-block-start: 1rem;
}

.finder-criteria[b-27xg8d4hdc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

.finder-criteria__clear[b-27xg8d4hdc] {
    align-self: end;
}

/* ---- Legend and summary line above the results ---- */
.avail-legend[b-27xg8d4hdc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-block-end: 0.75rem;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.avail-legend__item[b-27xg8d4hdc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.avail-swatch[b-27xg8d4hdc] {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
}

.avail-swatch--free[b-27xg8d4hdc] { background: var(--status-positive-ink); }
.avail-swatch--filling[b-27xg8d4hdc] { background: var(--status-warning-ink); }
.avail-swatch--full[b-27xg8d4hdc] { background: var(--status-negative-ink); }
.avail-swatch--closed[b-27xg8d4hdc] { background: var(--status-neutral-ink); }

.finder-summary[b-27xg8d4hdc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.9rem;
}

/* ---- Buildings, each a collapsible group of room tiles ---- */
.avail-building[b-27xg8d4hdc] {
    margin-block-end: var(--gap-md, 1rem);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.avail-building__summary[b-27xg8d4hdc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
}

.avail-building__summary[b-27xg8d4hdc]::-webkit-details-marker {
    display: none;
}

.avail-building__name[b-27xg8d4hdc] {
    font-weight: 500;
}

.avail-building__count[b-27xg8d4hdc] {
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.85rem;
}

.avail-building__stats[b-27xg8d4hdc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-inline-start: auto;
}

.avail-stat[b-27xg8d4hdc] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.avail-stat--free[b-27xg8d4hdc] { color: var(--status-positive-ink); background: var(--status-positive-wash); }
.avail-stat--filling[b-27xg8d4hdc] { color: var(--status-warning-ink); background: var(--status-warning-wash); }
.avail-stat--full[b-27xg8d4hdc] { color: var(--status-negative-ink); background: var(--status-negative-wash); }
.avail-stat--closed[b-27xg8d4hdc] { color: var(--status-neutral-ink); background: var(--status-neutral-wash); }

.avail-building__chevron[b-27xg8d4hdc] {
    transition: transform 0.15s ease-in-out;
}

.avail-building[open] .avail-building__chevron[b-27xg8d4hdc] {
    transform: rotate(180deg);
}

.avail-grid[b-27xg8d4hdc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.75rem;
    padding: 0 1rem 1rem;
}

/* ---- Room tiles ---- */
.avail-tile[b-27xg8d4hdc] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background, #fff);
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.avail-tile:hover[b-27xg8d4hdc],
.avail-tile:focus-visible[b-27xg8d4hdc] {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
    outline: none;
}

.avail-tile__top[b-27xg8d4hdc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.avail-tile__name[b-27xg8d4hdc] {
    font-weight: 500;
}

.avail-tile__dot[b-27xg8d4hdc] {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    margin-block-start: 0.25rem;
    border-radius: 999px;
}

.avail-tile--free .avail-tile__dot[b-27xg8d4hdc] { background: var(--status-positive-ink); }
.avail-tile--filling .avail-tile__dot[b-27xg8d4hdc] { background: var(--status-warning-ink); }
.avail-tile--full .avail-tile__dot[b-27xg8d4hdc] { background: var(--status-negative-ink); }
.avail-tile--closed .avail-tile__dot[b-27xg8d4hdc] { background: var(--status-neutral-ink); }

.avail-tile__seats[b-27xg8d4hdc] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.8rem;
}

.avail-tile__bar[b-27xg8d4hdc] {
    position: relative;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--status-positive-wash);
    overflow: hidden;
}

.avail-tile__bar-closed[b-27xg8d4hdc] {
    display: block;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, var(--status-neutral-wash) 0, var(--status-neutral-wash) 4px, transparent 4px, transparent 8px);
}

.avail-tile__seg[b-27xg8d4hdc] {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--status-negative-ink);
}

.avail-tile__label[b-27xg8d4hdc] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.finder-when[b-27xg8d4hdc] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
}

.finder-when--free[b-27xg8d4hdc] { color: var(--status-positive-ink); }
.finder-when--busy[b-27xg8d4hdc] { color: var(--status-negative-ink); }

/* ---- Room detail popup ---- */
.avail-detail__head[b-27xg8d4hdc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 0.75rem;
}

.avail-detail__status[b-27xg8d4hdc] {
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.avail-detail__status--free[b-27xg8d4hdc] { color: var(--status-positive-ink); background: var(--status-positive-wash); }
.avail-detail__status--filling[b-27xg8d4hdc] { color: var(--status-warning-ink); background: var(--status-warning-wash); }
.avail-detail__status--full[b-27xg8d4hdc] { color: var(--status-negative-ink); background: var(--status-negative-wash); }
.avail-detail__status--closed[b-27xg8d4hdc] { color: var(--status-neutral-ink); background: var(--status-neutral-wash); }

.find-slots[b-27xg8d4hdc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-end: 1rem;
    text-align: left;
}

.find-slot[b-27xg8d4hdc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    font-size: 0.85rem;
}

.find-slot__time[b-27xg8d4hdc] {
    font-weight: 500;
}

.find-slot__who[b-27xg8d4hdc] {
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.find-slot--beggable[b-27xg8d4hdc] {
    align-items: flex-start;
    background: var(--mud-palette-surface);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.find-slot--beggable:hover[b-27xg8d4hdc],
.find-slot--beggable:focus-visible[b-27xg8d4hdc] {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
    outline: none;
}

.find-slot__cta[b-27xg8d4hdc] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--mud-palette-primary);
    font-size: 0.8rem;
}
/* /Components/Pages/FindVisual.razor.rz.scp.css */
.visual-picker__toolbar[b-sjo59t0c5b] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-block-end: 1rem;
}

.visual-picker__field[b-sjo59t0c5b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.visual-picker__field > span[b-sjo59t0c5b] {
    font-weight: 500;
}

.visual-picker__field input[b-sjo59t0c5b],
.visual-picker__field select[b-sjo59t0c5b] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-inputs, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #101418);
    font: inherit;
}

.visual-picker__frame[b-sjo59t0c5b] {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
}

/* The plan image scales to fit its container: an inline-block frame would
   shrink-to-fit the image's natural (upload) width, so a wide upload could
   escape the page even with max-width: 100% on the img. The frame is now
   block-level with width 100%, and the img is fluid inside it. Hotspots
   use normalised (0-1) coordinates on the rendered image box, so scaling
   the image scales the hotspots with it. */
.visual-picker__plan[b-sjo59t0c5b] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.visual-picker__overlay[b-sjo59t0c5b] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.visual-picker__rect[b-sjo59t0c5b] {
    fill-opacity: 0.28;
    stroke-width: 0.35;
    stroke-linejoin: round;
}

.visual-picker__rect--free[b-sjo59t0c5b] { fill: var(--status-positive-wash); stroke: var(--status-positive-ink); }
.visual-picker__rect--busy[b-sjo59t0c5b] { fill: var(--status-negative-wash); stroke: var(--status-negative-ink); }
.visual-picker__rect--needs-approval[b-sjo59t0c5b] { fill: var(--status-warning-wash); stroke: var(--status-warning-ink); }
.visual-picker__rect--out-of-use[b-sjo59t0c5b] { fill: var(--status-neutral-wash); stroke: var(--status-neutral-ink); }
.visual-picker__rect--held[b-sjo59t0c5b] { fill: #F2B949; stroke: #8a6100; }

/* Polygon hotspots share the rect status classes for fill/stroke; the button that sits over
   a polygon is transparent (only its label and focus ring show) because the polygon shape is
   painted in the SVG overlay above. Compound selector so specificity beats the status classes
   below (--free/--busy/etc.), which are single-class rules that would otherwise reinstate the
   rectangular border and wash. */
.visual-picker__hotspot.visual-picker__hotspot--polygon[b-sjo59t0c5b] {
    background: transparent;
    border-color: transparent;
}

.visual-picker__buttons[b-sjo59t0c5b] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.visual-picker__hotspot[b-sjo59t0c5b] {
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    border: 2px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.08s ease-in-out, box-shadow 0.08s ease-in-out;
}

.visual-picker__hotspot:hover[b-sjo59t0c5b],
.visual-picker__hotspot:focus-visible[b-sjo59t0c5b] {
    transform: scale(1.02);
    box-shadow: 0 0 0 2px var(--mud-palette-primary, #1c4e4f);
    outline: none;
}

/* A polygon hotspot's button is clipped to its true outline (see FindVisual.razor's
   PolygonClipPath), so an outer box-shadow ring would be clipped away outside the shape and
   show nothing. Use an inset ring instead, which clips cleanly to the hand-drawn outline rather
   than the rectangular bounding box the un-clipped ring used to draw around it. */
.visual-picker__hotspot.visual-picker__hotspot--polygon:hover[b-sjo59t0c5b],
.visual-picker__hotspot.visual-picker__hotspot--polygon:focus-visible[b-sjo59t0c5b] {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary, #1c4e4f);
}

@media (prefers-reduced-motion: reduce) {
    .visual-picker__hotspot:hover[b-sjo59t0c5b],
    .visual-picker__hotspot:focus-visible[b-sjo59t0c5b] {
        transform: none;
    }
}

.visual-picker__hotspot--free[b-sjo59t0c5b] { border-color: var(--status-positive-ink); background: color-mix(in srgb, var(--status-positive-wash) 60%, transparent); }
.visual-picker__hotspot--busy[b-sjo59t0c5b] { border-color: var(--status-negative-ink); background: color-mix(in srgb, var(--status-negative-wash) 60%, transparent); }
.visual-picker__hotspot--needs-approval[b-sjo59t0c5b] { border-color: var(--status-warning-ink); background: color-mix(in srgb, var(--status-warning-wash) 60%, transparent); }
.visual-picker__hotspot--out-of-use[b-sjo59t0c5b] { border-color: var(--status-neutral-ink); background: repeating-linear-gradient(45deg, var(--status-neutral-wash) 0, var(--status-neutral-wash) 6px, transparent 6px, transparent 12px); }
.visual-picker__hotspot--held[b-sjo59t0c5b] { border-color: #8a6100; background: color-mix(in srgb, #F2B949 60%, transparent); cursor: not-allowed; }
.visual-picker__hotspot--held:hover[b-sjo59t0c5b],
.visual-picker__hotspot--held:focus-visible[b-sjo59t0c5b] { transform: none; box-shadow: none; }

.visual-picker__hotspot-icon[b-sjo59t0c5b] {
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1;
}

.visual-picker__hotspot-label[b-sjo59t0c5b] {
    font-size: 0.85em;
    text-shadow: 0 1px 2px var(--mud-palette-surface, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.visual-picker__legend[b-sjo59t0c5b] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block-start: 1rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, #526670);
}

.visual-picker__legend-item[b-sjo59t0c5b] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.visual-picker__swatch[b-sjo59t0c5b] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    border: 2px solid transparent;
}

.visual-picker__swatch--free[b-sjo59t0c5b] { border-color: var(--status-positive-ink); background: var(--status-positive-wash); }
.visual-picker__swatch--busy[b-sjo59t0c5b] { border-color: var(--status-negative-ink); background: var(--status-negative-wash); }
.visual-picker__swatch--needs-approval[b-sjo59t0c5b] { border-color: var(--status-warning-ink); background: var(--status-warning-wash); }
.visual-picker__swatch--out-of-use[b-sjo59t0c5b] { border-color: var(--status-neutral-ink); background: repeating-linear-gradient(45deg, var(--status-neutral-wash) 0, var(--status-neutral-wash) 4px, transparent 4px, transparent 8px); }
.visual-picker__swatch--held[b-sjo59t0c5b] { border-color: #8a6100; background: #F2B949; }

.visual-picker__fallback[b-sjo59t0c5b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-block-start: 0.5rem;
}

.visual-picker__card[b-sjo59t0c5b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 2px solid transparent;
    background: var(--mud-palette-surface, #fff);
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: transform 0.08s ease-in-out, box-shadow 0.08s ease-in-out;
}

.visual-picker__card:hover[b-sjo59t0c5b],
.visual-picker__card:focus-visible[b-sjo59t0c5b] {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px var(--mud-palette-primary, #1c4e4f);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .visual-picker__card:hover[b-sjo59t0c5b],
    .visual-picker__card:focus-visible[b-sjo59t0c5b] {
        transform: none;
    }
}

.visual-picker__card.free[b-sjo59t0c5b] { border-color: var(--status-positive-ink); }
.visual-picker__card.busy[b-sjo59t0c5b] { border-color: var(--status-negative-ink); }
.visual-picker__card.needs-approval[b-sjo59t0c5b] { border-color: var(--status-warning-ink); }
.visual-picker__card.out-of-use[b-sjo59t0c5b] { border-color: var(--status-neutral-ink); }
.visual-picker__card.held[b-sjo59t0c5b] { border-color: #8a6100; background: color-mix(in srgb, #F2B949 40%, var(--mud-palette-surface, #fff)); cursor: not-allowed; }

.visual-picker__card-name[b-sjo59t0c5b] {
    font-weight: 600;
    font-size: 1rem;
}

.visual-picker__card-status[b-sjo59t0c5b] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #526670);
}

.find-exhibitor[b-sjo59t0c5b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

.find-exhibitor__toggle[b-sjo59t0c5b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    align-self: flex-start;
}

.find-exhibitor__toggle:hover[b-sjo59t0c5b] {
    background: var(--mud-palette-background-grey);
}

.find-exhibitor__badge[b-sjo59t0c5b] {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.find-exhibitor__panel[b-sjo59t0c5b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem 1rem;
    padding: 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.find-exhibitor__field[b-sjo59t0c5b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.find-exhibitor__check[b-sjo59t0c5b] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
}

.find-exhibitor__clear[b-sjo59t0c5b] {
    grid-column: 1 / -1;
    background: none;
    border: none;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-align: left;
    padding: 0;
    font-size: 0.875rem;
}

.visual-picker__empty[b-sjo59t0c5b] {
    padding: 1.25rem;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.visual-picker__empty--overlay[b-sjo59t0c5b] {
    position: absolute;
    inset: auto 1rem 1rem;
    background: color-mix(in srgb, var(--mud-palette-surface, #fff) 92%, transparent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
/* /Components/Pages/FindVisualBuildings.razor.rz.scp.css */
.find-visual__buildings[b-vcg26h2hdp] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.find-visual__building[b-vcg26h2hdp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
}

.find-visual__label[b-vcg26h2hdp] { display: flex; flex-direction: column; }
.find-visual__site[b-vcg26h2hdp] { color: var(--mud-palette-text-secondary, #526670); font-size: 0.9rem; }
.find-visual__no-plan[b-vcg26h2hdp] { color: var(--mud-palette-text-secondary, #526670); font-size: 0.9rem; }
/* /Components/Pages/FloorPlanEditor.razor.rz.scp.css */
.floor-plan-editor__crumb[b-zpbtw9zxl5] {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, #526670);
    margin-block-end: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.floor-plan-editor__preview[b-zpbtw9zxl5] {
    margin-inline-start: auto;
}

.floor-plan-editor__section[b-zpbtw9zxl5] {
    margin-block-end: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
}

.floor-plan-editor__section h2[b-zpbtw9zxl5] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.floor-plan-editor__hint[b-zpbtw9zxl5] {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, #526670);
}

.floor-plan-editor__file[b-zpbtw9zxl5] {
    display: block;
    margin-block-end: 0.75rem;
}

.floor-plan-editor__caption[b-zpbtw9zxl5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 400px;
    font-size: 0.9rem;
}

.floor-plan-editor__caption input[b-zpbtw9zxl5] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-inputs, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #101418);
    font: inherit;
}

.floor-plan-editor__versions[b-zpbtw9zxl5] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.floor-plan-editor__version[b-zpbtw9zxl5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-background, #f6faf9);
}

.floor-plan-editor__version--active[b-zpbtw9zxl5] {
    border-color: var(--status-positive-ink);
    background: color-mix(in srgb, var(--status-positive-wash) 40%, transparent);
}

.floor-plan-editor__version-label[b-zpbtw9zxl5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.floor-plan-editor__badge[b-zpbtw9zxl5] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary-text, #F6FAF9);
    background: var(--status-positive-ink);
    border-radius: 999px;
}

.floor-plan-editor__version-caption[b-zpbtw9zxl5] {
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.9rem;
}

.floor-plan-editor__version-dims[b-zpbtw9zxl5] {
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.85rem;
}

.floor-plan-editor__version-actions[b-zpbtw9zxl5] {
    display: inline-flex;
    gap: 0.5rem;
}

.floor-plan-editor__version-picker[b-zpbtw9zxl5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    margin-block-end: 0.75rem;
    max-width: 400px;
}

.floor-plan-editor__version-picker > span[b-zpbtw9zxl5] { font-weight: 500; }

.floor-plan-editor__version-picker select[b-zpbtw9zxl5] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-inputs, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #101418);
    font: inherit;
}

.floor-plan-editor__stage[b-zpbtw9zxl5] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .floor-plan-editor__stage[b-zpbtw9zxl5] {
        grid-template-columns: 1fr;
    }
}

.floor-plan-editor__frame[b-zpbtw9zxl5] {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
}

/* Editor plan mirrors the picker: block-level container plus a fluid img,
   so a wide upload cannot escape the stage. */
.floor-plan-editor__plan[b-zpbtw9zxl5] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.floor-plan-editor__overlay[b-zpbtw9zxl5] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.floor-plan-editor__hotspot[b-zpbtw9zxl5] {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-primary, #1c4e4f) 20%, transparent);
    border: 2px solid var(--mud-palette-primary, #1c4e4f);
    color: var(--mud-palette-primary-darken, #143a3a);
    font: inherit;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.floor-plan-editor__hotspot:focus-visible[b-zpbtw9zxl5] {
    outline: 2px solid var(--mud-palette-secondary, #79a682);
    outline-offset: 2px;
}

.floor-plan-editor__hotspot--editing[b-zpbtw9zxl5] {
    border-color: var(--status-warning-ink);
    background: color-mix(in srgb, var(--status-warning-wash) 60%, transparent);
}

.floor-plan-editor__hotspot-label[b-zpbtw9zxl5] {
    font-size: 0.8em;
    padding: 0 0.25rem;
    text-shadow: 0 1px 2px var(--mud-palette-surface, #fff);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floor-plan-editor__draft[b-zpbtw9zxl5] {
    position: absolute;
    background: color-mix(in srgb, var(--status-warning-wash) 50%, transparent);
    border: 2px dashed var(--status-warning-ink);
    border-radius: 4px;
    pointer-events: none;
}

/* The placement preview rectangle accepts the pointer so it can be dragged around the plan.
   Polygon drafts stay non-interactive (their draft renders inside an SVG overlay). */
.floor-plan-editor__draft--draggable[b-zpbtw9zxl5] {
    pointer-events: auto;
    cursor: move;
}

.floor-plan-editor__draft--draggable:active[b-zpbtw9zxl5] {
    cursor: grabbing;
}

.floor-plan-editor__form[b-zpbtw9zxl5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-background, #f6faf9);
}

.floor-plan-editor__form h3[b-zpbtw9zxl5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.floor-plan-editor__form label[b-zpbtw9zxl5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.floor-plan-editor__form label > span[b-zpbtw9zxl5] {
    font-weight: 500;
}

.floor-plan-editor__form input[b-zpbtw9zxl5],
.floor-plan-editor__form select[b-zpbtw9zxl5] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-inputs, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #101418);
    font: inherit;
}

.floor-plan-editor__form input[type="range"][b-zpbtw9zxl5] {
    padding: 0;
}

.floor-plan-editor__form-actions[b-zpbtw9zxl5] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.floor-plan-editor__coord[b-zpbtw9zxl5] {
    display: grid;
    grid-template-columns: 1fr 5.5rem;
    gap: 0.5rem;
    align-items: end;
}

.floor-plan-editor__coord-number[b-zpbtw9zxl5] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-inputs, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #101418);
    font: inherit;
    width: 100%;
}

.floor-plan-editor__overlay--drawing[b-zpbtw9zxl5] {
    cursor: crosshair;
    pointer-events: auto;
}

.floor-plan-editor__polygon[b-zpbtw9zxl5] {
    fill: color-mix(in srgb, var(--mud-palette-primary, #1c4e4f) 20%, transparent);
    stroke: var(--mud-palette-primary, #1c4e4f);
    stroke-width: 0.4;
    vector-effect: non-scaling-stroke;
}

.floor-plan-editor__polygon--editing[b-zpbtw9zxl5] {
    fill: color-mix(in srgb, var(--status-warning-wash) 60%, transparent);
    stroke: var(--status-warning-ink);
}

.floor-plan-editor__polygon-draft[b-zpbtw9zxl5] {
    fill: color-mix(in srgb, var(--status-warning-wash) 40%, transparent);
    stroke: var(--status-warning-ink);
    stroke-width: 0.4;
    stroke-dasharray: 1 1;
    vector-effect: non-scaling-stroke;
}

.floor-plan-editor__polygon-vertex[b-zpbtw9zxl5] {
    fill: var(--status-warning-ink);
    stroke: var(--mud-palette-surface, #fff);
    stroke-width: 0.2;
    vector-effect: non-scaling-stroke;
}

.floor-plan-editor__hotspot--polygon[b-zpbtw9zxl5] {
    background: transparent !important;
    border: none !important;
}

.floor-plan-editor__hotspot--draggable[b-zpbtw9zxl5] {
    cursor: move;
    touch-action: none;
}

.floor-plan-editor__hotspot--draggable:active[b-zpbtw9zxl5] {
    cursor: grabbing;
}

.floor-plan-editor__hotspot--dragging[b-zpbtw9zxl5] {
    outline: 2px solid var(--status-warning-ink);
    outline-offset: 1px;
}

.floor-plan-editor__polygon--dragging[b-zpbtw9zxl5] {
    stroke: var(--status-warning-ink);
    stroke-width: 0.6;
}

/* Right rail wraps the Add-hotspot form and the Placed-hotspots list, stacking them in the
   column that used to hold the form only. */
.floor-plan-editor__rail[b-zpbtw9zxl5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.floor-plan-editor__placed[b-zpbtw9zxl5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
}

.floor-plan-editor__placed h3[b-zpbtw9zxl5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.floor-plan-editor__placed-summary[b-zpbtw9zxl5] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5754);
}

.floor-plan-editor__placed-list[b-zpbtw9zxl5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 20rem;
    overflow-y: auto;
}

.floor-plan-editor__placed-row[b-zpbtw9zxl5] {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 2fr) minmax(0, 2fr) 2.5rem auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--mud-palette-lines-default, #d0d7d3);
    border-left: 3px solid transparent;
    border-radius: 4px;
    background: var(--mud-palette-background, #f6faf9);
    font-size: 0.9rem;
    cursor: pointer;
}

.floor-plan-editor__placed-row:hover[b-zpbtw9zxl5] {
    background: color-mix(in srgb, var(--mud-palette-lines-default, #d0d7d3) 30%, var(--mud-palette-background, #f6faf9));
}

.floor-plan-editor__placed-row--editing[b-zpbtw9zxl5] {
    border-color: var(--status-warning-ink);
    background: color-mix(in srgb, var(--status-warning-wash) 40%, transparent);
}

.floor-plan-editor__placed-row--selected[b-zpbtw9zxl5] {
    border-left-color: var(--mud-palette-primary, #1c4e4f);
}

.floor-plan-editor__placed-index[b-zpbtw9zxl5] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #4a5754);
    text-align: right;
}

.floor-plan-editor__placed-label[b-zpbtw9zxl5] {
    min-width: 0;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--mud-palette-lines-inputs, #d0d7d3);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #101418);
    font: inherit;
}

.floor-plan-editor__placed-space[b-zpbtw9zxl5] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floor-plan-editor__placed-shape[b-zpbtw9zxl5] {
    justify-self: center;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--mud-palette-lines-default, #d0d7d3);
    color: var(--mud-palette-text-primary, #101418);
    font-size: 0.75rem;
}

.floor-plan-editor__placed-actions[b-zpbtw9zxl5] {
    display: inline-flex;
    gap: 0.25rem;
}

/* Focus-and-flash outline pulse: a placed-hotspots row hovered or focused pulses the linked
   hotspot on the plan for about one second. Reduced motion falls back to a static outline. */
.floor-plan-editor__hotspot--flash[b-zpbtw9zxl5] {
    outline: 2px solid var(--status-warning-ink);
    outline-offset: 2px;
    animation: floor-plan-editor-flash-b-zpbtw9zxl5 1s ease-out 1;
}

.floor-plan-editor__polygon--flash[b-zpbtw9zxl5] {
    stroke: var(--status-warning-ink);
    stroke-width: 0.6;
    animation: floor-plan-editor-flash-poly-b-zpbtw9zxl5 1s ease-out 1;
}

@keyframes floor-plan-editor-flash-b-zpbtw9zxl5 {
    0%   { outline-color: color-mix(in srgb, var(--status-warning-ink) 90%, transparent); }
    50%  { outline-color: color-mix(in srgb, var(--status-warning-ink) 20%, transparent); }
    100% { outline-color: color-mix(in srgb, var(--status-warning-ink) 90%, transparent); }
}

@keyframes floor-plan-editor-flash-poly-b-zpbtw9zxl5 {
    0%   { stroke-opacity: 0.9; }
    50%  { stroke-opacity: 0.3; }
    100% { stroke-opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .floor-plan-editor__hotspot--flash[b-zpbtw9zxl5],
    .floor-plan-editor__polygon--flash[b-zpbtw9zxl5] {
        animation: none;
    }
}

/* A polite live region beside the plan. Off-screen but readable by assistive technology so a
   settled drag or keyboard nudge announces "moved to X, Y" without stealing focus. */
.floor-plan-editor__live[b-zpbtw9zxl5] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Pages/FoodMenus.razor.rz.scp.css */
/* Food menus administration. Everything derives from the MudBlazor palette variables and the
   shared tokens in app.css, so it survives white-labelling. */

/* Actions sit hard right, as icon buttons coloured by intent (edit primary, delete error). */
.food-actions[b-p56o6gzy1q] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    white-space: nowrap;
}

td.food-actions[b-p56o6gzy1q] {
    display: table-cell;
    text-align: right;
}

td.food-actions[b-p56o6gzy1q]  .mud-icon-button {
    padding: 6px;
}

th.food-actions-head[b-p56o6gzy1q] {
    text-align: right;
}

.food-head-left[b-p56o6gzy1q] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

/* A small marker on items that carry a picture, so the catalogue scans at a glance. */
.food-has-image[b-p56o6gzy1q] {
    vertical-align: text-bottom;
    margin-right: 4px;
    color: var(--brand-muted);
}

/* Drag-to-reorder, matching the Estate pattern. */
.food-drag[b-p56o6gzy1q] {
    display: inline-flex;
    align-items: center;
    cursor: grab;
    color: var(--brand-muted);
    touch-action: none;
}

.food-drag:active[b-p56o6gzy1q] {
    cursor: grabbing;
}

.food-reorder-cell[b-p56o6gzy1q] {
    width: 2rem;
}

.food-row--dragging[b-p56o6gzy1q] {
    opacity: 0.5;
}

.food-mode--on[b-p56o6gzy1q] {
    background: var(--brand-mint-cream, #D7E7E1);
}

/* The choose-N options editor: one bordered group holding a labelled grid (name, kcal,
   allergens, remove), the live count toward the requirement, and the add action. Colours come
   from the palette variables only, so the group survives white-labelling and dark mode. */
.food-options[b-p56o6gzy1q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border: 1px solid var(--mud-palette-lines-default, #D7E7E1);
    border-radius: 8px;
    padding: var(--space-3);
    margin-top: var(--space-2);
}

.food-options__head[b-p56o6gzy1q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.food-options__count[b-p56o6gzy1q] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #142828);
}

.food-option-grid[b-p56o6gzy1q] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 7rem minmax(0, 1.4fr) auto;
    gap: var(--space-2);
    align-items: center;
}

.food-option-grid__col[b-p56o6gzy1q] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #142828);
}

/* The per-option allergen summary reads as a full-width footnote under its row. */
.food-option-grid__allergens[b-p56o6gzy1q] {
    grid-column: 1 / -1;
    margin-top: calc(var(--space-1) * -1);
}

.food-options__foot[b-p56o6gzy1q] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.food-options__need[b-p56o6gzy1q] {
    font-size: 0.85rem;
    color: var(--mud-palette-error, #B00020);
}

/* Small screens stack each option's fields; the aria-labels keep the fields named. */
@media (max-width: 700px) {
    .food-option-grid[b-p56o6gzy1q] {
        grid-template-columns: 1fr;
    }

    .food-option-grid__col[b-p56o6gzy1q] {
        display: none;
    }
}

/* The item dialog's two navigation modes: numbered steps when adding (a wizard) and tabs when
   editing. Both list the same four sections so the mental model carries between the modes. */
.food-item-steps[b-p56o6gzy1q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.food-item-steps__step[b-p56o6gzy1q] {
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
    color: var(--brand-muted);
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 12%, transparent);
    border-radius: 999px;
}

.food-item-steps__step--on[b-p56o6gzy1q] {
    color: var(--mud-palette-primary-text, #F6FAF9);
    background: var(--mud-palette-primary, #1C4E4F);
    border-color: var(--mud-palette-primary, #1C4E4F);
    font-weight: 500;
}

.food-item-steps__step--done[b-p56o6gzy1q] {
    color: var(--mud-palette-primary, #1C4E4F);
    border-color: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 45%, transparent);
}

.food-item-tabs[b-p56o6gzy1q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--mud-palette-lines-default, #E2ECE7);
}

.food-item-tabs__tab[b-p56o6gzy1q] {
    padding: 0.45rem 1rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--brand-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.food-item-tabs__tab:hover[b-p56o6gzy1q] {
    color: var(--mud-palette-primary, #1C4E4F);
}

.food-item-tabs__tab--on[b-p56o6gzy1q] {
    color: var(--mud-palette-primary, #1C4E4F);
    font-weight: 500;
    border-bottom-color: var(--mud-palette-primary, #1C4E4F);
}
/* /Components/Pages/GatewayLog.razor.rz.scp.css */
.gatewaylog__filters[b-49swxd9333] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

.gatewaylog__list[b-49swxd9333] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
}

.gatewaylog__row[b-49swxd9333] {
    border: 1px solid var(--mud-palette-lines-default, #D7E7E1);
    border-radius: var(--radius-sm);
    background: var(--mud-palette-surface, #FFFFFF);
}

.gatewaylog__row--bad[b-49swxd9333] {
    border-color: color-mix(in srgb, #b71c1c 35%, transparent);
}

.gatewaylog__row > summary[b-49swxd9333] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.gatewaylog__op[b-49swxd9333] {
    font-weight: 500;
}

.gatewaylog__tenant[b-49swxd9333],
.gatewaylog__ms[b-49swxd9333],
.gatewaylog__when[b-49swxd9333] {
    color: var(--mud-palette-text-secondary, #4a5c58);
}

.gatewaylog__ref[b-49swxd9333] {
    font-family: ui-monospace, Consolas, monospace;
}

.gatewaylog__pill[b-49swxd9333] {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.gatewaylog__pill--ok[b-49swxd9333] {
    color: var(--status-positive-ink);
    background: var(--status-positive-wash);
}

.gatewaylog__pill--bad[b-49swxd9333] {
    color: var(--status-negative-ink);
    background: var(--status-negative-wash);
}

.gatewaylog__detail[b-49swxd9333] {
    margin: 0;
    padding: 0 0.9rem 0.9rem;
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
}

.gatewaylog__detail dd[b-49swxd9333] {
    margin: 0;
    min-width: 0;
}

.gatewaylog__detail pre[b-49swxd9333] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.8rem;
}
/* /Components/Pages/Grid.razor.rz.scp.css */
/* The availability grid is wide, so it scrolls horizontally inside its own container and never
   pushes the page body sideways. Colours derive from the brand palette. */

.grid-legend[b-96a6l0cwem] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.grid-legend__item[b-96a6l0cwem] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.grid-legend__item .grid-cell[b-96a6l0cwem] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.grid-legend__hint[b-96a6l0cwem] {
    color: #5b6b6b;
}

/* The per-user toggle for the live now-line, sitting inline with the legend keys. */
.grid-legend__toggle[b-96a6l0cwem] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    user-select: none;
}

.grid-legend__toggle input[b-96a6l0cwem] {
    accent-color: var(--brand-mimosa, #F2B949);
    cursor: pointer;
}

.grid-scroll[b-96a6l0cwem] {
    /* Scroll both ways inside a bounded box, so on a tall estate the horizontal scrollbar stays
       reachable (it used to sit far below the fold at the bottom of every room) and the header and
       room column can stay pinned while scrolling. */
    overflow: auto;
    max-height: 72vh;
    border: 1px solid var(--brand-hairline);
    border-radius: 10px;
    /* A firmer scrollbar so the horizontal scroll is discoverable, not a hairline. */
    scrollbar-width: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* The canvas holds the table and the absolutely-positioned now-line together, so the line can run
   the full height of the grid without disturbing the table layout. Width tracks the table's own. */
.grid-canvas[b-96a6l0cwem] {
    position: relative;
    width: max-content;
    min-width: 100%;
}

/* The day view's table is full width, so its canvas is too (the line runs across the room columns). */
.grid-canvas--full[b-96a6l0cwem] {
    width: 100%;
}

/* The live current-time line, placed at the real minute (see js/grid-nowline.js). In the rooms view it
   is a full-height vertical line; in the day view a full-width horizontal line. Both carry a small dot
   at the leading edge so the line reads clearly against the header or time column. */
.grid-nowline[b-96a6l0cwem] {
    position: absolute;
    background: var(--brand-mimosa, #F2B949);
    box-shadow: 0 0 6px rgba(242, 185, 73, 0.7);
    pointer-events: none;
    z-index: 4;
}

.grid-nowline--vertical[b-96a6l0cwem] {
    top: 0;
    width: 2px;
    /* height set by js/grid-nowline.js */
}

.grid-nowline--horizontal[b-96a6l0cwem] {
    left: 0;
    height: 2px;
    /* width set by js/grid-nowline.js */
}

.grid-nowline__dot[b-96a6l0cwem] {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-mimosa, #F2B949);
    box-shadow: 0 0 6px rgba(242, 185, 73, 0.8);
}

.grid-nowline--vertical .grid-nowline__dot[b-96a6l0cwem] {
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}

.grid-nowline--horizontal .grid-nowline__dot[b-96a6l0cwem] {
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
}

/* Fixed layout so every hour column is exactly the same width, whatever sits in it. A one hour
   meeting then looks the same length at any time of day. */
.grid[b-96a6l0cwem] {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
}

.grid th[b-96a6l0cwem],
.grid td[b-96a6l0cwem] {
    border-bottom: 1px solid var(--brand-hairline);
}

/* Booking blocks sit centred in their row height, not hugging the top edge. */
.grid tbody td[b-96a6l0cwem] {
    vertical-align: middle;
}

/* A subtle line on every half-hour, a firmer one on the hour, so blocks read against the axis.
   Busy and held bookings merge into spanning cells, so the hour line is drawn on the hour-start
   cells (a class, not nth-child, which no longer lines up once cells span columns). */
.grid tbody td.grid-cell[b-96a6l0cwem] {
    border-right: 1px solid var(--brand-hairline);
}

.grid tbody td.grid-cell--hour[b-96a6l0cwem] {
    border-left: 1px solid var(--brand-hairline);
}

/* Hour labels sit at the hour gridline (the left edge of the first half-hour column of the hour).
   A fixed width (with table-layout: fixed) keeps every half-hour column identical. */
.grid__time[b-96a6l0cwem] {
    width: 44px;
    padding: 0.4rem 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: #5b6b6b;
    text-align: left;
    padding-left: 0.35rem;
    white-space: nowrap;
}

.grid__time--hour[b-96a6l0cwem] {
    border-left: 1px solid var(--brand-hairline);
}

/* The room column width is a variable a booker can drag (see the corner handle and js/grid-resize.js),
   so they trade off name length against how much of the day they see. */
.grid__room[b-96a6l0cwem] {
    position: sticky;
    left: 0;
    z-index: 1;
    width: var(--room-col, 11rem);
    min-width: var(--room-col, 11rem);
    max-width: var(--room-col, 11rem);
    padding: 0.4rem 0.55rem;
    text-align: left;
    background: var(--mud-palette-surface, #fff);
    border-right: 1px solid var(--mud-palette-lines-default, var(--brand-hairline));
}

.grid__corner[b-96a6l0cwem] {
    z-index: 2;
}

/* Keep the time header pinned to the top while scrolling down the estate, and the room column pinned
   to the left while scrolling across the day. The corner sits above both so it never lets a row or a
   time column slide over it. */
.grid thead th[b-96a6l0cwem] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--mud-palette-surface, #fff);
}

.grid thead th.grid__corner[b-96a6l0cwem] {
    z-index: 4;
}

/* A draggable divider on the room column's right edge (in the corner header). */
.grid__resize[b-96a6l0cwem] {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
    touch-action: none;
}

.grid__corner[b-96a6l0cwem] {
    position: relative;
}

.grid__room-name[b-96a6l0cwem] {
    display: block;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid__room-building[b-96a6l0cwem] {
    display: block;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #5b6b6b);
}

.grid-cell[b-96a6l0cwem] {
    width: 44px;
    height: 38px;
    padding: 0;
}

/* A booking you can act on (amend your own, or beg a colleague's): pointer cursor and a gentle lift. */
.grid-cell--click[b-96a6l0cwem] {
    cursor: pointer;
}

.grid-cell--click:hover[b-96a6l0cwem] {
    filter: brightness(1.12);
}

.grid-cell--click:focus-visible[b-96a6l0cwem] {
    outline: 2px solid #F6FAF9;
    outline-offset: -3px;
}

.grid-cell--free[b-96a6l0cwem] {
    /* A faint tint of the tenant primary over the theme surface, so a free slot reads in both light
       and dark mode rather than staying a fixed pale green. */
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 7%, var(--mud-palette-surface, #fff));
    cursor: pointer;
    user-select: none;
}

.grid-cell--free:hover[b-96a6l0cwem] {
    background: var(--brand-celadon, #B6D2AD); /* a lighter tint of the tenant primary */
}

.grid-cell--free:focus-visible[b-96a6l0cwem] {
    outline: 2px solid var(--mud-palette-primary, #1C4E4F);
    outline-offset: -2px;
}

/* A slot inside the current drag selection. */
.grid-cell--selecting[b-96a6l0cwem] {
    background: var(--brand-cambridge-blue, #79A682); /* a mid tint of the tenant primary */
}

.grid-cell--busy[b-96a6l0cwem] {
    background: var(--mud-palette-primary, #1C4E4F); /* the tenant primary: a confirmed booking */
}

.grid-cell--held[b-96a6l0cwem] {
    background: #F2B949; /* Mimosa: a tentative hold */
}

/* A clear edge around every booking block, so two back-to-back bookings read as two separate
   meetings, not one unbroken bar. An inset ring in the page surface colour keeps the block's width
   and height unchanged (no layout shift) and adapts to light and dark. */
.grid-cell--busy[b-96a6l0cwem],
.grid-cell--held[b-96a6l0cwem] {
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-surface, #F6FAF9);
}

/* The owner's name inside a booking's cell, clipped to the cell so it never widens the grid. */
.grid-cell__owner[b-96a6l0cwem] {
    display: block;
    padding: 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.grid-cell--busy .grid-cell__owner[b-96a6l0cwem] {
    color: var(--mud-palette-primary-text, #F6FAF9); /* the scheme's guaranteed-contrast on-primary */
}

.grid-cell--held .grid-cell__owner[b-96a6l0cwem] {
    color: #101418; /* Carbon Wing on Mimosa */
}

/* A time already gone by today: greyed and not clickable, so the day reads as spent up to now. */
.grid-cell--past[b-96a6l0cwem] {
    background: color-mix(in srgb, var(--mud-palette-text-primary, #101418) 7%, var(--mud-palette-surface, #fff));
}

/* Outside the site's working hours: a soft hatch so it reads as "shut", distinct from a busy block. */
.grid-cell--closed[b-96a6l0cwem] {
    background: repeating-linear-gradient(45deg,
        var(--mud-palette-surface, #F1F4F3), var(--mud-palette-surface, #F1F4F3) 6px,
        var(--mud-palette-lines-default, var(--brand-hairline)) 6px, var(--mud-palette-lines-default, var(--brand-hairline)) 12px);
}

/* The current time is shown by the full-height live now-line (see .grid-nowline and js/grid-nowline.js),
   placed on the real minute. The old hour-snapped column marker was retired so the two do not double up. */

.grid-cell--outofuse[b-96a6l0cwem] {
    background: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--mud-palette-text-primary, #101418) 7%, var(--mud-palette-surface, #fff)),
        color-mix(in srgb, var(--mud-palette-text-primary, #101418) 7%, var(--mud-palette-surface, #fff)) 8px,
        color-mix(in srgb, var(--mud-palette-text-primary, #101418) 16%, var(--mud-palette-surface, #fff)) 8px,
        color-mix(in srgb, var(--mud-palette-text-primary, #101418) 16%, var(--mud-palette-surface, #fff)) 16px);
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.8rem;
    text-align: center;
    font-style: italic;
}

/* A building's band spans the full width and reads as a firm section divider between locations. */
.grid__group .grid__group-name[b-96a6l0cwem] {
    background: var(--brand-primary-lozenge); /* a tint of the tenant primary, so buildings separate clearly in both themes */
    color: var(--brand-primary-ink);
    font-weight: var(--eyebrow-weight);
    font-size: var(--eyebrow-size);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    text-align: left;
    padding: 0.45rem 0.75rem;
    border-top: 1px solid var(--brand-celadon, #C3D8CE);
    border-bottom: 1px solid var(--brand-celadon, #C3D8CE);
    /* The band spans the full width, so the cell itself stays static; its label is pinned instead. */
    position: static;
}

/* Pin the building/site label to the left of the scroll box so it stays readable as the day scrolls
   across, rather than sliding off with the band. */
.grid__group-label[b-96a6l0cwem] {
    position: sticky;
    left: 0.75rem;
    display: inline-block;
    z-index: 2;
}

/* Shown when the site/building filter matches no rooms. */
.grid__filter-empty[b-96a6l0cwem] {
    padding: 0.85rem;
    text-align: center;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    font-size: 0.85rem;
}

/* The room name column keeps its own height rhythm in step with the slot cells. */
.grid tbody th.grid__room[b-96a6l0cwem] {
    height: 38px;
}

/* A busy cell for someone else's future booking: clickable to beg for the slot. */
.grid-cell--beggable[b-96a6l0cwem] {
    cursor: pointer;
}

.grid-cell--beggable:hover[b-96a6l0cwem] {
    filter: brightness(1.15);
}

.grid-cell--beggable:focus-visible[b-96a6l0cwem] {
    outline: 2px solid #F2B949; /* Mimosa */
    outline-offset: -2px;
}

/* ---- View toggle and day-view building picker ---- */
.grid-toolbar[b-96a6l0cwem] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.grid-viewtoggle[b-96a6l0cwem] {
    display: inline-flex;
    border: 1px solid var(--brand-hairline);
    border-radius: 8px;
    overflow: hidden;
}

.grid-viewtoggle__btn[b-96a6l0cwem] {
    padding: 0.4rem 0.9rem;
    font: inherit;
    font-weight: 500;
    color: var(--brand-brunswick-green, #1C4E4F);
    background: var(--mud-palette-surface, #fff);
    border: none;
    cursor: pointer;
}

.grid-viewtoggle__btn + .grid-viewtoggle__btn[b-96a6l0cwem] {
    border-left: 1px solid var(--brand-hairline);
}

.grid-viewtoggle__btn--on[b-96a6l0cwem] {
    background: var(--mud-palette-primary, var(--brand-brunswick-green, #1C4E4F));
    color: var(--mud-palette-primary-text, #fff);
}

.grid-buildingpick[b-96a6l0cwem] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.grid-buildingpick .estate__input[b-96a6l0cwem] {
    width: auto;
    min-width: 12rem;
}

.grid-buildingpick__note[b-96a6l0cwem] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary, #5b6b6b);
}

/* Room chips to choose the day-view columns (up to five of the building's rooms). */
.grid-roompick[b-96a6l0cwem] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.attr-chip--sm[b-96a6l0cwem] {
    min-height: 0;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

.attr-chip--sm:disabled[b-96a6l0cwem] {
    opacity: 0.45;
    cursor: default;
}

/* ---- Day (pivot) view: time down the left, one building's rooms across the top ---- */
.grid--pivot[b-96a6l0cwem] {
    table-layout: fixed;
    width: 100%;
    min-width: 32rem;
}

.grid--pivot .grid__pivot-corner[b-96a6l0cwem],
.grid--pivot .grid__pivot-time[b-96a6l0cwem] {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 4.5rem;
    min-width: 4.5rem;
    height: 2.5rem;
    background: var(--mud-palette-surface, #fff);
    border-right: 1px solid var(--brand-hairline);
    text-align: right;
    padding: 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #5b6b6b;
    white-space: nowrap;
}

.grid--pivot thead th[b-96a6l0cwem] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface, #fff);
    padding: 0.45rem 0.4rem;
    text-align: center;
    font-weight: 500;
    border-bottom: 1px solid var(--brand-hairline);
}

.grid--pivot .grid__pivot-corner[b-96a6l0cwem] {
    z-index: 3;
}

/* Each 30 minute slot is a tall-ish row so the day fills the page and a slot is easy to hit; a
   longer booking spans several with a rowspan. */
.grid--pivot td.grid-cell[b-96a6l0cwem] {
    width: auto;
    height: 2.5rem;
    border-right: 1px solid var(--brand-hairline);
}

/* Only the hour rows carry the firmer top line, so the half hours read as lighter steps. */
.grid--pivot .grid__pivot-time--hour[b-96a6l0cwem],
.grid--pivot .grid__pivot-time--hour ~ td[b-96a6l0cwem] {
    border-top: 1px solid var(--brand-hairline);
}

/* The day view's current time is shown by the full-width horizontal now-line (.grid-nowline--horizontal),
   placed on the real minute, so the old hour-snapped row highlight was retired to avoid doubling up. */

/* A booking block in the day view centres its label and can show the full name (more width than a
   packed row column). */
.grid--pivot .grid-cell--busy .grid-cell__owner[b-96a6l0cwem],
.grid--pivot .grid-cell--held .grid-cell__owner[b-96a6l0cwem] {
    text-align: center;
    padding: 0 0.3rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-btn[b-bu2hozjk8o] {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.4rem;
    font-weight: 500;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.home-btn--primary[b-bu2hozjk8o] {
    color: var(--mud-palette-primary, #1C4E4F);
    background: #F6FAF9;
}

.home-btn--primary:hover[b-bu2hozjk8o] {
    background: #fff;
    transform: translateY(-1px);
}

.home-btn--ghost[b-bu2hozjk8o] {
    color: var(--mud-palette-primary-text, #F6FAF9);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary-text, #F6FAF9) 50%, transparent);
}

.home-btn--ghost:hover[b-bu2hozjk8o] {
    border-color: var(--mud-palette-primary-text, #F6FAF9);
    transform: translateY(-1px);
}

.home-heading[b-bu2hozjk8o] {
    margin: 2.25rem 0 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

.home-grid[b-bu2hozjk8o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

/* The home-stat tile styles moved to app.css: My spend and the department statement page render
   the same tiles, and scoped CSS never reached them there. */

.home-card[b-bu2hozjk8o] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.35rem;
    text-decoration: none;
    color: var(--mud-palette-text-primary, #101418);
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, #E2ECE7);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.home-card:hover[b-bu2hozjk8o] {
    border-color: var(--mud-palette-primary, #1C4E4F);
    box-shadow: 0 8px 22px rgba(16, 20, 24, 0.09);
    transform: translateY(-2px);
}

.home-card__icon[b-bu2hozjk8o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.4rem;
    border-radius: 10px;
    color: var(--mud-palette-primary, #1C4E4F);
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 14%, transparent);
}

.home-card__title[b-bu2hozjk8o] {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

.home-card__text[b-bu2hozjk8o] {
    font-size: 0.88rem;
    color: var(--mud-palette-text-secondary, #5b6b6b);
}

.home-getstarted[b-bu2hozjk8o] {
    margin: 1.5rem 0 0;
    padding: 1.5rem;
    /* Derive from the palette so the card reads in dark mode and under any white-label theme, rather
       than a fixed light Sea Salt that stayed white on a dark page. */
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 6%, var(--mud-palette-surface, #fff));
    border: 1px solid var(--mud-palette-lines-default, var(--brand-hairline));
    border-radius: 14px;
}

.home-getstarted__head[b-bu2hozjk8o] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.home-getstarted__progress[b-bu2hozjk8o] {
    font-size: 0.85rem;
    color: var(--brand-brunswick-green);
    font-weight: 500;
}

.home-progress[b-bu2hozjk8o] {
    height: 8px;
    background: var(--brand-mint-cream);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.5rem 0 1.25rem;
}

.home-progress__bar[b-bu2hozjk8o] {
    height: 100%;
    background: var(--brand-cambridge-blue);
    transition: width 0.3s ease;
}

.home-steps[b-bu2hozjk8o] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

/* Optional extras: set apart under a quiet heading, so it is clear they do not count towards
   being set up (a tenant can reach 100% without them). */
.home-getstarted__optional-head[b-bu2hozjk8o] {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #5b6b6b);
}

.home-steps--optional[b-bu2hozjk8o] {
    opacity: 0.85;
}

.home-step[b-bu2hozjk8o] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.home-step__tick[b-bu2hozjk8o] {
    color: var(--brand-cambridge-blue);
    margin-top: 0.1rem;
}

.home-step--done .home-step__tick[b-bu2hozjk8o] {
    color: var(--brand-brunswick-green);
}

.home-step--done .home-step__text a[b-bu2hozjk8o] {
    color: #4a5a5a;
    text-decoration: line-through;
}

.home-step__text[b-bu2hozjk8o] {
    display: flex;
    flex-direction: column;
}

.home-step__text a[b-bu2hozjk8o] {
    color: var(--brand-brunswick-green);
    font-weight: 500;
    text-decoration: none;
}

.home-step__text a:hover[b-bu2hozjk8o] {
    text-decoration: underline;
}

.home-step__hint[b-bu2hozjk8o] {
    font-size: 0.82rem;
    color: #4a5a5a;
}

.home-welcome[b-bu2hozjk8o] {
    text-align: left;
    max-width: 30rem;
}

.home-welcome .held-dialog__icon[b-bu2hozjk8o],
.home-welcome .held-dialog__title[b-bu2hozjk8o] {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.home-welcome__list[b-bu2hozjk8o] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.home-welcome__list li[b-bu2hozjk8o] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #3f4b4a;
}

/* Contextual awareness: outage banner, Happening now card, and regular-room chips. */

/* Dismissible outage alert, sits just under the hero. Warm, not alarming. */
.home-alert[b-bu2hozjk8o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    /* Warm amber tint over the theme surface, so the banner reads in dark mode too. */
    background: color-mix(in srgb, var(--brand-mimosa, #F2B949) 20%, var(--mud-palette-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--brand-mimosa, #F2B949) 45%, transparent);
}

.home-alert__icon[b-bu2hozjk8o] {
    flex: 0 0 auto;
    display: inline-flex;
    color: #8a6100;
}

.home-alert__body[b-bu2hozjk8o] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.home-alert__title[b-bu2hozjk8o] {
    font-weight: 600;
    color: #5c4300;
}

.home-alert__detail[b-bu2hozjk8o] {
    font-size: 0.85rem;
    color: #6b5410;
}

.home-alert__close[b-bu2hozjk8o] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #8a6100;
    cursor: pointer;
    transition: background 0.15s ease;
}

.home-alert__close:hover[b-bu2hozjk8o] {
    background: rgba(138, 97, 0, 0.12);
}

/* Happening now: a live status card for an in-progress meeting. */
.home-now[b-bu2hozjk8o] {
    margin: 1.5rem 0 0;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    background: var(--mud-palette-primary, #1C4E4F);
    color: var(--mud-palette-primary-text, #fff);
}

.home-now__pulse[b-bu2hozjk8o] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking);
    color: color-mix(in srgb, var(--mud-palette-primary-text, #fff) 82%, transparent);
}

.home-now__dot[b-bu2hozjk8o] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--brand-mimosa, #F2B949);
    box-shadow: 0 0 0 0 rgba(242, 185, 73, 0.7);
    animation: home-now-pulse-b-bu2hozjk8o 2s infinite;
}

@keyframes home-now-pulse-b-bu2hozjk8o {
    0% { box-shadow: 0 0 0 0 rgba(242, 185, 73, 0.6); }
    70% { box-shadow: 0 0 0 0.5rem rgba(242, 185, 73, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 185, 73, 0); }
}

.home-now__body[b-bu2hozjk8o] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.85rem;
    margin-top: 0.35rem;
}

.home-now__room[b-bu2hozjk8o] {
    font-size: 1.5rem;
    font-weight: 500;
}

.home-now__time[b-bu2hozjk8o] {
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--mud-palette-primary-text, #fff) 85%, transparent);
}

.home-now__error[b-bu2hozjk8o] {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: #FBE0C0;
}

.home-now__actions[b-bu2hozjk8o] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/* Ghost buttons sit on the primary-coloured Happening-now card; use the scheme's on-primary colour. */
.home-now__actions .home-btn--ghost[b-bu2hozjk8o] {
    color: var(--mud-palette-primary-text, #fff);
    border-color: color-mix(in srgb, var(--mud-palette-primary-text, #fff) 55%, transparent);
    background: transparent;
}

.home-now__actions .home-btn--ghost:hover[b-bu2hozjk8o] {
    background: color-mix(in srgb, var(--mud-palette-primary-text, #fff) 14%, transparent);
    border-color: var(--mud-palette-primary-text, #fff);
}

/* Suggested-for-you card and the set-preferences prompt. Full width, tinted from the tenant scheme. */
.home-suggest[b-bu2hozjk8o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    /* Tint the theme surface, not a fixed white, so the card (and its text) reads in dark mode too. */
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 14%, var(--mud-palette-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 35%, var(--mud-palette-surface, #fff));
}

.home-suggest--prompt[b-bu2hozjk8o] {
    background: var(--mud-palette-background, #F6FAF9);
    border-color: var(--brand-hairline, rgba(20, 40, 40, 0.14));
}

.home-suggest__text[b-bu2hozjk8o] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.home-suggest__eyebrow[b-bu2hozjk8o] {
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking);
    color: var(--brand-primary-ink);
}

.home-suggest__line[b-bu2hozjk8o] {
    font-size: 1rem;
    color: var(--mud-palette-text-primary, #101418);
}

/* The card is a light tint, so its buttons are solid/outlined in the scheme colour, not white. */
.home-suggest .home-btn--primary[b-bu2hozjk8o] {
    background: var(--mud-palette-primary, #1C4E4F);
    color: var(--mud-palette-primary-text, #fff);
}

.home-suggest .home-btn--primary:hover[b-bu2hozjk8o] {
    filter: brightness(1.08);
}

.home-suggest .home-btn--ghost[b-bu2hozjk8o] {
    color: var(--mud-palette-primary, #1C4E4F);
    border-color: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 45%, transparent);
}

.home-suggest .home-btn--ghost:hover[b-bu2hozjk8o] {
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 10%, transparent);
    border-color: var(--mud-palette-primary, #1C4E4F);
}
/* /Components/Pages/MyBookings.razor.rz.scp.css */
/* A quiet marker on bookings that belong to a recurring series. */
.mybookings-series[b-whj4crg04e] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--brand-mint-cream, #D7E7E1);
    color: var(--brand-brunswick-green, #1C4E4F);
    white-space: nowrap;
    vertical-align: middle;
}
/* /Components/Pages/MyEvents.razor.rz.scp.css */
/* MyEvents scoped CSS. Card grid mirrors the ExhibitorHome layout: 2 columns on wide screens,
   1 column below 720px. Each card is richer than the exhibitor-home stat card: banner + venue
   chip + dates + key dates + booking + food + event tasks + primary actions. */

/* Section-to-section rhythm uses the shared --gap-lg token, so this page reads with the same
   spacing as every other card surface. Card-to-card spacing is the grid's own gap below, also on
   the token: these cards are a two-column grid rather than a vertical stack, so `.card-stack`
   (the shared vertical-stack utility in app.css) is not the right tool here, but the token is the
   same one, which is the point. Never reach for a sibling margin between cards. */
.my-events__section[b-wsqrsdcdfl] {
    margin-block-end: var(--gap-lg);
}

.my-events__section--past[b-wsqrsdcdfl] {
    opacity: 0.94;
}

.my-events__section-head[b-wsqrsdcdfl] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.my-events__heading[b-wsqrsdcdfl] {
    margin: 0;
}

.my-events__section-hint[b-wsqrsdcdfl] {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, #526670);
}

.my-events__grid[b-wsqrsdcdfl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* The gap belongs to the container, so it applies to every card whatever renders, including a
       conditionally-rendered one and the first and last in the grid. */
    gap: var(--gap-lg);
}

/* ---- Card ---- */

.my-events__card[b-wsqrsdcdfl] {
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #D7E7E1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.08s ease-in-out, box-shadow 0.08s ease-in-out;
}

.my-events__card:hover[b-wsqrsdcdfl] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.my-events__card--past[b-wsqrsdcdfl] {
    background: var(--mud-palette-background-grey, #F6FAF9);
}

/* Fixed aspect banner: fills the tile with cover; falls to a Brunswick/Celadon gradient when
   the organiser has not uploaded an event image. Padding-top pattern via aspect-ratio so the
   banner never overhangs a portrait logo the tenant chose as their venue image. */
.my-events__image[b-wsqrsdcdfl] {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--mud-palette-background-grey, #F6FAF9);
}

.my-events__image--placeholder[b-wsqrsdcdfl] {
    background: linear-gradient(135deg, #79A682 0%, #B6D2AD 100%);
}

.my-events__logo[b-wsqrsdcdfl] {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.my-events__logo img[b-wsqrsdcdfl] {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
}

.my-events__badge[b-wsqrsdcdfl] {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.my-events__badge--pending[b-wsqrsdcdfl] {
    background: #F2B949; /* Mimosa */
    color: #142828; /* Gunmetal */
}

.my-events__body[b-wsqrsdcdfl] {
    padding: 1rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 auto;
}

.my-events__title[b-wsqrsdcdfl] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
}

.my-events__venue-chip[b-wsqrsdcdfl] {
    align-self: flex-start;
}

.my-events__when[b-wsqrsdcdfl] {
    margin: 0;
    color: var(--mud-palette-text-primary, #101418);
    font-size: 0.9rem;
}

.my-events__keydates[b-wsqrsdcdfl] {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.my-events__keydates li[b-wsqrsdcdfl] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, #526670);
}

.my-events__status[b-wsqrsdcdfl] {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.my-events__status-item[b-wsqrsdcdfl] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary, #101418);
}

.my-events__status-item--ok[b-wsqrsdcdfl] {
    color: #1C4E4F; /* Brunswick Green */
}

.my-events__status-item--ok a[b-wsqrsdcdfl] {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.my-events__status-item--todo[b-wsqrsdcdfl] {
    color: var(--mud-palette-text-secondary, #526670);
}

.my-events__actions[b-wsqrsdcdfl] {
    padding: 0.75rem 1.25rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid var(--mud-palette-lines-default, #D7E7E1);
    background: color-mix(in srgb, var(--mud-palette-background-grey, #F6FAF9) 60%, transparent);
}

/* ---- Past section star rater ---- */

.my-events__rate[b-wsqrsdcdfl] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default, #D7E7E1);
}

.my-events__rate-hint[b-wsqrsdcdfl] {
    margin: 0;
    color: var(--mud-palette-text-secondary, #526670);
    font-size: 0.85rem;
}

.my-events__rate-stars[b-wsqrsdcdfl] {
    display: inline-flex;
    gap: 0.15rem;
}

/* ---- Responsive ---- */

@media (max-width: 720px) {
    .my-events__grid[b-wsqrsdcdfl] {
        grid-template-columns: 1fr;
    }
}

/* ---- Outstanding ribbon ---- */

/* One line across the top saying what is waiting on the exhibitor. Only rendered when there IS
   something, so the space is not spent on an "all clear" nobody needs to read. */
.my-events__ribbon[b-wsqrsdcdfl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: var(--gap-lg);
    border-radius: 8px;
    border: 1px solid var(--status-warning-ink, #8a6100);
    background: var(--status-warning-wash, #fdf4e3);
    color: var(--status-warning-ink, #8a6100);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ---- Countdown ---- */

/* What happens next, and when. Sits directly under the window so the two read together. */
.my-events__countdown[b-wsqrsdcdfl] {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    font-weight: 500;
}
.my-events__countdown--soon[b-wsqrsdcdfl] { color: var(--status-warning-ink, #8a6100); }
.my-events__countdown--live[b-wsqrsdcdfl] { color: var(--status-positive-ink, #1b5e20); }
.my-events__countdown--past[b-wsqrsdcdfl] { color: var(--mud-palette-text-secondary, #526670); }

/* ---- Requested information summary ---- */

/* A count and a way in, not the form itself. */
.my-events__requested[b-wsqrsdcdfl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-block-start: 1px solid var(--mud-palette-lines-default, #D7E7E1);
}

.my-events__requested-state[b-wsqrsdcdfl] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    min-width: 0;
}
.my-events__requested-state--todo[b-wsqrsdcdfl] { color: var(--status-warning-ink, #8a6100); }
.my-events__requested-state--done[b-wsqrsdcdfl] { color: var(--status-positive-ink, #1b5e20); }

/* ---- About the venue ---- */

/* Collapsed by default: useful when an exhibitor is asking "who is this venue", noise when they
   are not. */
.my-events__venue[b-wsqrsdcdfl] {
    border-block-start: 1px solid var(--mud-palette-lines-default, #D7E7E1);
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
}

.my-events__venue > summary[b-wsqrsdcdfl] {
    cursor: pointer;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #526670);
}

.my-events__venue-body[b-wsqrsdcdfl] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding-block-start: 0.5rem;
}

.my-events__venue-heading[b-wsqrsdcdfl] {
    margin: 0;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

.my-events__venue-body p[b-wsqrsdcdfl] {
    margin: 0;
    color: var(--mud-palette-text-secondary, #526670);
}
/* /Components/Pages/MyVenues.razor.rz.scp.css */
.my-venues__row[b-pokkit2vfe] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.my-venues__logo[b-pokkit2vfe] {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    flex-shrink: 0;
}

.my-venues__body[b-pokkit2vfe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
}
/* /Components/Pages/Notifications.razor.rz.scp.css */
/* The webhook help steps as a readable ordered list. */
.teams-help[b-osh3juvb0y] {
    margin: 0;
    padding-left: 1.25rem;
}

.teams-help li[b-osh3juvb0y] {
    margin-bottom: 0.35rem;
}
/* /Components/Pages/PaymentHistory.razor.rz.scp.css */
/* A cell's secondary lines (site, email, VAT, failure reason) sit on their own line, flush
   left with the first, in the muted text colour, with no stray indent from inline spacing. */
.payment-history[b-ectk5e412i]  .ph-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.875em;
    color: var(--mud-palette-text-secondary);
}

/* Status badges wrap as a group with a consistent gap. */
.payment-history[b-ectk5e412i]  .ph-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

/* References are read against the gateway's portal character by character. */
.payment-history[b-ectk5e412i]  .ph-ref {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
/* /Components/Pages/Preferences.razor.rz.scp.css */
/* Preferences, page-scoped. Keep the "no preference" dropdowns a natural width so they do not look
   stretched and long across the grid column. Brand palette only (defined in app.css :root). */
select.estate__input[b-u9bwbdki7v] {
    max-width: 22rem;
}
/* /Components/Pages/TenantSso.razor.rz.scp.css */
/* Collapsible integration cards: one bar per sign-in integration, showing its status when closed,
   opening to its full editor. Native <details> so it works in the static-SSR shell. Theme-aware. */
.integration[b-lk1x2f5ngw] {
    margin-bottom: 1rem;
    border: 1px solid var(--mud-palette-lines-default, var(--brand-hairline));
    border-radius: 14px;
    background: var(--mud-palette-surface, #fff);
    overflow: hidden;
}

.integration__bar[b-lk1x2f5ngw] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.integration__bar[b-lk1x2f5ngw]::-webkit-details-marker {
    display: none;
}

.integration__icon[b-lk1x2f5ngw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 12%, var(--mud-palette-surface, #fff));
    color: var(--mud-palette-primary, #1C4E4F);
}

.integration__icon--img[b-lk1x2f5ngw] {
    background: #fff; /* the Solo mark is drawn for a light plate, so keep it readable on any theme */
    padding: 0.35rem;
}

.integration__icon--img img[b-lk1x2f5ngw] {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.integration__text[b-lk1x2f5ngw] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.integration__name[b-lk1x2f5ngw] {
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--mud-palette-text-primary, var(--brand-carbon-wing));
}

.integration__sub[b-lk1x2f5ngw] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.integration__status[b-lk1x2f5ngw] {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.integration__status--on[b-lk1x2f5ngw] {
    color: var(--status-positive-ink);
    background: var(--status-positive-wash);
}

.integration__status--paused[b-lk1x2f5ngw] {
    color: var(--status-warning-ink);
    background: var(--status-warning-wash);
}

.integration__status--off[b-lk1x2f5ngw] {
    color: var(--status-neutral-ink);
    background: var(--status-neutral-wash);
}

.integration__chevron[b-lk1x2f5ngw] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary, #4a5a5a);
    transition: transform 0.15s ease;
}

.integration[open] .integration__chevron[b-lk1x2f5ngw] {
    transform: rotate(180deg);
}

.integration__body[b-lk1x2f5ngw] {
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid var(--mud-palette-lines-default, var(--brand-hairline));
}
/* /Components/Pages/VenueDetail.razor.rz.scp.css */
/* VenueDetail scoped CSS. A quiet page: the tenant's name and prose lead, one hero image at
   the top, and a list of the caller's live events at the venue at the bottom. */

.venue-detail__hero[b-91pldfxjb3] {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, #D7E7E1);
}

/* Fixed 21:9 banner. object-fit: cover keeps landscape photos undistorted; a portrait tenant
   logo lands centred and is cropped horizontally, so no white halo eats a title. */
.venue-detail__hero-image[b-91pldfxjb3] {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 260px;
    object-fit: cover;
    object-position: center;
    background-color: var(--mud-palette-background-grey);
}

.venue-detail__hero-image--placeholder[b-91pldfxjb3] {
    background-image: linear-gradient(135deg, #1C4E4F, #79A682);
}

/* Caption bar under the image, solid Brunswick Green so the venue name is always legible on
   the product palette rather than overlaid on the tenant's image (which could be anything). */
.venue-detail__hero-caption[b-91pldfxjb3] {
    padding: 0.9rem 1.5rem;
    background: #1C4E4F; /* Brunswick Green */
    color: #F6FAF9; /* Sea Salt */
}

.venue-detail__title[b-91pldfxjb3] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.venue-detail__heading[b-91pldfxjb3] {
    margin: 0 0 0.5rem 0;
}

.venue-detail__body[b-91pldfxjb3] {
    margin: 0 0 1.5rem 0;
    color: var(--mud-palette-text-primary);
    white-space: pre-line;
    line-height: 1.55;
}

.venue-detail__events[b-91pldfxjb3] {
    margin-top: 1.5rem;
}

.venue-detail__section-heading[b-91pldfxjb3] {
    margin: 0 0 0.75rem 0;
}

.venue-detail__empty[b-91pldfxjb3] {
    padding: 1.25rem 1.5rem;
    background: var(--mud-palette-surface);
    border-radius: 12px;
}

.venue-detail__event-list[b-91pldfxjb3] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.venue-detail__event[b-91pldfxjb3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    flex-wrap: wrap;
}

.venue-detail__event-main[b-91pldfxjb3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.venue-detail__event-name[b-91pldfxjb3] {
    margin: 0;
    font-weight: 600;
}

.venue-detail__event-when[b-91pldfxjb3] {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}

.venue-detail__event-bookings[b-91pldfxjb3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.venue-detail__booking-chip[b-91pldfxjb3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--status-positive-wash);
    color: var(--status-positive-ink);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

.venue-detail__booking-chip:hover[b-91pldfxjb3],
.venue-detail__booking-chip:focus-visible[b-91pldfxjb3] {
    text-decoration: underline;
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
/* ConfirmDialog's MudDialog output is portaled by MudDialogProvider, so a scoped stylesheet
   here cannot reach it (the b-* attribute never lands on .mud-dialog). The overrides live in
   src/Web/wwwroot/app.css keyed off the .confirm-dialog and .confirm-dialog__content classes
   we pass via Class and ContentClass on the <MudDialog>. */
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.mcr-empty[b-cbf70bmcir] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.mcr-empty__icon[b-cbf70bmcir] {
    width: 3rem;
    height: 3rem;
    color: var(--mud-palette-text-disabled);
}

.mcr-empty__title[b-cbf70bmcir] {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.mcr-empty__text[b-cbf70bmcir] {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    max-width: 26rem;
}

.mcr-empty__action[b-cbf70bmcir] {
    margin-top: 0.75rem;
}
/* /Components/Shared/ExhibitorTaskPanel.razor.rz.scp.css */
.exhibitor-tasks__summary[b-gq907egy7o] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.375rem 1.25rem;
    margin: 0.5rem 0 0;
}

.exhibitor-tasks__summary dt[b-gq907egy7o] {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.exhibitor-tasks__summary dd[b-gq907egy7o] {
    margin: 0;
    color: var(--mud-palette-text-primary);
}
/* /Components/Shared/FeedbackThread.razor.rz.scp.css */
/* Chat-style feedback thread. The viewer's messages sit right, the other side left, like a messaging
   app. Theme-aware through the palette variables. A newly revealed incoming message flashes once. */
.chat[b-mhaastzwph] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.chat__row[b-mhaastzwph] {
    display: flex;
}

.chat__row--mine[b-mhaastzwph] {
    justify-content: flex-end;
}

.chat__row--theirs[b-mhaastzwph] {
    justify-content: flex-start;
}

.chat__bubble[b-mhaastzwph] {
    max-width: 78%;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default, #e0e6e5);
    background: var(--mud-palette-surface, #fff);
}

/* The viewer's own messages: brand-tinted, tail on the right. */
.chat__row--mine .chat__bubble[b-mhaastzwph] {
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 16%, var(--mud-palette-surface, #fff));
    border-color: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 22%, var(--mud-palette-surface, #fff));
    border-bottom-right-radius: 4px;
}

.chat__row--theirs .chat__bubble[b-mhaastzwph] {
    border-bottom-left-radius: 4px;
}

.chat__meta[b-mhaastzwph] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.chat__who[b-mhaastzwph] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #101418);
}

.chat__when[b-mhaastzwph] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.chat__body[b-mhaastzwph] {
    color: var(--mud-palette-text-primary, #101418);
    white-space: pre-wrap;
    line-height: 1.4;
}

.chat__receipt[b-mhaastzwph] {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    text-align: right;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

/* A new incoming message flashes once for a couple of seconds so the viewer notices it. */
.chat__bubble--new[b-mhaastzwph] {
    animation: chat-flash-b-mhaastzwph 2.5s ease-out 1;
}

@keyframes chat-flash-b-mhaastzwph {
    0%, 55% {
        background: color-mix(in srgb, #f2b949 55%, var(--mud-palette-surface, #fff));
        border-color: color-mix(in srgb, #f2b949 70%, var(--mud-palette-surface, #fff));
    }
    100% {
        background: var(--mud-palette-surface, #fff);
        border-color: var(--mud-palette-lines-default, #e0e6e5);
    }
}
/* /Components/Shared/FoodOrderPanel.razor.rz.scp.css */
/* The food-only order flow. Everything derives from the MudBlazor palette variables and the
   shared tokens in app.css, so it survives white-labelling. */

/* ---- Collapsed menu bars ---- */

/* Each menu is a collapsed bar that opens on click. The whole bar is one button, so the hit
   target is generous and the chevron is decoration, not the control. */
.food-menu[b-mbx90fv6a1] {
    border: 1px solid var(--brand-hairline);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mud-palette-surface, #fff);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

/* The menu whose service band covers the chosen delivery time shines: a primary edge and a soft
   halo, all from palette variables so a white-labelled tenant glows in their own colour. */
.food-menu--shine[b-mbx90fv6a1] {
    border-color: var(--mud-palette-primary, var(--brand-brunswick-green));
    box-shadow: 0 0 0 1px var(--mud-palette-primary, var(--brand-brunswick-green)),
                0 6px 20px -8px color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 45%, transparent);
}

.food-menu__bar[b-mbx90fv6a1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.food-menu__bar:hover[b-mbx90fv6a1] {
    background: var(--brand-primary-wash, #F6FAF9);
}

.food-menu__bar-main[b-mbx90fv6a1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.food-menu__bar-meta[b-mbx90fv6a1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.food-menu__title[b-mbx90fv6a1] {
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0;
    color: var(--mud-palette-text-primary, var(--brand-carbon-wing));
}

.food-menu__count[b-mbx90fv6a1] {
    font-size: 0.8rem;
    color: var(--brand-muted);
}

.food-menu__band[b-mbx90fv6a1] {
    font-size: 0.8rem;
    color: var(--brand-muted);
    white-space: nowrap;
}

.food-menu__band-chip[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--mud-palette-primary, var(--brand-brunswick-green));
    color: var(--mud-palette-primary-text, var(--brand-sea-salt));
    white-space: nowrap;
}

.food-menu__notice[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.85rem;
    color: var(--brand-muted);
    white-space: nowrap;
}

.food-menu__notice--late[b-mbx90fv6a1] {
    color: var(--mud-palette-error, #b00020);
    font-weight: 500;
}

.food-menu__chevron[b-mbx90fv6a1] {
    transition: transform 150ms ease-out;
    color: var(--brand-muted);
}

.food-menu--open .food-menu__chevron[b-mbx90fv6a1] {
    transform: rotate(180deg);
}

.food-menu__items[b-mbx90fv6a1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-3);
    padding: var(--space-1) var(--space-4) var(--space-4);
}

/* The delivery window running past the site's closing time: a caution, not an error. */
.food-close-warning[b-mbx90fv6a1] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    border: 1px solid var(--brand-hairline);
    border-left: 3px solid var(--brand-mimosa, #F2B949);
    border-radius: 8px;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    background: color-mix(in srgb, var(--brand-mimosa, #F2B949) 8%, transparent);
}

/* ---- Item cards ---- */

.food-item[b-mbx90fv6a1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border: 1px solid var(--brand-hairline);
    border-top: 3px solid color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 45%, var(--brand-hairline));
    border-radius: 12px;
    padding: var(--space-3);
    background: var(--mud-palette-surface, #fff);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}

.food-item:hover[b-mbx90fv6a1] {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 40%, transparent);
}

.food-item--selected[b-mbx90fv6a1] {
    border-color: var(--mud-palette-primary, var(--brand-brunswick-green));
    border-top-color: var(--mud-palette-primary, var(--brand-brunswick-green));
    box-shadow: 0 0 0 1px var(--mud-palette-primary, var(--brand-brunswick-green)) inset;
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 4%, var(--mud-palette-surface, #fff));
}

/* Most popular treatment: three cues so the flag never depends on colour alone: a top-of-card
   text chip, a Mimosa-accent border, and a subtle Mimosa-tinted background wash. Combines with
   the "selected" state (primary border wins when both apply). */
.food-item--popular[b-mbx90fv6a1] {
    position: relative;
    border-color: var(--brand-mimosa, #F2B949);
    background: color-mix(in srgb, var(--brand-mimosa, #F2B949) 10%, var(--mud-palette-surface, #fff));
    box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--brand-mimosa, #F2B949) 65%, transparent);
}

/* The popular chip flows in the card's right-hand column, directly above the price, so it can
   never overlap the item name or the picture. */
.food-item__popular-chip[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    padding: 0.15rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--brand-gunmetal, #142828);
    background: var(--brand-mimosa, #F2B949);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(16, 20, 24, 0.18);
}

/* Card view: the top row's right side stacks the popular chip above the price. */
.food-item__top-right[b-mbx90fv6a1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex: 0 0 auto;
}

/* Season chips: fixed brand accents, one per season the item is offered in. Seasons are
   universal so the chip colours don't track the tenant's scheme. */
.food-season-chip[b-mbx90fv6a1] {
    font-weight: 500;
}
.food-season-chip--spring[b-mbx90fv6a1] {
    color: #1c4e4f;
    background: var(--brand-celadon, #B6D2AD);
    border-color: transparent;
}
.food-season-chip--summer[b-mbx90fv6a1] {
    color: #1c4e4f;
    background: var(--brand-cambridge-blue, #79A682);
    border-color: transparent;
}
.food-season-chip--autumn[b-mbx90fv6a1] {
    color: var(--brand-gunmetal, #142828);
    background: var(--brand-mimosa, #F2B949);
    border-color: transparent;
}
.food-season-chip--winter[b-mbx90fv6a1] {
    color: var(--brand-sea-salt, #F6FAF9);
    background: var(--brand-brunswick-green, #1C4E4F);
    border-color: transparent;
}

.food-limited-chip[b-mbx90fv6a1] {
    font-weight: 500;
    color: var(--brand-gunmetal, #142828);
    background: color-mix(in srgb, var(--brand-mimosa, #F2B949) 20%, transparent);
    border-color: color-mix(in srgb, var(--brand-mimosa, #F2B949) 45%, transparent);
}

.food-item__image[b-mbx90fv6a1] {
    width: calc(100% + 2 * var(--space-3));
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0;
    margin-top: calc(-1 * var(--space-3) - 3px);
    height: 8.5rem;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

/* Items without a photo leave the image space as a plain gap (no fill), so every card in a row
   still lines up without a heavy grey block where a photo would be. */
.food-item__image--placeholder[b-mbx90fv6a1] {
    background: transparent;
}

/* ---- List view: one compact row per item, image-led (thumbnail), the rest reused from cards ---- */
.food-menu__items--list[b-mbx90fv6a1] {
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.food-item--row[b-mbx90fv6a1] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    border-top: 1px solid var(--brand-hairline);
    border-left: 3px solid color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 45%, var(--brand-hairline));
}

.food-item--row:hover[b-mbx90fv6a1] {
    transform: none;
}

.food-item--row .food-item__image[b-mbx90fv6a1] {
    width: 4rem;
    height: 4rem;
    flex: none;
    margin: 0;
    border-radius: 8px;
}

.food-item--row .food-item__body[b-mbx90fv6a1] {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.food-item--row .food-item__actions[b-mbx90fv6a1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    margin-left: auto;
}

.food-item--row .food-item__choices[b-mbx90fv6a1] {
    flex-basis: 100%;
}

/* The list stays image-led on wider screens; on phones the thumbnail is dropped for a tighter row.
   The card view keeps its image at every width. */
@media (max-width: 40rem) {
    .food-item--row .food-item__image[b-mbx90fv6a1] {
        display: none;
    }
}

.food-item__top[b-mbx90fv6a1] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
}

.food-item__name[b-mbx90fv6a1] {
    font-weight: 500;
    font-size: 1rem;
}

/* The price as a pill in the tenant's primary, so cost is legible at a glance across the grid.
   Primary-ink text, not raw primary: a dark scheme's primary would vanish on the dark card. */
.food-item__price[b-mbx90fv6a1] {
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 10%, transparent);
    color: var(--brand-primary-ink, var(--brand-brunswick-green));
}

.food-item__desc[b-mbx90fv6a1] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--brand-muted);
    line-height: 1.5;
}

/* Dietary chips pick up a soft tint of the secondary palette so they read as reassurance,
   not warnings (allergens keep the error colour for that). */
.food-item__tag[b-mbx90fv6a1] {
    background: color-mix(in srgb, var(--mud-palette-secondary, #79A682) 16%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-secondary, #79A682) 45%, transparent);
    color: var(--mud-palette-text-primary, var(--brand-gunmetal));
}

.food-item__meta[b-mbx90fv6a1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-height: 1.25rem;
}

.food-item__kcal[b-mbx90fv6a1] {
    font-size: 0.8rem;
    color: var(--brand-muted);
}

.food-item__foot[b-mbx90fv6a1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
}

.food-item__min[b-mbx90fv6a1] {
    font-size: 0.8rem;
    color: var(--brand-muted);
}

.food-qty[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.food-qty__btn[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--brand-hairline);
    background: var(--mud-palette-surface, #fff);
    color: var(--brand-primary-ink, var(--brand-brunswick-green));
    cursor: pointer;
    transition: background 150ms ease-out, border-color 150ms ease-out;
}

.food-qty__btn:hover:not(:disabled)[b-mbx90fv6a1] {
    background: var(--brand-primary-wash, #D7E7E1);
    border-color: var(--brand-primary-ink, var(--brand-cambridge-blue));
}

.food-qty__btn:disabled[b-mbx90fv6a1] {
    opacity: 0.4;
    cursor: default;
}

.food-qty__value[b-mbx90fv6a1] {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.food-item__choices[b-mbx90fv6a1] {
    border-top: 1px dashed var(--brand-hairline);
    padding-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.food-item__choose[b-mbx90fv6a1] {
    font-size: 0.85rem;
    color: var(--brand-muted);
}

.food-item__choose--done[b-mbx90fv6a1] {
    color: var(--brand-primary-ink, var(--brand-brunswick-green));
    font-weight: 500;
}

/* Duplicate-choice items pick a quantity of each option (rather than tick distinct ones), so each
   option is a row with the option name and its own stepper. */
.food-item__option-qtys[b-mbx90fv6a1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.food-item__option-qty[b-mbx90fv6a1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--brand-hairline);
    border-radius: 10px;
}

.food-item__option-qty--on[b-mbx90fv6a1] {
    border-color: var(--brand-primary-ink, var(--brand-cambridge-blue));
    background: var(--brand-primary-wash, #D7E7E1);
}

.food-item__option-qty.food-option--avoid[b-mbx90fv6a1] {
    border-color: var(--mud-palette-warning, #F2B949);
}

.food-item__option-name[b-mbx90fv6a1] {
    font-size: 0.9rem;
}

/* A quiet primary wash over the theme surface, not fixed Sea Salt: a fixed light panel in dark
   mode renders the theme's (light) text invisibly on white. */
.food-basket[b-mbx90fv6a1] {
    border: 1px solid var(--brand-hairline);
    border-radius: 12px;
    padding: var(--space-4);
    background: var(--brand-primary-wash, var(--brand-sea-salt));
}

.food-basket__lines[b-mbx90fv6a1] {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.food-basket__lines li[b-mbx90fv6a1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.925rem;
    font-variant-numeric: tabular-nums;
}

/* The item name takes the slack between the × and the right-aligned price. */
.food-basket__line-name[b-mbx90fv6a1] {
    flex: 1 1 auto;
    min-width: 0;
}

/* The per-line ×: quiet until hovered, then the error colour says "this removes". */
.food-basket__remove[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--brand-muted);
    cursor: pointer;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.food-basket__remove:hover[b-mbx90fv6a1] {
    background: color-mix(in srgb, var(--mud-palette-error, #b00020) 12%, transparent);
    color: var(--mud-palette-error, #b00020);
}

/* Reset basket sits just under the first delivery time: everything else survives, the items go. */
.food-basket__reset-row[b-mbx90fv6a1] {
    margin-top: var(--space-1);
}

.food-basket__reset[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 10px;
    border: 1px solid var(--brand-hairline);
    border-radius: 999px;
    background: var(--mud-palette-surface, #fff);
    font: inherit;
    font-size: 0.8rem;
    color: var(--brand-muted);
    cursor: pointer;
    transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.food-basket__reset:hover[b-mbx90fv6a1] {
    border-color: var(--mud-palette-error, #b00020);
    background: color-mix(in srgb, var(--mud-palette-error, #b00020) 8%, transparent);
    color: var(--mud-palette-error, #b00020);
}

.food-basket__total[b-mbx90fv6a1] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--brand-hairline);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* One block per delivery slot inside the basket, so a multi-delivery order reads the way the
   kitchen will run it: a time, then its items. */
.food-basket__slot[b-mbx90fv6a1] {
    margin-top: var(--space-3);
}

.food-basket__slot:first-of-type[b-mbx90fv6a1] {
    margin-top: var(--space-2);
}

.food-basket__slot-time[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-primary-ink, var(--brand-brunswick-green));
}

/* Basket header: the "Your order" label and the compact "Order again..." link sit on one row. */
.food-summary__head[b-mbx90fv6a1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.food-summary__reorder[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--brand-brunswick-green);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--brand-brunswick-green) 25%, transparent);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.food-summary__reorder:hover:not(:disabled)[b-mbx90fv6a1] {
    background: color-mix(in srgb, var(--brand-brunswick-green) 8%, transparent);
    border-color: color-mix(in srgb, var(--brand-brunswick-green) 45%, transparent);
}

.food-summary__reorder:disabled[b-mbx90fv6a1] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Order again modal: the past-orders list, the two-column preview and the notes checkbox. */
.food-reorder__list[b-mbx90fv6a1] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 22rem;
    overflow-y: auto;
}

.food-reorder__row[b-mbx90fv6a1] {
    width: 100%;
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.25rem 0.75rem;
    padding: 0.6rem 0.75rem;
    text-align: left;
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 15%, transparent);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.food-reorder__row:hover[b-mbx90fv6a1] {
    background: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 8%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 30%, transparent);
}

.food-reorder__date[b-mbx90fv6a1] { font-weight: 500; grid-row: 1; }
.food-reorder__where[b-mbx90fv6a1] { grid-row: 1; grid-column: 2; color: var(--brand-muted); font-size: 0.9rem; }
.food-reorder__items[b-mbx90fv6a1] { grid-row: 2; grid-column: 1 / -1; color: var(--brand-muted); font-size: 0.85rem; }

.food-reorder__notes-choice[b-mbx90fv6a1] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--brand-muted);
    margin: 0.75rem 0 0.25rem;
}

.food-reorder__preview[b-mbx90fv6a1] {
    margin: 0 0 0.75rem;
    padding-left: 1.15rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary, #101418);
}

.food-reorder__preview--skip li[b-mbx90fv6a1] { color: var(--brand-muted); }
.food-reorder__preview--skip strong[b-mbx90fv6a1] { color: var(--mud-palette-text-primary, #101418); }

.food-terms[b-mbx90fv6a1] {
    font-size: 0.825rem;
    color: var(--brand-muted);
    line-height: 1.55;
    /* A tenant may write their own notice on System policies; preserve the line breaks they type
       so the paragraph reads the way they laid it out, and never let a stray tab collapse spaces. */
    white-space: pre-line;
}

/* Local copies of the Book form's scoped layout helpers (CSS isolation keeps the page's own
   versions from reaching this component). */
.book-field[b-mbx90fv6a1] {
    margin-top: 1rem;
}

.book-field__label[b-mbx90fv6a1] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary, #142828);
}

.book-notes[b-mbx90fv6a1] {
    min-height: 4.5rem;
    resize: vertical;
    line-height: 1.4;
}

/* Allergen declarations and the avoided-allergen filter. Colour is never the only signal: the
   text itself says "an allergen you avoid". */
.food-item__allergens[b-mbx90fv6a1] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--brand-muted);
}

.food-item__allergens--avoid[b-mbx90fv6a1] {
    color: var(--mud-palette-error, #b00020);
    font-weight: 500;
}

.food-option--avoid[b-mbx90fv6a1] {
    outline: 1px solid var(--mud-palette-error, #b00020);
}

.food-allergen-filter[b-mbx90fv6a1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    border: 1px solid var(--brand-hairline);
    border-left: 3px solid var(--brand-mimosa);
    border-radius: 8px;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
}

/* ---- Ordering layout: menus on the left, a sticky order summary on the right ---- */

.food-order[b-mbx90fv6a1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: 1rem;
}

@media (min-width: 60rem) {
    .food-order[b-mbx90fv6a1] {
        grid-template-columns: minmax(0, 1fr) 20rem;
        align-items: start;
    }
}

.food-order__main[b-mbx90fv6a1] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Toolbar: the category jump-nav (a chip per menu) and the card/list view toggle. Sticky so both
   stay reachable as the menus scroll, offset below the fixed app bar (as the summary panel is)
   rather than at the very top, where it would hide behind the bar. Sections carry a scroll margin
   so a jump clears the toolbar. */
.food-order__toolbar[b-mbx90fv6a1] {
    position: sticky;
    top: var(--mud-appbar-height, 64px);
    z-index: 5;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-1);
    background: var(--mud-palette-surface, #fff);
}

/* The chips fill the left and wrap within their own row; the view toggle stays to their right on
   the same line (it never wraps below). */
.food-order__nav[b-mbx90fv6a1] {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.food-order__nav-chip[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--brand-hairline);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    color: var(--mud-palette-text-primary, #142828);
    background: var(--mud-palette-surface, #fff);
    transition: background 150ms ease-out, border-color 150ms ease-out;
}

.food-order__nav-chip:hover[b-mbx90fv6a1] {
    background: var(--brand-primary-wash, #F6FAF9);
    border-color: var(--brand-primary-ink, var(--brand-cambridge-blue));
}

.food-order__nav-chip--on[b-mbx90fv6a1] {
    background: var(--mud-palette-primary, var(--brand-brunswick-green));
    color: var(--mud-palette-primary-text, var(--brand-sea-salt));
    border-color: var(--mud-palette-primary, var(--brand-brunswick-green));
}

/* Card/list view toggle: a small segmented control, kept to the right of the toolbar. */
.food-order__view[b-mbx90fv6a1] {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--brand-hairline);
    border-radius: 999px;
    overflow: hidden;
    background: var(--mud-palette-surface, #fff);
}

.food-order__view-btn[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: none;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    color: var(--mud-palette-text-primary, #142828);
    background: transparent;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.food-order__view-btn:hover[b-mbx90fv6a1] {
    background: var(--brand-primary-wash, #F6FAF9);
}

.food-order__view-btn--on[b-mbx90fv6a1],
.food-order__view-btn--on:hover[b-mbx90fv6a1] {
    background: var(--mud-palette-primary, var(--brand-brunswick-green));
    color: var(--mud-palette-primary-text, var(--brand-sea-salt));
}

.food-order__section[b-mbx90fv6a1] {
    scroll-margin-top: calc(var(--mud-appbar-height, 64px) + 4rem);
}

.food-order__summary[b-mbx90fv6a1] {
    min-width: 0;
}

/* On wide screens the summary floats: it sticks in the second column and stays in view as the menus
   scroll, so the running total and Place order are always to hand without scrolling to the bottom.
   It clears the fixed app bar (64px) with a small gap, and caps its height to the viewport with its
   own scroll, so a long basket never pushes Place order off the screen. On phones the fixed finish
   bar at the bottom carries the total and Place order instead. */
@media (min-width: 60rem) {
    .food-order__summary[b-mbx90fv6a1] {
        position: sticky;
        top: calc(var(--mud-appbar-height, 64px) + var(--space-3));
        align-self: start;
        max-height: calc(100vh - var(--mud-appbar-height, 64px) - var(--space-5));
        overflow-y: auto;
    }
}

.food-summary[b-mbx90fv6a1] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--brand-hairline);
    border-radius: 14px;
    padding: var(--space-4);
    background: var(--mud-palette-surface, #fff);
}

.food-summary .food-basket[b-mbx90fv6a1] {
    margin-top: var(--space-2);
}

.food-summary__place[b-mbx90fv6a1] {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-4);
}

/* Mobile finish bar: total and finish button pinned to the bottom of the screen, so end users on a
   phone never scroll to pay. Hidden on wide screens, where the sticky summary panel shows both. */
.food-order__bar[b-mbx90fv6a1] {
    display: none;
}

.food-order__bar-total[b-mbx90fv6a1] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.food-order__bar-label[b-mbx90fv6a1] {
    font-size: 0.75rem;
    color: var(--brand-muted);
}

@media (max-width: 60rem) {
    .food-order[b-mbx90fv6a1] {
        padding-bottom: 4.75rem;
    }

    .food-order__bar[b-mbx90fv6a1] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        padding: var(--space-2) var(--space-4);
        background: var(--mud-palette-surface, #fff);
        border-top: 1px solid var(--brand-hairline);
        box-shadow: 0 -6px 20px -12px rgba(16, 20, 24, 0.4);
    }

    .food-order__bar .home-btn[b-mbx90fv6a1] {
        flex: 0 0 auto;
    }
}

/* The place buttons carry the service day on its own line, so the action reads first and the day
   is unmissable without stretching the button wide. */
.food-summary__place[b-mbx90fv6a1],
.food-order__bar .home-btn--cta[b-mbx90fv6a1] {
    flex-direction: column;
    gap: 0;
    line-height: 1.3;
}

.food-place__action[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.food-place__method[b-mbx90fv6a1] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8em;
    font-weight: 500;
    opacity: 0.96;
}

.food-place__date[b-mbx90fv6a1] {
    display: block;
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.92;
}
/* /Components/Shared/IdentityProviderEditor.razor.rz.scp.css */
/* Friendlier layout for the shared identity-provider editor. Colours come from the brand palette
   variables in app.css so the editor stays on brand and survives white-labelling. */

.idp-editor__lead[b-6t2zyo7s3b] {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary, var(--brand-carbon-wing, #101418));
}

.idp-editor__lead--muted[b-6t2zyo7s3b] {
    color: var(--mud-palette-text-secondary, #4a5c58);
}

/* Status line: a plain label plus a calm pill that reads at a glance. */
.idp-statusline[b-6t2zyo7s3b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.25rem 0 1.5rem;
}

.idp-statusline__label[b-6t2zyo7s3b] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5c58);
}

/* A quiet branded pill (theme-aware, so it reads on a light or dark card) whose dot carries the
   state colour from the shared status palette; the pill itself never shouts. */
.idp-status[b-6t2zyo7s3b] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--brand-primary-lozenge);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary, #1C4E4F) 22%, transparent);
    color: var(--brand-primary-ink);
}

.idp-status[b-6t2zyo7s3b]::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--status-neutral-ink);
}

.idp-status--off[b-6t2zyo7s3b]::before {
    background: var(--status-neutral-ink);
}

.idp-status--paused[b-6t2zyo7s3b]::before {
    background: var(--status-warning-ink);
}

.idp-status--on[b-6t2zyo7s3b]::before {
    background: var(--status-positive-ink);
}

/* Numbered steps, each a clearly separated block. */
.idp-step[b-6t2zyo7s3b] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--brand-mint-cream, #D7E7E1);
}

/* Collapsible IT hand-off, tucked away so it does not overwhelm the main flow. */
.idp-details[b-6t2zyo7s3b] {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--brand-mint-cream, #D7E7E1);
}

.idp-details__summary[b-6t2zyo7s3b] {
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--brand-brunswick-green, #1C4E4F);
}

.idp-details__summary:focus-visible[b-6t2zyo7s3b] {
    outline: 2px solid var(--brand-cambridge-blue, #79A682);
    outline-offset: 2px;
    border-radius: 0.25rem;
}
/* /Components/Shared/IdentityProviderHandoff.razor.rz.scp.css */
.idp-handoff[b-divn2g8hul] {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--mud-palette-lines-default, #D7E7E1);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--mud-palette-text-primary, #101418) 4%, var(--mud-palette-surface, #F6FAF9));
}

.idp-handoff__title[b-divn2g8hul] {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--brand-cambridge-blue) 45%, var(--mud-palette-text-primary, var(--brand-brunswick-green)));
}

.idp-handoff__intro[b-divn2g8hul] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5c58);
}

.idp-handoff__steps[b-divn2g8hul] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #4a5c58);
}

.idp-handoff__steps li[b-divn2g8hul] {
    padding-left: 0.25rem;
}

.idp-handoff__steps strong[b-divn2g8hul] {
    color: var(--mud-palette-text-primary, #142828);
    font-weight: 500;
}

.idp-handoff__list[b-divn2g8hul] {
    display: grid;
    grid-template-columns: minmax(11rem, max-content) 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.idp-handoff__note[b-divn2g8hul] {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #4a5c58);
}

.idp-handoff__list dt[b-divn2g8hul] {
    font-weight: 500;
    color: var(--mud-palette-text-primary, #142828);
}

.idp-handoff__list dd[b-divn2g8hul] {
    margin: 0;
    color: var(--mud-palette-text-primary, #142828);
}

.idp-handoff__list code[b-divn2g8hul] {
    font-size: 0.85rem;
    word-break: break-all;
    color: var(--mud-palette-text-primary, #142828);
    background: color-mix(in srgb, var(--mud-palette-text-primary, #101418) 10%, var(--mud-palette-surface, #fff));
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}

@media (max-width: 640px) {
    .idp-handoff__list[b-divn2g8hul] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .idp-handoff__list dd[b-divn2g8hul] {
        margin-bottom: 0.5rem;
    }
}
/* /Components/Shared/ModalDialog.razor.rz.scp.css */
.modal-overlay[b-pl2vsr71uk] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1rem;
    overflow-y: auto;
    background: rgba(16, 20, 24, 0.55);
}

.modal-card[b-pl2vsr71uk] {
    width: 100%;
    max-width: 34rem;
    margin: auto;
    /* Follow the theme surface and text so the card reads correctly in dark mode, not a fixed white. */
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #101418);
    border-radius: 14px;
    box-shadow: 0 12px 44px rgba(16, 20, 24, 0.3);
}

.modal-card--wide[b-pl2vsr71uk] {
    max-width: 52rem;
}

/* The largest tier, for the item editor's multi-column form: about 15% wider than wide. */
.modal-card--xwide[b-pl2vsr71uk] {
    max-width: 60rem;
}

/* The shared .modal-card__head, __title, __close, __body, __foot and __error styles live in
   src/Web/wwwroot/app.css so both ModalDialog and ConfirmDialog pick them up (scoped CSS would
   only apply to ModalDialog's own elements). */
/* /Components/Shared/RoomResultGrid.razor.rz.scp.css */
/* Building-grouped availability cards, coloured by the day's heat. Mirrors the availability heat map
   so "find by need" results read the same way. Brand palette from app.css, theme-aware. */

.rrg-building[b-9myw7pacy8] {
    margin-bottom: 1rem;
    border: 1px solid var(--brand-hairline);
    border-radius: 12px;
    background: var(--mud-palette-surface, #fff);
}

.rrg-building__summary[b-9myw7pacy8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.rrg-building__summary[b-9myw7pacy8]::-webkit-details-marker {
    display: none;
}

.rrg-building__icon[b-9myw7pacy8] {
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.rrg-building__name[b-9myw7pacy8] {
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary, var(--brand-carbon-wing));
}

.rrg-building__count[b-9myw7pacy8] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.rrg-building__stats[b-9myw7pacy8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
}

.rrg-stat[b-9myw7pacy8] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

.rrg-stat[b-9myw7pacy8]::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

.rrg-stat--free[b-9myw7pacy8] { color: #1f7a4d; background: color-mix(in srgb, #1f7a4d 12%, var(--mud-palette-surface, #fff)); }
.rrg-stat--filling[b-9myw7pacy8] { color: #8a5e00; background: color-mix(in srgb, #e39a0c 16%, var(--mud-palette-surface, #fff)); }
.rrg-stat--full[b-9myw7pacy8] { color: #b3261e; background: color-mix(in srgb, #e5484d 12%, var(--mud-palette-surface, #fff)); }

.rrg-building__chevron[b-9myw7pacy8] {
    color: var(--mud-palette-text-secondary, #4a5a5a);
    transition: transform 0.15s ease;
}

.rrg-building[open] .rrg-building__chevron[b-9myw7pacy8] {
    transform: rotate(180deg);
}

.rrg-grid[b-9myw7pacy8] {
    display: grid;
    /* Wider tiles so the footer (status on the left, "Book this room" on the right) sits on one line
       on every card, rather than wrapping on the narrow ones and leaving the row ragged. */
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
    padding: 0 1rem 1rem;
}

.rrg-tile[b-9myw7pacy8] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 9rem;
    padding: 1rem 1.1rem;
    text-align: left;
    font: inherit;
    border: 1px solid var(--brand-hairline);
    border-left: 5px solid var(--tile-accent, var(--brand-hairline));
    border-radius: 12px;
    background: var(--mud-palette-surface, #fff);
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.rrg-tile:hover[b-9myw7pacy8] {
    box-shadow: 0 6px 20px rgba(16, 20, 24, 0.14);
    transform: translateY(-1px);
}

.rrg-tile:focus-visible[b-9myw7pacy8] {
    outline: 2px solid var(--brand-cambridge-blue);
    outline-offset: 2px;
}

.rrg-tile__top[b-9myw7pacy8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rrg-tile__name[b-9myw7pacy8] {
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--mud-palette-text-primary, var(--brand-carbon-wing));
    line-height: 1.25;
}

.rrg-tile__dot[b-9myw7pacy8] {
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--tile-accent, var(--brand-hairline));
}

.rrg-tile__seats[b-9myw7pacy8] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary, #4a5a5a);
}

.rrg-tile__seats .mud-icon-root[b-9myw7pacy8] {
    font-size: 1rem;
}

.rrg-tile__bar[b-9myw7pacy8] {
    position: relative;
    height: 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-cambridge-blue) 22%, var(--mud-palette-surface, #fff));
    overflow: hidden;
    margin-top: auto;
}

.rrg-tile__seg[b-9myw7pacy8] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--tile-accent, var(--brand-muted));
}

.rrg-tile__foot[b-9myw7pacy8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.rrg-tile__label[b-9myw7pacy8] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--tile-accent, var(--brand-muted));
    white-space: nowrap;
}

.rrg-tile__cta[b-9myw7pacy8] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--mud-palette-primary, #1C4E4F);
    white-space: nowrap;
    flex-shrink: 0;
}

.rrg-tile--free[b-9myw7pacy8] { --tile-accent: #1f7a4d; }
.rrg-tile--filling[b-9myw7pacy8] { --tile-accent: #e39a0c; }
.rrg-tile--full[b-9myw7pacy8] { --tile-accent: #e5484d; }
/* /Components/Shared/TeamsWebhookManager.razor.rz.scp.css */
/* Each site is a bordered block so the estate reads as a clear list, one row per site, rather than a
   single site behind a picker. Derives its colours from the MudBlazor palette so it survives
   white-labelling and dark mode. */
.teams-sites[b-3xau2zj8mj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.teams-site[b-3xau2zj8mj] {
    padding: 0.85rem 1rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    background: var(--mud-palette-surface, #fff);
}

.teams-site__head[b-3xau2zj8mj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.teams-site__name[b-3xau2zj8mj] {
    font-weight: 500;
    color: var(--mud-palette-text-primary, #101418);
}

/* A small status pill: off (neutral), configured-but-off (amber), enabled (brand). */
.teams-site__status[b-3xau2zj8mj] {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.teams-site__status--off[b-3xau2zj8mj] {
    color: var(--status-neutral-ink);
    background: var(--status-neutral-wash);
}

.teams-site__status--set[b-3xau2zj8mj] {
    color: var(--status-warning-ink); /* configured but not yet enabled */
    background: var(--status-warning-wash);
}

.teams-site__status--on[b-3xau2zj8mj] {
    color: var(--status-positive-ink);
    background: var(--status-positive-wash);
}