/* ==========================================================================
   Evie by Clear Code — Light Design System
   Global CSS Custom Properties & Component Classes
   ========================================================================== */

/* ---------- Google Fonts (loaded in App.razor via <link>) ---------- */

:root {
    /* --- Backgrounds & Surfaces --- */
    --evie-bg: #FFFFFF;
    --evie-surface: #FFFFFF;
    --evie-surface-hover: #F5F5F5;
    --evie-card: #FFFFFF;
    --evie-border: #E5E5E5;
    /* --- Brand & Action --- */
    --evie-primary: #C06820;
    --evie-primary-hover: #A85818;
    --evie-primary-muted: rgba(192, 104, 32, 0.12);
    --evie-coral: #DC4A3A;
    --evie-coral-muted: rgba(220, 74, 58, 0.10);
    --evie-verified: #16A34A;
    --evie-verified-muted: #F0FDF4;
    --evie-warning: #D97706;
    --evie-warning-muted: #FFFBEB;
    /* --- Semantic Aliases --- */
    --evie-approved: #16A34A;
    --evie-approved-muted: #F0FDF4;
    --evie-error: #DC2626;
    --evie-error-muted: #FEF2F2;
    /* --- Text --- */
    --evie-text: #1A1A1A;
    --evie-text-muted: #6B6B6B;
    --evie-text-dim: #9CA3AF;
    /* --- Additional --- */
    --evie-link-hover: #A85818;
    --evie-secondary-hover: #F0F0F0;
    --evie-page-gradient-stop: #FAFAFA;
    /* --- Header --- */
    --evie-header-bg: #C06820;
    --evie-header-text: #FFFFFF;
    /* --- Typography --- */
    --font-sans: 'Outfit', sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-mono: 'Geist Mono', monospace;
}

/* ---------- Global Reset & Base ---------- */

*, *::before, *::after {
    box-sizing: border-box;
    border-color: var(--evie-border);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--evie-text);
    background-color: var(--evie-bg);
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
}

h1:focus {
    outline: none;
}

p {
    margin: 0 0 1rem 0;
}

a {
    color: var(--evie-primary);
    text-decoration: none;
    transition: color 150ms;
}

a:hover {
    color: var(--evie-link-hover);
}

/* Number inputs drop their spin buttons everywhere (Eddie, 2026-08-27). They
   steal width from already tight fields, and on a quantity or a unit price a
   stray scroll-wheel tick over a focused input is a silent value change on a
   financial line — the keyboard is the intended way to adjust these. The field
   stays type=number, so the numeric keypad and validation are unchanged.
   (Order Entry's line table had this scoped to itself; now it is the default.) */

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

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

:focus-visible {
    outline: 2px solid var(--evie-primary);
    outline-offset: 2px;
}

/* ---------- Page Background ---------- */

.evie-page-bg {
    background-color: var(--evie-bg);
    min-height: 100vh;
}

/* ---------- Utility Classes ---------- */

.evie-surface {
    background-color: var(--evie-surface);
    border: 1px solid var(--evie-border);
    border-radius: 0.75rem;
}

.evie-section-title {
    font-weight: 600;
    color: var(--evie-text);
}

.evie-subtle {
    color: var(--evie-text-muted);
}

.font-mono {
    font-family: var(--font-mono);
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms;
    text-decoration: none;
}

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

.btn-primary {
    background-color: var(--evie-primary);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--evie-primary-hover);
}

.btn-secondary {
    background-color: var(--evie-surface-hover);
    color: var(--evie-text);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--evie-secondary-hover);
}

.btn-outline {
    background-color: transparent;
    color: var(--evie-text-muted);
    border: 1px solid var(--evie-border);
}

.btn-outline:hover:not(:disabled) {
    background-color: var(--evie-surface);
    color: var(--evie-text);
}

.btn-destructive {
    background-color: transparent;
    color: var(--evie-coral);
    border: 1px solid var(--evie-coral-muted);
}

.btn-destructive:hover:not(:disabled) {
    background-color: var(--evie-coral-muted);
}

/* ---------- Form Inputs ---------- */

.input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--evie-border);
    border-radius: 0.5rem;
    background-color: var(--evie-card);
    color: var(--evie-text);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    transition: border-color 150ms, box-shadow 150ms;
}

.input::placeholder {
    color: var(--evie-text-dim);
}

.input:focus {
    outline: none;
    border-color: var(--evie-primary);
    box-shadow: 0 0 0 1px var(--evie-primary);
}

.input-compact {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

.input-error {
    border-color: var(--evie-coral);
}

.input-error:focus {
    border-color: var(--evie-coral);
    box-shadow: 0 0 0 1px var(--evie-coral);
}

/* ---------- Labels ---------- */

.label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--evie-text-muted);
    margin-bottom: 0.25rem;
}

.label-compact {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--evie-text-dim);
    margin-bottom: 0.125rem;
}

/* ---------- Badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success {
    background-color: var(--evie-verified-muted);
    color: var(--evie-verified);
}

.badge-warning {
    background-color: var(--evie-warning-muted);
    color: var(--evie-warning);
}

.badge-error {
    background-color: var(--evie-coral-muted);
    color: var(--evie-coral);
}

.badge-info {
    background-color: var(--evie-primary-muted);
    color: var(--evie-primary);
}

.badge-dim {
    background-color: rgba(110, 115, 136, 0.15);
    color: var(--evie-text-dim);
}

/* ---------- Cards ---------- */

.card {
    background-color: var(--evie-card);
    border: 1px solid var(--evie-border);
    border-radius: 0.75rem;
    /*padding: 1.5rem;*/
}

/* ---------- Validation ---------- */

.validation-message {
    color: var(--evie-coral);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.valid.modified:not([type=checkbox]) {
    outline: none;
}

.invalid {
    outline: 1px solid var(--evie-coral);
}

/* ---------- Blazor Error UI ---------- */

#blazor-error-ui {
    background: var(--evie-surface);
    border-top: 2px solid var(--evie-coral);
    color: var(--evie-text);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--evie-coral-muted);
    border: 1px solid var(--evie-coral);
    padding: 1rem;
    border-radius: 0.5rem;
    color: var(--evie-coral);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ---------- Animations ---------- */

@keyframes evie-slide-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* `backwards`, not `both`: forwards-fill keeps this element a *target* of a
   transform animation even after it finishes, and a transform-animated element
   is a containing block for position:fixed descendants even when its current
   transform value is none. That would trap modals/overlays inside this element
   instead of the viewport. `backwards` preserves the entrance (start hidden +
   slide in) but releases the effect once the animation ends — and the end state
   already equals the resting state, so there's no visual snap. */
.animate-evie-slide-up {
    animation: evie-slide-up 350ms ease-out backwards;
}

@keyframes evie-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    /* inline-block is load-bearing: transform-based animation does nothing on a
       default inline span, which left the ◠ glyph frozen on every page except
       intake (whose scoped .upload-spinner happened to set it). */
    display: inline-block;
    animation: evie-spin 1s linear infinite;
}

/* ERP-fetch indicator: the OE match pulse (dot fading in and out) for any label
   whose purpose is getting something from Epicor — calmer than the spinner,
   which stays for local loads and user-triggered submits. */
.erp-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.erp-pulse::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #9CA3AF;
    animation: match-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

/* ---------- Page Titles ---------- */

.page-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--evie-text);
    margin-bottom: 1.5rem;
}

/* ---------- Apryse PDF Viewer ---------- */

.apryse-viewer-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.viewer-page {
    display: flex;
    flex-direction: column;
    /* Fill the content area, not the whole viewport: subtract the 56px sticky
       header and .evie-main's 5.5rem (2rem + 3.5rem) vertical padding. A flat
       100vh here overflows the layout chrome and produces a body-level
       scrollbar; this keeps scrolling inside the viewer's own panes. */
    height: calc(100vh - 56px - 5.5rem);
    overflow: hidden;
    background-color: var(--evie-bg);
}

/* Viewer pages already fill the content area and scroll inside their own panes
   (.viewer-area and .viewer-sidebar). Lock the document itself on these routes
   so sub-pixel rounding of the height calc above can't surface a stray
   html/body scrollbar. :has() scopes this to viewer routes only; every other
   page keeps normal document scrolling. */
html:has(.viewer-page),
body:has(.viewer-page) {
    overflow: hidden;
}

.viewer-header {
    flex-shrink: 0;
    background-color: var(--evie-surface);
    border-bottom: 1px solid var(--evie-border);
    padding: 0.75rem 1rem;
}

.viewer-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.viewer-back-link {
    font-size: 0.875rem;
    color: var(--evie-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.viewer-back-link:hover {
    color: var(--evie-primary);
}

.viewer-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.viewer-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--evie-text);
    margin: 0;
}

