@import 'SecureFlow.Web.Client.gtr8h0b5f1.bundle.scp.css';

/* /Components/Admin/Dashboard/Views/EntryDetailView.razor.rz.scp.css */
/* #410: the Power BI tableEx scrolls sideways rather than wrapping a row. */
[b-kekyqwapuf] .entry-detail-grid .mud-table-cell {
    white-space: nowrap;
}
/* /Components/Admin/DestinationDialog.razor.rz.scp.css */
/* The hierarchy line under the dialog title: quieter and smaller than the title, and without
   MudBreadcrumbs' own 16px padding, which is sized for a page header rather than a subtitle. */
.destination-crumbs[b-iytuvyomj8]  .mud-breadcrumbs {
    padding: 0;
}

.destination-crumbs[b-iytuvyomj8]  .mud-breadcrumb-item > a,
.destination-crumbs[b-iytuvyomj8]  .mud-breadcrumb-item.mud-disabled > a,
.destination-crumbs[b-iytuvyomj8]  .mud-breadcrumb-separator > span {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    opacity: 1;
}

.destination-crumbs[b-iytuvyomj8]  .mud-breadcrumb-separator {
    padding: 0 6px;
}
/* /Components/Admin/DestinationTreeNode.razor.rz.scp.css */
.dest-row:hover[b-gqc2h8q6sz] {
    background-color: var(--mud-palette-action-default-hover);
}

.dest-col-type[b-gqc2h8q6sz] {
    flex: 0 0 160px;
    min-width: 160px;
}

.dest-col-floor[b-gqc2h8q6sz] {
    flex: 0 0 100px;
    min-width: 100px;
}
/* /Components/Admin/OfflineStations/OfflineStationsTab.razor.rz.scp.css */
/*
    Layout for the Offline Stations tab. The tab fills its tab panel: a fixed
    filter toolbar is pinned across the top and the data grid claims the rest
    of the height, scrolling internally so the tab body never scrolls.
*/

.os-tab[b-xvkm1mrp70] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* The filter toolbar — a non-scrolling band above the grid. The 16px
   horizontal padding matches .os-grid-wrapper so the row of controls aligns
   with the grid's left and right edges. */
.os-toolbar[b-xvkm1mrp70] {
    flex: 0 0 auto;
    padding: 12px 16px;
    background-color: transparent;
}

/* Give the search box room to read while letting it wrap on a narrow tab. */
.os-search[b-xvkm1mrp70] {
    min-width: 280px;
}

.os-min-days[b-xvkm1mrp70] {
    width: 160px;
}

/* Holds the grid and absorbs the remaining vertical space. min-height: 0 lets
   this flex child shrink so the grid's own scroll region works. The 16px
   horizontal padding matches .os-toolbar above. */
.os-grid-wrapper[b-xvkm1mrp70] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
}

/* The grid is a child component, so its root carries no scope id — reach it
   with ::deep. It is left to size to its content inside the scrolling
   wrapper above. */
.os-grid-wrapper[b-xvkm1mrp70]  .mud-table-container {
    overflow-x: auto;
}
/* /Components/Admin/PatientNotesTab.razor.rz.scp.css */
/* The notes grid's verb column: only as wide as the pin and the pencil, so the note itself gets
   the card - the kiosk panel's rule (PatientDetailStep.razor.css), needed again here since the
   notes became half of the patient dialog's Overview (2026-10-13). ::deep because the grid is
   rendered by PatientNotesPanel, a shared component that carries no host's styling of its own. */
.pn-host[b-lslclrybhi]  .pd-notes-verb {
    width: 1%;
    text-align: right;
    vertical-align: top;
}
/* /Components/Admin/PatientVisitorsTab.razor.rz.scp.css */
/* Half a dialog is narrow (the Overview's right column, 2026-10-13): the visitor's NAME is what
   wraps, never a time or a button. The cells are this component's own markup (the tables' child
   content), so they carry its scope without ::deep. */
.pv-time[b-nnbgwbuxhj] {
    white-space: nowrap;
}

.pv-verb[b-nnbgwbuxhj] {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}
/* /Components/Admin/Queues/QueueItemCard.razor.rz.scp.css */
/* Queue entry card: an elevated surface that sits slightly darker than the
   white section card, with a primary accent bar and a lift-on-hover effect. */
[b-rchql5dotg] .qitem-card {
    border-left: 5px solid var(--mud-palette-primary);
    border-radius: 8px;
    background-color: var(--mud-palette-background-gray);
    transition: box-shadow 120ms ease, transform 120ms ease, background-color 120ms ease;
    /* The line's colour wash, when its line asks for one (QueueLineColor.CardStyle sets the
       variable inline; unset cards get a transparent layer and look exactly as before).
       Painted as a background-image so it layers OVER the surface colour above rather than
       replacing it — that keeps the card distinct from the section paper it sits on, and
       leaves the hover rule, which is a background-color, still able to do its job. */
    background-image: linear-gradient(var(--qitem-wash, transparent), var(--qitem-wash, transparent));
}

/* Dark theme (MainLayout puts .darkmode on the MudLayout): the same alpha that reads as a
   tint over a light gray surface is all but invisible over a dark one. */
.darkmode .qitem-host[b-rchql5dotg]  .qitem-card {
    background-image: linear-gradient(var(--qitem-wash-dark, transparent), var(--qitem-wash-dark, transparent));
}

[b-rchql5dotg] .qitem-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-12);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

/* Card header, two rows: identity · tools · the state's action buttons across the top, the
   latest event beneath them. Both button tracks are content-sized and the identity track takes
   all the slack (shrinking below its content, so a long name wraps instead of overflowing),
   which is what holds the two groups against the card's right edge — the same x on every card,
   however long the name is. No column-gap: the only gap that matters along the row is the
   tools' own stand-off from the actions, and the identity carries its own margin.
   Start-aligned, so the buttons sit level with the name rather than with the middle of the
   identity block. */
.qitem-header[b-rchql5dotg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    align-items: start;
    row-gap: 4px;
}

/* Two columns: the number + line badges, then everything about the person. The name takes
   row 1 and the supporting detail (DOB, the line's extra field, copy) row 2 — both in
   column 2, which is what puts the detail under the NAME rather than under the line code. */
.qitem-ident[b-rchql5dotg] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    /* Takes the header's slack, which is what pushes the buttons right. The margin is the
       gap to them; min-width lets a long name shrink the block rather than overflow.
       Spanning both header rows keeps the event line beside the identity rather than under
       it, so the card is no taller than when the two shared one row. */
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
    margin-right: 16px;
}

/* Number on top, line code (and the held-over badge, when there is one) underneath — the
   whole stack spanning both identity rows and centred against them, so it reads as one block
   labelling the person beside it rather than as something belonging to the name's line. */
