html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

/* ───────────────────────────────────────────────────────────────────────────
   Gelato Mania design system (matches the client mockups)
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --gm-blue: #1f6cb0;
    --gm-blue-dark: #185fa5;
    --gm-navy: #16243a;
    --gm-navy-dark: #0f1b2e;
    --gm-navy-hover: #1b2a44;
    --gm-content-bg: #eef1f4;
    --gm-border: #d8dee6;
    --gm-green: #2e9b5b;
    --gm-red: #d64545;
    --gm-row-alt: #eef4fb;
    --gm-mint: #98ff98;
}

.gm-mint { color: var(--gm-mint); }
.gm-brandname { display: inline-block; line-height: 1.25; }

.gm-app { display: flex; flex-direction: column; min-height: 100vh; }

.gm-topbar {
    height: 60px; background: var(--gm-blue); color: #fff;
    display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.gm-topbar .gm-title { font-size: 20px; font-weight: 700; }
.gm-topbar .gm-user { font-size: 14px; }
.gm-topbar .gm-user a { color: #fff; text-decoration: none; }
.gm-topbar .gm-user a:hover { text-decoration: underline; }
/* Build identity in the topbar — muted so it never competes with the page. Whether the installation may
   capture is a LICENCE question now and says so in its own bar below, not by recolouring this. */
.gm-topbar .gm-user .gm-version { opacity: .75; font-size: 13px; }

/* Licence: the bar across the office shell when nothing may be captured, and the note beside a capture
   button the licence has disabled. GLOBAL for the same reason #blazor-error-ui is — a scoped .razor.css
   never reaches markup a LAYOUT rendered. */
