/* WP50 lists screens. Tokens only (tokens.css); shared components live in ui.css.
   Covers Kit/_ListPage + _ListToolbar (setup and document lists), the Operations and Accounts list pages, and the Enquiry
   pages (scoped under .enquiry). Markup the tests pin (<td>, pager, Show button, ids, data-kit-*) is unchanged. */

/* ---------- page header ---------- */
.kit-list-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
}
.kit-list-header h1, .kit-list-header h4 { margin: 0; font-size: var(--fs-xl); font-weight: 650; line-height: 30px; letter-spacing: var(--tracking-tight); }
.kit-list-header .kit-muted { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.list-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.btn-primary kbd { background: transparent; color: inherit; border-color: currentColor; opacity: 0.7; }
/* every list title is the same slim size; the long screens keep their h1 text */
main.cb-main:has([data-kit-list]) > h1, main.cb-main:has([data-kit-list]) .container-fluid > h1 {
  font-size: var(--fs-xl); font-weight: 650; line-height: 30px; margin: 0 0 var(--sp-4);
}

/* _ListToolbar: Print / Excel / Add New sit on the title line (desktop), right-aligned */
.cb-page-header .kit-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); margin: 0; }
.cb-toolbar-right { display: flex; align-items: center; gap: var(--sp-2); }
.kit-toolbar .icon { width: 15px; height: 15px; }
.kit-toolbar .list-caret { width: 12px; height: 12px; margin-left: -2px; color: var(--text-muted); }
@media (min-width: 901px) {
  .cb-main:has(> .cb-page-header) { position: relative; }
  main.cb-main:has(> .cb-page-header) > .cb-page-header {
    position: absolute; top: var(--sp-6); inset-inline: var(--sp-8); z-index: 2;
    width: auto; max-width: 1440px; margin-inline: auto; pointer-events: none;
  }
  .cb-page-header .kit-toolbar > * { pointer-events: auto; }
}
@media (max-width: 900px) { .cb-page-header { margin: 0 0 var(--sp-3); } .cb-page-header .kit-toolbar { flex-wrap: wrap; } }

.cb-print-menu { position: relative; display: inline-block; }
.cb-print-menu > summary { list-style: none; }
.cb-print-menu > summary::-webkit-details-marker { display: none; }
.cb-print-menu[open] > .cb-print-options {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-popover);
  display: flex; flex-direction: column; min-width: 160px; padding: 6px;
  border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-raised); box-shadow: var(--shadow-float);
}
.cb-print-options a, .cb-print-options button {
  display: flex; align-items: center; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-ctrl);
  background: transparent; color: var(--text); font: 450 var(--fs-body) / 1.2 var(--font-ui); text-align: left; text-decoration: none;
  cursor: pointer; box-shadow: none;
}
.cb-print-options a:hover, .cb-print-options button:hover { background: var(--surface-hover); }

/* ---------- status chips (in the header line): a count that filters is a link ---------- */
.kit-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 0 auto; }
.kit-list-header > .kit-summary + .btn { margin-left: var(--sp-2); }
.stat-chip {
  display: inline-flex; align-items: baseline; gap: 8px; height: 30px; padding: 0 12px; box-sizing: border-box; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.stat-chip strong { color: var(--text); font-size: var(--fs-body); font-weight: 650; font-variant-numeric: tabular-nums; }
a.stat-chip:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text-secondary); }
a.stat-chip[aria-current="true"] { border-color: transparent; background: var(--accent-subtle); color: var(--accent-text); }
a.stat-chip[aria-current="true"] strong { color: var(--accent-text); }

/* ---------- filter toolbar (no box): inline fields, label above ---------- */
.list-filters, .kit-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-4); padding: 0; background: none; border: 0; box-shadow: none; }
.list-filters:not(.is-open) .list-more { display: none; }
.list-more { display: contents; }
.list-more-toggle { height: var(--h-control); }
.list-more-toggle[aria-expanded="true"] { color: var(--accent-text); }
.list-filters label {
  display: flex; flex-direction: column; gap: 4px; margin: 0;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); text-transform: none; letter-spacing: 0;
}
/* the AD date under a Miti box must not push its row out of line */
.list-filters label, .cb-filter-item { position: relative; }
:is(.list-filters, .cb-filter-item) .miti-ad { position: absolute; top: 100%; left: 0; margin-top: 2px; font-size: var(--fs-xs); font-weight: 450; color: var(--text-muted); white-space: nowrap; }
.list-filters label.list-check { flex-direction: row; align-items: center; gap: 6px; height: var(--h-control); }
:is(.list-filters, .enquiry form.card) :is(input:not([type="checkbox"]):not([type="hidden"]), select) {
  width: 160px; height: var(--h-control); padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--border-input); border-radius: var(--r-ctrl); background: var(--surface); color: var(--text);
  font: 450 var(--fs-body) / 1 var(--font-ui);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