.viewer-main {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.viewer-area {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    /* Flex column so flex-sized children (the split viewer's
       .split-viewer-container) get a bounded height and scroll inside their own
       panes. The merged view's .viewer-wrapper is absolutely positioned, so it
       is unaffected. Without this the split panes collapse to content height and
       the PDFs are clipped at the bottom with no scrollbar. */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.viewer-wrapper {
    position: absolute;
    inset: 0;
}

.viewer-sidebar {
    flex-shrink: 0;
    width: 320px;
    height: 100%;
    overflow-y: auto;
    border-left: 1px solid var(--evie-border);
    padding: 1rem;
    background-color: var(--evie-surface);
}

@media (max-width: 1023px) {
    .viewer-sidebar {
        display: none;
    }
}

/* Viewer error state */

.viewer-error-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.viewer-error-content {
    text-align: center;
    max-width: 400px;
}

.viewer-error-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
    color: var(--evie-warning);
}

.viewer-error-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--evie-text);
    margin-bottom: 0.5rem;
}

.viewer-error-message {
    font-size: 0.875rem;
    color: var(--evie-text-muted);
    margin-bottom: 1.5rem;
}

/* Viewer loading state */

.viewer-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    color: var(--evie-text-muted);
    font-size: 0.875rem;
}

.viewer-loading-message {
    color: var(--evie-text-muted);
}

/* ---------- Metadata Panel ---------- */

.metadata-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metadata-panel-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.metadata-panel-fields {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ---------- Editable Field ---------- */

.editable-field {
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--evie-border);
    cursor: default;
}

/* ERP resolve-lookup match note. Shared by Order Entry's Review page and the
   AP package viewer so the match text (size/color) stays consistent. */
.field-note {
    font-size: 0.75rem;
    color: #D97706;
    margin-top: 0.25rem;
}
.field-note.match { color: #059669; }
.field-note.matching {
    color: #6B6B6B;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.field-note.matching::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #9CA3AF;
    animation: match-pulse 1.4s ease-in-out infinite;
}
@keyframes match-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}
.field-note.notfound { color: #DC4A3A; }
/* Worth a second look, not wrong (a guessed customer, a non-default ship-to):
   amber, keeping coral for genuine problems. */
.field-note.warn { color: #D97706; }

/* A note that's also an action ("Differs from customer default: X" takes X),
   like the line price's "Quote $x". Looks like the note; underlines on hover. */
button.field-note-apply {
    display: block;
    font-family: inherit;
    text-align: left;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}
button.field-note-apply:hover:not(:disabled),
button.field-note-apply:focus-visible {
    text-decoration: underline;
}
button.field-note-apply:disabled {
    cursor: default;
    text-decoration: none;
}

/* A field's own "Verify" tick for the warnings raised about it (Review). Sits at
   the right of the field's label row, before the confidence dot; amber while
   there is something to check, muted green once verified. */
.field-verify {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    margin-right: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #D97706;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.field-verify input[type="checkbox"] {
    width: 0.8rem;
    height: 0.8rem;
    margin: 0;
    accent-color: #B45309;
    cursor: pointer;
}
.field-verify.verified { color: #059669; }
.field-verify.verified input[type="checkbox"] { accent-color: #059669; }
.field-verify input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.55; }
/* In a line cell: its own line under the cell's notes. */
.field-verify.compact {
    display: flex;
    margin: 0.2rem 0 0;
    font-size: 0.65rem;
}
.field-note.failed {
    color: #B5443B;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.field-note .retry-btn {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: #C06820;
    background: transparent;
    border: 1px solid #FCCF9A;
    border-radius: 0.375rem;
    padding: 0.125rem 0.5rem;
    cursor: pointer;
}
.field-note .retry-btn:hover { background: #FFF5EE; border-color: #C06820; }
.field-note .retry-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.field-note .stage-tag {
    color: #9CA3AF;
    font-style: italic;
    margin-left: 0.25rem;
    font-weight: 400;
}

.editable-field:last-child {
    border-bottom: none;
}

.editable-field-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--evie-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.125rem;
}

.editable-field-display {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.5rem;
}

.editable-field-value {
    font-size: 0.875rem;
    color: var(--evie-text);
}

.editable-field-pencil {
    opacity: 0;
    font-size: 0.75rem;
    color: var(--evie-text-dim);
    cursor: pointer;
    transition: opacity 150ms;
}

.editable-field:hover .editable-field-pencil {
    opacity: 1;
}

.editable-field-pencil:hover {
    color: var(--evie-primary);
}

.editable-field-confidence-warn {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--evie-warning);
    background-color: var(--evie-warning-muted);
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.editable-field-low-confidence .editable-field-value {
    color: var(--evie-warning);
}

/* Recalculated derived field that doesn't reconcile with the extracted figure.
   Amber to match the Order Entry review highlight; not red (not an error). */
.editable-field-discrepancy {
    background-color: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: 0.375rem;
    padding: 0.125rem 0.375rem;
}

.editable-field-discrepancy .editable-field-value {
    color: #92400E;
}

.editable-field-discrepancy-mark {
    color: #B45309;
    font-size: 0.75rem;
    cursor: help;
}

/* Human-edited-during-review chip: amber pill (muted background per the badge
   rule) — same attention family as the recalculated-discrepancy mark, distinct
   from coral (genuine issues) and the primary orange (interactive accents).
   Hover reveals the AI-extracted original. */
.editable-field-edited-mark {
    color: #B45309;
    background: rgba(180, 83, 9, 0.12);
    border-radius: 999px;
    padding: 0 0.375rem;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: help;
}

.editable-field-edit {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.editable-field-edit .input {
    flex: 1;
    min-width: 0;
}

.editable-field-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    background: transparent;
    color: var(--evie-text-muted);
    transition: background-color 150ms, color 150ms;
}

.editable-field-save:hover {
    background-color: var(--evie-verified-muted);
    color: var(--evie-verified);
}

.editable-field-cancel:hover {
    background-color: var(--evie-coral-muted);
    color: var(--evie-coral);
}

.editable-field-error {
    font-size: 0.75rem;
    color: var(--evie-coral);
    margin-top: 0.125rem;
}

/* ---------- Line Items Table ---------- */

.line-items-section {
    margin-top: 0.5rem;
}

.line-items-header {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--evie-text);
    margin-bottom: 0.5rem;
}

.line-items-table-wrapper {
    overflow-x: auto;
}

.line-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.line-items-table th {
    font-weight: 500;
    color: var(--evie-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.625rem;
    padding: 0.375rem 0.25rem;
    border-bottom: 1px solid var(--evie-border);
    text-align: left;
    white-space: nowrap;
}

.line-items-table td {
    padding: 0.25rem;
    border-bottom: 1px solid var(--evie-border);
    vertical-align: top;
}

.line-items-table tr:nth-child(even) {
    background-color: var(--evie-bg);
}

.line-item-num {
    color: var(--evie-text-dim);
    font-size: 0.6875rem;
}

.text-right {
    text-align: right;
}

/* ---------- Extraction Badge ---------- */

.extraction-badge {
    font-size: 0.75rem;
    color: var(--evie-text-dim);
    line-height: 1.4;
}

.extraction-badge-chain {
    color: var(--evie-text-muted);
}

.extraction-badge-cost {
    color: var(--evie-text-dim);
}

.extraction-badge-reasons {
    margin-top: 0.25rem;
}

.extraction-badge-reason {
    display: block;
    font-size: 0.6875rem;
    color: var(--evie-warning);
}

/* ---------- Attention Banner ---------- */

.attention-banner {
    background-color: var(--evie-warning-muted);
    border: 1px solid var(--evie-warning);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
}

.attention-banner-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--evie-warning);
    display: block;
    margin-bottom: 0.25rem;
}

.attention-banner-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.75rem;
    color: var(--evie-text);
}

.attention-banner-list li {
    margin-bottom: 0.125rem;
}

/* ---------- Viewer Navigation ---------- */

.viewer-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.viewer-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--evie-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-family: var(--font-sans);
}

.viewer-nav-btn:hover {
    background-color: var(--evie-surface-hover);
}

.viewer-nav-btn.disabled {
    color: var(--evie-text-dim);
    cursor: default;
    pointer-events: none;
}

.viewer-nav-position {
    font-size: 0.8125rem;
    color: var(--evie-text-muted);
    white-space: nowrap;
}

/* ---------- Split Viewer ---------- */

.split-viewer {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.split-viewer-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.split-viewer-pane:first-child {
    border-right: 1px solid var(--evie-border);
}

.split-viewer-label {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--evie-text-muted);
    background-color: var(--evie-surface);
    border-bottom: 1px solid var(--evie-border);
}

.split-viewer-content {
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Right-pane per-document tabs (packing slips + PO). Sits where the pane label
   is on the left, so the two panes stay aligned. */
.split-viewer-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    background-color: var(--evie-surface);
    border-bottom: 1px solid var(--evie-border);
    overflow-x: auto;
}

.split-viewer-tab {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--evie-text-muted);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.split-viewer-tab:hover {
    color: var(--evie-text);
}

.split-viewer-tab.active {
    color: var(--evie-primary);
    background-color: var(--evie-bg);
}

/* ---------- Shared Toolbar ---------- */

.shared-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--evie-surface);
    border-bottom: 1px solid var(--evie-border);
}