.gm-licence-bar { background: #fdecea; border-bottom: 1px solid #f0b3ad; color: #8a1f16; padding: 8px 18px; font-size: 13px; font-weight: 600; }
.gm-licence-note { color: #8a1f16; font-size: 13px; font-weight: 600; }

.gm-body { display: flex; flex: 1; }

.gm-sidebar { width: 230px; background: var(--gm-blue); color: #e7eef6; display: flex; flex-direction: column; }
.gm-brand { background: var(--gm-blue); color: #fff; font-weight: 700; padding: 18px 20px; letter-spacing: .5px; }
.gm-nav { display: flex; flex-direction: column; padding-top: 8px; flex: 1; }
.gm-nav a { display: block; color: #e7eef6; text-decoration: none; padding: 12px 20px; font-size: 15px; border: none; }
.gm-nav-group { display: flex; flex-direction: column; }
.gm-nav a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.gm-nav a.active { background: rgba(0, 0, 0, 0.22); color: #fff; font-weight: 600; }
.gm-nav-head { padding: 14px 20px 4px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #7e8aa0; }
.gm-nav-group > summary { list-style: none; cursor: pointer; padding: 12px 20px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); user-select: none; }
.gm-nav-sub > summary { padding: 8px 20px 4px 30px; font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.gm-nav-sub a { padding-left: 40px; }
.gm-nav-group > summary::-webkit-details-marker { display: none; }
.gm-nav-group > summary::before { content: "\25B8\00a0"; font-size: 10px; }
.gm-nav-group[open] > summary::before { content: "\25BE\00a0"; }
.gm-nav-group > summary:hover { color: #fff; }
.gm-nav-group > a { padding-left: 36px; font-size: 14px; }
.gm-help { padding: 16px 20px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }

/* min-width:0 or a wide child (the order grid) stretches this flex item and scrolls the whole
   PAGE sideways instead of scrolling inside its own wrapper — which also kills every sticky column. */
.gm-content { flex: 1; min-width: 0; background: var(--gm-content-bg); padding: 18px 24px; }
.gm-breadcrumb { color: #5a6b80; font-size: 13px; margin-bottom: 12px; }

.gm-section-header {
    background: var(--gm-blue); color: #fff; font-weight: 700; font-size: 16px;
    padding: 12px 16px; border-radius: 3px 3px 0 0;
}
.gm-panel {
    background: #fff; border: 1px solid var(--gm-border); border-top: none;
    padding: 18px; border-radius: 0 0 3px 3px;
}

.gm-table { width: 100%; border-collapse: collapse; }
.gm-table thead th { background: var(--gm-blue); color: #fff; text-align: left; padding: 9px 12px; font-size: 14px; }
.gm-table tbody td { padding: 9px 12px; font-size: 14px; border-bottom: 1px solid #e4e9ef; vertical-align: middle; }
.gm-table tbody tr:nth-child(even) { background: var(--gm-row-alt); }

.gm-btn { border: none; border-radius: 4px; padding: 9px 18px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; }
.gm-btn:disabled { opacity: .55; cursor: default; }
.gm-btn-green { background: var(--gm-green); }
.gm-btn-red { background: var(--gm-red); }
.gm-btn-blue { background: var(--gm-blue); }
.gm-btn-outline { background: #fff; color: #333; border: 1px solid #c2cad4; }

.gm-badge-draft { background: #cdeccd; color: #1c6b2e; padding: 4px 14px; border-radius: 3px; font-weight: 600; font-size: 13px; }
.gm-badge-on { background: #cdeccd; color: #1c6b2e; padding: 3px 12px; border-radius: 12px; font-weight: 600; font-size: 12px; }
.gm-badge-off { background: #e6e9ee; color: #5a6b80; padding: 3px 12px; border-radius: 12px; font-weight: 600; font-size: 12px; }

.gm-note { font-size: 13px; color: #5a6b80; }
.gm-banner { padding: 10px 14px; border-radius: 4px; font-size: 14px; margin-bottom: 14px; }
.gm-banner-info { background: #e6f1fb; border: 1px solid #b5d4f4; color: #185fa5; }
.gm-banner-warn { background: #faeeda; border: 1px solid #f0c478; color: #8a5a12; }

/* Errors have to be impossible to miss — an operator scanning a pallet is looking at the box, not the page.
   Heavier than the info/warn banners on purpose: solid tint, a thick left bar, bold text, and a ⚠ marker. */
.gm-banner-error {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fdeaea; border: 1px solid #f3bdbd; border-left: 6px solid var(--gm-red);
    color: #a12020; font-size: 15px; font-weight: 600; line-height: 1.35;
    padding: 12px 14px; border-radius: 5px; margin: 10px 0;
    box-shadow: 0 1px 3px rgba(176,48,48,.18);
}
.gm-banner-error::before { content: "⚠"; font-size: 17px; line-height: 1.15; }

/* Login screen */
.gm-blank { min-height: 100vh; background: var(--gm-content-bg); display: flex; align-items: flex-start; justify-content: center; padding-top: 60px; }
.gm-login { width: 380px; }
.gm-login-header { background: var(--gm-blue); color: #fff; text-align: center; font-size: 22px; font-weight: 700; padding: 24px; border-radius: 4px 4px 0 0; }
.gm-login-body { background: #fff; padding: 28px 28px 24px; border-radius: 0 0 4px 4px; border: 1px solid var(--gm-border); border-top: none; }
.gm-login-body h2 { text-align: center; font-size: 20px; font-weight: 700; margin: 0 0 18px; color: #222; }
.gm-field { margin-bottom: 14px; }
.gm-field label { display: block; font-size: 13px; color: #5a6b80; margin-bottom: 4px; }
.gm-field input[type=text], .gm-field input[type=password] { width: 100%; padding: 9px 11px; border: 1px solid #c2cad4; border-radius: 4px; font-size: 14px; box-sizing: border-box; }
.gm-check { font-size: 13px; color: #5a6b80; margin: 4px 0 16px; }
.gm-btn-block { width: 100%; padding: 12px; font-size: 16px; }
.gm-login-foot { text-align: center; margin-top: 14px; }
.gm-login-foot a { color: var(--gm-blue); text-decoration: none; font-size: 14px; }

/* Setup / configuration screen */
.gm-setup { width: 820px; max-width: 94vw; }
.gm-setup h1 { font-size: 22px; font-weight: 700; color: #16243a; margin: 0 0 4px; }
.gm-row { display: grid; grid-template-columns: 210px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.gm-row > label { font-size: 13px; color: #5a6b80; }
.gm-row input[type=text], .gm-row input[type=password], .gm-row input[type=number], .gm-row select {
    width: 100%; padding: 8px 10px; border: 1px solid #c2cad4; border-radius: 4px; font-size: 14px; box-sizing: border-box;
}
.gm-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5a6b80; }

/* Sliding toggle switch */
.gm-switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.gm-switch input { opacity: 0; width: 0; height: 0; }
.gm-slider { position: absolute; inset: 0; cursor: pointer; background: #c2cad4; border-radius: 26px; transition: .15s; }
.gm-slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.gm-switch input:checked + .gm-slider { background: var(--gm-green); }
.gm-switch input:checked + .gm-slider::before { transform: translateX(20px); }

/* ── User management grid + role chips + modal ──────────────────────────── */
.gm-chip { display: inline-block; padding: 2px 9px; border-radius: 5px; font-size: 12px; font-weight: 700; margin-right: 4px; }
.gm-locs { background: #eef1f4; color: #5a6b80; padding: 3px 10px; border-radius: 12px; font-size: 12px; }
.gm-status-active { background: #cdeccd; color: #1c6b2e; padding: 3px 12px; border-radius: 12px; font-weight: 700; font-size: 12px; }
.gm-status-locked { background: #f6d6d6; color: #922; padding: 3px 12px; border-radius: 12px; font-weight: 700; font-size: 12px; }
.gm-icon-btn { background: #fff; border: 1px solid #c2cad4; border-radius: 5px; padding: 5px 12px; font-size: 13px; cursor: pointer; color: #16243a; }
.gm-icon-btn.edit { color: var(--gm-blue); border-color: #b5d4f4; background: #f2f8ff; }
.gm-icon-btn.del { color: var(--gm-red); border-color: #f0c9c9; background: #fdf3f3; }
.gm-pager { display: flex; align-items: center; gap: 6px; }
.gm-pager button { background: #fff; border: 1px solid #d8dee6; border-radius: 4px; min-width: 30px; padding: 3px 8px; cursor: pointer; color: #16243a; }
.gm-pager button:disabled { opacity: .4; cursor: default; }
.gm-pager button.active { font-weight: 700; border-color: var(--gm-blue); color: var(--gm-blue); }

.gm-modal-backdrop { position: fixed; inset: 0; background: rgba(16,24,40,.45); display: flex; align-items: flex-start; justify-content: center; padding: 44px 16px; z-index: 1000; }
.gm-modal { background: #fff; width: 780px; max-width: 96vw; max-height: 88vh; overflow: auto; border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.3); padding: 24px 28px; }
.gm-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gm-modal-head h2 { font-size: 22px; font-weight: 700; margin: 0; color: #16243a; }
.gm-modal-x { background: none; border: none; font-size: 22px; cursor: pointer; color: #5a6b80; line-height: 1; }
.gm-form-section { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #5a6b80; border-bottom: 1px solid #e4e9ef; padding-bottom: 6px; margin: 18px 0 14px; }
.gm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.gm-fld { margin-bottom: 2px; }
.gm-fld > label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #5a6b80; margin-bottom: 5px; }
.gm-fld .req { color: var(--gm-red); }
.gm-fld input[type=text], .gm-fld input[type=password], .gm-fld input[type=email] { width: 100%; padding: 9px 11px; border: 1px solid #c2cad4; border-radius: 5px; font-size: 14px; box-sizing: border-box; }
.gm-check-center { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; }
.gm-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ─────────────────────────────────────────────────────────────────────────────
   Gelato Scanner (/scan/*) — handheld only.

   Sized for a ~4" wedge scanner held in one hand: single column, nothing below
   16px (iOS/Android zoom the page when a focused input is smaller), and every
   target at least --scan-tap so a gloved thumb in a cold store can hit it.
   Self-contained under .scan-app — none of the gm-* office styles are touched.
   ───────────────────────────────────────────────────────────────────────────── */
.scan-app { --scan-tap: 56px; min-height: 100vh; background: var(--gm-content-bg); font-size: 17px; color: #16243a; }
.scan-app * { box-sizing: border-box; }

.scan-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; background: var(--gm-navy); color: #fff; padding: 0 12px; min-height: var(--scan-tap); }
.scan-bar h1 { font-size: 19px; font-weight: 700; margin: 0; flex: 1; }
.scan-back { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: -8px; color: #fff; text-decoration: none; font-size: 26px; line-height: 1; }
.scan-badge { font-size: 12px; font-weight: 600; letter-spacing: .3px; background: rgba(255,255,255,.14); border-radius: 12px; padding: 4px 10px; white-space: nowrap; }

/* Scan-home bar: 1fr auto 1fr puts the middle cell on the true centre line, because the outer columns are
   equal by definition — a flex bar only centres when the title and the badge happen to be the same width.
   min-width:0 + ellipsis on the outer cells so a long device id crowds itself, never the company. */
.scan-bar-centred { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
/* A notch down from the 19px other scan bars use: three items on a 360px handheld is about 8px over budget,
   and the title is the one of the three that isn't information. */
.scan-bar-centred h1 { justify-self: start; font-size: 17px; }
.scan-bar-centred .scan-badge { justify-self: end; }
.scan-bar-centred h1, .scan-bar-centred .scan-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scan-company { font-size: 14px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }

.scan-page { padding: 12px; }
.scan-tiles { display: grid; gap: 12px; }
.scan-tile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 0 18px; border: none; border-radius: 8px; background: #fff; border-left: 6px solid var(--gm-blue); box-shadow: 0 1px 3px rgba(22,36,58,.14); font-size: 20px; font-weight: 600; color: #16243a; text-align: left; text-decoration: none; cursor: pointer; }
.scan-tile:active { background: #eef4fb; }
.scan-tile .scan-tile-sub { display: block; font-size: 13px; font-weight: 400; color: #5a6b80; }

.scan-field { margin-bottom: 14px; }
.scan-field > label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #5a6b80; margin-bottom: 6px; }
.scan-field input, .scan-field select { width: 100%; min-height: var(--scan-tap); padding: 10px 12px; font-size: 17px; border: 1px solid #c2cad4; border-radius: 6px; background: #fff; }

/* The scan box itself: the one control that must always be obvious and always focused. */
.scan-box { width: 100%; min-height: 64px; padding: 12px 14px; font-size: 20px; font-weight: 600; letter-spacing: .5px; border: 2px solid var(--gm-blue); border-radius: 8px; background: #fff; }
.scan-box:focus { outline: none; border-color: var(--gm-green); box-shadow: 0 0 0 3px rgba(46,155,91,.25); }

.scan-msg { padding: 11px 13px; border-radius: 6px; font-size: 15px; margin: 12px 0; }
.scan-msg-err { background: #fdeaea; border: 1px solid #f3bdbd; color: #a12020; }
.scan-msg-ok { background: #e6f6ec; border: 1px solid #b6e0c6; color: #1c6b2e; }

/* Rolling capture grid — a card list, not a table: a 4-column table is unreadable at 360px. */
.scan-rows { display: grid; gap: 8px; margin-top: 12px; }
.scan-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--gm-border); border-radius: 8px; padding: 10px 12px; }
.scan-row-item { font-weight: 700; font-size: 16px; word-break: break-word; }
.scan-row-desc { font-size: 13px; color: #5a6b80; }
.scan-row-meta { font-size: 13px; color: #5a6b80; margin-top: 2px; }
.scan-row-qty { display: flex; align-items: center; gap: 8px; }
/* Wide enough for 9999.99 at this weight, and fixed so the row does not reflow as digits are typed.
   56px taps x3 + gaps + 96px still fits a 360px phone. */
.scan-qty-val { width: 96px; flex: 0 0 auto; box-sizing: border-box; min-height: var(--scan-tap);
                text-align: center; font-size: 19px; font-weight: 700; color: #16243a;
                border: 1px solid #c2cad4; border-radius: 8px; background: #fff; padding: 0 4px; }
span.scan-qty-val { border-color: transparent; background: none; }
.scan-step { min-width: var(--scan-tap); min-height: var(--scan-tap); border: 1px solid #c2cad4; border-radius: 8px; background: #fff; font-size: 24px; font-weight: 700; color: #16243a; cursor: pointer; }
.scan-step:active { background: #eef1f4; }
.scan-del { min-width: var(--scan-tap); min-height: var(--scan-tap); border: none; border-radius: 8px; background: #fdeaea; color: #a12020; font-size: 20px; cursor: pointer; }

.scan-empty { text-align: center; color: #5a6b80; font-size: 15px; padding: 26px 12px; }
.scan-total { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; color: #5a6b80; margin-top: 14px; }

/* Complete stays parked at the bottom of the screen — never scrolled away mid-count. */
.scan-actions { position: sticky; bottom: 0; display: grid; gap: 10px; padding: 12px 0 14px; background: linear-gradient(to bottom, rgba(238,241,244,0), var(--gm-content-bg) 22%); }
.scan-btn { width: 100%; min-height: 60px; border: none; border-radius: 8px; font-size: 19px; font-weight: 700; color: #fff; cursor: pointer; }
.scan-btn:disabled { opacity: .5; }
.scan-btn-green { background: var(--gm-green); }
.scan-btn-blue { background: var(--gm-blue); }
.scan-btn-outline { background: #fff; color: #16243a; border: 1px solid #c2cad4; }

/* Build identity at the foot of every scanner screen. ~11px and muted so it costs no usable height. */
.scan-version { padding: 6px 10px 10px; text-align: center; font-size: 11px; color: #8b97a8; }

/* Licence, handheld skin — the bar at the top of the scanner shell and the note under a disabled
   Complete button. Centred and 12px: the operator has to read it at arm's length. */
.scan-licence-bar { background: #fdecea; border-bottom: 1px solid #f0b3ad; color: #8a1f16; padding: 8px 10px; font-size: 12px; font-weight: 700; text-align: center; }
.scan-licence-note { color: #b03030; font-size: 12px; font-weight: 600; text-align: center; padding: 0 4px; }

/* Blazor's error banner. GLOBAL, deliberately — it must never live in a scoped .razor.css file.
   All three layouts (MainLayout, BlankLayout, ScannerLayout) render their own <div id="blazor-error-ui">,
   and scoped CSS only matches the markup its own component rendered. While these rules sat in
   MainLayout.razor.css the div was completely unstyled on the login page and on every scanner screen — so
   `display: none` never applied and "An unhandled error has occurred" was on show permanently, with no error
   behind it, no server exception and nothing in the browser console. Blazor sets display:block itself when
   something really does go wrong. */
#blazor-error-ui {
    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 {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Lot numbers are ALWAYS uppercase (LotNumber.Normalize is the guarantee; this is so the operator SEES
   what will be stored while they type). autocapitalize helps the handheld keyboards do it themselves. */
.gm-lot { text-transform: uppercase; }

/* ───────────────────────────────────────────────────────────────────────────
   Tab strip for a screen with many sections (Server Setup, Master Data). One
   section on screen at a time beats a page you scroll for a minute — anything
   the operator MUST see stays pinned above the strip, never inside a tab.
   ─────────────────────────────────────────────────────────────────────────── */
.gm-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--gm-blue); margin: 18px 0 0; }
.gm-tab { appearance: none; border: 1px solid var(--gm-border); border-bottom: none; background: #eef1f4;
          color: var(--gm-navy); font-size: 14px; font-weight: 600; padding: 9px 16px; cursor: pointer;
          border-radius: 5px 5px 0 0; }
.gm-tab:hover { background: #e2e8f0; }
.gm-tab-active { background: var(--gm-blue); color: #fff; border-color: var(--gm-blue); }
.gm-tab-panel { border: 1px solid var(--gm-border); border-top: none; background: #fff; padding: 16px; }
.gm-tab-panel > .gm-section-header:first-child { margin-top: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   Grid manufacturing order — flavours down, outlets across, totals pinned right.
   Its own class rather than .gm-table: that one sets border-collapse:collapse,
   and collapsed borders are dropped from sticky cells by Chrome and Safari, so
   the frozen column would lose its gridlines the moment you scroll.
   ─────────────────────────────────────────────────────────────────────────── */
.gm-grid-wrap { overflow: auto; max-height: calc(100vh - 330px); border: 1px solid var(--gm-border); background: #fff; }
.gm-grid { border-collapse: separate; border-spacing: 0; }
.gm-grid th, .gm-grid td { box-sizing: border-box; padding: 6px 8px; font-size: 14px; white-space: nowrap;
                           border-bottom: 1px solid #e4e9ef; border-right: 1px solid #e4e9ef; }
.gm-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--gm-blue); color: #fff; font-weight: 600; }

/* FOUR frozen left-hand columns — flavour, plant stock, total ordered, for stock — with the outlets
   scrolling under them. Each `left` is the running sum of the widths before it, so every one of them must
   be fixed-width (box-sizing above makes the declared width the outer width); an auto width would let one
   slide over the next as the content changes. A long flavour name is ellipsised by .gm-grid-name rather
   than allowed to widen the cell, because auto table layout ignores width when the content is wider. */
.gm-grid .gm-grid-flavour { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; width: 260px; min-width: 260px; }
.gm-grid .gm-grid-name { overflow: hidden; text-overflow: ellipsis; }
.gm-grid .gm-grid-stock { position: sticky; left: 260px; z-index: 2; background: #eef4ec; text-align: right; width: 148px; min-width: 148px; }
.gm-grid .gm-grid-total { position: sticky; left: 408px; z-index: 2; background: #f2f6fc; text-align: right; font-weight: 600; width: 132px; min-width: 132px; }
.gm-grid .gm-grid-forstock { position: sticky; left: 540px; z-index: 2; background: #fff; text-align: right; width: 96px; min-width: 96px; border-right: 2px solid #cdd8e4; }
.gm-grid thead .gm-grid-flavour, .gm-grid thead .gm-grid-stock, .gm-grid thead .gm-grid-total,
.gm-grid thead .gm-grid-forstock { z-index: 4; background: var(--gm-blue); }

/* Sticky cells must repaint the row stripe themselves — they are out of the row's own background. */
.gm-grid tbody tr:nth-child(even) td { background: var(--gm-row-alt); }
.gm-grid tbody tr:nth-child(even) .gm-grid-flavour,
.gm-grid tbody tr:nth-child(even) .gm-grid-forstock { background: var(--gm-row-alt); }
.gm-grid tbody tr:nth-child(even) .gm-grid-total { background: #e4ecf8; }
.gm-grid tbody tr:nth-child(even) .gm-grid-stock { background: #e3ece1; }

.gm-grid tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--gm-navy); color: #fff; font-weight: 700; }
.gm-grid tfoot .gm-grid-flavour, .gm-grid tfoot .gm-grid-stock, .gm-grid tfoot .gm-grid-total,
.gm-grid tfoot .gm-grid-forstock { background: var(--gm-navy); z-index: 3; }

.gm-grid-cell { width: 64px; padding: 4px 6px; font-size: 14px; text-align: right;
                border: 1px solid #c2cad4; border-radius: 3px; }
.gm-grid-cell:focus { outline: none; border-color: var(--gm-blue); box-shadow: 0 0 0 2px rgba(31,108,176,.2); }
.gm-grid-inactive { font-style: italic; opacity: .8; }
/* The "for stock" column looks exactly like an outlet column — its heading says what it is. */