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

/* /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/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: identity · tools · actions. The two outer tracks are equal 1fr, which is
   what makes the Notes/History/Move group land on the same x on every card — its position
   is a function of the card width alone, not of the name length or the action buttons the
   current state happens to render. minmax(0, …) lets the outer cells shrink so a long name
   ellipsises instead of shoving the tools off-centre. */
.qitem-header[b-rchql5dotg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
}

.qitem-ident[b-rchql5dotg] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Fixed, 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 — or
   with the day badge a held-over entry carries — 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. */
.qitem-ident[b-rchql5dotg]  .qitem-number {
    flex: 0 0 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;
}

.qitem-ident[b-rchql5dotg]  .qitem-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.qitem-tools[b-rchql5dotg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-rchql5dotg] .qitem-actions {
    min-width: 0;
}

/* Latest event, right-aligned under the action buttons: 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. */
.qitem-event[b-rchql5dotg] {
    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;
    /* 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 a 1fr spacer soaks up the rest — so it stays column-aligned instead of drifting
   out to the card's right edge, away from the number it belongs to. */
.qitem-sla-grid--nobars[b-rchql5dotg] {
    grid-template-columns: 9.5rem 4.5rem 3.5rem 1fr;
}

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

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

/* 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 is first in the DOM (the default button for Enter) but drawn second. */
.account-card[b-5lgwap62x7]  .account-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

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

.account-card[b-5lgwap62x7]  .account-sso-continue:disabled {
    background: #dfe4f1;
    color: #6b7285;
    cursor: default;
}

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

.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/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 · 99.06 × 60.96 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/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 */
/* ---- Badge rows -----------------------------------------------------------------------------

   The slot-tree header bands and the coverage-gap list that used to open this file are GONE with
   the tree itself (owner decision, 2026-08-18): a badge has no kind and no slot, so there is no
   three-level Kind -> Stock -> Orientation product to render, and the coverage warning moved to
   /admin/badge-assignments, where the fix lives. What remains is one flat list.

   A fixed track list rather than a table: a table sizes its columns from its own content, so
   Status and Modified would drift as names change length. Five tracks now - Size joined them when
   the tree that used to carry that fact collapsed into this list.

   Every track carries a MIN, and the whole grid scrolls sideways in .sf-badge-scroll rather than
   squeezing. `minmax(0, 1fr)` on the name column looked right and was not: 1fr is a share of what
   is LEFT, so once the four other tracks outgrew the content area the name column resolved to
   ZERO and every row rendered nameless with its size in the first column. A flexible track needs a
   floor whenever the fixed ones can exceed the container.

   The grid, the rows and the cells are written in BadgeTemplates.razor, so they carry this
   component's scope attribute and need no ::deep. The two rules that DO use it are the ones whose
   class rides a MudText/MudIcon. */

.sf-badge-scroll[b-2aaofl5l02] {
    overflow-x: auto;
}

.sf-badge-rows[b-2aaofl5l02] {
    display: grid;
    grid-template-columns: minmax(12rem, 1.6fr) minmax(9rem, 1fr) 6.5rem 11rem max-content;
    align-items: center;
    min-width: max-content;

    /* The floor under the max-content actions track, and the reason alignment SURVIVES a row
       action set that varies (a Live row shows no Activate, a referenced one no Delete...).
       max-content is measured per grid, so without a common floor the widest strip in each panel
       would set a different actions width - and because the flexible name column absorbs the
       difference, every other column would shift with it, re-introducing exactly the misalignment
       this grid exists to remove. The header's actions cell carries the floor too, so the track is
       identical even in a panel whose rows are all narrow.

       9rem clears the widest strip a row can currently show. Slice 12 moved Rename / Activate /
       Deactivate into the designer, so the maximum is now FOUR small icon buttons at 26px
       (1.25rem icon + 3px padding each) - Edit-or-View, Promote-or-NewDraft, Clone, Delete - plus
       the cell's 0.75rem sides: 116px. 9rem (144px) keeps a button's worth of headroom. It was
       13rem when the strip could reach six. A strip that outgrows the floor GROWS the track rather
       than clipping, so the failure mode is a visibly wider list, never hidden actions. */
    --sf-badge-actions-width: 9rem;
}

/* Generates no box at all, so it cannot contribute a column width - the CELLS are the grid items.
   It still matches :hover and still carries role="row", which is the whole reason it exists. */
.sf-badge-row[b-2aaofl5l02] {
    display: contents;
}

.sf-badge-cell[b-2aaofl5l02] {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    min-width: 0;
}

.sf-badge-head .sf-badge-cell[b-2aaofl5l02] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* Row hover, painted on the cells because the display:contents wrapper paints nothing itself. */
.sf-badge-row:hover .sf-badge-cell[b-2aaofl5l02] {
    background-color: var(--mud-palette-table-hover);
}

.sf-badge-head:hover .sf-badge-cell[b-2aaofl5l02] {
    background-color: transparent;
}

.sf-badge-name[b-2aaofl5l02] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
}

/* The 1fr column is the one that absorbs a long name. Truncating HERE is what stops it pushing
   Status and Modified out of their shared track positions; the full name stays in the title. */
.sf-badge-name-text[b-2aaofl5l02] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ::deep on this one and the branch glyph below: both classes ride a MudText/MudIcon, whose root
   element is rendered by MudBlazor and therefore carries no scope attribute of ours. */
[b-2aaofl5l02] .sf-badge-actor {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-badge-actions[b-2aaofl5l02] {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
    min-width: var(--sf-badge-actions-width);
}

/* A child draft nests under its parent: the indent and the branch glyph ARE the parent link, which
   is why the row needs no status of its own. */
.sf-badge-row-draft .sf-badge-name[b-2aaofl5l02] {
    padding-left: 1.75rem;
}

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