:is(.list-filters, .enquiry form.card) :is(input, select):focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
:is(.list-filters, .cb-filter-row, .enquiry form.card) button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; height: var(--h-control); padding: 0 14px;
  border: 1px solid var(--accent); border-radius: var(--r-ctrl); background: var(--accent); color: var(--text-on-accent);
  font: 550 var(--fs-body) / 1 var(--font-ui); box-shadow: none; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
:is(.list-filters, .cb-filter-row, .enquiry form.card) button[type="submit"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.list-filters .btn { height: var(--h-control); }

/* ---------- the list panel ---------- */
.cb-list-card { margin: 0 0 var(--sp-6); background: none; border: 0; box-shadow: none; overflow: visible; }
.cb-list-card > .cb-card-header { display: flex; align-items: center; min-height: 30px; margin: 0 0 var(--sp-4); padding: 0; background: none; border: 0; }
.cb-card-title { margin: 0; font-size: var(--fs-xl); font-weight: 650; line-height: 30px; letter-spacing: var(--tracking-tight); color: var(--text); }
/* a page with its own heading does not repeat "List Of ..." on screen */
.cb-main:has(h1, .kit-list-header) .cb-list-card > .cb-card-header {
  position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
}
/* Backoffice screens that put a table straight in .cb-list-card keep it as the panel */
.list-panel, .cb-list-card:not(:has(> .list-panel)) { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); overflow: hidden; }

.cb-dt-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  margin: 0; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.cb-dt-search { margin: 0; }
.cb-dt-search label, label.cb-dt-search { position: relative; display: inline-flex; align-items: center; margin: 0; }
.cb-dt-search .icon { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--text-faint); pointer-events: none; }
.cb-dt-search input, input[data-kit-list-search] {
  width: min(300px, 100%); height: var(--h-control); padding: 0 10px 0 30px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--r-ctrl); background: var(--surface-sunken); color: var(--text);
  font: 450 var(--fs-body) / 1 var(--font-ui);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.cb-dt-search input:hover { border-color: var(--border-strong); }
