/* ============================================================
   components.css — Reusable UI components
   ============================================================ */

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.card__head h2 { font-size: .95rem; }
.card__head .spacer { margin-left: auto; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary { background: var(--amber); color: #241a05; }
.btn--primary:hover { background: var(--amber-deep); color: #fff; }
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text-2);
}
.btn--ghost:hover { color: var(--text); border-color: var(--text-3); }
.btn--danger { background: var(--bad); color: #fff; }
.btn--sm { padding: 6px 11px; font-size: .78rem; }

/* ---------- badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge--good    { background: var(--good-soft); color: var(--good); }
.badge--info    { background: var(--info-soft); color: var(--info); }
.badge--warn    { background: var(--warn-soft); color: var(--warn); }
.badge--bad     { background: var(--bad-soft);  color: var(--bad); }
.badge--neutral { background: var(--paper);     color: var(--text-2); border: 1px solid var(--line); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.table th {
  text-align: left;
  padding: 11px 16px;
  font-size: .73rem;
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
  letter-spacing: .02em;
  white-space: nowrap;
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--paper) 55%, transparent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-main { font-weight: 600; }
.table .cell-sub { display: block; font-size: .74rem; color: var(--text-3); }

/* ---------- forms ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
}
.field .req { color: var(--bad); }

.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .87rem;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--amber);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent);
}
.textarea { resize: vertical; min-height: 80px; }

.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--bad); }
.field__error { font-size: .74rem; color: var(--bad); margin-top: 4px; }
/* Two inputs that read as one value, e.g. Estimated Time's hours + minutes. */
.field__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Searchable customer picker (New Job Card). The list is absolute inside the
   field, so it takes the field's width and scrolls with the modal. */
.cust-combo { position: relative; }
.cust-combo__input { padding-right: 58px; text-overflow: ellipsis; }
.cust-combo__caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
}
.cust-combo__clear {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer;
}
.cust-combo__clear[hidden] { display: none; }
.cust-combo__clear:hover, .cust-combo__clear:focus-visible { background: var(--paper); color: var(--text); outline: none; }
.cust-combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  max-height: min(280px, 45vh); overflow-y: auto; overscroll-behavior: contain; scroll-margin-bottom: 12px;
  padding: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
}
.cust-combo__opt {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-radius: 5px; cursor: pointer; min-width: 0;
}
.cust-combo__opt:hover, .cust-combo__opt.is-active { background: var(--amber-soft); }
.cust-combo__name { font-size: .87rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.cust-combo__meta { font-size: .76rem; color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cust-combo__note { padding: 10px; font-size: .8rem; color: var(--text-2); text-align: center; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.form-grid .span-2 { grid-column: span 2; }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 18, 26, .55);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 60;
}
.modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.modal--lg { max-width: 840px; }
.modal__head {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.modal__head h2 { font-size: 1rem; }
.modal__close { margin-left: auto; }
.modal__body { padding: 20px; }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

/* ---------- toasts ---------- */
.toast-host {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink-800);
  color: #eef2f6;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  font-size: .84rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  max-width: 340px;
}
.toast.is-in { opacity: 1; transform: none; }
.toast__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.toast--success .toast__dot { background: var(--good); }
.toast--error   .toast__dot { background: var(--bad); }
.toast--warning .toast__dot { background: var(--amber); }
.toast--info    .toast__dot { background: var(--info); }

/* ---------- empty state ---------- */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-3);
}
.empty svg { opacity: .4; margin-bottom: 12px; }
.empty h3 { font-size: .95rem; color: var(--text-2); margin-bottom: 4px; }
.empty p { font-size: .82rem; margin: 0 0 16px; }

/* ---------- page toolbar (search/filter row) ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.toolbar .input, .toolbar .select { width: auto; }
.toolbar__search { min-width: 240px; }
.toolbar .spacer { margin-left: auto; }
.toolbar__count { font-size: .8rem; color: var(--text-3); white-space: nowrap; }

/* Customers: keep the primary action flush right when the toolbar wraps. */
[data-page="customers"] .toolbar #addCustomerBtn { margin-left: auto; }

/* ---------- row actions ---------- */
.row-actions { display: flex; gap: 6px; align-items: center; }
.row-actions--wrap { flex-wrap: wrap; }
.icon-btn--sm { width: 30px; height: 30px; border-radius: 7px; }
.icon-btn--danger:hover { color: var(--bad); border-color: var(--bad); }

/* ---------- compact tables (inside modals) ---------- */
.table--compact th { padding: 8px 12px; }
.table--compact td { padding: 9px 12px; }

.muted { color: var(--text-3); }
.due { color: var(--bad); }
.muted-note { font-size: .82rem; color: var(--text-3); margin: 4px 0 0; }

/* ---------- detail view (customer/vehicle/job details) ---------- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-bottom: 18px;
}
.detail-grid .span-2 { grid-column: span 2; }
.detail-grid--3 { grid-template-columns: repeat(3, 1fr); }
.detail-item span {
  display: block;
  font-size: .72rem;
  color: var(--text-3);
  margin-bottom: 2px;
}
.detail-item strong { font-size: .87rem; font-weight: 600; }

.summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.summary-row--6 { grid-template-columns: repeat(6, 1fr); margin-top: 18px; }
.summary-row--6 .summary-tile strong { font-size: .88rem; }
.summary-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}
.summary-tile strong {
  display: block;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.summary-tile span { font-size: .7rem; color: var(--text-3); }
.summary-tile--good strong { color: var(--good); }
.summary-tile--bad strong { color: var(--bad); }

.detail-section-title {
  font-size: .82rem;
  color: var(--text-2);
  margin: 0 0 8px;
  padding-top: 4px;
}
.detail-section-title:not(:first-child) { margin-top: 18px; }

/* ---------- page subtitle ---------- */
.page-subtitle {
  font-size: .84rem;
  color: var(--text-3);
  margin: -4px 0 16px;
}

/* ---------- long description cells ---------- */
.cell-desc {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-row--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- job card line editors ---------- */
.line-head, .line-row {
  display: grid;
  grid-template-columns: 1fr 70px 110px 100px 34px;
  gap: 8px;
  align-items: center;
}
.line-head--part, .line-row--part {
  grid-template-columns: 1fr 110px 70px 110px 100px 34px;
}
.line-head {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 6px;
}
.line-row { margin-bottom: 8px; }
.line-total { font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
#addServiceLine, #addPartLine, #addCustomLine { margin: 4px 0 6px; }
/* Custom work row: a name box carrying a small "Custom" tag where the
   catalogue select would be. */
.line-work-wrap { position: relative; min-width: 0; }
.line-work { padding-right: 72px; }
.line-work-tag {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 2px 8px; border-radius: 999px; pointer-events: none;
  background: var(--amber-soft); color: var(--amber-deep);
  font-size: .68rem; font-weight: 600; line-height: 1.4;
}
.muted-note-inline { font-weight: 400; font-size: .72rem; color: var(--text-3); }

/* ---------- totals panel ---------- */
.totals-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: 10px 14px;
}
.totals-panel > div {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: .84rem;
}
.totals-panel span { color: var(--text-2); }
.totals-panel strong { font-variant-numeric: tabular-nums; }
.totals-grand {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 7px !important;
  font-size: .95rem !important;
}
.totals-grand strong { color: var(--amber-deep); }
.totals-due strong { color: var(--bad); }

/* ---------- inspection checklist ---------- */
.insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.insp-row {
  display: grid;
  grid-template-columns: 88px 120px 1fr;
  gap: 8px;
  align-items: center;
}
.insp-label { font-size: .8rem; font-weight: 600; color: var(--text-2); }
.insp-view__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: .84rem;
}
.insp-view__row:last-child { border-bottom: 0; }
.insp-note-text { color: var(--text-2); }

/* ---------- misc ---------- */
.warn-banner {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.detail-text { margin: 0; font-size: .87rem; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.stats-grid--wide { grid-template-columns: repeat(6, 1fr); }

/* ---------- native checkbox/radio accent (Settings module) ---------- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--amber); }
.check-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.check-row label { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-2); cursor: pointer; }

/* ---------- ranked horizontal bar list (Reports module) ---------- */
.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-list__row { display: grid; grid-template-columns: 150px 1fr 96px; align-items: center; gap: 10px; }
.bar-list__label {
  font-size: .82rem; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-list__track { background: var(--paper); border-radius: 6px; height: 10px; overflow: hidden; }
.bar-list__fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--amber), var(--amber-deep)); }
.bar-list__value { font-size: .8rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }


