/* Shared elements and reusable controls. Preserve existing selectors during staged adoption. */

body {
  font: var(--font-size-body) var(--font-family-body);
  background: var(--page);
  color: var(--navy);
  margin: 0;
}

section,
.panel {
  background: white;
  padding: var(--space-6);
  border-radius: var(--radius-panel);
  margin: var(--space-5) 0;
}

a {
  color: var(--teal-dark);
}

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

input,
select,
textarea {
  padding: 9px;
  max-width: 95%;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-field);
}

button,
.button {
  background: var(--teal-dark);
  color: white;
  border: 0;
  border-radius: var(--radius-control);
  height: var(--control-size);
  padding: 0 var(--space-4);
  font: inherit;
  line-height: 1.25;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
}

label {
  display: block;
  margin-bottom: 5px;
}

.errorlist {
  color: #b91c1c;
}

main nav {
  align-items: center;
}

nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.form-error-summary:focus {
  outline: 3px solid var(--teal-dark);
  outline-offset: 3px;
}

.form-error-summary h2 {
  margin-top: 0;
}

.contact-table-scroll input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0;
}

.action-row>button,
.action-row>.button {
  margin: 0;
}

.object-audit>summary {
  cursor: pointer;
  font-weight: 600;
  min-height: var(--control-size);
  padding: 10px 0;
}

.object-audit>summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.field-label-with-help label {
  margin: 0;
}

.field-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  cursor: help;
  color: var(--teal-dark);
}

.field-info:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.field-info-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 260px;
  max-width: 65vw;
  padding: 10px 12px;
  background: var(--navy);
  color: white;
  border-radius: 6px;
  font: normal 14px/1.4 system-ui;
  z-index: 3;
  box-shadow: 0 4px 12px #0002;
}

.field-info:hover .field-info-tooltip,
.field-info:focus .field-info-tooltip {
  display: block;
}

/* Shared editor fields also serve the catalogue. Keep this before the
   contact-table minimum widths; equal-specificity order is intentional. */
.customer-editor input:not([type="checkbox"]):not([type="hidden"]),
.customer-editor textarea,
.customer-editor select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.customer-editor input[name="number"],
.customer-editor input[name$="-number"],
.customer-editor input[name$="-phone"],
.customer-editor input[name$="-postcode"] {
  width: 20rem;
  max-width: 100%;
}

.customer-editor input[type="number"] {
  width: 12rem;
  max-width: 100%;
}

.customer-editor input[type="checkbox"] {
  width: auto;
  margin: 0 8px 0 0;
  vertical-align: middle;
}

.customer-editor p:has(> input[type="checkbox"])>label {
  display: inline;
  margin: 0 8px 0 0;
  vertical-align: middle;
}