.shared-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--evie-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: var(--font-sans);
}

.shared-toolbar-btn:hover {
    background-color: var(--evie-surface-hover);
    color: var(--evie-text);
}

.shared-toolbar-btn.active {
    background-color: var(--evie-primary);
    color: white;
}

.shared-toolbar-divider {
    width: 1px;
    height: 1.25rem;
    background-color: var(--evie-border);
    margin: 0 0.25rem;
}

/* ---------- Tabbed Viewer (Mobile) ---------- */

.tabbed-viewer-tabs {
    display: flex;
    border-bottom: 1px solid var(--evie-border);
}

.tabbed-viewer-tab {
    flex: 1;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    background: none;
    color: var(--evie-text-muted);
    border-bottom: 2px solid transparent;
}

.tabbed-viewer-tab.active {
    color: var(--evie-primary);
    font-weight: 600;
    border-bottom-color: var(--evie-primary);
    background-color: var(--evie-surface);
}

/* Responsive: split on desktop, tabs on mobile */
@media (min-width: 1024px) {
    .split-viewer-desktop { display: flex; }
    .tabbed-viewer-mobile { display: none !important; }
}

@media (max-width: 1023px) {
    .split-viewer-desktop { display: none !important; }
    .tabbed-viewer-mobile { display: flex !important; }
}

/* ---------- Package Panel ---------- */

.package-section-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--evie-text-muted);
    margin-bottom: 0.5rem;
}

.packing-slip-card,
.po-card {
    padding-left: 0.625rem;
    background-color: var(--evie-bg);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
}

.packing-slip-card-title,
.po-card-title {
    font-weight: 500;
    color: var(--evie-text);
}

.packing-slip-card-vendor,
.packing-slip-card-date {
    font-size: 0.75rem;
    color: var(--evie-text-muted);
}

/* ERP-link state beside the PO number ("ERP-linked" / "Not found in ERP" / "From ERP"). */
.po-erp-tag {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--evie-text-muted);
    margin-left: 0.375rem;
}

.po-card-line {
    font-size: 0.75rem;
    color: var(--evie-text-muted);
}

.match-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.match-status-complete {
    background-color: var(--evie-verified-muted);
    color: var(--evie-verified);
}

.match-status-partial {
    background-color: var(--evie-warning-muted);
    color: var(--evie-warning);
}

/* Posting period (target ERP GL period for the invoice date) */

.posting-period-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.posting-period-caption {
    font-size: 0.75rem;
    color: var(--evie-text-dim);
}

/* Match Info */

.match-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

.match-info-label {
    color: var(--evie-text-muted);
}

.match-info-reasons {
    margin-top: 0.375rem;
}

.match-info-reason {
    display: block;
    font-size: 0.75rem;
    color: var(--evie-text-dim);
    padding-left: 0.5rem;
}

/* Line Satisfaction */

.line-satisfaction-item {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
}

.line-satisfied {
    color: var(--evie-verified);
}

.line-unsatisfied {
    color: var(--evie-warning);
}

.line-match-ref {
    font-size: 0.75rem;
    color: var(--evie-text-dim);
}

/* An unsatisfied line is resolved in the line-edit modal, so the whole banner is
   the button that opens it. Muted warning ground (never solid) with a left rule,
   matching the Partial badge it explains. */

.line-action-required {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--evie-text);
    background-color: var(--evie-warning-muted);
    border: none;
    border-left: 2px solid var(--evie-warning);
    border-radius: 4px;
    cursor: pointer;
}

.line-action-required:hover {
    filter: brightness(1.15);
}

.line-action-required-icon {
    color: var(--evie-warning);
    line-height: 1.2;
}

.line-action-required strong {
    display: block;
    font-weight: 500;
}

.line-action-required-hint {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--evie-text-dim);
}

.line-satisfaction-item-unsatisfied {
    color: var(--evie-text);
}

/* Each line opens itself in Edit lines. Hover/focus only — the list stays a
   status readout rather than becoming a row of buttons. */

.line-satisfaction-item-clickable {
    cursor: pointer;
    border-radius: 3px;
    margin-left: -0.25rem;
    padding: 0.0625rem 0.25rem;
}

.line-satisfaction-item-clickable:hover {
    background-color: var(--evie-surface-hover);
}

/* Focus ring comes from the global :focus-visible rule. */

.line-unsatisfied-reason {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--evie-warning);
}

/* Workflow Status */

.workflow-stamp-entry {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
}

.workflow-stamp-icon {
    font-size: 0.75rem;
}

.workflow-stamp-label {
    font-weight: 600;
    font-size: 0.75rem;
}

.workflow-verified .workflow-stamp-icon,
.workflow-verified .workflow-stamp-label {
    color: var(--evie-primary);
}

.workflow-approved .workflow-stamp-icon,
.workflow-approved .workflow-stamp-label {
    color: var(--evie-verified);
}

.workflow-entered .workflow-stamp-icon,
.workflow-entered .workflow-stamp-label {
    color: var(--evie-warning);
}

.workflow-stamp-meta {
    font-size: 0.75rem;
    color: var(--evie-text-dim);
}

/* ---------- Workflow Stamp Button ---------- */

.workflow-stamp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-sans);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.1s;
}

.workflow-stamp-btn:hover:not(:disabled) {
    transform: scale(1.02);
}

.workflow-stamp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.workflow-stamp-btn.verify {
    background-color: var(--evie-verified);
    color: white;
}

.workflow-stamp-btn.approve {
    background-color: var(--evie-primary);
    color: white;
}

.workflow-status-label {
    text-align: center;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
}

.workflow-status-label.ready {
    background-color: var(--evie-warning-muted);
    color: var(--evie-warning);
}

.workflow-status-label.entered {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--evie-text-muted);
}

.stamp-error {
    margin-top: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--evie-coral);
    background-color: var(--evie-coral-muted);
    border-radius: 4px;
}

/* ---------- Modal Dialog ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fade-in 0.15s ease-out;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
}

.modal-header {
    padding: 1.25rem 1.25rem 0.75rem;
    font-size: 1.0625rem;
    font-weight: 500;
}

.modal-body {
    padding: 0 1.25rem;
    font-size: 0.875rem;
    color: var(--evie-text-muted);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1.25rem;
}

/* Reprocess modal */

.reprocess-issues {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.reprocess-issue-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.reprocess-issue-label input[type="checkbox"] {
    accent-color: var(--evie-primary);
}

.reprocess-details {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--evie-border);
    border-radius: 4px;
    font-size: 0.8125rem;
    resize: vertical;
    min-height: 3rem;
    font-family: inherit;
}

/* Panel footer actions */

.panel-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--evie-border);
}

.action-btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-sans);
    border: 1px solid var(--evie-border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    color: var(--evie-text);
}

.action-btn-outline:hover {
    background-color: var(--evie-surface-hover);
}

.action-btn-outline.destructive {
    color: var(--evie-coral);
    border-color: var(--evie-coral);
}

.action-btn-outline.destructive:hover {
    background-color: var(--evie-coral-muted);
}

.action-btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- AP Matching Hub ---------- */

.ap-hub-header {
    margin-bottom: 1.5rem;
}

.ap-hub-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ap-hub-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.ap-hub-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--evie-text-dim);
}

.ap-hub-title {
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--evie-text);
    margin-top: 0.25rem;
}

.ap-hub-subtitle {
    font-size: 0.875rem;
    color: var(--evie-text-muted);
    margin-top: 0.25rem;
}

.ap-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .ap-hub-grid {
        grid-template-columns: 1fr;
    }
}

.ap-hub-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    /* Lane-panel background (mockup ap-base-r3), same as the intake lanes. */
    background-color: var(--evie-page-gradient-stop);
    border: 1px solid var(--evie-border);
    border-left-width: 4px;
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--evie-text);
    transition: border-color 150ms, box-shadow 150ms;
    position: relative;
}

.ap-hub-card:hover {
    border-color: var(--evie-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Disabled hub card (e.g. Intake for read-only viewers): dimmed, not clickable,
   no hover affordance. Rendered without an href so it never navigates. */
.ap-hub-card-disabled,
.ap-hub-card-disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--evie-border);
    box-shadow: none;
    pointer-events: none;
}

.ap-hub-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ap-hub-card-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.ap-hub-card-icon.intake {
    background-color: var(--evie-primary-muted);
    color: var(--evie-primary);
}

.ap-hub-card-icon.verification {
    background-color: var(--evie-verified-muted);
    color: var(--evie-verified);
}

.ap-hub-card-icon.approval {
    background-color: var(--evie-primary-muted);
    color: var(--evie-primary);
}

.ap-hub-card-icon.payment {
    background-color: var(--evie-warning-muted);
    color: var(--evie-warning);
}

.ap-hub-card-title {
    font-size: 1.0625rem;
    font-weight: 500;
    margin: 0;
}

.ap-hub-card-count {
    margin-left: auto;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--evie-text-dim);
}

.ap-hub-card-count.has-items {
    color: var(--evie-primary);
}

