/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-wj1heqiscs] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-wj1heqiscs] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-2x0v1v0pxz],
.components-reconnect-repeated-attempt-visible[b-2x0v1v0pxz],
.components-reconnect-failed-visible[b-2x0v1v0pxz],
.components-pause-visible[b-2x0v1v0pxz],
.components-resume-failed-visible[b-2x0v1v0pxz],
.components-rejoining-animation[b-2x0v1v0pxz] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-2x0v1v0pxz],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-2x0v1v0pxz],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-2x0v1v0pxz],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-2x0v1v0pxz],
#components-reconnect-modal.components-reconnect-retrying[b-2x0v1v0pxz],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-2x0v1v0pxz],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-2x0v1v0pxz],
#components-reconnect-modal.components-reconnect-failed[b-2x0v1v0pxz],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-2x0v1v0pxz] {
    display: block;
}


#components-reconnect-modal[b-2x0v1v0pxz] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-2x0v1v0pxz 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-2x0v1v0pxz 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-2x0v1v0pxz 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-2x0v1v0pxz]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-2x0v1v0pxz 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-2x0v1v0pxz {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-2x0v1v0pxz {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-2x0v1v0pxz {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-2x0v1v0pxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-2x0v1v0pxz] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-2x0v1v0pxz] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-2x0v1v0pxz] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-2x0v1v0pxz] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-2x0v1v0pxz] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-2x0v1v0pxz] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-2x0v1v0pxz 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-2x0v1v0pxz] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-2x0v1v0pxz {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Station.razor.rz.scp.css */
/* The station runs on a mounted touchscreen: fingers, no mouse, no keyboard, read from a step back
   rather than from a desk chair. Everything here is hit size and legibility. */

/* 48px is the smallest target a fingertip lands on reliably. MudBlazor's Large stops short of it,
   so the floor is set once here instead of with a Style on every control. */
.station-touch[b-j894dumneh]  .mud-button-root,
.station-touch[b-j894dumneh]  .mud-icon-button,
.station-touch[b-j894dumneh]  .mud-input {
    min-height: 48px;
}

/* Space between rows, so a tap that lands slightly off still lands on the right space. */
.station-touch[b-j894dumneh]  td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.station-touch[b-j894dumneh]  td,
.station-touch[b-j894dumneh]  th {
    font-size: 1rem;
}

/* The destination is the thing being read from furthest away.

   Names run long: "ADVANCED CENTER FOR JOINT SURGERY" is 33 characters. MudBlazor chips are
   single-line pills with a fixed height, so a name like that would stretch the column or clip.
   Both are undone here: the pill grows downwards and the name wraps inside it. */
.station-touch[b-j894dumneh]  .mud-chip {
    height: auto;
    min-height: 44px;
    font-size: 1.05rem;
    white-space: normal;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* No width cap: the name wraps when the column runs out of room rather than at a fixed character
   count. anywhere is for the name that arrives as one unbroken token with nowhere to break.
   another comment */
.station-touch[b-j894dumneh]  .mud-chip .mud-chip-content {
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.25;
}

/* Where the row stops being a row and becomes a stack of labelled cells.

   MudBlazor hard-codes that width per breakpoint in its own stylesheet: Sm is 960px, then 1280 and
   1920, with nothing between. This board carries six columns of touch-sized controls and runs out
   of width long before 960, so the stacked layout is declared here at 1400 instead of accepting
   the nearest built-in.

   The table keeps Breakpoint="Sm" so MudBlazor still emits the data-label attributes these rules
   read; below 960 its identical rules apply alongside these, to the same effect. Rules for
   pagination, borders and the sort select are left out: this table has none of them. */
@media (max-width: 1400px) {
    .station-touch[b-j894dumneh]  .mud-table-head .mud-table-row,
    .station-touch[b-j894dumneh]  .mud-table-foot {
        display: none;
    }

    .station-touch[b-j894dumneh]  .mud-table-body {
        border-top: 1px solid var(--mud-palette-table-lines);
    }

    .station-touch[b-j894dumneh]  .mud-table-row {
        display: revert;
    }

    .station-touch[b-j894dumneh]  .mud-table-row .mud-table-cell:last-child {
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .station-touch[b-j894dumneh]  .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        padding: 14px 16px;
        text-align: start !important;
    }

    /* The column heading, reprinted against each value now that the header row is gone. */
    .station-touch[b-j894dumneh]  .mud-table-cell:before {
        content: attr(data-label);
        font-weight: 500;
        padding-right: 16px;
        padding-inline-end: 16px;
        padding-inline-start: unset;
    }
}
/* /Components/Pages/WallDisplay.razor.rz.scp.css */
/* Sizing is viewport-relative throughout, ported from the legacy DispatchBoard: the screen is read
   from across a room, at whatever size the TV happens to be, and must never scroll. */

/* The screen owns the viewport; the board takes whatever the footer leaves. */
.wall-screen[b-5n7oxahawj] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background-color: #f3f4f6;
    overflow: hidden;
}

.wall-board[b-5n7oxahawj] {
    flex: 1;
    /* Without this the grid refuses to shrink below its content and pushes the footer off screen. */
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-auto-rows: 1fr;
    gap: 0.3vh;
    padding: 0.8vh;
    box-sizing: border-box;
    overflow: hidden;
}

