@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');

html, body {
    font-family: 'Segoe UI','Open Sans', Arial, Helvetica, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


.spinner {
    border: 16px solid var(--secondary-color);
    border-top: 16px solid var(--primary-color);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1500ms linear infinite;
    top: 40%;
    left: calc(50% - 40px);
    position: relative;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* Fix ComboBox/DropDown popup positioning when inside a TelerikWindow modal.
   Telerik Blazor popups are appended to the body and use absolute positioning.
   When the anchor element is inside a modal with CSS transforms, the position
   calculation becomes incorrect. Using fixed positioning bypasses this issue. */

/* Force all Telerik popups to use fixed positioning relative to viewport */
.k-animation-container {
    position: fixed !important;
    z-index: 12000 !important;
}

/* Ensure popup list has proper max-height when inside modal context */
.k-animation-container .k-popup {
    max-height: 300px;
}

/* Allow the window content to scroll normally */
.custom-window .k-window-content {
    overflow: auto;
}

/* Scrollable wrapper inside window content */
.window-scroll-wrapper {
    width: 100%;
    min-height: 100%;
}

/* ───────────────────────────────────────────────────────────────────────────
   ELE Book-out scan station (booking Inc-A). POS-style single-desk layout on
   the cert shell (REQ-NF-07). Status colours map to the cert palette: red =
   unrecoverable, amber = recoverable-warning, green = ok/ready.
   ─────────────────────────────────────────────────────────────────────────── */
.bookout-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    margin-bottom: 0.75rem;
}

.bookout-context-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bookout-context-center {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bookout-save-state {
    font-size: 0.85em;
}

.bookout-connectivity {
    font-size: 0.85em;
    margin-right: 0.75rem;
}

.bookout-online {
    color: var(--bs-success, #198754);
}

.bookout-offline {
    color: var(--bs-danger, #dc3545);
}

.bookout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
    align-items: start;
}

@media (max-width: 992px) {
    .bookout-grid {
        grid-template-columns: 1fr;
    }
}

.bookout-col-left,
.bookout-col-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bookout-identify-modes {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.bookout-find {
    margin-bottom: 0.5rem;
}

.bookout-scan-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.bookout-scan-field {
    flex-grow: 1;
    font-size: 1.1rem;
}

/* Region A — draw-location button row (screen §2a.3). Large, equal, glove-friendly store targets; the row
   wraps to a second line rather than horizontal-scrolling (a scan-station must show the whole choice). */
.bookout-store-row-prompt {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.bookout-store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.bookout-store-button {
    min-width: 12rem;
    min-height: 3.25rem;
    font-size: 1.05rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bookout-store-button.selected {
    font-weight: 700;
}

.bookout-store-button-site {
    font-size: 0.85rem;
    opacity: 0.85;
}

.bookout-store-button-locked {
    font-size: 0.8rem;
    font-weight: 700;
}

.bookout-store-row-hint,
.bookout-store-loading {
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 0.25rem;
}

/* Verdict badges (End-User access + cart lines). */
.bookout-verdict {
    margin-top: 0.4rem;
    font-weight: 600;
}

.bookout-verdict-ok {
    color: var(--bs-success, #198754);
}

.bookout-verdict-warning {
    color: var(--bs-warning-text, #997404);
}

.bookout-verdict-error {
    color: var(--bs-danger, #dc3545);
}

/* Per-line glyph colours (the rule's already-classified severity). */
.bookout-line-glyph {
    font-size: 1.1rem;
}

.bookout-glyph-ok {
    color: var(--bs-success, #198754);
}

.bookout-glyph-warn {
    color: var(--bs-warning-text, #997404);
}

.bookout-glyph-block {
    color: var(--bs-danger, #dc3545);
}

.bookout-glyph-unverified,
.bookout-glyph-busy {
    color: var(--bs-secondary, #6c757d);
}

/* Close bar — the largest target, glove-friendly. */
.bookout-close-button {
    width: 100%;
    font-size: 1.2rem;
    padding: 0.6rem 1rem;
}

.bookout-close-subline {
    margin-top: 0.35rem;
    font-size: 0.85em;
}

.bookout-close-blockers {
    margin-top: 0.5rem;
}

.bookout-blocker-title {
    font-weight: 600;
}

.bookout-blocker-list {
    margin: 0.35rem 0 0 1rem;
    padding: 0;
}

.bookout-confirmation {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

/* ── ADR-022 closed-issue read surfaces (Storeman recent issues + mine booking report) ───────────────────── */
/* D-22.6 honesty-first colour: due-back-passed is amber/neutral, NEVER safety-red (the system cannot assert a
   confirmed-late state). due-back (in future) is a quiet info tone. */
.closed-issue-due-passed {
    color: var(--bs-warning-text, #997404);
}

.closed-issue-due-back {
    color: var(--bs-info-text, #087990);
}

.closed-issues-subhead,
.mine-report-result-head {
    font-size: 0.85em;
    margin-bottom: 0.5rem;
}

.closed-issues-filterbar,
.mine-report-export {
    margin: 0.5rem 0;
}

/* The permanent on-surface honesty line (Storeman §4) + banner (mine §3a). */
.closed-issue-honesty,
.mine-report-honesty-banner {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.85em;
    color: var(--bs-secondary-color, #6c757d);
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.35rem;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}

.closed-issue-honesty-icon,
.mine-report-honesty-icon {
    font-weight: 700;
}

.closed-issue-drill-actions,
.mine-report-scope-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

.closed-issue-unit-list {
    list-style: none;
    margin: 0.35rem 0;
    padding: 0;
}

.closed-issue-unit-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
}

/* ── ADR-021 Unclosed-draws (Storeman draft-issues) surface — draft-issues-storeman.md ────────────────────── */
/* Honesty-first: the surface is NEUTRAL/info until an action is taken (§3) — no green on the list (a Draft is not
   success), no red on the list (nothing blocks). The destructive emphasis lives ONLY in the Discard confirm
   (.draft-abandon-dialog-danger), the one loud thing on the flow (§6d.4). */
.draft-issues-row-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Resume is the visually dominant action; Void / Discard are quieter, grouped right and clearly separated (§4). */
.draft-issues-row-actions .k-button:first-child {
    margin-right: auto;
}

.draft-issues-offline-reason {
    font-size: 0.8em;
    margin-top: 0.25rem;
}

/* The calm "all caught up" empty state (§8) — positive, never red; visibly distinct from the offline can't-act
   banner (which is .alert-warning above the list). */
.draft-issues-caughtup {
    font-weight: 500;
}

/* The two abandon confirm dialogs (§6b/§6c). Shared calm base; the danger modifier carries the asymmetric weight
   so Void (calm) and Discard (loud) read as different stakes — the §6d teaching treatment. */
.draft-abandon-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.draft-abandon-subject {
    font-weight: 600;
}

.draft-abandon-body {
    margin: 0;
    color: var(--bs-secondary-color, #6c757d);
}

/* Discard alone: the ⚠ irreversibility headline is the FIRST + loudest element (§6c / §6d.4). */
.draft-abandon-headline-danger {
    margin: 0;
    font-weight: 700;
    color: var(--bs-danger-text, #b02a37);
}

.draft-abandon-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* The first-class dependency-pending state (mine §9) — neutral, distinct, never red. */
.mine-report-dependency-pending {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 1.5rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.mine-report-dep-icon {
    font-size: 1.5rem;
}

.mine-report-dep-title {
    font-weight: 700;
}

/* Scope rail drives one result grid (mine §4). */
.mine-report-grid {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.mine-report-rail-col {
    flex: 0 0 240px;
    max-width: 240px;
}

.mine-report-result-col {
    flex: 1 1 480px;
    min-width: 320px;
}

.mine-report-scope-section {
    margin-bottom: 0.75rem;
}

.mine-report-scope-head {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.8em;
    margin-bottom: 0.35rem;
}

.mine-report-facet {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
    font-size: 0.85em;
}

.mine-report-facet-check {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.85em;
}

/* ── Visual-inspection checklist screen (Inc-3b, inspection screen §2-§7) ─────────────────── */
/* Reuses the book-out/book-in station chrome (bookout-context-bar etc.); these add the
   inspection-specific surfaces: the line glyphs, the Pass/Fail toggles, the running outcome, the
   action bar, and the FAIL handoff panel. The colour grammar is shared (green = pass, red = fail/the
   bad outcome, amber = the thing you still have to do). */

.inspection-station {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.inspection-out-note {
    margin-left: 0.75rem;
    font-style: italic;
}

/* Per-line state glyph (§4b). */
.inspection-line-glyph {
    font-size: 1.15rem;
}

.inspection-glyph-unanswered {
    color: var(--bs-secondary, #6c757d);
}

.inspection-glyph-pass {
    color: var(--bs-success, #198754);
}

.inspection-glyph-fail {
    color: var(--bs-danger, #dc3545);
}

.inspection-line-number {
    color: var(--bs-secondary, #6c757d);
    font-variant-numeric: tabular-nums;
}

.inspection-line-desc {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.inspection-origin-tag {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.inspection-mandatory-lock {
    font-size: 1rem;
}

/* Pass/Fail toggles — equal-size, glove-friendly (§5a: Fail never harder than Pass). */
.inspection-result-toggles {
    display: flex;
    gap: 0.4rem;
}

.inspection-pass-btn,
.inspection-fail-btn {
    min-width: 5rem;
    font-weight: 600;
}

/* Inline Fail comment (§5b) — revealed under the line; the amber nag is the property-warning-text. */
.inspection-comment-slot {
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.inspection-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Empty-template first-class state (§4f) — encouraging, NOT an error (no red). */
.inspection-empty-template,
.inspection-empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
}

.inspection-empty-headline {
    font-weight: 600;
    margin: 0;
}

.inspection-empty-body {
    color: var(--bs-secondary, #6c757d);
    margin: 0;
}

/* Running outcome (§5c) — CR-8 made legible. */
.inspection-outcome-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.inspection-verdict-pass {
    color: var(--bs-success, #198754);
    font-weight: 600;
}

.inspection-verdict-fail {
    color: var(--bs-danger, #dc3545);
    font-weight: 700;
}

.inspection-outcome-counts {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Action bar (§6a/§7) — Finalise names its outcome; Back to batch is a plain back-out. */
.inspection-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.inspection-action-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.inspection-blockers {
    position: relative;
}

.inspection-blocker-list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

.inspection-offline-note {
    max-width: 18rem;
}

/* FAIL handoff panel (§6c) — a calm, VALID quarantine resolution; red-ACCENTED, NOT a system error. */
.inspection-fail-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-left: 4px solid var(--bs-danger, #dc3545);
    padding-left: 0.75rem;
}

.inspection-fail-headline {
    font-weight: 700;
    margin: 0;
}

.inspection-fail-lines {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inspection-fail-line-comment {
    font-style: italic;
    color: var(--bs-secondary, #6c757d);
    margin-left: 0.5rem;
}

.inspection-fail-steps {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.inspection-fail-footnote {
    font-size: 0.85em;
    margin: 0.15rem 0 0;
}

/* Finalise confirm + leave-without-finalising dialogs. */
.inspection-confirm-dialog,
.inspection-leave-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.inspection-confirm-fail .inspection-confirm-headline {
    color: var(--bs-danger, #dc3545);
}

.inspection-confirm-pass .inspection-confirm-headline {
    color: var(--bs-success, #198754);
}

.inspection-confirm-actions,
.inspection-leave-actions,
.inspection-add-freetext-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* Add-item modal (§4d). */
.inspection-add-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.inspection-add-search-row {
    margin-bottom: 0.5rem;
}