.customer-editor fieldset {
  min-width: 0;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

.customer-editor textarea {
  resize: vertical;
}

@media(max-width:600px) {
  .customer-editor [data-contact-section] {
    padding: 12px 0;
  }
}

@media(max-width:600px) {
  section,
  .panel {
    padding: 16px;
  }
}

[hidden] {
  display: none!important;
}

.contact-table-scroll {
  overflow-x: auto;
  margin: 12px 0;
}

.contact-table {
  min-width: 650px;
}

.contact-table th,
.contact-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.contact-table th {
  background: #f1f5f9;
}

.contact-table [data-contact-summary] {
  white-space: pre-line;
}

.contact-table td {
  min-width: 100px;
}

.contact-table .contact-actions {
  min-width: 200px;
}

.contact-actions button,
.contact-actions .button {
  padding: 0 10px;
  margin: 0 8px 6px 0;
}

.contact-removed {
  background: #fff7ed;
  color: #64748b;
}

.contact-table textarea {
  min-width: 180px;
  min-height: 80px;
}

.contact-table input:not([type="checkbox"]):not([type="hidden"]) {
  min-width: 140px;
}

.billing-input {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 16rem;
}

.billing-input>span {
  font-weight: 600;
}

/* Currency controls specialise the shared editor fields above. */
.customer-editor .billing-input input[type="number"] {
  width: 100%;
  min-width: 0;
}

.report-filters {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.report-filters>.errorlist {
  flex-basis: 100%;
}

.field-label-with-help {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  position: relative;
}

.field-help {
  display: inline-block;
}

.field-help button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  width: 18px;
  height: 18px;
  border: 1px solid var(--teal-dark);
  border-radius: 50%;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.field-help button:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 3px;
}

.field-help .field-help-popup {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  width: 280px;
  max-width: calc(100vw - 96px);
  padding: 12px;
  background: var(--navy);
  color: white;
  border-radius: 6px;
  box-shadow: 0 3px 10px #0003;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
}

.field-help:hover .field-help-popup,
.field-help:focus-within .field-help-popup {
  display: block;
}

body {
  line-height: var(--line-height-body);
}

h1,
h2,
h3 {
  color: var(--navy);
}

h1 {
  font-weight: 650;
  letter-spacing: -.03em;
}

h2 {
  font-size: 1.3rem;
}

section,
.panel {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
}

th {
  background: #edf3f4;
  color: var(--navy);
}

td,
th {
  border-color: var(--line);
}

.contact-table th {
  background: #edf3f4;
}

button:hover,
.button:hover {
  background: var(--color-primary-hover);
  color: white;
}

.field-help button:hover {
  background: #e1eeee;
  color: var(--navy);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

input[type=checkbox] {
  accent-color: var(--teal-dark);
}

.tile-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.tile-actions form {
  margin: 0;
}

.button-secondary {
  background: #e1eeee;
  color: var(--navy);
}

.button-import {
  background: var(--gold);
  color: var(--navy);
}

.button-import:hover {
  background: #ad9468;
  color: var(--navy);
}

.status-badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: .8rem;
  background: #e6eff5;
  color: var(--navy);
}

.status-complete {
  background: #e2eadf;
  color: #304a36;
}

.status-problem {
  background: #f8e6df;
  color: #893720;
}

.company-multi-select {
  width: 100%;
  max-width: 36rem;
  min-height: 15rem;
}

button,
.button {
  margin: 6px 8px;
}

nav>button,
nav>.button,
.tile-actions>button,
.tile-actions>.button,
.report-filters>button,
.field-help button {
  margin: 0;
}

.contact-actions button {
  margin: 4px 8px 4px 0;
}

.contact-table-scroll {
  padding: 8px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:focus-visible {
  position: relative;
  z-index: 1;
}

.mouse-select-popup {
  position: fixed;
  z-index: 10000;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  background: white;
  color: var(--navy);
  border: 1px solid var(--color-field-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px #0003;
}

.mouse-select-option {
  padding: 10px 12px;
  cursor: pointer;
  overflow-wrap: anywhere;
  border-radius: 4px;
  min-height: 40px;
}

.mouse-select-option.is-active {
  background: #e1eeee;
}

.mouse-select-option[aria-selected="true"] {
  font-weight: 700;
}

.mouse-select-option[aria-disabled="true"] {
  opacity: .5;
  cursor: default;
}

main :is(.action-row,.tile-actions,.report-filters,.contact-actions) {
  gap: 16px;
}

main .action-row>form {
  margin: 0;
}

main :is(.action-row,.tile-actions,.report-filters)>:is(button,.button) {
  margin: 0;
}

main td>.button {
  margin: 6px 10px 6px 0;
}

/* Compact, single-line controls above and below paginated record lists. */
.table-controls {
  container: table-pagination / inline-size;
  overflow-x: auto;
  padding: 6px 8px;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--page);
  color: var(--navy);
  font-size: .75rem;
  line-height: 1.4;
}

.table-controls-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
}

.table-controls-settings,
.table-controls .table-pagination,
.table-controls label {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex: none;
  gap: 6px;
  margin: 0;
  font-size: inherit;
}

.table-controls-settings { gap: 10px; }
.table-controls .table-pagination { margin-left: auto; gap: 2px; }
.table-controls-divider { color: #65757b; }
.table-controls select.table-controls-select {
  flex: none;
  width: auto;
  min-width: 52px;
  max-width: none;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 2px 4px;
  border: 1px solid var(--color-field-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--navy);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.table-controls :is(a,.pagination-disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 2px;
  min-width: 28px;
  min-height: 28px;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--color-primary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.table-controls a:hover { background: #e1eeee; }
.table-controls :is(a,select):focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.table-controls a[aria-current] { font-weight: 700; border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.table-controls .pagination-disabled { color: #65757b; }
.table-controls .pagination-ellipsis { padding: 3px; }

/* Use the toolbar's available space, including narrower cards and the sidebar. */
@container table-pagination (max-width: 780px) {
  .table-pagination :is(.pagination-extra-wide,.pagination-ellipsis) { display: none; }
}

@container table-pagination (max-width: 640px) {
  .table-pagination .pagination-extra-medium { display: none; }
}

/* Composable action modifiers for later stages. Existing .button-secondary
   keeps its current pale fill; use .button-outline for the outlined variant.
   Apply modifiers with the existing .button class, or to a native button. */
.button-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.button-primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.button-outline {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.button-outline:hover {
  background: #e1eeee;
  color: var(--navy);
}

.button-danger {
  background: var(--color-danger-surface);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}

.button-danger:hover {
  background: #ffe0e3;
  color: var(--color-danger);
  border-color: #df9ca3;
}

.button-icon {
  width: var(--control-size);
  min-width: var(--control-size);
  padding: 0;
}

.button-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.form-actions > :is(button, .button, form) {
  margin: 0;
}

/* Reusable workspace cards and metrics (metrics are also used by Monitoring). */
.workspace-card {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 20px;
  margin: 0;
  min-width: 0;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 32px;
  margin: 20px 0;
}

.dashboard-stats dt {
  font-size: .9rem;
  color: #455c64;
}

.dashboard-stats dd {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 650;
  margin: 6px 0 0;
  color: var(--navy);
}

.dashboard-stats dd a {
  color: inherit;
  text-decoration: none;
}


/* Ticket controls shared with paper-ticket review, timesheet notes and table actions. */
.ticket-details-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.ticket-detail-field {
  flex: 1 1 180px;
  min-width: 0;
}

.ticket-customer-field {
  flex: 2 1 260px;
}

.customer-quick-search {
  display: block;
  width: 100%;
  margin-bottom: 8px;
}

.ticket-detail-field input,
.ticket-detail-field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.ticket-items-table {
  table-layout: fixed;
  width: calc(var(--ticket-item-width,28rem) + 300px);
  min-width: 0;
  margin-inline: auto;
}

.ticket-items-table th:nth-child(1) {
  width: var(--ticket-item-width,28rem);
}

.ticket-items-table th:nth-child(2) {
  width: 180px;
}

.ticket-items-table th:nth-child(3) {
  width: 120px;
}

.ticket-items-table select {
  width: 100%;
  max-width: 100%;
}

.ticket-items-table td {
  vertical-align: top;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quantity-controls input[type="number"] {
  width: 3.5rem;
  min-width: 0;
  flex: 0 0 3.5rem;
  height: var(--control-size);
  max-width: 100%;
  text-align: center;
  padding: 9px 2px;
}

.quantity-controls button {
  min-width: var(--control-size);
  padding: 0 8px;
}

.quantity-controls button:disabled {
  opacity: .45;
  cursor: default;
}

.quantity-controls input[readonly] {
  background: #eef2f3;
  color: #667a80;
  cursor: default;
}

.ticket-items-table label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ticket-notes {
  margin: 20px 0;
}

.ticket-notes summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  min-height: var(--control-size);
  width: fit-content;
  border-radius: 6px;
}

.ticket-notes summary::-webkit-details-marker {
  display: none;
}

.notes-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #94a3b8;
  border-radius: 5px;
}

.notes-toggle::before {
  content: '+';
}

.ticket-notes[open] .notes-toggle::before {
  content: '−';
}

.ticket-notes-content {
  margin-top: 10px;
}

.ticket-notes textarea {
  width: 100%;
  max-width: 100%;
  min-height: 90px;
  resize: vertical;
}

.ticket-items-table tr.copied-unchecked {
  background: #fff3cd;
  outline: 2px solid #d69e00;
  outline-offset: -2px;
}

.ticket-items-table [data-copy-review-status] {
  display: block;
  margin-top: 6px;
  font-size: .85rem;
}

.ticket-line-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-line-actions button {
  width: var(--control-size);
  min-width: var(--control-size);
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.ticket-line-actions [data-approve-copied] {
  color: #237347;
  background: #edf7ef;
  border: 1px solid #c9e3d0;
}

.ticket-line-actions [data-approve-copied]:hover {
  background: #dcefe1;
  border-color: #8fbd9b;
}

.ticket-line-actions [data-remove-ticket-line] {
  color: #b23b42;
  background: #fff1f2;
  border: 1px solid #f3d9dc;
}

.ticket-line-actions [data-remove-ticket-line]:hover {
  background: #ffe0e3;
  border-color: #df9ca3;
}

.ticket-items-table option:disabled {
  color: #94a3b8;
  background: #f1f5f9;
}


.quantity-controls>button {
  margin: 0;
}
.ticket-icon-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.ticket-icon-actions .ticket-icon-action {
  width: var(--control-size);
  min-width: var(--control-size);
  padding: 0;
  margin: 0;
  background: #edf3f4;
  color: var(--teal-dark);
  border: 1px solid #d8e5e6;
  border-radius: 10px;
  transition: background-color .15s ease,border-color .15s ease;
}

.ticket-icon-action svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ticket-icon-actions .ticket-icon-action:hover {
  background: #d9e9eb;
  border-color: #9ebfc3;
}

.ticket-icon-actions .ticket-icon-remove {
  color: #b23b42;
  background: #fff1f2;
  border-color: #f3d9dc;
}

.ticket-icon-actions .ticket-icon-remove:hover {
  background: #ffe0e3;
  border-color: #df9ca3;
}

.ticket-mobile-label {
  display: none;
}

@media(max-width:600px) {
  .ticket-items-table {
    display: block;
    width: 100%!important;
    max-width: 100%;
  }

  .ticket-items-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ticket-items-table tbody {
    display: block;
    width: 100%;
  }

  .ticket-items-table tbody>tr:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .ticket-items-table td {
    display: block;
    min-width: 0;
    width: auto!important;
    padding: 0;
    border: 0;
  }

  .ticket-items-table td:first-child {
    grid-column: 1/-1;
  }

  .ticket-items-table td:last-child {
    align-self: end;
  }

  .ticket-mobile-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .ticket-items-table .ticket-line-actions {
    gap: 4px;
  }
}
/* Zero-charge deliveries remain visible, with a text label as well as colour. */
tr.ticket-free-delivery > td { background: #ffe3a3; color: #663c00; }
tr.ticket-free-delivery > td:first-child { border-left: 4px solid #b7791f; }

/* Shared table viewport retained for Reports as customer pages adopt their own layout. */
.customer-table-scroll { overflow-x: auto; padding: 8px; }

.section-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Shared record field, review and company-icon presentation. */
.customer-field {
  margin: 16px 0;
}
.account-changed {
  background: #fff3cd;
}

.account-identical {
  background: #f1f5f9;
  color: #475569;
}
.settings-icon-preview {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: #edf3f4;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 16px;
}

/* Shared record workspaces: reports, staff, settings and operational reviews. */
.record-workspace { min-width: 0; }
.record-page-heading { margin: 0 0 20px; }
.record-page-heading h1 { margin: 0; font-size: 1.4rem; line-height: 1.4; overflow-wrap: anywhere; }
.record-workspace .record-card { margin: 0 0 20px; }
.record-workspace h2 { margin: 0 0 12px; font-size: 1rem; line-height: 1.5; }
.record-workspace h3 { font-size: .94rem; line-height: 1.5; }
.record-workspace :is(p,li,dt,dd,legend) { font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.record-workspace p { margin: 12px 0; }
.record-workspace :is(button,.button) { font-size: .84rem; max-width: 100%; }
.record-workspace .action-row { gap: 8px; margin: 16px 0; }
.record-workspace .action-row > :is(button,.button,form),
.record-workspace .record-card > :is(button,.button) { margin: 0; }
.record-workspace .report-filters { gap: 12px; margin: 16px 0; }
.record-workspace .report-filters > :is(div,p) { flex: 1 1 180px; min-width: 0; margin: 0; }
.record-workspace label { font-size: .84rem; line-height: 1.5; }
.record-workspace :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select:not(.table-controls-select),textarea) { max-width: 100%; min-height: 44px; font: inherit; font-size: .9rem; }
.record-workspace input[type=file] { width: 100%; max-width: 32rem; padding: 8px; border: 1px solid var(--color-field-border); border-radius: var(--radius-field); background: var(--color-surface); }
.record-workspace .report-filters :is(input:not([type=hidden]),select) { width: 100%; }
.record-workspace form > p > :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) { display: block; width: 100%; max-width: 32rem; }
.record-workspace form > p > span { display: block; margin-top: 6px; font-size: .82rem; color: #455c64; }
.record-workspace fieldset { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-field); padding: 12px; }
.record-workspace legend { font-weight: 600; padding-inline: 4px; }
.record-workspace summary { cursor: pointer; min-height: 44px; padding-block: 12px; font-size: .86rem; }
.record-workspace summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.record-workspace .contact-table-scroll,
.record-workspace .customer-table-scroll { max-width: 100%; overflow: auto; margin: 16px 0; padding: 0; }
.record-workspace :is(.contact-table-scroll,.customer-table-scroll):focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.record-workspace table { min-width: 620px; font-size: .84rem; }
.record-workspace :is(th,td) { padding: 10px; vertical-align: top; overflow-wrap: anywhere; }
.record-workspace th { overflow-wrap: normal; }
.record-workspace table :is(button,.button) { margin: 0 6px 6px 0; }
.record-workspace table form { margin: 0; }
.record-workspace .ticket-icon-actions :is(button,.button) { margin: 0; }
.record-workspace :is(.error,.errorlist) { color: #9f3037; }
.record-workspace > :is(p[role=status],p[role=alert]) { border-left: 3px solid var(--gold); padding: 12px; background: #fff8e6; }
.record-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 20px; margin: 16px 0; }
.record-field { min-width: 0; }
.record-field-wide { grid-column: 1 / -1; }
.record-workspace .record-field > :is(label,legend) { margin: 0 0 6px; }
.record-workspace .record-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { width: 100%; margin: 0; }
.record-field-help { font-size: .8rem; line-height: 1.5; margin-top: 6px; color: #455c64; }
.record-workspace .record-field-options { margin: 0; padding: 0; border: 0; }
.record-field-options > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.record-field-options label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; }
.record-checkbox-field { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 8px; }
.record-checkbox-field .record-field-help,
.record-checkbox-field .errorlist { grid-column: 1 / -1; }
.record-workspace .record-checkbox-field > label { margin: 0; }
.record-workspace .record-check-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.record-workspace .record-check-row > :is(input,label) { margin: 0; }
.record-workspace .dashboard-stats { gap: 16px; }
.record-workspace .dashboard-stats dd { font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.record-workspace .auth-card { max-width: 520px; margin: 32px auto; }
.auth-card .record-fields { grid-template-columns: minmax(0,1fr); }
.record-workspace .auth-card h1 { margin-top: 0; font-size: 1.4rem; }
@media (max-width: 600px) {
  .record-fields { grid-template-columns: minmax(0,1fr); }
  .record-workspace .record-card { padding: 16px; }
  .record-workspace .report-filters > :is(div,p) { flex-basis: 100%; }
  .record-workspace .action-row > :is(button,.button) { height: auto; min-height: 44px; white-space: normal; padding-block: 8px; }
}

/* Stage 1 design-system addition, adopted by Stages 4–7. Put return links
   last in the HTML as well as visually: never use CSS order to move them. */
.action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.button.button-back {
  background: var(--color-back-background);
  color: var(--color-back-text);
  gap: var(--space-2);
  min-height: var(--control-size);
  margin: 0;
  white-space: normal;
  text-align: start;
}

.button.button-back:hover {
  background: var(--color-back-hover);
  color: var(--color-back-text);
}

.button.button-back:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.back-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.back-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.action-group > :is(a,button).button.button-back,
.action-group > .back-actions { margin-inline-start: auto; }

/* Private email bodies: preserve text without forcing horizontal page overflow. */
.email-body-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.5; }
.email-html { width: 100%; height: 360px; border: 1px solid var(--line); background: white; }

.status-xero-accounted {
  background: #dcfce7;
  color: #166534;
}

/* Shared record/photo headings and return groups. */
.ticket-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.ticket-page-heading h1 { margin: 0; font-size: 1.4rem; line-height: 1.4; }
.ticket-page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ticket-page-heading :is(button,.button) { margin: 0; font-size: .9rem; }

.ticket-page-heading > h1 { min-width: 0; overflow-wrap: anywhere; }
.ticket-page-heading > .button-back { margin-inline-start: auto; }
:is(.action-row,.form-actions,.ticket-page-actions) > .button-back { margin-inline-start: auto; }
:is(.action-row,.form-actions,.ticket-page-actions):has(> .button-back) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
:is(.record-page-heading,.billing-page-heading) > .action-group { flex: 1 1 320px; min-width: 0; justify-content: flex-end; }