.qitem-lead[b-rchql5dotg] {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.qitem-nameline[b-rchql5dotg],
.qitem-sub[b-rchql5dotg] {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.qitem-nameline[b-rchql5dotg] {
    grid-row: 1;
}

.qitem-sub[b-rchql5dotg] {
    grid-row: 2;
}

/* Fixed width, not min-width: the visitor name starts immediately after this, and the SLA
   block below is aligned to that x. A number cell that grew with a three-digit display number
   would slide the name out from over the times it is supposed to sit above. QueueNumberLabel
   puts this class on its outer element either way, so both forms take the same track. Width
   rather than flex-basis, because the stack it sits in runs down the page, not across. */
.qitem-ident[b-rchql5dotg]  .qitem-number {
    width: 3.5rem;
}

/* A shade smaller than MudBlazor's h6, which is what the label steps down to when it stacks.
   The card is the one caller tight enough on vertical space to care. */
.qitem-ident[b-rchql5dotg]  .qnum-stack .qnum {
    font-size: 1.05rem;
    font-weight: 600;
}

/* Wraps rather than ellipsises. The name is the one thing on the card that must survive
   every width — a half-shown "MICHAEL ANDREW ST…" is worse than a two-line name. */
.qitem-ident[b-rchql5dotg]  .qitem-name {
    overflow-wrap: anywhere;
}

.qitem-ident[b-rchql5dotg]  .qitem-dob {
    white-space: nowrap;
}

/* A caption and its copy button, kept on one line. */
.qitem-inline[b-rchql5dotg] {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* The line's extra captured field, sitting to the right of the date of birth. Its own left
   margin — on top of the identity row's gap — keeps it from reading as part of the date
   beside it, since the two are deliberately the same size and colour. */
.qitem-extra[b-rchql5dotg] {
    margin-left: 1rem;
}

/* The value stands off its label by more than the row's default gap. They are the same size
   and colour, so without the space they read as one phrase rather than as label + value. */
.qitem-extra[b-rchql5dotg]  .qitem-extra-value {
    margin-left: .5rem;
}

/* Trimmed padding: these sit inline with caption text, and MudBlazor's default icon-button
   padding would make the whole identity row taller than the name it is built around. */
.qitem-ident[b-rchql5dotg]  .qitem-inline-icon {
    padding: 2px;
}

/* First of the two right-hand groups, held off the action buttons beside it by a fixed
   margin so Notes/History/Move never read as part of the state's buttons. */
.qitem-tools[b-rchql5dotg] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 150px;
}

/* The Notes button's popover: the Roles screen's Features popover in shape - left-aligned,
   capped, and scrolling inside itself rather than running off the screen. It renders in the
   popover layer, but these elements are written in this component, so the scoped rules still
   reach them. Under half the screen tall, so it always fits on one side of the button. */
.qitem-peek[b-rchql5dotg] {
    text-align: left;
    white-space: normal;
    max-width: 24rem;
    max-height: 45vh;
    overflow-y: auto;
    padding: 6px 4px;
}

/* Who, when and at what step, over each note - the Features popover's group-header look. */
.qitem-peek-by[b-rchql5dotg] {
    margin-top: 10px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    opacity: .75;
}

.qitem-peek-by:first-child[b-rchql5dotg] {
    margin-top: 0;
}

/* Regular weight, not the tooltip's 500: this is prose, and a note's own bold has to show. */
.qitem-peek-body[b-rchql5dotg] {
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.45;
}

/* The shared note styles give every paragraph a bottom margin; the last one's would only
   pad the gap before the next note's header. */
.qitem-peek-body[b-rchql5dotg]  p:last-child {
    margin-bottom: 0;
}

/* The state's own buttons. Content-sized track, so which buttons the state happens to show
   changes the group's width without moving anything to the left of it. */
.qitem-actions[b-rchql5dotg] {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Latest event, on the header's second row: the tag on top, then who logged it and when
   beneath. Two lines rather than one run, because the tag is what staff scan for and it
   should not have to be picked out of the middle of a sentence.

   Spanning every track — the flexible identity one included — is what makes it free: a grid
   item spanning a flexible track contributes nothing to sizing the content-sized tracks it
   also spans, so however long this line runs it can never widen the button groups above it.
   Right-aligned, so it grows leftwards underneath them. */
.qitem-event[b-rchql5dotg] {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: right;
    line-height: 1.3;
}

/* The tag itself: a step up in size and weight from the caption it used to be set in, so it
   reads as the card's status rather than as a footnote to it. */
.qitem-event-tag[b-rchql5dotg] {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Who logged the latest event and when. Unchanged from what trailed the tag before —
   lighter and quieter, so the event stays the thing being read and this answers the
   follow-up question. */
.qitem-event-by[b-rchql5dotg] {
    display: block;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    opacity: .75;
    font-style: italic;
}

/* SLA rows: label · time · progress bar (fills the middle) · percent.
   Every track but the bar is a fixed width. That is the whole point: these four things
   have to line up as columns down the entire list, and a track sized to its own content
   ("Total" on one card, "Returned to queue" on the next) would put each card's time and
   percent somewhere different. The bar takes 1fr so it actually renders — max-content
   would collapse it to nothing. */
.qitem-sla-grid[b-rchql5dotg] {
    display: grid;
    grid-template-columns: 9.5rem 4.5rem 1fr 3.5rem;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    /* The header's third row, under everything. Its row gap plus this margin is the 8px the
       block has always stood off the header by. */
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 4px;
    /* Aligned with the visitor name above: the 3.5rem number cell plus the identity row's
       8px gap. The two time lines then sit directly under the name rather than starting
       flush with the queue number. (In the All-categories view a category chip sits between
       the number and the name, so there the name starts further right than this.) */
    margin-left: 4rem;
}

/* Bars off: the percent moves into the third track, right beside the time it measures, and
   the two lines move up into the header's second row, between the person's detail on the left
   and the latest event on the right, so the row they took under the header is gone.
   Centred in the span those two share (the name's x, kept by the margin, to the card's right
   edge) rather than in the gap between them: that gap moves with every DOB and every name, and
   the times have to sit at one x down the list. Line height trimmed so the pair is no taller
   than the event's own two lines beside it. */
.qitem-sla-grid--nobars[b-rchql5dotg] {
    grid-template-columns: 9.5rem 4.5rem 3.5rem;
    grid-row: 2;
    justify-self: center;
    margin-top: 0;
    row-gap: 0;
    line-height: 1.2;
}

/* The label says which clock; the time is the thing being read. Separating them by size
   and colour is enough — previously the two ran together in one caption at the same size
   and colour, which is what made them hard to tell apart. */
.qitem-sla-label[b-rchql5dotg] {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tabular figures so the digits sit in the same place row to row and card to card —
   proportional numerals make a column of times look ragged even when it is aligned. */
.qitem-sla-time[b-rchql5dotg] {
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.qitem-sla-pct[b-rchql5dotg] {
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Thin SLA bars. Even MudProgressLinear's smallest preset is chunkier than this card
   wants: the bar is a glance, not the point, and the colour carries the signal. Set
   here rather than inline so both bars can never drift apart. */
.qitem-sla-grid[b-rchql5dotg]  .mud-progress-linear {
    height: 4px;
}

/* ── Narrow cards ────────────────────────────────────────────────────────────
   Keyed to the card, not the window: the nav drawer opening or closing moves the card's
   width by ~240px at a fixed viewport, so a viewport media query would fire at the wrong
   moment in one of the two states. The identity block stacks at every width; all that is
   left to give up down here are the two button labels, and the bars-off times' place
   beside the event. */
.qitem-host[b-rchql5dotg] {
    container-type: inline-size;
}

@container (max-width: 1100px) {
    /* Icons only. The label goes, the badge stays — the note count is the reason the
       button is worth glancing at in the first place. */
    .qitem-btn-text[b-rchql5dotg] {
        display: none;
    }

    /* Tighter between the tools themselves, and the stand-off from the action buttons halves:
       a narrow card has no room to give 150px away, but some gap has to stay — it is the only
       thing separating the two groups once the labels are gone. */
    .qitem-tools[b-rchql5dotg] {
        gap: 8px;
        margin-right: 75px;
    }

    .qitem-tools[b-rchql5dotg]  .mud-button {
        min-width: 0;
        padding: 6px;
    }

    .qitem-tools[b-rchql5dotg]  .mud-button-icon-start {
        margin: 0;
    }

    /* Bars off: no room between the person's detail and the event without running into one
       of them, so the times go back under the name. */
    .qitem-sla-grid--nobars[b-rchql5dotg] {
        grid-row: 3;
        justify-self: stretch;
        margin-top: 4px;
    }
}
/* /Components/Admin/Queues/QueueItemHistoryDialog.razor.rz.scp.css */
/* A note body shown in the timeline's hover tooltip. Tooltips default to nowrap and centred
   text, neither of which suits a paragraph of prose. The note's own list/heading styling comes
   from the shared .sf-html-content rules in wwwroot/html-editor.css, which already exist for
   exactly this problem (MudBlazor's reset flattens ul/ol inside its surfaces). */
.qnote-tooltip[b-pjwtr0jg4v] {
    max-width: 24rem;
    text-align: left;
    white-space: normal;
}
/* /Components/Admin/Queues/QueueNumberLabel.razor.rz.scp.css */
/* Number over day. The day goes underneath rather than beside so the label stays as narrow as
   the number itself — on the console card that keeps every row's number column aligned, and in
   a dialog header it keeps the visitor's name where it sits for every other entry. */
.qnum-stack[b-1brp8mync5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Tightened here rather than on the stack: MudBlazor's typography classes carry their own
   line-height, so a value on the flex container is inherited by neither child and the two
   lines together grow the row they sit in. */
.qnum-stack[b-1brp8mync5]  .qnum {
    line-height: 1.15;
}

/* The issuing day, as a badge rather than as more text: it qualifies the number above it and
   has to read as a label on it, not as a second number. Warning-toned because a held-over
   entry is one the nightly reset deliberately left open. */
.qnum-day[b-1brp8mync5] {
    display: inline-block;
    padding: 0 5px;
    border-radius: 6px;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}
/* /Components/Admin/RecordLink.razor.rz.scp.css */
/* The dialog form of RecordLink is a <button> that has to read exactly like the MudLink in the
   next grid over: the mud-link classes bring the colour and the hover underline, and this strips
   the button chrome and lets the cell's own font through (a button does not inherit it). */
.sf-record-link[b-f1txuhse41] {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    cursor: pointer;
}

.sf-record-link:focus-visible[b-f1txuhse41] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* /Components/Admin/SettingsExplorer/SettingsEditor.razor.rz.scp.css */
/*
    A single editable field row inside a settings card, laid out like the
    read-only viewer's setting rows: the field name in a fixed-width left
    column with its editor control beside it.
*/

.se-edit-field[b-2lf3pe549k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 1rem;
    padding: 4px 0;
}

.se-edit-field-name[b-2lf3pe549k] {
    flex: 0 0 240px;
    color: var(--mud-palette-text-secondary);
}

.se-edit-field-control[b-2lf3pe549k] {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Admin/SettingsExplorer/SettingsExplorerTab.razor.rz.scp.css */
/*
    Layout for the Settings Explorer tab. The tab is a full-height flex column:
    a shadowed station-count band is pinned across the top and the two-pane
    splitter claims the rest; each pane scrolls internally, so the tab itself
    never scrolls.
*/

.se-page[b-fmxnhjwhvb] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - var(--mud-appbar-height) - 48px); /* subtract the tab header height, which is not part of the panel body */
    overflow: hidden;
}

/* The station-count band: a raised card with margin on all sides so its
   elevation-3 shadow is visible all round, and a z-index so the shadow falls
   over the splitter panes below instead of being painted under them. */
.se-band[b-fmxnhjwhvb] {
    flex: 0 0 auto;
    margin: 12px;
    padding: 12px 24px;
    position: relative;
    z-index: 2;
}

/* Holds the splitter and absorbs the remaining vertical space. min-height: 0
   lets this flex child shrink so its scrolling descendants work. */
.se-split-wrapper[b-fmxnhjwhvb] {
    flex: 1 1 auto;
    min-height: 0;
}

/* MudSplitPanel is a child component, so its root carries no scope id —
   reach it (and its bare drag divider) with ::deep. */
.se-split-wrapper[b-fmxnhjwhvb]  .mud-split-panel {
    height: 100%;
}

.se-split-wrapper[b-fmxnhjwhvb]  .mud-split-panel .divider {
    background-color: var(--mud-palette-divider);
    transition: background-color .15s ease;
}

.se-split-wrapper[b-fmxnhjwhvb]  .mud-split-panel .divider:hover,
.se-split-wrapper[b-fmxnhjwhvb]  .mud-split-panel .divider:focus {
    background-color: var(--mud-palette-primary);
}

/* A pane fills its half of the splitter and stacks a fixed header over a
   scrolling body. */
.se-pane[b-fmxnhjwhvb] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.se-pane-header[b-fmxnhjwhvb] {
    flex: 0 0 auto;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.se-pane-body[b-fmxnhjwhvb] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}

.se-pane-body--padded[b-fmxnhjwhvb] {
    padding: 16px;
}
/* /Components/Admin/SettingsExplorer/SettingsViewer.razor.rz.scp.css */
/*
    The detail pane: a fixed header (the organization/station breadcrumb with
    the Edit action, the check-in line, and the Settings heading with its
    search box) over a scrolling body of settings cards. The two are flex
    children of the host page's .se-pane column.
*/

.detail-header[b-8kqda0fr1c] {
    flex: 0 0 auto;
    padding: 8px 16px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.detail-body[b-8kqda0fr1c] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

/* A header row — content on the left, its action stretched/closed on the right. */
.detail-header-row[b-8kqda0fr1c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 4px 0;
}

/* The search field fills the rest of the Settings row. */
.detail-search[b-8kqda0fr1c] {
    flex: 1 1 auto;
}

/* Check-in line — the label, then the two alerts splitting the space evenly. */
.detail-checkin[b-8kqda0fr1c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 4px 0;
}

.detail-checkin-label[b-8kqda0fr1c] {
    flex: 0 0 auto;
}

.detail-checkin-alert[b-8kqda0fr1c] {
    flex: 1 1 0;
    min-width: 0;
}

/*
    Layout for a single setting row inside a settings card: the name in a
    fixed-width left column with its value beside it.
*/

.se-setting[b-8kqda0fr1c] {
    display: flex;
    gap: 1rem;
    padding: 4px 0;
    /* A slight indent so the fields sit in from their group's heading. */
    margin-left: 1rem;
    align-items: baseline;
}

.se-setting-name[b-8kqda0fr1c] {
    flex: 0 0 240px;
    color: var(--mud-palette-text-secondary);
}

.se-setting-value[b-8kqda0fr1c] {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
/* Account pages: one card on a quiet ground. Colours come from the SecureFlow mark itself —
   navy (#1b2340) for text, its blue (#4a78e0) for the one primary action per screen — so the logo
   and the buttons read as one thing. Plain CSS on purpose: this layout has no MudBlazor. */

.account-shell[b-5lgwap62x7] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* The on-screen keyboard's band, while it is up (signin-keyboard.js sets the height): the card
       centres in what is left above it instead of sitting behind the keys. */
    padding-bottom: calc(1rem + var(--signin-osk-reserve, 0px));
    box-sizing: border-box;
    background:
        radial-gradient(60rem 30rem at 15% -10%, rgba(74, 120, 224, 0.16), transparent 60%),
        radial-gradient(40rem 24rem at 100% 100%, rgba(27, 35, 64, 0.10), transparent 60%),
        #f3f5f9;
    font-family: "Roboto", "Segoe UI", sans-serif;
    color: #1b2340;
}

/* Subtle animated mark in the corner: 20% of the viewport, faded into the ground. */
.account-watermark[b-5lgwap62x7] {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    width: 20vmin;
    height: 20vmin;
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
}

.account-card[b-5lgwap62x7] {
    width: 100%;
    max-width: 25rem;
    padding: 2.25rem 2.25rem 2rem;
    background: #ffffff;
    border: 1px solid rgba(27, 35, 64, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(27, 35, 64, 0.12), 0 2px 6px rgba(27, 35, 64, 0.06);
    box-sizing: border-box;
}

.account-brand[b-5lgwap62x7] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.5rem;
}

.account-brand-mark[b-5lgwap62x7] {
    width: 44px;
    height: 44px;
    flex: none;
}

.account-brand-name[b-5lgwap62x7] {
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1b2340;
}

.account-card[b-5lgwap62x7]  h1 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: #1b2340;
}

.account-card[b-5lgwap62x7]  p,
.account-card[b-5lgwap62x7]  .account-lead {
    margin: 0 0 1rem;
    color: #4a4f5c;
    line-height: 1.45;
}

.account-card[b-5lgwap62x7]  .account-lead strong {
    color: #1b2340;
}

/* The person the remembered SSO door signs in, above its "Continue as ..." button: a quiet tile, so
   the name is read before the button is pressed by reflex. */
.account-card[b-5lgwap62x7]  .account-who {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    background: #f7f8fb;
}

.account-card[b-5lgwap62x7]  .account-who-initials {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(74, 120, 224, 0.14);
    color: #2f5fc4;
    font-size: 0.95rem;
    font-weight: 600;
}

.account-card[b-5lgwap62x7]  .account-who-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-card[b-5lgwap62x7]  .account-who-name {
    font-weight: 600;
    color: #1b2340;
    overflow-wrap: anywhere;
}

.account-card[b-5lgwap62x7]  .account-who-address {
    font-size: 0.85rem;
    color: #4a4f5c;
    overflow-wrap: anywhere;
}

.account-card[b-5lgwap62x7]  .account-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.account-card[b-5lgwap62x7]  .account-field label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4a4f5c;
}

.account-card[b-5lgwap62x7]  .account-field input {
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid #c6cad3;
    border-radius: 8px;
    background: #ffffff;
    color: #1b2340;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.account-card[b-5lgwap62x7]  .account-field input::placeholder {
    color: #9aa0ab;
}

.account-card[b-5lgwap62x7]  .account-field input:focus {
    outline: none;
    border-color: #4a78e0;
    box-shadow: 0 0 0 3px rgba(74, 120, 224, 0.25);
}

/* Password box with its show/hide eye (Pages/Account/PasswordReveal.razor) sitting inside the
   right edge. Edge's own reveal eye is switched off so there are never two. */
.account-card[b-5lgwap62x7]  .account-password {
    position: relative;
    display: flex;
}

.account-card[b-5lgwap62x7]  .account-password input {
    flex: 1;
    min-width: 0;
    padding-right: 2.75rem;
}

.account-card[b-5lgwap62x7]  .account-password input::-ms-reveal {
    display: none;
}

.account-card[b-5lgwap62x7]  .account-reveal {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    display: flex;
    padding: 0.4rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: #80838a;
    cursor: pointer;
}

.account-card[b-5lgwap62x7]  .account-reveal:hover {
    color: #1b2340;
}

.account-card[b-5lgwap62x7]  .account-reveal:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 120, 224, 0.35);
}

.account-card[b-5lgwap62x7]  .account-reveal svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.account-card[b-5lgwap62x7]  .account-reveal[aria-pressed="true"] .account-reveal-show,
.account-card[b-5lgwap62x7]  .account-reveal[aria-pressed="false"] .account-reveal-hide {
    display: none;
}

/* The one primary action on any screen: Next, Continue with <org>, Sign in. */
.account-card[b-5lgwap62x7]  .account-submit {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: #4a78e0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease, box-shadow 120ms ease;
}

.account-card[b-5lgwap62x7]  .account-submit:hover {
    background: #3b66c9;
}

.account-card[b-5lgwap62x7]  .account-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 120, 224, 0.35);
}

/* Quieter twin of the primary button - "Next" beside a lit "Continue with <org>", or the
   password "Sign in" under one. Same size and shape so the pair reads as one control set. */
.account-card[b-5lgwap62x7]  .account-submit-secondary {
    color: #1b2340;
    background: #ffffff;
    border: 1px solid #c6cad3;
}

.account-card[b-5lgwap62x7]  .account-submit-secondary:hover {
    background: #f3f5f9;
}

/* Identify step: Next first, the SSO Continue button (hidden until a realm is known) below it,
   so it never shifts Next when it appears. */
.account-card[b-5lgwap62x7]  .account-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.account-card[b-5lgwap62x7]  .account-sso-continue {
    margin-top: 0.25rem;
}

.account-card[b-5lgwap62x7]  .account-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    color: #80838a;
    font-size: 0.8rem;
}

.account-card[b-5lgwap62x7]  .account-divider::before,
.account-card[b-5lgwap62x7]  .account-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e7e9ee;
}

