/* The draft as it will look in the customer's ERP: a demo picture, never the ERP itself (design: "ERP previews (demo)").
   Only the general look of Odoo or QuickBooks: our own icons and type, no logos, a Demo strip and a trademark line.
   Everything is scoped to .erp-preview (with .odoo or .qbo), so the preview can sit inside another page (the demo). */
.erp-preview { flex: 1; display: flex; flex-direction: column; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
/* inside another page: full width, nothing stuck to the screen */
.erp-preview.inset .wrap { max-width: none; }
.erp-preview.inset.qbo footer { position: static; }
.erp-preview, .erp-preview * { box-sizing: border-box; }
.erp-preview a { color: inherit; }
.erp-preview .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.erp-preview .demo { background: #0f766e; color: #fff; font-size: 14px; }
.erp-preview .demo .wrap { padding-top: 10px; padding-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.erp-preview .demo .tag { padding: 2px 10px; border-radius: 99px; background: #fff; color: #0f5f58; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.erp-preview .demo .msg { flex: 1 1 320px; }
.erp-preview .demo a { color: #fff; font-weight: 600; }
.erp-preview .legal { margin: 6px 0 0; font-size: 12px; color: #6b7280; }
.erp-preview .wait { margin: 0; padding: 10px 14px; border-radius: 4px; background: #fff7e6; color: #92400e; font-size: 14px; }
.erp-preview table { width: 100%; border-collapse: collapse; font-size: 14px; }
.erp-preview th, .erp-preview td { padding: 10px 8px; text-align: left; vertical-align: top; }
.erp-preview .r { text-align: right; white-space: nowrap; }
.erp-preview .scroll { overflow-x: auto; }
.erp-preview button[disabled] { cursor: not-allowed; opacity: .55; font: inherit; }
.erp-preview .muted { color: #6b7280; }
.erp-preview .note { font-size: 13px; line-height: 1.55; color: #374151; white-space: pre-line; }

/* the Odoo look */
.erp-preview.odoo { background: #f3f4f6; color: #1f2937; }
.erp-preview.odoo .appbar { background: #6b4a66; color: #fff; }
.erp-preview.odoo .appbar .wrap { height: 46px; display: flex; align-items: center; gap: 22px; font-size: 14px; }
.erp-preview.odoo .appbar .app { font-size: 16px; font-weight: 600; }
.erp-preview.odoo .appbar .menu { opacity: .9; }
.erp-preview.odoo .appbar .co { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.erp-preview.odoo .appbar .av { width: 28px; height: 28px; border-radius: 6px; background: #a07a98; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.erp-preview.odoo main { flex: 1; padding-top: 16px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 12px; }
.erp-preview.odoo .crumbs { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.erp-preview.odoo .crumbs span:first-child { color: #6b4a66; }
.erp-preview.odoo .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.erp-preview.odoo .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.erp-preview.odoo .btn { font-size: 14px; padding: 7px 14px; border-radius: 4px; border: 1px solid #d1d5db; background: #fff; color: #374151; }
.erp-preview.odoo .btn.main { border: none; background: #8a6a84; color: #fff; }
.erp-preview.odoo .stages { list-style: none; margin: 0; padding: 0; display: flex; font-size: 13px; }
.erp-preview.odoo .stages li { padding: 6px 16px 6px 20px; background: #e5e7eb; color: #4b5563; margin-left: -6px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.erp-preview.odoo .stages li:first-child { margin-left: 0; padding-left: 14px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.erp-preview.odoo .stages li:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); }
.erp-preview.odoo .stages li.on { background: #6b4a66; color: #fff; font-weight: 600; }
.erp-preview.odoo .cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.erp-preview.odoo .sheet { flex: 999 1 640px; min-width: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; padding: 28px 32px; display: flex; flex-direction: column; gap: 22px; }
.erp-preview.odoo h1 { margin: 0; font-size: 30px; font-weight: 600; }
.erp-preview.odoo .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 40px; font-size: 14px; }
.erp-preview.odoo .fields > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px 12px; align-content: start; }
.erp-preview.odoo .fields b { font-weight: 600; }
.erp-preview.odoo .link { color: #6b4a66; }
.erp-preview.odoo .tabs { display: flex; gap: 2px; border-bottom: 1px solid #e5e7eb; font-size: 14px; margin-bottom: -12px; }
.erp-preview.odoo .tabs span { padding: 8px 14px; color: #6b7280; }
.erp-preview.odoo .tabs span.on { border: 1px solid #e5e7eb; border-bottom-color: #fff; margin-bottom: -1px; border-radius: 4px 4px 0 0; font-weight: 600; color: #1f2937; }
.erp-preview.odoo thead tr { border-bottom: 2px solid #e5e7eb; }
.erp-preview.odoo th { font-weight: 600; }
.erp-preview.odoo tbody tr { border-bottom: 1px solid #f3f4f6; }
.erp-preview.odoo .foot { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.erp-preview.odoo .foot .note { flex: 1 1 320px; min-width: 0; background: #fff8e1; border-radius: 4px; padding: 12px 14px; }
.erp-preview.odoo .foot .note b { display: block; margin-bottom: 4px; color: #1f2937; }
.erp-preview.odoo .totals { flex: 0 1 300px; display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; font-size: 14px; }
.erp-preview.odoo .totals span { text-align: right; }
.erp-preview.odoo .totals .t { font-weight: 700; border-top: 1px solid #e5e7eb; padding-top: 8px; }
.erp-preview.odoo .totals .small { grid-column: 1 / -1; font-size: 12px; color: #6b7280; }
.erp-preview.odoo aside { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.erp-preview.odoo aside .btn { font-size: 13px; padding: 5px 12px; }
.erp-preview.odoo .msg { display: flex; gap: 10px; align-items: flex-start; }
.erp-preview.odoo .msg .who { flex: none; width: 32px; height: 32px; border-radius: 6px; background: #0f766e; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.erp-preview.odoo .msg div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.erp-preview.odoo .muted { color: #6b7280; }

/* the QuickBooks look */
.erp-preview.qbo { background: #f4f5f8; color: #2b2f36; }
.erp-preview.qbo header.top { background: #fff; border-bottom: 1px solid #dcdfe6; }
.erp-preview.qbo header.top .wrap { height: 56px; display: flex; align-items: center; gap: 14px; }
.erp-preview.qbo header.top .title { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.erp-preview.qbo header.top .co { margin-left: auto; font-size: 14px; color: #6b7280; }
.erp-preview.qbo main { flex: 1; padding-top: 20px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 16px; }
.erp-preview.qbo .sheet { background: #fff; border: 1px solid #dcdfe6; border-radius: 6px; padding: 24px 28px; display: flex; flex-direction: column; gap: 22px; }
.erp-preview.qbo .row { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-start; }
.erp-preview.qbo .field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; min-width: 0; font-size: 13px; }
.erp-preview.qbo .field > span:first-child { font-weight: 600; color: #4b5563; }
.erp-preview.qbo .box { border: 1px solid #c5cad3; border-radius: 4px; padding: 8px 10px; font-size: 14px; min-height: 37px; overflow-wrap: anywhere; }
.erp-preview.qbo .amount { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.erp-preview.qbo .amount span:first-child { font-size: 12px; font-weight: 600; color: #6b7280; letter-spacing: .04em; }
.erp-preview.qbo .amount span:last-child { font-size: 34px; font-weight: 700; }
.erp-preview.qbo .grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
.erp-preview.qbo .pill { align-self: flex-start; padding: 3px 10px; border-radius: 99px; background: #eef0f3; font-size: 13px; }
.erp-preview.qbo thead tr { color: #4b5563; font-size: 12px; letter-spacing: .03em; border-bottom: 1px solid #dcdfe6; }
.erp-preview.qbo th { font-weight: 600; }
.erp-preview.qbo tbody tr { border-bottom: 1px solid #eef0f3; }
.erp-preview.qbo .foot { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.erp-preview.qbo .foot .field { flex: 1 1 340px; }
.erp-preview.qbo .totals { flex: 0 1 300px; display: grid; grid-template-columns: 1fr auto; gap: 8px 28px; font-size: 14px; }
.erp-preview.qbo .totals span { text-align: right; }
.erp-preview.qbo .totals span:nth-child(odd) { color: #4b5563; }
.erp-preview.qbo .totals .t { font-weight: 700; color: #2b2f36 !important; border-top: 1px solid #dcdfe6; padding-top: 8px; }
.erp-preview.qbo .totals .small { grid-column: 1 / -1; font-size: 12px; color: #6b7280 !important; }
.erp-preview.qbo footer { position: sticky; bottom: 0; background: #2b2f36; color: #fff; }
.erp-preview.qbo footer .wrap { padding-top: 12px; padding-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.erp-preview.qbo footer button { font-size: 14px; padding: 8px 16px; border-radius: 99px; border: 1px solid #9ca3af; background: transparent; color: #fff; }
.erp-preview.qbo footer button.main { border: none; background: #2e8b3a; font-weight: 600; padding: 8px 18px; }
@media (max-width: 640px) {
  .erp-preview .wrap { padding-left: 16px; padding-right: 16px; }
  .erp-preview.odoo .appbar .menu, .erp-preview.odoo .appbar .co span.name { display: none; }
  .erp-preview.odoo .sheet, .erp-preview.qbo .sheet { padding: 20px 16px; }
  .erp-preview.odoo .fields > div { grid-template-columns: 130px 1fr; }
}