/* ═══════════════════════════════════════════════════════════════════
   LAB PAGE STYLES — extracted from Lab.razor's inline <style> block.
   Every hard-coded colour has been swapped for a theme token from
   theme.css, so the /lab page adapts to whatever theme the user picks
   (light / dark / WA light / Meta / Notion / Spotify etc.) instead
   of being pinned to a single dark palette.
   =================================================================== */

/* ── Lab dialog base — wbc-sfdialog is the Syncfusion dialog shell ── */
.lab-page ~ .e-dialog,
.wbc-sfdialog.e-dialog,
.wbc-sfdialog .e-dlg-content {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

.wbc-sfdialog .e-dlg-overlay,
.lab-page .e-dlg-overlay {
    background: var(--dialog-overlay, rgba(0, 0, 0, 0.55)) !important;
}

/* ── Dialog header ── */
.wbc-header {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    box-shadow: none !important;
    position: relative;
}

.wbc-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px !important;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary, var(--warning))) !important;
}

.wbc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

.wbc-header-left i {
    color: var(--accent-primary);
    width: 18px;
    height: 18px;
}

.wbc-close-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-primary);
    background: var(--hover-bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.wbc-close-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.wbc-close-btn i { width: 15px; height: 15px; }

/* ── Content + footer ── */
.wbc-content {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

.wbc-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: var(--bg-primary) !important;
    border-top: 1px solid var(--border-primary) !important;
    flex-shrink: 0;
    margin-top: auto;
}

/* ── Buttons ── */
.wbc-btn {
    padding: 9px 20px;
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.wbc-btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--warning)));
    color: var(--on-accent, #fff);
}

.wbc-btn-primary:hover:not(:disabled) {
    box-shadow: 0 4px 15px var(--accent-30, rgba(0, 0, 0, 0.25));
    transform: translateY(-1px);
}

.wbc-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.wbc-btn-secondary {
    background: var(--hover-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}

.wbc-btn-secondary:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.wbc-btn i { font-size: 14px; }

/* ── Dialog body scrollable area ── */
.lab-dialog-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 65vh;
    background: var(--surface);
}

.lab-dialog-body::-webkit-scrollbar              { width: 6px; }
.lab-dialog-body::-webkit-scrollbar-track        { background: var(--surface); }
.lab-dialog-body::-webkit-scrollbar-thumb        { background: var(--border-primary); border-radius: 3px; }
.lab-dialog-body::-webkit-scrollbar-thumb:hover  { background: var(--text-muted); }

/* ═════════════════════════════════════════════════════════════════════
   LAB SEARCH BAR
   ═════════════════════════════════════════════════════════════════════ */
.lab-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.lab-search-inner {
    position: relative;
    display: flex;
    align-items: center;
}

.lab-search-icon {
    position: absolute;
    left: 14px;
    width: 15px;
    height: 15px;
    color: var(--text-disabled);
    pointer-events: none;
    z-index: 1;
}

.lab-search-input {
    width: 320px;
    padding: 9px 38px 9px 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    font-weight: 400;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lab-search-input::placeholder {
    color: var(--text-disabled);
    font-weight: 400;
}

.lab-search-input:focus {
    width: 380px;
    border-color: var(--accent-primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-15, rgba(0, 0, 0, 0.1));
}

.lab-search-input:hover:not(:focus) {
    border-color: var(--text-muted);
    background: var(--surface);
}

.lab-search-clear {
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: var(--hover-bg);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
}

.lab-search-clear:hover {
    background: var(--accent-20, rgba(0, 0, 0, 0.12));
    color: var(--accent-primary);
}

.lab-search-clear i {
    width: 12px;
    height: 12px;
}

.lab-search-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--warning)));
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    color: var(--on-accent, #fff);
    letter-spacing: 0.3px;
}

/* ═════════════════════════════════════════════════════════════════════
   LOADING STATE
   ═════════════════════════════════════════════════════════════════════ */
.lab-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    color: var(--text-muted);
    font-size: 13px;
}

.lab-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: lab-spin 0.8s linear infinite;
}

@keyframes lab-spin {
    to { transform: rotate(360deg); }
}

/* ═════════════════════════════════════════════════════════════════════
   PAGER
   ═════════════════════════════════════════════════════════════════════ */
.lab-pager {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.lab-pager-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.lab-pager-btn:hover:not(:disabled) {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.lab-pager-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.lab-pager-btn i { width: 14px; height: 14px; }

.lab-pager-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.lab-pager-num:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.lab-pager-num.active {
    background: var(--accent-10, rgba(0, 0, 0, 0.05));
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    font-weight: 700;
}

.lab-pager-info {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════════════
   LAB STATUS DOT — pending / done / none
   Was amber/green/grey with a pulsing halo; now uses theme tokens so
   it looks correct on every theme. Pulse is still amber because
   "attention" colour is universal regardless of brand palette.
   ═════════════════════════════════════════════════════════════════════ */
.lab-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lab-dot:hover { transform: scale(1.15); }

.lab-dot-pending {
    background: var(--warning);
    border-color: var(--warning-light, rgba(245, 158, 11, 0.45));
    animation: lab-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes lab-dot-pulse {
    0%   { box-shadow: 0 0 0 0   var(--warning-light, rgba(245, 158, 11, 0.55)); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0   transparent; }
}

.lab-dot-done {
    background: var(--success);
    border-color: var(--success);
    box-shadow: 0 0 0 3px var(--success-light, rgba(16, 185, 129, 0.18)),
                0 0 8px var(--success-light, rgba(16, 185, 129, 0.35));
}

/* Tick mark inside the done dot — kept as a white CSS check so it
   reads clearly on every accent colour. */
.lab-dot-done::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 4px;
    width: 4px;
    height: 7px;
    border-right: 1.75px solid var(--on-accent, #fff);
    border-bottom: 1.75px solid var(--on-accent, #fff);
    transform: rotate(45deg);
}

.lab-dot-none {
    background: transparent;
    border: 2px dashed var(--text-muted);
    opacity: 0.5;
}

/* ═════════════════════════════════════════════════════════════════════
   RETURN TICKET ICON
   ═════════════════════════════════════════════════════════════════════ */
.ta-dl-return {
    color: var(--accent-primary) !important;
}

/* ═════════════════════════════════════════════════════════════════════
   LAB TICKET INFO CARD — rendered at the top of the lab results dialog
   ═════════════════════════════════════════════════════════════════════ */
.lab-ticket-card {
    background: var(--bg-secondary);
    padding: 20px;
    border-bottom: 1px solid var(--border-primary);
}

.lab-ticket-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.lab-ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--warning)));
    color: var(--on-accent, #fff);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
}

.lab-ticket-badge i { font-size: 14px; opacity: 0.9; }

.lab-ticket-mass {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.lab-mass-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.lab-mass-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--warning);
}

.lab-ticket-info { display: flex; flex-direction: column; gap: 8px; }

.lab-info-row { display: flex; align-items: center; gap: 10px; }

.lab-info-icon {
    width: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    flex-shrink: 0;
}

.lab-info-text { font-size: 13px; color: var(--text-secondary); }

/* ═════════════════════════════════════════════════════════════════════
   SECTION TITLE DIVIDER
   ═════════════════════════════════════════════════════════════════════ */
.lab-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 8px;
}

.lab-section-title span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--warning);
    white-space: nowrap;
}

.lab-section-line {
    flex: 1;
    height: 1px;
    background: var(--border-primary);
}

/* ═════════════════════════════════════════════════════════════════════
   TEST INPUTS GRID
   ═════════════════════════════════════════════════════════════════════ */
