/* ==========================================================================
Evie by Clear Code — Light Design System
Global CSS Custom Properties & Component Classes
========================================================================== */
/* ---------- Google Fonts (loaded in App.razor via ) ---------- */
: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 (the developer, 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 a flex-sized child gets a bounded height and scrolls
inside its own pane. The document viewer's .viewer-wrapper is absolutely
positioned, so it is unaffected. */
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;
}
/* ---------- 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;
}
/* 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 ---------- */
.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;
flex-wrap: wrap;
gap: 0.75rem 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-low-reason { color: var(--evie-warning); }
.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 (the developer, 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;
/* Visible, not hidden: the flag hover card must reach past the table's
edge on the last rows. The corner cells round themselves instead. */
overflow: visible;
}
.ap-queue-tbl .data-table thead tr:first-child th:first-child { border-top-left-radius: 0.75rem; }
.ap-queue-tbl .data-table thead tr:first-child th:last-child { border-top-right-radius: 0.75rem; }
.ap-queue-tbl .data-table tbody tr:last-child td:first-child { border-bottom-left-radius: 0.75rem; }
.ap-queue-tbl .data-table tbody tr:last-child td:last-child { border-bottom-right-radius: 0.75rem; }
.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 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 (the developer 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; }
/* 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; }
/* 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 (the developer, 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;
}
/* A section's inline action (e.g. "Refresh from Epicor"). */
.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);
}
/* Stamp modal: opt-in "remember for this vendor" list (#1548). */
.remember-gl { margin-top: 0.875rem; }
.remember-gl-row {
display: flex; align-items: flex-start; gap: 0.5rem;
font-size: 0.8125rem; padding: 0.25rem 0; cursor: pointer;
}
.remember-gl-row input { margin-top: 0.15rem; }
/* "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; }
/* Rush (#1537): early-payment invoices and their packages. Coral, muted
background: it genuinely needs attention first. Used on the lane lists,
the invoice list, the drop box and the package/invoice pages. */
.rush-pill {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.6rem;
border-radius: 9999px;
background-color: var(--evie-coral-muted);
color: var(--evie-coral);
font-size: 0.6875rem;
font-weight: 500;
white-space: nowrap;
}
.rush-sub {
display: block;
font-size: 0.6875rem;
color: var(--evie-text-muted);
margin-top: 0.125rem;
}
.queue-row.rush-row td:first-child { box-shadow: inset 3px 0 0 var(--evie-coral); }
.ap-hub-stat-value.ap-hub-stat-rush { color: var(--evie-coral); }
/* Drop box invoice card: rush toggle, top-right, left of the confidence dot (#1537). */
.lane-r2-rush-toggle {
position: absolute;
top: 0.45rem;
right: 1.6rem;
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.05rem 0.45rem;
border: 1px solid var(--evie-border);
border-radius: 9999px;
background: transparent;
color: var(--evie-text-dim);
font-size: 0.6875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
opacity: 0.55;
}
.lane-r2-card:hover .lane-r2-rush-toggle,
.lane-r2-rush-toggle:focus-visible { opacity: 1; }
.lane-r2-rush-toggle:hover { color: var(--evie-coral); border-color: var(--evie-coral); }
.lane-r2-rush-toggle.lane-r2-rush-on {
opacity: 1;
color: var(--evie-coral);
border-color: transparent;
background-color: var(--evie-coral-muted);
}
.lane-r2-rush-toggle:disabled { cursor: progress; }
.lane-r2-rush-error { padding: 0 0.7rem 0.5rem; }
.lane-r2-card:has(.lane-r2-rush-toggle) .lane-r2-info { padding-right: 3.75rem; }
/* ---------- OE page chrome (.oe-page) ----------
The Order Entry Review page layout, shared so other pages can take the same
look (the AP package viewer, #1596): page header (eyebrow, title, sub,
actions), summary strip, status pill, two-panel workspace with a sticky
document panel, right-hand sections, fixed bottom bar and toast. Everything
is scoped under .oe-page, the class on the page's root element, so these
common class names (.panel, .pill, .toast, .page-header) change nothing on
pages without it. Page-specific styles (banners, a page's one-off button
such as the package viewer's rush) stay in each page's own .razor.css. */
/* Buttons: OE Review's light, outlined set, for every button inside the page
(header, panels, bottom bar, and modals the page's components draw). The
evie.css .btn above is the dark theme's filled one. .btn-outline means a
neutral secondary button app-wide, so here it takes the ghost look too:
the shared components (GL assignment, line editing, stamp modals) use it. */
.oe-page .btn {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.375rem;
border: 1px solid;
transition: all 0.18s;
white-space: nowrap;
background: transparent;
}
.oe-page .btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
}
/* Ghost buttons read as active by default (an old grey made enabled ones like
Back to list look disabled); disabled has its own clearly muted state. */
.oe-page .btn-ghost,
.oe-page .btn-outline {
color: #1A1A1A;
border-color: #C8C8C8;
}
.oe-page .btn-ghost:hover:not(:disabled),
.oe-page .btn-outline:hover:not(:disabled) {
border-color: #9CA3AF;
color: #1A1A1A;
background: #FAFAFA;
}
.oe-page .btn-ghost:disabled,
.oe-page .btn-outline:disabled {
color: #B0B0B0;
border-color: #ECECEC;
cursor: not-allowed;
}
.oe-page .btn-warning {
background: #FFFBEB;
color: #92400E;
border-color: #FCD34D;
}
.oe-page .btn-warning:hover {
background: #FEF3C7;
}
/* OE's light red (Delete order, Unmatch), not the dark theme's coral. */
.oe-page .btn-destructive {
background: #FEF2F2;
color: #DC2626;
border-color: #FECACA;
}
.oe-page .btn-destructive:hover:not(:disabled) {
background: #FEE2E2;
border-color: #DC2626;
}
.oe-page .btn-destructive:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.oe-page .btn-primary {
background: #C06820;
color: #FFF;
border-color: #C06820;
box-shadow: 0 3px 10px rgba(192, 104, 32, 0.22);
}
.oe-page .btn-primary:hover:not(:disabled) {
background: #A85818;
box-shadow: 0 5px 16px rgba(192, 104, 32, 0.32);
transform: translateY(-1px);
}
.oe-page .btn-primary:disabled {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
}
.oe-page .btn-link {
background: none;
border: none;
color: #C06820;
font-family: var(--font-sans);
font-size: 0.8125rem;
cursor: pointer;
padding: 0;
text-decoration: underline;
}
.oe-page .btn-link.danger {
color: #DC4A3A;
}
.oe-page .page-header {
padding: 1.5rem 0 1rem;
}
.oe-page .eyebrow {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #9CA3AF;
margin-bottom: 0.375rem;
}
.oe-page .header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
}
.oe-page .page-title {
font-size: 1.375rem;
font-weight: 400;
color: #1A1A1A;
line-height: 1.1;
margin: 0;
}
.oe-page .page-sub {
font-size: 0.875rem;
color: #6B6B6B;
margin: 0.25rem 0 0 0;
}
.oe-page .header-actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
/* Summary strip */
/* Reads as a card (full border, 14px radius, the same soft shadow as .panel) while
keeping the banner's own compact bar layout and #FAFAFA fill — it was a full-bleed
rule-under-a-strip, which sat oddly above the rounded panels below it. */
.oe-page .summary-strip {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.875rem 1.25rem;
border: 1.5px solid #E5E5E5;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
background: #FAFAFA;
/* Keeps the pill/badge children inside the rounded corners. */
overflow: hidden;
}
.oe-page .sum-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.oe-page .sum-label {
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #9CA3AF;
}
.oe-page .sum-val {
font-size: 0.875rem;
font-weight: 500;
color: #1A1A1A;
}
.oe-page .sum-sep {
width: 1px;
height: 20px;
background: #E5E5E5;
}
.oe-page .pill {
display: inline-flex;
align-items: center;
gap: 0.375rem;
border-radius: 999px;
padding: 0.25rem 0.75rem;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid;
}
.oe-page .pill-dot {
width: 5px;
height: 5px;
border-radius: 50%;
}
.oe-page .pill-review {
color: #92400E;
background: #FFFBEB;
border-color: #FCD34D;
}
.oe-page .pill-review .pill-dot {
background: #D97706;
}
.oe-page .pill-ready {
color: #14532D;
background: #F0FDF4;
border-color: #86EFAC;
}
.oe-page .pill-ready .pill-dot {
background: #16A34A;
}
.oe-page .pill-sent {
color: #374151;
background: #F3F4F6;
border-color: #D1D5DB;
}
.oe-page .pill-sent .pill-dot {
background: #6B7280;
}
.oe-page .pill-failed {
color: #991B1B;
background: #FEF2F2;
border-color: #FECACA;
}
.oe-page .pill-failed .pill-dot {
background: #DC2626;
}
/* Darker amber than "needs review", and not red (error). */
.oe-page .pill-unverified {
color: #B45309;
background: #FFFBEB;
border-color: #FCD34D;
}
.oe-page .pill-unverified .pill-dot {
background: #B45309;
}
.oe-page .pill-flagged {
color: #6D28D9;
background: #F5F3FF;
border-color: #C4B5FD;
}
.oe-page .pill-flagged .pill-dot {
background: #7C3AED;
}
/* Workspace */
.oe-page .workspace {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
padding-top: 1.5rem;
/* start, not stretch: a long extracted-data panel must not stretch the source
-document panel to match (which pushes the PDF far down / vertically centered). */
align-items: start;
min-width: 0;
}
/* The source-document viewer keeps a bounded viewport height and sticks in view
while the (potentially very long) extracted-data panel scrolls beside it, so the
document always sits at the top of the viewer instead of being centered in an
over-tall column. */
.oe-page .doc-panel {
position: sticky;
/* Clear the 56px sticky app header, with a little breathing room. */
top: calc(56px + 1rem);
/* Fit between the 56px header and the fixed 60px bottom action bar (plus a
1rem gap above each) so the viewer never tucks behind the footer. */
height: calc(100vh - 56px - 60px - 2rem);
}
.oe-page .panel {
min-width: 0;
background: #FFFFFF;
border: 1.5px solid #E5E5E5;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 600px;
}
.oe-page .panel-header {
background: #FAFAFA;
border-bottom: 1px solid #E5E5E5;
padding: 0.85rem 1.15rem;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.oe-page .panel-title {
font-size: 0.875rem;
font-weight: 600;
color: #1A1A1A;
}
.oe-page .panel-sub {
font-size: 0.75rem;
color: #9CA3AF;
margin-top: 0.125rem;
}
/* "Source not located" hint — subtle amber, not alarming. */
.oe-page .panel-sub.hl-miss {
color: #B45309;
}
/* The viewer panel puts its hint beside the title instead of under it, so the
header costs one line instead of two. flex-wrap plus a nowrap hint means the
sentence never breaks mid-phrase: it either sits on the title's line or drops
below it whole. */
.oe-page .panel-heading-inline {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.5rem;
row-gap: 0.125rem;
}
.oe-page .panel-heading-inline .panel-sub {
white-space: nowrap;
margin-top: 0;
}
.oe-page .panel-controls {
display: flex;
gap: 0.35rem;
}
.oe-page .panel-body {
flex: 1;
overflow-y: auto;
}
.oe-page .doc-viewer-body {
padding: 0;
background: #EBEBEB;
overflow: hidden; /* clip to rounded corners of .panel when viewer is full-height */
}
.oe-page .doc-viewer-body .apryse-viewer-container {
height: 100%;
min-height: 560px;
}
.oe-page .viewer-placeholder {
padding: 3rem;
text-align: center;
color: #9CA3AF;
font-size: 0.875rem;
}
/* Document tabs in the source-document panel's header (the package viewer's
TabbedDocumentViewer: Invoice, each packing slip, the PO). */
.oe-page .doc-panel-header {
align-items: center;
gap: 1rem;
}
.oe-page .doc-panel-header .panel-sub {
margin-top: 0;
}
.oe-page .doc-tabs {
display: flex;
gap: 0.25rem;
min-width: 0;
overflow-x: auto;
}
.oe-page .doc-tab {
font-family: var(--font-sans);
font-size: 0.75rem;
padding: 0.3rem 0.7rem;
border-radius: 6px;
border: 1px solid transparent;
background: none;
color: #6B6B6B;
cursor: pointer;
white-space: nowrap;
}
.oe-page .doc-tab:hover {
color: #1A1A1A;
}
.oe-page .doc-tab.active {
background: #FFFFFF;
border-color: #E5E5E5;
color: #1A1A1A;
font-weight: 500;
}
/* Right sections: the blocks a page renders inside a .panel-body (OE Review's
order info, line items and validation sections). */
.oe-page .panel-body .right-section {
padding: 1.15rem 1.25rem;
border-bottom: 1px solid #F0F0F0;
}
.oe-page .panel-body .right-section:last-child {
border-bottom: none;
}
.oe-page .panel-body .section-head {
margin-bottom: 0.875rem;
}
.oe-page .panel-body .section-title {
font-size: 0.875rem;
font-weight: 600;
color: #1A1A1A;
}
.oe-page .panel-body .section-sub {
font-size: 0.75rem;
color: #9CA3AF;
margin-top: 0.125rem;
}
.oe-page .panel-body .section-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.875rem;
}
.oe-page .panel-body .section-count {
font-size: 0.6875rem;
font-weight: 500;
color: #9CA3AF;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.oe-page .panel-body .section-actions {
display: flex;
gap: 0.375rem;
}
/* Confidence / match-status dots, rendered by both sections. */
.oe-page .panel-body .conf-dot {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
flex-shrink: 0;
}
.oe-page .panel-body .conf-dot.tag-high { background: #16A34A; }
.oe-page .panel-body .conf-dot.tag-mid { background: #D97706; }
.oe-page .panel-body .conf-dot.tag-low { background: #DC2626; }
.oe-page .panel-body .conf-dot.tag-failed { background: #DC2626; }
/* Boxed fields: a two-column grid of fields, each its own card with a small
upper-case label over a borderless input. OE Review's "Order information"
(ReviewOrderInfoSection) and PO Receipts review's "Slip information". */
.oe-page .fields-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
}
.oe-page .fields-grid .field-full {
grid-column: 1 / -1;
}
.oe-page .fields-grid .field-item {
/* Subtle warm-neutral fill so each field reads as its own card against
the white panel — the border alone wasn't enough separation. */
background: #FAF9F7;
border: 1px solid #E7E3DD;
border-radius: 8px;
padding: 0.625rem 0.75rem;
transition: border-color 0.15s, background-color 0.15s;
}
.oe-page .fields-grid .field-item:hover {
border-color: #D6CFC5;
background: #FCFBFA;
}
.oe-page .fields-grid .field-item:focus-within {
border-color: #C06820;
box-shadow: 0 0 0 3px rgba(192, 104, 32, 0.1);
}
.oe-page .fields-grid .field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.oe-page .fields-grid .field-label {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #9CA3AF;
font-weight: 500;
}
.oe-page .fields-grid .field-input {
width: 100%;
border: none;
background: transparent;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
color: #1A1A1A;
padding: 0;
outline: none;
}
/* Line table: the framed table of a document's lines, with quiet upper-case
headers and cells that are inputs until focused. OE Review's line items
(ReviewLineItemsSection, which adds its column widths, async notes, drag
and resize) and PO Receipts review's slip lines. */
.oe-page .line-table-wrap {
/* overflow-x:auto keeps horizontal scroll for a min-width table and
(per CSS) computes overflow-y to auto, so content clips to the
rounded corners — framing the line items as a card like the fields. */
overflow-x: auto;
border: 1px solid #E7E3DD;
border-radius: 8px;
}
.oe-page .line-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.oe-page .line-table th {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #9CA3AF;
padding: 0.6rem 0.5rem;
text-align: left;
font-weight: 500;
background: #FAFAFA;
border-bottom: 1px solid #E5E5E5;
}
.oe-page .line-table td {
padding: 0.5rem 0.5rem;
border-bottom: 1px solid #F0F0F0;
vertical-align: top;
}
/* The last cell: status dot and remove icon on one row, right-aligned so the
icons form a clean edge down the table rather than drifting with the dot's
presence (a line may have no dot). */
.oe-page .line-table .line-meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.375rem;
}
/* Remove-line action: icon only. Sized to a comfortable pointer target rather
than the glyph, and muted until hover so a column of them doesn't read as a
row of warnings. */
.oe-page .line-table .line-remove-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: #9CA3AF;
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.oe-page .line-table .line-remove-btn svg {
width: 15px;
height: 15px;
}
.oe-page .line-table .line-remove-btn:hover {
color: #DC4A3A;
background: #FDF2F0;
}
.oe-page .line-table .line-remove-btn:focus-visible {
outline: 2px solid #DC4A3A;
outline-offset: 1px;
color: #DC4A3A;
}
/* A line that needs a look: a quiet amber tint over the whole row. */
.oe-page .line-table tbody tr.flagged td {
background: #FFFDF5;
}
.oe-page .line-table .cell-input {
width: 100%;
border: 1px solid transparent;
background: transparent;
font-family: var(--font-sans);
font-size: 0.875rem;
color: #1A1A1A;
padding: 0.25rem 0.4rem;
border-radius: 3px;
outline: none;
}
.oe-page .line-table .cell-input.mono {
font-family: var(--font-mono);
}
.oe-page .line-table .cell-input:focus {
border-color: #C06820;
background: #FFF5EE;
}
.oe-page .line-table .cell-input:disabled {
color: #9A9A9A;
background: rgba(0, 0, 0, 0.03);
cursor: not-allowed;
}
/* A read-only value that has to sit on the same baseline as the editable cells
beside it. Mirrors .cell-input's box exactly — transparent 1px border and the
same padding — so the text lands where an input's text lands instead of riding
a few pixels high at the top of the cell. Deliberately a span, not a disabled
input: it reads as text to assistive tech, stays out of the tab order, and the
value can still be selected and copied. */
.oe-page .line-table .cell-static {
display: block;
border: 1px solid transparent;
padding: 0.25rem 0.4rem;
font-size: 0.875rem;
line-height: inherit;
border-radius: 3px;
/* Numbers and money stay on one line; prose can wrap, a formatted amount
reads as one token. */
white-space: nowrap;
}
.oe-page .line-table .cell-static.mono {
font-family: var(--font-mono);
}
/* Validation cards: the "Validation & warnings" section's findings, one card
each, coloured by severity, a warning's acknowledgement box on its left.
Shared by OE Review (ReviewValidationSection), the AP package viewer
(ValidationIssuesSection) and PO Receipts review; what only one of them
draws (OE's grouped lines and re-checking state, the package's openable
cards) stays in that component's own .razor.css. */
.oe-page .val-cards {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.oe-page .val-card {
border: 1.5px solid;
border-radius: 6px;
padding: 0.75rem 0.875rem;
display: flex;
align-items: center;
gap: 0.625rem;
}
.oe-page .val-card.warn {
border-color: #FCD34D;
background: #FFFBEB;
}
.oe-page .val-card.error {
border-color: #FECACA;
background: #FEF2F2;
}
.oe-page .val-card.info {
border-color: #E5E5E5;
background: #FAFAFA;
}
/* A card whose box can be ticked: the whole card is the target. */
.oe-page .val-card.checkable {
cursor: pointer;
}
.oe-page .val-card.warn.checkable:hover {
border-color: #F59E0B;
}
.oe-page .val-card.error.checkable:hover {
border-color: #F87171;
}
.oe-page .val-card.acked {
opacity: 0.65;
}
.oe-page .val-card.acked .val-title {
text-decoration: line-through;
}
/* The padding is the click target (CE3, 2026-10-21: the bare 1rem box was hard
to hit); the negative margin keeps the card's layout where it was. */
.oe-page .val-check {
flex: 0 0 auto;
margin: -0.375rem 0 -0.375rem -0.375rem;
align-self: center;
padding: 0.375rem;
border-radius: 6px;
display: inline-flex;
cursor: pointer;
}
.oe-page .val-check:hover {
background: rgba(180, 83, 9, 0.1);
}
.oe-page .val-check input[type="checkbox"] {
width: 1.25rem;
height: 1.25rem;
margin: 0;
cursor: pointer;
accent-color: #B45309;
}
.oe-page .val-check input[type="checkbox"]:disabled {
cursor: default;
}
.oe-page .val-body {
flex: 1 1 auto;
min-width: 0;
}
.oe-page .val-title {
font-size: 0.875rem;
font-weight: 600;
color: #1A1A1A;
margin-bottom: 0.2rem;
}
.oe-page .val-text {
font-size: 0.75rem;
color: #6B6B6B;
line-height: 1.5;
}
/* One finding shared by several lines: a header (with one box for all, on a
warning), then a row per line under a divider. Order Entry groups a warning
repeated over lines (ReviewValidationSection); PO Receipts groups lines that
fail together (two slip lines over one PO line). Scoped to .val-card.group,
so the package viewer's own grouped cards (ValidationIssuesSection) are
untouched. */
.oe-page .val-card.group {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.oe-page .val-card.group .val-group-head {
display: flex;
align-items: center;
gap: 0.625rem;
}
.oe-page .val-card.group .val-group-head.checkable,
.oe-page .val-card.group .val-row.checkable {
cursor: pointer;
}
.oe-page .val-card.group .val-group-items {
display: flex;
flex-direction: column;
gap: 0.125rem;
/* In line with the header's text, past its box. */
padding-left: 1.875rem;
border-top: 1px solid #FDE68A;
padding-top: 0.375rem;
}
/* An error group has no box to clear, and a red divider. */
.oe-page .val-card.error.group .val-group-items {
padding-left: 0;
border-top-color: #FECACA;
}
.oe-page .val-card.group .val-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.125rem 0.25rem;
border-radius: 4px;
}
.oe-page .val-card.group .val-row.checkable:hover {
background: rgba(245, 158, 11, 0.08);
}
.oe-page .val-card.group .val-row.acked .val-text {
opacity: 0.6;
text-decoration: line-through;
}
.oe-page .val-card.group .val-row.pending {
opacity: 0.5;
}
.oe-page .val-card.group .val-count {
margin-top: 0.125rem;
font-size: 0.6875rem;
font-weight: 500;
color: #92400E;
}
/* Fixed width so the messages line up past Line 9. */
.oe-page .val-card.group .val-row-line {
display: inline-block;
min-width: 3.25rem;
font-weight: 600;
color: #1A1A1A;
}
.oe-page .val-helper {
font-size: 0.75rem;
color: #6B6B6B;
font-style: italic;
margin-top: 0.25rem;
}
/* Bottom bar */
.oe-page .bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(12px);
border-top: 1px solid #E5E5E5;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
z-index: 200;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}
.oe-page .bar-note {
font-size: 0.875rem;
color: #6B6B6B;
}
.oe-page .bar-note strong {
color: #1A1A1A;
font-weight: 600;
}
.oe-page .bar-right {
display: flex;
gap: 0.5rem;
}
/* Toast */
.oe-page .toast {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background: #1A1A1A;
color: #FFFFFF;
padding: 0.75rem 1.25rem;
border-radius: 8px;
font-size: 0.875rem;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
z-index: 300;
}
@media (max-width: 1100px) {
.oe-page .workspace {
grid-template-columns: 1fr;
}
/* Single column: don't pin the viewer over the screen — let it sit inline as a
bounded-height panel above the extracted data. */
.oe-page .doc-panel {
position: static;
height: 70vh;
}
}