/* ============================================================
   responsive.css — Tablet + mobile adaptations
   ============================================================ */

/* ---------- ≤1100px : tighter dashboard ---------- */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}

/* ---------- ≤1300px : Invoices summary as 3 + 2 cards filling the row ---------- */
@media (max-width: 1300px) {
  [data-page="invoices"] #invcStats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  [data-page="invoices"] #invcStats .stat { grid-column: span 2; }
  [data-page="invoices"] #invcStats .stat:nth-child(n+4) { grid-column: span 3; }
}

/* ---------- ≤1280px : Invoices list rows become cards (no sideways scrolling) ---------- */
@media (max-width: 1280px) {
  [data-page="invoices"] #page-content > .card { background: none; border: 0; box-shadow: none; }
  [data-page="invoices"] #page-content > .card .table-wrap { overflow: visible; }
  [data-page="invoices"] #page-content > .card .table { display: block; }
  [data-page="invoices"] #page-content > .card .table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  [data-page="invoices"] #invcTableBody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 12px; }
  [data-page="invoices"] #invcTableBody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px;
    grid-template-areas: "id id status" "cust cust date" "veh veh job" "total paid due" "act act act";
    padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  }
  [data-page="invoices"] #invcTableBody tr:has(td[colspan]) { display: block; grid-column: 1 / -1; }
  [data-page="invoices"] #invcTableBody td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  [data-page="invoices"] #invcTableBody .ivl-cust, [data-page="invoices"] #invcTableBody .ivl-veh { white-space: normal; }
  [data-page="invoices"] #invcTableBody td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 500; color: var(--text-2);
  }
  [data-page="invoices"] #invcTableBody .ivl-id { grid-area: id; align-self: center; font-size: 1rem; }
  [data-page="invoices"] #invcTableBody .ivl-status { grid-area: status; justify-self: end; align-self: center; }
  [data-page="invoices"] #invcTableBody .ivl-cust { grid-area: cust; align-self: end; }
  [data-page="invoices"] #invcTableBody .ivl-date { grid-area: date; text-align: right; }
  [data-page="invoices"] #invcTableBody .ivl-veh { grid-area: veh; }
  [data-page="invoices"] #invcTableBody .ivl-job { grid-area: job; text-align: right; }
  [data-page="invoices"] #invcTableBody .ivl-total { grid-area: total; }
  [data-page="invoices"] #invcTableBody .ivl-paid { grid-area: paid; }
  [data-page="invoices"] #invcTableBody .ivl-due { grid-area: due; }
  [data-page="invoices"] #invcTableBody .ivl-total,
  [data-page="invoices"] #invcTableBody .ivl-paid,
  [data-page="invoices"] #invcTableBody .ivl-due { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--paper); text-align: left; font-weight: 600; }
  [data-page="invoices"] #invcTableBody .ivl-due--open { background: var(--bad-soft); }
  [data-page="invoices"] #invcTableBody td.num { white-space: normal; overflow-wrap: normal; }   /* an amount breaks only after its currency sign */
  [data-page="invoices"] #invcTableBody .ivl-act { grid-area: act; padding-top: 10px; border-top: 1px solid var(--line); }
  [data-page="invoices"] #invcTableBody .ivl-act .row-actions { justify-content: flex-end; gap: 8px; }
  [data-page="invoices"] #invcTableBody .ivl-act .icon-btn--sm { width: 38px; height: 38px; }
}

/* ---------- ≤900px : sidebar becomes a drawer ---------- */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .28s ease;
    width: 268px;
    box-shadow: var(--shadow-lift);
  }
  .sidebar.is-open { transform: none; }

  .main { margin-left: 0; }
  .topbar__menu.icon-btn { display: grid; }
  .topbar { padding: 0 16px; }
  .content { padding: 16px; }
}

/* ---------- ≤900px : Customer Details stacks contact above the summary ---------- */
@media (max-width: 900px) {
  .cd-top { grid-template-columns: 1fr; }
  .cd-top .vd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; }
}

/* ---------- ≤900px : Invoice Details facts move under the title, cards stack ---------- */
@media (max-width: 900px) {
  .inv-view .modal__head { flex-wrap: wrap; row-gap: 14px; }
  .inv-view .modal__close { order: 2; }
  .inv-view__facts { order: 3; flex: 1 1 100%; }
  .inv-view__cols, .inv-view__cols--end { grid-template-columns: minmax(0, 1fr); }
  /* post-completion preview: payments and history rows stack as labelled cards */
  .pca-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pca-table, .pca-table tbody { display: block; width: 100%; }
  .pca-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .pca-table td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; background: none !important; }
  .pca-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .74rem; font-weight: 500; color: var(--text-2); }
  .pca-table td.num { text-align: right; }
  .pca-table td.pca-amt { grid-column: 2; grid-row: 1; }
  .pca-table .badge { max-width: 100%; white-space: normal; }
  .pca-hist tr.pca-row--example { padding: 12px; margin-bottom: 10px; border: 1px dashed var(--line); border-radius: 10px;
    background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--paper) 70%, transparent) 10px 20px); }
  .pca-hist td.pca-hist__reason { grid-column: 1 / -1; min-width: 0; }
  .pca-hist td.pca-hist__act { grid-column: 1 / -1; text-align: left; white-space: normal; }
  .pca-hist td.pca-hist__act::before { display: none; }
  .pca-hist .pca-hist__btns { justify-content: flex-start; }
}