.account-card[b-5lgwap62x7]  .account-divider span {
    padding: 0 0.6rem;
}

/* Everything that is not the primary action is a quiet text link, whether it is an <a> or a
   submit button that has to post a form (the account picker, the Microsoft catch-all). */
.account-card[b-5lgwap62x7]  a,
.account-card[b-5lgwap62x7]  .account-link-button {
    color: #2f5fc4;
    font-size: 0.9rem;
    font-family: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.account-card[b-5lgwap62x7]  a:hover,
.account-card[b-5lgwap62x7]  .account-link-button:hover {
    text-decoration: underline;
}

.account-card[b-5lgwap62x7]  .account-link-button {
    display: block;
    width: 100%;
    margin-top: 0.85rem;
    text-align: center;
}

.account-card[b-5lgwap62x7]  .account-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e7e9ee;
}

.account-card[b-5lgwap62x7]  .account-links .account-link-button {
    margin-top: 0;
    width: auto;
}

.account-card[b-5lgwap62x7]  .account-inline-form {
    margin: 0;
}

.account-card[b-5lgwap62x7]  .account-error {
    margin-bottom: 1rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid #ecc1c1;
    border-radius: 8px;
    background: #fdf0f0;
    color: #8f2727;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* A link inside the message (the lockout's "reset your password") sits mid-sentence, so it is
   underlined: the link blue against the red text is too close to tell apart by color alone. */
.account-card[b-5lgwap62x7]  .account-error a {
    text-decoration: underline;
}

.account-card[b-5lgwap62x7]  .validation-message {
    color: #8f2727;
    font-size: 0.8rem;
}

@media (max-width: 480px) {
    .account-card[b-5lgwap62x7] {
        padding: 1.75rem 1.5rem 1.5rem;
        border-radius: 12px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
#components-reconnect-modal[b-lbjfrw70tn] {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1400;
    overflow: hidden;
    background-color: transparent;
    border: none;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
}

    #components-reconnect-modal[b-lbjfrw70tn]::backdrop {
        background: rgba(10, 16, 28, 0.5);
    }

    #components-reconnect-modal.components-reconnect-show[b-lbjfrw70tn],
    #components-reconnect-modal[open][b-lbjfrw70tn],
    #components-reconnect-modal.components-reconnect-failed[b-lbjfrw70tn],
    #components-reconnect-modal.components-reconnect-repeated-attempt[b-lbjfrw70tn],
    #components-reconnect-modal.components-reconnect-paused[b-lbjfrw70tn],
    #components-reconnect-modal.components-reconnect-resume-failed[b-lbjfrw70tn],
    #components-reconnect-modal.components-pause[b-lbjfrw70tn],
    #components-reconnect-modal.components-resume-failed[b-lbjfrw70tn] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.components-reconnect-backdrop[b-lbjfrw70tn] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(90% 60% at 80% 0%, color-mix(in srgb, var(--mud-palette-primary, #594AE2) 12%, transparent), transparent 60%), radial-gradient(80% 55% at 0% 100%, color-mix(in srgb, var(--mud-palette-info, #2196f3) 16%, transparent), transparent 62%), rgba(8, 12, 20, 0.5);
}