.ap-hub-card-desc {
    font-size: 0.8125rem;
    color: var(--evie-text-muted);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.ap-hub-card-stats {
    display: flex;
    gap: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--evie-border);
    margin-top: auto;
}

.ap-hub-stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ap-hub-stat-label {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--evie-text-dim);
}

.ap-hub-stat-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--evie-text);
}

.ap-hub-card-arrow {
    position: absolute;
    right: 1.25rem;
    bottom: 1rem;
    font-size: 1.25rem;
    color: var(--evie-text-dim);
}

/* ---------- AP Hub Orphan Queues ---------- */

/* Aging chip strip (mockup ap-base-r3): reuses the intake page's incoming-strip
   and in-chip styles; only the hub-specific bits live here. */
.ap-hub-aging { margin-top: 1.25rem; }
/* Plain at rest; the amber treatment appears on hover as the interaction cue. */
.ap-hub-aging a.in-chip {
    text-decoration: none;
    color: inherit;
    transition: background-color 150ms, border-color 150ms;
}
.ap-hub-aging a.in-chip:hover {
    background-color: var(--evie-warning-muted);
    border-color: var(--evie-warning);
}
.ap-hub-aging .in-chip-open { margin-left: 0.5rem; }
/* A queue aged past 14 days keeps a quiet at-rest signal: orange Open link. */
.ap-hub-aging .in-chip-aged .in-chip-open { color: var(--evie-primary); }

/* Warning attention banner: only rendered when orphans have aged 14+ days, per
   the brand rule that the absence of coral means everything is fine. */
.ap-hub-attention {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--evie-warning-muted);
    border: 1px solid var(--evie-warning);
    border-left-width: 3px;
    border-radius: 0.5rem;
    padding: 0.55rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--evie-text);
    text-decoration: none;
}

.ap-hub-attention-title {
    font-weight: 600;
    color: var(--evie-warning);
    flex-shrink: 0;
}

/* Uppercase Review link, pushed to the banner's right edge. */
.ap-hub-attention-link {
    margin-left: auto;
    font-size: 0.6563rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--evie-primary);
    white-space: nowrap;
}

/* ---------- Orphan Queues Page ---------- */

.orphan-subtitle {
    font-size: 0.8125rem;
    color: var(--evie-text-muted);
    margin-bottom: 1.25rem;
}

.orphan-section {
    margin-bottom: 1.25rem;
}

.orphan-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 0.75rem;
}

/* ---------- AP Matching Workspace ---------- */

.ap-workspace {
    /* Full width, like the Order Entry page (no centered cap). */
    padding: 0 1rem 2rem;
}

/* Stats Bar */

.stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--evie-surface);
    border: 1px solid var(--evie-border);
    border-radius: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    text-decoration: none;
}

.stat-link:hover .stat-value {
    color: var(--evie-primary);
}

.stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--evie-text);
}

.stat-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--evie-text-dim);
}

.stat-divider {
    width: 1px;
    height: 2rem;
    background-color: var(--evie-border);
}

/* Workspace Sections */

.workspace-section {
    margin-bottom: 1.25rem;
}

.workspace-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.workspace-empty-section {
    font-size: 0.8125rem;
    color: var(--evie-text-dim);
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

.workspace-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--evie-text-dim);
    font-size: 0.875rem;
}

.workspace-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--evie-text-muted);
}

/* Filter Tabs */

.filter-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--evie-border);
    margin-bottom: 0.75rem;
    overflow-x: auto;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--evie-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.filter-tab:hover {
    color: var(--evie-text);
}

.filter-tab.active {
    color: var(--evie-primary);
    border-bottom-color: var(--evie-primary);
}

.filter-count {
    font-size: 0.6875rem;
    background-color: var(--evie-bg);
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
}

/* Classified Document Lanes */

.classified-lanes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 1023px) {
    .classified-lanes {
        grid-template-columns: 1fr;
    }
}

.classified-lane {
    min-height: 100px;
}

.lane-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--evie-text-muted);
}

.lane-empty {
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--evie-text-dim);
    background-color: var(--evie-bg);
    border-radius: 6px;
}

/* --- r2 lane restyle (mockup r2-01): all three intake lanes. --- */
.lane-r2 {
    background: var(--evie-page-gradient-stop);
    border: 1px solid var(--evie-border);
    border-radius: 0.75rem;
    padding: 0.7rem;
    min-height: 220px;
}
.lane-r2-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
    padding: 0 0.2rem;
}
/* Mockup header title: smaller and dimmer than the shared .lane-title. */
.lane-r2 .lane-title {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--evie-text-dim);
}
.lane-r2-count { margin-left: auto; font-size: 0.7rem; color: var(--evie-text-dim); }
.lane-r2-chip {
    width: 20px; height: 20px; border-radius: 0.3rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.48rem; font-weight: 600; letter-spacing: 0.03em;
}
.lane-r2-chip-inv { background: var(--evie-primary-muted); color: var(--evie-primary); }
.lane-r2-chip-ps  { background: rgba(46, 139, 87, 0.10); color: var(--evie-verified); }
.lane-r2-chip-po  { background: rgba(59, 91, 219, 0.10); color: #3B5BDB; }
.lane-r2-chip-lg { width: 30px; height: 30px; font-size: 0.55rem; border-radius: 0.4rem; }
.lane-r2-card {
    position: relative; /* anchors the bottom-right card action */
    background: var(--evie-card);
    border: 1px solid var(--evie-border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}
.lane-r2-card:hover { border-color: var(--evie-primary); }
.lane-r2-card-link {
    display: block;
    padding: 0.6rem 0.7rem;
    text-decoration: none;
    color: var(--evie-text);
}
.lane-r2-card-top { display: flex; align-items: center; gap: 0.5rem; }
/* Classification confidence as a dot (mirrors OE Review's conf-dot look). */
.lane-r2-conf {
    display: inline-block;
    width: 0.5rem; height: 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-start;
}
.lane-r2-conf.tag-high { background: var(--evie-verified); }
.lane-r2-conf.tag-mid  { background: var(--evie-warning); }
.lane-r2-conf.tag-low  { background: var(--evie-error); }
.lane-r2-info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.lane-r2-name {
    font-weight: 500; font-size: 0.875rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lane-r2-meta { font-size: 0.72rem; color: var(--evie-text-dim); }
/* Mockup footer: small and dim (the amount inherits the dim color). */
.lane-r2-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0.4rem; font-size: 0.7rem; color: var(--evie-text-dim);
}
.lane-r2-foot-badges { display: flex; gap: 0.375rem; }
/* Card action (e.g. Non-PO "Create package"): overlaid bottom-right so it
   never adds to the card's height. */
.lane-r2-card-action {
    position: absolute;
    right: 0.5rem;
    bottom: 0.4rem;
    margin: 0;
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
}
/* Keep the footer text clear of the overlaid button(s). */
.lane-r2-card:has(.lane-r2-card-action) .lane-r2-foot,
.lane-r2-card:has(.lane-r2-action-slot) .lane-r2-foot { padding-right: 7.5rem; }

/* Split action (AP-2): Create package | ▾ with a small drop-up menu. */
.lane-r2-action-slot {
    position: absolute;
    right: 0.5rem;
    bottom: 0.4rem;
    display: inline-flex;
    z-index: 16; /* menu + its buttons ride above the click-away backdrop */
}
.lane-r2-action-slot .btn { padding: 0.15rem 0.5rem; font-size: 0.68rem; }
.lane-r2-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lane-r2-split-caret {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 1px;
    padding: 0.15rem 0.3rem;
}
.lane-r2-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    min-width: 10.5rem;
    padding: 0.25rem;
    background: var(--evie-card);
    border: 1px solid var(--evie-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 20;
}
.lane-r2-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--evie-text);
    border-radius: 0.35rem;
    cursor: pointer;
}
.lane-r2-menu-item:hover { background: var(--evie-primary-muted); color: var(--evie-primary); }
.menu-backdrop { position: fixed; inset: 0; z-index: 15; }

/* Compile-package builder modal */
.compile-modal-card { max-width: 36rem; width: 92%; }
.compile-sub { margin-bottom: 0.5rem; }
.compile-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; color: var(--evie-text-muted);
    margin-bottom: 0.5rem; cursor: pointer;
}
.compile-section-title {
    font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--evie-text-dim);
    margin: 0.75rem 0 0.35rem;
}
.compile-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.2rem;
    font-size: 0.82rem;
    cursor: pointer;
    border-radius: 0.35rem;
}
.compile-row:hover { background: var(--evie-page-gradient-stop); }
.compile-row-text { min-width: 0; }
.compile-empty { font-size: 0.78rem; padding: 0.2rem; }
.compile-note {
    margin-top: 0.75rem;
    padding: 0.45rem 0.7rem;
    background: var(--evie-warning-muted);
    border: 1px solid var(--evie-warning);
    border-left-width: 3px;
    border-radius: 0.4rem;
    font-size: 0.78rem;
}
.compile-error { margin-top: 0.5rem; color: var(--evie-error); font-size: 0.8rem; }