/* ---------- ≤640px : phone ---------- */
@media (max-width: 640px) {
  .stats-grid { gap: 10px; }
  .stat { padding: 12px 14px; gap: 10px; }
  .stat__icon { width: 38px; height: 38px; }
  .stat__value { font-size: 1.1rem; }

  .topbar__user-text { display: none; }
  .topbar__date { display: none; }

  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }

  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid--3 { grid-template-columns: 1fr 1fr; }
  .detail-grid .span-2 { grid-column: span 1; }
  .summary-row { grid-template-columns: 1fr 1fr; }
  .summary-row--6 { grid-template-columns: 1fr 1fr; }
  .summary-row--3 { grid-template-columns: 1fr; }

  .toolbar__search { min-width: 0; flex: 1 1 100%; }

  .rev-chart { height: 150px; }
  .rev-col:nth-child(odd) .rev-col__label { visibility: hidden; }

  .modal__foot { flex-wrap: wrap; }
  .modal__foot .btn { flex: 1; justify-content: center; }

  .veh-add .modal__head { padding: 14px 16px; gap: 12px; }
  .veh-add__icon { width: 38px; height: 38px; }
  .veh-add .modal__body { padding: 14px 12px; }
  .veh-add .modal__foot { padding: 12px 16px; }
  .pay-rec .modal__head { padding: 14px 16px; gap: 12px; }
  .pay-rec__icon { width: 40px; height: 40px; }
  .pay-rec__icon::before { inset: 10px; }
  .pay-rec .modal__body { padding: 16px 16px 4px; }
  .pay-rec .modal__foot { padding: 12px 16px; }
  .pay-view .modal__head { padding: 14px 16px; gap: 12px; }
  .pay-view__icon { width: 40px; height: 40px; }
  .pay-view__icon::before { inset: 10px; }
  .pay-view .modal__body { padding: 16px; gap: 14px; }
  .pay-view .pay-view__grid { grid-template-columns: 1fr; }
  .pay-view .pay-view__facts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pay-view__fact--status { grid-column: 1 / -1; }
  .pay-view__item, .pay-view__item:nth-child(3n+1) { padding: 0; border-left: 0; }
  .pay-view .modal__foot { padding: 12px 16px; }
  [data-page="invoices"] #invcStats { grid-template-columns: 1fr 1fr; }
  [data-page="invoices"] #invcStats .stat, [data-page="invoices"] #invcStats .stat:nth-child(n+4) { grid-column: auto; }
  [data-page="invoices"] #invcStats .stat:last-child { grid-column: 1 / -1; }
  .inv-view .modal__head { padding: 14px 16px; gap: 12px; row-gap: 10px; }
  .inv-view__icon { width: 40px; height: 40px; }
  .inv-view__icon::before { inset: 10px; }
  .inv-view .modal__head h2 { font-size: 1.3rem; }
  .inv-view__sub, .inv-view__note { display: none; }
  .inv-view__facts { flex-wrap: wrap; gap: 8px 16px; }
  .inv-view__fact { padding: 0; border-left: 0; }
  .inv-view__fact--status { margin-right: 0; padding: 5px 12px; border-radius: 999px; column-gap: 7px; }
  .inv-view__fact--status::before, .inv-view__fact--date::before, .inv-view__fact--job::before { grid-row: auto; width: 17px; height: 17px; }
  .inv-view__fact--date, .inv-view__fact--job { column-gap: 6px; }
  .inv-view .inv-view__fact--date > span, .inv-view .inv-view__fact--job > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .inv-view .inv-view__fact > strong { font-size: .9rem; }
  .inv-view .inv-view__fact--status .badge { font-size: .9rem; }
  .inv-view .modal__body { padding: 16px; gap: 14px; }
  .inv-view__card-head { padding: 10px 14px; }
  .inv-view__card-body { padding: 12px 14px; }
  .inv-view__list { padding: 2px 14px 6px; }
  .inv-view__list--2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .inv-view__list--2 .inv-view__row:nth-child(n) { padding-left: 0; padding-right: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .inv-view__list--2 .inv-view__row:last-child { border-bottom: 0; }
  /* services / parts: each line becomes a compact card, no sideways scrolling */
  .inv-view .inv-view__lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inv-view .inv-view__lines, .inv-view .inv-view__lines tbody { display: block; width: 100%; }
  .inv-view .inv-view__lines tr {
    display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  }
  .inv-view .inv-view__lines tr + tr { margin-top: 10px; }
  .inv-view .inv-view__lines td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
  .inv-view .inv-view__lines td.inv-view__no { display: none; }
  .inv-view .inv-view__lines td.inv-view__name { grid-column: 1 / -1; min-width: 0; font-weight: 700; }
  .inv-view .inv-view__lines td.inv-view__partno { grid-column: 1 / -1; margin-top: -4px; font-size: .84rem; }
  .inv-view .inv-view__lines td.inv-view__partno::before { content: attr(data-label) " "; }
  .inv-view .inv-view__lines td.num { white-space: normal; }   /* an amount may only break after its currency sign */
  .inv-view .inv-view__lines td.num::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .74rem; font-weight: 500; color: var(--text-2); }
  .inv-view .inv-view__lines td.inv-view__total { text-align: right; font-weight: 700; }
  /* write-offs: one stacked row each -- id and amount, then the reason, then Reverse (0002) */
  .inv-view .inv-view__adj thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inv-view .inv-view__adj, .inv-view .inv-view__adj tbody { display: block; width: 100%; }
  .inv-view .inv-view__adj tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .inv-view .inv-view__adj td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
  .inv-view .inv-view__adj td.inv-view__adj-sum { grid-column: 2; grid-row: 1; text-align: right; }
  .inv-view .inv-view__adj td.inv-view__adj-reason, .inv-view .inv-view__adj td.inv-view__adj-act { grid-column: 1 / -1; }
  .inv-view .inv-view__adj td.inv-view__adj-act:empty { display: none; }
  .inv-view .totals-panel--view .totals-grand strong { font-size: 1.35rem; }
  .inv-view .modal__foot { padding: 12px 16px; }
  .form-section__head { padding: 10px 12px; }
  .form-section__body { padding: 14px 12px 0; }

  .veh-view .modal__head { padding: 14px 16px; gap: 12px; align-items: flex-start; }
  .veh-view__icon { width: 40px; height: 40px; }
  .veh-view .modal__body { padding: 14px 12px; }
  .veh-view .modal__foot { padding: 12px 16px; }
  .vd-section__body { padding: 12px; }
  .vd-ident { grid-template-columns: 1fr; gap: 12px; }
  .vd-photo { flex-direction: row; min-height: 0; padding: 10px; }
  .vd-photo svg { width: 28px; height: 28px; }
  .vd-grid, .vd-grid--2 { grid-template-columns: 1fr; gap: 8px; }
  .vd-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .vd-item__label { margin: 0; flex: none; }
  .vd-item__value { text-align: right; }
  .vd-stats { grid-template-columns: 1fr 1fr; }
  .cd-top .vd-stats { grid-template-columns: 1fr 1fr; }
  .cd-top .vd-stat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .cd-top .vd-stat__icon { width: 34px; height: 34px; }
  .cd-top .vd-stat strong { font-size: 1.05rem; }
}

