:root {
    --brand-blue: #155EEF;
    --brand-blue-dark: #0E42B3;
    --brand-blue-light: #EAF1FF;
    --app-bg: #F4F7FB;
    --surface: #FFFFFF;
    --border: #E2E8F0;
    --text: #1E293B;
    --text-muted: #64748B;
    --success: #16A34A;
    --success-bg: #ECFDF3;
    --danger: #DC2626;
    --danger-bg: #FEF2F2;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--app-bg);
    color: var(--text);
    font-family: "Segoe UI", "Segoe UI Web", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

h1, h2, h3, h4 {
    color: var(--text);
    font-weight: 600;
    margin: 0;
}

a {
    color: var(--brand-blue);
}

/* ---- Sticky top area: ONE compact card holding the page title, subtitle and stepper,
   separated only by a hairline divider — not two separately-bordered/margined blocks.
   Stays visible while the step content below scrolls inside NaviERP's own .d365-body
   scroll container. The --scanner-sticky-h value below is measured from this exact
   compact layout (see the comment above .step-header-row) — re-measure if this block's
   own padding/font-size ever changes. ---- */
:root {
    --scanner-sticky-h: 88px;
}

.scanner-sticky-top {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 14px 4px;
}

/* ---- Per-step header row: title (+ optional subtitle) on the left, the step's own
   primary action button mirrored on the right. Sticks just below .scanner-sticky-top so
   the current step's context and its Next/Save action stay visible while only the
   step's own content (table/list) scrolls underneath. ---- */
.step-header-row,
.scanned-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    position: sticky;
    top: var(--scanner-sticky-h);
    z-index: 30;
    background: var(--surface);
    padding-bottom: 6px;
}

.step-header-row .panel-title,
.scanned-preview-header .panel-title {
    margin-bottom: 0;
}

/* ---- Page header: title consumes only the space its text needs — no hero/dashboard
   padding, no vertical centering in a tall container. ---- */
.page-header {
    margin-bottom: 0;
}

.page-header h1 {
    font-size: 0.98rem;
    line-height: 1.25;
}

.page-header p {
    margin: 1px 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.25;
}

/* ---- Stepper: a plain row inside .scanner-sticky-top (no own border/card/margin —
   .scanner-sticky-top already provides the card chrome), separated from the title by
   a hairline divider only. ---- */
.stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding: 5px 0 0;
    margin-top: 5px;
}

.stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
}

.stepper-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 60%;
    right: -40%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.stepper-item.completed:not(:last-child)::after {
    background: var(--brand-blue);
}

.stepper-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.62rem;
    background: var(--surface);
    border: 2px solid var(--border);
    color: var(--text-muted);
    z-index: 1;
}

.stepper-item.active .stepper-circle {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    background: var(--brand-blue-light);
}

.stepper-item.completed .stepper-circle {
    border-color: var(--brand-blue);
    background: var(--brand-blue);
    color: #fff;
}

.stepper-label {
    margin-top: 2px;
    font-size: 0.64rem;
    line-height: 1.15;
    color: var(--text-muted);
}

.stepper-item.active .stepper-label {
    color: var(--brand-blue);
    font-weight: 600;
}

.stepper-item.completed .stepper-label {
    color: var(--text);
}

.stepper-item.clickable {
    cursor: pointer;
}

.stepper-item.clickable:hover .stepper-label {
    color: var(--brand-blue);
}

/* ---- Card / panel: dense ERP work-screen padding, not a dashboard card ---- */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}

.panel + .panel {
    margin-top: 10px;
}

.panel-title {
    font-size: 1rem;
    margin-bottom: 0;
}

.panel-subtitle {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-bottom: 8px;
}

/* ---- Dropzone ---- */
.dropzone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: 12px;
    background: var(--brand-blue-light);
    padding: 48px 24px;
    text-align: center;
    transition: border-color 0.15s ease;
}

.dropzone.drag-active {
    border-color: var(--brand-blue);
}

.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.dropzone-icon {
    font-size: 2.5rem;
    color: var(--brand-blue);
    margin-bottom: 12px;
}

.dropzone-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.dropzone-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ---- File info summary ---- */
.file-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 16px 20px;
    background: var(--brand-blue-light);
    border-radius: 10px;
    margin-bottom: 16px;
}

.file-summary-item {
    display: flex;
    flex-direction: column;
}

.file-summary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.file-summary-value {
    font-weight: 600;
    font-size: 0.95rem;
}

/* ---- Preview surfaces ---- */
.preview-surface {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #FAFBFD;
    overflow: hidden;
}

.preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-wrap: wrap;
}

.preview-toolbar .page-indicator {
    font-size: 0.85rem;
    color: var(--text-muted);
    min-width: 90px;
    text-align: center;
}