.lane-r2 .lane-empty { background: var(--evie-card); border: 1px dashed var(--evie-border); }
/* Lane cards that appear in the suggestions rail (mockup r2-01): primary
   border plus a thicker left accent (inset shadow, so no layout shift). */
.lane-r2-card-sug { border-color: var(--evie-primary); box-shadow: inset 3px 0 0 var(--evie-primary); }

/* --- Suggested Packages rail (mockup r2-01), right of the lanes. --- */
.lanes-split { display: flex; gap: 1rem; align-items: flex-start; }
.lanes-split .classified-lanes { flex: 1; min-width: 0; }
.lanes-rail { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.6rem; }
/* Auto-Match: full rail width, top flush with the lanes. */
.sugg-automatch { width: 100%; justify-content: center; }
.sugg-automatch-result { font-size: 0.75rem; color: var(--evie-verified); padding: 0 0.2rem; }
.sugg-automatch-result.error { color: var(--evie-error); }
.sugg-card {
    background: var(--evie-page-gradient-stop);
    border: 1px solid var(--evie-border);
    border-radius: 0.75rem;
    padding: 0.7rem;
}
.sugg-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; padding: 0 0.2rem; }
.sugg-card .lane-title { font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--evie-text-dim); }
.sugg-card .lane-empty { background: var(--evie-card); border: 1px dashed var(--evie-border); }
.sugg-item {
    background: var(--evie-card);
    border: 1px solid var(--evie-border);
    border-radius: 0.5rem;
    padding: 0.55rem 0.6rem;
    margin-bottom: 0.5rem;
}
.sugg-item:last-child { margin-bottom: 0; }
/* Wraps: an INV + PS + PO triple can exceed the rail width. */
.sugg-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; row-gap: 0.25rem; font-size: 0.8rem; font-weight: 500; min-width: 0; }
.sugg-doc {
    color: var(--evie-text);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sugg-doc:hover { color: var(--evie-primary); }
.sugg-plus { color: var(--evie-text-dim); }
.sugg-meta { font-size: 0.72rem; color: var(--evie-text-dim); margin: 0.25rem 0 0.5rem; }
.sugg-error { font-size: 0.72rem; color: var(--evie-error); margin-bottom: 0.4rem; }
.sugg-create { width: 100%; }

@media (max-width: 1023px) {
    /* Lanes are single-column here; the rail stacks below them full-width. */
    .lanes-split { flex-direction: column; }
    .lanes-rail { width: 100%; }
}

/* --- Slim drop bar (mockup r2-02): compacts the shared DropZone into one row.
       Scoped under .ap-workspace so other pages' drop zones are untouched. --- */
.drop-bar-wrap { margin-bottom: 1rem; }
.ap-workspace .drop-bar-wrap .dropzone {
    padding: 0.45rem 1rem;
    border-width: 1.5px;
    border-radius: 0.5rem;
    text-align: left;
}
.ap-workspace .drop-bar-wrap .dropzone-label { flex-direction: row; align-items: center; gap: 0.6rem; }
.ap-workspace .drop-bar-wrap .dropzone-icon {
    width: 1.6rem; height: 1.6rem;
    margin-bottom: 0;
    border: none;
    background: transparent;
}
.ap-workspace .drop-bar-wrap .dropzone-text-primary { font-size: 0.8rem; font-weight: 500; }
.ap-workspace .drop-bar-wrap .dropzone-text-secondary { font-size: 0.75rem; }
.ap-workspace .drop-bar-wrap .dropzone-pills { margin-top: 0; margin-left: auto; flex-wrap: nowrap; }
@media (max-width: 767px) {
    .ap-workspace .drop-bar-wrap .dropzone-pills { display: none; }
}

/* --- Incoming strips (mockup r2-02): duplicate review + not-on-lanes chips. --- */
.incoming-strip { margin-bottom: 1rem; }
.incoming-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; padding: 0 0.2rem; }
.incoming-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--evie-text-dim);
}
.incoming-title-warn { color: var(--evie-warning); }
.incoming-count { font-size: 0.7rem; color: var(--evie-text-dim); }
.incoming-toggle { margin-left: auto; }
.incoming-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.incoming-empty {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; color: var(--evie-text-dim);
    padding: 0.3rem 0.2rem;
}
.in-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--evie-card);
    border: 1px solid var(--evie-border);
    border-radius: 0.5rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.76rem;
}
.in-chip-warn { border-color: var(--evie-warning); background: rgba(217, 119, 6, 0.06); }
.in-chip-fail { border-color: var(--evie-error); background: rgba(220, 38, 38, 0.05); }
.in-chip-text { display: flex; flex-direction: column; min-width: 0; }
.in-chip-name {
    font-weight: 500;
    max-width: 16rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.in-chip-sub { color: var(--evie-text-dim); font-size: 0.68rem; }
.in-chip-actions { display: flex; align-items: center; gap: 0.55rem; margin-left: 0.35rem; }
.lane-r2-chip-doc { background: rgba(107, 107, 107, 0.12); color: var(--evie-text-muted); }

/* Small uppercase link-button used inside chips (OE action-link style). */
.chip-link {
    background: none; border: none; padding: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.6563rem; font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--evie-text-dim);
    white-space: nowrap;
    transition: color 150ms;
}
.chip-link:hover { color: var(--evie-primary); }
.chip-link:disabled { opacity: 0.5; cursor: default; }
.chip-link-danger:hover { color: var(--evie-error); }

/* Expanded duplicate-review panel below the chips. */
.dup-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    font-size: 0.8rem;
    margin-bottom: 0.7rem;
}
.dup-review-label {
    display: block;
    font-size: 0.65rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--evie-text-dim);
    margin-bottom: 0.2rem;
}
/* Duplicate compare modal: wide card, side-by-side document panes (mirrors
   Order Entry's held-duplicate compare, inside the shared modal shell). */
.dup-compare-card { max-width: 1200px; width: 94%; height: 88vh; max-height: 88vh; }
.dup-compare-body { display: flex; gap: 0.75rem; height: 56vh; min-height: 300px; margin-top: 0.25rem; }
.dup-compare-pane {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column;
    border: 1px solid var(--evie-border); border-radius: 0.5rem;
    overflow: hidden;
    background: var(--evie-card);
}
.dup-compare-label {
    padding: 0.45rem 0.65rem;
    font-size: 0.72rem; font-weight: 500;
    color: var(--evie-text-dim);
    border-bottom: 1px solid var(--evie-border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dup-compare-frame { flex: 1 1 auto; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.dup-compare-frame .apryse-viewer-container { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.dup-compare-missing { font-size: 0.8rem; }
.dup-compare-reclass { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: auto; }
.dup-compare-reclass-select { width: 9.5rem; display: inline-block; }

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1rem;
}

/* ---------- Auth Forms (shared across Login / ForgotPassword / ChangePassword / ResetPassword) ---------- */

.auth-title {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 700;
    color: #1C0E04;
    line-height: 1.15;
    margin: 0 0 6px 0;
}

.auth-description {
    font-size: 13px;
    font-weight: 300;
    color: #A08060;
    line-height: 1.5;
    margin: 0 0 36px 0;
}

.auth-error {
    background-color: rgba(220, 74, 58, 0.1);
    color: #DC2626;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.auth-success {
    background-color: rgba(22, 163, 74, 0.1);
    color: #16A34A;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.auth-hint {
    font-size: 0.8125rem;
    color: #6B6B6B;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* Password requirements checklist (PasswordRequirements.razor): red with a
   cross until a rule is met, then green with a tick, so what's still missing
   reads at a glance (Eddie, 2026-10-02). Same red as .auth-error. */
.pw-rules {
    list-style: none;
    margin: 10px 0 16px;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
}

/* On the sign-in style pages it tucks up under the field's generous gap. */
.auth-field + .pw-rules {
    margin: -10px 0 24px;
}

.pw-rule {
    color: #DC2626;
}

.pw-rule::before {
    content: "✗";
    display: inline-block;
    width: 1.25em;
}

.pw-rule.met {
    color: var(--evie-verified);
}

.pw-rule.met::before {
    content: "✓";
    color: var(--evie-verified);
}

.auth-field {
    margin-bottom: 26px;
}

.auth-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #B09070;
    margin-bottom: 8px;
    font-weight: 500;
}

.auth-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid #D4C0A8;
    border-radius: 0;
    padding: 8px 0 10px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: #1C0E04;
    outline: none;
    transition: border-color 200ms;
    caret-color: #C06820;
}

.auth-input::placeholder {
    color: #C8B090;
    font-weight: 300;
}

.auth-input:focus {
    border-bottom-color: #C06820;
}

.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -12px;
    margin-bottom: 32px;
}

.auth-forgot-link {
    font-family: var(--font-mono);
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #B09070;
    text-decoration: none;
    transition: color 150ms;
    font-weight: 500;
}

.auth-forgot-link:hover {
    color: #C06820;
}

.auth-back-link {
    margin-top: 1.5rem;
    text-align: center;
}

.auth-link {
    color: #C06820;
    text-decoration: none;
    word-break: break-all;
}

.auth-link:hover {
    color: #A85818;
}

.auth-submit {
    display: block;
    width: 100%;
    background: #C06820;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 13px 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(192, 104, 32, 0.22);
    transition: background 180ms, box-shadow 180ms, transform 120ms;
}

.auth-submit:hover:not(:disabled) {
    background: #A85818;
    box-shadow: 0 6px 20px rgba(192, 104, 32, 0.32);
    transform: translateY(-1px);
    color: #FFFFFF;
}

.auth-submit:active:not(:disabled) {
    transform: translateY(0);
}

.auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ---------- Shared utilities (consolidated from scoped CSS) ---------- */

.text-primary {
    color: var(--evie-text);
    font-weight: 500;
}

.text-dim { color: var(--evie-text-dim); font-size: 0.75rem; }

.action-error {
    color: var(--evie-coral);
    font-size: 0.75rem;
}

.data-table { width: 100%; border-collapse: collapse; }

/* Shared table cells for AP queue/list pages. Mirrors the Order Entry table
   aesthetic (uppercase mono-ish headers, generous cell padding, hover rows)
   so pages without a scoped stylesheet still render properly. */
.data-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--evie-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--evie-border);
}