.lab-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 8px 20px 20px;
}

.lab-field { display: flex; flex-direction: column; gap: 4px; }
.lab-field-wide { grid-column: 1 / -1; }

.lab-field-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lab-field-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.lab-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-secondary);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}

.lab-field-wrap .lab-input { padding-right: 42px; }
.lab-input::placeholder { color: var(--text-disabled); font-weight: 400; }

.lab-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-15, rgba(0, 0, 0, 0.1));
    background: var(--surface);
}

.lab-input:hover:not(:focus) { border-color: var(--text-muted); }

.lab-input[type="number"]::-webkit-outer-spin-button,
.lab-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lab-input[type="number"] { -moz-appearance: textfield; }

.lab-field-unit {
    position: absolute;
    right: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-disabled);
    pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════════
   COA PROMPT TEXT
   ═════════════════════════════════════════════════════════════════════ */
.lab-coa-prompt {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.lab-coa-prompt strong {
    color: var(--warning);
    font-weight: 700;
}

/* ═════════════════════════════════════════════════════════════════════
   TOAST ICON FONT — preserved inline as-is (base64 font), but its
   coloured backgrounds are now theme-aware.
   ═════════════════════════════════════════════════════════════════════ */
#toast_type .e-toast-icon.e-icons { height: auto; font-size: 30px; }
.toast-icons.e-success::before { content: "\e701"; }
.toast-icons.e-error::before   { content: "\e700"; }
.toast-icons.e-info::before    { content: "\e704"; }
.toast-icons.e-warning::before { content: "\e703"; }

/* ═════════════════════════════════════════════════════════════════════
   SUB-FILTER TABS (Sales / Purchases)
   ═════════════════════════════════════════════════════════════════════ */
.lab-sub-tab {
    font-size: 12px !important;
    padding: 6px 12px !important;
    height: 30px !important;
    min-height: 30px !important;
}

.lab-sub-tab i { width: 13px !important; height: 13px !important; }

.lab-sub-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    background: var(--hover-bg);
    color: var(--text-secondary);
    margin-left: 2px;
}

.lab-sub-tab.active .lab-sub-count {
    background: var(--accent-20, rgba(0, 0, 0, 0.12));
    color: var(--accent-primary);
}

.lab-sub-sales {
    background: var(--info-light, rgba(59, 130, 246, 0.15));
    color: var(--info);
}

.lab-sub-purchases {
    background: var(--success-light, rgba(34, 197, 94, 0.15));
    color: var(--success);
}

/* ═════════════════════════════════════════════════════════════════════
   ORDER TYPE TAGS
   ═════════════════════════════════════════════════════════════════════ */
.lab-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.lab-type-tag i { width: 11px; height: 11px; }

.lab-type-sales {
    background: var(--info-light, rgba(59, 130, 246, 0.12));
    color: var(--info);
    border: 1px solid var(--info-light, rgba(59, 130, 246, 0.25));
}

.lab-type-purchase {
    background: var(--success-light, rgba(34, 197, 94, 0.12));
    color: var(--success);
    border: 1px solid var(--success-light, rgba(34, 197, 94, 0.25));
}

.lab-type-other {
    background: var(--hover-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-primary);
}

/* ════════════════════════════════════════════════════════════════════
   TRUCK-INFO BUTTON  (per-row icon on the lab grid)
   ────────────────────────────────────────────────────────────────────
   Default state — neutral accent (matches other ta-act-btn icons).
   When the truck has been REJECTED by the lab the button turns red
   so a glance down the grid shows blocked trucks. When the customer
   then RELEASES it the button turns black (Ruben's signal that the
   ticket can come off the blocked list).
   ──────────────────────────────────────────────────────────────── */
