/* GRN variance row highlights */

.mls-grn-missing > td,
.mls-grn-missing > .fi-ta-cell {
    background-color: color-mix(in srgb, var(--danger-50, #fef2f2) 90%, transparent) !important;
}

.dark .mls-grn-missing > td,
.dark .mls-grn-missing > .fi-ta-cell {
    background-color: color-mix(in srgb, var(--danger-500, #ef4444) 16%, transparent) !important;
}

.mls-grn-short > td,
.mls-grn-short > .fi-ta-cell {
    background-color: color-mix(in srgb, var(--warning-50, #fffbeb) 90%, transparent) !important;
}

.dark .mls-grn-short > td,
.dark .mls-grn-short > .fi-ta-cell {
    background-color: color-mix(in srgb, var(--warning-500, #f59e0b) 16%, transparent) !important;
}

.mls-grn-data-issue > td,
.mls-grn-data-issue > .fi-ta-cell {
    background-color: color-mix(in srgb, var(--danger-50, #fef2f2) 75%, var(--warning-50, #fffbeb)) !important;
}

.dark .mls-grn-data-issue > td,
.dark .mls-grn-data-issue > .fi-ta-cell {
    background-color: color-mix(in srgb, var(--danger-500, #ef4444) 12%, var(--warning-500, #f59e0b) 8%) !important;
}

/* Scan / receive camera panel — self-contained so Filament Tailwind purge cannot strip it */

.mls-grn-camera {
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--gray-200, #e5e7eb) 100%, transparent);
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    padding: 0.75rem;
}

.dark .mls-grn-camera {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, #fff 6%, transparent) 0%, transparent 100%);
}

.mls-grn-camera-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.mls-grn-camera-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-950, #030712);
}

.dark .mls-grn-camera-title {
    color: #fff;
}

.mls-grn-camera-help {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
}

.dark .mls-grn-camera-help {
    color: color-mix(in srgb, #fff 55%, transparent);
}

.mls-grn-mode-toggle {
    display: inline-flex;
    border-radius: 0.625rem;
    padding: 0.2rem;
    background: color-mix(in srgb, var(--gray-200, #e5e7eb) 80%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gray-300, #d1d5db) 70%, transparent);
}

.dark .mls-grn-mode-toggle {
    background: color-mix(in srgb, #fff 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
}

.mls-grn-mode-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
    border-radius: 0.5rem !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--gray-600, #4b5563) !important;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.dark .mls-grn-mode-btn {
    color: color-mix(in srgb, #fff 70%, transparent) !important;
}

.mls-grn-mode-btn.is-active {
    background: #fff !important;
    color: var(--gray-950, #030712) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, #000 12%, transparent) !important;
}

.dark .mls-grn-mode-btn.is-active {
    background: color-mix(in srgb, #fff 14%, transparent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.mls-grn-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.mls-grn-action-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    border-radius: 0.5rem !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    border: 1px solid color-mix(in srgb, var(--gray-200, #e5e7eb) 100%, transparent) !important;
    background: #fff !important;
    color: var(--gray-700, #374151) !important;
}

.dark .mls-grn-action-btn {
    border-color: color-mix(in srgb, #fff 12%, transparent) !important;
    background: color-mix(in srgb, #fff 6%, transparent) !important;
    color: color-mix(in srgb, #fff 88%, transparent) !important;
}

.mls-grn-action-btn--primary {
    border-color: transparent !important;
    background: var(--primary-400, #facc15) !important;
    color: var(--gray-950, #030712) !important;
}

.dark .mls-grn-action-btn--primary {
    background: var(--primary-600, #ca8a04) !important;
    color: #fff !important;
}

.mls-grn-camera input[type='file'].mls-grn-file-input,
.mls-grn-file-input {
    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;
}

.mls-grn-status {
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 0.75rem;
}

.mls-grn-status.is-info {
    background: color-mix(in srgb, var(--primary-50, #eff6ff) 90%, transparent);
    color: var(--primary-800, #1e40af);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-200, #bfdbfe) 80%, transparent);
}

.dark .mls-grn-status.is-info {
    background: color-mix(in srgb, var(--primary-500, #3b82f6) 18%, transparent);
    color: color-mix(in srgb, #fff 92%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-400, #60a5fa) 35%, transparent);
}

.mls-grn-status.is-error {
    background: color-mix(in srgb, var(--danger-50, #fef2f2) 90%, transparent);
    color: var(--danger-700, #b91c1c);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-200, #fecaca) 80%, transparent);
}

.dark .mls-grn-status.is-error {
    background: color-mix(in srgb, var(--danger-500, #ef4444) 18%, transparent);
    color: color-mix(in srgb, #fff 92%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-400, #f87171) 35%, transparent);
}

.mls-grn-preview {
    margin-top: 0.75rem;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #000;
}

.mls-grn-preview-frame {
    min-height: 12rem;
    width: 100%;
}

.mls-grn-preview-video {
    min-height: 12rem;
    width: 100%;
    object-fit: cover;
}

.mls-grn-preview-image {
    min-height: 12rem;
    width: 100%;
    object-fit: contain;
}

.mls-grn-candidates {
    margin-top: 0.75rem;
}

.mls-grn-candidates-label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-700, #374151);
}

.dark .mls-grn-candidates-label {
    color: color-mix(in srgb, #fff 75%, transparent);
}

.mls-grn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mls-grn-chip {
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 9999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    transition: filter 120ms ease, transform 120ms ease;
}

.mls-grn-chip:hover {
    filter: brightness(0.97);
}

.mls-grn-chip:active {
    transform: scale(0.98);
}

.mls-grn-chip--ref {
    background: color-mix(in srgb, #dbeafe 92%, #fff);
    color: #1e3a8a;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #93c5fd 80%, transparent);
}

.dark .mls-grn-chip--ref {
    background: color-mix(in srgb, #3b82f6 22%, transparent);
    color: #dbeafe;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #60a5fa 40%, transparent);
}

.mls-grn-chip--lot {
    background: color-mix(in srgb, #fef3c7 92%, #fff);
    color: #92400e;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fcd34d 80%, transparent);
}

.dark .mls-grn-chip--lot {
    background: color-mix(in srgb, #f59e0b 22%, transparent);
    color: #fef3c7;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fbbf24 40%, transparent);
}

.mls-grn-chip--exp {
    background: color-mix(in srgb, #dcfce7 92%, #fff);
    color: #166534;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #86efac 80%, transparent);
}

.dark .mls-grn-chip--exp {
    background: color-mix(in srgb, #22c55e 22%, transparent);
    color: #dcfce7;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #4ade80 40%, transparent);
}

.mls-grn-chip--text {
    background: color-mix(in srgb, #f3f4f6 92%, #fff);
    color: #374151;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #d1d5db 80%, transparent);
}

.dark .mls-grn-chip--text {
    background: color-mix(in srgb, #fff 10%, transparent);
    color: color-mix(in srgb, #fff 85%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 14%, transparent);
}

.mls-grn-visually-hidden {
    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;
}