/* ─── Accessibility utilities ───────────────────────────────────────────
   Skip-to-content link: hidden off-screen until a keyboard user tabs into
   the page, then jumps to a visible bar at the top so they can leap past
   the sidebar / topbar straight into the page body. WCAG 2.4.1 (Bypass
   Blocks). The href targets #main-content, which lives on the <main>
   element in MainLayout.razor.

   :focus-visible (not :focus) so the link doesn't flash on every mouse
   click — only when keyboard focus reaches it. */
.skip-link {
    position: absolute;
    top: -40px;            /* hidden above the viewport */
    left: 1rem;
    z-index: 10000;
    background: #1d4ed8;
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 0 0 6px 6px;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 3px solid #fde68a;
    outline-offset: 2px;
}

/* Bootstrap 5's screen-reader-only utility, ensured present in case
   Bootstrap's utilities CSS isn't loaded on a given page. */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Default :focus-visible ring for any element that isn't explicitly
   restyled. Several places in this file set `outline: none` on focused
   inputs and rely on a `box-shadow` instead — that's fine for sighted
   mouse users but loses keyboard cues. This rule restores a minimum
   visible indicator for actual keyboard navigation. */
*:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 1px;
}

:root {
    --sidebar-bg: #1e1e2d;
    --sidebar-hover: #1b1b28;
    --sidebar-text: #a2a3b7;
    --sidebar-active: #3699ff;
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 68px;
    --content-bg: #f5f7fa;
    --topbar-bg: #ffffff;
    --topbar-height: 56px;
    --accent: #3699ff;
    --accent-hover: #187de4;
    --text-primary: #181c32;
    --text-secondary: #7e8299;
    --border-color: #e4e6ef;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT + COLLAPSE STATE — unscoped on purpose

   All layout rules for .page / .sidebar / .main-wrapper live here (not in
   MainLayout.razor.css) so Blazor's scoped-CSS attribute rewriting can't
   interfere with the dynamic .sidebar-collapsed / .sidebar-mobile-open
   classes added by the toggle. Higher selector specificity (3 classes for
   the collapse rules) also guarantees they win against any leftover
   scoped base rules.
   ═══════════════════════════════════════════════════════════════════════ */
.page {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background-color: var(--sidebar-bg);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.2s ease, transform 0.25s ease;
}

.main-wrapper {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--content-bg);
    transition: margin-left 0.2s ease;
}

/* Desktop collapsed → narrow icon strip */
html.sidebar-collapsed .sidebar {
    width: var(--sidebar-width-collapsed);
}
html.sidebar-collapsed .main-wrapper {
    margin-left: var(--sidebar-width-collapsed);
}

/* Backdrop for the mobile overlay state */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 900;
    transition: opacity 0.2s ease;
}

/* Mobile responsive */
@media (max-width: 767.98px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width); /* always full width when shown — never the 68px desktop strip */
    }
    .main-wrapper {
        margin-left: 0;
    }

    /* Mobile overlay open */
    html.sidebar-mobile-open .sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }
    html.sidebar-mobile-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Override desktop's icon-strip width on mobile — sidebar is always full width here */
    html.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);
    }
    html.sidebar-collapsed .main-wrapper {
        margin-left: 0;
    }
}

/* Icon-only nav rules (apply only on desktop when collapsed) */
@media (min-width: 768px) {
    html.sidebar-collapsed .brand-text,
    html.sidebar-collapsed .brand-tagline,
    html.sidebar-collapsed .nav-section-title,
    html.sidebar-collapsed .nav-link span {
        display: none;
    }

    html.sidebar-collapsed .sidebar-brand {
        padding: 1rem 0;
        text-align: center;
    }
    html.sidebar-collapsed .brand-link {
        justify-content: center;
        gap: 0;
    }
    html.sidebar-collapsed .brand-icon {
        font-size: 1.6rem;
    }

    html.sidebar-collapsed .nav-item {
        padding: 0 0.5rem;
    }
    html.sidebar-collapsed .nav-link {
        justify-content: center;
        padding: 0.6rem 0.4rem;
        gap: 0;
    }
    html.sidebar-collapsed .nav-link i {
        margin: 0;
        font-size: 1.2rem;
    }
    html.sidebar-collapsed .nav-section {
        margin-bottom: 0.25rem;
    }
    html.sidebar-collapsed .nav-section + .nav-section {
        border-top: 1px solid rgba(255,255,255,0.05);
        margin-top: 0.25rem;
        padding-top: 0.25rem;
    }
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--content-bg);
    color: var(--text-primary);
    height: 100%;
    margin: 0;
}