.data-table td {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--evie-text-muted);
    border-bottom: 1px solid rgba(50, 55, 72, 0.5);
}

.data-table tr:last-child td {
    border-bottom: none;
}

/* Extraction-log document cell: filenames are long and vary wildly in length,
   so the column is capped and the name clamped to one line. The cell's title
   attribute carries the full name plus the document id on hover, and the
   expanded detail row repeats both. Capping the column stops one long scanner
   filename from squeezing every other column flat. */
.data-table td.log-doc-cell {
    max-width: 18rem;
    color: var(--evie-text);
}

.log-doc-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-table tbody tr:hover td {
    background-color: var(--evie-surface);
}

/* Queue pages (Verification / Approval / Ready to Enter): the whole row is
   the action — it navigates to the package view page. */
.queue-table .queue-row {
    cursor: pointer;
}

/* ---------- AP queue pages: OE-style rounded table container + cells ---------- */
.ap-queue-tbl {
    background-color: var(--evie-card);
    border: 1px solid var(--evie-border);
    border-radius: 0.75rem;
    overflow: hidden;
}
.ap-queue-tbl .data-table th {
    font-size: 0.6875rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--evie-border);
}
.ap-queue-tbl .data-table td {
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid #F5F5F5;
    vertical-align: middle;
}
.ap-queue-tbl .data-table tr:last-child td { border-bottom: none; }
.ap-queue-tbl .data-table tbody tr:hover td { background-color: var(--evie-page-gradient-stop); }
/* Trailing OE-style uppercase open link; the row itself navigates. */
.queue-open { text-align: right; white-space: nowrap; }
.queue-row:hover .queue-open .chip-link { color: var(--evie-primary); }

/* OE-style status pill: muted background + leading dot. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: currentColor;
    flex-shrink: 0;
}
.status-pill-success { background-color: var(--evie-verified-muted); color: var(--evie-verified); }
.status-pill-warning { background-color: var(--evie-warning-muted); color: var(--evie-warning); }
.status-pill-error   { background-color: var(--evie-error-muted); color: var(--evie-error); }
.status-pill-dim     { background-color: rgba(107, 107, 107, 0.10); color: var(--evie-text-muted); }

/* .queue-confidence is gone with the match-confidence figure it styled: the
   verification queue's cell now carries the package page's badge instead. */

.hint-text {
    font-size: 0.8125rem;
    color: var(--evie-text-muted);
    margin: -0.5rem 0 1.25rem;
}

/* AP workspace sections rendered as cards get inner padding (the global
   .card padding is intentionally off; these sections opt back in). */
.workspace-section.card,
.orphan-section.card {
    padding: 1rem 1.25rem 1.25rem;
}

/* Order Entry loading / empty-state container (shared by Review + Sent).
   Page-specific tweaks like the empty-state <h2> margin stay scoped. */
.oe-loading,
.oe-empty {
    padding: 3rem 2.5rem;
    color: #6B6B6B;
}

.posting-period-warning {
    color: var(--evie-coral);
    font-size: 0.75rem;
    margin: -0.375rem 0 0.75rem;
}

/* Package line-edit modal (2026-08-14, mockup 1d): three panes — line list |
   the selected line's document cards | a "What needs doing" task rail. */
.line-edit-card { max-width: 76rem; width: 94vw; }
.line-edit-layout {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr) 17rem;
    border: 1px solid var(--evie-border);
    border-radius: 0.5rem;
    height: min(34rem, 62vh);
}
.le-list, .le-detail, .le-rail { min-height: 0; overflow-y: auto; padding: 0.625rem; }
.le-list { border-right: 1px solid var(--evie-border); }
.le-rail { border-left: 1px solid var(--evie-border); background: var(--evie-page-gradient-stop); }
.le-list-head, .le-rail-head {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--evie-text-muted);
    padding: 0.125rem 0.5rem 0.45rem;
}
.le-row {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.45rem 0.55rem;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    cursor: pointer;
}
.le-row:hover { background: var(--evie-surface-hover); }
.le-row-sel { background: var(--evie-primary-muted); border-color: rgba(192, 104, 32, 0.35); }
.le-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-top: 0.4rem; flex-shrink: 0; }
.le-dot-ok { background: var(--evie-verified); }
.le-dot-act { background: var(--evie-primary); }
.le-dot-warn { background: var(--evie-warning); }
.le-dot-bad { background: var(--evie-coral); }
.le-row-main { min-width: 0; display: flex; flex-direction: column; }
.le-row-part {
    font-weight: 500;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.le-row-meta { font-size: 0.72rem; color: var(--evie-text-muted); }
/* Plain-language per-line status, colored like its dot (Eddie 2026-08-14). */
.le-status { font-size: 0.72rem; }
.le-status-ok { color: var(--evie-verified); }
.le-status-act { color: var(--evie-primary); }
.le-status-warn { color: var(--evie-warning); }
.le-status-bad { color: var(--evie-coral); }
.le-list-addrow {
    border-top: 1px dashed var(--evie-border);
    margin-top: 0.5rem;
    padding: 0.5rem 0.55rem 0.125rem;
}
.le-detail-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0.125rem 0.6rem;
}
.le-detail-title { font-weight: 500; font-size: 0.95rem; }
.le-task {
    background: var(--evie-surface);
    border: 1px solid var(--evie-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
}
.le-task-hot { border-color: rgba(192, 104, 32, 0.4); }
.le-task-t { display: flex; gap: 0.4rem; align-items: center; font-weight: 500; }
.le-task-t .le-dot { margin-top: 0; }
.le-task-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-task p { color: var(--evie-text-muted); font-size: 0.72rem; margin: 0.25rem 0 0.45rem; }
.le-task-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }

/* Mockup-1d buttons: a quiet bordered base, a filled-primary accept-all, and
   an outlined-primary ghost for individual suggestion accepts. */
.le-btn {
    border: 1px solid var(--evie-border);
    background: var(--evie-surface);
    color: var(--evie-text);
    border-radius: 0.45rem;
    padding: 0.22rem 0.6rem;
    font-size: 0.75rem;
    line-height: 1.4;
    cursor: pointer;
}
.le-btn:hover:not(:disabled) { background: var(--evie-surface-hover); }
.le-btn:disabled { opacity: 0.5; cursor: default; }
.le-btn-pri {
    background: var(--evie-primary);
    border-color: var(--evie-primary);
    color: #FFFFFF;
    font-weight: 500;
}
.le-btn-pri:hover:not(:disabled) { background: var(--evie-primary-hover); }
.le-btn-ghost {
    background: none;
    border-color: var(--evie-primary);
    color: var(--evie-primary);
    flex-shrink: 0;
}
.le-btn-ghost:hover:not(:disabled) { background: var(--evie-primary-muted); }
.le-rail-empty { color: var(--evie-text-dim); font-size: 0.78rem; padding: 0.5rem 0.55rem; }
/* Collapsed package-level orphan group at the rail's bottom. */
.le-rail-orphans {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px dashed var(--evie-border);
    margin-top: 0.5rem;
    padding: 0.55rem 0.25rem 0.35rem;
    font-size: 0.72rem;
    color: var(--evie-text-muted);
    cursor: pointer;
}
.le-rail-orphans:hover { color: var(--evie-text); }
.le-allclear {
    text-align: center;
    color: var(--evie-verified);
    padding: 1.25rem 0.5rem;
    font-size: 0.85rem;
}
.le-allclear-big { font-size: 1.5rem; margin-bottom: 0.25rem; }

/* Epicor Receiving section: compact read-only supplementary table. */
.receiving-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.receiving-table th {
    text-align: left; font-weight: 500; color: var(--evie-text-muted);
    padding: 0.125rem 0.375rem 0.25rem 0; border-bottom: 1px solid var(--evie-border);
}
.receiving-table td { padding: 0.25rem 0.375rem 0.25rem 0; border-bottom: 1px solid var(--evie-border); }
.receiving-table .text-right { text-align: right; }