.toolbar__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ---------- searchable customer picker (Add Vehicle) ---------- */
.cust-picker { position: relative; }
.cust-picker [hidden] { display: none !important; }
.cust-picker__box { position: relative; }
.cust-picker__box .input { padding-right: 38px; }
.cust-picker__clear {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-2); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.cust-picker__clear:hover { background: var(--paper); color: var(--text); }
.cust-picker__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  margin: 0; padding: 4px; list-style: none;
  max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
}
.cust-picker__list [role="option"] {
  display: flex; flex-direction: column; gap: 1px;
  min-height: 40px; justify-content: center;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
.cust-picker__list [role="option"]:hover,
.cust-picker__list [role="option"].is-active { background: var(--amber-soft); }
.cust-picker__name { font-size: .87rem; color: var(--text); }
.cust-picker__meta { font-size: .76rem; color: var(--text-2); }
.cust-picker__empty, .cust-picker__more { padding: 10px; font-size: .82rem; color: var(--text-2); }
.cust-picker__picked { margin-top: 4px; }

/* ---------- Add Vehicle modal: header, titled sections, sticky footer ---------- */
.veh-add { max-width: 880px; }
.veh-add .modal__head { gap: 14px; padding: 16px 22px; z-index: 3; }
.veh-add__icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius); background: var(--amber-soft); color: var(--amber-deep);
}
.veh-add__titles { min-width: 0; }
.veh-add .modal__head h2 { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.veh-add__sub { margin: 2px 0 0; font-size: .82rem; color: var(--text-2); }
.veh-add .modal__body { padding: 18px 22px; background: var(--paper); }
.veh-add .field label { color: var(--text); }
.veh-add .input, .veh-add .select { height: 40px; }
/* brand / model / color open a list on click: show it like a dropdown */
.veh-add .cust-picker > .input[role="combobox"] {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a97a6'%3E%3Cpath d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px;
}
.veh-add .modal__foot {
  position: sticky; bottom: 0; z-index: 2;
  padding: 14px 22px; background: var(--surface);
}
.veh-add .modal__foot .btn { min-height: 40px; padding: 9px 20px; }
.veh-add .modal__foot .btn--primary { box-shadow: 0 2px 8px color-mix(in srgb, var(--amber) 35%, transparent); }

.veh-form { display: grid; gap: 16px; }
.form-section {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.form-section__head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
  background: color-mix(in srgb, var(--amber-soft) 45%, var(--surface));
}
.form-section__icon {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); background: var(--amber-soft); color: var(--amber-deep);
}
.form-section__title { margin: 0; font-size: .92rem; font-weight: 700; color: var(--text); }
.form-section__desc { margin: 1px 0 0; font-size: .76rem; color: var(--text-2); }
.form-section__body { padding: 16px 16px 2px; gap: 0 18px; }
/* Status beside Notes on wide screens (Notes is span-2 in the shared field markup) */
.form-section--status .span-2 { grid-column: auto; }

/* ---------- New / Edit Job Card ----------
   job-cards.js adds .jc-new (New) or .jc-edit (Edit) to the modal and regroups
   the shared form into .jc-sec cards. Everything here is scoped to those two
   classes; :is() keeps each rule's specificity that of a single class. */
:is(.jc-new, .jc-edit) { max-width: 960px; }
.jc-form { display: grid; gap: 16px; }
.jc-sec__body { padding: 16px; }
:is(.jc-new, .jc-edit) .textarea { min-height: 72px; }
/* the section title already names these fields; keep their labels for screen readers */
.jc-sec--complaint .field > label, .jc-sec--notes .field > label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.jc-sec--complaint .field, .jc-sec--notes .field { margin-bottom: 0; }
.jc-sec--notes .field[style] { margin-top: 0 !important; }  /* the shared markup spaces it from the totals inline */
.jc-sec .form-section__title .req { color: var(--bad); }

/* line items: a quiet table header, rows of inputs, actions underneath */
:is(.jc-new, .jc-edit) .line-head {
  margin-bottom: 8px; padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--paper); color: var(--text-2);
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
}
:is(.jc-new, .jc-edit) .line-total { font-size: .88rem; color: var(--text); }
:is(.jc-new, .jc-edit) .line-row--custom .line-work { box-shadow: inset 3px 0 0 var(--amber); }
:is(.jc-new, .jc-edit) .line-row--custom .line-work:focus { box-shadow: inset 3px 0 0 var(--amber), 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
.jc-sec__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
:is(.jc-new, .jc-edit) #addServiceLine, :is(.jc-new, .jc-edit) #addPartLine, :is(.jc-new, .jc-edit) #addCustomLine { margin: 0; }
:is(.jc-new, .jc-edit) #addCustomLine { border-style: dashed; }
.jc-sec--services .field__error:empty { display: none; }
.jc-sec--services .field__error { margin-top: 8px; }

/* inspection checklist: one row per area, the status shown as a colour */
:is(.jc-new, .jc-edit) .insp-grid { gap: 8px 14px; }
:is(.jc-new, .jc-edit) .insp-row {
  grid-template-columns: 92px 124px minmax(0, 1fr);
  padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: inset 3px 0 0 var(--line);
}
:is(.jc-new, .jc-edit) .insp-row .input, :is(.jc-new, .jc-edit) .insp-row .select { height: 36px; }
:is(.jc-new, .jc-edit) .insp-label { color: var(--text); font-size: .82rem; }
:is(.jc-new, .jc-edit) .insp-row[data-state="OK"] { box-shadow: inset 3px 0 0 var(--good); }
:is(.jc-new, .jc-edit) .insp-row[data-state="OK"] .insp-state { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); color: var(--good); font-weight: 600; }
:is(.jc-new, .jc-edit) .insp-row[data-state="Attention"] { box-shadow: inset 3px 0 0 var(--warn); }
:is(.jc-new, .jc-edit) .insp-row[data-state="Attention"] .insp-state { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); color: var(--warn); font-weight: 600; }
:is(.jc-new, .jc-edit) .insp-row[data-state="Critical"] { box-shadow: inset 3px 0 0 var(--bad); }
:is(.jc-new, .jc-edit) .insp-row[data-state="Critical"] .insp-state { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); color: var(--bad); font-weight: 600; }
:is(.jc-new, .jc-edit) .insp-row[data-state="N/A"] { box-shadow: inset 3px 0 0 var(--text-3); }
:is(.jc-new, .jc-edit) .insp-row[data-state="N/A"] .insp-state { color: var(--text-2); }

/* billing: the inputs beside a summary with Grand Total and Due to the fore */
.jc-billing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 18px; align-items: start; }
.jc-billing .form-grid--3 { grid-template-columns: 1fr; }
/* the two discount inputs side by side; the one showing a calculated equivalent is greyed (still editable) */
/* (they stack by themselves when the column is too narrow for both) */
.jc-discount-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.jc-discount-pair .input.is-derived { background: var(--paper); color: var(--text-2); }
:is(.jc-new, .jc-edit) #totalsPanel { margin-top: 0; padding: 12px 16px; background: var(--paper); }
:is(.jc-new, .jc-edit) #totalsPanel > div { padding: 4px 0; }
:is(.jc-new, .jc-edit) #totalsPanel > div:nth-child(4) { margin-top: 6px; padding-top: 9px; border-top: 1px dashed var(--line); font-weight: 600; }
:is(.jc-new, .jc-edit) #totalsPanel > div:nth-child(4) span { color: var(--text); }
:is(.jc-new, .jc-edit) #totalsPanel .totals-grand {
  margin: 8px -16px 0; padding: 11px 16px !important; border-top: 0;
  background: var(--amber-soft); font-size: 1.05rem !important; font-weight: 700;
}
:is(.jc-new, .jc-edit) #totalsPanel .totals-grand span { color: var(--text); }
:is(.jc-new, .jc-edit) #totalsPanel > div:nth-child(8) { margin-top: 8px; }
:is(.jc-new, .jc-edit) #totalsPanel > div:nth-child(9) { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--line); font-size: .98rem; font-weight: 700; }
:is(.jc-new, .jc-edit) #totalsPanel > div:nth-child(9) span { color: var(--text); }