.cb-dt-search input:focus, input[data-kit-list-search]:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--focus-ring); }
.cb-dt-search input::-webkit-search-cancel-button { display: none; }
.cb-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
.cb-filter-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.cb-filter-input {
  width: 118px; height: var(--h-control); padding: 0 8px; box-sizing: border-box;
  border: 1px solid var(--border-input); border-radius: var(--r-ctrl); background: var(--surface); color: var(--text); font-size: var(--fs-body);
}
.cb-filter-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ---------- list table ---------- */
.list-panel .table-responsive, .enquiry .table-responsive { max-width: none; margin: 0; overflow: auto; }
/* scroll cue: an edge shadow shows on the side that has more columns (covers scroll with the content, shadows stay put) */
.list-panel .table-responsive {
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 40%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 30%, transparent), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 30%, transparent), transparent) right / 12px 100% no-repeat scroll,
    var(--surface);
}
@media (min-width: 901px) {
  /* the panel scrolls, so the header row stays in view */
  .list-panel .table-responsive { max-height: max(320px, calc(100dvh - 280px)); }
}
:is(table[data-kit-list]:not(.kit-entry-grid), table.cb-data-table, .list-panel table.table, .enquiry table.table) {
  width: 100%; min-width: 100%; margin: 0; border: 0; border-radius: 0; border-collapse: separate; border-spacing: 0;
  background: var(--surface); box-shadow: none; font-size: var(--fs-grid); overflow: visible;
}
table[data-kit-list]:not(.kit-entry-grid):has(thead th:nth-child(7)) { min-width: 880px; }
/* see-through inside the panel so its scroll cue shows */
.list-panel :is(table[data-kit-list], table.cb-data-table, table.table) { background: transparent; }
:is(table[data-kit-list]:not(.kit-entry-grid), table.cb-data-table, .list-panel table.table, .enquiry table.table) :is(thead th, tfoot th) {
  height: 34px; padding: 0 var(--sp-3); border: 0; border-bottom: 1px solid var(--border);
  background: var(--surface-sunken); color: var(--text-muted);
  font-size: var(--fs-sm); font-weight: 550; text-transform: none; letter-spacing: 0; text-align: left; white-space: nowrap; vertical-align: middle;
}
:is(table[data-kit-list]:not(.kit-entry-grid), table.cb-data-table, .list-panel table.table) thead th { position: sticky; top: 0; z-index: 1; }
:is(table[data-kit-list], .list-panel table.table, .enquiry table.table) :is(th, td):is(.num, .text-end) { text-align: right; font-variant-numeric: tabular-nums; }
:is(table[data-kit-list], table.cb-data-table) thead th a {
  display: inline-flex; align-items: center; gap: 4px; color: inherit !important; text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
:is(table[data-kit-list], table.cb-data-table) thead th a:hover { color: var(--text) !important; }
.cb-sort-arrow { width: 12px; height: 12px; opacity: 0; margin: 0; transition: opacity var(--dur-1) var(--ease-out); }
th a:hover .cb-sort-arrow { opacity: 0.5; }
th[aria-sort] { color: var(--text-secondary); }
th[aria-sort] .cb-sort-arrow { opacity: 1; color: var(--accent-text); }

:is(table[data-kit-list]:not(.kit-entry-grid), table.cb-data-table, .list-panel table.table, .enquiry table.table) tbody td {
  height: 34px; padding: 0 var(--sp-3); border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text); vertical-align: middle; white-space: nowrap;
}
:is(table[data-kit-list], table.cb-data-table, .list-panel table.table) tbody tr:last-child td { border-bottom: 0; }
:is(table[data-kit-list]:not(.kit-entry-grid), table.cb-data-table) tbody tr { cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
:is(table[data-kit-list]:not(.kit-entry-grid), table.cb-data-table, .list-panel table.table, .enquiry table.table) tbody tr:hover > td { background: var(--surface-hover); }
/* keyboard row: a filled row with an accent edge, never a ring around the table row */
:is(table[data-kit-list]:not(.kit-entry-grid), table.cb-data-table) tbody tr:focus { outline: none; box-shadow: none; }
:is(table[data-kit-list]:not(.kit-entry-grid), table.cb-data-table) tbody tr:is(:focus, :focus-within) > td { background: var(--surface-selected); }
:is(table[data-kit-list]:not(.kit-entry-grid), table.cb-data-table) tbody tr:focus > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
:is(table[data-kit-list], table.cb-data-table) tbody tr:has(> .cb-empty) { cursor: default; }
:is(table[data-kit-list], table.cb-data-table) tbody tr:has(> .cb-empty):hover > td { background: transparent; }

/* row actions: quiet icon buttons from the sprite */
.cb-action-cell { width: 1%; white-space: nowrap; text-align: right; padding-right: var(--sp-2) !important; }
.cb-action-cell form { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; vertical-align: middle; }
:is(a, button).cb-action-btn {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 1px; padding: 0;
  border: 0; border-radius: var(--r-ctrl); background: transparent; color: var(--text-muted);
  text-decoration: none; cursor: pointer; vertical-align: middle; box-shadow: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.cb-action-btn .icon { width: 16px; height: 16px; }
:is(a, button).cb-action-btn:hover { background: var(--surface-raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
button.cb-action-btn.cb-action-del:hover { background: var(--danger-subtle); color: var(--danger); box-shadow: none; }
:is(a, button).cb-action-btn.cb-action-text {
  display: inline-flex; width: auto; height: 26px; padding: 0 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  font: 500 var(--fs-sm) / 1 var(--font-ui); white-space: nowrap;
}
:is(a, button).cb-action-btn.cb-action-text:hover { color: var(--text); border-color: var(--border-strong); box-shadow: none; }
.cb-action-reason, .cb-action-cell input[name="reason"] {
  width: 150px; height: 26px; padding: 0 8px; box-sizing: border-box;
  border: 1px solid var(--border-input); border-radius: var(--r-ctrl); background: var(--surface); color: var(--text); font-size: var(--fs-sm);
}
.cb-action-cell label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }

/* empty state: an icon, what happened, the next step */
td.cb-empty { height: auto !important; padding: var(--sp-10) var(--sp-4) !important; text-align: center !important; color: var(--text-muted); white-space: normal; }
td.cb-empty > * { display: block; margin: 0 auto; }
td.cb-empty .icon {
  box-sizing: content-box; width: 22px; height: 22px; padding: 10px; margin-bottom: var(--sp-3);
  border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-faint);
}
td.cb-empty strong { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
td.cb-empty span { margin-top: 4px; font-size: var(--fs-body); }
.cb-main:not(:has([data-kit-new])) .list-empty-new { display: none; }

/* skeleton rows while a search, filter, sort or page loads (list.ts sets aria-busy) */
table[data-kit-list][aria-busy="true"] tbody td { color: transparent !important; padding-block: 11px !important; }
table[data-kit-list][aria-busy="true"] tbody td > * { visibility: hidden; }
table[data-kit-list][aria-busy="true"] tbody td:not(.cb-empty) {
  background: linear-gradient(90deg, var(--surface-sunken) 30%, var(--surface-hover) 50%, var(--surface-sunken) 70%) content-box !important;
  background-size: 300% 100% !important; animation: list-shimmer 1.2s linear infinite;
}
@keyframes list-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { table[data-kit-list][aria-busy="true"] tbody td { animation: none; } }

/* ---------- footer + pager (pager markup unchanged) ---------- */
.cb-card-footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.cb-footer-entries { font-variant-numeric: tabular-nums; }
.cb-dt-length { margin-left: auto; }
.cb-dt-length label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cb-dt-length select {
  height: 28px; padding: 0 6px; margin: 0; border: 1px solid var(--border-input); border-radius: var(--r-ctrl);
  background: var(--surface); color: var(--text); font-size: var(--fs-sm);
}
.cb-pagination { display: flex; align-items: center; gap: 2px; }
.cb-page-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--r-ctrl); background: transparent; color: var(--text-secondary);
  font: 500 var(--fs-sm) / 1 var(--font-ui); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.cb-page-btn:hover { background: var(--surface-hover); color: var(--text); }
.cb-page-btn.active, .cb-page-btn[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-text); font-weight: 650; }
.cb-page-btn:disabled { opacity: 0.5; cursor: default; }
a.cb-page-btn:focus-visible, .cb-page-btn:focus-visible { box-shadow: var(--focus-ring); }
.cb-filter-row a.cb-page-btn { height: var(--h-control); border-color: var(--border); }

/* who created / changed a row */
.cb-info-pop {
  margin: auto; min-width: 300px; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-panel);
  background: var(--surface-raised); color: var(--text); font-size: var(--fs-body); box-shadow: var(--shadow-float);
}
.cb-info-pop::backdrop { background: rgb(10 12 16 / 0.3); }
.cb-info-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 var(--sp-4); }
.cb-info-pop dt { color: var(--text-muted); }
.cb-info-pop dd { margin: 0; font-weight: 550; }
.cb-info-pop .cb-page-btn { float: right; height: 30px; padding: 0 12px; border-color: var(--border-strong); color: var(--text); }