.preview-canvas-wrap {
    max-height: 640px;
    overflow: auto;
    display: flex;
    justify-content: center;
    padding: 16px;
}

.image-preview-wrap {
    max-height: 640px;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
}

.image-preview-wrap img {
    transition: width 0.15s ease;
}

/* ---- Tables ---- */
.data-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* Mapping tables host FluentSelect/FluentCombobox dropdowns; those popups are clipped/
   mispositioned inside an overflow:auto ancestor, so this variant stays overflow:visible. */
.mapping-table-wrap {
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: 10px;
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table.data-table th {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

table.data-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

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

table.data-table tbody tr:hover {
    background: #F8FAFF;
}

/* Read-only derived cell (Sale Qty) */
table.data-table td.calculated-cell {
    background: #F4F7FB;
    color: var(--text-muted);
    font-weight: 600;
}

/* Live totals row */
table.data-table tfoot tr.total-row td {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    font-weight: 700;
    border-top: 2px solid var(--brand-blue);
    border-bottom: none;
}

/* ---- Scanned Preview / Column Mapping / Product Mapping: denser row height so more
   rows fit without scrolling. No table-layout:fixed here (unlike compact-table) since
   the column count is dynamic, driven by whatever columns the document actually had. ---- */
table.data-table.scanned-compact {
    font-size: 0.78rem;
}

table.data-table.scanned-compact th,
table.data-table.scanned-compact td {
    padding: 3px 10px;
    line-height: 1.25;
}

/* Mapping rows host FluentSelect/FluentCombobox — Fluent's own density token shrinks
   the control height to match the tighter row padding above. */
.mapping-table-wrap fluent-select,
.mapping-table-wrap fluent-combobox {
    --base-height-multiplier: 7;
}

/* ---- Column/Product Mapping status badges: compact colored pill + icon, sized to sit
   inside the existing dense table row without increasing row height. ---- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.status-badge svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.status-badge-not-mapped {
    background: var(--danger-bg);
    color: var(--danger);
}

.status-badge-suggested {
    /* Pure #FFFF00 is unreadable on a white pill; this amber/gold reads as "yellow" while
       staying legible, matching the same readability reasoning as --danger/--success. */
    background: #FEF3C7;
    color: #B45309;
}

.status-badge-mapped {
    background: var(--success-bg);
    color: var(--success);
}

/* ---- Status-group dividers: a full-width line marking the boundary between
   Not Mapped / Suggested / Mapped groups. Only rendered by the Razor markup where a
   real transition exists, so an empty group never produces an empty divider.
   Selector specificity (two classes + tag, inside .mapping-table-wrap) intentionally
   outweighs the base .scanned-compact td padding rule without needing !important. ---- */
.mapping-table-wrap tr.status-divider td {
    padding: 0;
    height: 3px;
    line-height: 0;
    border-bottom: none;
}

.status-divider-notmapped td {
    background: var(--danger);
    opacity: 0.55;
}

.status-divider-suggested td {
    background: #B45309;
    opacity: 0.55;
}

.status-divider-mapped td {
    background: var(--success);
    opacity: 0.55;
}

/* ---- Final Preview: compact full-width table (fits without horizontal scrolling) ---- */
.final-table-wrap {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

table.data-table.compact-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.78rem;
    /* Fluent's own density token: shrinks the number-field controls to ~28px natively */
    --base-height-multiplier: 7;
}

table.data-table.compact-table th,
table.data-table.compact-table td {
    padding: 3px 6px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Numeric columns: short values, so keep them tight and right-aligned */
table.data-table.compact-table th.num,
table.data-table.compact-table td.num {
    text-align: right;
    white-space: nowrap;
}

/* Inputs fill their column instead of forcing a fixed pixel width */
table.data-table.compact-table fluent-number-field {
    width: 100%;
    min-width: 0;
}

table.data-table.compact-table tfoot tr.total-row td {
    padding: 4px 6px;
}

/* Derived Sale Qty: shaded so it reads as read-only, but dark enough to stay legible */
table.data-table.compact-table td.calculated-cell {
    color: var(--text);
}

/* ---- Scanning/loading card (Upload step, while _isScanning is true). A compact,
   centered card: icon + heading, a 4-stage horizontal progress stepper, then a labeled
   progress bar. Stage/percent values are a client-side simulation (see UploadStep.razor's
   StartSimulatedProgress) — this is presentation only, not a new scanning mechanism. ---- */
.scan-loading-card {
    max-width: 480px;
    margin: 8px auto;
    padding: 20px 24px;
    text-align: center;
}

.scan-loading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.scan-loading-title {
    font-size: 1rem;
    margin: 0 0 2px;
}

.scan-loading-subtitle {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0 0 18px;
}

/* ---- Horizontal stage stepper ---- */
.scan-stage-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 18px;
}

.scan-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 92px;
}