/* Edit Job Card only: number tag in the header, linked appointment line,
   complaint marked as the job's subject, Cancel and Save at opposite ends */
.jc-edit__titleline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.jc-edit__id {
  padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius: 999px;
  background: var(--amber-soft); color: var(--text); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jc-edit .jc-sec--job .muted-note {
  grid-column: 1 / -1; justify-self: start; margin: 0 0 14px !important; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--text-2);
}
.jc-edit .jc-sec--job .muted-note strong { white-space: nowrap; }
.jc-edit .jc-sec--complaint { border-left: 3px solid var(--amber); }
/* a wrapped "Labour Total (or direct amount)" label keeps the three inputs level */
.jc-edit .jc-sec--labour .form-grid { align-items: end; }
.jc-edit .jc-sec--complaint .textarea { min-height: 84px; }
.jc-edit .modal__foot { justify-content: space-between; }

/* ---------- Job Card Details (read-only view) ----------
   .jcv-modal sits on top of the .veh-view details shell (header, paper body,
   sticky footer, 1000px width). Everything else is scoped to .jcv-*. */
.jcv-kicker { display: block; font-size: .78rem; font-weight: 600; color: var(--text-2); letter-spacing: .02em; }
.jcv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* status strip */
.jcv-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.jcv-strip__item { min-width: 0; padding: 12px 16px; border-left: 1px solid var(--line); }
.jcv-strip__item:first-child { border-left: 0; }
.jcv-strip__label { display: block; margin-bottom: 6px; font-size: .74rem; font-weight: 600; color: var(--text-2); }
.jcv-strip__value { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .88rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.jcv-strip__icon { flex: none; display: grid; color: var(--text-3); }
.jcv-strip__item:nth-child(-n+2) .jcv-strip__icon { display: none; }   /* the badges carry their own colour */

/* cards */
.jcv-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.jcv-cols--end { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.jcv-stack { display: grid; gap: 16px; }
.jcv-card {
  min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.jcv-card__head {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
  background: color-mix(in srgb, var(--amber-soft) 45%, var(--surface));
}
.jcv-card__icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--radius-sm); background: var(--amber-soft); color: var(--amber-deep);
}
.jcv-card__title { margin: 0; font-size: .92rem; font-weight: 700; color: var(--text); }
.jcv-card__body { padding: 14px 16px; }
.jcv-card--complaint .jcv-card__head { background: color-mix(in srgb, var(--bad-soft) 70%, var(--surface)); }
.jcv-card--complaint .jcv-card__icon { background: var(--bad-soft); color: var(--bad); }
.jcv-card--condition .jcv-card__head { background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); }
.jcv-card--condition .jcv-card__icon { background: var(--warn-soft); color: var(--warn); }
.jcv-card--summary .jcv-card__head { background: color-mix(in srgb, var(--info-soft) 70%, var(--surface)); }
.jcv-card--summary .jcv-card__icon { background: var(--info-soft); color: var(--info); }
.jcv .detail-text { line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.jcv-empty { margin: 0; padding: 14px; border-radius: var(--radius-sm); background: var(--paper); color: var(--text-2); text-align: center; }

/* customer & vehicle facts */
.jcv-dl { margin: 0; display: grid; gap: 0; }
.jcv-dl__row { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.jcv-dl__row:last-child { border-bottom: 0; }
.jcv-dl dt { font-size: .82rem; color: var(--text-2); }
.jcv-dl dd { margin: 0; font-size: .86rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

/* work details: tabs + panels */
.jcv-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; border-bottom: 1px solid var(--line); }
.jcv-tab {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; padding: 9px 14px;
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent; color: var(--text-2); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.jcv-tab:hover { color: var(--text); background: var(--paper); }
.jcv-tab[aria-selected="true"] {
  border-color: var(--line); background: var(--surface); color: var(--amber-deep);
  box-shadow: inset 0 2px 0 var(--amber);
}
.jcv-tab:focus-visible, .jcv-panel:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.jcv-panel { padding: 14px 16px; }
.jcv-table th { background: var(--paper); }
.jcv-table__no { width: 40px; color: var(--text-3); }

/* inspection rows: the badge carries the state; a coloured edge echoes it */
.jcv-insp .insp-view__row { padding-left: 10px; box-shadow: inset 3px 0 0 var(--line); }
.jcv-insp .insp-view__row[data-state="OK"] { box-shadow: inset 3px 0 0 var(--good); }
.jcv-insp .insp-view__row[data-state="Attention"] { box-shadow: inset 3px 0 0 var(--warn); }
.jcv-insp .insp-view__row[data-state="Critical"] { box-shadow: inset 3px 0 0 var(--bad); }
.jcv-insp .insp-view__row[data-state="N/A"] { box-shadow: inset 3px 0 0 var(--text-3); }
.jcv-insp .insp-label { color: var(--text); min-width: 96px; }

/* workshop notes */
.jcv-note + .jcv-note { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.jcv-note__title { margin: 0 0 4px; font-size: .78rem; font-weight: 700; color: var(--text-2); }

/* summary: Grand Total and Due to the fore */
/* Job Card advances: the form's note in place of the typed Paid input, and the
   details card's list of payments taken against the job card. */
.field__label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.jf-advance-note { margin: 0; font-size: .82rem; color: var(--text-2); line-height: 1.4; }
.jcv-advances { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .84rem; }
.jcv-advances__title { margin: 0 0 6px; font-size: .8rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.jcv-advances ul { margin: 0; padding: 0; list-style: none; }
.jcv-advances li { padding: 4px 0; overflow-wrap: anywhere; }
.jcv-advances .cell-sub { display: block; }
.jcv .totals-panel--view { margin-top: 0; padding: 4px 2px; border: 0; background: none; }
.jcv .totals-panel--view > div { padding: 4px 0; }
.jcv .totals-panel--view > div:nth-child(4) { margin-top: 6px; padding-top: 9px; border-top: 1px dashed var(--line); font-weight: 600; }
.jcv .totals-panel--view > div:nth-child(4) span { color: var(--text); }
.jcv .totals-panel--view .totals-grand {
  margin: 8px -16px 0; padding: 11px 16px !important; border-top: 0;
  background: var(--amber-soft); font-size: 1.05rem !important; font-weight: 700;
}
.jcv .totals-panel--view .totals-grand span { color: var(--text); }
.jcv .totals-panel--view > div:nth-child(8) { margin-top: 8px; }
.jcv .totals-panel--view > div:nth-child(9) { margin: 4px -16px -14px; padding: 11px 16px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); font-size: .98rem; font-weight: 700; }
.jcv .totals-panel--view > div.totals-due:nth-child(9) { background: var(--bad-soft); }
.jcv .totals-panel--view > div:nth-child(9) span { color: var(--text); }

/* ---------- Vehicle Details modal ---------- */
.veh-view { max-width: 1000px; }
.veh-view .modal__head { gap: 14px; padding: 16px 22px; z-index: 3; }
.veh-view__icon {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--radius); background: var(--amber-soft); color: var(--amber-deep);
}
.veh-view__titles { min-width: 0; }
.veh-view .modal__head h2 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.veh-view__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 3px; }
.veh-view__reg { font-size: .86rem; font-weight: 600; color: var(--text-2); letter-spacing: .02em; overflow-wrap: anywhere; }
.veh-view .modal__body { padding: 18px 22px; background: var(--paper); }
.veh-view .modal__foot { position: sticky; bottom: 0; z-index: 2; padding: 14px 22px; background: var(--surface); }
.veh-view .modal__foot .btn { min-height: 40px; padding: 9px 18px; }

.vd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.vd-section__body { padding: 16px; }
.vd-section__body--flush { padding: 0; }
.vd-section__body--flush .table th:first-child,
.vd-section__body--flush .table td:first-child { padding-left: 16px; }
.vd-ident { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.vd-photo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 150px; border-radius: var(--radius); border: 1px dashed var(--line);
  background: var(--paper); color: var(--text-3); font-size: .78rem; font-weight: 600; text-align: center;
}
.vd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
.vd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vd-item { min-width: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--paper); }
.vd-item__label { display: block; font-size: .72rem; color: var(--text-3); margin-bottom: 2px; }
.vd-item__value { display: block; font-size: .9rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.vd-note { margin: 0; font-size: .85rem; color: var(--text-2); }
.vd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vd-stat {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
}
.vd-stat__icon {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); background: var(--amber-soft); color: var(--amber-deep);
}
.vd-stat > div { min-width: 0; }
.vd-stat strong { display: block; font-size: .92rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vd-stat div > span { display: block; font-size: .72rem; color: var(--text-3); }
.vd-stat--good .vd-stat__icon { background: var(--good-soft); color: var(--good); }
.vd-stat--good strong { color: var(--good); }
.vd-stat--bad .vd-stat__icon { background: var(--bad-soft); color: var(--bad); }
.vd-stat--bad strong { color: var(--bad); }
.vd-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px; color: var(--text-3); text-align: center;
}
.vd-empty p { margin: 4px 0 0; font-size: .88rem; font-weight: 600; color: var(--text-2); }
.vd-empty span { font-size: .78rem; }

/* ---------- Customer Details modal (reuses the Vehicle Details layout) ---------- */
.cd-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cd-id { white-space: nowrap; }
.cd-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.cd-top .vd-stats { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cd-span-2 { grid-column: 1 / -1; }
.cd-top .vd-stat { padding: 14px 16px; gap: 12px; }
.cd-top .vd-stat__icon { width: 42px; height: 42px; }
.cd-top .vd-stat strong { font-size: 1.2rem; }
.cd-top .vd-stat div > span { font-size: .78rem; }
.vd-stat__icon--info { background: var(--info-soft); color: var(--info); }
.vd-stat__icon--good { background: var(--good-soft); color: var(--good); }
.vd-stat__icon--bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- Record Payment modal ----------
   payments.js adds .pay-rec to this one dialog. The fields, ids and the
   customer picker are the existing ones, only restyled. Icons are CSS masks:
   the save button's text is swapped for "Saving…" while it works, which
   would drop an icon placed inside it. The icon variables are shared with
   the Payment Details dialog (.pay-view) below. */
.pay-rec, .pay-view {
  --pay-ico-type: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
  --pay-ico-customer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  --pay-ico-invoice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z'/%3E%3C/svg%3E");
  --pay-ico-jobcard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
  --pay-ico-amount: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.58 2 4 3.34 4 5v2c0 1.66 3.58 3 8 3s8-1.34 8-3V5c0-1.66-3.58-3-8-3zm8 7.6c-1.5 1.1-4.5 1.9-8 1.9s-6.5-.8-8-1.9V12c0 1.66 3.58 3 8 3s8-1.34 8-3V9.6zm0 5c-1.5 1.1-4.5 1.9-8 1.9s-6.5-.8-8-1.9V17c0 1.66 3.58 3 8 3s8-1.34 8-3v-2.4z'/%3E%3C/svg%3E");
  --pay-ico-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z'/%3E%3C/svg%3E");
  --pay-ico-method: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
  --pay-ico-notes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z'/%3E%3C/svg%3E");
  --pay-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  --pay-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  --pay-ico-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
  --pay-ico-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E");
  --pay-ico-case: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
  --pay-ico-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
  --pay-ico-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9A7.902 7.902 0 0 1 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1A7.902 7.902 0 0 1 20 12c0 4.42-3.58 8-8 8z'/%3E%3C/svg%3E");
  --pay-ico-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
}
.pay-rec { max-width: 820px; border-radius: 14px; }
.pay-rec .modal__head { gap: 14px; padding: 18px 24px; }
.pay-rec__icon {
  flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--amber-soft);
  position: relative;
}
.pay-rec__icon::before {
  content: ''; position: absolute; inset: 11px; background: var(--amber-deep);
  -webkit-mask: var(--pay-ico-amount) center / contain no-repeat; mask: var(--pay-ico-amount) center / contain no-repeat;
}
.pay-rec__titles { min-width: 0; }
.pay-rec .modal__head h2 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.pay-rec__sub { margin: 2px 0 0; font-size: .84rem; color: var(--text-2); }
.pay-rec .modal__body { padding: 22px 24px 6px; }
.pay-rec .form-grid { gap: 0 22px; }
.pay-rec .field { margin-bottom: 18px; }

/* labels: an icon, dark text, "(optional)" quieter */
.pay-rec .field > label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: .86rem; font-weight: 600; color: var(--text);
}
.pay-rec .field > label::before {
  content: ''; flex: none; width: 18px; height: 18px; background: var(--text-2);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.pay-rec label[for="pf-type"] { --ico: var(--pay-ico-type); }
.pay-rec label[for="pf-customer-search"] { --ico: var(--pay-ico-customer); }
.pay-rec label[for="pf-invoice"] { --ico: var(--pay-ico-invoice); }
.pay-rec label[for="pf-jobcard"] { --ico: var(--pay-ico-jobcard); }
.pay-rec label[for="pf-amount"] { --ico: var(--pay-ico-amount); }
.pay-rec label[for="pf-date"] { --ico: var(--pay-ico-date); }
.pay-rec label[for="pf-method"] { --ico: var(--pay-ico-method); }
.pay-rec label[for="pf-notes"] { --ico: var(--pay-ico-notes); }
.pay-rec__opt { font-weight: 400; color: var(--text-3); }

/* fields: one height, roomier padding */
.pay-rec .input, .pay-rec .select { height: 44px; padding-left: 14px; font-size: .9rem; }
.pay-rec textarea.input { height: auto; min-height: 84px; padding-top: 11px; resize: vertical; }

/* customer picker: a search glyph inside the box */
.pay-rec .cust-combo::before {
  content: ''; position: absolute; left: 13px; top: 22px; z-index: 1; width: 18px; height: 18px;
  transform: translateY(-50%); background: var(--text-3); pointer-events: none;
  -webkit-mask: var(--pay-ico-search) center / contain no-repeat; mask: var(--pay-ico-search) center / contain no-repeat;
}
.pay-rec .cust-combo__input { padding-left: 40px; }

/* amount: the currency as a prefix */
.pay-rec__money { display: flex; }
.pay-rec__cur {
  flex: none; display: grid; place-items: center; width: 46px;
  border: 1px solid var(--line); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--paper); color: var(--text-2); font-size: 1.1rem; font-weight: 600;
}
.pay-rec__money .input { min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pay-rec__money:focus-within .pay-rec__cur { border-color: var(--amber); color: var(--text); }
.field--error .pay-rec__cur { border-color: var(--bad); }

/* footer */
.pay-rec .modal__foot { gap: 12px; padding: 16px 24px; }
.pay-rec .modal__foot .btn { min-height: 44px; padding: 10px 22px; }
.pay-rec .modal__foot .btn--primary { box-shadow: 0 2px 8px color-mix(in srgb, var(--amber) 35%, transparent); }
.pay-rec .modal__foot [data-save]::before {
  content: ''; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--pay-ico-type) center / contain no-repeat; mask: var(--pay-ico-type) center / contain no-repeat;
}

