/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-qdw8wiqoot] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
    background:
        radial-gradient(circle at 8% 15%, rgba(96, 165, 250, 0.14), transparent 35%),
        radial-gradient(circle at 88% 10%, rgba(78, 201, 176, 0.12), transparent 30%),
        radial-gradient(circle at 78% 80%, rgba(255, 179, 71, 0.08), transparent 35%);
}

.auth-brand[b-qdw8wiqoot] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.auth-brand-logo[b-qdw8wiqoot] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.auth-brand-text[b-qdw8wiqoot] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.auth-brand-name[b-qdw8wiqoot] {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-primary, #e6edf7);
}

.auth-brand-tagline[b-qdw8wiqoot] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary, #9aa7b8);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* /Components/Layout/InspectionLayout.razor.rz.scp.css */
/* The inspector's layout (§14.9). Same visual language as MainLayout.razor.css - zero shared code, like every layout here
   (scoped CSS does not carry over from MainLayout, which is why the logo was unsized on the first live run). */
.app-bar[b-i9ruvykll3] {
    border-bottom: 1px solid rgba(78, 201, 176, 0.35);
}

.app-bar-logo[b-i9ruvykll3] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.inspection-who[b-i9ruvykll3] {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-container[b-i9ruvykll3] {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
    min-height: calc(100vh - 64px);
    background:
        radial-gradient(circle at 8% 15%, rgba(96, 165, 250, 0.14), transparent 35%),
        radial-gradient(circle at 88% 10%, rgba(78, 201, 176, 0.12), transparent 30%),
        radial-gradient(circle at 78% 80%, rgba(255, 179, 71, 0.08), transparent 35%);
}

/* /Components/Layout/KioskLayout.razor.rz.scp.css */
.kiosk-shell[b-kksqoqcxhg] {
    min-height: 100vh;
    width: 100%;
    background: var(--mud-palette-background, #0f141b);
    overflow: hidden;
}

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Same visual language as LoopMi.UI's MainLayout.razor.css - zero shared code (§10). */
.app-bar[b-pk0686zlhm] {
    border-bottom: 1px solid rgba(78, 201, 176, 0.35);
}

.app-bar-logo[b-pk0686zlhm] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.app-drawer[b-pk0686zlhm] {
    border-right: 1px solid rgba(96, 165, 250, 0.25);
}

.main-container[b-pk0686zlhm] {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
    min-height: calc(100vh - 64px);
    background:
        radial-gradient(circle at 8% 15%, rgba(96, 165, 250, 0.14), transparent 35%),
        radial-gradient(circle at 88% 10%, rgba(78, 201, 176, 0.12), transparent 30%),
        radial-gradient(circle at 78% 80%, rgba(255, 179, 71, 0.08), transparent 35%);
}

/* /Components/Pages/TabletKiosk.razor.rz.scp.css */
.kiosk-page[b-3dtruyhqgw] {
    min-height: 100vh;
    width: 100%;
    padding: 2rem 3rem;
    box-sizing: border-box;
    color: var(--mud-palette-text-primary, #e6edf7);
    /* Burn-in mitigation: the whole page hops a few whole pixels about once a minute along a closed loop, so
       even during days of an unchanging all-green screen no edge/border/glyph stays on the same pixels.
       Whole-pixel steps (not a smooth glide) keep text crisp; the page padding absorbs the +-12px. */
    animation: kiosk-drift-b-3dtruyhqgw 720s step-end infinite;
}

@keyframes kiosk-drift-b-3dtruyhqgw {
    0%      { transform: translate(0, 0); }
    8.33%   { transform: translate(8px, -6px); }
    16.66%  { transform: translate(12px, 2px); }
    25%     { transform: translate(7px, 10px); }
    33.33%  { transform: translate(-2px, 12px); }
    41.66%  { transform: translate(-10px, 7px); }
    50%     { transform: translate(-12px, -1px); }
    58.33%  { transform: translate(-8px, -9px); }
    66.66%  { transform: translate(0, -12px); }
    75%     { transform: translate(9px, -8px); }
    83.33%  { transform: translate(4px, 4px); }
    91.66%  { transform: translate(-4px, -3px); }
    100%    { transform: translate(0, 0); }
}

.kiosk-centered[b-3dtruyhqgw] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.kiosk-pairing-card[b-3dtruyhqgw] {
    width: min(480px, 90vw);
}

.kiosk-header[b-3dtruyhqgw] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1rem;
}

.kiosk-status-banner[b-3dtruyhqgw] {
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
}

/* The "ok" green is a variable so the overview and the detail screens can use two different, dimmed greens:
   the overview leans blue-green, the detail leans yellow-green, so the two alternating screens load different
   sub-pixel mixes instead of the same one. Problem red stays bright on purpose - it is meant to stand out. */
.kiosk-status-ok[b-3dtruyhqgw] {
    background: var(--kiosk-ok-bg, rgba(52, 211, 153, 0.12));
    color: var(--kiosk-ok, #34d399);
}

.kiosk-status-problem[b-3dtruyhqgw] {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}

/* Overview: one fixed screen (page padding is 2rem top/bottom, hence the 4rem) - header, slim summary strip,
   then a card grid that takes all the remaining height. Nothing here should ever need to scroll. */
.kiosk-overview[b-3dtruyhqgw] {
    --kiosk-ok: #2aa984;
    --kiosk-ok-bg: rgba(42, 169, 132, 0.10);
    --kiosk-ok-border: rgba(42, 169, 132, 0.35);
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Room for the floating check-in button so it never covers the bottom row of cards. */
.kiosk-overview-has-fab[b-3dtruyhqgw] {
    padding-bottom: 5rem;
}

.kiosk-overview .kiosk-header[b-3dtruyhqgw] {
    flex-shrink: 0;
    margin-bottom: 1rem;
    align-items: center;
    gap: 1rem;
}

.kiosk-overview-empty[b-3dtruyhqgw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kiosk-summary[b-3dtruyhqgw] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 16px;
    padding: clamp(0.6rem, 1.6vh, 1.25rem) 1.5rem;
    margin-bottom: 1rem;
    font-size: clamp(1.25rem, 3.2vmin, 2.25rem);
}

.kiosk-summary.kiosk-status-ok[b-3dtruyhqgw] {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--kiosk-ok-border);
}

.kiosk-summary[b-3dtruyhqgw]  .mud-icon-root {
    font-size: 1.3em;
}

.kiosk-equipment-grid[b-3dtruyhqgw] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--kiosk-cols, 3), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(0.75rem, 2vmin, 1.5rem);
    overflow-y: auto;
}

@media (orientation: portrait) {
    .kiosk-equipment-grid[b-3dtruyhqgw] {
        grid-template-columns: repeat(var(--kiosk-cols-portrait, 2), minmax(0, 1fr));
    }
}

/* Each card is a size container (its grid track has a definite size) so its text scales with the card's
   width AND height (cqw/cqh), not just the viewport - the same markup then reads well from a 1-card to a
   12-card grid without the content spilling out of a short card. */
.kiosk-equipment-tile[b-3dtruyhqgw] {
    container-type: size;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
    padding: 1.25rem;
    border: 2px solid transparent;
    cursor: pointer;
    color: var(--mud-palette-text-primary, #e6edf7);
}

.kiosk-equipment-tile.kiosk-status-ok[b-3dtruyhqgw] {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--kiosk-ok-border);
}

.kiosk-equipment-tile.kiosk-status-problem[b-3dtruyhqgw] {
    border-color: #ef4444;
}

.kiosk-tile-header[b-3dtruyhqgw] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kiosk-tile-header[b-3dtruyhqgw]  .mud-icon-root {
    font-size: clamp(1.5rem, 7cqw, 2.5rem);
}

.kiosk-equipment-tile.kiosk-status-ok .kiosk-tile-header[b-3dtruyhqgw]  .mud-icon-root {
    color: var(--kiosk-ok);
}

.kiosk-equipment-tile.kiosk-status-problem .kiosk-tile-header[b-3dtruyhqgw]  .mud-icon-root {
    color: #ef4444;
}

.kiosk-tile-name[b-3dtruyhqgw] {
    font-size: clamp(1.1rem, 7cqw, 2rem);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kiosk-tile-body[b-3dtruyhqgw] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: min(0.75rem, 2cqh);
    overflow: hidden;
    text-align: center;
}

.kiosk-tile-temperature[b-3dtruyhqgw] {
    font-size: clamp(1.75rem, min(24cqw, 32cqh), 7rem);
    font-weight: 300;
    line-height: 1;
    color: var(--kiosk-ok);
}

.kiosk-tile-temperature-state[b-3dtruyhqgw] {
    font-size: clamp(0.85rem, min(5cqw, 8cqh), 1.6rem);
    color: var(--kiosk-ok);
}

.kiosk-tile-temperature.kiosk-tile-value-problem[b-3dtruyhqgw],
.kiosk-tile-temperature-state.kiosk-tile-value-problem[b-3dtruyhqgw] {
    color: #ef4444;
}

.kiosk-tile-warning[b-3dtruyhqgw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.8rem, min(4.5cqw, 7cqh), 1.4rem);
    color: #f59e0b;
}

