/* LBSA back office skin: the LBSA tokens (lbsa-tokens.css) applied to Bootstrap 5, the app shell, the floor app and the
   markup the pages use, so every page reads right in dark (the default) and in light. Loaded after site.css, so it wins
   over site.css's light-only values (--app-bg, white boxes) without editing them.
   Ported from ..\LBSA_Ecosystem\src\LBSA.BackOffice\wwwroot\css\backoffice.css: the Bootstrap re-skin, the shell (dark
   sidebar with its icon rail, top bar, breadcrumbs, page header; plus this app's drawer below 992 px and the Stock Levels
   dot), the floor app and the generic sections.
   The Ecosystem's catalogue, 3D, customers, orders, stock planning, ledger, commission and storefront sections are not
   ported. Flat surfaces, no animated background (that's the storefront's). */

/* ---------- Bootstrap variables -> LBSA tokens ---------- */
:root, [data-theme] {
  --bs-body-font-family: var(--lb-font-body);
  --bs-body-font-size: 14px;
  --bs-body-color: var(--lb-text);
  --bs-body-bg: var(--lb-bg);
  --bs-emphasis-color: var(--lb-text);
  --bs-secondary-color: var(--lb-muted);
  --bs-tertiary-color: var(--lb-dim);
  --bs-secondary-bg: var(--lb-surface-3);
  --bs-tertiary-bg: var(--lb-surface-2);
  --bs-border-color: var(--lb-border);
  --bs-border-color-translucent: var(--lb-border);
  --bs-border-radius: var(--lb-radius);
  --bs-border-radius-sm: var(--lb-radius-sm);
  --bs-border-radius-lg: var(--lb-radius-md);
  --bs-primary: #c2570b;
  --bs-primary-rgb: 194, 87, 11;
  --bs-primary-text-emphasis: var(--lb-accent-text);
  --bs-primary-bg-subtle: var(--lb-accent-soft);
  --bs-primary-border-subtle: rgba(255, 138, 31, .35);
  --bs-link-color: var(--lb-accent-text);
  --bs-link-color-rgb: 194, 87, 11;
  --bs-link-hover-color: #9c4508;
  --bs-success-rgb: 23, 138, 85;
  --bs-danger-rgb: 214, 69, 69;
  --bs-warning-rgb: 217, 138, 0;
  --bs-info-rgb: 31, 127, 209;
  --bs-focus-ring-color: rgba(255, 138, 31, .32);
  --bs-heading-color: inherit;
  --bs-code-color: #b3470a;
  --bs-highlight-bg: #fff1dc;

  /* site.css variables follow the tokens too */
  --app-bg: var(--lb-bg);
  --app-surface: var(--lb-surface);
  --app-border: var(--lb-border);
  --app-shadow: var(--lb-shadow-1);
  --app-radius: var(--lb-radius-md);
  --app-radius-sm: var(--lb-radius-sm);
  --app-text-muted: var(--lb-muted);

  /* the shell's sizes */
  --bo-sidebar-w: 256px;
  --bo-sidebar-dock: 64px;
  --bo-topbar-h: 60px;
}
[data-theme="dark"] {
  --bs-primary: #ffb347;
  --bs-primary-rgb: 255, 179, 71;
  --bs-link-color: #ffb347;
  --bs-link-color-rgb: 255, 179, 71;
  --bs-link-hover-color: #ffd08a;
  --bs-code-color: #ffb347;
  --bs-highlight-bg: rgba(255, 179, 71, .18);
}

html, body { font-family: var(--lb-font-body); }
body { background: var(--lb-bg); color: var(--lb-text); font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
::selection { background: rgba(255, 138, 31, .28); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--lb-font-head); letter-spacing: -.015em; }
h5, .h5 { font-size: 16px; font-weight: 600; }
h6, .h6 { font-size: 14px; font-weight: 600; }
a { color: var(--lb-accent-text); text-underline-offset: 3px; }
code { color: var(--bs-code-color); background: var(--lb-accent-soft); padding: .1em .38em; border-radius: 5px; font-size: .86em; font-family: var(--lb-font-mono); }
.text-muted { color: var(--lb-muted) !important; }
.small, small { font-size: 12.5px; }
.fw-semibold { font-weight: 600 !important; }
.bg-light { background-color: var(--lb-surface-2) !important; }
.bg-white { background-color: var(--lb-surface) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--lb-border) !important; }
.text-dark { color: var(--lb-text) !important; }
.shadow-sm { box-shadow: var(--lb-shadow-1) !important; }
.shadow { box-shadow: var(--lb-shadow-2) !important; }
hr { border-color: var(--lb-border); opacity: 1; }

/* ---------- cards ---------- */
.card { border: 1px solid var(--lb-border); border-radius: var(--lb-radius-md); background: var(--lb-surface); box-shadow: var(--lb-shadow-1); color: var(--lb-text); }
.card-header { background: var(--lb-surface); border-bottom: 1px solid var(--lb-border); padding: 14px 18px; font-family: var(--lb-font-head); font-weight: 600; border-radius: var(--lb-radius-md) var(--lb-radius-md) 0 0 !important; }
.card-header h5, .card-header h6, .card-header .h5, .card-header .h6 { margin: 0; font-size: 15px; }
.card-header .bi { color: var(--lb-accent-text); }
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-danger, .card-header.bg-warning, .card-header.bg-info, .card-header.bg-dark, .card-header.bg-secondary {
  background: var(--lb-surface) !important; color: var(--lb-text) !important; box-shadow: inset 3px 0 0 var(--hdr, var(--lb-accent));
}
.card-header.bg-success { --hdr: var(--lb-success); } .card-header.bg-danger { --hdr: var(--lb-danger); } .card-header.bg-warning { --hdr: var(--lb-warning); } .card-header.bg-info { --hdr: var(--lb-info); } .card-header.bg-dark, .card-header.bg-secondary { --hdr: var(--lb-text-2); }
.card-header.text-white .bi, .card-header.bg-primary .bi { color: var(--hdr, var(--lb-accent-text)); }
.card-body { padding: 18px; }
.card-footer { background: var(--lb-surface-2); border-top: 1px solid var(--lb-border); }
.card.border-primary, .card.border-warning, .card.border-danger, .card.border-success, .card.border-info { border-color: var(--lb-border) !important; }
.card.border-warning { box-shadow: inset 3px 0 0 var(--lb-warning), var(--lb-shadow-1); }
.card.border-danger { box-shadow: inset 3px 0 0 var(--lb-danger), var(--lb-shadow-1); }
.card.border-success { box-shadow: inset 3px 0 0 var(--lb-success), var(--lb-shadow-1); }
.card.border-primary, .card.border-info { box-shadow: inset 3px 0 0 var(--lb-accent), var(--lb-shadow-1); }

