/* design tokens (--wm-colour-*, --wm-rag-*, --wm-radius) come from the shared wm-tokens.css; only what is specific to this app is set here */
:root {
    /*    --wm-header-height: 56px;*/
    --wm-footer-height: 72px;
    --wm-page-padding: 1rem;

    /* handheld menu tiles are compact */
    --wm-tile-height: 120px;
    --wm-tile-icon: 3rem;

    /* app-level override: the handheld has always declared held as slate grey; the shared (and Web) value is black */
    --wm-colour-status-held: #64748b;
}

html,
body,
#app {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
}

.startup-screen {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    text-align: center;
}

.startup-logo {
    font-size: 5rem;
    color: var(--bs-secondary);
}

.startup-message {
    color: var(--bs-secondary-color);
    font-size: 1rem;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: var(--bs-danger);
    color: white;
    z-index: 10000;
}

    #blazor-error-ui .reload {
        margin-top: 1rem;
    }

    #blazor-error-ui .error-title {
        font-weight: 600;
        margin-bottom: .5rem;
    }




.badge-wms-priority-urgent {
    background-color: var(--wm-colour-priority-urgent);
    border-color: color-mix(in srgb, var(--wm-colour-priority-urgent), black 25%);
    color: #fff;
    --wm-priority-icon-colour: var(--wm-colour-priority-urgent);
}

.badge-wms-priority-high {
    background-color: var(--wm-colour-priority-high);
    border-color: color-mix(in srgb, var(--wm-colour-priority-high), black 25%);
    color: #fff;
    --wm-priority-icon-colour: var(--wm-colour-priority-high);
}

.badge-wms-priority-medium {
    background-color: var(--wm-colour-priority-medium);
    border-color: color-mix(in srgb, var(--wm-colour-priority-medium), black 25%);
    color: #fff;
    --wm-priority-icon-colour: var(--wm-colour-priority-medium);
}

.badge-wms-priority-low {
    background-color: var(--wm-colour-priority-low);
    border-color: color-mix(in srgb, var(--wm-colour-priority-low), black 25%);
    color: #fff;
    --wm-priority-icon-colour: var(--wm-colour-priority-low);
}



.badge-wms-status-created {
    background-color: var(--wm-colour-status-created);
    border-color: color-mix(in srgb, var(--wm-colour-status-created), black 25%);
    color: #fff;
}

.badge-wms-status-assigned {
    background-color: var(--wm-colour-status-assigned);
    border-color: color-mix(in srgb, var(--wm-colour-status-assigned), black 25%);
    color: #fff;
}

/* active is the class the job status mapper gives In Progress (badge-wms-status-active); this file used to style only inprogress,
   so an In Progress job badge on the handheld had no colour (found 13 October 2026; JobStatusBadgeColourRule) */
.badge-wms-status-inprogress,
.badge-wms-status-active {
    background-color: var(--wm-colour-status-inprogress);
    border-color: color-mix(in srgb, var(--wm-colour-status-inprogress), black 25%);
    color: var(--wm-colour-status-active-contrast);
}

.badge-wms-status-completed {
    background-color: var(--wm-colour-status-completed);
    border-color: color-mix(in srgb, var(--wm-colour-status-completed), black 25%);
    color: #fff;
}

.badge-wms-status-cancelled {
    background-color: var(--wm-colour-status-cancelled);
    border-color: color-mix(in srgb, var(--wm-colour-status-cancelled), black 25%);
    color: #fff;
}

.badge-wms-status-failed {
    background-color: var(--wm-colour-status-failed);
    border-color: color-mix(in srgb, var(--wm-colour-status-failed), black 25%);
    color: #fff;
}

/* the strategy badges: white, the area colour as border and text (the same rules as the portal's app.css). The pick ticket strategy's class is
   badge-wms-pick-strategy-pick-ticket (PickJobStrategyPresentationMapper); this file used to name a -single class nobody emits, and had no put or count rules */
.badge-wms-pick-strategy-collate,
.badge-wms-pick-strategy-customer,
.badge-wms-pick-strategy-pick-ticket,
.badge-wms-pick-strategy-shipping,
.badge-wms-pick-strategy-wave {
    background-color: #fff;
    border-color: var(--wm-colour-workflow-outbound);
    color: var(--wm-colour-workflow-outbound);
}

.badge-wms-put-strategy-collate,
.badge-wms-put-strategy-receipt-items,
.badge-wms-put-strategy-receipt-note,
.badge-wms-put-strategy-vendor,
.badge-wms-put-strategy-wave {
    background-color: #fff;
    border-color: var(--wm-colour-workflow-inbound);
    color: var(--wm-colour-workflow-inbound);
}