/* ---------- Payment Details modal ----------
   payments.js adds .pay-view to this one dialog and wraps its existing
   sections in cards; every value, link and button is the existing one.
   Icons are CSS masks (variables above); footer buttons are styled by their
   existing data attributes and links, so their handlers are untouched. */
.pay-view { max-width: 820px; border-radius: 14px; }
.pay-view .modal__head { gap: 14px; padding: 18px 24px; }
.pay-view__icon {
  flex: none; position: relative; width: 46px; height: 46px; border-radius: 12px; background: var(--amber-soft);
}
.pay-view__icon::before {
  content: ''; position: absolute; inset: 11px; background: var(--amber-deep);
  -webkit-mask: var(--pay-ico-amount) center / contain no-repeat; mask: var(--pay-ico-amount) center / contain no-repeat;
}
.pay-view__titles { min-width: 0; }
.pay-view .modal__head h2 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.pay-view__sub { margin: 2px 0 0; font-size: .84rem; color: var(--text-2); }
.pay-view .modal__body { display: grid; gap: 16px; padding: 20px 24px; }

/* one rule for every label icon: the element names its glyph in --ico */
.pay-view__fact > span::before, .pay-view__item > span::before, .pay-view__title::before {
  content: ''; flex: none; width: 18px; height: 18px; background: var(--text-2);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.pay-view__fact--date { --ico: var(--pay-ico-date); }
.pay-view__fact--method { --ico: var(--pay-ico-method); }
.pay-view__item--customer { --ico: var(--pay-ico-customer); }
.pay-view__item--phone { --ico: var(--pay-ico-phone); }
.pay-view__item--invoice { --ico: var(--pay-ico-type); }
.pay-view__item--jobcard { --ico: var(--pay-ico-wrench); }
.pay-view__title--ref { --ico: var(--pay-ico-customer); }
.pay-view__title--amount { --ico: var(--pay-ico-amount); }
.pay-view__title--notes { --ico: var(--pay-ico-type); }

/* status / date / method tiles */
.pay-view .pay-view__facts { gap: 14px; margin: 0; }
.pay-view__fact { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.pay-view .pay-view__fact > span {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .82rem; font-weight: 600; color: var(--text-2);
}
.pay-view__fact--status > span::before { display: none; }
.pay-view .pay-view__fact > strong { display: block; font-size: 1.05rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
/* the status badge as a pill with a dot; its tone and text are the badge's own */
.pay-view__fact .badge {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border-radius: 9px; font-size: .9rem; font-weight: 700;
}
.pay-view__fact .badge::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
/* .detail-item span (grey label text) would otherwise outrank the badge's own tone */
.pay-view__fact .badge--good { color: var(--good); }
.pay-view__fact .badge--info { color: var(--info); }
.pay-view__fact .badge--warn { color: var(--warn); }
.pay-view__fact .badge--bad { color: var(--bad); }
.pay-view__fact .badge--neutral { color: var(--text-2); }

/* section cards */
.pay-view__card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.pay-view .pay-view__title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0; font-size: .95rem; font-weight: 700; color: var(--text);
}
.pay-view .pay-view__title::before { width: 20px; height: 20px; background: var(--text); }
.pay-view__card--ref {
  border-color: color-mix(in srgb, var(--info) 18%, var(--line));
  background: color-mix(in srgb, var(--info-soft) 55%, var(--surface));
}
.pay-view__card--ref .pay-view__title::before { background: var(--info); }
.pay-view .pay-view__grid { gap: 16px 0; margin: 0; }
.pay-view__item { min-width: 0; padding: 0 16px; border-left: 1px solid color-mix(in srgb, var(--info) 18%, var(--line)); }
.pay-view__item:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.pay-view .pay-view__item > span {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: .82rem; color: var(--text-2);
}
.pay-view .pay-view__item > strong { display: block; padding-left: 26px; font-size: .98rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }

/* amount: the paid figure to the fore; invoice figures, when present, beneath */
.pay-view__card--amount {
  border-color: color-mix(in srgb, var(--amber) 22%, var(--line));
  background: color-mix(in srgb, var(--amber-soft) 50%, var(--surface));
}
.pay-view__card--amount .pay-view__title::before { background: var(--amber-deep); }
.pay-view .totals-panel--view { margin: 0; padding: 4px 16px; border-radius: 10px; background: var(--surface); }
.pay-view .totals-panel--view > div { align-items: baseline; gap: 12px; padding: 8px 0; font-size: .9rem; }
.pay-view .totals-panel--view > div + div { border-top: 1px solid var(--line); }
.pay-view .totals-panel--view .totals-grand {
  margin: 0; padding: 12px 0 !important; border-top: 0; font-size: 1rem !important;
}
.pay-view .totals-panel--view .totals-grand span { color: var(--text-2); font-weight: 600; }
.pay-view .totals-panel--view strong { white-space: nowrap; }
.pay-view .totals-panel--view .totals-grand strong { font-size: 1.6rem; font-weight: 800; color: var(--amber-deep); }

/* notes */
.pay-view .detail-text { font-size: .92rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); }

/* footer: every existing action, wrapping instead of running off the edge */
.pay-view .modal__foot { flex-wrap: wrap; gap: 10px; padding: 16px 24px; }
.pay-view .modal__foot .btn { min-height: 44px; padding: 10px 18px; }
.pay-view .modal__foot .btn::before {
  content: ''; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.pay-view .modal__foot [data-print-view] { --ico: var(--pay-ico-print); }
.pay-view .modal__foot [data-modal-close] { --ico: var(--pay-ico-close); }
.pay-view .modal__foot a[href^="invoices.html"] { --ico: var(--pay-ico-type); }
.pay-view .modal__foot a[href^="job-cards.html"] { --ico: var(--pay-ico-case); }
.pay-view .modal__foot [data-link-invoice] { --ico: var(--pay-ico-type); }
.pay-view .modal__foot [data-edit-notes] { --ico: var(--pay-ico-pencil); }
.pay-view .modal__foot [data-void] { --ico: var(--pay-ico-block); box-shadow: 0 2px 8px color-mix(in srgb, var(--amber) 35%, transparent); }

/* ---------- Invoice Details modal ----------
   invoices.js adds .inv-view to this one dialog (.inv-view--void when Void)
   and lays its existing values out in cards; every value expression, link and
   button is the existing one. Icons are CSS masks; footer buttons are styled
   by their existing data attributes and links, so their handlers are untouched.
   Screen only: the printed invoice is built separately in #printArea. */
.inv-view {
  --inv-ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
  --inv-ico-customer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  --inv-ico-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E");
  --inv-ico-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
  --inv-ico-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-1-2-2-2zm-5 12H9v-2h6v2zm5-7H4V4h16v3z'/%3E%3C/svg%3E");
  --inv-ico-calc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5.97 4.06L14.09 6l1.41 1.41L16.91 6l1.06 1.06-1.41 1.41 1.41 1.41-1.06 1.06-1.41-1.4-1.41 1.41-1.06-1.06 1.41-1.41-1.41-1.42zm-6.78.66h5v1.5h-5v-1.5zM11.5 16h-2v2H8v-2H6v-1.5h2v-2h1.5v2h2V16zm6.5 1.25h-5v-1.5h5v1.5zm0-2.5h-5v-1.5h5v1.5z'/%3E%3C/svg%3E");
  --inv-ico-notes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z'/%3E%3C/svg%3E");
  --inv-ico-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z'/%3E%3C/svg%3E");
  --inv-ico-case: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
  --inv-ico-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
  --inv-ico-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E");
  --inv-ico-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
  --inv-ico-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
  --inv-ico-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9A7.902 7.902 0 0 1 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1A7.902 7.902 0 0 1 20 12c0 4.42-3.58 8-8 8z'/%3E%3C/svg%3E");
  --inv-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
  --inv-ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
  --inv-ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  max-width: 1040px; border-radius: 14px;
}
/* one rule for every glyph: the element names its icon in --ico */
.inv-view__icon::before, .inv-view__card-icon::before, .inv-view__pay-icon::before,
.inv-view__fact--date::before, .inv-view__fact--job::before, .inv-view__fact--status::before {
  content: ''; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}

/* header: icon, "Invoice" kicker over the number, subtitle; status / date / job card facts */
.inv-view .modal__head { gap: 16px; padding: 18px 24px; z-index: 3; }
.inv-view__icon {
  --ico: var(--inv-ico-doc);
  flex: none; position: relative; width: 52px; height: 52px; border-radius: 12px;
  background: var(--amber-soft); color: var(--amber-deep);
}
.inv-view__icon::before { position: absolute; inset: 13px; }
.inv-view__titles { flex: 1 1 auto; min-width: 0; }
.inv-view .modal__head h2 { font-size: 1.6rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.inv-view__kicker { display: block; margin-bottom: 2px; font-size: .84rem; font-weight: 600; letter-spacing: .01em; color: var(--text-2); }
.inv-view__sub { margin: 4px 0 0; font-size: .84rem; color: var(--text-2); }
.inv-view .modal__close { flex: none; align-self: flex-start; margin-left: 0; }
.inv-view__facts { flex: none; display: flex; align-items: center; min-width: 0; }
.inv-view__fact { min-width: 0; padding: 4px 18px; border-left: 1px solid var(--line); }
.inv-view .inv-view__fact > span { display: block; margin: 0 0 2px; font-size: .78rem; color: var(--text-2); }
.inv-view .inv-view__fact > strong { display: block; font-size: 1rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.inv-view__fact--date, .inv-view__fact--job { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.inv-view__fact--date::before, .inv-view__fact--job::before { grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--text-2); }
.inv-view__fact--date { --ico: var(--inv-ico-date); }
.inv-view__fact--job { --ico: var(--inv-ico-case); }
/* status: a tinted tile, glyph + the badge's own text + a short caption; the label stays for screen readers */
.inv-view__fact--status {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
  margin-right: 18px; padding: 10px 16px; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--text-2);
}
.inv-view__fact--status::before { grid-row: 1 / span 2; width: 22px; height: 22px; }
.inv-view .inv-view__fact--status > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.inv-view__fact--good { --ico: var(--inv-ico-check); color: var(--good); background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 25%, var(--line)); }
.inv-view__fact--warn { --ico: var(--inv-ico-clock); color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, var(--line)); }
.inv-view__fact--bad { --ico: var(--inv-ico-alert); color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 25%, var(--line)); }
.inv-view__fact--neutral { --ico: var(--inv-ico-block); }
/* the badge keeps its own text and tone class; .detail-item span would otherwise grey and shrink it */
.inv-view .inv-view__fact--status .badge {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  font-size: 1.05rem; font-weight: 700; line-height: 1.2; color: inherit;
}
.inv-view .inv-view__fact--status .badge--good { color: color-mix(in srgb, var(--good) 65%, var(--text)); }
.inv-view .inv-view__fact--status .badge--warn { color: color-mix(in srgb, var(--warn) 65%, var(--text)); }
.inv-view .inv-view__fact--status .badge--bad { color: color-mix(in srgb, var(--bad) 65%, var(--text)); }
.inv-view__note { display: block; font-size: .76rem; font-weight: 500; color: var(--text-2); white-space: nowrap; }