/* Receiving grouped by pack slip: one collapsible summary row per slip. */
.recv-group { border-bottom: 1px solid var(--evie-border); }
.recv-group:last-child { border-bottom: none; }
.recv-group-head {
    display: flex; align-items: center; gap: 0.375rem;
    width: 100%; padding: 0.3rem 0;
    background: none; border: none; cursor: pointer;
    font-size: 0.75rem; color: var(--evie-text); text-align: left;
}
.recv-group-head:hover { color: var(--evie-accent); }
.recv-group-chev { width: 0.8rem; color: var(--evie-text-dim); }
.recv-group-date { margin-left: auto; }
.recv-group-amt { min-width: 4rem; text-align: right; }
.recv-group .receiving-table { margin: 0 0 0.375rem 1.15rem; width: calc(100% - 1.15rem); }
.recv-group .receiving-table tr:last-child td { border-bottom: none; }

/* Note under the PO card when an Epicor PO is (also) imported. */
.po-erp-note { margin: 0.375rem 0 0; font-size: 0.8rem; }

/* Line-edit modal: doc PO field disagreeing with the imported Epicor PO (K3). */
/* A field whose value disagrees with the SAME field on another document or on
   the Epicor record — invoice vs Epicor PO, PO doc vs Epicor PO, slip vs
   invoice. Border plus a muted wash, so a disagreement is findable at a glance
   in a dense grid of boxes rather than only on the one being read.
   Amber, never coral: a difference is something to look at, not by itself a
   fault. Every highlighted field carries a title saying what it differs from
   and by how much — the colour says "look", the tooltip says "why". */
.line-edit-mismatch {
    border-color: var(--evie-warning) !important;
    background-color: var(--evie-warning-muted);
}
/* Wraps: the sections are fixed-width, so nowrap would overflow the panel. */
.line-edit-erp-hint { font-size: 0.7rem; color: var(--evie-warning); margin-top: 0.125rem; }
/* AP-20 phase 4: what a vendor part RESOLVES to via a confirmed link — green,
   it's a good state, unlike the amber disagreement hints. */
.line-edit-resolved-hint { font-size: 0.7rem; color: var(--evie-verified); margin-top: 0.125rem; }
.po-erp-fail { margin: 0.375rem 0 0; font-size: 0.8rem; color: var(--evie-coral); }
/* Epicor's definitive "no such PO" — informational amber, not a failure. */
.po-erp-notfound { margin: 0.375rem 0 0; font-size: 0.8rem; color: var(--evie-warning); }
/* Per-line PO-vs-Epicor tags: "not in Epicor PO" (the ERP PO has no line for
   this doc-PO line) and "differs from Epicor PO" (qty/price disagree). */
.line-po-warn-tag {
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 0.5rem;
    background: rgba(217, 119, 6, 0.12);
    color: var(--evie-warning);
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
/* Pending (unsaved) new lines: same look as saved lines plus a quiet tag. */
.line-sum-newtag {
    font-size: 0.625rem;
    color: var(--evie-text-muted);
    border: 1px solid var(--evie-border);
    border-radius: 3px;
    padding: 0 0.25rem;
    margin-left: 0.25rem;
}

/* The selected line's documents: one full-width card per document, stacked
   vertically (mockup 1d), fields flowing left-to-right inside each card. */
.line-exp-panel {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.line-exp-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.45rem 0.7rem;
    border: 1px solid var(--evie-border);
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    background: var(--evie-surface);
}
.line-exp-title {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    width: 100%;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--evie-text-muted);
}
.line-exp-ro { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.8; }

/* Card action buttons (add / show-expand): the mockup's quiet bordered look.
   Self-align keeps them shrink-wrapped in the card's flex row. */
/* "Use Epicor's values": sits in the Invoice section's title row beside Remove
   line. Muted like the other inline actions — it corrects a line, it is not the
   primary thing to do on this screen — but bordered so it reads as an action
   rather than a label. Only rendered when something actually differs. */

