/* MODIFY INVOICE (Thomas, 2026-10-10, approving the mockup). The quote tool's modify mode, the review of
   the invoice before and after, and the saved screen read back from QuickBooks. ECR's site only: the generator for
   Sam's page drops this stylesheet. Every colour is var(--dk-<role>, <light>), with its dark value in index.html's
   html.ecr-dark (test/dark-mode.test.js); the invoice sheet is paper, white in both appearances. */

/* ---- the quote tool, in its modify mode ---- */
.mi-banner { display: flex; flex-direction: column; gap: 4px; margin: 14px 16px 0; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--dk-accent-line, #c9bfe3); background: var(--dk-tint-accent, #f6f3ff); color: var(--dk-ink, #1a1a1a); font-size: 13.5px; line-height: 1.45; }
.mi-banner-head { font-family: 'Raleway', Helvetica, Arial, sans-serif; font-size: 15.5px; color: var(--dk-accent-text, var(--purple)); }
.mi-banner-rule { font-size: 12.5px; color: var(--dk-ink-2, #46555e); }
/* What the mode puts away: the send row and panel (Review changes takes their place), the tool's own headline
   (#miPrice is the invoice's), the return trip (one-trip invoices, for now), On-Demand, and its own notes. */
.mi-on #resultCard > .quote-total, .mi-on #sendQuoteRow, .mi-on #sendQuotePanel, .mi-on #sendQuoteStatus, .mi-on #textQuoteBtn, .mi-on #emailQuoteBtn,
.mi-on #repricedNote, .mi-on #returnOpt, .mi-on #discountNote, .mi-on #tripTypeTabs [data-type="rideshare"] { display: none !important; }
.mi-price { margin-bottom: 6px; }
.mi-price .mi-qt { margin-bottom: 8px; }
/* The headline's struck figure only: the review's "As it is now" cells are .mi-was too, and are never struck. */
.mi-qt .mi-was { font-size: 15px; color: var(--dk-ink-2, #46555e); text-decoration: line-through; }
.mi-line { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--dk-ink, #1a1a1a); text-align: center; }
.mi-warn { color: var(--dk-warn-text, #7a4f00); font-weight: 600; }
p.mi-warn { margin: 0 0 10px; font-size: 13px; text-align: center; }
.mi-stale { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: var(--dk-warn-soft, #fff4dc); color: var(--dk-warn-text, #7a4f00); }
.mi-review { width: 100%; }
.mi-review:disabled { opacity: 0.55; cursor: not-allowed; }
.mi-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--dk-ink-2, #46555e); }
.mi-price > .mi-hint { text-align: center; margin-bottom: 8px; }
.mi-center { text-align: center; }
#miAhWarn { margin: -6px 0 14px 28px; }
/* The discount note, drawn as the staff app draws its own (#discountNote.applied): green, or amber under $2.25/mi. */
#miDiscNote { color: var(--dk-good-text, #1e7d3c); font-weight: 600; }
#miDiscNote.mi-warn { color: var(--dk-warn-text, #7a4f00); }

/* ---- closing with changes asks first ---- */
.qf-ask-wrap { position: fixed; inset: 0; z-index: 66; display: grid; place-items: center; background: rgba(26, 18, 54, 0.32); padding: 16px; }
.qf-ask { width: min(440px, 100%); border-radius: 14px; padding: 20px; background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a);
  border: 1px solid var(--dk-line, #dfe3e8); box-shadow: 0 18px 50px rgba(15, 20, 40, 0.28); }
.qf-ask h3 { margin: 0 0 6px; font: 800 17px 'Raleway', Helvetica, Arial, sans-serif; }
.qf-ask p { margin: 0 0 14px; font-size: 14px; color: var(--dk-ink-2, #46555e); }

/* ---- the review and the saved screen: a fly-out over the quote tool, 1080px ---- */
.mi-scrim { position: fixed; inset: 0; background: rgba(26, 18, 54, 0.32); z-index: 60; }
.mi-fly { position: fixed; top: 0; right: 0; bottom: 0; width: min(1080px, 100%); z-index: 61; display: flex; flex-direction: column;
  background: var(--dk-page, #f4f6f8); color: var(--dk-ink, #1a1a1a); border-left: 1px solid var(--dk-line, #dfe3e8);
  box-shadow: -10px 0 30px rgba(15, 61, 92, 0.18); animation: miFly 0.18s ease-out; outline: none; }
.mi-scrim[hidden], .mi-fly[hidden] { display: none; }
@keyframes miFly { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mi-fly { animation: none; } }
.mi-fly[aria-busy="true"] .mi-body { cursor: progress; }
.mi-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--dk-surface, #fff); border-bottom: 1px solid var(--dk-line, #dfe3e8); }
.mi-head-title { flex: 1; min-width: 0; }
.mi-head h2 { margin: 0; font: 800 20px 'Raleway', Helvetica, Arial, sans-serif; }
.mi-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 18px 20px; }
/* As the mockup lays it out: the cards about 400px, the invoice sheet the rest (about 620px in the 1080px fly-out). */
.mi-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 18px; align-items: start; }
.mi-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mi-card { background: var(--dk-surface, #fff); border: 1px solid var(--dk-line, #e3e6ea); border-radius: 12px; padding: 14px 16px; }
.mi-card[hidden] { display: none; }
.mi-card h3, .mi-offer h3 { margin: 0 0 8px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-accent-text, var(--purple)); }
.mi-cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mi-cmp th { text-align: left; font-size: 12.5px; padding: 4px 6px 6px; color: var(--dk-ink-2, #46555e); }
.mi-cmp td { padding: 6px; vertical-align: top; border-top: 1px solid var(--dk-line, #e8eaee); overflow-wrap: anywhere; }
.mi-cmp td:first-child { width: 28%; color: var(--dk-ink-2, #46555e); }
.mi-cmp .mi-was { color: var(--dk-ink-2, #46555e); }
.mi-cmp .mi-sub td { border-top: 0; padding-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dk-accent-text, var(--purple)); }
.mi-rule { margin-left: 8px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--dk-ink-2, #46555e); }
.mi-cmp .mi-key td { font-weight: 700; color: var(--dk-ink, #1a1a1a); }
.mi-side { display: block; font-size: 12px; color: var(--dk-ink-2, #46555e); font-weight: 400; }
.mi-neg { color: var(--dk-bad-text, #a32d22); }
.mi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mi-both { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.mi-split { margin: 0 0 8px; padding: 9px 11px; border-radius: 8px; font-size: 13px; line-height: 1.45; background: var(--dk-tint, #f4f6f8); }
.mi-choice { border: 0; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.mi-choice legend { font-size: 13.5px; margin-bottom: 6px; }
.mi-choice label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--dk-line, #dfe3e8); cursor: pointer; }
.mi-choice label:has(input:checked) { border-color: var(--dk-accent-line, var(--purple)); background: var(--dk-tint-accent, #f6f3ff); }
.mi-choice b { display: block; }
.mi-choice small { display: block; font-size: 12.5px; color: var(--dk-ink-2, #46555e); margin-top: 2px; }
.mi-check { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.mi-field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 700; }
.mi-field-plain { margin-top: 0; font-weight: 400; }
.mi-field-plain .mi-hint { margin: 0 0 4px; }
.mi-in { font: inherit; font-weight: 400; padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--dk-line-strong, #c5ccd3);
  background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a); resize: vertical; }
.mi-in:focus-visible { outline: 2px solid var(--dk-accent-line, var(--purple)); outline-offset: 1px; }
.mi-fee-amt .mi-in { max-width: 160px; }
.mi-fee-fields[hidden] { display: none; }
.mi-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; display: grid; gap: 6px; }
.mi-list.mi-dim { opacity: 0.55; }
.mi-warnli { color: var(--dk-warn-text, #7a4f00); }
.mi-err { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; background: var(--dk-bad-soft, #fdecea); color: var(--dk-bad-text, #8f2a20);
  border: 1px solid var(--dk-bad-line, #f0c4bf); }
.mi-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.mi-viewtabs { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.mi-seg { display: inline-flex; border-radius: 999px; padding: 3px; border: 1px solid var(--dk-line, #dfe3e8); background: var(--dk-surface, #fff); }
.mi-seg button { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--dk-ink, #1a1a1a); }
.mi-seg button[aria-pressed="true"] { background: var(--purple); color: #ffffff; }
.mi-seg button:focus-visible { outline: 2px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }
.mi-legend { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--dk-ink-2, #46555e); }
.mi-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--dk-paper-mark, #fff1a8); border: 1px solid var(--dk-warn-line-strong, #c9a24a); }
.mi-foot { padding: 12px 20px; background: var(--dk-surface, #fff); border-top: 1px solid var(--dk-line, #dfe3e8); }
.mi-foot-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mi-grow { flex: 1; }
.mi-foot-hint { font-size: 12.5px; color: var(--dk-ink-2, #46555e); }
#miFault:empty { display: none; }
#miFault { margin-bottom: 10px; }

/* The sheet: the invoice preview's own (.qb-*, ecr-calendar.css), with what the save changes marked. */
.mi-sheet { max-width: none; }
.mi-mark { background: var(--dk-paper-mark, #fff1a8); color: var(--dk-paper-ink, #1f2328); border-radius: 3px; padding: 0 2px; }
.mi-stamp { padding: 10px 28px; font-weight: 700; font-size: 14px; background: var(--dk-paper-bad, #fde8e6); color: var(--dk-paper-bad-ink, #a32d22);
  border-bottom: 2px solid var(--dk-paper-bad-ink, #a32d22); }
.mi-sheet .mi-neg span:last-child { color: var(--dk-paper-bad-ink, #a32d22); }
.mi-sheet .qb-total-line { padding-top: 8px; }

/* The saved screen. */
.mi-rb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mi-rb td { padding: 7px 6px; border-top: 1px solid var(--dk-line, #e8eaee); vertical-align: top; overflow-wrap: anywhere; }
.mi-rb td:first-child { width: 26%; color: var(--dk-ink-2, #46555e); }
.mi-rb small { display: block; font-size: 12px; color: var(--dk-ink-2, #46555e); }
.mi-mark-cell { width: 22px; text-align: center; font-weight: 800; }
.mi-yes { color: var(--dk-good-text, #1f6b3d); }
.mi-no { color: var(--dk-bad-text, #a32d22); }
.mi-same { color: var(--dk-ink-2, #46555e); }
.mi-rb .mi-bad td { background: var(--dk-bad-soft, #fdecea); }
/* The offer's heading reads as a heading, as the mockup draws it, not as a card's small capitals. */
.mi-card .mi-offer h3, .mi-offer h3 { margin: 0 0 6px; font: 800 17px 'Raleway', Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.mi-offer { border-radius: 12px; padding: 14px 16px; border: 1.5px solid var(--dk-accent-line, var(--purple)); background: var(--dk-tint-accent, #f6f3ff); }
.mi-offer p { margin: 0 0 4px; font-size: 14px; line-height: 1.5; }
.mi-offer.mi-held { border-color: var(--dk-line-strong, #c5ccd3); background: var(--dk-surface, #fff); }
.mi-warnbox { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; background: var(--dk-warn-soft, #fff4dc); color: var(--dk-warn-text, #7a4f00); }
.mi-history { margin: 0; padding-left: 10px; border-left: 3px solid var(--dk-line-strong, #c5ccd3); font-size: 12.5px; color: var(--dk-ink-2, #46555e); }
.mi-still { list-style: none; padding-left: 0; }
.mi-still > li { padding-top: 8px; border-top: 1px solid var(--dk-line, #e8eaee); }
.mi-still > li:first-child { border-top: 0; padding-top: 0; }

/* On the lead: Not told yet, and a ride that still says the old trip. */
.mi-nottold { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45;
  background: var(--dk-warn-soft, #fff4dc); color: var(--dk-warn-text, #6b4500); border: 1px solid var(--dk-warn-line, #ecd9a8); }
.mi-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  background: var(--dk-warn-soft, #fff4dc); color: var(--dk-warn-text, #6b4500); border: 1px solid var(--dk-warn-line-strong, #c9a24a); }
.iv-modify-err[hidden] { display: none; }

@media (max-width: 980px) {
  .mi-grid { grid-template-columns: minmax(0, 1fr); }
}