/* body */
.inv-view .modal__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 24px; }
.inv-view__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; }
.inv-view__cols--end { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.inv-view__stack { display: grid; gap: 16px; min-width: 0; }

/* cards */
.inv-view__card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.inv-view__card-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--info-soft) 45%, var(--surface));
}
.inv-view__card-icon {
  flex: none; position: relative; width: 36px; height: 36px; border-radius: 9px;
  background: var(--info-soft); color: var(--info);
}
.inv-view__card-icon::before { position: absolute; inset: 8px; }
.inv-view .inv-view__title { margin: 0; padding: 0; font-size: .98rem; font-weight: 700; color: var(--text); }
.inv-view__card--customer { --ico: var(--inv-ico-customer); }
.inv-view__card--vehicle { --ico: var(--inv-ico-car); }
.inv-view__card--vehicle .inv-view__card-head { background: color-mix(in srgb, var(--good-soft) 45%, var(--surface)); }
.inv-view__card--vehicle .inv-view__card-icon { background: var(--good-soft); color: var(--good); }
.inv-view__card--services { --ico: var(--inv-ico-wrench); }
.inv-view__card--parts { --ico: var(--inv-ico-box); }
.inv-view__card--summary { --ico: var(--inv-ico-calc); }
.inv-view__card--notes { --ico: var(--inv-ico-notes); }
.inv-view__card--notes .inv-view__card-head { background: var(--paper); }
.inv-view__card--notes .inv-view__card-icon { background: var(--surface); color: var(--text-2); }
.inv-view__card-body { padding: 14px 18px; }
.inv-view__count {
  padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: .76rem; font-weight: 600; color: var(--text-2); white-space: nowrap;
}