.kiosk-tile-contacts[b-3dtruyhqgw] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.kiosk-tile-contact[b-3dtruyhqgw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    font-size: clamp(0.8rem, min(4.5cqw, 7cqh), 1.4rem);
}

.kiosk-tile-body[b-3dtruyhqgw]  .kiosk-tile-status-icon {
    font-size: clamp(2.5rem, min(28cqw, 40cqh), 6rem);
}

.kiosk-equipment-tile.kiosk-status-ok .kiosk-tile-body[b-3dtruyhqgw]  .kiosk-tile-status-icon {
    color: var(--kiosk-ok);
}

.kiosk-equipment-tile.kiosk-status-problem .kiosk-tile-body[b-3dtruyhqgw]  .kiosk-tile-status-icon {
    color: #ef4444;
}

.kiosk-tile-warning[b-3dtruyhqgw]  .mud-icon-root,
.kiosk-tile-contact[b-3dtruyhqgw]  .mud-icon-root {
    font-size: 1.2em;
}

.kiosk-detail[b-3dtruyhqgw] {
    --kiosk-ok: #7cbf4f;
    --kiosk-ok-bg: rgba(124, 191, 79, 0.08);
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    padding: 1rem;
}

.kiosk-detail-row[b-3dtruyhqgw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 0;
}