.wall-cell[b-5n7oxahawj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    border: 2px solid #e5e7eb;
    border-radius: 0.5vh;
    padding: 0.8vh;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.wall-number[b-5n7oxahawj] {
    position: absolute;
    top: 0.8vh;
    left: 0.8vh;
    font-size: 2.2vh;
    font-weight: bold;
    width: 3vh;
    height: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(149, 150, 153, 0.287);
}

.wall-name[b-5n7oxahawj] {
    font-size: 2.3vh;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    width: 92%;
    padding: 0.4vh 0.6vh;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wall-case[b-5n7oxahawj] {
    font-size: 2.2vh;
    font-weight: 800;
    margin-top: 0.4vh;
}

/* Tabular figures so the countdown does not jiggle as the digits change, which is distracting on a
   screen people glance at rather than read. */
.wall-timer[b-5n7oxahawj] {
    font-size: 2.6vh;
    font-weight: 800;
    margin-top: 0.4vh;
    font-variant-numeric: tabular-nums;
}

.wall-timer-paused[b-5n7oxahawj] {
    opacity: 0.6;
}

.wall-timer-overdue[b-5n7oxahawj] {
    color: #ffffff;
    background-color: #b91c1c;
    border-radius: 0.4vh;
    padding: 0 0.8vh;
}

/* An overdue timer on a white (unassigned or no-status) cell needs its own contrast. */
.wall-open .wall-timer-overdue[b-5n7oxahawj] {
    color: #ffffff;
}

/* One line under the board: the day's total on the left, the legend centred, this screen's clock on
   the right. Three columns rather than space-between, so the legend sits at the middle of the screen
   and not at the middle of whatever is left over. */
.wall-footer[b-5n7oxahawj] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5vh;
    padding: 0.4vh 1.4vh 0.9vh;
    color: #0a174e;
}

.wall-total[b-5n7oxahawj] {
    display: flex;
    align-items: baseline;
    gap: 0.8vh;
}

.wall-total-value[b-5n7oxahawj] {
    font-size: 3.4vh;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.wall-total-label[b-5n7oxahawj] {
    font-size: 1.9vh;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4b5563;
}

.wall-legend[b-5n7oxahawj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vh;
}

.wall-legend-item[b-5n7oxahawj] {
    display: flex;
    align-items: center;
    gap: 0.7vh;
    font-size: 1.9vh;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* The status classes below supply each swatch's colour, so the grey border only survives on Open. */
.wall-swatch[b-5n7oxahawj] {
    width: 2.4vh;
    height: 2.4vh;
    border: 0.2vh solid #d1d5db;
    border-radius: 0.4vh;
}

.wall-where[b-5n7oxahawj] {
    text-align: right;
}

/* Same size as the total's label, in the GMLx primary blue from VanGoTheme, so the one piece of
   branding on the screen is the one that says which building it is in. */
.wall-place[b-5n7oxahawj] {
    font-size: 1.9vh;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #0548cb;
}

/* Test environment only: the caption turns red so a screen showing the test database cannot be read
   as the live board. */
.wall-place-test[b-5n7oxahawj] {
    color: #dc2626;
}

.wall-clock[b-5n7oxahawj] {
    font-size: 2.4vh;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* Status colours are the legacy ones exactly: an operator who knows the old board must read the
   new one the same way. */

/* Both a space with nothing in it and a space whose destination has no status yet. Deliberately
   quieter than the three decided states: a cell only shouts once someone has said Go, Rush or No go,
   so what is still waiting on a decision recedes instead of competing with what is settled. */
.wall-open[b-5n7oxahawj] {
    background-color: #ffffff;
    color: #6b7280;
}

.wall-open .wall-name[b-5n7oxahawj] {
    font-size: 1.8vh;
}

.wall-go[b-5n7oxahawj] {
    background-color: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.wall-nogo[b-5n7oxahawj] {
    background-color: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

/* Rush flashes so it catches the eye from across the room. The flash stays on Rush now that Rush is
   the dark one, because it marks the urgent status rather than the red one, and it swings to a
   noticeably lighter grey: pulsing between two near-blacks would not read at a distance. */
.wall-rush[b-5n7oxahawj] {
    background-color: #1f2937;
    border-color: #1f2937;
    color: #ffffff;
    animation: wall-rush-flash-b-5n7oxahawj 2s ease-in-out infinite;
}

@keyframes wall-rush-flash-b-5n7oxahawj {
    0%, 100% {
        background-color: #1f2937;
        border-color: #1f2937;
    }
    50% {
        background-color: #4b5563;
        border-color: #4b5563;
    }
}

/* Respect a viewer who has asked for reduced motion; the colour still carries the meaning. */
@media (prefers-reduced-motion: reduce) {
    .wall-rush[b-5n7oxahawj] {
        animation: none;
    }
}

.wall-message[b-5n7oxahawj] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vh;
    font-size: 3vh;
    font-weight: 700;
    color: #1f2937;
    background-color: #f3f4f6;
    text-align: center;
    padding: 4vh;
}

.wall-message-sub[b-5n7oxahawj] {
    font-size: 2vh;
    font-weight: 400;
    color: #6b7280;
}