a, .btn-link {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover, .btn-link:hover {
    color: var(--accent-hover);
}

.btn-primary {
    color: #fff;
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: 6px;
    font-weight: 500;
    padding: 0.6rem 1.5rem;
    transition: all 0.15s ease;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(54, 153, 255, 0.25);
}

.form-control {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    border-color: var(--accent);
}

.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;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

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

/* ════════════════════════════════════════════════════════════════════════════
   KITGY GRID TEMPLATE — shared across all data-grid pages
   (MaterialsGrid, WorkstationsGrid, etc.)

   Defined once here so every grid uses identical visuals without duplicating
   the style block per page. Paired with feedback_wasm_grid_template.md.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Layout-chain unstucker ──────────────────────────────────────────────────
   MainLayout's .main-wrapper / .main-content are flex items with the default
   min-width: auto ("as wide as content"). A wide grid table would propagate
   that intrinsic width up and push the entire page past the viewport. Forcing
   min-width: 0 on every parent in the chain breaks that propagation; the wide
   content then gets clipped by .mgrid-page (overflow-x: hidden) and the grid's
   scroll container handles horizontal scrolling inside the card. Safe to apply
   globally — it only changes behavior when a child would otherwise overflow.
   ────────────────────────────────────────────────────────────────────────── */
.main-wrapper,
.main-wrapper > .main-content,
.main-wrapper > .main-content > .content {
    min-width: 0;
    max-width: 100%;
}

/* ── Page shell ──────────────────────────────────────────────────────────── */
.mgrid-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: calc(100vh - 100px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    outline: none;
}
.mgrid-page > .mgrid-header,
.mgrid-page > .mgrid-toolbar,
.mgrid-page > .mgrid-bulk,
.mgrid-page > .mgrid-card {
    min-width: 0;
    max-width: 100%;
}

/* ── Loading / empty / error states ──────────────────────────────────────── */
.mgrid-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 4rem 1rem;
    color: #6b7280;
}
.mgrid-spinner {
    width: 36px; height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: mgrid-spin 0.7s linear infinite;
}
@keyframes mgrid-spin { to { transform: rotate(360deg); } }
.mgrid-state-icon { font-size: 2.5rem; opacity: 0.4; }
.mgrid-state-msg { margin-top: 0.75rem; font-size: 0.9rem; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.mgrid-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.mgrid-title-block {
    display: flex; align-items: center; gap: 0.875rem;
}
.mgrid-title-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.25rem;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}
.mgrid-title {
    margin: 0;
    font-size: 1.4rem; font-weight: 700;
    color: #111827;
    line-height: 1.1;
}
.mgrid-meta {
    font-size: 0.825rem; color: #6b7280; margin-top: 0.125rem;
}
.mgrid-meta strong { color: #1f2937; font-weight: 600; }
.mgrid-meta-sep { margin: 0 0.4rem; opacity: 0.5; }
.mgrid-meta-warn { color: #b45309; }
.mgrid-meta-warn .bi-circle-fill { font-size: 0.45rem; vertical-align: middle; margin-right: 0.25rem; }

.mgrid-actions { display: flex; align-items: center; gap: 0.5rem; }
.mgrid-flash {
    font-size: 0.825rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    display: inline-flex; align-items: center; gap: 0.4rem;
    animation: mgrid-fade-in 0.2s ease-out;
}
.mgrid-flash-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.mgrid-flash-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
@keyframes mgrid-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.mgrid-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.85rem; border-radius: 8px;
    font-size: 0.825rem; font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
    line-height: 1;
}
.mgrid-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mgrid-btn-secondary {
    background: #fff; border-color: #e5e7eb; color: #374151;
}
.mgrid-btn-secondary:not(:disabled):hover {
    background: #f9fafb; border-color: #d1d5db;
}
.mgrid-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.4);
}
.mgrid-btn-primary:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.4);
}
.mgrid-btn-add {
    background: #fff;
    border: 1px dashed #3b82f6;
    color: #1d4ed8;
}
.mgrid-btn-add:hover { background: #eff6ff; border-style: solid; }
.mgrid-btn-badge {
    background: rgba(255, 255, 255, 0.25);
    padding: 0.05rem 0.45rem;
    border-radius: 99px;
    margin-left: 0.5rem;
    font-size: 0.75rem; font-weight: 600;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.mgrid-toolbar {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.mgrid-spacer { flex: 1 1 auto; }
.mgrid-search { position: relative; flex: 0 1 320px; }
.mgrid-search-icon {
    position: absolute; left: 0.75rem; top: 50%;
    transform: translateY(-50%);
    color: #9ca3af; pointer-events: none;
}
.mgrid-search-input {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 2.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px; background: #fff;
    font-size: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mgrid-search-input:focus {
    outline: none; border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.mgrid-search-clear {
    position: absolute; right: 0.4rem; top: 50%;
    transform: translateY(-50%);
    background: transparent; border: 0;
    color: #9ca3af;
    padding: 0.2rem 0.4rem; border-radius: 4px;
    cursor: pointer;
}
.mgrid-search-clear:hover { color: #ef4444; background: #fee2e2; }

.mgrid-filters {
    display: inline-flex; gap: 2px;
    background: #f3f4f6;
    padding: 3px; border-radius: 9px;
}
.mgrid-filter {
    padding: 0.4rem 0.85rem; border-radius: 7px;
    border: 0; background: transparent;
    color: #6b7280;
    font-size: 0.825rem; font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
    line-height: 1;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.mgrid-filter:hover { color: #1f2937; }
.mgrid-filter.active {
    background: #fff; color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.mgrid-filter-warning .bi { color: #f59e0b; }
.mgrid-filter-warning.active { background: #fef3c7; color: #92400e; }
.mgrid-filter-warning.active .bi { color: #92400e; }
.mgrid-filter-danger .bi { color: #ef4444; }
.mgrid-filter-danger.active { background: #fee2e2; color: #991b1b; }
.mgrid-filter-danger.active .bi { color: #991b1b; }

/* Column picker */
.mgrid-col-picker-wrap { position: relative; }
.mgrid-col-count {
    background: #eff6ff; color: #1d4ed8;
    padding: 0.05rem 0.45rem;
    border-radius: 99px;
    font-size: 0.7rem; font-weight: 600;
    margin-left: 0.25rem;
}
.mgrid-col-picker {
    position: absolute; top: calc(100% + 6px); right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    min-width: 220px;
    animation: mgrid-fade-in 0.15s ease-out;
}
.mgrid-col-picker-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.25rem 0.5rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
}
.mgrid-col-picker-reset {
    background: transparent; border: 0; color: #2563eb;
    font-size: 0.75rem; cursor: pointer; font-weight: 500;
}
.mgrid-col-picker-reset:hover { text-decoration: underline; }
.mgrid-col-picker-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.5rem; border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem; color: #374151;
    user-select: none;
}
.mgrid-col-picker-item:hover { background: #f9fafb; }
.mgrid-col-picker-item.locked { color: #9ca3af; cursor: not-allowed; }
.mgrid-col-picker-lock { margin-left: auto; font-size: 0.7rem; }

/* ── Bulk action bar ─────────────────────────────────────────────────────── */
.mgrid-bulk {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    animation: mgrid-slide-down 0.2s ease-out;
}
@keyframes mgrid-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.mgrid-bulk-label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: #1d4ed8; font-size: 0.875rem;
}
.mgrid-bulk-label strong { color: #1e3a8a; }
.mgrid-bulk-divider {
    width: 1px; height: 22px; background: #bfdbfe; margin: 0 0.25rem;
}
.mgrid-bulk-btn {
    background: #fff; border: 1px solid #d1d5db; color: #374151;
    padding: 0.3rem 0.65rem; border-radius: 6px;
    font-size: 0.8rem; cursor: pointer;
    line-height: 1;
    transition: all 0.1s ease;
}
.mgrid-bulk-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.mgrid-bulk-btn-danger { color: #b91c1c; border-color: #fecaca; }
.mgrid-bulk-btn-danger:hover { background: #fee2e2; border-color: #f87171; }
.mgrid-bulk-input {
    display: inline-flex; align-items: center;
    background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
    overflow: hidden; font-size: 0.8rem;
}
.mgrid-bulk-input span {
    padding: 0.3rem 0.55rem;
    background: #f3f4f6; color: #6b7280;
    border-right: 1px solid #e5e7eb;
}
.mgrid-bulk-input input {
    width: 70px; border: 0; outline: none;
    padding: 0.3rem 0.5rem; font-size: 0.8rem;
}
.mgrid-bulk-btn-mini {
    border: 0; background: #2563eb; color: #fff;
    padding: 0.3rem 0.55rem; cursor: pointer; font-weight: 600;
}
.mgrid-bulk-btn-mini:hover { background: #1d4ed8; }
.mgrid-bulk-spacer { flex: 1 1 auto; }
.mgrid-bulk-clear {
    background: transparent; border: 0;
    color: #6b7280;
    padding: 0.25rem 0.4rem; border-radius: 4px;
    cursor: pointer;
}
.mgrid-bulk-clear:hover { color: #1f2937; background: rgba(0,0,0,0.05); }

/* ── Card + table ────────────────────────────────────────────────────────── */
.mgrid-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: auto;
    max-height: calc(100vh - 290px);
    flex-grow: 1;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
}
.mgrid-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    table-layout: fixed;
}
.mgrid-table thead th {
    position: sticky; top: 0; z-index: 10;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.7rem 0.6rem;
    text-align: left;
    font-size: 0.7rem; font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.mgrid-th-check, .mgrid-th-action {
    padding: 0.7rem 0.4rem !important;
    text-align: center;
}
/* Flexible trailing spacer: sits between the last scrollable column and the
   sticky-right action column so that when the sum of column widths is less
   than the card width, the leftover slack goes here instead of leaving the
   table visibly narrower than its container. No declared width so
   table-layout:fixed lets it absorb the remainder. Inherits row hover/
   selected backgrounds naturally from the generic tbody td rules. */
.mgrid-table .mgrid-th-spacer,
.mgrid-table .mgrid-td-spacer {
    padding: 0 !important;
    min-width: 0;
}
.mgrid-th-num { text-align: right; }
.mgrid-th-sortable {
    cursor: pointer; user-select: none;
    transition: color 0.12s, background 0.12s;
}
.mgrid-th-sortable:hover { background: #f3f4f6; color: #1f2937; }

/* Sticky columns — qualified with .mgrid-table to beat generic tbody td rules
   (don't ever put position: relative on a bare td, or sticky silently breaks). */
.mgrid-table .mgrid-sticky-left,
.mgrid-table .mgrid-sticky-right {
    position: sticky;
}
.mgrid-sticky-left, .mgrid-sticky-right {
    background: #fff;
    z-index: 4;
}
.mgrid-table thead .mgrid-sticky-left,
.mgrid-table thead .mgrid-sticky-right {
    z-index: 12;
    background: #f9fafb;
}
.mgrid-sticky-left.mgrid-sticky-left-edge,
.mgrid-table thead .mgrid-sticky-left.mgrid-sticky-left-edge {
    box-shadow: 4px 0 6px -4px rgba(0,0,0,0.08);
}
.mgrid-sticky-right { box-shadow: -4px 0 6px -4px rgba(0,0,0,0.08); }

/* Resize handle */
.mgrid-col-resizer {
    position: absolute;
    right: -1px; top: 0;
    width: 6px; height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background 0.12s;
    z-index: 13;
}
.mgrid-col-resizer:hover, .mgrid-col-resizer.active {
    background: linear-gradient(to right, transparent 1px, #3b82f6 2px, #3b82f6 4px, transparent 5px);
}
.mgrid-resize-overlay {
    position: fixed; inset: 0; z-index: 9999;
    cursor: col-resize;
    background: transparent;
}

/* ── Needs-check modal (used on /workorders) ─────────────────────── */
.needs-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 4rem 1rem 2rem;
    overflow-y: auto;
    backdrop-filter: blur(2px);
}
.needs-modal {
    width: min(1100px, 100%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 6rem);
}
.needs-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(to bottom, #fafbfc, #fff);
}
.needs-modal-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: #0f172a; }
.needs-modal-meta { font-size: 0.8rem; color: #64748b; margin-top: 0.15rem; }
.needs-modal-actions { display: flex; gap: 0.5rem; }
.needs-modal-body {
    padding: 1rem 1.25rem 1.5rem;
    overflow-y: auto;
}

.needs-loading, .needs-empty {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    padding: 3rem 1rem;
    color: #64748b;
}
.needs-empty i { font-size: 1.5rem; }
.needs-error-detail {
    font-size: 0.78rem;
    color: #b91c1c;
    margin-top: 0.25rem;
    font-family: ui-monospace, monospace;
}

.needs-allgood {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 3rem 1rem;
    color: #047857;
    text-align: center;
}
.needs-allgood i { font-size: 2.5rem; color: #10b981; }
.needs-allgood-sub { color: #64748b; font-weight: 400; font-size: 0.875rem; }

.needs-section { margin-top: 1.25rem; }
.needs-section:first-child { margin-top: 0; }
.needs-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.5rem;
}
.needs-section-header h6 { margin: 0; font-size: 0.95rem; font-weight: 600; color: #0f172a; }
.needs-count {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; color: #475569;
}
.needs-section-clean {
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #047857;
    font-size: 0.875rem;
}

.needs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.needs-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.needs-th-num { text-align: right; }
.needs-th-action { width: 130px; }
.needs-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}
.needs-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.needs-td-shortage { font-weight: 700; color: #b91c1c; }
.needs-td-action { text-align: right; }

.needs-row-urgent { background: #fef2f2; }
.needs-row-aging  { background: #fffbeb; }
.needs-row-pending td { color: #94a3b8; }

.needs-product-title { font-weight: 500; color: #0f172a; }
.needs-product-title a { color: inherit; text-decoration: none; }
.needs-product-title a:hover { color: #3b82f6; text-decoration: underline; }
.needs-variation { color: #64748b; font-weight: 400; }
.needs-product-meta { font-size: 0.78rem; color: #64748b; margin-top: 0.15rem; }
.needs-meta-sep { margin: 0 0.4rem; color: #cbd5e1; }

.needs-urgency-badge {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.needs-urgency-normal { background: #f1f5f9; color: #475569; }
.needs-urgency-aging  { background: #fef3c7; color: #92400e; }
.needs-urgency-urgent { background: #fee2e2; color: #991b1b; }

.needs-no-bom { color: #92400e; font-size: 0.8rem; }
.needs-pending-po { color: #1d4ed8; font-size: 0.8rem; }
.needs-needs-po {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Body */
.mgrid-table tbody tr { border-bottom: 1px solid #f3f4f6; }
.mgrid-table tbody tr:hover td { background: #fafbfc; }
.mgrid-table tbody tr:hover .mgrid-sticky-left,
.mgrid-table tbody tr:hover .mgrid-sticky-right { background: #fafbfc; }
.mgrid-table tbody tr.mgrid-row-selected td { background: #eff6ff; }
.mgrid-table tbody tr.mgrid-row-selected .mgrid-sticky-left,
.mgrid-table tbody tr.mgrid-row-selected .mgrid-sticky-right { background: #eff6ff; }
.mgrid-table tbody tr.mgrid-row-selected:hover td,
.mgrid-table tbody tr.mgrid-row-selected:hover .mgrid-sticky-left,
.mgrid-table tbody tr.mgrid-row-selected:hover .mgrid-sticky-right { background: #dbeafe; }

.mgrid-table tbody td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
    background: #fff;
}
.mgrid-table tbody td:first-child { padding-left: 0.7rem; }

/* Row state colors (border-left on first cell, NOT an absolutely-positioned
   ::before — that would require position: relative on the td which beats
   position: sticky and breaks the sticky columns). */
.mgrid-row-low    > td:first-child { border-left: 3px solid #f59e0b; padding-left: calc(0.7rem - 3px); }
.mgrid-row-dirty  > td:first-child { border-left: 3px solid #fbbf24; padding-left: calc(0.7rem - 3px); }
.mgrid-row-new    > td:first-child { border-left: 3px solid #22c55e; padding-left: calc(0.7rem - 3px); }
.mgrid-row-new td { background: #f0fdf4 !important; }

.mgrid-td-check, .mgrid-td-action { text-align: center; }
.mgrid-td-num { text-align: right; }

.mgrid-checkbox {
    width: 16px; height: 16px;
    accent-color: #3b82f6;
    cursor: pointer;
}

/* State indicators inline with the name cell */
.mgrid-state-pill {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.05em;
}
.mgrid-state-pill-new { background: #dcfce7; color: #166534; }
.mgrid-state-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
}
.mgrid-state-dot-dirty { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
.mgrid-state-warn { color: #d97706; }

/* Name cell: icon bubble + editable input */
.mgrid-name-cell {
    display: flex; align-items: center; gap: 0.55rem;
}
.mgrid-name-icon {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 7px;
    background: #eff6ff; color: #2563eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.mgrid-name-icon.dirty { background: #fef3c7; color: #b45309; }
.mgrid-name-icon.new-row { background: #dcfce7; color: #15803d; }
.mgrid-name-icon-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 14px; height: 14px;
    padding: 0 3px;
    border-radius: 99px;
    font-size: 0.6rem; font-weight: 700;
    line-height: 14px;
    text-align: center;
    background: #f59e0b; color: #fff;
    border: 2px solid #fff;
}
.mgrid-name-icon-badge-new { background: #16a34a; }
.mgrid-name-icon-badge-dirty { background: #f59e0b; min-width: 10px; height: 10px; padding: 0; }
.mgrid-name-warn { color: #d97706; font-size: 0.95rem; flex-shrink: 0; }

/* Cell inputs — ghost style (no border until hover/focus) */
.mgrid-cell {
    width: 100%;
    padding: 0.35rem 0.55rem;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #111827;
    font-family: inherit;
    transition: border-color 0.1s, background 0.1s, box-shadow 0.1s;
}
.mgrid-cell:hover { border-color: #e5e7eb; background: #fff; }
.mgrid-cell:focus {
    outline: none;
    border-color: #3b82f6; background: #fff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    z-index: 5; position: relative;
}
.mgrid-cell::placeholder { color: #9ca3af; font-style: italic; }
.mgrid-cell-name { font-weight: 500; }
.mgrid-cell-readonly {
    /* Multi-bin display variant: looks like a cell but isn't editable. */
    display: flex; align-items: center;
    color: #475569; font-style: italic;
    cursor: not-allowed;
    background: transparent;
}
.mgrid-cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; color: #4b5563; }
.mgrid-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.mgrid-cell-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    background-size: 12px;
    padding-right: 1.4rem;
}
.mgrid-cell-readonly {
    display: inline-block;
    padding: 0.35rem 0.55rem;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Pills used inline in cells (e.g., usage count, status badges) */
.mgrid-usage-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: #eff6ff; color: #1d4ed8;
    border-radius: 99px;
    font-size: 0.7rem; font-weight: 600;
}
.mgrid-usage-empty { color: #d1d5db; }
.mgrid-status-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 99px;
    font-size: 0.7rem; font-weight: 600;
}
.mgrid-status-badge-ok { background: #dcfce7; color: #166534; }
.mgrid-status-badge-down { background: #fee2e2; color: #b91c1c; }

/* Action column link.
   Works as both <a class="mgrid-row-link"> (most grids → /entity/edit/{id})
   AND <button class="mgrid-row-link"> (grids that open a modal instead of
   navigating, e.g. /customers). The button-default reset below keeps both
   variants visually identical. */
.mgrid-row-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 6px;
    color: #9ca3af; text-decoration: none;
    transition: all 0.12s ease;
    background: transparent; border: 0; padding: 0; cursor: pointer;
    font: inherit;
}
.mgrid-row-link:hover { color: #1d4ed8; background: #eff6ff; }
.mgrid-row-link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }

/* Empty state */
.mgrid-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: #9ca3af;
}
.mgrid-empty-icon { font-size: 2.5rem; opacity: 0.4; display: block; }
.mgrid-empty-msg { margin-top: 0.75rem; font-size: 0.9rem; }


/* ═══════════════════════════════════════════════════════════════════════
   KITGY EDIT-PAGE TEMPLATE — shared across all single-entity edit pages
   (Materials/Edit, Workstations/Edit, Vendors/Edit, Customers/Edit, etc.)
   All .medit-* classes live here so individual edit pages never need a
   <style> block. Initial extraction source: Materials/Edit.razor.
   ═══════════════════════════════════════════════════════════════════════ */
    /* ── Header ───────────────────────────────────────────────────────────── */
    .medit-header {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: 1rem; flex-wrap: wrap;
        margin-bottom: 1.25rem;
    }
    .medit-title-block {
        display: flex; align-items: center; gap: 0.875rem;
    }
    .medit-title-icon {
        width: 52px; height: 52px;
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.5rem;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        flex-shrink: 0;
    }
    .medit-crumb {
        font-size: 0.75rem; color: #6b7280;
        display: flex; align-items: center; gap: 0.3rem;
        margin-bottom: 0.125rem;
    }
    .medit-crumb a { color: #6b7280; text-decoration: none; }
    .medit-crumb a:hover { color: #1d4ed8; text-decoration: underline; }
    .medit-crumb .bi { font-size: 0.65rem; opacity: 0.5; }
    .medit-title {
        margin: 0;
        font-size: 1.4rem; font-weight: 700;
        color: #111827;
        line-height: 1.2;
    }
    .medit-meta {
        font-size: 0.8rem; color: #6b7280;
        margin-top: 0.2rem;
    }
    .medit-meta-sep { margin: 0 0.4rem; opacity: 0.5; }

    .medit-actions { display: flex; align-items: center; gap: 0.5rem; }
    .medit-flash {
        font-size: 0.825rem;
        padding: 0.35rem 0.75rem; border-radius: 8px;
        display: inline-flex; align-items: center; gap: 0.4rem;
    }
    .medit-flash-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
    .medit-flash-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

    /* ── Buttons ──────────────────────────────────────────────────────────── */
    .medit-btn {
        display: inline-flex; align-items: center;
        padding: 0.55rem 1rem; border-radius: 8px;
        font-size: 0.875rem; font-weight: 500;
        border: 1px solid transparent;
        cursor: pointer;
        transition: all 0.12s ease;
        line-height: 1;
    }
    .medit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .medit-btn-primary {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #fff;
        box-shadow: 0 1px 3px rgba(37, 99, 235, 0.4);
    }
    .medit-btn-primary:not(:disabled):hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(37, 99, 235, 0.4);
    }

    /* ── Card + tabs ──────────────────────────────────────────────────────── */
    .medit-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        overflow: hidden;
    }
    .medit-tabs {
        display: flex; gap: 2px;
        padding: 0.75rem 0.75rem 0;
        border-bottom: 1px solid #f3f4f6;
        overflow-x: auto;
    }
    .medit-tab {
        display: inline-flex; align-items: center; gap: 0.4rem;
        padding: 0.6rem 1rem;
        border: 0; background: transparent;
        color: #6b7280;
        font-size: 0.875rem; font-weight: 500;
        cursor: pointer;
        border-radius: 8px 8px 0 0;
        transition: all 0.12s ease;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        white-space: nowrap;
    }
    .medit-tab:hover { color: #1f2937; background: #f9fafb; }
    .medit-tab.active {
        color: #1d4ed8;
        border-bottom-color: #3b82f6;
        background: transparent;
    }
    .medit-tab-badge {
        background: #eff6ff; color: #1d4ed8;
        padding: 0.05rem 0.45rem;
        border-radius: 99px;
        font-size: 0.7rem; font-weight: 600;
    }
    .medit-tab-badge-warn { background: #fef3c7; color: #92400e; padding: 0.1rem 0.35rem; }
    .medit-tab-badge-dot { background: transparent; color: #3b82f6; font-size: 1.3rem; padding: 0; line-height: 0.5; }

    /* ── Body + sections ──────────────────────────────────────────────────── */
    .medit-body { padding: 1.5rem 1.75rem 1.75rem; }
    .medit-section-title {
        display: inline-flex; align-items: center; gap: 0.5rem;
        font-size: 0.7rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.05em;
        color: #1d4ed8;
        margin-bottom: 0.4rem;
    }
    .medit-section-title .bi { font-size: 0.9rem; }
    .medit-section-help {
        font-size: 0.825rem; color: #6b7280;
        margin-bottom: 1.25rem;
    }

    /* ── Fields ───────────────────────────────────────────────────────────── */
    .medit-field { margin-bottom: 1.1rem; }
    .medit-label {
        font-size: 0.8rem; font-weight: 600;
        color: #374151;
        margin-bottom: 0.3rem;
        display: block;
    }
    .medit-required { color: #dc2626; }
    .medit-help {
        font-size: 0.75rem; color: #6b7280;
        margin: 0.3rem 0 0;
    }
    .medit-error { color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem; }

    .medit-input {
        display: block; width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        font-size: 0.875rem; color: #111827;
        transition: border-color 0.15s, box-shadow 0.15s;
        font-family: inherit;
    }
    .medit-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }
    .medit-input-mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.825rem;
    }
    .medit-input-num { text-align: right; font-variant-numeric: tabular-nums; }
    .medit-textarea { resize: vertical; min-height: 90px; }
    .medit-textarea-large { min-height: 240px; }

    .medit-input-group {
        display: flex; align-items: stretch;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .medit-input-group:focus-within {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }
    .medit-input-group-icon {
        display: flex; align-items: center;
        padding: 0 0.75rem;
        background: #f9fafb;
        color: #6b7280;
        border-right: 1px solid #e5e7eb;
    }
    .medit-input-group .medit-input {
        border: 0; border-radius: 0;
    }
    .medit-input-group .medit-input:focus { box-shadow: none; }

    /* ── Toggle / switch ──────────────────────────────────────────────────── */
    .medit-toggle-row {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: 1rem;
        padding: 0.875rem 1rem;
        background: #f9fafb;
        border: 1px solid #f3f4f6;
        border-radius: 8px;
    }
    .medit-switch {
        position: relative;
        display: inline-block;
        width: 44px; height: 24px;
        flex-shrink: 0;
    }
    .medit-switch-input {
        opacity: 0; width: 0; height: 0;
        position: absolute;
    }
    .medit-switch-slider {
        position: absolute; cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background: #d1d5db;
        border-radius: 99px;
        transition: background 0.18s;
    }
    .medit-switch-slider::before {
        content: "";
        position: absolute;
        top: 3px; left: 3px;
        width: 18px; height: 18px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.18s;
        box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }
    .medit-switch-input:checked + .medit-switch-slider { background: #3b82f6; }
    .medit-switch-input:checked + .medit-switch-slider::before { transform: translateX(20px); }

    /* ── Inventory stock card ─────────────────────────────────────────────── */
    .medit-stock-card {
        margin-top: 1.5rem;
        padding: 1rem 1.2rem;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
    }
    .medit-stock-card.low {
        background: #fffbeb;
        border-color: #fde68a;
    }
    .medit-stock-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 0.75rem;
    }
    .medit-stock-label {
        font-size: 0.7rem; font-weight: 600;
        color: #6b7280;
        text-transform: uppercase; letter-spacing: 0.04em;
        margin-bottom: 0.25rem;
    }
    .medit-stock-value { font-size: 1.1rem; color: #111827; font-variant-numeric: tabular-nums; }
    .medit-stock-value strong { font-weight: 700; }
    .medit-stock-sep { color: #9ca3af; margin: 0 0.4rem; font-weight: 400; }
    .medit-stock-badge {
        display: inline-flex; align-items: center; gap: 0.3rem;
        font-size: 0.75rem; font-weight: 600;
        padding: 0.3rem 0.65rem;
        border-radius: 99px;
        background: #fef3c7; color: #92400e;
    }
    .medit-stock-badge-ok { background: #dcfce7; color: #166534; }
    .medit-stock-bar {
        position: relative;
        height: 8px;
        background: #e5e7eb;
        border-radius: 99px;
        overflow: hidden;
    }
    .medit-stock-fill {
        height: 100%;
        background: linear-gradient(90deg, #3b82f6, #1d4ed8);
        border-radius: 99px;
        transition: width 0.3s ease;
    }
    .medit-stock-card.low .medit-stock-fill {
        background: linear-gradient(90deg, #f59e0b, #d97706);
    }
    .medit-stock-tick {
        position: absolute;
        top: -2px; right: 0;
        width: 2px; height: 12px;
        background: #1f2937;
    }

    /* ── Info callout ─────────────────────────────────────────────────────── */
    .medit-info {
        margin-top: 1rem;
        padding: 0.75rem 1rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        color: #1d4ed8;
        font-size: 0.85rem;
        display: inline-flex; align-items: center; gap: 0.5rem;
    }

    /* ── Read-only auto-summed value (multi-bin On hand display) ──────────── */
    .medit-input-readonly {
        display: flex; align-items: center;
        background: #f8fafc;
        color: #0f172a;
        font-weight: 600;
        cursor: not-allowed;
    }
    .medit-bin-table th {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #475569;
        background: #f8fafc;
    }
    .medit-bin-table td { font-size: 0.875rem; }

    /* ── "Material Status" pill — lives next to the UOM pill in the meta row ── */
    .medit-status-pill {
        display: inline-flex; align-items: center; gap: 0.35rem;
        padding: 0.15rem 0.65rem;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease;
    }
    .medit-status-pill .bi { font-size: 0.78rem; }
    .medit-status-pill-ok {
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        color: #047857;
    }
    .medit-status-pill-ok:hover { background: #d1fae5; border-color: #6ee7b7; }
    .medit-status-pill-warning {
        background: #fffbeb;
        border: 1px solid #fde68a;
        color: #92400e;
    }
    .medit-status-pill-warning:hover { background: #fef3c7; border-color: #fcd34d; }
    .medit-status-pill-error {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }
    .medit-status-pill-error:hover { background: #fee2e2; border-color: #fca5a5; }

    /* ── Material Status modal ────────────────────────────────────────────── */
    .medit-status-backdrop {
        position: fixed; inset: 0; z-index: 1060;
        background: rgba(15, 23, 42, 0.55);
        display: flex; align-items: flex-start; justify-content: center;
        padding: 4rem 1rem 2rem;
        overflow-y: auto;
        backdrop-filter: blur(2px);
    }
    .medit-status-modal {
        width: min(700px, 100%);
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
        overflow: hidden;
    }
    .medit-status-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #e5e7eb;
        background: linear-gradient(to bottom, #fafbfc, #fff);
    }
    .medit-status-body {
        padding: 1.25rem;
        max-height: 70vh;
        overflow-y: auto;
    }
    .medit-status-allgood {
        text-align: center;
        padding: 2.5rem 1rem;
        color: #047857;
    }
    .medit-status-allgood i { font-size: 2.5rem; color: #10b981; display: block; margin-bottom: 0.5rem; }
    .medit-status-allgood strong { display: block; font-size: 1.05rem; margin-bottom: 0.25rem; }

    .medit-status-section { margin-bottom: 1.25rem; }
    .medit-status-section:last-child { margin-bottom: 0; }
    .medit-status-section-title {
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.5rem;
    }
    .medit-status-section-title-error   { color: #b91c1c; }
    .medit-status-section-title-warning { color: #92400e; }
    .medit-status-section-title-info    { color: #1d4ed8; }
    .medit-status-count {
        display: inline-block;
        margin-left: 0.4rem;
        padding: 0.05rem 0.5rem;
        background: #f1f5f9;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 600;
        color: #475569;
    }

    .medit-status-issue {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: 1rem;
        padding: 0.75rem 0.9rem;
        border-radius: 8px;
        border-left: 4px solid;
        margin-bottom: 0.5rem;
    }
    .medit-status-issue-error   { background: #fef2f2; border-left-color: #ef4444; }
    .medit-status-issue-warning { background: #fffbeb; border-left-color: #f59e0b; }
    .medit-status-issue-info    { background: #eff6ff; border-left-color: #3b82f6; }
    .medit-status-issue-body { flex: 1 1 auto; min-width: 0; }
    .medit-status-issue-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: #0f172a;
    }
    .medit-status-issue-detail {
        font-size: 0.8rem;
        color: #475569;
        margin-top: 0.2rem;
        line-height: 1.4;
    }

    /* ── "View UOM Diagram" pill, lives in the page-header meta row ───────── */
    .medit-uom-pill {
        display: inline-flex; align-items: center; gap: 0.35rem;
        padding: 0.15rem 0.65rem;
        background: #eef2ff;
        border: 1px solid #c7d2fe;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 500;
        color: #4338ca;
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease;
    }
    .medit-uom-pill:hover {
        background: #e0e7ff;
        border-color: #a5b4fc;
    }
    .medit-uom-pill .bi { font-size: 0.78rem; }

    /* ── UOM tab styling ──────────────────────────────────────────────────── */
    .medit-uom-chip {
        display: inline-flex; align-items: center; gap: 0.25rem;
        padding: 0.45rem 0.75rem;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 0.875rem;
        color: #0f172a;
    }
    .medit-uom-vendor-table th {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #475569;
        background: #f8fafc;
    }
    .medit-uom-vendor-table td { font-size: 0.875rem; }

    /* ── UOM diagram modal ────────────────────────────────────────────────── */
    .uom-diagram-backdrop {
        position: fixed; inset: 0; z-index: 1060;
        background: rgba(15, 23, 42, 0.55);
        display: flex; align-items: flex-start; justify-content: center;
        padding: 4rem 1rem 2rem;
        overflow-y: auto;
        backdrop-filter: blur(2px);
    }
    .uom-diagram-modal {
        width: min(1100px, 100%);
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
        overflow: hidden;
    }
    .uom-diagram-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #e5e7eb;
        background: linear-gradient(to bottom, #fafbfc, #fff);
    }
    .uom-diagram-body {
        padding: 1.5rem;
    }
    .uom-diagram-flow {
        display: flex; align-items: center; gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .uom-diagram-col {
        flex: 1 1 220px;
        min-width: 220px;
        max-width: 320px;
        display: flex; flex-direction: column; gap: 0.5rem;
    }
    .uom-diagram-role {
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #475569;
        text-align: center;
    }
    .uom-diagram-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 1rem;
        text-align: center;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }
    .uom-diagram-card-stock {
        background: linear-gradient(180deg, #eff6ff, #dbeafe);
        border-color: #93c5fd;
    }
    .uom-diagram-card-mfg {
        background: linear-gradient(180deg, #f0fdf4, #dcfce7);
        border-color: #86efac;
    }
    .uom-diagram-card-preferred {
        border-color: #6366f1;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
    }
    .uom-diagram-card-empty {
        background: #f8fafc;
        border-style: dashed;
        color: #64748b;
    }
    .uom-diagram-vendor {
        font-weight: 600;
        font-size: 0.875rem;
        color: #0f172a;
        margin-bottom: 0.4rem;
    }
    .uom-diagram-eq {
        font-size: 0.95rem;
        color: #0f172a;
    }
    .uom-diagram-big {
        font-size: 1.5rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 0.25rem;
    }
    .uom-diagram-unit {
        font-size: 0.95rem;
        font-weight: 500;
        color: #475569;
    }
    .uom-diagram-sub {
        font-size: 0.78rem;
        color: #64748b;
    }
    .uom-diagram-empty-text {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    .uom-diagram-arrow {
        font-size: 1.75rem;
        color: #3b82f6;
        flex-shrink: 0;
    }
    .uom-diagram-arrow-muted {
        color: #cbd5e1;
    }
    .uom-diagram-summary {
        margin-top: 1.5rem;
        padding: 0.85rem 1rem;
        background: #fefce8;
        border: 1px solid #fde68a;
        border-radius: 8px;
        color: #713f12;
        font-size: 0.875rem;
        line-height: 1.55;
    }

    /* On narrow screens, stack the columns vertically and show down-arrows. */
    @media (max-width: 768px) {
        .uom-diagram-arrow {
            transform: rotate(90deg);
        }
    }

    /* ── Icon picker ──────────────────────────────────────────────────────── */
    .medit-icon-picker {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
        gap: 0.5rem;
        padding: 0.75rem;
        background: #f9fafb;
        border: 1px solid #f3f4f6;
        border-radius: 10px;
    }
    .medit-icon-btn {
        width: 48px; height: 48px;
        border: 2px solid transparent;
        background: #fff;
        border-radius: 8px;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        color: #6b7280; font-size: 1.25rem;
        transition: all 0.1s ease;
    }
    .medit-icon-btn:hover {
        color: #1d4ed8;
        background: #eff6ff;
    }
    .medit-icon-btn.selected {
        border-color: #3b82f6;
        background: linear-gradient(135deg, #eff6ff, #dbeafe);
        color: #1d4ed8;
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

    .medit-link-btn {
        background: transparent; border: 0;
        color: #1d4ed8;
        padding: 0; font-size: 0.75rem; cursor: pointer;
    }
    .medit-link-btn:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════
   FLOOR KIOSK — light theme, mobile-first warehouse-floor app.
   Light gray body + white cards + indigo accents. Layout shell (top
   bar, body container) is in KioskLayout.razor.css.
   Palette:
     Body bg     #f1f5f9       Card bg     #ffffff
     Border      #e2e8f0       Hover bg    #f8fafc
     Text        #0f172a       Muted       #64748b
     Primary     #4f46e5       Primary +   #4338ca   (indigo)
     Tile icon   #6366f1       Success     #10b981
     Warning     #f59e0b       Danger      #dc2626
   ═══════════════════════════════════════════════════════════════════════ */

.kiosk-h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 1rem 0;
}

.kiosk-pageheader {
    display: flex; align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.kiosk-back {
    display: inline-flex; align-items: center;
    gap: 0.25rem;
    color: #64748b;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.5rem 0.5rem;
    margin-left: -0.5rem;
    border-radius: 6px;
}
.kiosk-back:hover { color: #4f46e5; background: #eef2ff; }

/* ── Loading spinner ──────────────────────────────────────────────────── */
.kiosk-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: #64748b;
}
.kiosk-spinner {
    width: 28px; height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: kiosk-spin 0.8s linear infinite;
}
@keyframes kiosk-spin { to { transform: rotate(360deg); } }

/* ── Card (info / error states) ───────────────────────────────────────── */
.kiosk-card {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #475569;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kiosk-card i { font-size: 2rem; margin-bottom: 0.75rem; color: #94a3b8; }
.kiosk-card-error i { color: #dc2626; }
.kiosk-card strong { color: #0f172a; font-size: 1.05rem; }

/* ── Generic kiosk button ─────────────────────────────────────────────── */
.kiosk-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    background: #4f46e5;
    border: 1px solid #4f46e5;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.kiosk-btn:hover  { background: #4338ca; border-color: #4338ca; color: #ffffff; }
.kiosk-btn:disabled, .kiosk-btn[disabled] {
    opacity: 0.55; cursor: not-allowed;
}
.kiosk-btn-secondary {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}
.kiosk-btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

/* ── Tile grid (entry picker + hub) ───────────────────────────────────── */
.kiosk-tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .kiosk-tile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}
@media (min-width: 1024px) {
    .kiosk-tile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.kiosk-tile-grid-2x2 {
    /* Used to be 2x2 capped; now flexes to fit 5+ tiles cleanly. Phone
       single-column, tablet 2 columns, desktop 3 columns — last row
       can be partial without looking off. */
    max-width: 1080px;
}
@media (min-width: 1024px) {
    .kiosk-tile-grid-2x2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.kiosk-tile {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 1.5rem 1.25rem;
    min-height: 140px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    color: #0f172a;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kiosk-tile:hover, .kiosk-tile:focus {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.kiosk-tile-active { border-color: #c7d2fe; background: #eef2ff; }
.kiosk-tile-active:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}
.kiosk-tile-disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: #f8fafc;
}
.kiosk-tile-disabled:hover {
    transform: none;
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.kiosk-tile-icon {
    font-size: 1.75rem;
    color: #6366f1;
    margin-bottom: 0.25rem;
}
.kiosk-tile-disabled .kiosk-tile-icon { color: #94a3b8; }
.kiosk-tile-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kiosk-tile-sub {
    font-size: 0.875rem;
    color: #64748b;
}
.kiosk-tile-warn {
    color: #b45309;
    font-weight: 500;
}

/* ── Tap-list (stations list) ─────────────────────────────────────────── */
.kiosk-list {
    display: flex; flex-direction: column;
    gap: 0.5rem;
}
.kiosk-list-item {
    display: flex; align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.1rem;
    min-height: 64px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #0f172a;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kiosk-list-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.kiosk-list-item-down { opacity: 0.65; }

.kiosk-list-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef2ff;
    border-radius: 10px;
    color: #4f46e5;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.kiosk-list-body { flex: 1 1 auto; min-width: 0; }
.kiosk-list-title { font-size: 1rem; font-weight: 600; color: #0f172a; }
.kiosk-list-sub {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.15rem;
}
.kiosk-list-sep { margin: 0 0.5rem; color: #cbd5e1; }
.kiosk-list-chevron { color: #94a3b8; flex-shrink: 0; }

.kiosk-list-badge {
    display: inline-flex; align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}
.kiosk-list-badge-down {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Inventory: search bar + scan button ─────────────────────────────── */
.kiosk-search {
    position: relative;
    display: flex; align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.kiosk-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 1rem;
}
.kiosk-search-input {
    flex: 1 1 auto;
    min-height: 52px;
    padding: 0.5rem 2.6rem 0.5rem 2.6rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #0f172a;
    font-size: 1rem;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kiosk-search-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.kiosk-search-input::placeholder { color: #94a3b8; }
.kiosk-search-clear {
    position: absolute;
    right: 4.2rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.4rem;
    font-size: 1rem;
}
.kiosk-search-clear:hover { color: #475569; }
.kiosk-scan-btn {
    flex-shrink: 0;
    width: 52px; height: 52px;
    background: #4f46e5;
    border: 1px solid #4f46e5;
    border-radius: 12px;
    color: #ffffff;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2);
}
.kiosk-scan-btn:hover { background: #4338ca; border-color: #4338ca; }

/* ── Inventory result cards ──────────────────────────────────────────── */
.kiosk-result-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kiosk-result-header {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.kiosk-result-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}
.kiosk-result-meta {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.15rem;
}
.kiosk-result-total {
    font-size: 0.875rem;
    color: #475569;
    margin-top: 0.4rem;
}
.kiosk-meta-sep { margin: 0 0.4rem; color: #cbd5e1; }

/* ── Bin row ─────────────────────────────────────────────────────────── */
.kiosk-bin-list { padding: 0.4rem 0.4rem 0.5rem; }
.kiosk-bin-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
}
.kiosk-bin-row + .kiosk-bin-row {
    border-top: 1px solid #f1f5f9;
}
.kiosk-bin-info { flex: 1 1 auto; min-width: 0; }
.kiosk-bin-label {
    font-weight: 500;
    color: #0f172a;
}
.kiosk-bin-qty {
    font-size: 0.875rem;
    color: #475569;
    margin-top: 0.15rem;
}
.kiosk-btn-sm {
    min-height: 38px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

/* Stack action buttons vertically next to a bin row so phone widths stay
   readable. Tablet/desktop get them side-by-side. */
.kiosk-bin-actions {
    display: flex; flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}
@media (min-width: 480px) {
    .kiosk-bin-actions {
        flex-direction: row;
    }
}

/* Transfer modal: read-only "from" row + quick-pick destination chips. */
.kiosk-transfer-static {
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 1rem;
    color: #1e293b;
    font-size: 0.95rem;
}
.kiosk-transfer-chips {
    display: flex; flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}
.kiosk-chip {
    display: inline-flex; align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #1e293b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.kiosk-chip:hover { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; }

/* ── Modal (adjust + scanner) ────────────────────────────────────────── */
.kiosk-modal-backdrop {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0;
    backdrop-filter: blur(2px);
}
@media (min-width: 640px) {
    .kiosk-modal-backdrop {
        align-items: center;
        padding: 1.5rem;
    }
}
.kiosk-modal {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
    display: flex; flex-direction: column;
    max-height: 90vh;
}
@media (min-width: 640px) {
    .kiosk-modal {
        border-radius: 16px;
    }
}
.kiosk-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
}
.kiosk-modal-body {
    padding: 1.25rem;
    color: #1e293b;
    overflow-y: auto;
}
.kiosk-modal-footer {
    display: flex; gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.kiosk-modal-footer .kiosk-btn { flex: 1 1 auto; }

.kiosk-iconbtn-ghost {
    background: transparent;
    border-color: transparent;
    color: #64748b;
}
.kiosk-iconbtn-ghost:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: transparent;
}

/* ── Adjust modal specifics ──────────────────────────────────────────── */
.kiosk-adjust-target {
    margin-bottom: 1rem;
}
.kiosk-adjust-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
}
.kiosk-adjust-bin {
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 0.2rem;
}
.kiosk-adjust-current {
    font-size: 0.95rem;
    color: #475569;
    margin-bottom: 1rem;
}

.kiosk-adjust-stepper {
    display: flex; align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.kiosk-stepper-btn {
    width: 56px; height: 56px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #1e293b;
    font-size: 1.4rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms ease, border-color 120ms ease;
}
.kiosk-stepper-btn:hover { background: #e0e7ff; border-color: #a5b4fc; color: #4338ca; }
.kiosk-stepper-input {
    flex: 1 1 auto;
    min-height: 56px;
    padding: 0.6rem 0.9rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #0f172a;
    font-size: 1.4rem;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.kiosk-stepper-input::-webkit-outer-spin-button,
.kiosk-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.kiosk-stepper-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

select.kiosk-stepper-input {
    font-size: 1rem;
    text-align: left;
    min-height: 48px;
}
input.kiosk-stepper-input[type="text"], input.kiosk-stepper-input:not([type="number"]) {
    font-size: 1rem;
    text-align: left;
    min-height: 48px;
}

.kiosk-adjust-label {
    display: block;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 0.4rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* ── Scanner modal ───────────────────────────────────────────────────── */
.kiosk-scanner-modal {
    max-width: 540px;
}
.kiosk-scanner-target {
    width: 100%;
    min-height: 360px;
    background: #000;
    overflow: hidden;
}
.kiosk-scanner-target video,
.kiosk-scanner-target img {
    max-width: 100% !important;
    height: auto !important;
}

/* ── Errors + spinner ────────────────────────────────────────────────── */
.kiosk-error {
    padding: 0.65rem 0.85rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 8px;
    font-size: 0.875rem;
}
.kiosk-spinner-sm {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: kiosk-spin 0.8s linear infinite;
}

/* ── Receive page ────────────────────────────────────────────────────── */
.kiosk-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    margin: 0.5rem 0 0.6rem;
}

/* PO header (above the line list on the detail page) */
.kiosk-po-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kiosk-po-vendor {
    font-weight: 600;
    color: #0f172a;
    font-size: 1rem;
}
.kiosk-po-meta {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.2rem;
}
.kiosk-po-badge {
    display: inline-flex; align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.kiosk-po-badge-complete {
    background: #d1fae5;
    color: #065f46;
}

/* Per-line "Receive" row — bigger button on the right */
.kiosk-line-item .kiosk-btn-sm {
    flex-shrink: 0;
}

/* PO suggestion in the receive modal */
.kiosk-po-suggest {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}
.kiosk-po-suggest-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4338ca;
    margin-bottom: 0.5rem;
}
.kiosk-po-suggest-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    cursor: pointer;
    text-align: left;
    transition: background 120ms ease, border-color 120ms ease;
}
.kiosk-po-suggest-row:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}
.kiosk-po-suggest-info { flex: 1 1 auto; min-width: 0; }
.kiosk-po-suggest-num { font-weight: 600; color: #0f172a; font-size: 0.95rem; }
.kiosk-po-suggest-vendor { font-size: 0.78rem; color: #64748b; margin-top: 0.1rem; }
.kiosk-po-suggest-pick {
    color: #4f46e5;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.kiosk-po-suggest-or {
    text-align: center;
    font-size: 0.78rem;
    color: #6366f1;
    margin-top: 0.4rem;
    font-style: italic;
}

/* Applied-to-PO confirmation */
.kiosk-po-applied {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* ── Ship page ───────────────────────────────────────────────────────── */
.kiosk-list-item-urgent {
    border-left: 3px solid #f59e0b;
}
.kiosk-list-badge-warn {
    background: #fef3c7;
    color: #92400e;
}

/* Address card on the order detail page */
.kiosk-ship-address {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kiosk-ship-address-name {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.25rem;
}
.kiosk-ship-address-line {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Already-shipped success card */
.kiosk-card-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.kiosk-card-success strong { color: #064e3b; }
.kiosk-ship-summary {
    text-align: left;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    font-size: 0.9rem;
}
.kiosk-ship-summary > div { margin-bottom: 0.3rem; }
.kiosk-ship-summary a { color: #4f46e5; }

/* Bottom Pack & Ship action — sticky on mobile so the operator never has
   to scroll a long order to find it */
.kiosk-ship-action {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, #f1f5f9 60%, rgba(241, 245, 249, 0));
    padding: 1rem 0.25rem 0.5rem;
    margin-top: 1rem;
    z-index: 5;
}
.kiosk-btn-block {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    min-height: 56px;
    font-size: 1.05rem;
    flex: 1 1 auto;
}

/* ── Pick list (Ship order detail) ──────────────────────────────────── */
.kiosk-pick-header {
    display: flex; align-items: center; justify-content: space-between;
    margin: 1rem 0 0.5rem;
}
.kiosk-pick-progress {
    font-size: 0.85rem;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}
.kiosk-pick-progress strong { color: #0f172a; }

.kiosk-pick-item {
    background: #ffffff;
    border-color: #e2e8f0;
    cursor: pointer;
    text-align: left;
}
.kiosk-pick-item:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.kiosk-pick-item-picked {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.kiosk-pick-item-picked .kiosk-list-icon {
    background: #d1fae5;
    color: #047857;
}

.kiosk-flash-ok {
    padding: 0.5rem 0.75rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: 8px;
    font-size: 0.875rem;
}

.kiosk-list-badge-shipped {
    background: #e0e7ff;
    color: #3730a3;
}

/* ── Pack & Ship wizard modal ───────────────────────────────────────── */
.kiosk-wizard-modal {
    max-width: 600px;
    max-height: 92vh;
}
.kiosk-wizard-picked {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}
.kiosk-wizard-picked-title {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.3rem;
}
.kiosk-wizard-picked-row {
    color: #475569;
    line-height: 1.5;
}

/* ── Per-package card inside wizard ─────────────────────────────────── */
.kiosk-package-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kiosk-package-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e2e8f0;
}
.kiosk-package-header h6 {
    color: #0f172a;
    font-weight: 600;
    margin: 0;
}
.kiosk-package-dims {
    display: flex; align-items: center;
    gap: 0.4rem;
}
.kiosk-package-dims .kiosk-stepper-input {
    flex: 1 1 0;
    min-width: 0;
    font-size: 1rem;
    text-align: center;
    min-height: 48px;
}
.kiosk-package-dims-x {
    color: #94a3b8;
    font-weight: 600;
}
.kiosk-package-actions {
    display: flex; flex-wrap: wrap;
    gap: 0.5rem;
}

/* Rate cards */
.kiosk-rates-list {
    display: flex; flex-direction: column;
    gap: 0.4rem;
}
.kiosk-rate-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    text-align: left;
}
.kiosk-rate-row:hover:not(:disabled) {
    background: #eef2ff;
    border-color: #a5b4fc;
}
.kiosk-rate-row:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.kiosk-rate-svc {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.9rem;
}
.kiosk-rate-est {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.1rem;
}
.kiosk-rate-cost {
    font-weight: 700;
    color: #4f46e5;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Pick-ticket status badges (Floor) ──────────────────────────────── */
.kiosk-list-badge-open       { background: #f1f5f9; color: #475569; }
.kiosk-list-badge-inprogress { background: #dbeafe; color: #1e40af; }
.kiosk-list-badge-completed  { background: #d1fae5; color: #065f46; }
.kiosk-list-badge-cancelled  { background: #fee2e2; color: #991b1b; }

.kiosk-pick-ticket-meta {
    display: flex; align-items: center;
    margin: 0.5rem 0 0.5rem;
}

/* ── Generate-ticket modal (admin /orders) ──────────────────────────── */
.ptg-backdrop {
    position: fixed; inset: 0; z-index: 1060;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 4rem 1rem 2rem;
    overflow-y: auto;
    backdrop-filter: blur(2px);
}
.ptg-modal {
    width: min(680px, 100%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 6rem);
}
.ptg-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(to bottom, #fafbfc, #fff);
}
.ptg-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
}
.ptg-footer {
    display: flex; gap: 0.75rem; justify-content: flex-end;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}
.ptg-toolbar {
    display: flex; align-items: center;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
}
.ptg-list {
    display: flex; flex-direction: column;
    gap: 0.35rem;
}
.ptg-row {
    display: flex; align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.ptg-row:hover { background: #f8fafc; border-color: #cbd5e1; }
.ptg-row-selected {
    background: #eef2ff;
    border-color: #c7d2fe;
}
.ptg-row-selected:hover { background: #e0e7ff; border-color: #a5b4fc; }
.ptg-row-body { flex: 1 1 auto; min-width: 0; }
.ptg-row-title {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.95rem;
}
.ptg-row-sub {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.15rem;
}
.ptg-sep { margin: 0 0.4rem; color: #cbd5e1; }
.ptg-row-amt {
    font-weight: 600;
    color: #4f46e5;
    flex-shrink: 0;
}