/* ---------- tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--lb-text); --bs-table-border-color: var(--lb-border); --bs-table-hover-bg: var(--lb-surface-2); --bs-table-striped-bg: var(--lb-surface-2); margin-bottom: 0; font-size: 13.5px; }
.table > thead > tr > th, .table th { color: var(--lb-muted); font: 600 11.5px/1.2 var(--lb-font-body); letter-spacing: .04em; text-transform: uppercase; background: var(--lb-surface-2); border-bottom: 1px solid var(--lb-border); padding-top: 10px; padding-bottom: 10px; white-space: nowrap; }
.table > :not(caption) > * > * { padding: 10px 12px; border-bottom-color: var(--lb-border); }
.table-sm > :not(caption) > * > * { padding: 7px 10px; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--lb-surface-2); }
.table-light, .table > thead.table-light > tr > th { --bs-table-bg: var(--lb-surface-2); --bs-table-color: var(--lb-muted); }
.table-primary { --bs-table-bg: var(--lb-accent-soft); --bs-table-color: var(--lb-text); }
.table-success { --bs-table-bg: var(--lb-success-soft); --bs-table-color: var(--lb-text); }
.table-danger { --bs-table-bg: var(--lb-danger-soft); --bs-table-color: var(--lb-text); }
.table-warning { --bs-table-bg: var(--lb-warning-soft); --bs-table-color: var(--lb-text); }
.table-info { --bs-table-bg: var(--lb-info-soft); --bs-table-color: var(--lb-text); }
.table-secondary { --bs-table-bg: var(--lb-surface-3); --bs-table-color: var(--lb-text); }
.table-responsive { border-radius: var(--lb-radius); }
.card > .table-responsive, .card-body > .table-responsive:only-child { border-radius: 0; }
/* phone: older tables scroll sideways inside their card instead of breaking words a letter at a time */
@media (max-width: 700px) { .table-responsive > .table { min-width: 560px; } }
.table thead.sticky-top th { background: var(--lb-surface-2); }

/* ---------- badges: soft pills ---------- */
.badge { font: 600 11.5px/1 var(--lb-font-body); letter-spacing: .01em; padding: .42em .72em; border-radius: 999px; vertical-align: middle; }
.badge.bg-primary, .badge.text-bg-primary { background: var(--lb-accent-soft) !important; color: var(--lb-accent-text) !important; }
.badge.bg-success, .badge.text-bg-success { background: var(--lb-success-soft) !important; color: var(--lb-success-ink) !important; }
.badge.bg-danger, .badge.text-bg-danger { background: var(--lb-danger-soft) !important; color: var(--lb-danger-ink) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--lb-warning-soft) !important; color: var(--lb-warning-ink) !important; }
.badge.bg-info, .badge.text-bg-info { background: var(--lb-info-soft) !important; color: var(--lb-info-ink) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light { background: var(--lb-neutral-soft) !important; color: var(--lb-text-2) !important; }
.badge.bg-dark, .badge.text-bg-dark { background: var(--lb-text) !important; color: var(--lb-surface) !important; }
.badge.rounded-pill.position-absolute { background: var(--lb-danger) !important; color: #fff !important; }
.badge.bg-white { background: var(--lb-surface) !important; color: var(--lb-text-2) !important; box-shadow: inset 0 0 0 1px var(--lb-border-2); border: 0 !important; }

/* ---------- alerts: soft with a leading accent ---------- */
.alert { border: 1px solid transparent; border-radius: var(--lb-radius); padding: 12px 14px 12px 16px; font-size: 13.5px; line-height: 1.5; position: relative; box-shadow: inset 3px 0 0 var(--al, var(--lb-info)); }
.alert-primary, .alert-info { --al: var(--lb-info); background: var(--lb-info-soft); color: var(--lb-info-ink); border-color: color-mix(in srgb, var(--lb-info) 18%, transparent); }
.alert-success { --al: var(--lb-success); background: var(--lb-success-soft); color: var(--lb-success-ink); border-color: color-mix(in srgb, var(--lb-success) 18%, transparent); }
.alert-danger { --al: var(--lb-danger); background: var(--lb-danger-soft); color: var(--lb-danger-ink); border-color: color-mix(in srgb, var(--lb-danger) 18%, transparent); }
.alert-warning { --al: var(--lb-warning); background: var(--lb-warning-soft); color: var(--lb-warning-ink); border-color: color-mix(in srgb, var(--lb-warning) 22%, transparent); }
.alert-secondary, .alert-light { --al: var(--lb-border-3); background: var(--lb-surface-2); color: var(--lb-text-2); border-color: var(--lb-border); }
.alert-dark { --al: var(--lb-text); background: var(--lb-surface-3); color: var(--lb-text); }
.alert .alert-link { color: inherit; }
.alert .btn-close { padding: 14px; }

/* ---------- forms ---------- */
.form-label { font: 600 13px/1.2 var(--lb-font-body); color: var(--lb-text-2); margin-bottom: 6px; }
.form-text { color: var(--lb-muted); font-size: 12px; }
.form-control, .form-select {
  min-height: var(--lb-control); border: 1px solid var(--lb-border-2); border-radius: var(--lb-radius); background-color: var(--lb-surface); color: var(--lb-text);
  font-size: 14px; box-shadow: 0 1px 1px rgba(11, 16, 23, .03); transition: border-color var(--lb-dur-2), box-shadow var(--lb-dur-2);
}
.form-control::placeholder { color: var(--lb-dim); }
.form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) { border-color: var(--lb-border-3); }
.form-control:focus, .form-select:focus { border-color: var(--lb-accent); box-shadow: var(--lb-focus); background-color: var(--lb-surface); color: var(--lb-text); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--lb-surface-3); color: var(--lb-muted); }
.form-control-sm, .form-select-sm { min-height: var(--lb-control-sm); font-size: 13px; border-radius: var(--lb-radius-sm); }
.form-control-lg { min-height: var(--lb-control-lg); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--lb-danger); }
.invalid-feedback { color: var(--lb-danger-ink); font-size: 12px; }
.form-check-input { width: 17px; height: 17px; border: 1.5px solid var(--lb-border-3); border-radius: 5px; background-color: var(--lb-surface); }
.form-check-input:checked { background-color: var(--lb-accent); border-color: var(--lb-accent); }
.form-check-input:focus { box-shadow: var(--lb-focus); border-color: var(--lb-accent); }
.form-switch .form-check-input { width: 34px; border-radius: 99px; }
.input-group-text { background: var(--lb-surface-2); border-color: var(--lb-border-2); color: var(--lb-muted); }
.input-group > .form-control, .input-group > .form-select { min-height: var(--lb-control); }