.components-reconnect-surface[b-lbjfrw70tn] {
    width: min(480px, 100%);
    border-radius: var(--mud-default-borderradius, 12px);
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default, #e0e0e0) 70%, transparent);
    background: var(--mud-palette-surface, #fff);
    box-shadow: var(--mud-elevation-24, 0 16px 30px rgba(0, 0, 0, 0.28));
    color: var(--mud-palette-text-primary, #1f2937);
    padding: 20px 20px 18px;
}

.components-reconnect-header[b-lbjfrw70tn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

    .components-reconnect-header h2[b-lbjfrw70tn] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.3;
    }

.components-reconnect-status-dot[b-lbjfrw70tn] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mud-palette-warning, #f59e0b);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-warning, #f59e0b) 25%, transparent);
}

.components-reconnect-supporting[b-lbjfrw70tn],
.components-reconnect-message[b-lbjfrw70tn] {
    margin: 0;
    line-height: 1.45;
    font-size: 0.95rem;
}

.components-reconnect-supporting[b-lbjfrw70tn] {
    color: var(--mud-palette-text-secondary, #52607a);
    margin-bottom: 14px;
}

.components-reconnect-message[b-lbjfrw70tn] {
    font-weight: 500;
}

.components-reconnect-danger[b-lbjfrw70tn] {
    color: var(--mud-palette-error, #b00020);
}

.components-reconnect-actions[b-lbjfrw70tn] {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.components-reconnect-first-attempt-visible[b-lbjfrw70tn],
.components-reconnect-repeated-attempt-visible[b-lbjfrw70tn],
.components-reconnect-failed-visible[b-lbjfrw70tn],
.components-pause-visible[b-lbjfrw70tn],
.components-resume-failed-visible[b-lbjfrw70tn] {
    display: none;
}

dialog[open].components-reconnect-show .components-reconnect-first-attempt-visible[b-lbjfrw70tn] {
    display: block;
}

dialog[open].components-reconnect-show .components-rejoin-loader[b-lbjfrw70tn] {
    display: inline-flex;
}

dialog[open].components-reconnect-failed .components-reconnect-failed-visible[b-lbjfrw70tn] {
    display: block;
}

dialog[open].components-reconnect-failed #components-reconnect-button[b-lbjfrw70tn] {
    display: block;
}

dialog[open].components-reconnect-repeated-attempt .components-reconnect-repeated-attempt-visible[b-lbjfrw70tn] {
    display: block;
}

dialog[open].components-reconnect-repeated-attempt .components-rejoin-loader[b-lbjfrw70tn] {
    display: inline-flex;
}

dialog[open].components-reconnect-paused .components-pause-visible[b-lbjfrw70tn],
dialog[open].components-pause .components-pause-visible[b-lbjfrw70tn] {
    display: block;
}

dialog[open].components-reconnect-paused #components-resume-button[b-lbjfrw70tn],
dialog[open].components-pause #components-resume-button[b-lbjfrw70tn],
dialog[open].components-reconnect-resume-failed #components-resume-button[b-lbjfrw70tn],
dialog[open].components-resume-failed #components-resume-button[b-lbjfrw70tn] {
    display: block;
}

dialog[open].components-reconnect-resume-failed .components-resume-failed-visible[b-lbjfrw70tn],
dialog[open].components-resume-failed .components-resume-failed-visible[b-lbjfrw70tn] {
    display: block;
}

.components-rejoin-loader[b-lbjfrw70tn] {
    display: none;
    margin-bottom: 10px;
    gap: 8px;
}

    .components-rejoin-loader div[b-lbjfrw70tn] {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: var(--mud-palette-primary, #594AE2);
        animation: reconnect-pulse-b-lbjfrw70tn 1.2s infinite ease-in-out both;
    }

        .components-rejoin-loader div:nth-child(1)[b-lbjfrw70tn] {
            animation-delay: -0.24s;
        }

        .components-rejoin-loader div:nth-child(2)[b-lbjfrw70tn] {
            animation-delay: -0.12s;
        }

@keyframes reconnect-pulse-b-lbjfrw70tn {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

#components-reconnect-button[b-lbjfrw70tn],
#components-resume-button[b-lbjfrw70tn] {
    display: none;
    min-width: 92px;
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: var(--mud-palette-primary, #594AE2);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    transition: filter 140ms ease, transform 140ms ease;
}

    #components-reconnect-button:hover[b-lbjfrw70tn],
    #components-resume-button:hover[b-lbjfrw70tn] {
        filter: brightness(0.95);
    }

    #components-reconnect-button:active[b-lbjfrw70tn],
    #components-resume-button:active[b-lbjfrw70tn] {
        transform: translateY(1px);
    }

@media (max-width: 600px) {
    .components-reconnect-backdrop[b-lbjfrw70tn] {
        padding: 14px;
    }

    .components-reconnect-surface[b-lbjfrw70tn] {
        padding: 16px;
    }
}
/* /Components/Pages/Account/SignInKeyboard.razor.rz.scp.css */
/* The sign-in keyboard (see the razor): the kiosk dock's shape - big keys in a band across the
   bottom of the screen, Hide at the bottom right - in the account pages' colours. Plain CSS like
   the rest of these pages: there is no MudBlazor theme here to take the kiosk's colours from. */
.signin-osk[b-uwetw2mmol] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #d9dce3;
    background: #ffffff;
    box-shadow: 0 -8px 24px rgba(27, 35, 64, 0.08);
}

/* `hidden` is the script's switch for the keyboard and its layers; the display rules here would
   otherwise beat the browser's own [hidden] rule. */
.signin-osk[hidden][b-uwetw2mmol],
.signin-osk-layer[hidden][b-uwetw2mmol] {
    display: none;
}

/* Key travel stays sane on a wide lobby screen; below that the grid gives way, not Hide. */
.signin-osk-pad[b-uwetw2mmol] {
    flex: 1 1 900px;
    max-width: 900px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.signin-osk-layer[b-uwetw2mmol] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.signin-osk-row[b-uwetw2mmol] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.signin-osk-key[b-uwetw2mmol] {
    flex: 1 1 0;
    min-height: 56px;
    min-width: 0;
    padding: 0;
    border: 1px solid #c6cad3;
    border-radius: 8px;
    background: #ffffff;
    color: #1b2340;
    font-size: 1.35rem;
    font-family: inherit;
    cursor: pointer;
}

.signin-osk-key:active[b-uwetw2mmol] {
    border-color: #4a78e0;
    background: #4a78e0;
    color: #ffffff;
}

.signin-osk-key:focus-visible[b-uwetw2mmol] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 120, 224, 0.35);
}