/* customer & vehicle: label / value rows; the vehicle card in two columns */
.inv-view__list { display: grid; padding: 4px 18px 8px; }
.inv-view__row {
  display: grid; grid-template-columns: minmax(84px, 36%) minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.inv-view__row:last-child { border-bottom: 0; }
.inv-view .inv-view__row > span { display: block; margin: 0; font-size: .86rem; color: var(--text-2); }
.inv-view .inv-view__row > strong { font-size: .93rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.inv-view__list--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-auto-flow: column; }
.inv-view__list--2 .inv-view__row:nth-child(-n+2) { padding-right: 16px; }
.inv-view__list--2 .inv-view__row:nth-child(n+3) { padding-left: 16px; border-left: 1px solid var(--line); }
.inv-view__list--2 .inv-view__row:nth-child(odd) { border-bottom: 1px solid var(--line); }
.inv-view__list--2 .inv-view__row:nth-child(even) { border-bottom: 0; }

/* services / parts tables */
.inv-view .inv-view__lines th { background: var(--paper); font-size: .78rem; color: var(--text-2); }
.inv-view .inv-view__lines td { font-size: .9rem; color: var(--text); }
.inv-view .inv-view__lines .inv-view__no { width: 44px; color: var(--text-2); }
.inv-view .inv-view__lines .inv-view__name { min-width: 140px; overflow-wrap: anywhere; }
.inv-view .inv-view__lines .inv-view__partno { overflow-wrap: anywhere; color: var(--text-2); }
.inv-view .inv-view__lines .num { white-space: nowrap; }
.inv-view .inv-view__lines .inv-view__total { font-weight: 600; }
.inv-view .muted-note { margin: 0; padding: 12px; border-radius: 8px; background: var(--paper); color: var(--text-2); text-align: center; }

/* financial summary: Grand Total to the fore, then Paid and Due as bands */
.inv-view .totals-panel--view { margin: 0; padding: 0; border: 0; background: none; }
.inv-view .totals-panel--view > div { align-items: baseline; gap: 12px; padding: 9px 2px; font-size: .92rem; border-bottom: 1px solid var(--line); }
.inv-view .totals-panel--view > div:nth-child(4) { border-bottom: 0; }
.inv-view .totals-panel--view strong { font-weight: 600; color: var(--text); white-space: nowrap; }
.inv-view .totals-panel--view .totals-grand {
  margin: 6px 0 0; padding: 14px 16px !important; border: 0; border-radius: 10px;
  background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--amber); font-size: 1rem !important;
}
.inv-view .totals-panel--view .totals-grand span { color: var(--text); font-weight: 700; }
.inv-view .totals-panel--view .totals-grand strong { font-size: 1.6rem; font-weight: 800; color: var(--text); }
.inv-view .totals-panel--view .inv-view__paid,
.inv-view .totals-panel--view .inv-view__due { margin-top: 8px; padding: 11px 16px; border: 0; border-radius: 10px; }
.inv-view .totals-panel--view .inv-view__paid span,
.inv-view .totals-panel--view .inv-view__due span { color: var(--text); font-weight: 700; }
.inv-view .totals-panel--view .inv-view__paid strong,
.inv-view .totals-panel--view .inv-view__due strong { font-size: 1.25rem; font-weight: 800; }
.inv-view .totals-panel--view .inv-view__paid { background: var(--good-soft); }
.inv-view .totals-panel--view .inv-view__paid strong { color: var(--good); }
/* Due: settled (0) reads positive, outstanding (> 0, the existing .totals-due) reads as a warning */
.inv-view .totals-panel--view .inv-view__due { background: var(--good-soft); }
.inv-view .totals-panel--view .inv-view__due strong { color: var(--good); }
.inv-view .totals-panel--view .inv-view__due.totals-due { background: var(--bad-soft); box-shadow: inset 4px 0 0 var(--bad); }
.inv-view .totals-panel--view .inv-view__due.totals-due strong { color: var(--bad); }
/* a write-off: named beside the cash, never part of it (0002) */
.inv-view .totals-panel--view .inv-view__wo { margin-top: 8px; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--paper); }
.inv-view .totals-panel--view .inv-view__wo span { color: var(--text-2); font-weight: 600; }
.inv-view .totals-panel--view .inv-view__wo strong { color: var(--text); font-weight: 700; }
/* write-off history; "N write-offs" is the longest card count, so its head may wrap on a phone */
.inv-view__card--adj { --ico: var(--inv-ico-calc); }
.inv-view__card--adj .inv-view__card-head { flex-wrap: wrap; row-gap: 6px; }
.inv-view .inv-view__adj td { vertical-align: top; }
.inv-view .inv-view__adj-reason { overflow-wrap: anywhere; color: var(--text); }
.inv-view .inv-view__adj-amt { font-weight: 700; white-space: nowrap; }
.inv-view .inv-view__adj--void .inv-view__adj-amt { text-decoration: line-through; color: var(--text-2); }
.inv-view .inv-view__adj--void .inv-view__adj-reason { color: var(--text-2); }
/* a Void invoice's frozen figures read neutral */
.inv-view--void .totals-panel--view .totals-grand,
.inv-view--void .totals-panel--view .inv-view__paid,
.inv-view--void .totals-panel--view .inv-view__due,
.inv-view--void .totals-panel--view .inv-view__due.totals-due { background: var(--paper); box-shadow: none; }
.inv-view--void .totals-panel--view .inv-view__paid strong,
.inv-view--void .totals-panel--view .inv-view__due strong,
.inv-view--void .totals-panel--view .inv-view__due.totals-due strong { color: var(--text-2); }