/* ---------- Bootstrap buttons look like LbButton ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-font-size: 14px; --bs-btn-border-radius: var(--lb-radius); --bs-btn-padding-x: 14px; --bs-btn-padding-y: 7px; --bs-btn-focus-box-shadow: var(--lb-focus); font-family: var(--lb-font-body); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color var(--lb-dur-2), border-color var(--lb-dur-2), color var(--lb-dur-2), transform var(--lb-dur-1), box-shadow var(--lb-dur-2); }
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-x: 10px; --bs-btn-padding-y: 4px; --bs-btn-font-size: 13px; --bs-btn-border-radius: var(--lb-radius-sm); }
.btn-primary { --bs-btn-color: var(--lb-accent-ink); --bs-btn-bg: var(--lb-accent); --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--lb-accent-ink); --bs-btn-hover-bg: #ff9a36; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--lb-accent-strong); --bs-btn-active-color: var(--lb-accent-ink); --bs-btn-disabled-bg: var(--lb-accent); --bs-btn-disabled-color: var(--lb-accent-ink); --bs-btn-disabled-border-color: transparent; background-image: var(--lb-grad); }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-light, .btn-secondary {
  --bs-btn-color: var(--lb-text); --bs-btn-bg: var(--lb-surface); --bs-btn-border-color: var(--lb-border-2);
  --bs-btn-hover-color: var(--lb-text); --bs-btn-hover-bg: var(--lb-surface-2); --bs-btn-hover-border-color: var(--lb-border-3);
  --bs-btn-active-color: var(--lb-text); --bs-btn-active-bg: var(--lb-surface-3); --bs-btn-active-border-color: var(--lb-border-3);
  --bs-btn-disabled-color: var(--lb-muted); --bs-btn-disabled-bg: var(--lb-surface); --bs-btn-disabled-border-color: var(--lb-border);
  box-shadow: var(--lb-shadow-1);
}
.btn-outline-primary { --bs-btn-color: var(--lb-accent-text); --bs-btn-hover-color: var(--lb-accent-text); --bs-btn-hover-bg: var(--lb-accent-soft); --bs-btn-hover-border-color: rgba(255, 138, 31, .45); }
.btn-outline-danger { --bs-btn-color: var(--lb-danger-ink); --bs-btn-border-color: var(--lb-border-2); --bs-btn-bg: var(--lb-surface); --bs-btn-hover-bg: var(--lb-danger-soft); --bs-btn-hover-color: var(--lb-danger-ink); --bs-btn-hover-border-color: rgba(214, 69, 69, .45); --bs-btn-active-bg: var(--lb-danger-soft); --bs-btn-active-color: var(--lb-danger-ink); }
.btn-outline-success { --bs-btn-color: var(--lb-success-ink); --bs-btn-border-color: var(--lb-border-2); --bs-btn-bg: var(--lb-surface); --bs-btn-hover-bg: var(--lb-success-soft); --bs-btn-hover-color: var(--lb-success-ink); --bs-btn-hover-border-color: rgba(31, 157, 99, .45); --bs-btn-active-bg: var(--lb-success-soft); --bs-btn-active-color: var(--lb-success-ink); }
.btn-outline-warning { --bs-btn-color: var(--lb-warning-ink); --bs-btn-border-color: var(--lb-border-2); --bs-btn-bg: var(--lb-surface); --bs-btn-hover-bg: var(--lb-warning-soft); --bs-btn-hover-color: var(--lb-warning-ink); --bs-btn-hover-border-color: rgba(217, 138, 0, .45); }
.btn-outline-info { --bs-btn-color: var(--lb-info-ink); --bs-btn-border-color: var(--lb-border-2); --bs-btn-bg: var(--lb-surface); --bs-btn-hover-bg: var(--lb-info-soft); --bs-btn-hover-color: var(--lb-info-ink); }
.btn-danger { --bs-btn-bg: var(--lb-danger); --bs-btn-border-color: transparent; --bs-btn-hover-bg: #c43b3b; --bs-btn-hover-border-color: transparent; }
.btn-success { --bs-btn-bg: #178a55; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #12774a; --bs-btn-hover-border-color: transparent; }
.btn-warning { --bs-btn-bg: #e59500; --bs-btn-color: #1f1300; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #f0a20e; --bs-btn-hover-color: #1f1300; --bs-btn-hover-border-color: transparent; }
.btn-info { --bs-btn-bg: #1a6fba; --bs-btn-color: #fff; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #155f9f; --bs-btn-hover-color: #fff; }
.btn-link { --bs-btn-color: var(--lb-accent-text); --bs-btn-hover-color: #9c4508; text-decoration: none; }
.btn-close:focus { box-shadow: var(--lb-focus); }
.btn .spinner-border-sm { width: 13px; height: 13px; border-width: 2px; margin: 0 !important; }

/* ---------- nav tabs / pills / pagination / list groups ---------- */
.nav-tabs { border-bottom: 1px solid var(--lb-border); gap: 2px; }
.nav-tabs .nav-link { border: 0; border-radius: 0; color: var(--lb-muted); font-weight: 600; padding: 10px 14px; position: relative; background: none; }
.nav-tabs .nav-link:hover { color: var(--lb-text); }
.nav-tabs .nav-link.active { color: var(--lb-text); background: none; }
.nav-tabs .nav-link.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--lb-accent); }
.nav-pills .nav-link { border-radius: 8px; color: var(--lb-muted); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--lb-surface); color: var(--lb-text); box-shadow: var(--lb-shadow-1); }
.pagination { --bs-pagination-color: var(--lb-text-2); --bs-pagination-border-color: var(--lb-border-2); --bs-pagination-hover-bg: var(--lb-surface-2); --bs-pagination-hover-color: var(--lb-text); --bs-pagination-active-bg: var(--lb-text); --bs-pagination-active-border-color: var(--lb-text); --bs-pagination-active-color: var(--lb-surface); --bs-pagination-focus-box-shadow: var(--lb-focus); --bs-pagination-bg: var(--lb-surface); }
.list-group { --bs-list-group-bg: var(--lb-surface); --bs-list-group-border-color: var(--lb-border); --bs-list-group-color: var(--lb-text); --bs-list-group-action-hover-bg: var(--lb-surface-2); --bs-list-group-active-bg: var(--lb-accent-soft); --bs-list-group-active-color: var(--lb-text); --bs-list-group-active-border-color: rgba(255, 138, 31, .35); border-radius: var(--lb-radius); }
.progress { --bs-progress-bg: var(--lb-sunken); --bs-progress-bar-bg: var(--lb-accent); --bs-progress-bar-color: var(--lb-accent-ink); --bs-progress-border-radius: 99px; height: 8px; }
.spinner-border { color: var(--lb-accent); }
.spinner-border.text-primary { color: var(--lb-accent) !important; }
.dropdown-menu { --bs-dropdown-bg: var(--lb-surface); --bs-dropdown-border-color: var(--lb-border-2); --bs-dropdown-link-hover-bg: var(--lb-surface-3); --bs-dropdown-link-active-bg: var(--lb-accent-soft); --bs-dropdown-link-active-color: var(--lb-text); border-radius: var(--lb-radius-md); box-shadow: var(--lb-shadow-pop); padding: 5px; }
.dropdown-item { border-radius: 8px; }

/* ---------- app shell ---------- */
/* The sidebar is dark in both themes (the nav tokens), so its colours are fixed. From 992 px it is docked and collapses to a
   64 px icon rail (.app-sidebar-collapsed); below 992 px it is a drawer (.is-open) over a scrim, opened from the top bar's menu
   button. Transitions start once NavMenu has applied the remembered rail (.is-ready), so nothing animates on page load. */
