/* Options > Orders > "Fix old purchase orders" drawer (includes/scripts/ux/28-doc-fix.js) + the "re-price lines" dialog and banner of the document form (28-reprice.js). Uses the --fm-* tokens. */
.fm-opt-tile.fm-opt-attn { border-color: var(--fm-warning, #b45309); box-shadow: 0 0 0 3px var(--fm-warning-bg, #fef3dc); }
.fx-wrap { padding: 2px 2px 28px; font-size: 14px; }
.fx-intro { color: var(--fm-ink-2, #3a4560); background: var(--fm-primary-50, #e9f6fd); border-radius: 12px; padding: 12px 14px; margin: 0 0 20px; line-height: 1.5; }
.fx-sec { margin-bottom: 26px; }
.fx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fx-head h3, .fx-ptitle { font-size: 16px; font-weight: 700; margin: 0; }
.fx-ptitle { margin: 10px 0 12px; }
.fx-count { display: inline-block; min-width: 22px; text-align: center; background: var(--fm-neutral-bg, #eef1f6); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--fm-ink-2, #3a4560); }
.fx-help { color: var(--fm-muted, #6b7689); font-size: 12.5px; margin: 6px 0 0; }
.fx-scroll { overflow-x: auto; border: 1px solid var(--fm-line, #e4e8f0); border-radius: 12px; background: var(--fm-surface, #fff); }
.fx-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.fx-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--fm-muted, #6b7689); padding: 9px 10px; border-bottom: 1px solid var(--fm-line, #e4e8f0); background: var(--fm-line-2, #eef1f6); white-space: nowrap; }
.fx-table td { padding: 9px 10px; border-bottom: 1px solid var(--fm-line-2, #eef1f6); vertical-align: top; }
.fx-table tr:last-child td { border-bottom: 0; }
.fx-table small { display: block; color: var(--fm-muted, #6b7689); font-size: 12px; }
.fx-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-c { width: 34px; text-align: center; }
.fx-up { color: var(--fm-success, #15803d); font-weight: 600; }
.fx-down { color: var(--fm-danger, #b91c1c); font-weight: 600; }
.fx-why { min-width: 200px; }
.fx-skip { color: var(--fm-warning, #b45309) !important; margin-top: 3px; }
.fx-sum td { background: var(--fm-line-2, #f7f9fc); font-weight: 600; }
.fx-tag { display: inline-block; background: var(--fm-neutral-bg, #eef1f6); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--fm-ink-2, #3a4560); }
.fx-empty { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 24px; border: 1px dashed var(--fm-line, #d0d5dd); border-radius: 14px; color: var(--fm-muted, #6b7689); }
.fx-empty i { font-size: 24px; color: var(--fm-success, #15803d); }
.fx-loading, .fx-busy { padding: 26px; text-align: center; color: var(--fm-muted, #6b7689); }
.fx-effects { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 10px; }
.fx-effects li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--fm-line, #e4e8f0); border-radius: 12px; background: var(--fm-surface, #fff); }
.fx-effects li > i { color: var(--fm-primary, #0369a1); font-size: 18px; width: 22px; text-align: center; margin-top: 2px; }
.fx-effects b { display: block; }
.fx-effects span { color: var(--fm-ink-2, #3a4560); line-height: 1.45; }
.fx-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; position: sticky; bottom: 0; background: linear-gradient(to top, var(--fm-surface, #fff) 70%, transparent); padding: 12px 0 4px; }
.fx-back { margin-bottom: 4px; }
details > summary { cursor: pointer; }

/* ---- re-price lines with a price list (document form: includes/scripts/ux/28-reprice.js) ---- */
.rp-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--fm-primary, #0369a1); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rp-link:hover { text-decoration: underline; }
.rp-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 12px; border-radius: 12px; background: var(--fm-warning-bg, #fef3dc); color: var(--fm-ink, #1b2437); font-size: 13px; }
.rp-banner > i { color: var(--fm-warning, #b45309); }
.rp-banner span { flex: 1 1 220px; }
.rp-banner .btn { white-space: nowrap; }
.rp-wrap { padding: 2px 2px 24px; font-size: 14px; }
.rp-wrap h4 { font-size: 15px; margin: 0 0 4px; }
.rp-listpick { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; }
.rp-listpick label { font-size: 12px; font-weight: 600; color: var(--fm-muted, #6b7689); margin: 0; }
.rp-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.rp-tot div { border: 1px solid var(--fm-line, #e4e8f0); border-radius: 12px; padding: 10px 12px; background: var(--fm-surface, #fff); }
.rp-tot small { display: block; color: var(--fm-muted, #6b7689); font-size: 12px; }
.rp-tot b { font-size: 16px; font-variant-numeric: tabular-nums; }
.rp-check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 13px; }
.rp-row-skip td { color: var(--fm-muted, #6b7689); }
.rp-old { text-decoration: line-through; color: var(--fm-muted, #6b7689); margin-right: 6px; }
.rp-locked { padding: 14px; border-radius: 12px; background: var(--fm-danger-bg, #fdeaea); color: var(--fm-danger, #b91c1c); margin: 12px 0; }
.rp-wrap .fx-table { min-width: 0; } .rp-wrap .fx-table td, .rp-wrap .fx-table th { padding: 8px 6px; } .rp-wrap .fo-chip { white-space: normal; }
@media (max-width: 640px) {
	.rp-tot { grid-template-columns: 1fr; } .fx-foot { flex-direction: column-reverse; } .fx-foot .btn { width: 100%; }
	/* the repair tables turn into one card per document on a phone (cells carry their column name in data-l) */
	.fx-wrap .fx-table { min-width: 0; } .fx-wrap .fx-table thead { display: none; } .fx-wrap .fx-table tr { display: block; padding: 8px 10px; border-bottom: 1px solid var(--fm-line, #e4e8f0); }
	.fx-wrap .fx-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: right; } .fx-wrap .fx-table td::before { content: attr(data-l); color: var(--fm-muted, #6b7689); font-size: 11.5px; text-align: left; flex: none; }
	.fx-wrap .fx-table td.fx-c::before, .fx-wrap .fx-table td:not([data-l])::before { content: none; } .fx-wrap .fx-table td.fx-c { width: auto; text-align: left; } .fx-wrap .fx-why { text-align: left; min-width: 0; flex-direction: column; gap: 2px; } .fx-wrap .fx-table small { text-align: right; }
	.fx-wrap .fx-sum td { background: none; }
}