/* Behaviour keys (Shift, the layer switches, Backspace, Clear) read as chrome, not characters. */
.signin-osk-action[b-uwetw2mmol] {
    flex: 1.5 1 0;
    background: #f3f5f9;
    font-size: 1.1rem;
}

.signin-osk-space[b-uwetw2mmol] {
    flex: 4 1 0;
    background: #f3f5f9;
    font-size: 1.1rem;
}

/* Shift (signin-keyboard.js): "once" capitalises the next character, "lock" every one until it is
   pressed again. The letter keys show which case they will type. */
.signin-osk[data-shift="once"] .signin-osk-letter[b-uwetw2mmol],
.signin-osk[data-shift="lock"] .signin-osk-letter[b-uwetw2mmol] {
    text-transform: uppercase;
}

.signin-osk[data-shift="once"] .signin-osk-shift[b-uwetw2mmol] {
    border-color: #4a78e0;
    background: rgba(74, 120, 224, 0.14);
    color: #2f5fc4;
}

.signin-osk[data-shift="lock"] .signin-osk-shift[b-uwetw2mmol] {
    border-color: #4a78e0;
    background: #4a78e0;
    color: #ffffff;
}

/* Hide: outside the grid at a fixed width, so the grid, not the way out, gives when it is narrow. */
.signin-osk-hide[b-uwetw2mmol] {
    flex: 0 0 auto;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 88px;
    min-height: 56px;
    padding: 4px;
    border: 1px solid #c6cad3;
    border-radius: 8px;
    background: #f3f5f9;
    color: #1b2340;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
}