.app-shell { display: block; min-height: 100vh; }
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: var(--lb-z-nav); width: var(--bo-sidebar-w); display: flex; flex-direction: column;
  background: var(--lb-nav-bg); color: var(--lb-nav-text); border-right: 1px solid rgba(255, 255, 255, .04);
}
.app-sidebar:focus { outline: none; }
.app-sidebar::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 138, 31, .16), transparent 60%); pointer-events: none; }
.app-sidebar-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--bo-topbar-h); padding: 0 12px 0 16px; flex: none; }
.app-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff !important; text-decoration: none; border-radius: 8px; }
.app-brand:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 138, 31, .6); }
.app-brand svg { width: 30px; height: 30px; flex: none; }
.app-brand-text { display: grid; line-height: 1.05; }
.app-brand-text strong { font: 700 16px var(--lb-font-head); letter-spacing: .04em; }
.app-brand-text small { font: 500 11.5px var(--lb-font-body); color: var(--lb-nav-muted); letter-spacing: .02em; }
.app-sidebar .lb-btn { color: var(--lb-nav-muted); }
.app-sidebar .lb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: #fff; }
.app-sidebar .lb-btn:focus-visible { box-shadow: 0 0 0 2px rgba(255, 138, 31, .6); }
.app-drawer-close.lb-btn, .app-drawer-trap, .app-scrim, .app-menu-btn.lb-btn { display: none; }
.app-nav { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 6px 10px 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }
.app-nav-section { margin-top: 10px; }
.app-nav-section-title { padding: 8px 10px 5px; font: 600 10.5px var(--lb-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--lb-nav-muted); white-space: nowrap; }
.app-nav-sep { display: none; height: 1px; margin: 10px 8px; background: rgba(255, 255, 255, .06); }
.app-nav-link { position: relative; display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 7px 10px; margin: 1px 0; border-radius: 10px; color: var(--lb-nav-text) !important; text-decoration: none !important; font-weight: 500; font-size: 13.5px; transition: background-color var(--lb-dur-2), color var(--lb-dur-2); white-space: nowrap; }
.app-nav-link:hover { background: rgba(255, 255, 255, .055); color: #fff !important; }
.app-nav-link.active { background: linear-gradient(90deg, rgba(255, 138, 31, .18), rgba(255, 138, 31, .06)); color: #fff !important; }
.app-nav-link.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lb-grad); }
.app-nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 138, 31, .6); }
.app-nav-icon { position: relative; width: 22px; flex: none; display: grid; place-items: center; font-size: 16px; color: var(--lb-nav-muted); transition: color var(--lb-dur-2); }
.app-nav-link:hover .app-nav-icon { color: #fff; }
.app-nav-link.active .app-nav-icon { color: var(--lb-orange-2); }
.app-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-nav-count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: rgba(255, 138, 31, .18); color: var(--lb-orange-2); font: 700 11px/20px var(--lb-font-body); text-align: center; font-variant-numeric: tabular-nums; }
.app-nav-dot { display: none; position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--lb-flame); color: #fff; font: 700 10px/17px var(--lb-font-body); text-align: center; box-shadow: 0 0 0 2px var(--lb-nav-bg); }
.app-nav-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 10px 8px 43px; }
.app-nav-chip { min-width: 22px; height: 18px; padding: 0 6px; border-radius: 6px; font: 700 10.5px/18px var(--lb-font-body); text-align: center; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .07); color: var(--lb-nav-text); }
.app-nav-chip.is-warning { background: rgba(255, 179, 71, .16); color: #ffcf85; }
.app-nav-chip.is-danger { background: rgba(255, 93, 93, .16); color: #ff9d9d; }
.app-nav-chip.is-accent { background: rgba(255, 138, 31, .18); color: var(--lb-orange-2); }
.app-nav-chip.is-success { background: rgba(62, 224, 143, .14); color: #7cf0b6; }
.app-nav-chip.is-info { background: rgba(53, 169, 255, .15); color: #8fd0ff; }
.app-nav-link-highlight .app-nav-icon { color: var(--lb-orange-2); }
/* Stock Levels: red = items below their threshold, yellow = stock on draft POs waiting for authorisation (the tooltip lists them) */
.app-nav-link.app-nav-link-stock-red { background: rgba(255, 93, 93, .1); box-shadow: inset 3px 0 0 #ff5d5d; }
.app-nav-link.app-nav-link-stock-red:hover { background: rgba(255, 93, 93, .16); }
.app-nav-link.app-nav-link-stock-red .app-nav-icon { color: #ff7b7b; }
.app-nav-link.app-nav-link-stock-yellow { background: rgba(255, 179, 71, .1); box-shadow: inset 3px 0 0 #ffb347; }
.app-nav-link.app-nav-link-stock-yellow:hover { background: rgba(255, 179, 71, .16); }
.app-nav-link.app-nav-link-stock-yellow .app-nav-icon { color: #ffc46b; }
.app-nav-link.active.app-nav-link-stock-red { background: linear-gradient(90deg, rgba(255, 93, 93, .22), rgba(255, 93, 93, .07)); box-shadow: none; }
.app-nav-link.active.app-nav-link-stock-red::before { background: #ff5d5d; }
.app-nav-link.active.app-nav-link-stock-yellow { background: linear-gradient(90deg, rgba(255, 179, 71, .22), rgba(255, 179, 71, .07)); box-shadow: none; }
.app-nav-link.active.app-nav-link-stock-yellow::before { background: #ffb347; }
.app-nav-link.app-nav-link-stock-red:focus-visible, .app-nav-link.app-nav-link-stock-yellow:focus-visible { box-shadow: 0 0 0 2px rgba(255, 138, 31, .6); }
.app-nav-count.is-danger { background: rgba(255, 93, 93, .2); color: #ff9d9d; }
.app-nav-count.is-warning { background: rgba(255, 179, 71, .2); color: #ffcf85; }
.app-nav-dot.app-nav-dot-plain { top: -3px; right: -5px; min-width: 0; width: 10px; height: 10px; padding: 0; }
.app-nav-dot.is-danger { background: #ff5d5d; }
.app-nav-dot.is-warning { background: #ffb347; }
.app-sidebar-foot { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px; border-top: 1px solid rgba(255, 255, 255, .05); font-size: 11.5px; color: var(--lb-nav-muted); white-space: nowrap; overflow: hidden; }
.app-sidebar-hint { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: auto; }
.app-sidebar-foot kbd { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: var(--lb-nav-text); }

.app-main { min-height: 100vh; padding-left: var(--bo-sidebar-w); background: var(--lb-bg); }
.app-topbar {
  position: sticky; top: 0; z-index: var(--lb-z-sticky); height: var(--bo-topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 28px;
  background: color-mix(in srgb, var(--lb-bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--lb-border);
}
.app-menu-slot { display: contents; }
.app-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--lb-muted); }
.app-crumbs span { white-space: nowrap; }
.app-crumbs .bi { color: var(--lb-dim); font-size: 11px; }
.app-crumbs strong { color: var(--lb-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-search {
  margin-left: auto; display: flex; align-items: center; gap: 10px; width: min(360px, 32vw); height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--lb-border-2); border-radius: 10px;
  background: var(--lb-surface); color: var(--lb-muted); font: 400 13.5px var(--lb-font-body); cursor: pointer; box-shadow: var(--lb-shadow-1); transition: border-color var(--lb-dur-2), box-shadow var(--lb-dur-2);
}
.app-search:hover { border-color: var(--lb-border-3); }
.app-search:focus-visible { outline: none; box-shadow: var(--lb-focus); border-color: var(--lb-accent); }
.app-search span { flex: 1; text-align: left; }
.app-topbar-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.app-user { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px 0 4px; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; color: var(--lb-text); font: inherit; }
.app-user:hover { background: var(--lb-surface); border-color: var(--lb-border); }
.app-user:focus-visible { outline: none; box-shadow: var(--lb-focus); }
.app-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--lb-grad); color: var(--lb-accent-ink); font: 700 12px var(--lb-font-head); letter-spacing: .02em; }
.app-user-name { display: grid; text-align: left; line-height: 1.15; }
.app-user-name strong { font-size: 13px; font-weight: 600; }
.app-user-name small { font-size: 11.5px; color: var(--lb-muted); }
.app-user-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--lb-border); margin-bottom: 4px; }
.app-user-menu-head strong { display: block; font-size: 13.5px; }
.app-user-menu-head span { display: block; font-size: 12px; color: var(--lb-muted); overflow-wrap: anywhere; }
.app-user-menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 2px 10px; font-size: 13.5px; color: var(--lb-text-2); }
.content { padding: 26px 28px 48px; min-height: calc(100vh - var(--bo-topbar-h)); background: transparent; max-width: 1680px; }
.content > * { animation: lb-page-in var(--lb-dur-3) var(--lb-ease-out) both; }
@keyframes lb-page-in { from { opacity: 0; transform: translateY(6px); } }

/* page header (the action row wraps on phones) */
.app-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.app-page-title { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 23px/1.2 var(--lb-font-head); letter-spacing: -.02em; color: var(--lb-text); }
.app-page-title > .bi:first-child { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lb-surface); border: 1px solid var(--lb-border); box-shadow: var(--lb-shadow-1); color: var(--lb-accent-text); font-size: 18px; }
.app-page-header > div, .app-inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.content > h1, .content > h2, .content > div > h1:first-child, .content > div > h2:first-child { font: 600 23px/1.2 var(--lb-font-head); letter-spacing: -.02em; }

/* desktop: docked sidebar, collapsible to the icon rail */
@media (min-width: 992px) {
  .app-sidebar.is-ready { transition: width var(--lb-dur-3) var(--lb-ease); }
  .app-sidebar.is-ready ~ .app-main { transition: padding-left var(--lb-dur-3) var(--lb-ease); }
  .app-sidebar.app-sidebar-collapsed { width: var(--bo-sidebar-dock); }
  .app-main.app-main-collapsed { padding-left: var(--bo-sidebar-dock); }
  .app-sidebar-collapsed .app-sidebar-header { padding: 0; justify-content: center; }
  .app-sidebar-collapsed .app-brand, .app-sidebar-collapsed .app-nav-section-title, .app-sidebar-collapsed .app-nav-chips, .app-sidebar-collapsed .app-sidebar-hint { display: none; }
  .app-sidebar-collapsed .app-nav-sep, .app-sidebar-collapsed .app-nav-dot { display: block; }
  /* the label and count stay for screen readers (they name the link); the title attribute is the tooltip */
  .app-sidebar-collapsed .app-nav-label, .app-sidebar-collapsed .app-nav-count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .app-sidebar-collapsed .app-nav { padding: 6px 10px; }
  .app-sidebar-collapsed .app-nav-section { margin-top: 0; }
  .app-sidebar-collapsed .app-nav-link { justify-content: center; padding: 7px 0; }
  .app-sidebar-collapsed .app-sidebar-foot { justify-content: center; padding-inline: 0; }
}

/* phones and small tablets: the sidebar is a drawer over a scrim; focus stays in it while open */
@media (max-width: 991.98px) {
  .app-sidebar { width: min(var(--bo-sidebar-w), calc(100vw - 56px)); transform: translateX(-100%); visibility: hidden; }
  .app-sidebar.is-open { transform: none; visibility: visible; box-shadow: var(--lb-shadow-3); }
  .app-sidebar.is-ready { transition: transform var(--lb-dur-3) var(--lb-ease), visibility 0s linear var(--lb-dur-3); }
  .app-sidebar.is-ready.is-open { transition: transform var(--lb-dur-3) var(--lb-ease-out), visibility 0s; }
  .app-sidebar-toggle.lb-btn { display: none; }
  .app-drawer-close.lb-btn, .app-menu-btn.lb-btn { display: inline-flex; }
  .app-drawer-trap { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; }
  .app-scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--lb-z-nav) - 1); background: var(--lb-overlay); backdrop-filter: blur(2px); animation: lb-fade var(--lb-dur-3) var(--lb-ease); }
  .app-main { padding-left: 0; }
  .content { padding: 18px 16px 40px; }
  .app-topbar { gap: 10px; padding: 0 16px; }
  .app-search span, .app-search kbd, .app-user-name, .app-user > .bi-chevron-down { display: none; }
  .app-search { width: 38px; padding: 0; justify-content: center; flex-shrink: 0; }
  .app-user { padding: 0 4px; }
}
@media (max-width: 640px) {
  /* phones: the page title only (the section is in the menu) */
  .app-crumbs span, .app-crumbs .bi { display: none; }
}

/* the shell doesn't print: the page does */
@media print {
  .app-sidebar, .app-scrim, .app-topbar { display: none !important; }
  .app-main { padding-left: 0 !important; }
  .content { padding: 0; max-width: none; }
}

/* the theme toggle on surfaces that are dark in both themes: the sidebar footer and the floor-app header */
:is(.app-sidebar, .mobile-header) .lb-theme-toggle { color: var(--lb-nav-text); }
:is(.app-sidebar, .mobile-header) .lb-theme-toggle:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: #fff; }
.mobile-header .lb-theme-toggle { --h: 34px; border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
/* error bar */
#blazor-error-ui { display: none; position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); z-index: var(--lb-z-toast); background: var(--lb-surface); color: var(--lb-text); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-md); box-shadow: var(--lb-shadow-pop); padding: 0; }
#blazor-error-ui .alert { margin: 0 !important; }

/* ---------- centered states (sign-in, redirects, no access) ---------- */
.container-fluid.vh-100.bg-light { background: var(--lb-bg) !important; }

/* Blazor moves focus to the page's h1 after navigation (FocusOnNavigate); don't draw a ring for that */
h1:focus, h1:focus-visible, [tabindex="-1"]:focus { outline: none; }

/* responsive width helper the pages use (full width on phones, natural width from 576px) */
@media (min-width: 576px) { .w-sm-auto { width: auto !important; } }

/* ---------- documents on the print layout are paper: light in both themes ---------- */
/* The print layout's documents (.print-paper, Shared/PrintLayout.razor) are paper, light whatever the screen theme. Inside them the
   tokens, this file's remaps and dark accents and Bootstrap's dark root variables are pinned to their light values, so the markup
   reads as it does in the light theme. The validation sheet's root (.validation-sheet-page) is listed too: its
   data-bs-theme="light" would otherwise bring Bootstrap's default light variables onto that element and shadow the remaps it
   inherits from .print-paper.
   Keeping it right: this is the same declaration set as the print block at the end of this file, whose comment holds the rules
   for each group; change both together. The four rules after this block put Bootstrap's own [data-bs-theme=dark] descendant
   rules (select chevron, switch knob, accordion chevrons, close button) back to its light values. */
.print-paper, .validation-sheet-page {
  color-scheme: light;
  /* the kit's light tokens (lbsa-tokens.css :root), every one its dark block overrides */
  --lb-bg: #f3f5f8;
  --lb-surface: #ffffff;
  --lb-surface-2: #f8fafc;
  --lb-surface-3: #eef2f6;
  --lb-sunken: #eaeef3;
  --lb-text: #0b1017;
  --lb-text-2: #2b3544;
  --lb-muted: #5a6576;
  --lb-dim: #8a95a5;
  --lb-border: #e2e7ee;
  --lb-border-2: #d3dae4;
  --lb-border-3: #b9c3d0;
  --lb-accent-text: #c2570b;
  --lb-accent-soft: rgba(255, 138, 31, .12);
  --lb-accent-soft-2: rgba(255, 138, 31, .2);
  --lb-success: #1f9d63;
  --lb-success-ink: #136b42;
  --lb-success-soft: #e3f5ec;
  --lb-warning: #d98a00;
  --lb-warning-ink: #8a5300;
  --lb-warning-soft: #fdf2dc;
  --lb-danger: #d64545;
  --lb-danger-ink: #a12a2a;
  --lb-danger-soft: #fbe6e6;
  --lb-info: #1f7fd1;
  --lb-info-ink: #175f9e;
  --lb-info-soft: #e3f0fb;
  --lb-neutral-soft: #eef1f5;
  --lb-price: #d9600b;
  --lb-overlay: rgba(9, 13, 20, .46);
  --lb-shadow-1: 0 1px 2px rgba(11, 16, 23, .05), 0 1px 1px rgba(11, 16, 23, .03);
  --lb-shadow-2: 0 1px 2px rgba(11, 16, 23, .04), 0 8px 24px -14px rgba(11, 16, 23, .22);
  --lb-shadow-3: 0 2px 6px rgba(11, 16, 23, .06), 0 24px 48px -22px rgba(11, 16, 23, .38);
  --lb-shadow-pop: 0 12px 32px -12px rgba(11, 16, 23, .32), 0 2px 8px rgba(11, 16, 23, .08);
  --lb-nav-bg: #0b1017;
  --lb-nav-bg-2: #121a25;
  --lb-skeleton: linear-gradient(90deg, #eef1f5 0%, #f7f9fb 50%, #eef1f5 100%);
  /* this file's :root, [data-theme] remaps that reference those tokens, declared again here because a custom property's var()
     resolves where it is declared (on html, with the dark tokens) and the resolved value is what descendants inherit; plus
     this file's dark accents (the [data-theme="dark"] block above) at their light values */
  --bs-body-color: var(--lb-text);
  --bs-body-bg: var(--lb-bg);
  --bs-emphasis-color: var(--lb-text);
  --bs-secondary-color: var(--lb-muted);
  --bs-tertiary-color: var(--lb-dim);
  --bs-secondary-bg: var(--lb-surface-3);
  --bs-tertiary-bg: var(--lb-surface-2);
  --bs-border-color: var(--lb-border);
  --bs-border-color-translucent: var(--lb-border);
  --bs-primary: #c2570b;
  --bs-primary-rgb: 194, 87, 11;
  --bs-primary-text-emphasis: var(--lb-accent-text);
  --bs-primary-bg-subtle: var(--lb-accent-soft);
  --bs-link-color: var(--lb-accent-text);
  --bs-link-color-rgb: 194, 87, 11;
  --bs-link-hover-color: #9c4508;
  --bs-code-color: #b3470a;
  --bs-highlight-bg: #fff1dc;
  --app-bg: var(--lb-bg);
  --app-surface: var(--lb-surface);
  --app-border: var(--lb-border);
  --app-shadow: var(--lb-shadow-1);
  --app-text-muted: var(--lb-muted);
  /* Bootstrap's [data-bs-theme=dark] root variables that this file does not route through the tokens, at Bootstrap's light values */
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-highlight-color: #212529;
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}
/* Bootstrap's own [data-bs-theme=dark] descendant rules, back to their light values on the paper: the select chevron, the
   switch knob, the accordion chevrons and the inverted close button */
.print-paper .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.print-paper .form-switch .form-check-input:not(:checked):not(:focus) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); }
.print-paper .accordion-button::after { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.print-paper .btn-close:not(.btn-close-white) { filter: none; }
/* documents on the print layout (Shared/PrintLayout.razor) are paper: the light set above, on a full-height light page */
.print-paper { min-height: 100vh; background: var(--lb-bg); color: var(--lb-text); }

/* ---------- this app's markup: coloured icon tiles and stock take pallets ---------- */
/* .bg-primary follows --bs-primary, a light orange in dark, so white on it would not read: tiles get the accent with ink text, like .btn-primary */
.bg-primary.text-white:not(.badge):not(.card-header):not(.btn):not(.modal-header) { background-color: var(--lb-accent) !important; color: var(--lb-accent-ink) !important; }
.bg-warning.text-white:not(.badge):not(.card-header):not(.btn):not(.modal-header) { color: #1f1300 !important; }
/* warning text on a surface uses the ink token (Bootstrap's own #ffc107 sits at 1.6:1 on white; the plain --bs-warning-rgb at 2.9:1) */
.text-warning { color: var(--lb-warning-ink) !important; }
/* site.css hard-codes light boxes for these and lets the text inherit the body colour */
.stocktake-pallet { background: var(--lb-surface-2); border-color: var(--lb-border-2); color: var(--lb-text); }
.stocktake-pallet.pending { background: var(--lb-surface-3); color: var(--lb-muted); }
.stocktake-pallet.filled { background: var(--lb-success-soft); border-color: var(--lb-success); color: var(--lb-success-ink); }
.stocktake-count-details { border-color: var(--lb-border); }
.stocktake-count-detail-header { background: var(--lb-surface-2); color: var(--lb-muted); }

/* ---------- floor app (phones in the warehouse) ---------- */
/* The Ecosystem section without its kit-only selectors (.lb-btn, .lb-inputwrap, .lb-select, .lb-input, .lb-btn-reset), plus
   the older site.css classes this app's floor pages still use (site.css hard-codes white boxes and #212529 text for them). */
.mobile-viewport { background: var(--lb-bg); }
.mobile-header { background: linear-gradient(135deg, #0b1017 0%, #16202c 100%); color: #fff; padding: 12px 16px; box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px -12px rgba(0, 0, 0, .5); }
.mobile-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lb-grad); opacity: .9; }
.mobile-brand { display: flex; align-items: center; gap: 10px; }
.mobile-brand svg { width: 28px; height: 28px; }
.mobile-header-title { font: 700 18px var(--lb-font-head); letter-spacing: .02em; margin: 0; color: #fff; }
.mobile-header-title span { font-weight: 500; color: var(--lb-orange-2); }
.mobile-header-user { color: #c9d2de; font-size: 13px; }
.mobile-content { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.mobile-bottom-nav { background: color-mix(in srgb, var(--lb-surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--lb-border); box-shadow: 0 -8px 24px -18px rgba(11, 16, 23, .4); }
.mobile-nav-item { color: var(--lb-muted); font-weight: 600; }
.mobile-nav-item.active, .mobile-nav-item.active i { color: var(--lb-accent-text) !important; }
.mobile-card { border: 1px solid var(--lb-border); border-radius: var(--lb-radius-lg); box-shadow: var(--lb-shadow-1); background: var(--lb-surface); }
.mobile-card-header { font-family: var(--lb-font-head); border-bottom-color: var(--lb-border); color: var(--lb-text); }
.mobile-card-header.bg-primary { background-color: var(--lb-accent-soft) !important; color: var(--lb-accent-text) !important; }
.mobile-card-header.bg-warning { background-color: var(--lb-warning-soft) !important; color: var(--lb-warning-ink) !important; }
.mobile-card-header.bg-success { background-color: var(--lb-success-soft) !important; color: var(--lb-success-ink) !important; }
.mobile-card-header.bg-danger { background-color: var(--lb-danger-soft) !important; color: var(--lb-danger-ink) !important; }
.mobile-section-title { font: 600 12px var(--lb-font-body); letter-spacing: .1em; color: var(--lb-muted); }
.mobile-list-item { border-bottom-color: var(--lb-border); }
.mobile-list-item:active { background: var(--lb-surface-3); }
.mobile-list-item-title { color: var(--lb-text); }
.mobile-list-item-subtitle { color: var(--lb-muted); }
.mobile-badge { border-radius: 99px; font-weight: 700; }
.mobile-badge-primary { background: var(--lb-accent-soft) !important; color: var(--lb-accent-text) !important; }
.mobile-badge-success { background: var(--lb-success-soft) !important; color: var(--lb-success-ink) !important; }
.mobile-badge-warning { background: var(--lb-warning-soft) !important; color: var(--lb-warning-ink) !important; }
.mobile-badge-danger { background: var(--lb-danger-soft) !important; color: var(--lb-danger-ink) !important; }
.mobile-badge-info { background: var(--lb-info-soft) !important; color: var(--lb-info-ink) !important; }
.mobile-alert-warning { background-color: var(--lb-warning-soft); color: var(--lb-warning-ink); }
.mobile-alert-danger { background-color: var(--lb-danger-soft); color: var(--lb-danger-ink); border-radius: var(--lb-radius-md); }
.mobile-alert-success { background-color: var(--lb-success-soft); color: var(--lb-success-ink); }
.mobile-alert-info { background-color: var(--lb-info-soft); color: var(--lb-info-ink); }
.mobile-input { border: 1.5px solid var(--lb-border-2); border-radius: 12px; }
.mobile-input:focus, .mobile-input:focus-within { border-color: var(--lb-accent); box-shadow: var(--lb-focus); }
/* plain inputs and read-only boxes */
input.mobile-input, select.mobile-input, textarea.mobile-input, .mobile-input.mobile-input-readonly { background-color: var(--lb-surface); color: var(--lb-text); }
.mobile-input::placeholder { color: var(--lb-dim); }
.mobile-input.mobile-input-readonly { background-color: var(--lb-surface-3); }
.mobile-input-label { color: var(--lb-text-2); }
.mobile-checkbox { background: var(--lb-surface); border: 1px solid var(--lb-border); }
.mobile-checkbox-label { color: var(--lb-text); }
.mobile-empty-state { color: var(--lb-muted); }
.mobile-step-indicator { background: var(--lb-surface); border-bottom-color: var(--lb-border); }
.mobile-step-pending { background-color: var(--lb-surface-3); color: var(--lb-muted); }
.mobile-step-current { background-color: var(--lb-accent); color: var(--lb-accent-ink); }
.mobile-step-completed { background-color: #178a55; color: #fff; }
.mobile-component-list { background: var(--lb-surface-2); }
.mobile-component-item { border-bottom-color: var(--lb-border); }
.mobile-fab { background: var(--lb-grad) !important; color: var(--lb-accent-ink) !important; box-shadow: 0 12px 28px -10px rgba(255, 106, 31, .75); }
.mobile-fab.mobile-fab-active { background: #0b1017 !important; color: var(--lb-orange-2) !important; }
.mobile-fab-label { background: var(--lb-surface); color: var(--lb-text-2); }
.mobile-item-thumb { background-color: var(--lb-surface-3); border-color: var(--lb-border); color: var(--lb-muted); }
.mobile-start-template-thumb { background: var(--lb-surface-2); border-color: var(--lb-border); }

/* ---------- floor app on the kit (stage 4 batch 5) ---------- */
/* Kit controls in the floor app are Md 40 px and Lg 48 px tall (big touch targets), with 16 px text in fields. */
.mobile-viewport { --lb-control: 40px; --lb-control-lg: 48px; }
.mobile-viewport .lb-input, .mobile-viewport .lb-inputwrap, .mobile-viewport .lb-select { font-size: 16px; }
/* The header band is dark in both themes, so its buttons use fixed light colours. */
.mobile-header .mobile-header-btn.lb-btn { color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .6); }
.mobile-header .mobile-header-btn.lb-btn:hover { background: rgba(255, 255, 255, .15); }
.mobile-header .mobile-header-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Stage 1 sized the header's theme toggle at 34 px (.mobile-header .lb-theme-toggle, app shell section); both header buttons are Md here. */
.mobile-header .mobile-header-btn.lb-btn { --h: var(--lb-control); }
.mobile-header-user { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A clickable list row is a button. */
.floor-row-btn { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--lb-border); color: inherit; font: inherit; }
.floor-row-btn:last-child { border-bottom: 0; }
.floor-row-btn:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: -2px; }
.floor-row-btn .mobile-list-item-content, .floor-row-btn .mobile-list-item-title { display: block; }
/* A barcode field with its scan button. */
.barcode-input-with-scan > :not(.lb-btn) { flex: 1 1 auto; min-width: 0; }
.barcode-input-with-scan > .lb-btn { flex: 0 0 auto; }
/* Floating action buttons. */
.mobile-fab.lb-btn { --h: 56px; border-radius: 50%; }
.mobile-fab.lb-btn i { font-size: 1.25rem; }
.mobile-fab-stack .mobile-fab.lb-btn { position: static; }
/* The secondary (Book In) FAB keeps the kit's Solid + Success colours over the floor section's orange .mobile-fab !important rule.
   Source: LBSA.UI/wwwroot/lbsa-ui.css, .lb-btn--solid { background: var(--tone-solid); color: var(--tone-ink); } with
   .lb-tone-success { --tone-solid: #15804e; --tone-ink: #fff; }. */
.mobile-fab.mobile-fab-secondary.lb-btn { background: var(--tone-solid) !important; color: var(--tone-ink) !important; }
/* The step strip inside a dialog's sub-header. */
.lb-dialog__subhead .mobile-step-indicator { margin: 0; border-bottom: 0; padding: 8px 16px; }
/* Infinite lists inside floor cards look like today's rows (item wrapper class from LBSA.UI/Components/LbInfiniteList.razor). */
.floor-feed .lb-feed__item { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* No gap between rows (the kit's .lb-feed__items grid gap), and each row keeps its divider: every row is the only child
   of its item wrapper, so the .floor-row-btn and .mobile-list-item :last-child rules would otherwise drop them all. */
.floor-feed { --lb-feed-gap: 0; }
.floor-feed .lb-feed__item:not(:last-child) > .mobile-list-item { border-bottom: 1px solid var(--lb-border); }
/* The customer list in the Book Out wizard scrolls inside its box. */
.floor-customer-box { max-height: 240px; overflow-y: auto; }
/* Photo viewer. */
.floor-viewer-body { position: relative; min-height: 260px; display: flex; align-items: center; justify-content: center; background: var(--lb-sunken); }
.floor-viewer-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--lb-muted); font-size: .82rem; }
/* Two icons on one button (scan with the camera, type a barcode). */
.floor-icon-pair { gap: 4px; }
.mobile-btn-group > .lb-btn { width: 100%; }
/* MobileItemSerials filters: one checkbox per line, as the sheet's d-flex rows were (LbCheckbox is inline-flex). */
.floor-check-stack > .lb-check { display: flex; width: fit-content; }
/* MobileAssembly: the overview thumbnail (was an inline style). */
.mobile-assembly-overview-thumb { border-color: var(--lb-border); background: var(--lb-surface-2); }
.mobile-assembly-overview-placeholder { color: var(--lb-dim); font-size: 1.6rem; }
/* Photos and placeholders that site.css paints light. */
.mobile-item-thumb-skeleton { background: linear-gradient(90deg, var(--lb-surface-3) 0%, var(--lb-surface-2) 50%, var(--lb-surface-3) 100%); background-size: 200% 100%; }
.mobile-stocktake-photo { border-color: var(--lb-border); background: var(--lb-surface-2); }
/* MobileStockTake count: the split - / + buttons stretch over the field's 1 px top and bottom border, so they are the full 48 px
   (decision 10; the kit stretches them inside the border, LBSA.UI/wwwroot/lbsa-ui.css .lb-number__btn). */
.mobile-viewport .lb-number__btn { margin-block: -1px; }
/* MobileStartAssembly template rows (moved from the page's <style>, MobileStartAssembly.razor:14-77). */
.mobile-start-template-item { justify-content: flex-start; align-items: center; gap: .75rem; }
.mobile-start-template-main { display: flex; align-items: center; gap: .75rem; flex: 1 1 auto; min-width: 0; padding: 0; border-bottom: 0; }
.mobile-start-template-content { flex: 1 1 auto; min-width: 0; }
.mobile-start-template-item .mobile-list-item-title { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.mobile-start-template-item .mobile-list-item-action { margin-left: 0; flex: 0 0 auto; }
.mobile-start-template-thumb-button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 12px; background: transparent; }
.mobile-start-template-thumb-button:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 2px; }
.mobile-start-template-item .mobile-start-template-thumb { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; border: 1px solid var(--lb-border); background: var(--lb-surface-2); }
.mobile-start-template-item .mobile-start-template-placeholder { color: var(--lb-dim); font-size: 1rem; }
/* The L2 photo viewer image (the size rules of .mobile-start-image-lightbox-img, MobileStartAssembly.razor:150-161). */
.floor-viewer-img { display: block; max-width: 100%; max-height: calc(88vh - 86px); width: auto; height: auto; object-fit: contain; }
.lb-dialog--phone-full .floor-viewer-img { max-height: calc(100dvh - 72px); }

/* ---------- motion ---------- */
.app-nav-link.active::before { animation: lb-bar-in var(--lb-dur-3) var(--lb-ease-out); transform-origin: center; }
@keyframes lb-bar-in { from { transform: scaleY(0); opacity: 0; } }
.app-nav-link .app-nav-icon { transition: color var(--lb-dur-2), transform var(--lb-dur-2) var(--lb-ease); }
.app-nav-link:hover .app-nav-icon { transform: translateX(1px); }
.app-nav-label, .app-nav-section-title, .app-brand-text, .app-nav-count { animation: lb-fade var(--lb-dur-3) var(--lb-ease); }
.app-nav-dot { animation: lb-pop var(--lb-dur-3) var(--lb-spring); }
.app-user .bi-chevron-down { transition: transform var(--lb-dur-2) var(--lb-ease); }
.app-user:hover .bi-chevron-down { transform: translateY(1px); }
.card { transition: box-shadow var(--lb-dur-3) var(--lb-ease), border-color var(--lb-dur-3); }
.alert { animation: lb-rise var(--lb-dur-3) var(--lb-ease-out); }
.badge { transition: background-color var(--lb-dur-2), color var(--lb-dur-2); }
@media (prefers-reduced-motion: reduce) { .content > *, .alert, .app-nav-link.active::before, .app-scrim { animation: none !important; } }

/* ---------- print stays light, whatever the screen theme ---------- */
/* On the root, the tokens, this file's remaps and dark accents and Bootstrap's dark root variables go back to their light
   values, and every colour in this file routes through them, so Bootstrap, the pages and the floor app print light.
   Keeping it right:
   - the kit group lists every token that lbsa-tokens.css's [data-theme="dark"] block overrides, at its :root (light) value,
     and nothing else;
   - the second group repeats every declaration of this file's ":root, [data-theme]" block whose value uses one of those
     tokens, plus every variable this file's [data-theme="dark"] block overrides, at its root value;
   - the Bootstrap group lists every variable in bootstrap.min.css's [data-bs-theme=dark] root block that this file does not
     route through the tokens, at the value of Bootstrap's ":root,[data-bs-theme=light]" block.
   When a token, a remap or a Bootstrap version changes, update the groups here. */
@media print {
  :root, [data-theme], [data-theme="dark"] {
    color-scheme: light;
    /* the kit's light tokens (lbsa-tokens.css :root), every one its dark block overrides */
    --lb-bg: #f3f5f8;
    --lb-surface: #ffffff;
    --lb-surface-2: #f8fafc;
    --lb-surface-3: #eef2f6;
    --lb-sunken: #eaeef3;
    --lb-text: #0b1017;
    --lb-text-2: #2b3544;
    --lb-muted: #5a6576;
    --lb-dim: #8a95a5;
    --lb-border: #e2e7ee;
    --lb-border-2: #d3dae4;
    --lb-border-3: #b9c3d0;
    --lb-accent-text: #c2570b;
    --lb-accent-soft: rgba(255, 138, 31, .12);
    --lb-accent-soft-2: rgba(255, 138, 31, .2);
    --lb-success: #1f9d63;
    --lb-success-ink: #136b42;
    --lb-success-soft: #e3f5ec;
    --lb-warning: #d98a00;
    --lb-warning-ink: #8a5300;
    --lb-warning-soft: #fdf2dc;
    --lb-danger: #d64545;
    --lb-danger-ink: #a12a2a;
    --lb-danger-soft: #fbe6e6;
    --lb-info: #1f7fd1;
    --lb-info-ink: #175f9e;
    --lb-info-soft: #e3f0fb;
    --lb-neutral-soft: #eef1f5;
    --lb-price: #d9600b;
    --lb-overlay: rgba(9, 13, 20, .46);
    --lb-shadow-1: 0 1px 2px rgba(11, 16, 23, .05), 0 1px 1px rgba(11, 16, 23, .03);
    --lb-shadow-2: 0 1px 2px rgba(11, 16, 23, .04), 0 8px 24px -14px rgba(11, 16, 23, .22);
    --lb-shadow-3: 0 2px 6px rgba(11, 16, 23, .06), 0 24px 48px -22px rgba(11, 16, 23, .38);
    --lb-shadow-pop: 0 12px 32px -12px rgba(11, 16, 23, .32), 0 2px 8px rgba(11, 16, 23, .08);
    --lb-nav-bg: #0b1017;
    --lb-nav-bg-2: #121a25;
    --lb-skeleton: linear-gradient(90deg, #eef1f5 0%, #f7f9fb 50%, #eef1f5 100%);
    /* this file's :root, [data-theme] remaps that reference those tokens, declared again here because a custom property's var()
       resolves where it is declared (on html, with the dark tokens) and the resolved value is what descendants inherit; plus
       this file's dark accents (the [data-theme="dark"] block above) at their light values */
    --bs-body-color: var(--lb-text);
    --bs-body-bg: var(--lb-bg);
    --bs-emphasis-color: var(--lb-text);
    --bs-secondary-color: var(--lb-muted);
    --bs-tertiary-color: var(--lb-dim);
    --bs-secondary-bg: var(--lb-surface-3);
    --bs-tertiary-bg: var(--lb-surface-2);
    --bs-border-color: var(--lb-border);
    --bs-border-color-translucent: var(--lb-border);
    --bs-primary: #c2570b;
    --bs-primary-rgb: 194, 87, 11;
    --bs-primary-text-emphasis: var(--lb-accent-text);
    --bs-primary-bg-subtle: var(--lb-accent-soft);
    --bs-link-color: var(--lb-accent-text);
    --bs-link-color-rgb: 194, 87, 11;
    --bs-link-hover-color: #9c4508;
    --bs-code-color: #b3470a;
    --bs-highlight-bg: #fff1dc;
    --app-bg: var(--lb-bg);
    --app-surface: var(--lb-surface);
    --app-border: var(--lb-border);
    --app-shadow: var(--lb-shadow-1);
    --app-text-muted: var(--lb-muted);
    /* Bootstrap's [data-bs-theme=dark] root variables that this file does not route through the tokens, at Bootstrap's light values */
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-color-rgb: 33, 37, 41;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-link-hover-color-rgb: 10, 88, 202;
    --bs-highlight-color: #212529;
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
  }
  body { background: #fff; color: #0b1017; }
  .print-paper { min-height: 0; background: #fff; }
  /* Bootstrap's own [data-bs-theme=dark] descendant rules, back to their light values (as on the paper) */
  [data-bs-theme=dark] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
  [data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); }
  [data-bs-theme=dark] .accordion-button::after { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
  [data-bs-theme=dark] .btn-close:not(.btn-close-white) { filter: none; }
}

/* Assembly audit trail inside LbInfiniteList: one separator between entries (S4B2 Task 5). */
.audit-timeline > .lb-feed__item .audit-content { border-bottom: 1px solid var(--lb-border); padding-bottom: 12px; }
.audit-timeline > .lb-feed__item:last-of-type .audit-content { border-bottom: none; }