:root { --ink:#172033; --muted:#667085; --line:#e4e9f0; --panel:#fff; --navy:#111c2d; --accent:#f04438; --success:#067647; --warning:#b54708; }
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--ink); background: #f4f6f9; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
a { color: #2457a7; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.75rem, 2.8vw, 2.65rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: .65rem; color: #121a2a; }
h2 { font-size: 1.05rem; letter-spacing: -.015em; margin-bottom: .25rem; }
p { color: var(--muted); line-height: 1.55; }
.eyebrow { color: #6b778c; display: block; font-size: .66rem; font-weight: 800; letter-spacing: .13em; margin-bottom: .65rem; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.page-heading p { max-width: 760px; margin-bottom: 0; }
.page-heading.compact h1 { font-size: clamp(1.65rem, 2.3vw, 2.2rem); }
.home-heading { padding: .65rem 0 .35rem; }
.home-heading p { font-size: 1.02rem; }
.button { border: 1px solid transparent; border-radius: .62rem; min-height: 2.55rem; padding: .64rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; font-size: .8rem; font-weight: 750; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button:not(:disabled):hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button.primary { background: #172b4d; color: white; box-shadow: 0 6px 18px rgba(23,43,77,.18); }
.button.primary:hover { background: #203a63; }
.button.secondary { background: white; color: #344054; border-color: #d0d5dd; }
.button.tertiary { color: #344054; background: #f5f7fa; border-color: #e4e7ec; }
.status-banner { background: white; border: 1px solid var(--line); border-left-width: 4px; border-radius: .7rem; padding: .82rem 1rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .85rem; box-shadow: 0 3px 12px rgba(16,24,40,.035); }
.status-banner.warning { border-left-color: #f79009; }
.status-banner.danger { border-left-color: #d92d20; }
.status-banner.success { border-left-color: #12b76a; }
.status-banner strong { display: block; font-size: .82rem; }
.status-banner span:not(.status-icon):not(.status-code) { color: var(--muted); display: block; font-size: .76rem; margin-top: .1rem; }
.status-icon { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; color: #b54708; background: #fff4e8; font-weight: 900; }
.status-code { margin-left: auto; color: #9a3412; font-size: .65rem; font-weight: 800; letter-spacing: .06em; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; }
.metric-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.metric-card { position: relative; background: white; border: 1px solid var(--line); border-radius: .8rem; padding: 1rem 1.05rem; box-shadow: 0 3px 12px rgba(16,24,40,.025); overflow: hidden; }
.metric-card::before { content: ""; width: 2px; background: #cfd6e1; position: absolute; left: 0; top: .75rem; bottom: .75rem; }
.metric-card.accent::before { width: 3px; background: var(--accent); }
.metric-label { display: block; color: #667085; font-size: .7rem; font-weight: 700; margin-bottom: .35rem; }
.metric-card strong { display: block; font-size: 1.55rem; letter-spacing: -.04em; }
.metric-card small { color: #98a2b3; font-size: .67rem; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 1rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: .85rem; box-shadow: 0 3px 14px rgba(16,24,40,.03); padding: 1.25rem; }
.access-denied-panel { align-items: flex-start; display: flex; gap: 1rem; max-width: 760px; }
.access-denied-panel p { font-size: .78rem; margin: .35rem 0 1rem; }
.access-denied-mark { background: #fef3f2; border-radius: .7rem; color: #d92d20; display: grid; flex: 0 0 2.6rem; font-size: 1.15rem; font-weight: 900; height: 2.6rem; place-items: center; }
.access-denied-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.panel-heading .eyebrow { margin-bottom: .35rem; }
.panel-note { color: #98a2b3; font-size: .7rem; }
.process-flow { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem .35rem 1.55rem; }
.process-step { display: flex; align-items: center; gap: .55rem; min-width: 120px; }
.process-step > span { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: #667085; background: #f2f4f7; border: 1px solid #e4e7ec; font-size: .65rem; font-weight: 800; }
.process-step.active > span { color: white; background: #172b4d; border-color: #172b4d; }
.process-step strong, .process-step small { display: block; }
.process-step strong { font-size: .76rem; }
.process-step small { color: #98a2b3; font-size: .63rem; margin-top: .15rem; }
.process-line { flex: 1; height: 1px; background: #e4e7ec; margin: 0 .6rem; }
.empty-worklist { background: #f8fafc; border: 1px dashed #d8dee8; border-radius: .7rem; display: flex; align-items: center; gap: .85rem; padding: 1rem; }
.empty-worklist .empty-mark { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .55rem; background: #ecfdf3; color: #067647; }
.empty-worklist strong { font-size: .78rem; }
.empty-worklist p { font-size: .72rem; margin: .15rem 0 0; }
.control-list { margin: 0; }
.control-list div, .result-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid #edf0f4; }
.control-list dt, .result-list dt { color: #667085; font-size: .72rem; font-weight: 500; }
.control-list dd, .result-list dd { margin: 0; color: #344054; font-size: .74rem; font-weight: 750; text-align: right; }
.pending-text { color: #b54708 !important; }
.security-note { display: flex; gap: .65rem; background: #f5f7fa; border-radius: .6rem; padding: .78rem; margin-top: 1rem; }
.security-note > span { color: #52657f; }
.security-note p { font-size: .67rem; margin: 0; }
.security-note strong { color: #344054; display: block; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px,.7fr); gap: 1rem; align-items: start; }
.form-panel { padding: 1.4rem; }
.section-title { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.section-title.divided { border-top: 1px solid #e9edf2; padding-top: 1.35rem; margin-top: 1.35rem; }
.section-title > span { width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: #edf2f8; color: #344054; display: grid; place-items: center; font-size: .72rem; font-weight: 850; }
.section-title p { margin: 0; font-size: .72rem; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
label > span { display: block; color: #475467; font-size: .69rem; font-weight: 700; margin-bottom: .35rem; }
.form-control, .form-select { border: 1px solid #d0d5dd; border-radius: .55rem; background-color: white; min-height: 2.5rem; color: #344054; font-size: .78rem; box-shadow: 0 1px 2px rgba(16,24,40,.03); }
.form-control:focus, .form-select:focus { border-color: #617b9f; box-shadow: 0 0 0 3px rgba(76,111,159,.12); }
.check-field { display: flex; align-items: center; align-self: end; min-height: 2.5rem; gap: .55rem; }
.check-field span { margin: 0; }
.line-editor { display: grid; gap: .65rem; }
.line-row { display: grid; grid-template-columns: 1.25fr .65fr .65fr .8fr .8fr .55fr; gap: .55rem; align-items: end; padding: .8rem; border: 1px solid #e4e7ec; border-radius: .65rem; background: #fbfcfd; }
.line-row.compact-lines { grid-template-columns: minmax(300px,1.55fr) minmax(120px,.45fr) minmax(240px,1fr) auto; grid-template-areas: "item quantity unit remove" "price warehouse warehouse remove" "stock stock stock remove" "shipto shipto shipto remove"; row-gap: .75rem; }
.line-item-field { grid-area: item; }
.line-quantity-field { grid-area: quantity; }
.line-unit-field { grid-area: unit; }
.line-list-price { grid-area: price; }
.line-warehouse-field { grid-area: warehouse; max-width: 42rem; }
.line-stock-status { grid-area: stock; border: 1px solid #d8e4ee; border-radius: .65rem; background: #f8fbfd; padding: .7rem .8rem; }
.line-stock-status header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.line-stock-status header > div { display: flex; flex-direction: column; gap: .12rem; }
.line-stock-status header strong { color: #344054; font-size: .72rem; }
.line-stock-status header small,.stock-footnote { color: #667085; font-size: .58rem; }
.stock-refresh { border: 1px solid #c8d4e2; border-radius: .45rem; background: #fff; color: #344054; cursor: pointer; font-size: .62rem; font-weight: 750; padding: .4rem .6rem; }
.stock-refresh:disabled { cursor: not-allowed; opacity: .55; }
.stock-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .55rem; }
.stock-metrics > div { border: 1px solid #e4eaf0; border-radius: .5rem; background: #fff; padding: .55rem .65rem; }
.stock-metrics span { display: block; color: #667085; font-size: .58rem; margin-bottom: .2rem; }
.stock-metrics strong { color: #344054; display: block; font-size: .82rem; line-height: 1.2; }
.stock-metrics small { color: #7b8799; display: block; font-size: .52rem; line-height: 1.3; margin-top: .28rem; }
.stock-metrics .available { border-color: #a9dfc2; background: #ecfdf3; }
.stock-metrics .available strong { color: #067647; }
.stock-metrics .available small { color: #387d5c; }
.stock-metrics .available.negative { border-color: #fecdca; background: #fef3f2; }
.stock-metrics .available.negative strong { color: #b42318; }
.stock-metrics .commitment-warning { border-color: #fedf89; background: #fffaeb; }
.stock-metrics .commitment-warning strong { color: #b54708; }
.stock-footnote { display: block; margin-top: .45rem; }
.stock-loading,.stock-empty { border-radius: .45rem; background: #fff; color: #667085; font-size: .65rem; padding: .58rem .65rem; }
.line-shipto-field { grid-area: shipto; }
.compact-lines .line-remove { grid-area: remove; align-self: center; justify-self: end; }
.sap-address-group { border: 1px solid #dfe5ee; border-radius: .85rem; padding: .85rem; margin-top: .85rem; background: #fbfcfe; }
.sap-address-group-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; color: #344054; }
.sap-address-group-heading span { color: #667085; font-size: .82rem; }
.line-list-price > span { display: block; color: #475467; font-size: .69rem; font-weight: 700; margin-bottom: .35rem; }
.line-list-price-value { min-height: 2.5rem; border: 1px solid #d8dee8; border-radius: .55rem; background: #f7f9fc; padding: .42rem .6rem; display: flex; flex-direction: column; justify-content: center; color: #667085; }
.line-list-price-value strong { color: #344054; font-size: .78rem; line-height: 1.15; }
.line-list-price-value small { color: #667085; font-size: .58rem; line-height: 1.3; margin-top: .18rem; }
.line-list-price-value.available { border-color: #b7dec8; background: #f3fbf6; }
.line-list-price-value.available strong { color: #067647; }
.line-remove { width: 2.25rem; height: 2.5rem; border: 1px solid #e4e7ec; border-radius: .5rem; color: #b42318; background: white; }
.comments-field { display: block; margin-top: 1rem; }
.compact-check { justify-content: center; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1rem; }
.calculation-panel { position: sticky; top: 5.5rem; }
.calculation-empty { min-height: 230px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed #d8dee8; border-radius: .7rem; background: #fafbfc; padding: 1.2rem; }
.calculation-empty span { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: .7rem; background: #eef2f7; color: #53657f; font-weight: 900; margin-bottom: .6rem; }
.calculation-empty p { font-size: .75rem; max-width: 220px; }
.result-list { margin: 1rem 0; }
.result-list .result-total { border: 0; padding-top: 1rem; }
.result-list .result-total dd { color: #067647; font-size: 1.05rem; }
.inline-error, .inline-warning { padding: .65rem; border-radius: .45rem; font-size: .7rem; }
.inline-error { color: #b42318; background: #fef3f2; }
.inline-warning { color: #9a3412; background: #fff7ed; margin-top: 1rem; }
.hash-label { color: #98a2b3; font-size: .62rem; overflow-wrap: anywhere; }
.calculated-line { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "code volume discount" "net-price net-price net-price" "box-price box-price box-price"; column-gap: .55rem; row-gap: .45rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid #edf0f4; font-size: .68rem; }
.calculated-line-code { grid-area: code; }
.calculated-line-volume { grid-area: volume; color: #667085; }
.calculated-line-discount { grid-area: discount; color: #172b4d; }
.calculated-line-net-price { grid-area: net-price; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem .55rem; border-radius: .45rem; background: #f3fbf6; }
.calculated-line-net-price span { color: #475467; font-size: .62rem; }
.calculated-line-net-price strong { color: #067647; font-size: .7rem; white-space: nowrap; }
.calculated-line-box-price { grid-area: box-price; display: grid; gap: .18rem; padding: .55rem .65rem; border: 1px solid #b7dec8; border-radius: .55rem; background: #f3fbf6; }
.calculated-line-box-price > span { color: #475467; font-size: .62rem; font-weight: 700; }
.calculated-line-box-price > strong { color: #067647; font-size: .78rem; }
.calculated-line-box-price > small { color: #667085; font-size: .57rem; line-height: 1.3; }
.filters { display: grid; grid-template-columns: minmax(220px,1fr) 220px auto; gap: .7rem; padding-bottom: 1rem; border-bottom: 1px solid #e9edf2; }
.empty-table { min-height: 285px; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-table > span { color: #98a2b3; font-size: 1.4rem; margin-bottom: .5rem; }
.empty-table h2 { font-size: .9rem; }
.empty-table p { font-size: .75rem; }
.empty-table.compact-empty { min-height: 155px; }
.empty-table.compact-empty h3 { font-size: .82rem; }
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .72rem; }
th { color: #667085; font-size: .64rem; letter-spacing: .04em; text-align: left; padding: .75rem .6rem; border-bottom: 1px solid #e4e7ec; }
td { color: #344054; padding: .8rem .6rem; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
td small { color: #98a2b3; display: block; margin-top: .15rem; }
.row-actions { display: flex; align-items: center; gap: .55rem; }
.row-actions button,.row-actions a { border: 0; background: transparent; color: #2457a7; font-size: .68rem; font-weight: 750; text-decoration: none; padding: 0; }
.review-reason { max-width: 620px; padding-bottom: 1rem; border-bottom: 1px solid #edf0f4; margin-bottom: .4rem; }
.review-actions { min-width: 340px; flex-wrap: wrap; gap: .38rem; }
.row-actions .table-action { appearance: none; border: 1px solid transparent; border-radius: 999px; min-height: 1.85rem; padding: .34rem .68rem; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer; line-height: 1; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.row-actions .table-action:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(16,24,40,.09); }
.row-actions .table-action:focus-visible { outline: 2px solid rgba(36,87,167,.28); outline-offset: 2px; }
.row-actions .table-action.review { color: #2457a7; background: #eef4ff; border-color: #cddcf7; }
.row-actions .table-action.neutral,.row-actions .table-action.pdf { color: #344054; background: #f5f7fa; border-color: #dfe4ea; }
.row-actions .table-action.correction { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.row-actions .table-action.approve { color: #067647; background: #ecfdf3; border-color: #abefc6; }
.row-actions .table-action.reject { color: #b42318; background: #fef3f2; border-color: #fecdca; }
.row-actions .table-action.sap { color: #175cd3; background: #eff8ff; border-color: #b2ddff; }
.row-actions .danger-action { color: #b42318; }
.review-heading-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.evidence-section-title { margin-bottom: .8rem; }
.quote-evidence-editor { border: 1px solid #dbe4ef; border-radius: .72rem; background: #f8fafc; padding: .85rem; }
.quote-evidence-upload { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quote-evidence-upload strong,.quote-evidence-upload small { display: block; }
.quote-evidence-upload strong { color: #344054; font-size: .74rem; }
.quote-evidence-upload small { color: #667085; font-size: .61rem; line-height: 1.5; margin-top: .18rem; }
.evidence-upload-button { flex: 0 0 auto; cursor: pointer; }
.evidence-file-input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.quote-evidence-empty,.review-evidence-empty { border: 1px dashed #d5dde8; border-radius: .58rem; background: #fff; margin-top: .75rem; padding: .75rem; text-align: center; }
.quote-evidence-empty strong,.quote-evidence-empty small,.review-evidence-empty strong,.review-evidence-empty small { display: block; }
.quote-evidence-empty strong,.review-evidence-empty strong { color: #475467; font-size: .68rem; }
.quote-evidence-empty small,.review-evidence-empty small { color: #98a2b3; font-size: .6rem; margin-top: .18rem; }
.quote-evidence-list,.review-evidence-list { display: grid; gap: .45rem; margin-top: .75rem; }
.quote-evidence-item,.review-evidence-list article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .7rem; align-items: center; border: 1px solid #e2e8f0; border-radius: .6rem; background: #fff; padding: .65rem; }
.quote-evidence-kind,.review-evidence-list article > span { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .48rem; background: #eef4ff; color: #2457a7; font-size: .59rem; font-weight: 850; letter-spacing: .04em; }
.quote-evidence-item strong,.quote-evidence-item small,.review-evidence-list article strong,.review-evidence-list article small { display: block; overflow-wrap: anywhere; }
.quote-evidence-item strong,.review-evidence-list article strong { color: #344054; font-size: .69rem; }
.quote-evidence-item small,.review-evidence-list article small { color: #98a2b3; font-size: .57rem; margin-top: .12rem; }
.quote-evidence-actions { display: flex; align-items: center; gap: .6rem; }
.quote-evidence-actions a,.quote-evidence-actions button,.review-evidence-list article > a { border: 0; background: transparent; color: #2457a7; cursor: pointer; font: inherit; font-size: .62rem; font-weight: 780; padding: 0; text-decoration: none; }
.quote-evidence-actions button { color: #b42318; }
.review-evidence-list article > a { border: 1px solid #cddcf7; border-radius: 999px; background: #eef4ff; padding: .38rem .68rem; }
.review-detail-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.7fr); gap: 1rem; align-items: start; }
.review-detail-main,.review-detail-aside { display: grid; gap: 1rem; }
.review-document-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin: 0; }
.review-document-grid > div { border: 1px solid #e7ebf0; border-radius: .58rem; background: #fafbfc; padding: .72rem; }
.review-document-grid dt { color: #667085; font-size: .64rem; margin-bottom: .25rem; }
.review-document-grid dd { color: #344054; font-size: .75rem; font-weight: 750; margin: 0; }
.review-document-grid small { color: #98a2b3; display: block; font-size: .61rem; font-weight: 500; margin-top: .12rem; }
.review-comments { border-top: 1px solid #edf0f4; margin-top: 1rem; padding-top: 1rem; }
.review-comments span { color: #475467; display: block; font-size: .69rem; font-weight: 700; margin-bottom: .35rem; }
.review-comments p { background: #f8fafc; border-radius: .55rem; font-size: .72rem; margin: 0; padding: .75rem; white-space: pre-wrap; }
.review-line-list { display: grid; gap: .75rem; }
.review-line-card { border: 1px solid #e4e7ec; border-radius: .7rem; overflow: hidden; }
.review-line-card header { background: #f8fafc; border-bottom: 1px solid #e8edf3; padding: .8rem; }
.review-line-card header span { color: #667085; display: block; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.review-line-card header strong { color: #172033; display: block; font-size: .82rem; margin-top: .2rem; }
.review-line-card header small { color: #667085; display: block; font-size: .65rem; margin-top: .15rem; }
.review-line-card dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; padding: .35rem .8rem; }
.review-line-card dl > div { border-bottom: 1px solid #edf0f4; padding: .65rem .4rem; }
.review-line-card dt { color: #667085; font-size: .61rem; }
.review-line-card dd { color: #344054; font-size: .69rem; font-weight: 750; margin: .2rem 0 0; overflow-wrap: anywhere; }
.review-line-card .review-money { color: #067647; }
.review-line-card footer { font-size: .62rem; padding: .6rem .8rem; }
.review-line-card footer.eligible { background: #f3fbf6; color: #067647; }
.review-line-card footer.not-eligible { background: #fff7ed; color: #9a3412; }
.review-history-list { display: grid; }
.review-history-list > div { display: grid; grid-template-columns: 135px 150px minmax(0,1fr); gap: .75rem; padding: .7rem 0; border-bottom: 1px solid #edf0f4; }
.review-history-list span,.review-history-list small { color: #667085; font-size: .64rem; }
.review-history-list strong { color: #344054; font-size: .68rem; }
.review-calculation-panel { position: static; }
.review-decision-panel p { font-size: .72rem; }
.review-decision-panel > .button { width: 100%; }
.review-decision-actions { display: grid; gap: .6rem; margin-top: .85rem; }
.review-decision-actions .button { width: 100%; }
.decision-preflight-summary { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .6rem; align-items: start; border-radius: .65rem; margin-top: .8rem; padding: .7rem; }
.decision-preflight-summary > span { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: 50%; font-weight: 850; }
.decision-preflight-summary strong,.decision-preflight-summary small { display: block; }
.decision-preflight-summary strong { font-size: .68rem; }
.decision-preflight-summary small { font-size: .59rem; margin-top: .18rem; overflow-wrap: anywhere; }
.decision-preflight-summary.ready { background: #ecfdf3; color: #067647; }
.decision-preflight-summary.ready > span { background: #d1fadf; }
.decision-preflight-summary.blocked { background: #fff4e8; color: #9a3412; }
.decision-preflight-summary.blocked > span { background: #ffead5; }
.decision-preflight-actions { display: grid; gap: .55rem; margin-top: .75rem; }
.decision-preflight-actions .button { text-align: center; width: 100%; }
.sap-document-panel { overflow: hidden; }
.sap-flow-heading { display: grid; gap: .55rem; margin-bottom: 1rem; }
.sap-flow-heading p { margin: 0; }
.sap-flow-status { display: grid; justify-items: start; gap: .3rem; min-width: 150px; }
.sap-flow-status .state-pill { white-space: normal; }
.sap-flow-status > small { display: block; color: #667085; font-size: .63rem; }
.state-pill.sap-recorded { background: #eff6ff; color: #175cd3; }
.state-pill.cancelled { background: #fef3f2; color: #b42318; }
.sap-flow-warning,.sap-flow-status > small.sap-flow-warning { color: #93370d; font-size: .72rem; }
.sap-flow-cancellation-note { border-left: 3px solid #d92d20; background: #fff8f7; padding: .65rem .8rem; color: #b42318; font-size: .75rem; }
.sap-flow-stages { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: .7rem; align-items: start; }
.sap-flow-stages .sap-document-step-content > span { font-size: .73rem; }
.sap-flow-stages .sap-document-step-content > strong { font-size: .8rem; }
.sap-document-step.recorded { border-color: #b2ccff; background: #f5f8ff; }
.sap-document-step.partial { border-color: #fedf89; background: #fffcf5; }
.sap-document-step.cancelled { border-color: #fecdca; background: #fff8f7; }
.sap-document-step.cancelled .sap-document-step-number { color: #b42318; background: #fee4e2; }
.sap-flow-document { border-top: 1px solid #dfe5ee; margin-top: .75rem; padding-top: .7rem; overflow-wrap: anywhere; }
.sap-flow-document > strong,.sap-flow-document > small { display: block; }
.sap-flow-document > strong { color: #344054; font-size: .77rem; }
.sap-flow-document > small { color: #667085; font-size: .68rem; margin-top: .24rem; }
.sap-flow-document.cancelled > strong,.sap-flow-document.cancelled > small:first-of-type { color: #b42318; }
.sap-flow-document.unverified > small:first-of-type { color: #93370d; }
.sap-chain-summary { border: 1px solid #dbe4ef; border-radius: 999px; background: #f8fafc; color: #475467; font-size: .62rem; font-weight: 800; padding: .36rem .65rem; }
.sap-document-chain { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: .7rem; align-items: stretch; }
.sap-document-step { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .7rem; align-items: start; border: 1px solid #e4e7ec; border-radius: .7rem; background: #f8fafc; padding: .85rem; }
.sap-document-step.complete { border-color: #abefc6; background: #f3fbf6; }
.sap-document-step-number { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: #e9eef5; color: #475467; font-size: .67rem; font-weight: 850; }
.sap-document-step.complete .sap-document-step-number { background: #12b76a; color: white; }
.sap-document-step-content > span,.sap-document-step-content > strong,.sap-document-step-content > small { display: block; }
.sap-document-step-content > span { color: #667085; font-size: .61rem; font-weight: 750; }
.sap-document-step-content > strong { color: #172033; font-size: .8rem; margin-top: .2rem; }
.sap-document-step-content > small { color: #667085; font-size: .61rem; margin-top: .2rem; overflow-wrap: anywhere; }
.sap-document-connector { align-self: center; color: #98a2b3; font-size: 1.15rem; font-weight: 800; }
.sap-document-connector.complete { color: #12b76a; }
.sap-document-totals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; margin: .8rem 0 0; }
.sap-document-totals > div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #e8edf3; padding-top: .65rem; }
.sap-document-totals dt { color: #667085; font-size: .64rem; }
.sap-document-totals dd { color: #344054; font-size: .7rem; font-weight: 800; margin: 0; }
.sap-operation-list { border-top: 1px solid #e8edf3; margin-top: .85rem; padding-top: .8rem; }
.sap-operation-list h3 { color: #344054; font-size: .73rem; margin: 0 0 .4rem; }
.sap-operation-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .25rem .7rem; border-left: 3px solid #d0d5dd; background: #f8fafc; margin-top: .35rem; padding: .58rem .7rem; }
.sap-operation-row span,.sap-operation-row strong { font-size: .64rem; }
.sap-operation-row strong { color: #475467; text-align: right; }
.sap-operation-row small { grid-column: 1 / -1; color: #98a2b3; font-size: .58rem; }
.sap-operation-row.complete { border-left-color: #12b76a; }
.sap-operation-row.failed,.sap-operation-row.reconcile { border-left-color: #d92d20; background: #fff8f7; }
.sap-operation-row.reconcile strong,.sap-operation-row.failed strong { color: #b42318; }
.sap-reconciliation-note { margin-top: .7rem; }
.sap-readiness-banner { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .6rem; align-items: start; border-radius: .65rem; padding: .7rem; margin: .8rem 0; }
.sap-readiness-banner > span { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: 50%; font-weight: 850; }
.sap-readiness-banner strong,.sap-readiness-banner small { display: block; }
.sap-readiness-banner strong { font-size: .7rem; }
.sap-readiness-banner small { font-size: .59rem; margin-top: .18rem; overflow-wrap: anywhere; }
.sap-readiness-banner.ready { background: #ecfdf3; color: #067647; }
.sap-readiness-banner.ready > span { background: #d1fadf; }
.sap-readiness-banner.blocked { background: #fff4e8; color: #9a3412; }
.sap-readiness-banner.blocked > span { background: #ffead5; }
.sap-preflight-list { margin-top: 0; }
.sap-preflight-panel { scroll-margin-top: 5.5rem; }
.sap-preflight-panel:focus { outline: 2px solid #84adff; outline-offset: 3px; }
.sap-preflight-panel.sap-preflight-attention { animation: sap-preflight-attention 2.2s ease-out; }
@keyframes sap-preflight-attention {
    0%, 35% { border-color: #175cd3; box-shadow: 0 0 0 5px rgba(46, 144, 250, .2), 0 14px 34px rgba(23, 92, 211, .2); }
    100% { border-color: #dfe5ed; box-shadow: 0 8px 24px rgba(9, 22, 41, .06); }
}
@media (prefers-reduced-motion: reduce) {
    .sap-preflight-panel.sap-preflight-attention { animation-duration: .01ms; }
}
.confirmation-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 1rem; background: rgba(9,22,41,.64); backdrop-filter: blur(3px); }
.confirmation-dialog { width: min(34rem,100%); background: white; border: 1px solid #dfe5ed; border-radius: .9rem; padding: 1.45rem; box-shadow: 0 24px 70px rgba(9,22,41,.3); }
.confirmation-dialog h2 { font-size: 1.35rem; margin-bottom: .55rem; }
.confirmation-dialog p { font-size: .78rem; margin-bottom: 1rem; }
.confirmation-summary { display: grid; gap: .15rem; padding: .65rem .8rem; border: 1px solid #e4e9f0; border-radius: .65rem; background: #f8fafc; }
.confirmation-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid #e8edf3; }
.confirmation-summary > div:last-child { border-bottom: 0; }
.confirmation-summary span { color: #667085; font-size: .68rem; }
.confirmation-summary strong { color: #344054; font-size: .72rem; text-align: right; }
.confirmation-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.1rem; }
.button.danger-button { background: #b42318; color: white; box-shadow: 0 6px 18px rgba(180,35,24,.18); }
.button.danger-button:hover { background: #912018; }
.admin-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 1rem; }
.state-pill { border-radius: 2rem; padding: .28rem .62rem; font-size: .64rem; font-weight: 800; }
.state-pill.active { background: #ecfdf3; color: #067647; }
.state-pill.draft { background: #fff4e8; color: #b54708; }
.tier-list { display: grid; gap: .35rem; }
.tier-list > div { display: flex; justify-content: space-between; align-items: center; padding: .7rem .75rem; background: #f8fafc; border-radius: .5rem; font-size: .72rem; color: #667085; }
.tier-list strong { color: #344054; }
.tier-list b { color: #172b4d; }
.user-list { display: grid; gap: .35rem; }
.user-list > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .65rem; border-bottom: 1px solid #edf0f4; }
.user-admin-row { appearance: none; background: transparent; border: 0; border-bottom: 1px solid #edf0f4; color: inherit; cursor: pointer; display: grid; font: inherit; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .65rem; text-align: left; width: 100%; }
.user-admin-row:hover,.user-admin-row:focus-visible { background: #f7fafc; border-radius: .6rem; outline: 2px solid rgba(33,142,156,.18); outline-offset: -2px; }
.user-avatar { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .55rem; background: #edf2f8; color: #344054; font-size: .68rem; font-weight: 850; }
.user-list strong,.user-list small { display: block; }
.user-list strong { font-size: .74rem; }
.user-list small { color: #98a2b3; font-size: .62rem; margin-top: .12rem; }
.user-list b { font-size: .62rem; }
.user-active { color: #067647; }
.user-inactive { color: #b42318; }
.smtp-admin-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 1rem; align-items: start; }
.smtp-validation-panel { position: sticky; top: 5.5rem; }
.smtp-test-message { background: #f8fafc; border: 1px solid #e4e7ec; border-radius: .55rem; color: #475467; font-size: .72rem; padding: .75rem; }
.smtp-actions { display: grid; gap: .65rem; margin-top: 1rem; }
.exchange-rate-admin-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 1rem; align-items: start; }
.exchange-rate-summary-panel { position: sticky; top: 5.5rem; }
.exchange-rate-current { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .75rem; align-items: start; border-radius: .65rem; margin-top: 1rem; padding: .85rem; }
.exchange-rate-current > span { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; font-weight: 850; }
.exchange-rate-current strong,.exchange-rate-current small,.exchange-rate-current b { display: block; }
.exchange-rate-current strong { font-size: .76rem; }
.exchange-rate-current small { font-size: .64rem; margin-top: .15rem; }
.exchange-rate-current b { font-size: 1.05rem; margin-top: .35rem; }
.exchange-rate-current.found { background: #ecfdf3; color: #067647; }
.exchange-rate-current.found > span { background: #d1fadf; }
.exchange-rate-current.missing { background: #fff4e8; color: #9a3412; }
.exchange-rate-current.missing > span { background: #ffead5; }
.exchange-rate-update-heading { border-top: 1px solid #e4e7ec; margin-top: 1.25rem; padding-top: 1.25rem; }
.exchange-rate-reason { grid-column: 1 / -1; }
.exchange-rate-confirmation { grid-column: 1 / -1; }
.exchange-rate-audit-link { display: flex; justify-content: center; margin-top: 1rem; width: 100%; }
.exchange-rate-automation-heading { margin: 2rem 0 1rem; }
.exchange-rate-automation-heading h2 { margin: .3rem 0; }
.exchange-rate-automation-heading p { color: #667085; font-size: .76rem; margin: 0; }
.exchange-rate-automation-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 1rem; align-items: start; }
.exchange-rate-currency-options { display: grid; gap: .55rem; }
.exchange-rate-currency-options > span { color: #344054; font-size: .68rem; font-weight: 750; }
.exchange-rate-automation-status { align-self: start; }
.exchange-rate-source-results { display: grid; gap: .45rem; margin-top: .75rem; }
.exchange-rate-source-results > div { background: #f8fafc; border: 1px solid #e4e7ec; border-radius: .55rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; padding: .65rem; }
.exchange-rate-source-results strong { color: #344054; font-size: .7rem; }
.exchange-rate-source-results span { color: #067647; font-size: .78rem; font-weight: 800; text-align: right; }
.exchange-rate-source-results small { color: #667085; font-size: .61rem; grid-column: 1 / -1; }
.notification-list { display: grid; }
.notification-list a { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .85rem .4rem; border-bottom: 1px solid #edf0f4; color: #344054; text-decoration: none; }
.notification-list a.unread { background: #f8fbff; }
.notification-list strong,.notification-list small { display: block; }
.notification-list strong { font-size: .75rem; }
.notification-list small { color: #98a2b3; font-size: .64rem; margin-top: .15rem; }
.notification-list b { color: #667085; font-size: .62rem; }
.notification-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #2e69b3; }
.notification-list .read .notification-dot { background: #d0d5dd; }
.address-management-grid { grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); align-items: start; }
.address-management-grid > main { display: grid; gap: 1rem; }
.address-request-panel { position: sticky; top: 5.5rem; }
.address-request-panel > label { display: block; margin-top: .8rem; }
.address-card-list { display: grid; gap: .65rem; margin-top: 1rem; }
.address-card { border: 1px solid #e4e7ec; border-radius: .65rem; background: #f8fafc; padding: .8rem; }
.address-card.default { border-color: #abefc6; background: #f3fbf6; }
.address-card header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.address-card header strong { color: #172033; font-size: .76rem; }
.address-card header span { border-radius: 999px; background: #d1fadf; color: #067647; font-size: .58rem; font-weight: 800; padding: .25rem .55rem; }
.address-card p { color: #475467; font-size: .7rem; margin: .45rem 0 .2rem; }
.address-card small { color: #98a2b3; font-size: .58rem; }
.file-selection { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid #dbe4ef; border-radius: .55rem; background: #f8fafc; color: #475467; font-size: .65rem; padding: .6rem; }
.address-review-list { display: grid; gap: .8rem; }
.address-review-card { border: 1px solid #e4e7ec; border-radius: .7rem; background: #fff; padding: .9rem; }
.address-review-card header { display: flex; justify-content: space-between; gap: 1rem; }
.address-review-card header span,.address-review-card header small,.address-review-card time { color: #667085; font-size: .62rem; }
.address-review-card header h3 { color: #172033; font-size: .86rem; margin: .2rem 0; }
.address-review-card dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; margin: .85rem 0; }
.address-review-card dl > div { border-radius: .5rem; background: #f8fafc; padding: .65rem; }
.address-review-card dt { color: #667085; font-size: .59rem; }
.address-review-card dd { color: #344054; font-size: .67rem; margin: .2rem 0 0; overflow-wrap: anywhere; }
.health-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.health-card { display: flex; gap: .9rem; align-items: flex-start; }
.health-card small { color: #98a2b3; font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.health-card h2 { margin-top: .25rem; }
.health-card p { font-size: .72rem; margin-bottom: 0; }
.health-dot { width: .65rem; height: .65rem; border-radius: 50%; margin-top: .3rem; background: #12b76a; box-shadow: 0 0 0 5px #ecfdf3; }
.health-card.warning .health-dot { background: #f79009; box-shadow: 0 0 0 5px #fff6ed; }
.health-card.blocked .health-dot { background: #f04438; box-shadow: 0 0 0 5px #fef3f2; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #12b76a; }
.invalid { outline: 1px solid #d92d20; }
.validation-message { color: #b42318; }
.blazor-error-boundary { background: #b42318; padding: 1rem; color: white; }
@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(3,1fr); } .content-grid,.form-layout,.admin-grid,.smtp-admin-grid,.exchange-rate-admin-grid,.exchange-rate-automation-grid,.review-detail-layout,.address-management-grid { grid-template-columns: 1fr; } .calculation-panel,.smtp-validation-panel,.exchange-rate-summary-panel,.address-request-panel { position: static; } .line-row { grid-template-columns: repeat(3,minmax(0,1fr)); } .line-row.compact-lines { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; grid-template-areas: "item item remove" "quantity unit unit" "price warehouse warehouse" "stock stock stock" "shipto shipto shipto"; } .line-warehouse-field { max-width: none; } }
@media (max-width: 720px) { .page-heading { align-items: flex-start; flex-direction: column; gap: 1rem; } .metric-grid,.metric-grid.four,.health-grid { grid-template-columns: repeat(2,1fr); } .process-flow { align-items: flex-start; flex-direction: column; gap: .75rem; } .process-line { height: 18px; width: 1px; margin-left: 1rem; } .field-grid,.line-row,.filters,.review-document-grid,.review-line-card dl,.sap-document-totals,.address-review-card dl { grid-template-columns: 1fr; } .review-history-list > div { grid-template-columns: 1fr; } .sap-document-chain { grid-template-columns: 1fr; } .sap-document-connector { justify-self: center; transform: rotate(90deg); } .line-row.compact-lines { grid-template-columns: 1fr auto; grid-template-areas: "item item" "quantity quantity" "unit unit" "price price" "warehouse warehouse" "stock stock" "shipto shipto" ". remove"; } .stock-metrics { grid-template-columns: 1fr; } .line-stock-status header { align-items: flex-start; } .status-code { display: none; } }
@media (max-width: 430px) { .metric-grid,.metric-grid.four,.health-grid { grid-template-columns: 1fr; } .confirmation-actions { align-items: stretch; flex-direction: column-reverse; } .confirmation-actions .button { width: 100%; } }
@media (max-width: 720px) {
    .quote-evidence-upload { align-items: stretch; flex-direction: column; }
    .evidence-upload-button { text-align: center; }
    .quote-evidence-item,.review-evidence-list article { grid-template-columns: auto minmax(0,1fr); }
    .quote-evidence-actions,.review-evidence-list article > a { grid-column: 1 / -1; justify-content: flex-end; }
    .review-evidence-list article > a { justify-self: stretch; text-align: center; }
}