.signin-osk-hide:active[b-uwetw2mmol] {
    border-color: #4a78e0;
    background: #4a78e0;
    color: #ffffff;
}

.signin-osk-hide svg[b-uwetw2mmol] {
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
}
/* /Components/Pages/Admin/Announcements.razor.rz.scp.css */
/* Announcements (owner 2026-10-21): the numbered steps, the placement thumbnails (a picture of
   each spot on the kiosk home screen) and the preview beside the editor. Colours come from the
   MudBlazor palette variables, so every theme, light or dark, draws them in its own ink. */

.sf-ann-step[b-z0iew1kl55] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.sf-ann-step-no[b-z0iew1kl55] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.sf-ann-step-body[b-z0iew1kl55] {
    padding-left: 34px;
    margin-top: 4px;
}

/* The five placements as pictures: a little screen with the three category buttons in the
   middle and the notice as a bar in its zone; the dialog floats over dimmed buttons. The
   picture IS the radio: MudRadio's circle is parked off-screen (still focusable, so the
   keyboard works), the picked one wears the frame, and focus outlines the picture. Five fit
   in one row beside the preview on a 1366-wide laptop. */
.sf-ann-positions[b-z0iew1kl55] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
}

.sf-ann-positions[b-z0iew1kl55]  .mud-radio {
    position: relative;
    margin: 0;
}

.sf-ann-positions[b-z0iew1kl55]  .mud-radio > .mud-button-root {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.sf-ann-positions[b-z0iew1kl55]  .mud-radio:has(input:checked) .sf-ann-thumb,
.sf-ann-positions[b-z0iew1kl55]  .mud-radio:has(.mud-checked) .sf-ann-thumb {
    border: 2px solid var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover, rgba(73, 115, 162, .1));
}

.sf-ann-positions[b-z0iew1kl55]  .mud-radio:has(input:checked) .sf-ann-thumb-label,
.sf-ann-positions[b-z0iew1kl55]  .mud-radio:has(.mud-checked) .sf-ann-thumb-label {
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.sf-ann-positions[b-z0iew1kl55]  .mud-radio:focus-within .sf-ann-thumb {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.sf-ann-thumb-wrap[b-z0iew1kl55] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    cursor: pointer;
}

.sf-ann-thumb[b-z0iew1kl55] {
    position: relative;
    display: block;
    width: 86px;
    height: 58px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    box-sizing: border-box;
}

.sf-ann-thumb-bar[b-z0iew1kl55] {
    position: absolute;
    border-radius: 2px;
    background: var(--mud-palette-tertiary);
}

.sf-ann-thumb-btns[b-z0iew1kl55] {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sf-ann-thumb-btns span[b-z0iew1kl55] {
    height: 5px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
    opacity: .45;
}

.sf-ann-thumb-1 .sf-ann-thumb-bar[b-z0iew1kl55] { left: 5px; top: 9px; bottom: 9px; width: 11px; }
.sf-ann-thumb-1 .sf-ann-thumb-btns[b-z0iew1kl55] { left: 32px; right: 22px; top: 17px; }
.sf-ann-thumb-2 .sf-ann-thumb-bar[b-z0iew1kl55] { left: 7px; right: 7px; top: 5px; height: 7px; }
.sf-ann-thumb-2 .sf-ann-thumb-btns[b-z0iew1kl55] { left: 28px; right: 28px; top: 21px; }
.sf-ann-thumb-3 .sf-ann-thumb-bar[b-z0iew1kl55] { right: 5px; top: 9px; bottom: 9px; width: 11px; }
.sf-ann-thumb-3 .sf-ann-thumb-btns[b-z0iew1kl55] { left: 22px; right: 32px; top: 17px; }
.sf-ann-thumb-4 .sf-ann-thumb-bar[b-z0iew1kl55] { left: 7px; right: 7px; bottom: 5px; height: 7px; }
.sf-ann-thumb-4 .sf-ann-thumb-btns[b-z0iew1kl55] { left: 28px; right: 28px; top: 11px; }
.sf-ann-thumb-5 .sf-ann-thumb-bar[b-z0iew1kl55] { display: none; }
.sf-ann-thumb-5 .sf-ann-thumb-btns[b-z0iew1kl55] { left: 28px; right: 28px; top: 11px; opacity: .4; }

.sf-ann-thumb-dialog[b-z0iew1kl55] {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 14px;
    height: 28px;
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-tertiary);
    border-radius: 4px;
    box-sizing: border-box;
}

.sf-ann-thumb-dialog span[b-z0iew1kl55] {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 4px;
    height: 5px;
    border-radius: 2px;
    background: var(--mud-palette-tertiary);
}

.sf-ann-thumb-dialog span + span[b-z0iew1kl55] {
    top: 13px;
    left: 14px;
    right: 14px;
    background: var(--mud-palette-primary);
    opacity: .45;
}

/* The preview: the kiosk home grid in miniature (KioskHome.razor.css) - a notice zone on each
   edge around the prompt and the category buttons, the dialog over a scrim. */
.sf-ann-preview[b-z0iew1kl55] {
    position: relative;
    display: grid;
    grid-template-areas:
        "top    top    top"
        "left   center right"
        "bottom bottom bottom";
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    min-height: 300px;
    padding: 14px;
    box-sizing: border-box;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.sf-ann-preview-zone[b-z0iew1kl55] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.sf-ann-preview-top[b-z0iew1kl55] { grid-area: top; }
.sf-ann-preview-bottom[b-z0iew1kl55] { grid-area: bottom; }
.sf-ann-preview-left[b-z0iew1kl55] { grid-area: left; width: 112px; }
.sf-ann-preview-right[b-z0iew1kl55] { grid-area: right; width: 112px; }

.sf-ann-preview-empty[b-z0iew1kl55] {
    font-style: italic;
}

.sf-ann-preview-center[b-z0iew1kl55] {
    grid-area: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.sf-ann-preview-btn[b-z0iew1kl55] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 150px;
    border-radius: 6px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 500;
}

.sf-ann-preview-text[b-z0iew1kl55] {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.sf-ann-preview-scrim[b-z0iew1kl55] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
}

/* The dialog never grows past the screen it sits on: a long notice scrolls inside it and OK
   stays in view, as on the kiosk. */
.sf-ann-preview-popup[b-z0iew1kl55] {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    max-height: 80%;
    padding: 12px 16px 14px;
    box-sizing: border-box;
    border-radius: 6px;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-8);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-ann-preview-popup .sf-ann-preview-text[b-z0iew1kl55] {
    min-height: 0;
    overflow: auto;
}

.sf-ann-preview-ok[b-z0iew1kl55] {
    align-self: flex-end;
    flex: none;
    padding: 4px 12px;
    border-radius: 4px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}
/* /Components/Pages/Admin/BadgeAssignments.razor.rz.scp.css */
/* The gap list inside the coverage alert. A plain <ul> so each missing slot is one scannable line
   with its own affected-station list; MudAlert's own message area is a flex column, so the list
   needs its own indent and its default browser margin removed. */

.sf-badge-coverage-list[b-mqxtr86s9l] {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.sf-badge-coverage-list li + li[b-mqxtr86s9l] {
    margin-top: 0.25rem;
}

/* Pickers stack (owner ruling, 2026-08-26): one full-width picker per kind, in display order —
   used by the default-stock selector, the defaults card and every override card (#354). A badge
   choice reads as a list, not a grid. Capped so the column does not sprawl on a wide monitor;
   badge options are names only now, but the default-stock selector still says
   "name · 100 × 62 mm" and must not ellipsise the millimetres away. */
.sf-badge-defaults[b-mqxtr86s9l] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 56rem;
}

/* A card header (and the overrides section header): title left, action right, wrapping when
   narrow. */
.sf-badge-overrides-head[b-mqxtr86s9l] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
/* /Components/Pages/Admin/FacilitySummary.razor.rz.scp.css */
/* Facility Summary - a read-only dashboard drawn in plain HTML on MudBlazor's palette variables.
   Nothing here names a colour: every value is a --mud-palette-* token, which is what makes the
   ten themes and dark mode work for free. The "ink" variables mix a status colour toward the
   theme's text colour so small coloured text stays readable on both light and dark surfaces
   (amber-on-white is the one that fails without it). */
.fs-root[b-dnl44hpllq] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    --fs-success-ink: color-mix(in srgb, var(--mud-palette-success) 70%, var(--mud-palette-text-primary));
    --fs-warning-ink: color-mix(in srgb, var(--mud-palette-warning) 62%, var(--mud-palette-text-primary));
    --fs-error-ink: color-mix(in srgb, var(--mud-palette-error) 75%, var(--mud-palette-text-primary));
    --fs-info-ink: color-mix(in srgb, var(--mud-palette-info) 75%, var(--mud-palette-text-primary));
    --fs-primary-ink: color-mix(in srgb, var(--mud-palette-primary) 80%, var(--mud-palette-text-primary));
}

.fs-dot[b-dnl44hpllq] { opacity: .5; }
.fs-nowrap[b-dnl44hpllq] { white-space: nowrap; }

/* ---- Hero ------------------------------------------------------------------------------- */
.fs-hero[b-dnl44hpllq] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px 24px;
    padding: 22px 24px;
    border-radius: var(--mud-default-borderradius);
    border-left: 5px solid var(--mud-palette-primary);
    /* The tint is a layer over the surface, never an opaque primary behind body text. */
    background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), .14), transparent 65%), var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-2);
}