.badge-wms-count-strategy-cycle,
.badge-wms-count-strategy-location,
.badge-wms-count-strategy-product,
.badge-wms-count-strategy-shortage,
.badge-wms-count-strategy-recount {
    background-color: #fff;
    border-color: var(--wm-colour-workflow-count);
    color: var(--wm-colour-workflow-count);
}

.btn-wms-status-created {
    --wm-button-colour: var(--wm-colour-status-created);
}

.btn-wms-status-assigned {
    --wm-button-colour: var(--wm-colour-status-assigned);
}

/* active is the class the job status mapper gives In Progress (badge-wms-status-active): the same colour as inprogress */
.btn-wms-status-inprogress,
.btn-wms-status-active {
    --wm-button-colour: var(--wm-colour-status-inprogress);
}

.btn-wms-status-completed {
    --wm-button-colour: var(--wm-colour-status-completed);
}

.btn-wms-status-cancelled {
    --wm-button-colour: var(--wm-colour-status-cancelled);
}

.btn-wms-status-failed {
    --wm-button-colour: var(--wm-colour-status-failed);
}

.btn-wms-workflow-inbound {
    --wm-button-colour: var(--wm-colour-workflow-inbound);
}

.btn-wms-workflow-outbound {
    --wm-button-colour: var(--wm-colour-workflow-outbound);
}

.btn-wms-workflow-move {
    --wm-button-colour: var(--wm-colour-workflow-move);
}

.btn-wms-workflow-count {
    --wm-button-colour: var(--wm-colour-workflow-count);
}

.btn-wms-workflow-inventory {
    --wm-button-colour: var(--wm-colour-workflow-inventory);
}

.btn-wms-workflow-warehouse {
    --wm-button-colour: var(--wm-colour-workflow-warehouse);
}

.btn-wms-status-created,
.btn-wms-status-assigned,
.btn-wms-status-inprogress,
.btn-wms-status-active,
.btn-wms-status-completed,
.btn-wms-status-cancelled,
.btn-wms-status-failed,
.btn-wms-workflow-inbound,
.btn-wms-workflow-outbound,
.btn-wms-workflow-move,
.btn-wms-workflow-count,
.btn-wms-workflow-inventory,
.btn-wms-workflow-warehouse {
    --bs-btn-bg: var(--wm-button-colour);
    --bs-btn-border-color: var(--wm-button-colour);
    /* a disabled tile (MenuTile.menu-tile-disabled dims it) keeps its colour: Bootstrap's disabled background is transparent, white text on white */
    --bs-btn-disabled-bg: var(--wm-button-colour);
    --bs-btn-disabled-border-color: var(--wm-button-colour);
    --bs-btn-disabled-color: #fff;
    --bs-btn-hover-bg: color-mix( in srgb, var(--wm-button-colour), black var(--wm-colour-hover-darken) );
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: color-mix( in srgb, var(--wm-button-colour), black var(--wm-colour-active-darken) );
    --bs-btn-active-border-color: var(--bs-btn-active-bg);
}

.btn-wms-status-created,
.btn-wms-status-assigned,
.btn-wms-status-inprogress,
.btn-wms-status-active,
.btn-wms-status-completed,
.btn-wms-status-cancelled,
.btn-wms-status-failed,
.btn-wms-workflow-inbound,
.btn-wms-workflow-outbound,
.btn-wms-workflow-move,
.btn-wms-workflow-count,
.btn-wms-workflow-inventory,
.btn-wms-workflow-warehouse {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

/* in progress is the warning yellow: dark text (after the white above, so it wins) */
.btn-wms-status-inprogress,
.btn-wms-status-active {
    --bs-btn-color: var(--wm-colour-status-active-contrast);
    --bs-btn-hover-color: var(--wm-colour-status-active-contrast);
    --bs-btn-active-color: var(--wm-colour-status-active-contrast);
    --bs-btn-disabled-color: var(--wm-colour-status-active-contrast);
    /* a MenuTile sets its own text colour (scoped, white): this is its dark ink */
    --wm-tile-ink: var(--wm-colour-status-active-contrast);
}

.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

    .loading-indicator .spinner-border {
        width: 6rem;
        height: 6rem;
        border-width: 0.6rem;
    }

.table-xl > :not(caption) > * > * {
    padding: 0.25rem 1.5rem;
    font-size: 1.5rem;
}