.kiosk-contact-list[b-3dtruyhqgw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.kiosk-contact-row[b-3dtruyhqgw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
}

.kiosk-contact-row .mud-icon-root[b-3dtruyhqgw] {
    font-size: 2rem;
}

.kiosk-employee-grid[b-3dtruyhqgw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    width: min(720px, 90vw);
    margin-bottom: 1rem;
}

.kiosk-employee-grid .mud-button-root[b-3dtruyhqgw] {
    padding: 1.5rem 1rem;
    font-size: 1.1rem;
}

.kiosk-pin-field[b-3dtruyhqgw] {
    width: min(280px, 80vw);
}

.kiosk-pin-field input[b-3dtruyhqgw] {
    text-align: center;
    font-size: 2rem;
    letter-spacing: 0.5rem;
}

/* ::deep because the class lands on MudFab's own root element, which the page's scope attribute doesn't
   reliably reach - it rendered in normal flow (bottom-left) instead of floating. */
.kiosk-page[b-3dtruyhqgw]  .kiosk-check-fab {
    position: fixed;
    bottom: 2rem;
    right: 3rem;
    z-index: 10;
}

.kiosk-header-actions[b-3dtruyhqgw] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

/* The tablet's name with the date under it, so the many buttons have the rest of the line (Azure Boards #128). */
.kiosk-header-title[b-3dtruyhqgw] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
/* /Components/Shared/BusyOverlay.razor.rz.scp.css */
/* Above the AppBar, Drawer and dialogs, like LoadingOverlay's full-page use - but invisible (Azure Boards #140). */
.busy-click-guard[b-3f4bp5lasu] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    cursor: progress;
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
/* <details>/<summary> natively shows/hides .language-switcher-menu (everything after <summary>) with
   no CSS needed for that part - only the "make it look like a floating dropdown, not a document
   disclosure block" styling is needed here. */
.language-switcher[b-1vn151s4f4] {
    position: relative;
    display: inline-block;
    margin-right: 0.5rem;
}

.language-switcher-summary[b-1vn151s4f4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    cursor: pointer;
    list-style: none;
}

    .language-switcher-summary[b-1vn151s4f4]::-webkit-details-marker {
        display: none;
    }

    .language-switcher-summary:hover[b-1vn151s4f4] {
        background-color: rgba(78, 201, 176, 0.12);
    }

.language-switcher-menu[b-1vn151s4f4] {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 1450;
    min-width: 140px;
    background-color: var(--mud-palette-surface, #16202b);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    padding: 0.25rem 0;
}

/* On a phone-width viewport the icon sits close to the right edge of the app bar, so a menu that
   expands rightward (left: 0, the desktop default above) runs off-screen. Anchoring to the icon's right
   edge instead makes it expand leftward, back onto the screen - desktop keeps the original side since
   there's normally plenty of room to its right there. */
@media (max-width: 600px) {
    .language-switcher-menu[b-1vn151s4f4] {
        left: auto;
        right: 0;
    }
}

.language-switcher-link[b-1vn151s4f4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--mud-palette-text-primary, #e6edf7);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
}

    .language-switcher-link:hover[b-1vn151s4f4] {
        background-color: rgba(78, 201, 176, 0.12);
    }

.language-switcher-flag[b-1vn151s4f4] {
    width: 1.25rem;
    height: auto;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
/* /Components/Shared/LoopMiSpinner.razor.rz.scp.css */
.loopmi-spinner[b-hihpas1z8l] {
    animation: loopmi-spin-b-hihpas1z8l 1.4s linear infinite;
}

@keyframes loopmi-spin-b-hihpas1z8l {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* /Components/Shared/TabletChecklists.razor.rz.scp.css */
/* Checklists on the kiosk (Azure Boards #88): touch-first - big targets, large type, one question per screen - and
   the kiosk's own colours: dimmed green for fine, bright red for a problem. */
.tc-screen[b-kc9a0nn6bi] {
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1.15rem;
}

.tc-header[b-kc9a0nn6bi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1rem;
}

.tc-title[b-kc9a0nn6bi] {
    font-size: 2rem;
    font-weight: 500;
}

.tc-subtitle[b-kc9a0nn6bi],
.tc-muted[b-kc9a0nn6bi] {
    color: var(--mud-palette-text-secondary, #9aa7b8);
}

.tc-progress[b-kc9a0nn6bi] {
    font-size: 1.4rem;
    margin-top: 0.25rem;
}

.tc-centered[b-kc9a0nn6bi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tc-error[b-kc9a0nn6bi],
.tc-banner[b-kc9a0nn6bi] {
    border-radius: 14px;
    padding: 1rem 1.5rem;
}

.tc-error[b-kc9a0nn6bi],
.tc-problem[b-kc9a0nn6bi] {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}

.tc-ok[b-kc9a0nn6bi] {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

.tc-neutral[b-kc9a0nn6bi] {
    background: rgba(255, 255, 255, 0.06);
}

.tc-done[b-kc9a0nn6bi] {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    padding: 2rem 3rem;
}

.tc-cards[b-kc9a0nn6bi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.tc-card[b-kc9a0nn6bi] {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 8px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.tc-card.tc-due[b-kc9a0nn6bi] {
    border-left-color: #34d399;
}

.tc-card.tc-late[b-kc9a0nn6bi] {
    border-left-color: #f59e0b;
}

.tc-card.tc-on-demand[b-kc9a0nn6bi] {
    border-left-color: #60a5fa;
}

.tc-card-main[b-kc9a0nn6bi] {
    padding: 1.5rem;
    cursor: pointer;
}

.tc-card-name[b-kc9a0nn6bi] {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.tc-card-meta[b-kc9a0nn6bi] {
    display: flex;
    justify-content: space-between;
    color: var(--mud-palette-text-secondary, #9aa7b8);
}

.tc-late .tc-kind[b-kc9a0nn6bi] {
    color: #f59e0b;
}

.tc-draft[b-kc9a0nn6bi] {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.tc-draft-action[b-kc9a0nn6bi] {
    color: #34d399;
    font-weight: 500;
}

.tc-employee-grid[b-kc9a0nn6bi],
.tc-options[b-kc9a0nn6bi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    width: min(900px, 92vw);
}

.tc-big-button[b-kc9a0nn6bi] {
    min-height: 5rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
}

.tc-big-button:active[b-kc9a0nn6bi] {
    background: rgba(255, 255, 255, 0.14);
}

.tc-big-button:disabled[b-kc9a0nn6bi] {
    opacity: 0.5;
}

.tc-big-button.tc-selected[b-kc9a0nn6bi] {
    border-color: #34d399;
    background: rgba(52, 211, 153, 0.16);
}

.tc-option[b-kc9a0nn6bi] {
    font-size: 1.2rem;
}

.tc-question[b-kc9a0nn6bi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tc-prompt[b-kc9a0nn6bi] {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.25;
}

.tc-instruction[b-kc9a0nn6bi] {
    white-space: pre-line;
    border-left: 4px solid rgba(255, 255, 255, 0.2);
    padding-left: 1rem;
}

.tc-sensor[b-kc9a0nn6bi] {
    padding: 1.5rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    width: fit-content;
}

.tc-sensor-value[b-kc9a0nn6bi] {
    font-size: 3.5rem;
    font-weight: 600;
}

.tc-actions[b-kc9a0nn6bi],
.tc-nav[b-kc9a0nn6bi] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.tc-nav[b-kc9a0nn6bi] {
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1rem;
}

.tc-saved[b-kc9a0nn6bi] {
    color: #34d399;
}

.tc-review[b-kc9a0nn6bi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tc-review-row[b-kc9a0nn6bi] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.tc-review-answer[b-kc9a0nn6bi] {
    text-align: right;
}

.tc-review-problem .tc-review-answer[b-kc9a0nn6bi] {
    color: #ef4444;
}

.tc-review-missing .tc-review-answer[b-kc9a0nn6bi] {
    color: #f59e0b;
}

.tc-review-skipped[b-kc9a0nn6bi] {
    opacity: 0.6;
}

[b-kc9a0nn6bi] .tc-pin-field {
    width: min(280px, 80vw);
}

[b-kc9a0nn6bi] .tc-pin-field input {
    text-align: center;
    font-size: 2rem;
    letter-spacing: 0.5rem;
}

[b-kc9a0nn6bi] .tc-number-field {
    max-width: 320px;
}

[b-kc9a0nn6bi] .tc-number-field input,
[b-kc9a0nn6bi] .tc-text-field textarea {
    font-size: 1.8rem;
}

/* Photos as proof (Azure Boards #113). */
.tc-photos[b-kc9a0nn6bi] {
    margin-top: 1.5rem;
}

.tc-photo-row[b-kc9a0nn6bi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
}

.tc-photo[b-kc9a0nn6bi] {
    position: relative;
    width: 7rem;
    height: 7rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.tc-photo img[b-kc9a0nn6bi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-photo-remove[b-kc9a0nn6bi] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.tc-photo-add[b-kc9a0nn6bi] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.tc-photo-add.tc-disabled[b-kc9a0nn6bi] {
    opacity: 0.5;
    pointer-events: none;
}

.tc-photo-required[b-kc9a0nn6bi] {
    color: #fbbf24;
}

.tc-review-photos[b-kc9a0nn6bi] {
    white-space: nowrap;
}

/* Reference images: how the job should look (Azure Boards #114). */
.tc-reference-images[b-kc9a0nn6bi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.tc-reference-image[b-kc9a0nn6bi] {
    width: 12rem;
    height: 9rem;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    cursor: zoom-in;
}

.tc-reference-image img[b-kc9a0nn6bi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-image-zoom[b-kc9a0nn6bi] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.92);
}

.tc-image-zoom img[b-kc9a0nn6bi] {
    max-width: 100%;
    max-height: calc(100vh - 10rem);
    object-fit: contain;
    border-radius: 0.5rem;
}

/* What started a checklist - a sensor anomaly (Azure Boards #122). */
.tc-card-trigger[b-kc9a0nn6bi] {
    margin: 0.25rem 0 0.5rem;
    color: #f5a623;
    font-size: 1.15rem;
}
/* /Components/Shared/TabletDeliveries.razor.rz.scp.css */
/* Goods receiving on the kiosk (Azure Boards #173): touch-first like the checklists - big targets, large type - and the
   kiosk's own colours: dimmed green for accepted, bright red for rejected. */
.td-screen[b-izox7jtxwf] {
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1.15rem;
}

.td-header[b-izox7jtxwf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1rem;
}

.td-title[b-izox7jtxwf] {
    font-size: 2rem;
    font-weight: 500;
}

.td-muted[b-izox7jtxwf] {
    color: var(--mud-palette-text-secondary, #9aa7b8);
}

.td-form[b-izox7jtxwf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.td-expired-warning[b-izox7jtxwf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 2px solid #f5a524;
    border-radius: 0.75rem;
    background: rgba(245, 165, 36, 0.12);
}

.td-expired-text[b-izox7jtxwf] {
    font-size: 1.35rem;
}

.td-choice[b-izox7jtxwf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.td-centered[b-izox7jtxwf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.td-employee-grid[b-izox7jtxwf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    width: min(60rem, 100%);
}

.td-big-button[b-izox7jtxwf] {
    min-height: 4.5rem;
    padding: 0 1.5rem;
    font-size: 1.5rem;
    color: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    cursor: pointer;
}

.td-selected-ok[b-izox7jtxwf] {
    border-color: #2e8b6e;
    background: rgba(29, 158, 117, 0.25);
}

.td-selected-bad[b-izox7jtxwf] {
    border-color: #e5484d;
    background: rgba(229, 72, 77, 0.25);
}

.td-error[b-izox7jtxwf],
.td-banner[b-izox7jtxwf] {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    color: #ff8a8e;
    background: rgba(229, 72, 77, 0.15);
    border: 1px solid rgba(229, 72, 77, 0.5);
}

.td-pin-field[b-izox7jtxwf] {
    max-width: 14rem;
    font-size: 2rem;
}

.td-note[b-izox7jtxwf] {
    display: flex;
}

.td-note-add[b-izox7jtxwf] {
    display: inline-flex;
    align-items: center;
    min-height: 4rem;
    font-size: 1.25rem;
}

.td-disabled[b-izox7jtxwf] {
    opacity: 0.5;
    pointer-events: none;
}

.td-note-attached[b-izox7jtxwf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.25rem;
}
/* /Components/Shared/TabletMyProblems.razor.rz.scp.css */
/* My problems on the kiosk (Azure Boards #128): touch-first like the other kiosk screens - big targets, large type. */
.mp-screen[b-e9zeiw1n0q] {
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1.15rem;
}

.mp-header[b-e9zeiw1n0q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1rem;
}

.mp-title[b-e9zeiw1n0q] {
    font-size: 2rem;
    font-weight: 500;
}

.mp-muted[b-e9zeiw1n0q] {
    color: var(--mud-palette-text-secondary, #9aa7b8);
}

.mp-small[b-e9zeiw1n0q] {
    font-size: 0.9rem;
}

.mp-centered[b-e9zeiw1n0q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mp-grid[b-e9zeiw1n0q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    width: min(60rem, 100%);
}

.mp-actions[b-e9zeiw1n0q] {
    align-self: center;
}

.mp-big-button[b-e9zeiw1n0q] {
    min-height: 4.5rem;
    padding: 0.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    cursor: pointer;
}

.mp-big-button:disabled[b-e9zeiw1n0q] {
    opacity: 0.5;
    pointer-events: none;
}

.mp-resolve[b-e9zeiw1n0q] {
    border-color: rgba(67, 160, 71, 0.7);
}

.mp-list[b-e9zeiw1n0q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(60rem, 100%);
    align-self: center;
}

.mp-card[b-e9zeiw1n0q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    text-align: left;
    padding: 1rem 1.25rem;
    color: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-left-width: 0.5rem;
    border-radius: 0.75rem;
    cursor: pointer;
}

.mp-card-title[b-e9zeiw1n0q] {
    font-size: 1.4rem;
    font-weight: 500;
}

.mp-priority-Critical[b-e9zeiw1n0q] {
    border-left-color: #e5484d;
}

.mp-priority-High[b-e9zeiw1n0q] {
    border-left-color: #f5a524;
}

.mp-state[b-e9zeiw1n0q] {
    font-size: 0.9rem;
    padding: 0.1rem 0.6rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
}

.mp-state-InProgress[b-e9zeiw1n0q] {
    background: rgba(41, 121, 255, 0.3);
}

.mp-error[b-e9zeiw1n0q] {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    color: #ff8a8e;
    background: rgba(229, 72, 77, 0.15);
    border: 1px solid rgba(229, 72, 77, 0.5);
}

.mp-pin-field[b-e9zeiw1n0q] {
    max-width: 14rem;
    font-size: 2rem;
}

[b-e9zeiw1n0q] .mp-text {
    width: min(40rem, 100%);
}

[b-e9zeiw1n0q] .mp-text textarea {
    font-size: 1.5rem;
}

.mp-choices[b-e9zeiw1n0q] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.mp-choice[b-e9zeiw1n0q] {
    min-height: 3.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 1.25rem;
    color: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    cursor: pointer;
}

.mp-choice.mp-selected[b-e9zeiw1n0q] {
    background: var(--mud-palette-primary, #1d9e75);
    border-color: var(--mud-palette-primary, #1d9e75);
    color: #fff;
}

.mp-photos[b-e9zeiw1n0q] {
    width: min(40rem, 100%);
}

.mp-photo-row[b-e9zeiw1n0q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

.mp-photo[b-e9zeiw1n0q] {
    position: relative;
    width: 7rem;
    height: 7rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.mp-photo img[b-e9zeiw1n0q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-photo-remove[b-e9zeiw1n0q] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.mp-photo-add[b-e9zeiw1n0q] {
    flex-direction: row;
    cursor: pointer;
}

.mp-photo-add.mp-disabled[b-e9zeiw1n0q] {
    opacity: 0.5;
    pointer-events: none;
}
/* /Components/Shared/TabletReportProblem.razor.rz.scp.css */
/* Report a problem on the kiosk (Azure Boards #293): touch-first like the other kiosk screens - big targets, large type. */
.tr-screen[b-1x5ynk2mez] {
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1.15rem;
}

.tr-header[b-1x5ynk2mez] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1rem;
}

.tr-title[b-1x5ynk2mez] {
    font-size: 2rem;
    font-weight: 500;
}

.tr-muted[b-1x5ynk2mez] {
    color: var(--mud-palette-text-secondary, #9aa7b8);
}

.tr-small[b-1x5ynk2mez] {
    font-size: 0.9rem;
}

.tr-centered[b-1x5ynk2mez] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tr-grid[b-1x5ynk2mez] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    width: min(60rem, 100%);
}

.tr-big-button[b-1x5ynk2mez] {
    min-height: 4.5rem;
    padding: 0.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    cursor: pointer;
}

.tr-other[b-1x5ynk2mez] {
    border-style: dashed;
}

.tr-error[b-1x5ynk2mez] {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    color: #ff8a8e;
    background: rgba(229, 72, 77, 0.15);
    border: 1px solid rgba(229, 72, 77, 0.5);
}

.tr-pin-field[b-1x5ynk2mez] {
    max-width: 14rem;
    font-size: 2rem;
}

[b-1x5ynk2mez] .tr-text {
    width: min(40rem, 100%);
}

[b-1x5ynk2mez] .tr-text textarea {
    font-size: 1.5rem;
}

.tr-photos[b-1x5ynk2mez] {
    width: min(40rem, 100%);
}

.tr-photo-row[b-1x5ynk2mez] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

.tr-photo[b-1x5ynk2mez] {
    position: relative;
    width: 7rem;
    height: 7rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.tr-photo img[b-1x5ynk2mez] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tr-photo-remove[b-1x5ynk2mez] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.tr-photo-add[b-1x5ynk2mez] {
    flex-direction: row;
    cursor: pointer;
}

.tr-photo-add.tr-disabled[b-1x5ynk2mez] {
    opacity: 0.5;
    pointer-events: none;
}
/* /Components/Shared/TabletStock.razor.rz.scp.css */
/* Stock on the kiosk (Azure Boards #233): touch-first like the receiving form - big targets, large type - and the kiosk's own
   colours: bright amber for lines expiring soon, bright red for lines past their date; ordinary lines stay dim. */
.ts-screen[b-1ayrpmuts4] {
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1.15rem;
}

.ts-header[b-1ayrpmuts4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1rem;
}

.ts-title[b-1ayrpmuts4] {
    font-size: 2rem;
    font-weight: 500;
}

.ts-muted[b-1ayrpmuts4] {
    color: var(--mud-palette-text-secondary, #9aa7b8);
}

.ts-summary[b-1ayrpmuts4] {
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    border: 2px solid #f5a524;
    background: rgba(245, 165, 36, 0.12);
    font-size: 1.35rem;
}

.ts-list[b-1ayrpmuts4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ts-line[b-1ayrpmuts4] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
}

.ts-line-soon[b-1ayrpmuts4] {
    border-color: #f5a524;
    background: rgba(245, 165, 36, 0.1);
}

.ts-line-expired[b-1ayrpmuts4] {
    border-color: #e5484d;
    background: rgba(229, 72, 77, 0.14);
}

.ts-product[b-1ayrpmuts4] {
    font-size: 1.5rem;
    font-weight: 500;
}

.ts-line-date[b-1ayrpmuts4] {
    text-align: right;
    min-width: 9rem;
}

.ts-date[b-1ayrpmuts4] {
    font-size: 1.35rem;
}

.ts-tag[b-1ayrpmuts4] {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.1rem 0.6rem;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: 500;
}

.ts-tag-soon[b-1ayrpmuts4] {
    color: #1a1200;
    background: #f5a524;
}

.ts-tag-expired[b-1ayrpmuts4] {
    color: #fff;
    background: #e5484d;
}

.ts-line-actions[b-1ayrpmuts4] {
    display: flex;
    gap: 0.75rem;
}

.ts-centered[b-1ayrpmuts4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ts-reasons[b-1ayrpmuts4],
.ts-employee-grid[b-1ayrpmuts4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    width: min(60rem, 100%);
}

.ts-big-button[b-1ayrpmuts4] {
    min-height: 4.5rem;
    padding: 0 1.5rem;
    font-size: 1.4rem;
    color: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    cursor: pointer;
}

.ts-danger[b-1ayrpmuts4] {
    border-color: rgba(229, 72, 77, 0.6);
}

.ts-selected[b-1ayrpmuts4] {
    border-color: #2e8b6e;
    background: rgba(29, 158, 117, 0.25);
}

.ts-error[b-1ayrpmuts4] {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    color: #ff8a8e;
    background: rgba(229, 72, 77, 0.15);
    border: 1px solid rgba(229, 72, 77, 0.5);
}

.ts-pin-field[b-1ayrpmuts4] {
    max-width: 14rem;
    font-size: 2rem;
}

[b-1ayrpmuts4] .ts-reason-text {
    width: min(40rem, 100%);
}

@media (max-width: 900px) {
    .ts-line[b-1ayrpmuts4] {
        grid-template-columns: 1fr;
    }

    .ts-line-date[b-1ayrpmuts4] {
        text-align: left;
    }
}