/* small pieces used by the hand-written lists */
.list-tabs { display: inline-flex; gap: 2px; margin: 0 0 var(--sp-4); padding: 2px; border-radius: var(--r-ctrl); background: var(--surface-sunken); }
.list-tabs a {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 5px;
  color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
}
.list-tabs a:hover { color: var(--text); }
.list-tabs a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-low); }

/* hand-written list panels (Backoffice StopPayment, TruckBlacklist, Quotation, PrintTemplates, MergeMasters) */
.cb-list-card > .cb-list-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.cb-list-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); letter-spacing: var(--tracking-tight); }
.cb-list-subtitle { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); }
main.cb-main > .cb-adding-box + .cb-list-card { margin-top: var(--sp-5); }   /* a setup form above its records list */
.cb-table-wrapper { overflow: auto; }
@media (min-width: 901px) { .cb-table-wrapper { max-height: max(320px, calc(100dvh - 280px)); } }
:is(table[data-kit-list], table.cb-data-table, .list-panel table.table) :is(th, td).is-center { text-align: center; }
table.cb-data-table tbody tr.cb-group-row > td { height: 36px; background: var(--surface-sunken); color: var(--text-secondary); }
.cb-action-btn.cb-action-text .icon { width: 14px; height: 14px; margin-right: 4px; }

/* status pill (Status / Progress / State cells): colour only, the text is unchanged */
.pill {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 550;
  text-transform: capitalize; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.pill[data-tone="ok"] { background: var(--success-subtle); color: var(--success); }
.pill[data-tone="bad"] { background: var(--danger-subtle); color: var(--danger); }
.pill[data-tone="warn"] { background: var(--warning-subtle); color: var(--warning); }

/* row action tooltips (data-tip), shown to the left so the table edge never clips them */
.cb-action-btn[data-tip] { position: relative; }
.cb-action-btn[data-tip]:is(:hover, :focus-visible)::after {
  content: attr(data-tip); position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%);
  padding: 4px 8px; border-radius: var(--r-ctrl); background: var(--text); color: var(--surface);
  font: 500 var(--fs-xs) / 1.3 var(--font-ui); white-space: nowrap; pointer-events: none; z-index: 3; box-shadow: var(--shadow-float);
}