/* payment status: derived from the stored status and figures only */
.inv-view__pay {
  --tone: var(--text-2); --tone-soft: var(--paper);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--tone) 25%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--tone-soft) 70%, var(--surface));
}
.inv-view__pay--good { --tone: var(--good); --tone-soft: var(--good-soft); --ico: var(--inv-ico-check); }
.inv-view__pay--warn { --tone: var(--warn); --tone-soft: var(--warn-soft); --ico: var(--inv-ico-clock); }
.inv-view__pay--bad { --tone: var(--bad); --tone-soft: var(--bad-soft); --ico: var(--inv-ico-alert); }
.inv-view__pay--neutral { --ico: var(--inv-ico-block); }
.inv-view__pay-icon { position: relative; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); color: var(--tone); }
.inv-view__pay-icon::before { position: absolute; inset: 9px; }
.inv-view__pay-text { min-width: 0; }
.inv-view__pay .inv-view__title { margin-bottom: 6px; }
.inv-view__pay-msg { margin: 0; font-size: .92rem; font-weight: 600; color: var(--text); }
.inv-view__pay-sub { margin: 3px 0 0; font-size: .84rem; color: var(--text-2); overflow-wrap: anywhere; }

/* notes */
.inv-view .detail-text { font-size: .92rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); }

/* footer: every existing action, with icons; View Payments / Record Payment leads, Void reads destructive */
.inv-view .modal__foot { flex-wrap: wrap; gap: 10px; padding: 16px 24px; }
.inv-view .modal__foot .btn { min-height: 44px; padding: 10px 18px; font-size: .88rem; }
.inv-view .modal__foot .btn::before {
  content: ''; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.inv-view .modal__foot [data-print-view] { --ico: var(--inv-ico-print); }
.inv-view .modal__foot [data-modal-close] { --ico: var(--inv-ico-close); }
.inv-view .modal__foot a[href^="job-cards.html"] { --ico: var(--inv-ico-case); }
.inv-view .modal__foot [data-edit-notes] { --ico: var(--inv-ico-pencil); }
.inv-view .modal__foot [data-write-off] { --ico: var(--inv-ico-calc); }
.inv-view .modal__foot a[href^="payments.html"] {
  --ico: var(--inv-ico-card);
  background: var(--amber); border-color: var(--amber); color: #241a05;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--amber) 35%, transparent);
}
.inv-view .modal__foot a[href^="payments.html"]:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #fff; }
.inv-view .modal__foot [data-void] {
  --ico: var(--inv-ico-block);
  background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 45%, var(--line));
  color: color-mix(in srgb, var(--bad) 70%, var(--text));
}
.inv-view .modal__foot [data-void]:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
/* with Record Payment beside it, View Payments steps back to the secondary (ghost) style */
.inv-view .modal__foot a[href*="forInvoice="] ~ a[data-view-payments] {
  background: transparent; border-color: var(--line); color: var(--text-2); box-shadow: none;
}
.inv-view .modal__foot a[href*="forInvoice="] ~ a[data-view-payments]:hover { background: transparent; border-color: var(--text-3); color: var(--text); }
.inv-view__tag {
  margin-left: 6px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}

/* ---------- Invoices list page ----------
   Scoped to this page; the table's columns, rows, links and actions are the
   existing ones (invoices.js only adds .ivl-* hooks and data-labels). */
[data-page="invoices"] #invcStats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
[data-page="invoices"] #invcTableBody .num { white-space: nowrap; }
[data-page="invoices"] #invcTableBody .ivl-due--open { color: color-mix(in srgb, var(--bad) 75%, var(--text)); font-weight: 700; }
[data-page="invoices"] #page-content > .card .table th,
[data-page="invoices"] #invcTableBody td { padding-left: 12px; padding-right: 12px; }
[data-page="invoices"] #invcTableBody .ivl-id,
[data-page="invoices"] #invcTableBody .ivl-date,
[data-page="invoices"] #invcTableBody .ivl-job,
[data-page="invoices"] #invcTableBody .ivl-status { white-space: nowrap; }
[data-page="invoices"] #invcTableBody .ivl-act .row-actions { flex-wrap: nowrap; }

/* ---------- Invoices: create notice + write-off dialog (0002) ---------- */
.invc-create__warn {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn);
  color: var(--text); font-size: .86rem;
}
.invc-create__advances {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--info-soft); box-shadow: inset 3px 0 0 var(--info);
  color: var(--text); font-size: .86rem;
}
.invc-create__advances ul { margin: 6px 0; padding-left: 18px; }
.invc-create__advances li { overflow-wrap: anywhere; }
.wo-hint { display: block; margin-top: 4px; font-size: .78rem; color: var(--text-2); }
.wo-summary { margin: 4px 0 0; font-size: .9rem; font-weight: 600; color: var(--text); }
.wo-form-err:empty { display: none; }
.wo-form-err { margin: 8px 0 0; }

/* ---------- Invoices: post-completion discount & refund (design preview) ----------
   Screens only; invoices.js wires them to dialogs that save nothing. Built
   from the Invoice Details cards, buttons and tokens. */
.pca { display: grid; gap: 12px; min-width: 0; padding-top: 4px; }
.pca__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pca__title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.pca__sub { flex: 1 1 100%; margin: 0; font-size: .84rem; color: var(--text-2); }
.pca__cols { align-items: start; }
.pca-tag {
  display: inline-block; padding: 2px 9px; border: 1px dashed color-mix(in srgb, var(--warn) 55%, var(--line)); border-radius: 999px;
  background: var(--warn-soft); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--warn) 70%, var(--text)); white-space: nowrap;
}
.pca-tag--sm { margin-left: 6px; padding: 0 6px; font-size: .64rem; }
.inv-view__card--pca-pay { --ico: var(--inv-ico-card); }
.inv-view__card--pca-bill { --ico: var(--inv-ico-calc); }
.inv-view__card--pca-bill .inv-view__card-head { background: color-mix(in srgb, var(--amber-soft) 45%, var(--surface)); }
.inv-view__card--pca-bill .inv-view__card-icon { background: var(--amber-soft); color: var(--amber-deep); }

.pca-table td { vertical-align: top; }
.pca-table .pca-amt { font-weight: 700; white-space: nowrap; }
.pca-table .pca-row--void .pca-amt { text-decoration: line-through; color: var(--text-2); }

.pca-bill { display: grid; }
.pca-bill > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 2px; font-size: .92rem; border-bottom: 1px solid var(--line); }
.pca-bill span { color: var(--text-2); }
.pca-bill strong { font-weight: 600; color: var(--text); white-space: nowrap; }
.pca-bill .pca-bill__total { border-bottom: 2px solid var(--line); }
.pca-bill .pca-bill__total span, .pca-bill .pca-bill__total strong { font-weight: 700; color: var(--text); }
.pca-bill .pca-bill__net {
  margin-top: 8px; padding: 11px 16px; border: 0; border-radius: 10px;
  background: var(--good-soft);
}
.pca-bill .pca-bill__net span { font-weight: 700; color: var(--text); }
.pca-bill .pca-bill__net strong { font-size: 1.2rem; font-weight: 800; color: var(--good); }