/* ---------- ≤400px ---------- */
@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .content { padding: 12px; }
  .vd-stats { grid-template-columns: 1fr; }
  /* Edit Vehicle title wraps as "Edit Vehicle" / "— VEH-0001", never inside the ID */
  .veh-add[aria-label^="Edit Vehicle"] .modal__head h2 { text-wrap: balance; }
  .jc-edit .veh-add__icon { display: none; }
  .pay-rec__icon { display: none; }
  .pay-view__icon { display: none; }
  .pay-view .totals-panel--view .totals-grand strong { font-size: 1.3rem; }
  .inv-view__icon { display: none; }
}

/* ---------- ≤340px : Customer Details summary tiles in one column ---------- */
@media (max-width: 340px) {
  .cd-top .vd-stats { grid-template-columns: 1fr; }
  .cd-top .vd-stat { flex-direction: row; align-items: center; }
}

/* ---------- print: hide app chrome ---------- */
@media print {
  .sidebar, .topbar, .sidebar-scrim, .toast-host { display: none !important; }
  .main { margin-left: 0; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; border-color: #ccc; }
  body { background: #fff; }
}

/* ---------- job cards module ---------- */
@media (max-width: 1200px) {
  .stats-grid--wide { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .insp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stats-grid--wide { grid-template-columns: 1fr 1fr; }
  .form-grid--3 { grid-template-columns: 1fr; }
  .line-head { display: none; }
  .line-row, .line-row--part {
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px;
  }
  .line-row .line-service, .line-row .line-work-wrap, .line-row--part .line-name { grid-column: span 2; }
  /* New / Edit Job Card: part name and part no. get the full row; billing stacks */
  :is(.jc-new, .jc-edit) .line-row--part .line-part, :is(.jc-new, .jc-edit) .line-row--part .line-partno { grid-column: span 2; }
  :is(.jc-new, .jc-edit) .line-row { background: var(--surface); }
  .jc-billing { grid-template-columns: 1fr; }
  .jc-sec__body { padding: 14px 12px; }
  /* Edit Job Card header: title and number only on phones (the subtitle still describes the dialog) */
  .jc-edit .veh-add__sub { display: none; }
  :is(.jc-new, .jc-edit) .insp-row { grid-template-columns: 84px minmax(0, 1fr); }
  :is(.jc-new, .jc-edit) .insp-row .insp-note { grid-column: span 2; }
  .insp-row { grid-template-columns: 80px 1fr; }
  .insp-row .insp-note { grid-column: span 2; }
  .bar-list__row { grid-template-columns: 90px 1fr 74px; }
  .bar-list__label { font-size: .76rem; }
}

/* ---------- Job Card Details ---------- */
@media (max-width: 1000px) {
  .jcv-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jcv-strip__item:nth-child(4) { border-left: 0; }
  .jcv-strip__item:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .jcv-cols, .jcv-cols--end { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .jcv-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jcv-strip__item { padding: 10px 12px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .jcv-strip__item:nth-child(odd) { border-left: 0; }
  .jcv-strip__item:nth-child(-n+2) { border-top: 0; }
  .jcv-card__head { padding: 10px 12px; }
  .jcv-card__body, .jcv-panel { padding: 12px; }
  .jcv-tabs { padding: 8px 8px 0; gap: 4px; }
  .jcv-tab { padding: 8px 10px; font-size: .8rem; }
  .jcv-dl__row { grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); }
  .jcv .totals-panel--view .totals-grand, .jcv .totals-panel--view > div:nth-child(9) { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .jcv .totals-panel--view > div:nth-child(9) { margin-bottom: -12px; }
  /* line tables become one card per line: name on top, figures labelled beneath */
  .jcv-table thead { display: none; }
  .jcv-table, .jcv-table tbody { display: block; }
  .jcv-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .jcv-table tr:last-child { border-bottom: 0; }
  .jcv-table td { display: block; padding: 0; border: 0; text-align: left !important; }
  .jcv-table td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 600; color: var(--text-3); }
  .jcv-table .jcv-table__no { display: none; }
  .jcv-table .cell-main, .jcv-table--parts td[data-label="Part No."] { grid-column: 1 / -1; }
  .jcv-table tbody tr:hover { background: none; }
}

/* ---------- print: job card / invoice / payment / expense / report ---------- */
.print-area { display: none; }

@media print {
  body.printing-job .shell, body.printing-invoice .shell, body.printing-payment .shell, body.printing-expense .shell, body.printing-report .shell { display: none !important; }
  body.printing-job .print-area, body.printing-invoice .print-area, body.printing-payment .print-area, body.printing-expense .print-area, body.printing-report .print-area {
    display: block;
    color: #111;
    font-size: 12px;
  }
  .pr-head { display: flex; justify-content: space-between; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 14px; }
  .pr-head h1 { font-size: 18px; margin: 0 0 2px; }
  .pr-head p { margin: 0; font-size: 11px; color: #444; }
  .pr-meta { text-align: right; }
  .pr-meta h2 { font-size: 14px; letter-spacing: 2px; margin: 0; }
  .pr-cols { display: flex; gap: 24px; margin-bottom: 8px; }
  .pr-cols > div { flex: 1; }
  .print-area h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 4px; color: #333; }
  .print-area p { margin: 0 0 4px; }
  .pr-table, .pr-totals { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
  .pr-table th, .pr-table td { border: 1px solid #999; padding: 4px 8px; text-align: left; font-size: 11px; }
  .pr-num { text-align: right !important; }
  .pr-totals { max-width: 320px; margin-left: auto; }
  .pr-totals td { padding: 3px 8px; font-size: 11px; }
  .pr-grand td { border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; font-weight: 700; font-size: 12px; }
  .pr-sign { display: flex; gap: 60px; margin-top: 48px; }
  .pr-sign div { flex: 1; text-align: center; font-size: 11px; }
  .pr-sign span { display: block; border-top: 1px solid #111; margin-bottom: 4px; padding-top: 4px; }
  .pr-foot { margin-top: 20px; text-align: center; font-size: 10px; color: #666; }
  /* printing from the Invoice Details dialog must not print the dialog */
  body.printing-invoice .modal-overlay { display: none !important; }

  /* ---------- Job Card document (A4) ----------
     Its own .jcp-* classes and a named page, so the invoice, payment,
     expense and report prints that share .pr-* are untouched. */
  @page jobcard {
    size: A4 portrait;
    margin: 12mm 12mm 14mm;
    @bottom-center { content: "Page " counter(page) " of " counter(pages); font: 8pt sans-serif; color: #777; }
  }
  /* an open Job Card dialog must not print on top of the document */
  body.printing-job .modal-overlay { display: none !important; }
  .jcp { page: jobcard; color: #1b1f24; font-size: 9.5pt; line-height: 1.35; }
  .jcp h3 {
    margin: 0 0 4px; font-size: 7.5pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a5a00;
    break-after: avoid;
  }
  .jcp dl, .jcp dd { margin: 0; }

  /* header: the logo on its brand plate, workshop details on the right */
  .jcp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid #1b1f24; }
  .jcp-logo {
    flex: none; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 5px; background: #16202c;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .jcp-logo img { display: block; height: 40px; width: auto; }
  .jcp-org { text-align: right; }
  .jcp-org__name { font-size: 15pt; font-weight: 800; letter-spacing: .06em; line-height: 1.15; }
  .jcp-org__tag { font-size: 9pt; color: #555; }
  .jcp-org__phone { margin-top: 3px; font-size: 10.5pt; }
  .jcp-org__phone strong { font-size: 12pt; letter-spacing: .03em; }
  .jcp-org__addr { margin-top: 2px; max-width: 460px; margin-left: auto; font-size: 8.5pt; color: #555; }

  /* job card title + meta */
  .jcp-title { display: flex; align-items: stretch; gap: 12px; margin: 8px 0 8px; break-inside: avoid; }
  .jcp-doc { flex: none; display: flex; flex-direction: column; justify-content: center; padding: 6px 14px; border-left: 4px solid #c47f06; background: #fbf4e6; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .jcp-doc__label { font-size: 8pt; font-weight: 700; letter-spacing: .2em; color: #8a5a00; }
  .jcp-doc__id { font-size: 15pt; font-weight: 800; letter-spacing: .02em; }
  .jcp-meta { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #c9ced4; border-radius: 4px; }
  .jcp-meta > div { padding: 4px 10px; border-left: 1px solid #e1e4e8; border-top: 1px solid #e1e4e8; }
  .jcp-meta > div:nth-child(3n+1) { border-left: 0; }
  .jcp-meta > div:nth-child(-n+3) { border-top: 0; }
  .jcp-meta dt, .jcp-party dt { font-size: 7.5pt; color: #666; text-transform: uppercase; letter-spacing: .06em; }
  .jcp-meta dd { font-weight: 700; }

  /* customer / vehicle / mechanic */
  .jcp-parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); border: 1px solid #c9ced4; border-radius: 4px; margin-bottom: 8px; break-inside: avoid; }
  .jcp-party { padding: 6px 10px; border-left: 1px solid #e1e4e8; min-width: 0; }
  .jcp-party:first-child { border-left: 0; }
  .jcp-party dl > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; padding: 1px 0; }
  .jcp-party dt { padding-top: 1px; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 8pt; }
  .jcp-party dd { font-weight: 600; overflow-wrap: anywhere; }

  /* sections, text and tables */
  .jcp-sec { margin-bottom: 7px; }
  .jcp-insp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
  /* labour on one line: hours, rate, total */
  .jcp-labour { display: flex; align-items: baseline; gap: 22px; padding: 5px 9px; border: 1px solid #e1e4e8; border-radius: 4px; break-inside: avoid; }
  .jcp-labour h3 { margin: 0; }
  .jcp-labour em { margin-right: 4px; font-style: normal; font-size: 7.5pt; color: #666; text-transform: uppercase; letter-spacing: .06em; }
  .jcp-labour__total { margin-left: auto; font-weight: 700; }
  /* complaint / condition / diagnosis side by side, one column each */
  .jcp-texts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 12px; }
  /* a heading that wraps keeps the boxes beside it aligned */
  .jcp-texts > .jcp-sec { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .jcp .jcp-text { margin: 0; padding: 5px 9px; border: 1px solid #e1e4e8; border-radius: 4px; white-space: pre-line; overflow-wrap: anywhere; break-inside: avoid; }
  .jcp .jcp-empty { color: #777; font-style: italic; }
  .jcp-table { width: 100%; border-collapse: collapse; }
  .jcp-table thead { display: table-header-group; }
  .jcp-table th {
    padding: 4px 8px; border-top: 1.5px solid #1b1f24; border-bottom: 1px solid #1b1f24; text-align: left;
    font-size: 7.5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #333;
  }
  .jcp-table td { padding: 3px 8px; border-bottom: 1px solid #e1e4e8; vertical-align: top; }
  .jcp-table tr { break-inside: avoid; }
  .jcp-table .jcp-no { width: 26px; color: #777; }
  .jcp-table td.pr-num, .jcp-table th.pr-num { white-space: nowrap; }

  /* notes, signatures, billing summary and footer move as one block: they
     are never split, so a second page always opens with the billing and sign-off */
  .jcp-close { break-inside: avoid; margin-top: 4px; }
  .jcp-end { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: stretch; }
  .jcp-end__left { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
  .jcp-sum { width: 100%; border-collapse: collapse; border: 1px solid #c9ced4; }
  .jcp-sum td { padding: 3px 10px; }
  .jcp-sum__sub td { border-top: 1px solid #c9ced4; font-weight: 700; }
  .jcp-sum__grand td {
    padding: 6px 10px; border-top: 1.5px solid #1b1f24; border-bottom: 1.5px solid #1b1f24;
    background: #fbf4e6; font-size: 11.5pt; font-weight: 800; letter-spacing: .02em;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .jcp-sum__due td { padding: 5px 10px; border-top: 1px solid #c9ced4; font-size: 11pt; font-weight: 800; }

  /* signatures + footer */
  .jcp-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 30px; text-align: center; font-size: 9pt; color: #333; }
  .jcp-sign__line { display: block; height: 0; margin-bottom: 5px; border-top: 1px solid #1b1f24; }
  .jcp-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; margin-top: 10px; padding-top: 6px; border-top: 1px solid #e1e4e8; font-size: 8.5pt; color: #666; }
  .jcp-foot p { margin: 0; }

  /* ---------- Payment receipt (A4) ----------
     Its own .rcp-* classes and named page, like the Job Card, so the invoice,
     expense and report prints that share .pr-* are untouched. */
  @page receipt { size: A4 portrait; margin: 14mm 14mm 16mm; }
  /* printing from the Payment Details dialog must not print the dialog */
  body.printing-payment .modal-overlay { display: none !important; }
  .rcp { page: receipt; color: #1b1f24; font-size: 10.5pt; line-height: 1.4; }
  .rcp h2, .rcp h3, .rcp p, .rcp dl, .rcp dd { margin: 0; }
  .rcp h3 {
    margin-bottom: 8px; font-size: 8pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a5a00;
    break-after: avoid;
  }

  /* header: logo and workshop details left, document title and numbers right */
  .rcp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 14px; border-bottom: 2px solid #1b1f24; break-inside: avoid; }
  .rcp-brand { min-width: 0; }
  .rcp-logo { display: block; height: 46px; width: auto; margin-bottom: 10px; }
  .rcp-org { font-size: 9pt; color: #444; line-height: 1.45; }
  .rcp-org__name { font-size: 11pt; font-weight: 700; color: #1b1f24; }
  .rcp-org strong { color: #1b1f24; font-size: 10pt; letter-spacing: .02em; }
  .rcp-doc { flex: none; text-align: right; }
  .rcp-doc__title { font-size: 15pt; font-weight: 800; letter-spacing: .14em; }
  .rcp-void {
    display: inline-block; margin-top: 6px; padding: 2px 12px; border: 2px solid #b3261e; border-radius: 4px;
    color: #b3261e; font-size: 13pt; font-weight: 800; letter-spacing: .3em;
  }
  .rcp-meta { margin-top: 10px; }
  .rcp-meta .rcp-row { display: flex; justify-content: flex-end; gap: 12px; padding: 1px 0; }
  .rcp-meta dt { color: #666; }
  .rcp-meta dd { min-width: 96px; font-weight: 600; text-align: right; }

  /* customer & reference */
  .rcp-sec { margin-top: 18px; break-inside: avoid; }
  .rcp-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #d5d9de; border-radius: 6px; }
  .rcp-grid .rcp-row { padding: 8px 12px; border-top: 1px solid #e6e9ec; }
  .rcp-grid .rcp-row:nth-child(-n+2) { border-top: 0; }
  .rcp-grid .rcp-row:nth-child(even) { border-left: 1px solid #e6e9ec; }
  .rcp-grid dt { font-size: 8pt; color: #666; text-transform: uppercase; letter-spacing: .06em; }
  .rcp-grid dd { margin-top: 1px; font-size: 11pt; font-weight: 600; overflow-wrap: anywhere; }

  /* amount received, to the fore; invoice figures beneath when linked */
  .rcp-amount {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding: 14px 18px;
    border: 1.5px solid #1b1f24; border-left: 5px solid #c47f06; border-radius: 6px; background: #fbf4e6; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .rcp-amount__label { font-size: 10pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .rcp-amount__value { font-size: 22pt; font-weight: 800; white-space: nowrap; }
  .rcp-inv { width: 100%; margin-top: 8px; border-collapse: collapse; break-inside: avoid; }
  .rcp-inv td { padding: 5px 12px; border-bottom: 1px solid #e6e9ec; }
  .rcp-inv td:last-child { text-align: right; white-space: nowrap; }
  .rcp-inv__due td { font-weight: 700; }

  /* notes and thank-you footer */
  .rcp-notes p { padding: 8px 12px; border: 1px solid #e6e9ec; border-radius: 6px; white-space: pre-line; overflow-wrap: anywhere; }
  .rcp-foot { margin-top: 26px; padding-top: 10px; border-top: 1px solid #d5d9de; text-align: center; font-size: 9pt; color: #555; break-inside: avoid; }
  .rcp-foot__thanks { font-size: 10pt; font-weight: 600; color: #1b1f24; }

  /* ---------- Invoice (A4) ----------
     The customer-facing invoice. Its own .ivp-* classes, like the Job Card
     and Receipt, so the expense and report prints that share .pr-* are
     untouched. Brand red + navy on white; always printed light.
     Its A4 page box (8mm 10mm 11mm, "Page X of Y") is added by printInvoice()
     for the print only: a named page here would make Chrome add a blank last page. */
  .ivp {
    --ivp-red: #c8102e; --ivp-red-soft: #fdecee; --ivp-navy: #16202c; --ivp-ink: #1b1f24; --ivp-grey: #555f6b;
    --ivp-line: #dde2e8; --ivp-line-soft: #edf0f3; --ivp-soft: #f5f7f9;
    color: var(--ivp-ink); font-size: 9.5pt; line-height: 1.4;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .ivp h2, .ivp h3, .ivp p, .ivp dl, .ivp dd, .ivp ul { margin: 0; }
  .ivp .ivp-ico { display: block; width: 1em; height: 1em; fill: currentColor; flex: none; }

  /* every page: the frame's <thead> repeats the header, the fixed closing block is
     the footer, and its invisible copy in <tfoot> keeps that height free of content */
  .ivp-frame { width: 100%; border-collapse: collapse; border-spacing: 0; }
  .ivp-frame > thead { display: table-header-group; }
  .ivp-frame > tfoot { display: table-footer-group; }
  .ivp-frame > * > tr > td { padding: 0; vertical-align: top; }
  .ivp-frame > thead > tr > td { padding-bottom: 4mm; }

  /* header: logo + workshop contact on white; an automotive navy panel with the red stripe */
  .ivp-head { display: grid; grid-template-columns: minmax(0, 1fr) 66mm; min-height: 32mm; break-inside: avoid; }
  .ivp-brand { min-width: 0; padding: 0 6mm 1mm 0; }
  .ivp-logo { display: block; height: 12.5mm; width: auto; }
  .ivp-org__name { margin-top: 1.8mm; font-size: 12.5pt; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ivp-navy); }
  .ivp-contact { list-style: none; padding: 0; margin-top: 1.6mm; display: grid; gap: .8mm; font-size: 9pt; color: #333; }
  .ivp-contact li { display: flex; align-items: flex-start; gap: 2.2mm; }
  .ivp-contact .ivp-ico { width: 3.8mm; height: 3.8mm; margin-top: .2mm; color: var(--ivp-red); }
  .ivp-contact__phone span { font-size: 11.5pt; font-weight: 800; letter-spacing: .03em; color: var(--ivp-navy); }
  .ivp-contact__tax { padding-left: 6mm; color: var(--ivp-grey); }
  .ivp-panel {
    position: relative; overflow: hidden; border-radius: 0 0 0 4mm;
    background:
      radial-gradient(circle at 66% 62%, rgba(255, 255, 255, .13), transparent 46%),
      repeating-linear-gradient(-62deg, transparent 0 9mm, rgba(255, 255, 255, .035) 9mm 9.6mm),
      linear-gradient(112deg, #fff 0 11%, var(--ivp-red) 11% 18%, #22324a 18% 40%, var(--ivp-navy) 100%);
  }
  .ivp-car { position: absolute; right: 3.5mm; bottom: 4.5mm; width: 46mm; height: auto; }
  .ivp-car__body { fill: rgba(255, 255, 255, .07); stroke: #e8edf2; stroke-width: 2.4; stroke-linejoin: round; }
  .ivp-car__glass { fill: rgba(255, 255, 255, .22); }
  .ivp-car__line { stroke: var(--ivp-red); stroke-width: 2.2; }
  .ivp-car__tyre { fill: #0e1620; stroke: #e8edf2; stroke-width: 2.4; }
  .ivp-car__rim { fill: var(--ivp-red); }

  /* title, status stamp and invoice numbers */
  .ivp-titlebar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6mm; align-items: center; margin: 0 0 3.5mm; break-inside: avoid; }
  .ivp .ivp-title__main { font-size: 30pt; font-weight: 900; line-height: 1; letter-spacing: .02em; color: var(--ivp-navy); text-transform: none; margin: 0; }
  .ivp .ivp-title__sub { margin-top: 1.5mm; font-size: 8.5pt; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ivp-grey); }
  .ivp-stamp {
    display: flex; align-items: center; gap: 2.5mm; padding: 2mm 4.5mm; border: 2.2px solid currentColor; border-radius: 3mm;
    transform: rotate(-4deg);
  }
  .ivp-stamp .ivp-ico { width: 9mm; height: 9mm; }
  .ivp-stamp strong { display: block; font-size: 18pt; font-weight: 900; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
  .ivp-stamp span { display: block; margin-top: .9mm; font-size: 7.5pt; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .ivp-stamp--paid { color: #157a43; background: #eaf7ef; }
  .ivp-stamp--settled { color: #157a43; background: #eaf7ef; }
  .ivp-stamp--partial { color: #9a5500; background: #fff4e2; }
  .ivp-stamp--unpaid { color: var(--ivp-red); background: var(--ivp-red-soft); }
  .ivp-stamp--void { color: #4b5563; background: #f1f3f5; }
  .ivp-meta { padding: 2.2mm 5mm; border: 1px solid #e8e1cf; border-radius: 2.5mm; background: #fbf8f1; }
  .ivp-meta .ivp-row { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 6mm; padding: .5mm 0; font-size: 10pt; }
  .ivp-meta dt { color: var(--ivp-grey); }
  .ivp-meta dd { font-weight: 800; color: var(--ivp-navy); text-align: right; }

  /* customer (red) and vehicle (navy) cards */
  .ivp-parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5mm; break-inside: avoid; }
  .ivp-party { min-width: 0; overflow: hidden; border: 1px solid var(--ivp-line); border-radius: 2.5mm; }
  .ivp .ivp-party__head {
    display: flex; align-items: center; gap: 2.5mm; margin: 0; padding: 1.6mm 4mm; color: #fff;
    font-size: 10pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  }
  .ivp-party__head .ivp-ico { width: 5mm; height: 5mm; }
  .ivp-party--customer .ivp-party__head { background: var(--ivp-red); }
  .ivp-party--vehicle .ivp-party__head { background: var(--ivp-navy); }
  .ivp-party dl { padding: .6mm 4mm 1mm; }
  .ivp-party .ivp-row { display: grid; grid-template-columns: 24mm minmax(0, 1fr); gap: 3mm; padding: .95mm 0; border-bottom: 1px solid var(--ivp-line-soft); }
  .ivp-party .ivp-row:last-child { border-bottom: 0; }
  .ivp-party dt { color: var(--ivp-grey); }
  .ivp-party dd { font-weight: 700; overflow-wrap: anywhere; }

  /* section headings + tables: the header repeats on each page, rows never split */
  .ivp-sec { margin-top: 3.8mm; }
  .ivp .ivp-sec__title {
    display: flex; align-items: center; gap: 3mm; margin: 0 0 1.5mm; font-size: 10.5pt; font-weight: 900;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ivp-navy); break-after: avoid;
  }
  .ivp-sec__icon { display: grid; place-items: center; width: 7mm; height: 6mm; border-radius: 1.8mm; background: var(--ivp-red); color: #fff; }
  .ivp-sec__icon .ivp-ico { width: 4.2mm; height: 4.2mm; }
  /* borders live on the cells, so a table split across pages ends cleanly at its last row on each page */
  .ivp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .ivp-table thead { display: table-header-group; }
  .ivp-table th {
    padding: 1.6mm 3.5mm; border-bottom: 1px solid var(--ivp-line); background: #edf0f4; text-align: left;
    font-size: 8.5pt; font-weight: 800; color: var(--ivp-navy);
  }
  .ivp-table td { padding: 1.6mm 3.5mm; border-bottom: 1px solid var(--ivp-line-soft); vertical-align: top; overflow-wrap: anywhere; }
  .ivp-table th + th, .ivp-table td + td { border-left: 1px solid var(--ivp-line-soft); }
  .ivp-table th { border-top: 1px solid var(--ivp-line); }
  .ivp-table th:first-child, .ivp-table td:first-child { border-left: 1px solid var(--ivp-line); }
  .ivp-table th:last-child, .ivp-table td:last-child { border-right: 1px solid var(--ivp-line); }
  .ivp-table tbody tr:last-child td { border-bottom: 1px solid var(--ivp-line); }
  .ivp-table th:first-child { border-top-left-radius: 2mm; }
  .ivp-table th:last-child { border-top-right-radius: 2mm; }
  .ivp-table tbody tr:last-child td:first-child { border-bottom-left-radius: 2mm; }
  .ivp-table tbody tr:last-child td:last-child { border-bottom-right-radius: 2mm; }
  .ivp-table tr { break-inside: avoid; }
  .ivp-table .ivp-no { width: 9mm; text-align: center; color: var(--ivp-grey); white-space: nowrap; overflow-wrap: normal; }
  .ivp-table td.pr-num, .ivp-table th.pr-num { width: 1%; white-space: nowrap; overflow-wrap: normal; }
  .ivp-strong { font-weight: 800; }
  .ivp-labour { display: flex; align-items: center; gap: 4mm; break-inside: avoid; }
  .ivp .ivp-labour .ivp-sec__title { flex: none; margin: 0; }
  .ivp-labour__row { flex: 1; display: flex; justify-content: space-between; gap: 4mm; padding: 1.8mm 3.5mm; border: 1px solid var(--ivp-line); border-radius: 2mm; background: var(--ivp-soft); }
  .ivp-labour__row strong { font-weight: 800; white-space: nowrap; }
  .ivp-partno { color: var(--ivp-grey); }
  .ivp-tag {
    margin-left: 2mm; padding: .3mm 2.2mm; border-radius: 99px; background: #edf0f4; white-space: nowrap;
    font-size: 7pt; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4b5563;
  }

  /* notes beside the billing summary; the block is never split */
  .ivp-end { display: grid; grid-template-columns: minmax(0, 1fr) 80mm; gap: 6mm; align-items: start; margin-top: 4mm; break-inside: avoid; }
  .ivp-end__left { min-width: 0; }
  .ivp .ivp-notes p { min-height: 12mm; padding: 2.5mm 4mm; border: 1px solid var(--ivp-line); border-radius: 2mm; white-space: pre-line; overflow-wrap: anywhere; }
  .ivp-sum { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ivp-line); border-radius: 2.5mm; overflow: hidden; font-size: 10pt; }
  .ivp-sum td { padding: 1.2mm 4mm; border-bottom: 1px solid var(--ivp-line-soft); background: var(--ivp-soft); }
  .ivp-sum td.pr-num { font-weight: 700; }
  .ivp-sum__grand td {
    padding: 1.8mm 4mm; border-top: 1.5px solid var(--ivp-red); border-bottom: 1.5px solid var(--ivp-red);
    background: var(--ivp-red-soft); font-size: 14pt; font-weight: 900; color: var(--ivp-navy);
  }
  .ivp-sum__grand td.pr-num { color: var(--ivp-red); font-weight: 900; }
  .ivp-sum__paid td { background: #fff; font-weight: 800; }
  /* a write-off, shown as an adjustment beside the cash -- never as part of Paid */
  .ivp-sum__adj td { background: #fff; color: var(--ivp-grey); font-weight: 700; }
  .ivp-sum__due td { border-bottom: 0; background: #e7f6ec; color: #157a43; font-size: 12.5pt; font-weight: 900; }
  .ivp-sum__due td.pr-num { font-weight: 900; }
  .ivp-sum__due--open td { background: var(--ivp-red-soft); color: var(--ivp-red); }
  .ivp-sum--void .ivp-sum__grand td, .ivp-sum--void .ivp-sum__grand td.pr-num,
  .ivp-sum--void .ivp-sum__due td { border-color: #c9ced4; background: #f1f3f5; color: #4b5563; }

  /* thank-you, highlights and footer move as one block, pinned to the foot of every page */
  .ivp-close { margin-top: 3.5mm; break-inside: avoid; }
  .ivp-close--fixed { position: fixed; left: 0; right: 0; bottom: 0; margin-top: 0; }
  .ivp-close--spacer { visibility: hidden; }
  .ivp-thanks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8mm 3mm; padding-top: 2.2mm; border-top: 1px solid #e5e8ec; text-align: center; }
  .ivp-thanks__icon { color: var(--ivp-red); }
  .ivp-thanks__icon .ivp-ico { width: 7.5mm; height: 7.5mm; }
  .ivp .ivp-thanks__text { font-size: 13pt; font-weight: 800; color: var(--ivp-navy); }
  .ivp .ivp-thanks__tag {
    flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 4mm;
    font-size: 8.5pt; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #4b5563;
  }
  .ivp-thanks__tag::before, .ivp-thanks__tag::after { content: ''; width: 22mm; height: 1.5px; background: var(--ivp-red); }
  .ivp-trust { list-style: none; padding: 0; margin-top: 2.2mm; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2mm; }
  .ivp-trust li { display: flex; align-items: center; justify-content: center; gap: 2mm; font-size: 8pt; font-weight: 600; line-height: 1.25; color: #333; }
  .ivp-trust .ivp-ico { box-sizing: border-box; width: 7.5mm; height: 7.5mm; padding: 1.5mm; border: 1.5px solid var(--ivp-red); border-radius: 50%; color: var(--ivp-red); }
  .ivp-foot {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5mm 5mm; margin-top: 2.2mm; padding: 1.8mm 6mm;
    border-top: 1.4mm solid var(--ivp-red); border-radius: 0 0 2.5mm 2.5mm; background: var(--ivp-navy);
    color: #e8edf2; font-size: 8.5pt; text-align: center;
  }
  .ivp-foot strong { color: #fff; }
  .ivp-foot__addr { color: #b8c2cd; }
}