.fs-hero-main[b-dnl44hpllq] { min-width: 0; flex: 1 1 320px; }

.fs-hero-name[b-dnl44hpllq] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.fs-hero-meta[b-dnl44hpllq] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 4px;
    font-size: .95rem;
    color: var(--mud-palette-text-secondary);
}

.fs-pills[b-dnl44hpllq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.fs-hero-side[b-dnl44hpllq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.fs-generated[b-dnl44hpllq] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ---- Pills (status words) ---------------------------------------------------------------- */
.fs-pill[b-dnl44hpllq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.fs-pill[b-dnl44hpllq]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.fs-pill--success[b-dnl44hpllq] { color: var(--fs-success-ink); background: rgba(var(--mud-palette-success-rgb), .14); }
.fs-pill--warning[b-dnl44hpllq] { color: var(--fs-warning-ink); background: rgba(var(--mud-palette-warning-rgb), .18); }
.fs-pill--error[b-dnl44hpllq]   { color: var(--fs-error-ink);   background: rgba(var(--mud-palette-error-rgb), .14); }
.fs-pill--info[b-dnl44hpllq]    { color: var(--fs-info-ink);    background: rgba(var(--mud-palette-info-rgb), .14); }
.fs-pill--primary[b-dnl44hpllq] { color: var(--fs-primary-ink); background: rgba(var(--mud-palette-primary-rgb), .12); }
.fs-pill--muted[b-dnl44hpllq]   { color: var(--mud-palette-text-secondary); background: transparent; border-color: var(--mud-palette-lines-default); }
.fs-pill--muted[b-dnl44hpllq]::before { opacity: .5; }

/* A pill carrying a list (hidden languages, SSO domains) wraps instead of running off a phone. */
.fs-pill--wrap[b-dnl44hpllq] { white-space: normal; overflow-wrap: anywhere; align-items: baseline; }

/* ---- KPI tiles -------------------------------------------------------------------------- */
.fs-kpis[b-dnl44hpllq] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1180px) { .fs-kpis[b-dnl44hpllq] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .fs-kpis[b-dnl44hpllq] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fs-kpi[b-dnl44hpllq] { padding: 14px 12px 12px; }
}

.fs-kpi[b-dnl44hpllq] {
    position: relative;
    display: block;
    /* The tile is a size container: the big figure scales to the tile's own width, so six
       tiles across a laptop and two across a phone both get the largest figure that fits. */
    container-type: inline-size;
    padding: 18px 16px 14px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-2);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

/* The slim accent bar along the top. */
.fs-kpi[b-dnl44hpllq]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--mud-palette-primary);
}

a.fs-kpi[href]:hover[b-dnl44hpllq],
a.fs-kpi[href]:focus-visible[b-dnl44hpllq] {
    box-shadow: var(--mud-elevation-4);
    transform: translateY(-2px);
    outline: none;
}

.fs-kpi-value[b-dnl44hpllq] {
    /* 16cqi: ~29px in a six-across tile at 1440, ~26px two-across on a phone. A figure wider
       than the tile ("1,234 · 1,858") wraps onto a second line rather than truncating. */
    font-size: clamp(1.25rem, 16cqi, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.fs-kpi-label[b-dnl44hpllq] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.fs-kpi[b-dnl44hpllq]  .fs-kpi-icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--mud-palette-primary);
}

.fs-kpi-caption[b-dnl44hpllq] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.fs-warn[b-dnl44hpllq] { color: var(--fs-warning-ink); font-weight: 600; }

/* ---- Sections --------------------------------------------------------------------------- */
.fs-section[b-dnl44hpllq] {
    padding: 16px 20px 20px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-2);
}