.pca-actions { display: grid; gap: 8px; margin-top: 14px; }
.pca-actions .btn { justify-content: center; min-height: 42px; white-space: normal; }
.pca-actions .btn[disabled], .pca-hist .btn[disabled] { opacity: .55; cursor: not-allowed; }

.pca-notice {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--info-soft); box-shadow: inset 3px 0 0 var(--info);
  font-size: .82rem; color: var(--text);
}
.pca-banner {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px;
  background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn);
  font-size: .86rem; color: var(--text);
}
.pca-context { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 14px; }
.pca-context > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.pca-context span { display: block; font-size: .78rem; color: var(--text-2); }
.pca-context strong { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.pca-pair .input.is-derived { background: var(--paper); color: var(--text-2); }
.pca-hint { margin: 2px 0 0; font-size: .86rem; color: var(--text-2); }
.pca-hint:empty { display: none; }
.pca-result {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--paper); box-shadow: inset 3px 0 0 var(--text-3);
  font-size: .86rem; color: var(--text);
}

.pca-empty { margin: 0 0 16px; padding: 14px; border-radius: 10px; background: var(--paper); font-size: .88rem; color: var(--text-2); text-align: center; }
.pca-empty strong { display: block; margin-bottom: 2px; color: var(--text); }
.pca-example-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.pca-example-head .pca__title { font-size: .95rem; }
.pca-hist th { background: var(--paper); font-size: .78rem; color: var(--text-2); }
.pca-hist .pca-row--example td { background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--paper) 70%, transparent) 10px 20px); color: var(--text-2); }
.pca-hist .pca-hist__date { white-space: nowrap; }
.pca-hist .pca-hist__date .pca-tag--sm { display: block; width: fit-content; margin: 4px 0 0; }
.pca-hist .pca-hist__reason { min-width: 140px; overflow-wrap: anywhere; }
.pca-hist__btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

/* ============================================================
   Modern Light — shared components (Stage 1)
   ------------------------------------------------------------
   Overrides of the generic components above, for the screen only:
   the printed job card, invoice, receipt and report (which reuses
   the on-screen report markup) keep the rules above unchanged.
   Selectors are the existing generic ones, so every page- and
   modal-scoped design (Invoice Details, Record Payment, ...) keeps
   precedence. No markup, id, hook or behaviour is involved.
   ============================================================ */
@media screen {
  /* cards */
  .card { border-color: var(--line); box-shadow: var(--shadow); }
  .card__head { padding: 16px 20px; }
  .card__head h2 { font-size: 1rem; font-weight: 700; }
  .card__body { padding: 20px; }
  .card__body--flush { padding: 0; }

  /* buttons */
  .btn {
    min-height: 38px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  }
  .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
  .btn--primary {
    background: var(--amber);
    color: #241a05;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
  }
  /* darker amber, dark text: white on #c47f06 would fall below AA */
  .btn--primary:hover { background: var(--amber-deep); color: #1d1404; }
  .btn--ghost {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--text);
  }
  .btn--ghost:hover { background: var(--paper); border-color: var(--text-3); color: var(--text); }
  .btn--danger:hover { background: color-mix(in srgb, var(--bad) 85%, #000); }
  .btn--sm { min-height: 32px; padding: 5px 12px; font-size: .78rem; }

  .icon-btn {
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
    transition: background-color .15s, border-color .15s, color .15s;
  }
  .icon-btn:hover { background: var(--paper); color: var(--text); border-color: var(--text-3); }
  .icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .icon-btn--danger:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }

  /* badges: soft pill with a hairline. The text is the tone mixed toward the
     theme's text colour -- darker on light, lighter on dark -- for contrast. */
  .badge {
    padding: 3px 10px;
    border: 1px solid transparent;
    line-height: 1.35;
    letter-spacing: .01em;
  }
  .badge--good    { color: color-mix(in srgb, var(--good) 72%, var(--text)); border-color: color-mix(in srgb, var(--good) 28%, transparent); }
  .badge--info    { color: color-mix(in srgb, var(--info) 72%, var(--text)); border-color: color-mix(in srgb, var(--info) 28%, transparent); }
  .badge--warn    { color: color-mix(in srgb, var(--warn) 72%, var(--text)); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
  .badge--bad     { color: color-mix(in srgb, var(--bad) 72%, var(--text));  border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
  .badge--neutral { border-color: var(--line-strong); }

  /* tables: small uppercase headers, calmer rows */
  .table th {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-2);
  }
  .table tbody tr { transition: background-color .12s; }
  .table tbody tr:hover { background: color-mix(in srgb, var(--paper) 75%, transparent); }

  /* forms */
  .field label { color: var(--text); }
  .input, .select, .textarea {
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
  }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
  .input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
  .input:focus, .select:focus, .textarea:focus { border-color: var(--amber); box-shadow: var(--focus-ring); }
  .field--error .input, .field--error .select, .field--error .textarea { border-color: var(--bad); }
  .input:disabled, .select:disabled, .textarea:disabled,
  .input[readonly], .textarea[readonly] { background: var(--paper); }

  /* modals */
  .modal-overlay { background: rgba(15, 23, 42, .48); }
  .modal { border-radius: calc(var(--radius) + 2px); border: 1px solid var(--line); }
  .modal__head { padding: 18px 22px; }
  .modal__head h2 { font-size: 1.05rem; font-weight: 700; }
  .modal__body { padding: 22px; }
  .modal__foot { padding: 14px 22px; background: var(--surface); }

  /* toolbar, empty state, small type */
  .toolbar__count { color: var(--text-2); }
  .empty { color: var(--text-3); }
  .empty h3 { color: var(--text); font-weight: 600; }
  .summary-tile { border-radius: var(--radius-sm); }
  .page-subtitle { color: var(--text-2); }
}

/* ============================================================
   Admin profile menu — DESIGN PROTOTYPE
   ------------------------------------------------------------
   The header's existing avatar block (.topbar__user) styled as a
   button that opens a dark menu. The items are previews only:
   app.js shows a "not active yet" notice and nothing else.
   ============================================================ */
@media screen {
  .topbar__actions { position: relative; }

  .topbar__user {
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
  }
  .topbar__user:hover, .topbar__user.is-open { background: var(--paper); border-color: var(--line); }
  .topbar__user:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .topbar__chevron { flex: none; color: var(--text-3); transition: transform .15s; }
  .topbar__user.is-open .topbar__chevron { transform: rotate(180deg); }

  .profile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    width: 232px;
    padding: 6px;
    background: #16202c;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(10, 16, 22, .32), 0 2px 6px rgba(10, 16, 22, .18);
    color: #e6ebf1;
  }
  .profile-menu[hidden] { display: none; }
  :root[data-theme="dark"] .profile-menu { background: #0f1720; border-color: rgba(255, 255, 255, .12); }

  .profile-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  .profile-menu__item svg { flex: none; color: #9fb0c2; }
  .profile-menu__item:hover, .profile-menu__item:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
  .profile-menu__item:hover svg, .profile-menu__item:focus-visible svg { color: #fff; }
  .profile-menu__item--danger, .profile-menu__item--danger svg { color: #ff9a9a; }
  .profile-menu__item--danger:hover, .profile-menu__item--danger:focus-visible { background: rgba(216, 67, 78, .16); }
  .profile-menu__item--danger:hover svg, .profile-menu__item--danger:focus-visible svg { color: #ffb4b4; }

  .profile-menu__sep { height: 1px; margin: 6px 4px; background: rgba(255, 255, 255, .09); }
  .profile-menu__note {
    margin: 6px 4px 2px;
    padding: 8px 8px 4px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .7rem;
    letter-spacing: .02em;
    color: #8d9cad;
  }
}
/* Phones: the avatar alone is the trigger, so the header is no wider than
   before (at 400px and below it is exactly the original 36px avatar), and
   the menu is pinned to the screen edge so it can never be pushed off it. */
@media screen and (max-width: 640px) {
  .topbar__user { padding: 2px; gap: 2px; }
  .topbar__chevron { width: 14px; height: 14px; }
  .profile-menu { position: fixed; top: calc(var(--topbar-h) + 6px); right: 12px; }
}
@media screen and (max-width: 400px) {
  .topbar__user { padding: 0; border-width: 0; }
  .topbar__chevron { display: none; }
}
@media print { .profile-menu { display: none !important; } }