.line-exp-fromerp {
    /* This one now carries the auto margin that pushes the pair right, because
       it comes FIRST. .line-exp-remove has an auto of its own, so the rule below
       cancels it when it follows this button — two autos would split the free
       space and strand them apart in the middle of the row. */
    margin-left: auto;
    border: 1px solid var(--evie-border);
    background: var(--evie-surface);
    color: var(--evie-text-muted);
    border-radius: 0.45rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.line-exp-fromerp:hover:not(:disabled) {
    color: var(--evie-primary);
    border-color: var(--evie-primary);
}

.line-exp-fromerp:disabled { opacity: 0.5; cursor: default; }

/* The lookup spinner, sized to THIS button rather than to .upload-spinner's
   1rem default — at the button's 0.6875rem the shared size overhangs the
   padding and shoves the label. inline-flex so the glyph and the label share a
   baseline and a gap instead of butting together (Eddie, 2026-09-04). */
.line-exp-fromerp {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.line-exp-fromerp .upload-spinner {
    font-size: 0.6875rem;
    line-height: 1;
}

/* V055: the exemption toggle, in the section's label row beside "Invoice". It is
   a statement ABOUT the line rather than one of its values, and ticking it
   changes which panes the row has at all — so it belongs with the label, not
   among the fields.
   Opted OUT of the title's uppercase/bold: it is a control the reviewer reads,
   not a heading. Centred rather than baseline-aligned, because a checkbox has no
   text baseline to share with the label beside it. */
.line-exp-title-option {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 0.3rem;
    margin-left: 0.85rem;
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--evie-text-muted);
    white-space: nowrap;
    cursor: pointer;
}
.line-exp-title-option input { width: auto; margin: 0; cursor: pointer; }
.line-exp-title-option:hover { color: var(--evie-text); }

/* The exempt line's extra fields: a full-width row under the others, rendered
   only when the box is ticked. */
.line-exp-optionrow {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem 0.9rem;
    width: 100%;
}
.line-exp-option-field { margin: 0; }
/* Description is prose, not a code — it needs more room than a part number. */
.line-exp-option-wide { flex: 1 1 16rem; }
.line-exp-exempt-missing {
    display: block;
    width: 100%;
    font-size: 0.6875rem;
    color: var(--evie-warning);
}

/* Scoped to this pairing only, so .line-exp-remove keeps its own auto margin
   everywhere else it is used. */
.line-exp-fromerp + .line-exp-remove {
    margin-left: 0.6rem;
}

/* Split / Combine: the same muted bordered action as "Use Epicor's values", and
   first in the row when shown, so they take the auto margin that pushes the
   group right and the buttons after them sit at a fixed gap. */
.line-exp-reshape {
    margin-left: auto;
    border: 1px solid var(--evie-border);
    background: var(--evie-surface);
    color: var(--evie-text-muted);
    border-radius: 0.45rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.line-exp-reshape:hover:not(:disabled) { color: var(--evie-primary); border-color: var(--evie-primary); }
.line-exp-reshape:disabled { opacity: 0.5; cursor: default; }
.line-exp-reshape + .line-exp-reshape,
.line-exp-reshape + .line-exp-fromerp,
.line-exp-reshape + .line-exp-remove {
    margin-left: 0.6rem;
}

/* The Split and Combine dialogs. */
.le-reshape-pieces { display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; margin-bottom: 0.5rem; }
.le-split-qty { max-width: 8rem; }
.le-reshape-sum { margin-top: 0.4rem; color: var(--evie-text-muted); }
.le-reshape-short { color: var(--evie-warning); }
.le-reshape-note { color: var(--evie-text-muted); font-size: 0.72rem; margin: 0.35rem 0 0.5rem; }
.le-reshape-pick { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0; cursor: pointer; }
.le-reshape-pick input { width: auto; margin: 0; }

.line-exp-add {
    align-self: flex-start;
    border: 1px solid var(--evie-border);
    background: var(--evie-surface);
    color: var(--evie-text);
    border-radius: 0.45rem;
    padding: 0.22rem 0.6rem;
    font-size: 0.72rem;
    line-height: 1.4;
    cursor: pointer;
}
.line-exp-add:hover:not(:disabled) { background: var(--evie-surface-hover); }
.line-exp-add:disabled { opacity: 0.5; cursor: default; }
.line-exp-x {
    background: none; border: none; padding: 0 0.125rem; margin-left: auto;
    font-size: 0.8rem; line-height: 1; color: var(--evie-text-muted); cursor: pointer;
}
.line-exp-x:hover:not(:disabled) { color: var(--evie-coral); }
.line-exp-x:disabled { opacity: 0.5; cursor: default; }
/* Cascade-undo (↶) on a part box that auto-followed the invoice's part. */
.line-exp-undo {
    background: none; border: none; padding: 0 0.125rem; margin-left: auto;
    font-size: 0.8rem; line-height: 1; color: var(--evie-text-muted); cursor: pointer;
}
.line-exp-undo:hover:not(:disabled) { color: var(--evie-text); }
.line-exp-undo:disabled { opacity: 0.5; cursor: default; }
/* When both appear, only the first takes the auto gap; the × stays beside it. */
.line-exp-undo + .line-exp-x { margin-left: 0.25rem; }
/* In-card suggestion chip (mockup 1d "sug"): a full-width primary-muted bar,
   text left, ghost accept right — a helpful offer, not a warning. */
.line-exp-suggest {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--evie-text);
    background: var(--evie-primary-muted);
    border: 1px solid rgba(192, 104, 32, 0.3);
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
}
.line-exp-remove {
    background: none; border: none; padding: 0; margin-left: auto;
    font-size: 0.6875rem; font-weight: 400; text-transform: none; letter-spacing: 0;
    color: var(--evie-text-muted); cursor: pointer;
}
.line-exp-remove:hover:not(:disabled) { color: var(--evie-coral); }
.line-exp-remove:disabled { opacity: 0.5; cursor: default; }
/* System-only route back to the uploaded documents behind a package. */

.source-doc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.source-doc-link {
    font-size: 0.75rem;
    color: var(--evie-text-muted);
    text-decoration: none;
    border: 1px solid var(--evie-border);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

.source-doc-link:hover {
    color: var(--evie-primary);
    border-color: var(--evie-primary);
}

/* Part follows the ERP link: read-only while one is attached, with the unlink
   as the way to change it. Muted rather than disabled — the value still matters,
   it just isn't typed here. */
.le-part-locked {
    background: var(--evie-surface-hover);
    color: var(--evie-text-muted);
    cursor: default;
}
/* Boxes nobody types into in the line editor: the Epicor PO's values, and the
   summed rows of pooled slip / PO lines. They were plain .input and read as
   editable. Same muted look as the locked part box. A mismatch wash still wins,
   so a flagged value stays flagged. */
.line-exp-field .input:disabled:not(.line-edit-mismatch) {
    background: var(--evie-surface-hover);
    color: var(--evie-text-muted);
    cursor: default;
}
.le-part-unlock {
    background: none; border: none; padding: 0; margin-top: 0.2rem;
    font-size: 0.6875rem; color: var(--evie-text-muted);
    text-decoration: underline; cursor: pointer;
}
.le-part-unlock:hover:not(:disabled) { color: var(--evie-primary); }
.le-part-unlock:disabled { opacity: 0.5; cursor: default; }
/* The invoice line's Total: static text in the .input box (so it sits level with
   the qty and price boxes) — money, so monospace and right-aligned. A span, not
   a read-only input, so password managers don't drop their icon over the value.
   No background of its own — the amber mismatch wash has to show. */
.line-exp-field > span.le-line-total {
    display: block;
    height: auto;
    font-size: 0.875rem;
    line-height: 1.5;
    font-family: var(--font-mono);
    text-align: right;
    color: var(--evie-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}
.line-exp-field > span.le-line-total.line-edit-mismatch { color: var(--evie-warning); font-weight: 600; }
/* Slip-group label row hosting the per-slip ×; the text still one-line clamps. */
.line-exp-field > span.line-exp-label-row { display: flex; align-items: center; gap: 0.25rem; }
.line-exp-label-row .line-exp-label-text {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Fields are fixed-width and flow left-to-right inside the card (mockup kv
   row); every textbox fills its field (the .input default). */
.line-exp-field { display: flex; flex-direction: column; gap: 0.125rem; width: 10rem; }
/* Labels are clamped to exactly one line so every section's textboxes sit level
   with its neighbors' regardless of label length (long slip numbers ellipsize). */
.line-exp-field > span {
    font-size: 0.6875rem;
    color: var(--evie-text-muted);
    line-height: 1rem;
    height: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* One slip line = one horizontal row of fields within the card. */
.line-exp-slip { display: flex; flex-direction: row; gap: 0.7rem; width: 100%; }
/* Receipts are read-only Epicor truth: plain text line items (mockup style),
   never textboxes — part/qty left, provenance dimmed, detach × right. */
.le-recv-line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.25rem 0;
    border-bottom: 1px dashed var(--evie-border);
    font-size: 0.8rem;
}
.le-recv-line:last-of-type { border-bottom: none; }
.le-recv-line .line-exp-x { margin-left: 0; }
.le-recv-sub { color: var(--evie-text-dim); font-size: 0.7rem; margin-left: 0.4rem; }
.line-exp-recv-meta { width: 100%; font-size: 0.7rem; color: var(--evie-text-dim); }
/* AP-2 phase 2: a human-pinned receipt row (kept until manually changed). */
.line-exp-pin {
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 0.5rem;
    background: var(--evie-primary-muted);
    color: var(--evie-primary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Section header with an inline action (e.g. "Refresh from Epicor"). */
.pkg-header-row { display: flex; align-items: center; justify-content: space-between; }
.btn-inline-refresh {
    background: none; border: none; padding: 0;
    font-size: 0.7rem; color: var(--evie-text-muted); cursor: pointer;
}
.btn-inline-refresh:hover:not(:disabled) { color: var(--evie-text); }
.btn-inline-refresh:disabled { opacity: 0.5; cursor: default; }

/* Stamp modal: what-will-post preview (EX-4). */
.post-preview { margin-top: 0.75rem; }
.post-preview-title {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--evie-text-muted); margin-bottom: 0.375rem;
}
.post-preview-table { width: 100%; font-size: 0.8125rem; border-collapse: collapse; }
.post-preview-table th {
    text-align: left; font-weight: 500; color: var(--evie-text-muted);
    font-size: 0.6875rem; padding: 0.125rem 0.375rem 0.25rem 0;
    border-bottom: 1px solid var(--evie-border);
}
.post-preview-table td { padding: 0.25rem 0.375rem 0.25rem 0; border-bottom: 1px solid var(--evie-border); vertical-align: top; }
.post-preview-table .text-right { text-align: right; }
.post-preview-label { max-width: 14rem; overflow-wrap: anywhere; }
.post-preview-note { font-size: 0.6875rem; color: var(--evie-warning); }
.post-preview-differs td { color: var(--evie-warning); }
.post-preview-differs .text-dim { color: var(--evie-warning); opacity: 0.8; }
.post-preview-block { margin-top: 0.5rem; font-size: 0.75rem; color: var(--evie-coral); }

/* Account column: where each Non-PO line lands. Quiet by default — it is a
   fact to check, not an alarm — but a line with no account at all is coral,
   because approving cannot proceed without one. */
.post-preview-gl { font-size: 0.75rem; white-space: nowrap; }
.post-preview-gl-missing { color: var(--evie-coral); }
.post-preview-gl-inherited {
    margin-left: 0.3rem;
    font-size: 0.625rem;
    color: var(--evie-text-dim);
}

/* "Posts to" as a sibling field row: the standalone-row warning had a negative
   top margin that pulls it under the dropdown here — normalize it. */
.posting-period-field .posting-period-warning { margin: 0.25rem 0 0; }

/* Sibling-field label row with a right-floated affordance (info icon). */
.editable-field-label-row { display: flex; align-items: center; justify-content: space-between; }
.field-info-icon { color: var(--evie-text-dim); display: inline-flex; align-items: center; cursor: help; }
.field-info-icon:hover { color: var(--evie-text-muted); }

/* Modal shell (Modal.razor): pinned header/footer, scrolling body. */
.modal-shell { display: flex; flex-direction: column; overflow: hidden; }
.modal-shell-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-shell > .modal-footer { border-top: 1px solid var(--evie-border); padding-top: 0.875rem; }

/* Line notes shared by Review and Sent (LineQtyNotes / LinePriceNotes). Global
   rather than scoped: the components render inside each page's line table, and
   one set of styles keeps the two pages' notes identical. */
.line-notes .cell-note {
    font-size: 0.6875rem;
    margin-top: 0.25rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
}
.line-notes .cell-note.match { color: #059669; }
.line-notes .cell-note.notfound { color: #DC4A3A; }
/* NRE on the quote and short stock: worth knowing, nothing wrong, so amber. */
.line-notes .cell-note.nre-note,
.line-notes .cell-note.stock-short { color: #D97706; }
.line-notes .cell-note.failed { color: #B5443B; }
.line-notes .cell-note.matching {
    color: #6B6B6B;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}
.line-notes .cell-note.matching .dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: #9CA3AF;
    animation: match-pulse 1.4s ease-in-out infinite;
}
/* The quote / last-sold figures on Review are buttons that drop the price into
   the line. They look like the notes around them; the affordance is the
   underline on hover. */
.line-notes button.cell-note-apply {
    display: block;
    font-family: inherit;
    text-align: left;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}
.line-notes button.cell-note-apply:not(.match):not(.notfound) { color: inherit; }
.line-notes button.cell-note-apply:hover:not(:disabled),
.line-notes button.cell-note-apply:focus-visible { text-decoration: underline; }
.line-notes button.cell-note-apply:disabled { cursor: default; text-decoration: none; }