.invoice-workspace { min-width: 0; }
.invoice-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.invoice-page-header h1 { overflow-wrap: anywhere; }
.invoice-notice { border-inline-start: 3px solid #547795; padding: .65rem 1rem; background: var(--color-surface-container); font-size: .8rem; color: var(--color-on-surface-variant); }
.invoice-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.invoice-toolbar > [data-controller=search-input] { flex: 1 1 18rem; }
.invoice-toolbar > select { flex: 0 1 13rem; }
.invoice-toolbar form { margin: 0; }
.invoice-workspace :is(button,input[type=submit],a.bg-transparent) { max-width: 100%; white-space: normal; }
.invoice-workspace .bg-transparent:not(:disabled) { color: var(--color-on-surface); border-color: var(--color-outline-variant); }
.invoice-folder, .invoice-panel { border: 1px solid var(--color-outline-variant); border-radius: .75rem; padding: 1.15rem; min-width: 0; }
.invoice-folder code { display: block; font-size: .8rem; overflow-wrap: anywhere; margin-block: .4rem; }
.invoice-file-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap: .75rem; }
.invoice-file-card { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--color-outline-variant); border-radius: .65rem; padding: 1rem; cursor: pointer; }
.invoice-file-card:has(input:checked) { border-color: var(--color-primary); background: var(--color-secondary-container); }
.invoice-file-card input { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.invoice-file-card strong { overflow-wrap: anywhere; }
.invoice-file-symbol { display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 3rem; flex-shrink: 0; border: 1px solid var(--color-outline-variant); border-radius: .3rem; font: 600 .65rem monospace; }
.invoice-workspace small { display: block; margin-top: .3rem; color: var(--color-on-surface-variant); font-size: .72rem; }
.invoice-table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--color-outline-variant); border-radius: .5rem; }
.invoice-table { width: 100%; text-align: start; font-size: .83rem; }
.invoice-table :is(th,td) { padding: .85rem 1rem; text-align: start; vertical-align: top; }
.invoice-table th { font-size: .72rem; background: var(--color-surface-container); }
.invoice-table td { border-top: 1px solid var(--color-outline-variant); }
.invoice-record-link { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.invoice-badge { display: inline-flex; gap: .35rem; align-items: center; border: 1px solid var(--color-outline-variant); border-radius: 999px; padding: .25rem .55rem; font-size: .72rem; line-height: 1.5; white-space: nowrap; }
.invoice-badge-demo { background: #e6eef6; color: #36516d; border-color: #c2d3e4; }
.invoice-state-blocked { background: var(--status-pending-bg); border-color: var(--status-pending-border); color: var(--status-pending-fg); }
.invoice-state-released { background: var(--status-success-bg); border-color: var(--status-success-border); color: var(--status-success-fg); }
.invoice-state-disputed, .invoice-state-reversed { background: var(--status-danger-bg); border-color: var(--status-danger-border); color: var(--status-danger-fg); }
.invoice-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.invoice-metrics > div { border: 1px solid var(--color-outline-variant); padding: 1rem; border-radius: .65rem; }
.invoice-metrics span { font-size: .75rem; color: var(--color-on-surface-variant); }
.invoice-metrics strong { display: block; font-size: 1.8rem; font-weight: 650; }
.invoice-confidence meter { display: block; width: 5rem; max-width: 100%; }
.invoice-detail-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
.invoice-panel h2 { font-size: 1.1rem; font-weight: 650; margin-bottom: .85rem; }
.invoice-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-block: .75rem; }
.invoice-facts dt { font-size: .73rem; color: var(--color-on-surface-variant); }
.invoice-facts dd { margin-top: .3rem; font-size: .95rem; overflow-wrap: anywhere; font-weight: 550; }
.invoice-blockers { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.invoice-blockers li { padding: .35rem .6rem; border-radius: .4rem; background: var(--status-pending-bg); color: var(--status-pending-fg); font-size: .75rem; }
.invoice-checkbox { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; margin-block: .9rem; }
.invoice-checkbox input { margin-top: .15rem; flex-shrink: 0; }
.invoice-two-fields, .invoice-secondary-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.invoice-log { border-top: 1px solid var(--color-outline-variant); padding-block: .85rem; font-size: .82rem; }
.invoice-workspace summary { cursor: pointer; }
.invoice-log-stage { padding: .8rem; margin-top: .7rem; border-radius: .4rem; background: var(--color-surface-container); }
.invoice-log-stage h3 { font-weight: 650; margin-bottom: .4rem; }
.invoice-json, .invoice-xml { max-width: 100%; max-height: 30rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .72rem/1.6 monospace; background: var(--color-surface-container); padding: .75rem; margin-top: .7rem; }
.invoice-event, .invoice-supplier-row { padding-block: .8rem; border-bottom: 1px solid var(--color-outline-variant); font-size: .8rem; }
.invoice-supplier-row { display: flex; justify-content: space-between; gap: .7rem; align-items: center; }
.invoice-posting-preview > summary { padding: .7rem .85rem; font-size: .8rem; border: 1px solid var(--color-outline-variant); border-radius: .4rem; }
.invoice-empty { padding: 2rem; text-align: center; color: var(--color-on-surface-variant); }
/* SAP GUI inspired preview only: fixed classic blue; clearly marked simulation. */
.sap-gui { border: 1px solid #68819b; border-radius: 3px; background: #dce5ef; color: #172d44; font-family: Arial, sans-serif; font-size: 12px; box-shadow: 0 2px 5px #33495a18; overflow: hidden; }
.sap-titlebar { display: flex; justify-content: space-between; align-items: center; gap: .7rem; background: linear-gradient(#5b7fa7,#345b85); color: white; padding: .6rem .7rem; font-size: 11px; }
.sap-titlebar > span:first-child { background: #d4e8fa; color: #254f7c; font-size: 14px; font-weight: bold; padding: 2px 7px; font-style: italic; }
.sap-titlebar > span:last-child { font-size: 9px; }
.sap-command { display: flex; justify-content: space-between; align-items: center; background: #bfd0e2; border-bottom: 1px solid #9bafc4; padding: .4rem .65rem; }
.sap-command code { background: #f7f9fc; border: 1px solid #829ab2; padding: 3px 12px; }
.sap-body { padding: .8rem; }
.sap-tabs { display: flex; gap: .2rem; margin-block: .5rem .9rem; border-bottom: 1px solid #8ba3bb; }
.sap-tabs span { padding: .4rem .6rem; border: 1px solid #9eb1c4; background: #c8d5e4; border-radius: 3px 3px 0 0; }
.sap-tabs .sap-tab-active { background: #f1f5fa; border-bottom: 0; font-weight: bold; }
.sap-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-bottom: 1rem; }
.sap-fields dt { font-size: 10px; color: #3e5771; }
.sap-fields dd { background: #f7f9fc; padding: .35rem .4rem; min-height: 1.7rem; border: 1px solid #9eb1c4; overflow-wrap: anywhere; margin-top: .2rem; }
.sap-document-number { font-weight: bold; font-size: 13px; }
.sap-items { width: 100%; border-collapse: collapse; font-size: 10px; }
.sap-items :is(th,td) { border: 1px solid #a6b6c8; padding: .4rem; text-align: start; }
.sap-items th { background: #b6c9dd; }
.sap-items td { background: #f3f6fa; }
.sap-fields .sap-blocked { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.sap-fields .sap-released { background: var(--status-success-bg); color: var(--status-success-fg); }
.sap-tax-row { display: grid; gap: .5rem; font-size: 10px; margin-top: .8rem; }
.sap-statusbar { padding: .5rem .7rem; border-top: 1px solid #9eb1c4; background: #c5d4e4; font-size: 10px; }
@media(min-width:1200px) { .invoice-detail-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); } .invoice-preview-column { position: sticky; top: 5rem; align-self: start; max-height: calc(100dvh - 6rem); overflow: auto; } }
@media(max-width:600px) { .invoice-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .invoice-two-fields,.invoice-secondary-actions { grid-template-columns: minmax(0,1fr); } .invoice-facts,.sap-fields { grid-template-columns: minmax(0,1fr); } .invoice-toolbar { align-items: stretch; } .invoice-toolbar > * { max-width: 100%; } }
.invoice-upload-zone { border: 2px dashed var(--color-outline-variant); border-radius: .75rem; padding: 1.5rem; background: var(--color-surface-container); }
.invoice-upload-zone.is-dragging { border-color: var(--color-primary); background: var(--color-secondary-container); }
.invoice-upload-zone p { font-size: .8rem; margin-block: .5rem 1rem; }
.invoice-picker { display: block; border: 1px solid var(--color-outline-variant); border-radius: .4rem; padding: .6rem; font-size: .85rem; min-width: 0; }
.invoice-picker input { display: block; max-width: 100%; margin-top: .4rem; }
.invoice-upload-zone li button { text-align: start; overflow-wrap: anywhere; padding: .4rem; text-decoration: underline; }
.sap-tabs { flex-wrap: wrap; }
.sap-tabs button { padding: .5rem .65rem; border: 1px solid #8ca4bc; background: linear-gradient(#e0e9f3,#bbcde0); border-radius: 4px 4px 0 0; color: #172d44; cursor: pointer; font-size: 11px; }
.sap-tabs button[aria-selected=true] { background: #f4f7fb; border-bottom-color: #f4f7fb; font-weight: bold; }
.sap-tabs button:focus-visible, .sap-gui [role=tabpanel]:focus-visible { outline: 2px solid #125db0; outline-offset: 2px; }
.sap-gui [hidden] { display: none !important; }
.sap-gui [role=tabpanel] { min-height: 15rem; }
.sap-display-note { font-size: 10px; margin-block: .5rem; color: #405c78; }
.sap-section-title { font-weight: bold; margin-block: .8rem; }
.sap-document-alert { padding: .5rem; background: #ffe7d8; border: 1px solid #c58968; font-size: 11px; }
.sap-items tfoot { background: #d5e1ec; }
/* Private XML and its readable invoice view stay beside the review form. */
.invoice-document-preview { border: 1px solid var(--color-outline-variant); border-radius: .75rem; background: var(--color-surface); overflow: hidden; }
.invoice-document-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem; }
.invoice-document-header h2 { font-size: 1.1rem; font-weight: 650; }
.invoice-source-filename { font-size: .75rem; color: var(--color-on-surface-variant); overflow-wrap: anywhere; margin-top: .3rem; }
.invoice-document-tabs { display: flex; gap: .25rem; border-block: 1px solid var(--color-outline-variant); padding: .4rem .8rem 0; background: var(--color-surface-container); }
.invoice-document-tabs button { cursor: pointer; padding: .65rem .85rem; border-bottom: 3px solid transparent; font-size: .85rem; }
.invoice-document-tabs button[aria-selected=true] { font-weight: 650; border-bottom-color: var(--color-primary); background: var(--color-surface); }
.invoice-document-preview [hidden] { display: none !important; }
.invoice-document-preview [role=tabpanel] { padding: 1rem; }
.invoice-document-note { font-size: .75rem; line-height: 1.6; color: var(--color-on-surface-variant); margin-bottom: .85rem; }
.invoice-paper { background: #fff; color: #253242; border: 1px solid #d9dfe5; border-radius: .4rem; padding: 1rem; }
.invoice-paper > header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; border-bottom: 2px solid #d9dfe5; padding-bottom: 1rem; }
.invoice-paper h3 { font-size: 1.15rem; font-weight: 650; overflow-wrap: anywhere; }
.invoice-paper .invoice-facts { margin-block: 1.2rem; }
.invoice-paper-items :is(th,td) { padding: .6rem; font-size: .72rem; }
.invoice-document-totals { max-width: 23rem; margin-inline-start: auto; margin-top: 1.2rem; }
.invoice-document-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; font-size: .8rem; }
.invoice-document-total { margin-top: .3rem; border-top: 2px solid #d9dfe5; font-weight: 700; font-size: .95rem !important; }
.invoice-document-totals dd { text-align: end; }
.invoice-xml-legend { display: flex; flex-wrap: wrap; gap: 1rem; font: 600 .7rem monospace; }
.invoice-xml-highlighted { background: #f8fafc; color: #243343; border: 1px solid #d9dfe5; font: .78rem/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; tab-size: 2; max-height: 65dvh; padding: 1rem; }
.xml-tag { color: #075985; font-weight: 600; }
.xml-attribute { color: #6b21a8; }
.xml-value { color: #166534; }
.xml-comment { color: #64748b; font-style: italic; }
.xml-cdata { color: #92400e; }
.invoice-document-preview :is(button,[tabindex]):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media(max-width:600px) { .invoice-document-header { align-items: flex-start; } .invoice-document-preview [role=tabpanel] { padding: .75rem; } .invoice-paper { padding: .75rem; } }
#invoice-document-preview-title { scroll-margin-top: 6rem; }
.invoice-intake-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.invoice-intake-layout > form { min-width: 0; }
.invoice-file-choice { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1; cursor: pointer; }
.invoice-intake-layout .invoice-file-card { flex-wrap: wrap; }
.invoice-file-card.is-preview-selected, .invoice-local-file.is-preview-selected { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.invoice-local-file { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: .4rem; }
.invoice-receive-preview { min-width: 0; scroll-margin-top: 6rem; }
.invoice-receive-preview > :not(header) { margin-inline: 1rem; margin-bottom: 1rem; }
.invoice-receive-preview [hidden] { display: none !important; }
.invoice-receive-preview [role=status] { display: flex; align-items: center; gap: .5rem; }
@media(min-width:1200px) { .invoice-intake-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .invoice-receive-preview { position: sticky; top: 5rem; } }