.fs-section-head[b-dnl44hpllq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.fs-section[b-dnl44hpllq]  .fs-section-icon {
    width: 24px;
    height: 24px;
    color: var(--mud-palette-primary);
}

.fs-section-title[b-dnl44hpllq] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.fs-rollups[b-dnl44hpllq] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.fs-rollup[b-dnl44hpllq] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.fs-rollup b[b-dnl44hpllq] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.fs-subtitle[b-dnl44hpllq] {
    margin: 0 0 8px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.fs-empty[b-dnl44hpllq] {
    padding: 6px 0;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.fs-two[b-dnl44hpllq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 20px 32px;
}

/* ---- Station cards ---------------------------------------------------------------------- */
.fs-cards[b-dnl44hpllq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 12px;
}

/* The Inactive group's heading, below the Active group's cards. */
.fs-cards + .fs-subtitle[b-dnl44hpllq] { margin-top: 20px; }

.fs-card[b-dnl44hpllq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 3px solid var(--fs-card-tone, var(--mud-palette-lines-default));
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background);
}

.fs-card--success[b-dnl44hpllq] { --fs-card-tone: var(--mud-palette-success); }
.fs-card--error[b-dnl44hpllq]   { --fs-card-tone: var(--mud-palette-error); }
.fs-card--warning[b-dnl44hpllq] { --fs-card-tone: var(--mud-palette-warning); }
.fs-card--muted[b-dnl44hpllq]   { opacity: .7; }

.fs-card-head[b-dnl44hpllq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.fs-card-title[b-dnl44hpllq] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.fs-card-sub[b-dnl44hpllq] {
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
}

.fs-card-meta[b-dnl44hpllq] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.fs-card-foot[b-dnl44hpllq] {
    margin-top: auto;
    padding-top: 4px;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- Hardware chips --------------------------------------------------------------------- */
.fs-chips[b-dnl44hpllq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fs-chip[b-dnl44hpllq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: .76rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.fs-chip--on[b-dnl44hpllq] {
    border-color: rgba(var(--mud-palette-primary-rgb), .35);
    background: rgba(var(--mud-palette-primary-rgb), .10);
}

.fs-chip--off[b-dnl44hpllq] {
    border-style: dashed;
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.fs-chip--unknown[b-dnl44hpllq] {
    border-style: dotted;
    background: transparent;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

/* The printer chip carries family · stock (name hint): long enough to need a second line. */
.fs-chip--wide[b-dnl44hpllq] {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    align-items: baseline;
}

.fs-chip[b-dnl44hpllq]  .mud-icon-root {
    width: 16px;
    height: 16px;
    flex: none;
}

.fs-chip--on[b-dnl44hpllq]  .mud-icon-root { color: var(--mud-palette-primary); }

.fs-chip-hint[b-dnl44hpllq] {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* ---- Tables ----------------------------------------------------------------------------- */
.fs-table-wrap[b-dnl44hpllq] { overflow-x: auto; }

.fs-table[b-dnl44hpllq] {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.fs-table th[b-dnl44hpllq] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.fs-table td[b-dnl44hpllq] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
    vertical-align: middle;
    color: var(--mud-palette-text-primary);
}

.fs-table tbody tr:last-child td[b-dnl44hpllq] { border-bottom: 0; }
.fs-table tbody tr:hover td[b-dnl44hpllq] { background: rgba(var(--mud-palette-primary-rgb), .05); }
.fs-table .num[b-dnl44hpllq] { text-align: right; font-variant-numeric: tabular-nums; }
.fs-row--retired td[b-dnl44hpllq] { color: var(--mud-palette-text-secondary); }

.fs-table[b-dnl44hpllq]  .fs-yes { color: var(--mud-palette-success); vertical-align: middle; }
.fs-no[b-dnl44hpllq] { color: var(--mud-palette-text-secondary); opacity: .6; }

/* ---- Stats, bars, trends ---------------------------------------------------------------- */
.fs-stats[b-dnl44hpllq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-bottom: 10px;
}

.fs-stat-value[b-dnl44hpllq] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.fs-stat-label[b-dnl44hpllq] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.fs-bar[b-dnl44hpllq] {
    height: 6px;
    border-radius: 999px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.fs-bar > span[b-dnl44hpllq] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--mud-palette-primary);
}

.fs-bar-caption[b-dnl44hpllq] {
    margin-top: 8px;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.fs-table--trend td:first-child[b-dnl44hpllq] { font-weight: 600; }

.fs-trend[b-dnl44hpllq] {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
}

.fs-trend-bar[b-dnl44hpllq] { display: block; flex: none; width: 12px; height: 26px; }
.fs-trend-bar rect[b-dnl44hpllq] { fill: var(--mud-palette-primary); }
.fs-trend--60 rect[b-dnl44hpllq] { opacity: .72; }
.fs-trend--90 rect[b-dnl44hpllq] { opacity: .48; }
/* A zero is a faded hairline, so it never reads like a very small count. */
.fs-trend-bar--zero rect[b-dnl44hpllq] { opacity: .25; }

.fs-trend-n[b-dnl44hpllq] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Admin/StationEdit.razor.rz.scp.css */
/* Previous / Next landed on another station: the heading lights up in the THEME's primary colour
   and steps down through its variants (MudBlazor's --mud-palette-primary-darken / -lighten /
   -hover, so every theme brings its own shades) to nothing over 3 seconds. ::deep because the
   class rides MudText's own element, not this page's. The heading is @key'd by station, so each
   move builds a new one and replays it. The padding/margin pair gives the highlight some room
   without moving the text. */
[b-inxbee6uvg] .station-switched {
    animation: station-switched-b-inxbee6uvg 3s ease-out;
    border-radius: 4px;
    padding: 0 6px;
    margin: 0 -6px;
}

@keyframes station-switched-b-inxbee6uvg {
    0% { background-color: var(--mud-palette-primary-darken); color: var(--mud-palette-primary-text); }
    20% { background-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
    50% { background-color: var(--mud-palette-primary-lighten); }
    80% { background-color: var(--mud-palette-primary-hover); }
    100% { background-color: transparent; }
}
/* /Components/Pages/Admin/Wayfinding.razor.rz.scp.css */
/* The greetings are shown as SOURCE, not rendered: this panel exists so an author can see the
   markup their directions get wrapped in, and rendering it here would hide exactly that. Wide
   markup scrolls inside the block rather than widening the page. */
.sf-wayfinding-greeting[b-jjfuqmr56p] {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}
/* /Components/Pages/GlobalAdmin/BadgeTemplates.razor.rz.scp.css */
/* The list is a MudDataGrid (2026-09-11; it was a hand-rolled CSS grid, and before that a tree of
   per-slot tables). Only the actor caption needs help: it rides a MudText, hence ::deep. */

[b-2aaofl5l02] .sf-badge-actor {
    display: block;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-2aaofl5l02] .sf-badge-branch {
    flex: none;
}
/* /Components/Pages/Staff/Queues/QueueConsole.razor.rz.scp.css */
/* Category picker, Add to queue / Reprint, name filter and the section chips stay pinned
   while the queue items scroll under them. The offset is the fixed app bar's height — the
   toolbar has to come to rest below it, not behind it. Opaque background (the same one the
   recessed MudPaper uses) so cards don't bleed through as they pass underneath. */
.qconsole-toolbar[b-63bxr46ns4] {
    position: sticky;
    top: var(--mud-appbar-height, 64px);
    z-index: 2;
    background: var(--mud-palette-background);
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Cards belonging to an event band are indented under its header, so the bands are
   visually distinct from the items rather than reading as one flat list. */
.qgroup-items[b-63bxr46ns4] {
    margin-left: 2rem;
}