/* ---------- Enquiry pages (Bootstrap-style names; Bootstrap is not loaded) ---------- */
.enquiry > .d-flex:first-child { margin-bottom: var(--sp-4) !important; }
.enquiry h1 { margin: 0 0 var(--sp-4); font-size: var(--fs-xl); font-weight: 650; line-height: 30px; }
.enquiry > .d-flex:first-child h1, .enquiry > .d-flex:first-child h4 { margin: 0; }
.enquiry form.card { margin: 0 0 var(--sp-4); background: none; border: 0; border-radius: 0; box-shadow: none; }
.enquiry form.card .card-body { padding: 0; }
.enquiry form.card .row { gap: var(--sp-2) var(--sp-3); align-items: flex-end; }
.enquiry form.card .row > [class*="col-"] { flex: 0 1 auto; }
.enquiry form.card .form-label { gap: 4px; margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); }
.enquiry form.card button.w-100 { width: auto; }
.enquiry .card:not(form) { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: none; overflow: hidden; }
.enquiry .card:not(form) > .card-body { padding: var(--sp-4); }
.enquiry .card:not(form) > .card-body.p-0 { padding: 0; }
.enquiry .card-header { padding: var(--sp-3) var(--sp-4); background: var(--surface-sunken); border-bottom: 1px solid var(--border); }
.enquiry .border-bottom { border-color: var(--border) !important; }
.enquiry table.table { border: 1px solid var(--border); border-radius: var(--r-ctrl); margin-bottom: var(--sp-3); }
.enquiry .card-body.p-0 > table.table, .enquiry .table-responsive > table.table { border: 0; border-radius: 0; margin: 0; }
.enquiry table.table thead th:first-child { border-top-left-radius: var(--r-ctrl); }
.enquiry table.table thead th:last-child { border-top-right-radius: var(--r-ctrl); }
.enquiry table.table tbody tr:last-child td { border-bottom: 0; }
.enquiry table.table tfoot th { border-top: 1px solid var(--border); border-bottom: 0; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.enquiry h5 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--tracking-tight); }
.enquiry h6 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
.enquiry .badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 550; vertical-align: 1px;
}
.enquiry .badge.bg-info, .enquiry .badge.bg-primary { background: var(--accent-subtle); border-color: transparent; color: var(--accent-text); }
.enquiry .badge.bg-danger { background: var(--danger-subtle); border-color: transparent; color: var(--danger); }
.enquiry .text-muted { color: var(--text-muted); }
/* a saved document opened read-only (Enquiry/Open): its facts in one row above its rows */
.doc-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); margin: 0 0 var(--sp-4); }
.doc-facts > div { display: flex; flex-direction: column; gap: 2px; }
.doc-facts dt { font-size: var(--fs-sm); color: var(--text-muted); }
.doc-facts dd { margin: 0; font-weight: 550; color: var(--text); font-variant-numeric: tabular-nums; }
.enquiry-preview { min-height: 500px; }
.enquiry-frame { display: block; height: 600px; border: 0; }

/* ---------- print: the list only ---------- */
@media print {
  .cb-topbar, .cb-sidebar, .cb-page-header, .cb-no-print, .list-filters, .list-tabs { display: none !important; }
  .cb-main, .cb-list-card, .list-panel { margin: 0 !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
  .table-responsive { max-height: none !important; overflow: visible !important; }
  table[data-kit-list] thead th { position: static; }
  .cb-data-table tr { break-inside: avoid; }
}

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .kit-list-header > .kit-summary { order: 3; width: 100%; margin: 0; }
  .kit-list-header > .kit-summary + .btn { margin-left: 0; }
  .cb-dt-controls, .cb-card-footer { gap: var(--sp-2); }
  .cb-dt-search, .cb-dt-search label, .cb-dt-search input { width: 100%; }
  /* From | To | Show on one row, labels above, so the dates never wrap one by one */
  .cb-filter-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; width: 100%; margin-left: 0; }
  .cb-filter-item { flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
  .cb-filter-input { width: 100%; }
  .cb-filter-item:has(> select) { grid-column: 1 / -1; }   /* a list select (Users Status) takes its own row above the dates */
  .list-filters label, .enquiry form.card .row > [class*="col-"] { flex: 1 1 140px; }
  :is(.list-filters, .enquiry form.card) :is(input:not([type="checkbox"]):not([type="hidden"]), select) { width: 100%; }
  .cb-action-btn { min-width: 32px; min-height: 32px; }
  /* the empty message stays in view at the left of a wide, scrolled table instead of its far-off middle */
  td.cb-empty { text-align: left !important; }
  td.cb-empty > * { position: sticky; left: var(--sp-4); width: fit-content; max-width: calc(100vw - 96px); margin: 0; }
}