.ta-act-btn.ta-act-truck { color: var(--accent-primary); }
/* Yellow — FM Difference flagged (Majesty FM > LP FM + 0.6%) */
.ta-act-btn.ta-act-truck.ta-act-truck-flagged {
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 18%, transparent);
}
.ta-act-btn.ta-act-truck.ta-act-truck-flagged:hover {
    background: color-mix(in srgb, #f59e0b 28%, transparent);
}
/* Green — Lab Checked / Graded */
.ta-act-btn.ta-act-truck.ta-act-truck-graded {
    color: #15803d;
    background: color-mix(in srgb, #22c55e 16%, transparent);
}
.ta-act-btn.ta-act-truck.ta-act-truck-graded:hover {
    background: color-mix(in srgb, #22c55e 26%, transparent);
}
.ta-act-btn.ta-act-truck.ta-act-truck-rejected {
    color: var(--error, #b91c1c);
    background: var(--error-light, rgba(239, 68, 68, 0.10));
    border-color: color-mix(in srgb, var(--error, #ef4444) 35%, transparent);
}
.ta-act-btn.ta-act-truck.ta-act-truck-rejected:hover {
    background: color-mix(in srgb, var(--error, #ef4444) 20%, transparent);
}
.ta-act-btn.ta-act-truck.ta-act-truck-released {
    color: var(--text-primary, #0f172a);
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.32);
}
[data-theme="dark"] .ta-act-btn.ta-act-truck.ta-act-truck-released {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.32);
}

/* ════════════════════════════════════════════════════════════════════
   TRUCK-DETAILS MODAL  (opens on the truck button click)
   ──────────────────────────────────────────────────────────────── */
.lab-td-overlay {
    position: fixed; inset: 0;
    background: var(--overlay-backdrop, rgba(0, 0, 0, 0.32));
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    z-index: 1100;
}
.lab-td-dialog {
    width: 100%;
    max-width: 480px;
    background: var(--surface-elevated, var(--bg-primary, #ffffff));
    border: 1px solid var(--border-primary, var(--border-color, #e5e7eb));
    border-radius: 14px;
    box-shadow: var(--shadow-xl, 0 16px 48px rgba(0, 0, 0, 0.18));
    overflow: hidden;
    color: var(--text-primary);
    /* Subtle status-coloured top-rail when flagged */
    border-top: 4px solid transparent;
}
.lab-td-dialog.ta-act-truck-rejected { border-top-color: var(--error, #ef4444); }
.lab-td-dialog.ta-act-truck-released { border-top-color: var(--text-primary, #0f172a); }

.lab-td-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-primary, var(--border-color, #e5e7eb));
}
.lab-td-mark {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent-primary);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.lab-td-mark i { width: 18px; height: 18px; }
.ta-act-truck-rejected .lab-td-mark {
    background: var(--error-light, rgba(239, 68, 68, 0.12));
    color: var(--error, #b91c1c);
}
.ta-act-truck-released .lab-td-mark {
    background: rgba(15, 23, 42, 0.10);
    color: var(--text-primary, #0f172a);
}
[data-theme="dark"] .ta-act-truck-released .lab-td-mark {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.lab-td-titles { flex: 1 1 auto; min-width: 0; }
.lab-td-titles h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.1px;
}
.lab-td-tn {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 18px;
    color: var(--accent-primary);
    margin-left: 6px;
}
.lab-td-sub {
    font-size: 12px;
    color: var(--text-secondary);
}
.lab-td-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-muted);
    border-radius: 6px;
}
.lab-td-close:hover { background: var(--hover-bg); color: var(--text-primary); }
.lab-td-close i { width: 16px; height: 16px; }

/* Status banner */
.lab-td-banner {
    display: flex; gap: 10px;
    padding: 12px 14px;
    margin: 10px 14px 0;
    border-radius: 10px;
    border: 1px solid transparent;
}
.lab-td-banner > i { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.lab-td-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lab-td-banner-text strong { font-size: 13px; }
.lab-td-banner-text p { margin: 0; font-size: 12.5px; line-height: 1.4; }
.lab-td-banner-text small { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.lab-td-banner-rejected {
    background: var(--error-light, rgba(239, 68, 68, 0.10));
    border-color: color-mix(in srgb, var(--error, #ef4444) 30%, transparent);
    color: var(--error, #b91c1c);
}
.lab-td-banner-released {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.20);
    color: var(--text-primary);
}
[data-theme="dark"] .lab-td-banner-released {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

/* ── Rejection trail timeline (ticket modal) ───────────────────────
   Vertical timeline showing the whole rejected → released → came-back
   → accepted story. Themed via CSS vars with literal fallbacks. */
.lab-td-trail {
    margin: 10px 14px 0;
    padding: 10px 14px 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(15, 23, 42, 0.12));
    background: var(--surface-2, rgba(15, 23, 42, 0.03));
}
.lab-td-trail-head {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted);
    margin-bottom: 10px;
}
.lab-td-trail-head > i { width: 14px; height: 14px; }
.lab-td-trail-list { list-style: none; margin: 0; padding: 0; }
.lab-td-trail-item {
    position: relative;
    display: flex; gap: 10px;
    padding: 0 0 12px 0;
}
/* vertical connector between consecutive dots */
.lab-td-trail-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 11px; top: 24px; bottom: -2px;
    width: 2px;
    background: var(--border-color, rgba(15, 23, 42, 0.15));
}
.lab-td-trail-dot {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface, #fff);
    border: 2px solid var(--border-color, rgba(15, 23, 42, 0.25));
    color: var(--text-secondary);
    z-index: 1;
}
.lab-td-trail-dot > i { width: 13px; height: 13px; }
.lab-td-trail-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.lab-td-trail-row1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lab-td-trail-row1 strong { font-size: 13px; }
.lab-td-trail-when { font-size: 11px; color: var(--text-muted); }
.lab-td-trail-detail { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.lab-td-trail-reason { font-weight: 600; margin-right: 6px; }
.lab-td-trail-who { font-size: 11px; color: var(--text-muted); font-style: italic; }

/* per-event dot accent colours */
.lab-td-trail-rej .lab-td-trail-dot { border-color: var(--error,   #ef4444); color: var(--error,   #ef4444); }
.lab-td-trail-rel .lab-td-trail-dot { border-color: #64748b;                  color: #475569; }
.lab-td-trail-acc .lab-td-trail-dot { border-color: var(--success, #16a34a); color: var(--success, #16a34a); }
.lab-td-trail-rev .lab-td-trail-dot { border-color: var(--info,    #0ea5e9); color: var(--info,    #0ea5e9); }
.lab-td-trail-clr .lab-td-trail-dot { border-color: var(--border-color, #94a3b8); color: var(--text-muted); }
[data-theme="dark"] .lab-td-trail-rel .lab-td-trail-dot { border-color: #94a3b8; color: #cbd5e1; }

.lab-td-grid {
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.lab-td-row {
    display: flex; align-items: baseline; gap: 10px;
}
.lab-td-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 0 0 90px;
}
.lab-td-val {
    font-size: 13px;
    color: var(--text-primary);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lab-td-mono { font-family: 'Roboto Mono', 'Consolas', monospace; }

/* Action row */
.lab-td-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-primary);
    background: var(--surface-inset, var(--bg-secondary));
}
.lab-td-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--surface-elevated, var(--bg-primary, #ffffff));
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.lab-td-btn:hover:not(:disabled) {
    /* Tinted hover bg with explicit primary text colour so the label
       always reads. --hover-bg on some themes was indistinguishable
       from the at-rest --text-primary, making the button look blank
       on hover. */
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 14%, var(--surface-elevated, #ffffff));
    color: var(--text-primary) !important;
    border-color: color-mix(in srgb, var(--accent-primary, #2563eb) 35%, var(--border-primary));
    transform: translateY(-1px);
}
.lab-td-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.lab-td-btn i { width: 14px; height: 14px; }
.lab-td-btn-copy {
    background: var(--accent-primary);
    color: var(--on-accent, #ffffff);
    border-color: var(--accent-primary);
}
.lab-td-btn-copy:hover:not(:disabled) {
    /* Darken accent on hover; keep text white. Was switching to
       --accent-secondary which on some themes lands near the white
       text colour — explicit white plus a darker tint fixes it. */
    background: color-mix(in srgb, var(--accent-primary) 86%, black) !important;
    color: var(--on-accent, #ffffff) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 86%, black) !important;
}
.lab-td-btn-reject {
    background: var(--error, #b91c1c);
    color: #ffffff;
    border-color: var(--error, #b91c1c);
}
.lab-td-btn-reject:hover:not(:disabled) {
    /* Explicit dark-red darker bg + WHITE text. brightness(0.92) was
       reducing the white text to near-pink at certain themes. */
    background: color-mix(in srgb, var(--error, #b91c1c) 86%, black) !important;
    color: #ffffff !important;
    border-color: color-mix(in srgb, var(--error, #b91c1c) 86%, black) !important;
}
.lab-td-btn-release {
    background: var(--text-primary, #0f172a);
    color: var(--bg-primary, #ffffff);
    border-color: var(--text-primary, #0f172a);
}
.lab-td-btn-release:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text-primary, #0f172a) 86%, white) !important;
    color: var(--bg-primary, #ffffff) !important;
    border-color: color-mix(in srgb, var(--text-primary, #0f172a) 86%, white) !important;
}
[data-theme="dark"] .lab-td-btn-release {
    background: #ffffff;
    color: #0f172a;
    border-color: #ffffff;
}
.lab-td-btn-clear {
    padding: 8px 10px;
    color: var(--text-muted);
}
.lab-td-btn-clear:hover:not(:disabled) {
    color: var(--text-primary);
}
.lab-td-btn-secondary {
    background: var(--surface-inset, var(--bg-secondary));
    color: var(--text-secondary);
}

.lab-td-reject-form {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-primary);
    background: var(--error-light, rgba(239, 68, 68, 0.05));
    display: flex; flex-direction: column; gap: 8px;
}
.lab-td-reject-form label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--error, #b91c1c);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lab-td-reject-form textarea {
    padding: 9px 11px;
    border: 1.5px solid color-mix(in srgb, var(--error, #ef4444) 35%, transparent);
    border-radius: 8px;
    background: var(--surface-elevated, var(--bg-primary, #ffffff));
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 56px;
}
.lab-td-reject-form textarea:focus {
    outline: none;
    border-color: var(--error, #b91c1c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error, #ef4444) 18%, transparent);
}
.lab-td-reject-actions {
    display: flex; justify-content: flex-end; gap: 8px;
}

/* Inline explanation shown when the Reject button is hidden because
   the ticket doesn't meet the rejection rules (no LabRequired, already
   weighed in, or already weighed out). Muted neutral tone so it reads
   as guidance, not an error. */
.lab-td-reject-blocked {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0 14px 14px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: color-mix(in srgb, var(--text-secondary, #6b7280) 8%, transparent);
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.45;
}
.lab-td-reject-blocked > i {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--text-secondary);
}
/* Disabled "Reject Unavailable" placeholder — neutered visual so it
   reads as informational rather than dangerous. */
.lab-td-btn-reject[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

/* ── Rejection reason dropdown inside the reject form ────────────── */
.lab-td-reject-select {
    padding: 8px 11px;
    border: 1.5px solid color-mix(in srgb, var(--error, #ef4444) 35%, transparent);
    border-radius: 8px;
    background: var(--surface-elevated, var(--bg-primary, #ffffff));
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
}

/* ── Outcome decision block (Lab.Admin only, after a rejection) ──── */
.lab-td-outcome {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border-primary);
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 6%, transparent);
    display: flex; flex-direction: column; gap: 8px;
}
.lab-td-outcome label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent-primary);
}
.lab-td-outcome textarea {
    padding: 8px 11px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--surface-elevated, var(--bg-primary, #ffffff));
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 48px;
}
.lab-td-outcome-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.lab-td-outcome-stamped {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 10px 14px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success, #22c55e) 30%, transparent);
    font-size: 12.5px;
}
.lab-td-outcome-stamped > i {
    width: 18px; height: 18px;
    flex: 0 0 auto;
    color: var(--success, #15803d);
}
.lab-td-outcome-stamped strong { color: var(--text-primary); }
.lab-td-outcome-note { margin: 4px 0 0; color: var(--text-secondary); }

/* ── Loading-Point lab capture (lab role) ────────────────────────── */
.lab-td-lab-section {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border-primary);
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 4%, transparent);
}
.lab-td-lab-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--accent-primary);
}
.lab-td-lab-head > i {
    width: 16px; height: 16px;
}
.lab-td-lab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.lab-td-flag-warn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #f59e0b 18%, transparent);
    color: #b45309;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.lab-td-flag-warn > i { width: 13px; height: 13px; }
.lab-td-fm-note {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 8%, transparent);
    color: var(--text-secondary);
    font-size: 12px;
    display: flex; gap: 6px; align-items: flex-start;
}
.lab-td-fm-note > i { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }

/* ─────────────────────────────────────────────────────────────────────
   SfDialog-based unified truck-info / lab capture modal
   Lives above the top bar (Syncfusion handles the z-index stack).
   Two-column body: meta + silo + actions on the left, full lab
   capture grid on the right.
   ───────────────────────────────────────────────────────────────────── */

.lab-td-sfdialog.e-dialog {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    /* Bigger by default, but never wider than the viewport. */
    width: min(1240px, 96vw) !important;
    max-width: 96vw !important;
}
.lab-td-sfdialog .e-dlg-content {
    padding: 0 !important;
    background: var(--bg-primary, #ffffff);
}

.lab-td-shell {
    display: flex;
    flex-direction: column;
    max-height: min(86vh, 900px);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary);
}

/* Status border accents on the dialog frame for at-a-glance state */
.lab-td-sfdialog.ta-act-truck-rejected .e-dialog { border-top: 3px solid var(--error, #ef4444); }
.lab-td-sfdialog.ta-act-truck-released .e-dialog { border-top: 3px solid var(--text-primary, #0f172a); }
.lab-td-sfdialog.ta-act-truck-flagged  .e-dialog { border-top: 3px solid #eab308; }
.lab-td-sfdialog.ta-act-truck-graded   .e-dialog { border-top: 3px solid var(--success, #22c55e); }

/* Header bar */
.lab-td-sfdialog .lab-td-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary, #f8fafc);
}
.lab-td-sfdialog .lab-td-mark {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--accent-primary, #2563eb);
    color: var(--on-accent, #ffffff);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.lab-td-sfdialog .lab-td-mark > i { width: 22px; height: 22px; }
.lab-td-sfdialog .lab-td-titles { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.lab-td-sfdialog .lab-td-titles h3 {
    margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary);
}
.lab-td-sfdialog .lab-td-tn { color: var(--accent-primary); font-family: ui-monospace, "SF Mono", monospace; }
.lab-td-sfdialog .lab-td-sub { font-size: 12.5px; color: var(--text-secondary); }

/* Print bar in header */
.lab-td-print-bar {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
.lab-td-print-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--surface-elevated, #ffffff);
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease;
}
.lab-td-print-btn:hover {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    transform: translateY(-1px);
}
.lab-td-print-btn > i { width: 14px; height: 14px; }

.lab-td-sfdialog .lab-td-close {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--surface-elevated, #ffffff);
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}
.lab-td-sfdialog .lab-td-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.lab-td-sfdialog .lab-td-close > i { width: 16px; height: 16px; }

/* Banner sits below header */
.lab-td-sfdialog .lab-td-banner-flagged {
    background: color-mix(in srgb, #eab308 12%, transparent);
    border: 1px solid color-mix(in srgb, #eab308 38%, transparent);
    color: #92400e;
    margin: 10px 14px 0;
    display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px;
}

/* Two-column body */
.lab-td-body {
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) 2fr;
    gap: 0;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}
.lab-td-col-left {
    border-right: 1px solid var(--border-primary);
    padding: 14px;
    overflow-y: auto;
    background: var(--bg-secondary, #f8fafc);
}
.lab-td-col-right {
    padding: 16px 18px;
    overflow-y: auto;
}

/* Silo origin readout */
.lab-td-silo-readout {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--surface-elevated, #ffffff);
    border: 1px solid var(--border-primary);
}
.lab-td-silo-head {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 8px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.lab-td-silo-head > i { width: 14px; height: 14px; }
.lab-td-silo-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; }
.lab-td-silo-row > span { color: var(--text-secondary); }
.lab-td-silo-row > strong { color: var(--text-primary); text-align: right; }

/* =============================================================================
   Lab capture column — rebuilt for clarity and visual polish. Every test
   is a card with a clear label, a roomy input, and the contract spec
   shown as a coloured pill underneath. The whole right column reads
   like a structured lab worksheet, not a flat form.
   ============================================================================= */
.lab-td-col-right {
    background: linear-gradient(180deg,
        var(--bg-primary, #ffffff) 0%,
        color-mix(in srgb, var(--accent-primary, #2563eb) 2%, var(--bg-primary, #ffffff)) 100%);
}

/* Section heading — bigger, with an underline accent so it reads as a
   real section title rather than inline label text. */
.lab-td-col-right .lab-td-lab-head {
    background: transparent;
    padding: 0 0 14px;
    margin: 0 0 18px;
    border-bottom: 2px solid color-mix(in srgb, var(--accent-primary, #2563eb) 25%, transparent);
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-primary);
    letter-spacing: 0.2px;
    text-transform: none;
    display: flex; align-items: center; gap: 10px;
}
.lab-td-col-right .lab-td-lab-head > i {
    width: 20px; height: 20px;
    padding: 6px;
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 14%, transparent);
    border-radius: 8px;
    box-sizing: content-box;
}

.lab-td-lab-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    text-align: center;
}
.lab-td-lab-empty > i { width: 40px; height: 40px; margin-bottom: 14px; opacity: 0.5; }
.lab-td-lab-empty > p { margin: 0; font-size: 13.5px; max-width: 340px; line-height: 1.5; }

/* ── Majesty | Loading-Point pair grid (FM + Moisture, seed trucks) ──
   Uses an accent-tinted card so it reads as a "this matters more"
   section vs the regular tests below. */
.lab-td-pair-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 22px;
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-primary, #2563eb) 6%, transparent) 0%,
        color-mix(in srgb, var(--accent-primary, #2563eb) 3%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--accent-primary, #2563eb) 22%, transparent);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* Each card in the pair-grid + tests-grid */
.lab-td-pair,
.lab-td-test {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--surface-elevated, #ffffff);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.lab-td-pair:hover,
.lab-td-test:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--border-primary));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.lab-td-pair:focus-within,
.lab-td-test:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}

/* The Loading-Point variant uses a softer background so the eye lands
   on the Majesty value first. */
.lab-td-pair.lab-td-pair-lp {
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 4%, var(--surface-elevated, #ffffff));
    border-style: dashed;
    border-color: color-mix(in srgb, var(--accent-primary, #2563eb) 32%, transparent);
}

.lab-td-pair-label,
.lab-td-test-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.2;
    display: flex; align-items: center; gap: 4px;
}

/* Input row — big, readable input + unit suffix */
.lab-td-pair-input {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--bg-primary, #ffffff);
    border: 1.5px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.lab-td-pair-input:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}
.lab-td-pair-input input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    min-width: 0;
}
.lab-td-pair-input input:focus { outline: none; }

/* Unit suffix sits inside the input border on the right */
.lab-td-unit {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px;
    min-width: 32px;
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 8%, transparent);
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 13px;
    border-left: 1px solid var(--border-primary);
}

/* Spec range pill — small but clearly visible. Green when in spec
   (default), red when out (handled by .lab-td-spec-out override). */
.lab-td-spec {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary, #6b7280) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-secondary, #6b7280) 18%, transparent);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    align-self: flex-start;
    white-space: nowrap;
}
.lab-td-spec::before {
    content: "Spec";
    font-size: 9.5px;
    font-weight: 800;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    background: color-mix(in srgb, var(--accent-primary, #2563eb) 14%, transparent);
    border-radius: 4px;
    margin-right: 2px;
}
/* When the pair-LP card has no spec to enforce (it's just a reference),
   render the hint text neutrally instead of as a labelled pill. */
.lab-td-pair-lp .lab-td-spec {
    color: var(--text-secondary);
    background: transparent;
    border-color: transparent;
    padding: 0;
    font-weight: 500;
}
.lab-td-pair-lp .lab-td-spec::before { content: ""; padding: 0; margin: 0; background: transparent; }

/* ── Per-test inputs grid ─────────────────────────────────────────── */
.lab-td-tests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.lab-td-test-wide { grid-column: span 2; }
.lab-td-test-input {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--border-primary);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.lab-td-test-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}

/* Save button row at bottom of right column */
.lab-td-lab-actions {
    display: flex; justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
}
.lab-td-btn-primary {
    background: var(--accent-primary) !important;
    color: var(--on-accent, #ffffff) !important;
    border-color: var(--accent-primary) !important;
}
.lab-td-btn-primary:hover:not(:disabled) {
    /* Darker accent on hover with EXPLICIT white text. Was relying on
       the .lab-td-btn-primary base rule to keep the text colour, but
       :hover comes later in the cascade so the text colour can leak
       to whatever .lab-td-btn:hover ended up setting. !important +
       explicit white pins it down. */
    background: color-mix(in srgb, var(--accent-primary) 86%, black) !important;
    color: var(--on-accent, #ffffff) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 86%, black) !important;
    transform: translateY(-1px);
}
.lab-td-btn-primary:hover:not(:disabled) i { color: var(--on-accent, #ffffff) !important; }

/* Responsive: stack body columns under 980px */
@media (max-width: 980px) {
    .lab-td-body { grid-template-columns: 1fr; }
    .lab-td-col-left { border-right: none; border-bottom: 1px solid var(--border-primary); }
    .lab-td-pair-grid { grid-template-columns: 1fr; }
    .lab-td-print-bar > .lab-td-print-btn > span { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   Lab dialog v2 — tabs, panels, NIR accordion, FM choice, audit log
   ════════════════════════════════════════════════════════════════ */

/* ── Tab strip ─────────────────────────────────────────────────── */
.lab-td-tabs {
    display: flex; gap: 4px;
    padding: 8px 14px 0;
    border-bottom: 1px solid var(--border-primary, rgba(15,23,42,0.12));
    flex-wrap: wrap;
}
.lab-td-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    border: none; background: transparent;
    border-bottom: 2.5px solid transparent;
    color: var(--text-secondary);
    font-size: 13px; font-weight: 600;
    cursor: pointer; border-radius: 8px 8px 0 0;
    transition: background .12s, color .12s, border-color .12s;
}
.lab-td-tab > i { width: 15px; height: 15px; }
.lab-td-tab:hover { background: var(--bg-secondary, rgba(15,23,42,0.04)); color: var(--text-primary); }
.lab-td-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}
.lab-td-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; font-size: 11px; font-weight: 700;
    background: var(--accent-primary); color: var(--on-accent, #fff);
}

/* ── Panels (history / audit) ──────────────────────────────────── */
.lab-td-panel {
    padding: 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.lab-td-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px 20px; text-align: center;
    color: var(--text-muted);
}
.lab-td-empty > i { width: 34px; height: 34px; opacity: .6; }
.lab-td-empty > span { font-size: 13px; }

/* ── Trail tone: info (audit non-rejection events) ─────────────── */
.lab-td-trail-info .lab-td-trail-dot { border-color: var(--info, #0ea5e9); color: var(--info, #0ea5e9); }

/* ── Trail footer + edit affordances ───────────────────────────── */
.lab-td-trail-foot { display: flex; align-items: center; gap: 12px; margin-top: 3px; flex-wrap: wrap; }
.lab-td-trail-editbtn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--border-primary); background: transparent;
    color: var(--accent-primary); cursor: pointer;
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
}
.lab-td-trail-editbtn > i { width: 12px; height: 12px; }
.lab-td-trail-editbtn:hover { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); }
.lab-td-trail-edited {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    font-size: 11px; font-style: italic; color: var(--text-muted); margin-top: 2px;
}
.lab-td-trail-edited > i { width: 11px; height: 11px; }
.lab-td-trail-orig { font-style: normal; opacity: .85; }
.lab-td-trail-edit { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.lab-td-trail-edit-input {
    width: 100%; resize: vertical; min-height: 48px;
    border: 1px solid var(--border-primary); border-radius: 8px;
    padding: 7px 9px; font-size: 13px;
    background: var(--bg-primary); color: var(--text-primary);
}
.lab-td-trail-edit-actions { display: flex; gap: 6px; }

/* ── NIR collapsed "done" chip (accordion header) ──────────────── */
.lab-td-nir-done {
    display: flex; align-items: center; gap: 9px; width: 100%;
    margin: 0 0 12px;
    padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left;
    background: var(--success-light, rgba(34,197,94,0.10));
    border: 1px solid color-mix(in srgb, var(--success, #22c55e) 35%, transparent);
    color: var(--success-strong, #15803d);
    font-size: 13px; font-weight: 600;
}
.lab-td-nir-done > i { width: 18px; height: 18px; flex: 0 0 auto; }
.lab-td-nir-done-txt { flex: 1 1 auto; display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.lab-td-nir-done-chev { width: 15px; height: 15px; opacity: .7; }
.lab-td-nir-done:hover { background: color-mix(in srgb, var(--success, #22c55e) 16%, transparent); }
[data-theme="dark"] .lab-td-nir-done { color: #4ade80; }

/* ── FM source choice (LP < Majesty) ───────────────────────────── */
.lab-td-fmchoice {
    grid-column: 1 / -1;
    margin-top: 4px; padding: 11px 12px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--accent-primary) 45%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
    display: flex; flex-direction: column; gap: 9px;
}
.lab-td-fmchoice-head { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-primary); line-height: 1.4; }
.lab-td-fmchoice-head > i { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--accent-primary); }
.lab-td-fmchoice-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-td-choice {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; border-radius: 8px; cursor: pointer;
    border: 1.5px solid var(--border-primary); background: var(--bg-primary);
    color: var(--text-primary); font-size: 12.5px; font-weight: 600;
    flex: 1 1 auto; justify-content: center; min-width: 160px;
}
.lab-td-choice > i { width: 15px; height: 15px; }
.lab-td-choice:hover { border-color: var(--accent-primary); }
.lab-td-choice.active {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
}
.lab-td-fmchoice-hint { font-size: 11px; color: var(--text-muted); }

/* ── Per-field FM-source choice ─────────────────────────────────
   The grader now picks which FM the system should use directly on
   each FM field. The picked field lights up with the accent border
   + a soft tinted background; the other goes muted so it's obvious
   at a glance which value is live. */
.lab-td-pair.lab-td-fm-sel {
    border-color: var(--accent-primary) !important;
    background: color-mix(in srgb, var(--accent-primary) 9%, var(--surface-elevated, #ffffff)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 22%, transparent), 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.lab-td-pair.lab-td-fm-dim {
    opacity: 0.45;
    filter: saturate(0.4);
}
.lab-td-pair.lab-td-fm-dim:hover { opacity: 0.65; filter: saturate(0.7); }

.lab-td-fm-pick {
    appearance: none;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    border-radius: 8px; cursor: pointer;
    border: 1.5px solid var(--border-secondary);
    background: var(--bg-primary, #ffffff);
    color: var(--text-secondary);
    font-size: 12px; font-weight: 600;
    transition: all .15s ease;
    margin-top: 2px;
    width: fit-content;
}
.lab-td-fm-pick > i { width: 14px; height: 14px; flex: 0 0 auto; }
.lab-td-fm-pick:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 4%, var(--bg-primary, #ffffff));
}
.lab-td-fm-pick-active,
.lab-td-fm-pick-active:hover {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--on-accent, #ffffff);
}

/* "Pick which FM" prompt — full-width hint that drops in under
   the FM pair while no choice has been made yet. */
.lab-td-fm-needspick {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px dashed color-mix(in srgb, var(--warning, #FFB01C) 55%, transparent);
    background: color-mix(in srgb, var(--warning, #FFB01C) 9%, transparent);
    color: var(--text-primary);
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 12.5px; line-height: 1.4;
}
.lab-td-fm-needspick > i {
    width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px;
    color: var(--warning, #FFB01C);
}

/* ── Second-factor PIN confirm dialog ──────────────────────────── */
.lab-pin-sfdialog.e-dialog { border-radius: 14px !important; overflow: hidden; }
.lab-pin-sfdialog .e-dlg-content { padding: 0 !important; }
.lab-pin-shell {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary);
}
.lab-pin-head { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.lab-pin-mark {
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
}
.lab-pin-mark > i { width: 22px; height: 22px; }
.lab-pin-titles h3 { margin: 0; font-size: 16px; }
.lab-pin-sub { font-size: 12px; color: var(--text-secondary); }
.lab-pin-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-muted); margin-top: 4px;
}
.lab-pin-select, .lab-pin-input {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; border-radius: 9px;
    border: 1.5px solid var(--border-primary, rgba(15,23,42,0.18));
    background: var(--bg-primary, #fff); color: var(--text-primary);
    font-size: 15px;
}
.lab-pin-input {
    letter-spacing: 4px;
    /* Mask the PIN like a password field WITHOUT using type=password — that
       keeps the browser's password manager out of it entirely (no autofill). */
    -webkit-text-security: disc;
    text-security: disc;
}
.lab-pin-select:focus, .lab-pin-input:focus {
    outline: none; border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}
.lab-pin-error {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--error, #b91c1c);
    background: var(--error-light, rgba(239,68,68,0.10));
    border: 1px solid color-mix(in srgb, var(--error, #ef4444) 30%, transparent);
    border-radius: 8px; padding: 7px 10px;
}
.lab-pin-error > i { width: 15px; height: 15px; flex: 0 0 auto; }
.lab-pin-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
@media (max-width: 640px) {
    .lab-pin-sfdialog.e-dialog { width: 94vw !important; max-width: 94vw !important; }
    .lab-pin-actions { flex-direction: column-reverse; }
    .lab-pin-actions > .lab-td-btn { width: 100%; justify-content: center; }
}

/* ── Small / ghost button variants used in panels ──────────────── */
.lab-td-btn-sm { padding: 5px 10px !important; font-size: 12px !important; }
.lab-td-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
}
.lab-td-btn-ghost:hover:not(:disabled) {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ── Phone: full-screen dialog, tighter chrome ─────────────────── */
@media (max-width: 640px) {
    .lab-td-sfdialog.e-dialog {
        width: 100vw !important; max-width: 100vw !important;
        height: 100% !important; max-height: 100% !important;
        border-radius: 0 !important;
    }
    .lab-td-shell { max-height: 100vh; height: 100%; }
    .lab-td-head { padding: 10px 12px; }
    .lab-td-print-bar { gap: 4px; }
    .lab-td-tabs { padding: 6px 8px 0; }
    .lab-td-tab { padding: 8px 10px; font-size: 12.5px; }
    .lab-td-tab > span { font-size: 12px; }
    .lab-td-panel { padding: 12px; }
    .lab-td-choice { min-width: 0; width: 100%; }
}

/* ── Silo picker button inside Silo Origin readout ─────────────────── */
.lab-td-silo-head {
    /* Override default flex so the picker button sits on the right */
    justify-content: flex-start;
    gap: 8px;
}
.lab-td-silo-pick {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.lab-td-silo-pick:hover {
    background: var(--accent-primary);
    color: var(--on-accent, #ffffff);
    transform: translateY(-1px);
}
.lab-td-silo-pick > i { width: 12px; height: 12px; }

/* ── OUT-OF-SPEC highlighting ──────────────────────────────────────────
   Strong, unmissable: red border, red-tinted background, red text,
   shake-on-render animation, and a triangle-alert icon in the label.
   The CSS lives at the wrapper level (.lab-td-out) so we can decorate
   labels, inputs, and the spec hint with one class. */
/* OUT-OF-SPEC styling — the whole card switches to red, with a
   strong border, red-tinted background, and an alert icon next to
   the label that pulses. Replaces the green spec pill with a red
   "OUT" pill so the contrast against a healthy field is obvious. */
.lab-td-pair.lab-td-out,
.lab-td-test.lab-td-out {
    background: color-mix(in srgb, var(--error, #ef4444) 7%, var(--surface-elevated, #ffffff)) !important;
    border-color: var(--error, #ef4444) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--error, #ef4444) 18%, transparent),
        0 0 16px color-mix(in srgb, var(--error, #ef4444) 22%, transparent) !important;
}
.lab-td-out > .lab-td-pair-label,
.lab-td-out > .lab-td-test-label {
    color: var(--error, #b91c1c) !important;
    font-weight: 800;
}
.lab-td-out .lab-td-out-icon {
    width: 14px; height: 14px;
    color: var(--error, #b91c1c);
    margin-left: 4px;
    animation: lab-td-pulse 1.4s ease-in-out infinite;
}
.lab-td-out .lab-td-pair-input {
    border-color: var(--error, #ef4444) !important;
    background: color-mix(in srgb, var(--error, #ef4444) 5%, var(--bg-primary, #ffffff)) !important;
}
.lab-td-out .lab-td-pair-input input {
    color: var(--error, #b91c1c) !important;
    font-weight: 800;
}
.lab-td-out .lab-td-pair-input .lab-td-unit {
    background: color-mix(in srgb, var(--error, #ef4444) 14%, transparent);
    color: var(--error, #b91c1c);
    border-left-color: color-mix(in srgb, var(--error, #ef4444) 30%, transparent);
}
.lab-td-out .lab-td-test-input {
    border-color: var(--error, #ef4444) !important;
    background: color-mix(in srgb, var(--error, #ef4444) 5%, var(--bg-primary, #ffffff)) !important;
    color: var(--error, #b91c1c) !important;
    font-weight: 800;
}
.lab-td-spec-out {
    color: #ffffff !important;
    font-weight: 800;
    background: var(--error, #dc2626) !important;
    border-color: var(--error, #b91c1c) !important;
    padding: 3px 9px;
    border-radius: 6px;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}
/* Suppress the "Spec" prefix when the value is OUT of spec — the
   inline <strong>OUT · </strong> in the markup already announces it,
   and a "Spec" label on a red pill reads wrong. */
.lab-td-spec-out::before {
    content: none !important;
}
/* Subtle attention pulse on the icon */
@keyframes lab-td-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* ─────────────────────────────────────────────────────────────────────
   Grading-tab Status pills — one row of CSS per lifecycle stage so the
   colour cue matches the workflow direction (cold → posted, warm →
   on-floor, green → weighed-out).
   ───────────────────────────────────────────────────────────────────── */
.lab-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}
.lab-status-posted {
    background: color-mix(in srgb, #64748b 14%, transparent);
    color: #475569;
    border-color: color-mix(in srgb, #64748b 35%, transparent);
}
.lab-status-checked {
    background: color-mix(in srgb, #0ea5e9 14%, transparent);
    color: #0369a1;
    border-color: color-mix(in srgb, #0ea5e9 38%, transparent);
}
.lab-status-weighed-in {
    background: color-mix(in srgb, #f59e0b 16%, transparent);
    color: #b45309;
    border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}
.lab-status-weighed-out {
    background: color-mix(in srgb, #22c55e 16%, transparent);
    color: #15803d;
    border-color: color-mix(in srgb, #22c55e 40%, transparent);
}
.lab-status-neutral {
    background: color-mix(in srgb, var(--text-secondary, #6b7280) 10%, transparent);
    color: var(--text-secondary, #6b7280);
    border-color: color-mix(in srgb, var(--text-secondary, #6b7280) 30%, transparent);
}

/* =============================================================================
   DARK MODE — lab-status-pill readability.
   Light-theme defaults paint each pill with a dark colour on a near-
   transparent tint, which works on a white toolbar but on the dark
   canvas reads as near-black-on-near-black. The user flagged the
   CHECKED-IN pill (lab-status-checked) as "not bright enough" — same
   problem applies to every lifecycle stage. For each state we:
     • Lift the background to ~26-30% of the accent so the chip silhouette
       is obvious against the dark bg.
     • Use a LIGHT version of the accent for the text (sky-300, amber-300,
       green-300, etc.) which keeps the colour cue while clearing the
       4.5:1 contrast bar.
     • Strengthen the border so the chip doesn't look painted-on.
   ============================================================================= */
[data-theme="dark"] .lab-status-pill {
    /* Slight all-up text weight bump so the pill stays readable at
       11px against the dark page. */
    font-weight: 700;
}

[data-theme="dark"] .lab-status-posted {
    background: color-mix(in srgb, #94a3b8 26%, transparent);
    color: #e2e8f0;
    border-color: color-mix(in srgb, #94a3b8 55%, transparent);
}
[data-theme="dark"] .lab-status-checked {
    background: color-mix(in srgb, #0ea5e9 30%, transparent);
    color: #7dd3fc;
    border-color: color-mix(in srgb, #0ea5e9 60%, transparent);
}
[data-theme="dark"] .lab-status-weighed-in {
    background: color-mix(in srgb, #f59e0b 30%, transparent);
    color: #fcd34d;
    border-color: color-mix(in srgb, #f59e0b 60%, transparent);
}
[data-theme="dark"] .lab-status-weighed-out {
    background: color-mix(in srgb, #22c55e 30%, transparent);
    color: #86efac;
    border-color: color-mix(in srgb, #22c55e 60%, transparent);
}
[data-theme="dark"] .lab-status-neutral {
    background: color-mix(in srgb, #94a3b8 20%, transparent);
    color: #cbd5e1;
    border-color: color-mix(in srgb, #94a3b8 50%, transparent);
}

@media (max-width: 600px) {
    .lab-td-overlay { padding: 12px; }
    .lab-td-grid { padding: 12px; }
    .lab-td-lbl { flex: 0 0 75px; font-size: 10px; }
    .lab-td-val { font-size: 12.5px; }
    .lab-td-actions { padding: 10px 12px 14px; gap: 6px; }
    .lab-td-btn { font-size: 12px; padding: 7px 11px; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  DARK-THEME CONTRAST OVERRIDES for lab-status-pill              ║
   ║                                                                  ║
   ║  Same logic as operators.css: WA-dark / Meta-dark / Spotify     ║
   ║  are dark canvases but don't match the literal `[data-theme=    ║
   ║  "dark"]` selector, so they fell back to the light-mode pill    ║
   ║  rules — dark text on near-transparent tint = invisible.       ║
   ║  Mirror the dark-mode treatment here.                          ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="wa-dark"] .lab-status-pill,
[data-theme="meta-dark"] .lab-status-pill,
[data-theme="spotify"] .lab-status-pill {
    font-weight: 700;
}

[data-theme="wa-dark"] .lab-status-posted,
[data-theme="meta-dark"] .lab-status-posted,
[data-theme="spotify"] .lab-status-posted {
    background: color-mix(in srgb, #94a3b8 26%, transparent);
    color: #e2e8f0;
    border-color: color-mix(in srgb, #94a3b8 55%, transparent);
}
[data-theme="wa-dark"] .lab-status-checked,
[data-theme="meta-dark"] .lab-status-checked,
[data-theme="spotify"] .lab-status-checked {
    background: color-mix(in srgb, #0ea5e9 30%, transparent);
    color: #7dd3fc;
    border-color: color-mix(in srgb, #0ea5e9 60%, transparent);
}
[data-theme="wa-dark"] .lab-status-weighed-in,
[data-theme="meta-dark"] .lab-status-weighed-in,
[data-theme="spotify"] .lab-status-weighed-in {
    background: color-mix(in srgb, #f59e0b 30%, transparent);
    color: #fcd34d;
    border-color: color-mix(in srgb, #f59e0b 60%, transparent);
}
[data-theme="wa-dark"] .lab-status-weighed-out,
[data-theme="meta-dark"] .lab-status-weighed-out,
[data-theme="spotify"] .lab-status-weighed-out {
    background: color-mix(in srgb, #22c55e 30%, transparent);
    color: #86efac;
    border-color: color-mix(in srgb, #22c55e 60%, transparent);
}
[data-theme="wa-dark"] .lab-status-neutral,
[data-theme="meta-dark"] .lab-status-neutral,
[data-theme="spotify"] .lab-status-neutral {
    background: color-mix(in srgb, #94a3b8 20%, transparent);
    color: #cbd5e1;
    border-color: color-mix(in srgb, #94a3b8 50%, transparent);
}

/* ── NIR pre-fill banner (truck-info modal) ─────────────────────────────
   Appears at the top of the lab-capture column when a previously-imported
   NIR sample matches the ticket's Loading Number / Offloading Number.
   Lets the lab operator copy every measured parameter onto the ticket's
   lab fields with one click instead of typing each value off the DA
   screen by hand.
   =================================================================== */

.lab-td-nir-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
    border-left: 4px solid var(--accent-primary);
    border-radius: 8px;
    transition: background 0.2s, border-color 0.2s;
}

.lab-td-nir-banner.lab-td-nir-banner-done {
    background: color-mix(in srgb, #16a34a 8%, var(--surface));
    border-color: color-mix(in srgb, #16a34a 35%, transparent);
    border-left-color: #16a34a;
}

.lab-td-nir-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}

.lab-td-nir-banner-done .lab-td-nir-icon {
    background: color-mix(in srgb, #16a34a 18%, transparent);
    color: #16a34a;
}

.lab-td-nir-icon i,
.lab-td-nir-icon svg {
    width: 18px;
    height: 18px;
}

.lab-td-nir-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lab-td-nir-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.lab-td-nir-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.lab-td-nir-meta strong {
    color: var(--text-primary);
}

.lab-td-nir-meta-udfs {
    margin-top: 2px;
}

.lab-td-nir-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 999px;
    font-size: 11px;
    color: var(--text-muted);
}

.lab-td-nir-chip strong {
    color: var(--text-primary);
    font-weight: 600;
}

.lab-td-nir-results {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.lab-td-nir-result strong {
    color: var(--accent-primary);
}

.lab-td-nir-banner-done .lab-td-nir-result strong {
    color: #16a34a;
}

.lab-td-nir-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}


/* ── NIR-available indicators on /operators ─────────────────────────────
   Shown on the Lab and Grading tabs only — the truck icon gets a pulsing
   flask badge when a previously-imported NIR sample matches the ticket's
   Loading Number / Offloading Number AND lab values haven't been captured
   yet. The "NIR Available" filter pill in the toolbar narrows the grid
   to those rows in one click.
   =================================================================== */

/* Truck icon — when NIR ready, ring it with the accent and gently pulse
   so the lab user spots it from across the room. */
.ta-act-truck-nir {
    position: relative;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 65%, transparent);
    animation: ta-truck-nir-pulse 1.8s ease-in-out infinite;
}

@keyframes ta-truck-nir-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 65%, transparent),
                    0 0 0 0   color-mix(in srgb, var(--accent-primary) 45%, transparent);
    }
    50% {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 65%, transparent),
                    0 0 0 6px color-mix(in srgb, var(--accent-primary) 0%,  transparent);
    }
}

/* Flask badge — top-right corner of the truck button. Solid colour so it
   reads as an "active alert" pip even at small zoom levels. */
.ta-nir-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--on-accent, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface, var(--bg-primary));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.ta-nir-badge i,
.ta-nir-badge svg {
    width: 9px;
    height: 9px;
    stroke-width: 2.5;
}

/* NIR Available pill — header-bar filter toggle. Mirrors the EligibleOnly
   pill's look so the toolbar feels homogeneous. */
.op-nir-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.op-nir-pill:hover:not(:disabled) {
    border-color: var(--accent-primary);
}

.op-nir-pill:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.op-nir-pill i,
.op-nir-pill svg {
    width: 14px;
    height: 14px;
}

.op-nir-on {
    background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-secondary));
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.op-nir-on i,
.op-nir-on svg {
    color: var(--accent-primary);
}

.op-nir-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--accent-primary);
    color: var(--on-accent, #fff);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.op-nir-on .op-nir-count {
    background: var(--surface, var(--bg-primary));
    color: var(--accent-primary);
}

.op-nir-text {
    white-space: nowrap;
}


/* NIR pill — empty (zero-match) state. Stays clickable (surfaces a
   diagnostic toast) but reads as muted so it doesn't compete with a
   live match count for attention. */
.op-nir-empty {
    opacity: 0.7;
}

.op-nir-empty .op-nir-count {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border-primary);
}


/* ── Status filter dropdown (lab-family tabs) ───────────────────────────
   Compact trigger pill + popup list. Sits next to the NIR Available pill
   on Lab / Grading / Rejections. Mirrors the pill visual language so the
   toolbar reads as one coherent control strip.
   =================================================================== */
.op-status-wrap {
    position: relative;
    display: inline-flex;
}

.op-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.op-status-pill:hover {
    border-color: var(--accent-primary);
}
.op-status-pill i,
.op-status-pill svg {
    width: 14px;
    height: 14px;
}
.op-status-chev {
    width: 12px !important;
    height: 12px !important;
    opacity: 0.6;
}
.op-status-on {
    background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-secondary));
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.op-status-text {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Click-outside catcher — transparent, sits under the popup. */
.op-status-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* Popup list */
.op-status-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    min-width: 200px;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface, var(--bg-primary));
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    animation: op-status-pop 0.12s ease-out;
}
@keyframes op-status-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.op-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.op-status-item:hover {
    background: var(--bg-secondary);
}
.op-status-item-active {
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
    font-weight: 600;
}
.op-status-item-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.op-status-item-count {
    flex-shrink: 0;
    min-width: 24px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--border-primary);
}
.op-status-item-active .op-status-item-count {
    background: var(--accent-primary);
    color: var(--on-accent, #fff);
    border-color: var(--accent-primary);
}

/* Colour dot — mirrors the in-grid status pill palette so the menu
   reads at a glance. Uses the same lab-status-* tokens. */
.op-status-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
}
.op-status-dot.lab-status-posted      { background: #64748b; }
.op-status-dot.lab-status-checked     { background: #f59e0b; }
.op-status-dot.lab-status-weighed-in  { background: #3b82f6; }
.op-status-dot.lab-status-weighed-out { background: #8b5cf6; }
.op-status-dot.lab-status-neutral     { background: #94a3b8; }


/* ── Truck icon: Pending (blue) + Out-of-spec (red alert) ───────────────
   Pending  = lab results captured by an operator, awaiting admin sign-off.
   Out-of-spec = a captured value falls outside the product's contract spec;
   a red ⚠ pip rides the truck so a problem load is obvious on the grid
   before it's opened.
   =================================================================== */

/* Blue — lab Pending (captured, not yet verified). */
.ta-act-btn.ta-act-truck.ta-act-truck-pending {
    color: #2563eb;
    background: color-mix(in srgb, #3b82f6 16%, transparent);
}
.ta-act-btn.ta-act-truck.ta-act-truck-pending:hover {
    background: color-mix(in srgb, #3b82f6 26%, transparent);
}

/* Out-of-spec — red alert pip, top-right of the truck button. Pulses
   so it pulls the eye. Sits ABOVE the base lifecycle colour (the truck
   can be blue/green/etc. AND carry the red pip). */
.ta-act-btn.ta-act-truck.ta-act-truck-oos {
    position: relative;
}
.ta-oos-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    animation: ta-oos-pulse 1.6s ease-in-out infinite;
}
.ta-oos-badge i,
.ta-oos-badge svg {
    width: 9px;
    height: 9px;
    stroke-width: 2.6;
}
@keyframes ta-oos-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0.55); }
    60%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Ticket-number cell tint for Pending — blue, matching the truck. */
.ta-col-ticket.ta-tint-pending {
    background: color-mix(in srgb, #3b82f6 16%, transparent);
    box-shadow: inset 4px 0 0 #2563eb;
}
.ta-col-ticket.ta-tint-pending .ta-ticket-link {
    color: #1e3a8a;
    font-weight: 700;
}
[data-theme="dark"] .ta-col-ticket.ta-tint-pending .ta-ticket-link {
    color: #93c5fd;
}


/* ── Farm-name capture (truck-info modal, Silo Origin) ──────────────────
   Shown when the silo origin is the generic "FARM / FARM" placeholder so
   the grader can record the actual farm. Saved to the ticket extension
   on Save Lab Results.
   =================================================================== */
.lab-td-farmname {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-primary);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lab-td-farmname label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.lab-td-farmname label i,
.lab-td-farmname label svg {
    width: 13px;
    height: 13px;
    color: var(--accent-primary);
}
.lab-td-farmname-hint {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}
.lab-td-farmname input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    background: var(--surface, var(--bg-primary));
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
}
.lab-td-farmname input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}