.scan-stage-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.scan-stage-circle fluent-progress-ring {
    width: 14px;
    height: 14px;
}

.scan-stage-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
}

.scan-stage.done .scan-stage-circle {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.scan-stage.active .scan-stage-circle {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.scan-stage-label {
    font-size: 0.68rem;
    line-height: 1.2;
    color: var(--text-muted);
}

.scan-stage.active .scan-stage-label {
    color: var(--brand-blue-dark);
    font-weight: 600;
}

.scan-stage.done .scan-stage-label {
    color: var(--text);
}

.scan-stage-connector {
    height: 2px;
    flex: 1;
    max-width: 36px;
    background: var(--border);
    margin-top: 12px;
}

.scan-stage-connector.done {
    background: var(--success);
}

/* ---- Progress bar box ---- */
.scan-progress-box {
    text-align: left;
}

.scan-progress-text {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.scan-progress-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scan-progress-bar-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--brand-blue-light);
    overflow: hidden;
}

.scan-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--brand-blue);
    transition: width 0.3s ease;
}

.scan-progress-percent {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-blue-dark);
    min-width: 32px;
    text-align: right;
}

/* ---- Scanned Preview header row (title/subtitle + View Original button) ---- */
.scanned-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.scanned-preview-header fluent-button {
    flex-shrink: 0;
}

.step-header-row fluent-button,
.step-header-actions {
    flex-shrink: 0;
}

.step-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Statement Information strip (only rendered when metadata was actually found) ---- */
.statement-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 6px 12px;
    margin-bottom: 8px;
    background: #F4F7FB;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.78rem;
}

.statement-info-title {
    font-weight: 600;
    color: var(--text);
}

.statement-info-item {
    color: var(--text-muted);
}

.statement-info-item strong {
    color: var(--text);
    font-weight: 600;
}

/* ---- Scan summary strip (Scanned Preview) ---- */
.scan-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 6px 12px;
    margin-bottom: 8px;
    background: var(--brand-blue-light);
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    font-size: 0.78rem;
}

.scan-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--brand-blue-dark);
}

.scan-summary-item {
    color: var(--text-muted);
}

.scan-summary-item strong {
    color: var(--text);
    font-size: 0.86rem;
}

/* ---- Inline validation (Final Preview) ---- */
table.data-table.compact-table td.invalid fluent-number-field::part(root) {
    border-color: var(--danger);
    outline: 1px solid var(--danger);
}

.inline-error {
    font-size: 0.76rem;
    color: var(--danger);
    white-space: nowrap;
}

/* ---- Final Preview: marginally tighter than the (already compact) base .panel ---- */
.panel.compact-panel {
    padding: 10px 14px;
}

/* ---- Actions row ---- */
.actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 12px;
    flex-wrap: wrap;
}

.actions-row .spacer {
    flex: 1;
}

/* ---- Banners ---- */
.banner {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.9rem;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.banner.error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #FCA5A5;
}

.banner.info {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    border: 1px solid #BFDBFE;
}

/* ---- Loading state ---- */
.loading-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.loading-panel h3 {
    margin-top: 20px;
}

.loading-panel p {
    color: var(--text-muted);
    margin-top: 4px;
}

/* ---- Success state ---- */
.success-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 16px;
}

/* ---- Accordion sections (Statement Information / Extracted Data / Column Mappings /
   Product Mappings): compact header, minimal margins around the accordion itself.
   Fluent's fluent-accordion-item internal stylesheet (confirmed via its adopted
   stylesheet, not a simple <style> tag) makes .heading a CSS grid whose row height is
   set by its TALLEST grid cell — not by the button. That tallest cell is .icon (part
   "icon"): width/height = (--base-height-multiplier + --density) * --design-unit,
   default 32px, plus an 8px all-round margin baked into the same rule — 48px total,
   which is what was actually forcing the old oversized header, not padding (the
   button's own padding was already 4px 10px). ::part(button)'s own `margin: 12px 0`
   and ::part(region)'s default 8px padding added further height on top of that. ---- */
fluent-accordion {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

fluent-accordion-item::part(heading) {
    padding: 0;
}

fluent-accordion-item::part(button) {
    margin: 0;
    padding: 4px 10px;
    min-height: 0;
}

fluent-accordion-item::part(icon) {
    width: 16px;
    height: 16px;
    margin: 4px;
}

fluent-accordion-item::part(region) {
    padding: 4px 8px 8px;
}

/* ---- Sheet tabs (Excel preview) ---- */
.sheet-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sheet-tab {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
}

.sheet-tab.active {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}

@media (max-width: 640px) {
    .stepper {
        flex-wrap: wrap;
        gap: 16px 0;
    }

    .stepper-item {
        flex: 0 0 33%;
    }

    .actions-row {
        flex-direction: column;
        align-items: stretch;
    }
}