:root {
  /* Light is the default; the dark set below applies when the user chooses Dark (or Auto on a dark device). */
  color-scheme: light;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --border: #d3dae5;
  --text: #1b2430;
  --text-muted: #5a6778;
  /* Form fields: a clear frame and white fill, and labels that stand out from the text around them. */
  --input-bg: #e8f0fc;
  --input-border: #7f93b3;
  --label: #1b2430;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --success: #16a34a;
  --danger: #dc2626;
  /* Text colours that need a lighter tint on dark and a darker one on light. */
  --danger-text: #b91c1c;
  --success-text: #15803d;
  --warn-text: #b45309;
  --amber-text: #b45309;
  --blue-text: #1d4ed8;
  --teal-text: #0f766e;
  --violet-text: #6d28d9;
  --slate-text: #64748b;
  --orange: #c2410c;
  --radius: 8px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10151c;
  --surface: #161d27;
  --surface-2: #1c2430;
  --border: #2a3444;
  --text: #e6ebf1;
  --text-muted: #8b97a8;
  --input-bg: #26416b;
  --input-border: #7f9cc9;
  --label: #e8edf4;
  --brand: #3b82f6;
  --brand-dark: #1d4ed8;
  --success: #22c55e;
  --danger: #ef4444;
  --danger-text: #fca5a5;
  --success-text: #86efac;
  --warn-text: #fcd34d;
  --amber-text: #fbbf24;
  --blue-text: #93c5fd;
  --teal-text: #5eead4;
  --violet-text: #c4b5fd;
  --slate-text: #94a3b8;
  --orange: #f97316;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { font-weight: 700; font-size: 17px; letter-spacing: 0.02em; }
.brand span { color: var(--brand); }

/* Links wrap as whole words onto a second row instead of running under the user block. */
.nav-links { display: flex; flex-wrap: wrap; gap: 2px 18px; flex: 1 1 auto; min-width: 0; margin: 0 20px; }
.nav-links a {
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }

.nav-user { display: flex; align-items: center; gap: 12px; color: var(--text-muted); flex: 0 0 auto; white-space: nowrap; }
.nav-user button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-user button:hover { color: var(--text); border-color: var(--brand); }

/* Pages are as wide as their content needs (a wide table gets the room, a short one isn't
   stretched thin), never narrower than 1100px unless the window is, never wider than the window. */
/* A page is as wide as its content needs, but at least 1100px. The wide pages (the big lists and the document pages) share one
   standard width, 1280px (.wide-page, below), so they line up and the quotation page does not jump wider when you press Edit. */
.content { padding: 24px; width: fit-content; min-width: min(100%, 1100px); max-width: 100%; margin: 0 auto; }

h1 { font-size: 23px; font-weight: 700; margin: 0 0 16px; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 8px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.card .metric { font-size: 29px; font-weight: 700; }
.card .empty { color: var(--text-muted); font-size: 14px; }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }

.empty-state { text-align: center; padding: 40px; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }

form label { display: block; margin: 16px 0 4px; color: var(--label); font-size: 15px; font-weight: 600; }
/* The explanation under a label: its own line, lighter and smaller, so label / hint / box read as three levels. */
form div.hint { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
form label:not(.check-row) .hint { display: block; margin: 2px 0 0; color: var(--text-muted); font-size: 13px; font-weight: 400; }
input.po-vat-readonly { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
/* "(optional)" and similar notes that belong on the label's own line, so the fields beside each other stay level. */
form label:not(.check-row) .hint.hint-inline { display: inline; margin: 0 0 0 4px; }
form input:not([type="checkbox"]):not([type="radio"]), form textarea, form select, input.unit-input, input.lead-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
/* A box you can't type in stays plain, so a tinted box always means "write here". */
form input:not([type="checkbox"]):not([type="radio"])[readonly], form input:not([type="checkbox"]):not([type="radio"]):disabled, form textarea[readonly], form textarea:disabled, form select:disabled { background: var(--surface-2); border-color: var(--border); }
form input::placeholder, form textarea::placeholder { color: var(--text-muted); opacity: 0.6; }
form input:focus, form textarea:focus, form select:focus, input.unit-input:focus, input.lead-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }
form input[type="checkbox"] { width: auto; }

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.auth-card h1 { font-size: 21px; }
.auth-card p { color: var(--text-muted); margin-top: -8px; margin-bottom: 20px; font-size: 14px; }
.auth-card .btn { width: 100%; margin-top: 20px; }
/* App name above the sign-in box, as on PMS's login page */
.auth-wrap { width: 100%; max-width: 400px; padding: 0 16px; }
.auth-wrap .auth-card { width: 100%; }
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); margin-bottom: 16px; box-shadow: 0 8px 24px rgba(59,130,246,0.3); }
.auth-brand-icon svg { width: 34px; height: 34px; fill: #fff; }
.auth-brand h1 { font-size: 25px; margin: 0 0 4px; letter-spacing: -0.02em; }
.auth-brand p { color: var(--text-muted); font-size: 15px; margin: 0; }

.alert-error { background: rgba(239,68,68,0.12); border: 1px solid var(--danger); color: var(--danger-text); padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 12px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); text-transform: capitalize; }

.searchable-select-wrap { position: relative; }
.searchable-select-list {
  display: none;
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.searchable-select-list.open { display: block; }
.searchable-select-option { padding: 8px 12px; font-size: 15px; cursor: pointer; }
.searchable-select-option.active { background: var(--brand); color: #fff; }
.searchable-select-empty { padding: 8px 12px; font-size: 14px; color: var(--text-muted); }

.recipe-modal-trigger { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); cursor: pointer; background: none; border: none; padding: 0; font: inherit; text-align: left; }
.recipe-modal-trigger:hover { text-decoration-color: var(--brand); }

dialog.recipe-modal {
  width: min(720px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
dialog.recipe-modal::backdrop { background: rgba(0,0,0,0.55); }
dialog.recipe-modal.is-wide { width: min(1120px, 94vw); max-width: 94vw; }
.supplier-modal tr.is-stale td { background: rgba(245, 158, 11, 0.07); }
.recipe-modal-close {
  position: sticky;
  top: 0;
  float: right;
  margin: -24px -24px 0 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}
.recipe-modal-close:hover { color: var(--text); border-color: var(--brand); }
.recipe-modal-body .metric { font-size: 21px; font-weight: 700; }

.doc-preview-trigger { color: var(--brand); background: none; border: none; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.doc-preview-trigger:hover { color: var(--brand-dark); }

dialog.doc-preview-modal {
  width: min(900px, 94vw);
  height: 92vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
dialog.doc-preview-modal::backdrop { background: rgba(0,0,0,0.55); }
dialog.doc-preview-modal .recipe-modal-close { margin: -16px -16px 8px 0; }
.doc-preview-frame { width: 100%; height: calc(100% - 40px); border: none; border-radius: var(--radius); background: #fff; }

/* Print split button + template menu (partials/print-menu.php) */
.print-menu { position: relative; display: inline-flex; align-items: stretch; }
.print-menu details { position: static; }
.print-menu summary { list-style: none; }
.print-menu summary::-webkit-details-marker { display: none; }
.print-menu .btn.print-menu-main { border-radius: var(--radius) 0 0 var(--radius); }
.print-menu .btn.print-menu-toggle { height: 100%; padding: 8px 10px; border-radius: 0 var(--radius) var(--radius) 0; border-left: 1px solid rgba(255,255,255,0.25); }
.print-menu-compact summary { cursor: pointer; color: var(--brand); padding: 0 4px; }
.print-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.4); padding: 6px; white-space: normal; text-align: left; }
.print-menu-heading { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; }
.print-menu-list a { display: block; padding: 7px 8px; border-radius: 6px; color: var(--text); font-weight: 500; }
.print-menu-list a:hover { background: var(--surface-2); text-decoration: none; }
.print-menu-list a.is-current { box-shadow: inset 3px 0 0 var(--brand); }
.print-menu-note { display: block; color: var(--text-muted); font-size: 13px; font-weight: 400; }
/* Tables clip overflow for their rounded corners, which would cut the menu off. */
table:has(.print-menu) { overflow: visible; }

/* Live totals under the quotation scope table */
.live-totals td { background: var(--surface-2); font-weight: 600; text-align: right; }
.live-totals td:first-child { color: var(--text-muted); font-weight: 500; }
.live-totals-grand td { font-size: 16px; color: var(--text); border-top: 2px solid var(--brand); }
.live-totals-grand td:first-child { color: var(--text); font-weight: 700; }

/* Amounts: right-aligned so decimals line up (formatMoney cells carry .num). */
td.num, th.num { text-align: right; white-space: nowrap; }

/* Delivery headings wrap while quantities stay on one line, leaving room for descriptions.
   Keep this override on phones too, where numeric table headers otherwise force nowrap. */
table.dn-table th {
  white-space: normal !important;
  overflow-wrap: normal;
  word-break: normal;
  vertical-align: bottom;
  line-height: 1.3;
}
table.dn-table th:not(.dn-description), table.dn-table td:not(.dn-description) { width: 1%; }
table.dn-table .dn-description { width: 100%; white-space: normal; overflow-wrap: anywhere; }
table.dn-table td.dn-meta, table.dn-table td.code-wrap { max-width: 120px; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
table.dn-table th.num, table.dn-table td.num,
table.dn-table td.num input[type="number"] { text-align: center; }
table.dn-table tbody td { border-bottom: 1px solid #9ca3af; }
table.dn-table th.dn-current { background: var(--surface-2); color: var(--brand); font-weight: 700; border-bottom: 2px solid var(--brand); }
table.dn-table .dn-current { border-left: 1px solid var(--brand); border-right: 1px solid var(--brand); }
table.dn-table td.dn-current { font-weight: 700; }
table.dn-document-table tbody td { font-size: 14px; }

/* Forms with each label beside its box (e.g. Quotation details). Stacks on narrow screens. */
form.form-inline-labels { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; align-items: center; max-width: 820px; }
form.form-inline-labels label { margin: 0; text-align: right; }
form.form-inline-labels label[for="brief"], form.form-inline-labels label[for="terms_text"] { align-self: start; padding-top: 10px; }
form.form-inline-labels textarea { resize: vertical; min-height: 90px; }
@media (max-width: 640px) {
  form.form-inline-labels { grid-template-columns: 1fr; gap: 4px; }
  form.form-inline-labels label { text-align: left; margin-top: 8px; }
}

/* Wide tables that should fit the page without scrolling: headers wrap onto
   two lines, values stay on one, and cells are tighter. */
table.table-fit th, table.table-fit td { padding: 8px 10px; }
table.table-fit th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
table.table-fit td { white-space: nowrap; }

/* Backups page */
.alert-ok { background: rgba(34,197,94,0.12); border: 1px solid var(--success); color: var(--success-text); padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 12px; }
.muted-intro { color: var(--text-muted); font-size: 14px; max-width: 760px; margin: 0 0 16px; }
.muted-intro code, .card code { word-break: break-all; }
.card-note { color: var(--text-muted); font-size: 13px; margin: 10px 0 6px; }
.card-warn { color: var(--danger-text); font-size: 14px; }
.cron-line { width: 100%; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font: 12px ui-monospace, Consolas, monospace; }
.backup-panels { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
td .badge { white-space: nowrap; }

/* ── Phones and tablets ─────────────────────────────────────────────────────
   Tables are wrapped in .table-scroll by app.js so they scroll sideways in
   their own box instead of being clipped; the menu folds behind a ☰ button. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.table-scroll > table { min-width: 100%; }

.nav-toggle { display: none; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 9px; cursor: pointer; flex-direction: column; gap: 4px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.15s, opacity 0.15s; }
.topnav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topnav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.topnav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .topnav { flex-wrap: wrap; padding: 10px 16px; position: sticky; top: 0; z-index: 60; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-links, .nav-user { display: none; width: 100%; margin: 0; }
  .topnav.nav-open .nav-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
  .nav-links a { margin: 0; padding: 11px 4px; font-size: 16px; }
  .topnav.nav-open .nav-user { display: flex; justify-content: space-between; padding: 10px 0 2px; border-top: 1px solid var(--border); }
  .nav-user button { padding: 9px 16px; }
}

@media (max-width: 640px) {
  .content { padding: 16px; }
  h1 { font-size: 21px; }
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-header > div { flex-wrap: wrap; }
  .page-header .btn, .page-header form { flex: 0 0 auto; }
  .grid { grid-template-columns: 1fr; }
  .backup-panels { grid-template-columns: 1fr; }
  .btn { padding: 10px 16px; }
  /* 16px stops iPhones zooming in when a field is tapped. */
  form input, form textarea, form select { font-size: 17px; }
  /* Tables fit the screen: smaller text, tight cells, everything wraps
     (numbers stay whole). The .table-scroll box only scrolls as a last resort. */
  .table-scroll > table { font-size: 14px; }
  .table-scroll th, .table-scroll td { padding: 7px 6px; }
  .table-scroll th { font-size: 11px; letter-spacing: 0.02em; white-space: normal; }
  .table-scroll td, .table-scroll td[style*="nowrap"], table.table-fit td { white-space: normal !important; overflow-wrap: break-word; }
  .table-scroll td.num, .table-scroll th.num { white-space: nowrap !important; overflow-wrap: normal; }
  .table-scroll td input { min-width: 0; width: 100% !important; max-width: 4.5em; padding: 5px !important; }
  .table-scroll td form[style*="display:flex"] { flex-wrap: wrap; gap: 2px 6px !important; }
  .table-scroll td.num, .table-scroll th.num, .table-scroll td[style*="nowrap"] { font-size: 13px; }
  /* The "#" row number adds nothing on a phone. */
  .table-scroll > table.has-rownum thead tr > :first-child, .table-scroll > table.has-rownum tbody tr > :first-child { display: none; }
  .table-scroll .badge { font-size: 11px; padding: 1px 6px; }
  .auth-card { width: auto; max-width: 400px; margin: 16px; padding: 24px; }
  .auth-wrap .auth-card { margin: 0; }
  /* Forms laid out with inline max-widths still fit the screen. */
  main form[style*="max-width"] { max-width: 100% !important; }
}

/* Company details page */
.company-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .company-two { grid-template-columns: 1fr; } }
.company-logo-preview { background: #fff; border-radius: var(--radius); padding: 12px; text-align: center; }
.company-logo-preview img { max-width: 100%; max-height: 120px; }

/* Quotation page: terms & conditions, after the commercial summary */
.terms-section { max-width: 820px; margin-top: 32px; }
.terms-section form.form-inline-labels { max-width: none; }
.terms-buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn.btn-secondary { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.btn.btn-secondary:hover { border-color: var(--brand); background: var(--surface-2); }
form label.check-row { display: flex; gap: 8px; align-items: center; text-align: left; margin: 0; color: var(--text); font-size: 14px; font-weight: 500; }
form label.check-row input { width: auto; margin: 0; }
form label.check-row .hint { color: var(--text-muted); font-size: 13px; }

/* Quotation scope: stock code box wide enough for a typical code (e.g. CAB-25TE-100) */
form.code-form { margin: 0; }
form.code-form input.code-input { width: 8.25em; min-width: 8.25em; padding: 4px 6px; font-size: 14px; }
/* 11 columns: slightly tighter cells so the scope table fits the page (Remove stays visible). */
.scope-table th, .scope-table td { padding-left: 9px; padding-right: 9px; }
@media (max-width: 640px) { form.code-form input.code-input { width: 7em; min-width: 7em; } }
.link-button { background: none; border: none; color: var(--brand); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }

/* Quotation page: Scope of Work, full width under the quotation details */
.scope-card { margin-bottom: 20px; }
.scope-card textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.scope-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; color: var(--text-muted); font-size: 13px; }

/* Quotation: Add to scope buttons, each opening its popup (dialog.add-modal) */
.add-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 20px; scroll-margin-top: 120px; }
.add-bar-label { color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; }
.btn.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.btn-outline:hover { background: var(--surface-2); border-color: var(--brand); }
dialog.add-modal { width: min(520px, 94vw); padding: 0; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
dialog.add-modal::backdrop { background: rgba(0,0,0,0.6); }
.add-modal header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.add-modal header h2 { margin: 0; font-size: 17px; }
.add-modal-close { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; width: 30px; height: 30px; font-size: 19px; line-height: 1; cursor: pointer; }
.add-modal-close:hover { color: var(--text); border-color: var(--brand); }
.add-modal form { padding: 6px 20px 18px; }
.add-modal-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.add-modal-hint { margin-right: auto; color: var(--text-muted); font-size: 13px; }
.add-modal-foot .btn:not([name]) { order: 1; }           /* Cancel, then Add; Add comes first in the form (Enter = Add) */
.add-modal-foot .btn[name="again"] { order: 2; }           /* Add & another is always last, at the right-hand edge */
.add-modal-error { color: var(--danger-text); font-size: 13px; margin: 4px 0 0; }
.added-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10000; background: rgba(34,197,94,0.15); border: 1px solid var(--success); color: var(--success-text); padding: 8px 14px; border-radius: 8px; font-size: 14px; transition: opacity 0.4s; }
@media (hover: none) { .add-modal-hint { visibility: hidden; } } /* no Esc key on touch screens */
/* In a popup the search list stops short of the Add buttons, so a click on them can't
   land on a list item instead (it scrolls; typing narrows it). */
.add-modal .searchable-select-list { max-height: 130px; }

/* Paste list popup, one-off lines, and lines waiting for a price */
dialog.add-modal.add-modal-wide { width: min(880px, 96vw); }
.add-modal label code { font-size: 13px; }
.paste-form textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.paste-preview { max-height: 42vh; overflow: auto; margin-top: 10px; }
.paste-preview:empty { display: none; }
.paste-preview table { font-size: 14px; }
.paste-preview th, .paste-preview td { padding: 6px 8px; vertical-align: top; }
.paste-preview td.muted { color: var(--text-muted); }
.paste-preview .row-error td { color: var(--danger-text); }
.paste-preview label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin: 0; font-size: 13px; }
.paste-preview input[type=checkbox] { width: auto; margin: 0; }
.paste-summary { margin-right: auto; color: var(--text-muted); font-size: 14px; }
.alert-warn { background: rgba(251,191,36,0.12); border: 1px solid #f59e0b; color: var(--warn-text); padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 12px; }
.needs-price-text { color: var(--amber-text); font-weight: 600; }
tr.needs-price td { background: rgba(251,191,36,0.08); }
tr.needs-price td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.badge.badge-one-off { border-color: #a78bfa; color: var(--violet-text); text-transform: none; }
.unit-input, input.unit-input { width: 64px; padding: 4px 6px; }   /* outside its form (form= attribute), so themed by name */
.price-input { width: 96px; padding: 4px 6px; text-align: right; }
input.lead-input { width: 92px; padding: 4px 6px; }
input.lead-input.is-missing { border-color: #f59e0b; background: rgba(251,191,36,0.12); }
.lead-cell { white-space: nowrap; }
tr.needs-price .price-input { border-color: #f59e0b; }
.save-material-form { margin-top: 2px; font-size: 13px; }

/* Cancel / go back, next to a form's main button */
.btn-cancel { margin-left: 10px; line-height: normal; font-family: Arial, Helvetica, sans-serif; font-size: 14.3333px; } /* a link: same font as the buttons beside it (browser default), so they line up */
.btn-cancel:hover { text-decoration: none; }
/* Add Material popup: Add, then Add & another (Add still comes first in the form, so Enter = Add). */
.add-modal-foot.foot-add-first .btn:not([name]) { order: 1; }
.add-modal-foot.foot-add-first .btn[name="again"] { order: 2; }
.add-modal-foot .btn.add-modal-cancel { order: 0; margin-right: auto; }   /* left, before Add & another / Add */
.paste-form .add-modal-foot .btn.add-modal-cancel { margin-right: 0; }    /* the summary takes the left there */

/* Every popup can be resized from its bottom-right corner (app.js remembers the size). */
dialog.add-modal, dialog.recipe-modal, dialog.doc-preview-modal {
  resize: both; overflow: auto;
  min-width: min(320px, 94vw); min-height: 200px; max-width: 98vw; max-height: 95vh;
}
/* Paste list: extra height from resizing goes to the preview table. */
dialog.add-modal-wide[open] { display: flex; flex-direction: column; }
dialog.add-modal-wide .paste-form { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
dialog.add-modal-wide .paste-preview { flex: 1 1 auto; min-height: 80px; max-height: none; }
dialog.add-modal-wide .paste-form > *:not(.paste-preview) { flex: 0 0 auto; }   /* only the preview gives up space */

/* Quotation details: open by default, two columns of label-above fields (one on phones). */
details.details-card { margin-bottom: 20px; }
form.details-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 16px; align-items: start; margin-top: 12px; }
form.details-grid > .field { grid-column: span 3; }             /* two per row */
form.details-grid > .field.field-third { grid-column: span 2; } /* three per row: Customer, Project no., Quotation no. */
form.details-grid > .field.field-wide { grid-column: 1 / -1; }
form.details-grid label { display: block; margin: 0 0 4px; font-size: 15px; }
form.details-grid label.check-row { display: flex; font-size: 15px; margin: 0; }
form.details-grid textarea { min-height: 70px; resize: vertical; }
@media (max-width: 640px) { form.details-grid { grid-template-columns: 1fr; } form.details-grid > .field, form.details-grid > .field.field-third { grid-column: 1 / -1; } }

/* Scope of Work folds; its title then shows the first line of the scope. */
.scope-summary { cursor: pointer; list-style-position: inside; }
.scope-summary .scope-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.scope-summary .scope-peek { color: var(--text-muted); font-size: 14px; margin-left: 6px; }
details[open] > .scope-summary .scope-peek { display: none; }
details.scope-card[open] > .scope-summary { margin-bottom: 10px; }

/* Quotation page: back link, danger button, Attention to + Valid for pickers */
.crumbs { font-size: 14px; color: var(--text-muted); margin: -4px 0 10px; }
.crumbs span { margin: 0 6px; }
.btn.btn-danger { background: transparent; color: var(--danger-text); border: 1px solid #ef4444; }
.btn.btn-danger:hover { background: rgba(239,68,68,0.12); }
.contact-picker, .validity-picker { display: flex; gap: 6px; align-items: center; }
.contact-picker select, .validity-picker select { flex: 1 1 auto; min-width: 0; }
.contact-picker .btn { padding: 8px 10px; white-space: nowrap; }
.validity-picker input[type=date] { width: auto; flex: 0 0 auto; }
.field-note { color: var(--text-muted); font-size: 13px; margin-top: 4px; }

/* Quotations list: search row with "Include archived", sortable headings, badges */
.list-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; max-width: 760px; }
/* Filter dropdowns sit side by side, not one full-width row each. */
.list-search select { width: auto; min-width: 150px; max-width: 260px; flex: 0 1 auto; }
.list-search .searchable-select-wrap { width: 230px; flex: 0 1 230px; }
.list-search .check-row { margin: 0; white-space: nowrap; font-weight: 400; }
.list-search input[type=checkbox] { width: auto; }
th.sort-head { cursor: pointer; user-select: none; }
th.sort-head:hover { color: var(--text); }
th.sorted-asc::after { content: ' ▲'; font-size: 10px; }
th.sorted-desc::after { content: ' ▼'; font-size: 10px; }
.badge.badge-expired { border-color: #f59e0b; color: var(--warn-text); }
.badge.badge-archived { border-color: var(--border); color: var(--text-muted); font-style: italic; }

/* Client page: contacts */
.contact-edit { display: inline; }
.contact-edit > summary { display: inline; list-style: none; }
.contact-edit > summary::-webkit-details-marker { display: none; }
form.contact-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
form.contact-inline input[type=text], form.contact-inline input[type=tel], form.contact-inline input[type=email] { width: 160px; padding: 6px 8px; }
form.contact-inline input[type=checkbox] { width: auto; }
/* Quotation page actions: wrap onto a second row rather than squeezing labels onto two lines. */
.quote-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; max-width: 560px; }
.quote-actions .btn { white-space: nowrap; }

/* Quotations list: filter tiles */
.quote-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-bottom: 16px; }
.quote-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.quote-tile:hover { border-color: var(--brand); text-decoration: none; }
.quote-tile.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--surface-2); }
.quote-tile .tile-count { font-size: 23px; font-weight: 700; line-height: 1.1; }
.quote-tile .tile-label { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.quote-tile.tile-follow_up .tile-count { color: var(--amber-text); }
.quote-tile.tile-expired .tile-count { color: var(--danger-text); }
.quote-tile.tile-won .tile-count { color: var(--success-text); }
/* Period tiles (Created: last 7 / 30 days, this month): a second, smaller row. */
.quote-periods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -6px; }
.quote-periods .period-label { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 2px; }
.quote-periods .quote-tile { flex-direction: row; align-items: baseline; gap: 6px; padding: 6px 12px; }
.quote-periods .tile-count { font-size: 17px; }
/* Quotation: customer name in bold (header and locked Customer field) */
.page-header .client-name { color: var(--text); }
.customer-locked { padding: 9px 0; font-size: 16px; }
.customer-locked .hint { color: var(--text-muted); font-size: 12px; margin-left: 6px; }
/* Contact popup: two columns (Contact no. + Mobile, Email + Role), like Quotation details. */
.contact-form .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 6px; }
.contact-form .details-grid .field-wide { grid-column: 1 / -1; }
.contact-form .details-grid label { display: block; margin: 0 0 4px; font-size: 15px; }
.contact-form .details-grid label.check-row { display: flex; font-size: 15px; margin: 0; }
@media (max-width: 640px) { .contact-form .details-grid { grid-template-columns: 1fr; } }

/* Quotations list: bulk selection and the status/action bar */
table .bulk-col { display: none; width: 1%; }
table.selecting .bulk-col { display: table-cell; }
table .bulk-col input { width: auto; margin: 0; }
tr.bulk-checked td { background: rgba(59,130,246,0.10); }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--brand); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 10px; position: sticky; top: 0; z-index: 5; }
.bulk-bar[hidden] { display: none; }
.bulk-bar select { width: auto; }
.bulk-bar .bulk-lost { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.bulk-bar .bulk-lost[hidden] { display: none; }
.bulk-bar .bulk-hint { color: var(--text-muted); font-size: 13px; flex: 1 1 220px; }
.lost-label { display: inline-flex; flex-direction: column; gap: 2px; font-size: 13px; margin: 0; }
.lost-label .hint { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.lost-label select, .lost-label input { width: auto; min-width: 180px; padding: 6px 8px; }
.bulk-result .bulk-skipped { color: var(--warn-text); margin-top: 6px; }
.bulk-result ul { margin: 4px 0 0; padding-left: 18px; }
.alert-lost { background: rgba(148,163,184,0.12); border: 1px solid #64748b; color: var(--text); padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 12px; }
details.lost-form > summary { list-style: none; }
details.lost-form > summary::-webkit-details-marker { display: none; }
details.lost-form[open] > form { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.quote-tiles:not(.quote-periods) { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.quote-tile.tile-lost .tile-count { color: var(--slate-text); }
/* Recipe pricing: only the chosen pricing's box shows */
.recipe-pricing [data-pricing-field][hidden] { display: none; }
.recipe-pricing .hint { color: var(--text-muted); font-size: 12px; font-weight: 400; }
/* Bold button above T&Cs, scope and closing-note boxes */
.text-tools { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.text-tool, .text-tool-bold { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; width: 28px; height: 26px; cursor: pointer; font-family: Georgia, serif; }
.text-tool:hover, .text-tool-bold:hover { border-color: var(--brand); }
.text-tools-hint { color: var(--text-muted); font-size: 12px; }

/* Drag to reorder (tbody[data-reorder-url]) */
.drag-handle { cursor: grab; color: var(--text-muted); user-select: none; padding: 0 6px 0 0; font-size: 16px; line-height: 1; }
.drag-handle:hover { color: var(--text); }
tr.dragging { opacity: .45; }

/* Add material popup tabs and quick material fields */
.modal-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--border); }
.modal-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 6px 10px; cursor: pointer; font: inherit; margin-bottom: -1px; }
.modal-tab.is-active { color: var(--text); border-bottom-color: var(--brand); }
.quick-fields-row { display: flex; gap: 12px; flex-wrap: wrap; }
.quick-fields-row > div { flex: 1 1 110px; min-width: 0; }
.line-edit-material { display: block; font-size: 13px; margin: 2px 0 0; text-align: left; }
.scope-table tr.section-subtotal td { font-weight: 700; text-align: right; border-top: 1px solid var(--border); }

/* Client form: address block */
.address-fields { border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px 12px; margin: 14px 0; }
.address-fields legend { padding: 0 4px; font-weight: 600; }

/* Labour rate types printed (quotation details, company settings) */
.rate-type-ticks { border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px 10px; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.rate-type-ticks legend { padding: 0 4px; font-weight: 600; }
.rate-type-tick { margin: 0; }

/* Top menu: headings with drop-downs (Quotations, Catalogue, Settings) and the account menu */
.nav-links { align-items: center; }
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { content: " ▾"; font-size: 12px; }
.nav-menu[open] > summary, .nav-menu > summary:hover { color: var(--text); }
.nav-links .is-current { color: var(--text); box-shadow: inset 0 -2px 0 var(--brand); }
.nav-menu-items { position: absolute; top: calc(100% + 10px); left: 0; z-index: 50; min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 0; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.nav-menu-right .nav-menu-items { left: auto; right: 0; }
.nav-menu-items a, .nav-menu-items .nav-menu-button { display: block; width: 100%; padding: 7px 16px; color: var(--text-muted); text-align: left; white-space: nowrap; }
.nav-menu-items a:hover, .nav-menu-items .nav-menu-button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-user .nav-menu-button { background: none; border: none; border-radius: 0; font: inherit; cursor: pointer; }
.nav-menu-heading { padding: 8px 16px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); opacity: .7; }
.nav-menu-heading:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.nav-new { padding: 6px 12px; font-size: 14px; white-space: nowrap; }
.nav-new:hover { text-decoration: none; }
@media (max-width: 960px) {
  .nav-links .is-current { box-shadow: none; }
  .topnav.nav-open .nav-links { grid-template-columns: 1fr; }
  .nav-menu > summary { padding: 11px 4px; font-size: 16px; }
  .nav-menu-items { position: static; box-shadow: none; border: none; background: none; padding: 0 0 6px 12px; min-width: 0; }
  .nav-menu-items a { padding: 9px 4px; font-size: 16px; }
  .nav-menu-right .nav-menu-items { position: absolute; right: 0; background: var(--surface); border: 1px solid var(--border); padding: 6px 0; }
}

/* Dashboard: tiles and cards are links into the filtered lists */
.dash-heading { margin: 22px 0 10px; }
.dash-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
a.dash-card { color: var(--text); text-decoration: none; transition: border-color .15s; }
a.dash-card:hover { border-color: var(--brand); text-decoration: none; }

/* Phones: the quotation scope keeps Description, Unit, Qty, Sell and Subtotal in view (Type,
   Code, Cost and Markup % are on wider screens), and small links in tables are easier to tap. */
@media (max-width: 640px) {
  .scope-table thead tr > :nth-child(2), .scope-table thead tr > :nth-child(3),
  .scope-table tbody tr:not(.note-row):not(.section-subtotal) > :nth-child(2),
  .scope-table tbody tr:not(.note-row):not(.section-subtotal) > :nth-child(3) { display: none; }
  .scope-table.is-commercial thead tr > :nth-child(7), .scope-table.is-commercial thead tr > :nth-child(8),
  .scope-table.is-commercial tbody tr:not(.note-row):not(.section-subtotal) > :nth-child(7),
  .scope-table.is-commercial tbody tr:not(.note-row):not(.section-subtotal) > :nth-child(8) { display: none; }
  .table-scroll td .link-button, .table-scroll td form button, .table-scroll td > a { display: inline-block; min-height: 32px; padding: 6px 4px !important; }
  .line-edit-material { min-height: 28px; padding-top: 4px !important; }
  /* Row actions stack (↑ ↓ / Remove) so the table fits; totals labels read from the left. */
  .scope-table td:last-child { white-space: normal !important; width: 1%; text-align: center; }
  .scope-table td:last-child form { display: inline-block !important; }
  .scope-table td:last-child form:last-of-type { display: block !important; }
  .scope-table tfoot td:first-child, .scope-table tr.section-subtotal td:nth-child(2) { text-align: left; }
}

/* Quotation details: printout options fold away (codes, rate types, section subtotals) */
.print-options { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; }
.print-options > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.print-options > summary::-webkit-details-marker { display: none; }
.print-options > summary::before { content: "▸"; color: var(--text-muted); }
.print-options[open] > summary::before { content: "▾"; }
.print-options[open] > summary { margin-bottom: 8px; }

/* Quotation page: Details, Scope of Work and T&Cs start folded */
details.terms-section[open] > .scope-summary { margin-bottom: 10px; }
details.details-card[open] > .scope-summary { margin-bottom: 10px; }

/* Tablets and small laptops: tables tighten up so they fit without scrolling sideways, and the
   quotation scope drops Type and Code (still shown on wider screens and on the printout). */
@media (min-width: 641px) and (max-width: 1279px) {
  .table-scroll > table { font-size: 14px; }
  .table-scroll th, .table-scroll td { padding: 7px 7px; }
  .table-scroll th { font-size: 12px; letter-spacing: 0.02em; }
  .table-scroll td input { max-width: 5em; padding: 5px !important; }
  .scope-table thead tr > :nth-child(2), .scope-table thead tr > :nth-child(3),
  .scope-table tbody tr:not(.note-row):not(.section-subtotal) > :nth-child(2),
  .scope-table tbody tr:not(.note-row):not(.section-subtotal) > :nth-child(3) { display: none; }
}

/* Quotations list filtered to one client (by clicking a client's name) */
.client-filter { margin: 0 0 12px; font-size: 15px; }
.client-filter-clear { margin-left: 10px; font-size: 14px; }

/* Quotations list: the status badge opens the Change status popup */
button.status-change { cursor: pointer; font-family: inherit; line-height: inherit; }
button.status-change:hover { border-color: var(--brand); color: var(--text); }
.status-modal-name { margin: 12px 0 4px; font-weight: 600; }
.status-modal-now { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; }
.status-modal-options { display: grid; gap: 8px; margin-bottom: 8px; }
.status-modal-lost { display: grid; gap: 8px; margin-top: 8px; }
.status-modal-lost[hidden], .status-modal-save[hidden], .status-modal-none[hidden] { display: none; }

/* Quotation scope: a title (note) row with its "Group this section" switch on the right */
.note-row-body { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.group-section-form { margin: 0; font-size: 13px; font-weight: 400; white-space: nowrap; }
.group-section-form .check-row { color: var(--text-muted); }
.grouped-ticks { display: grid; gap: 6px; margin-top: 8px; font-size: 14px; }

/* The Back button at the top of every page below a list */
.btn-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 7px 14px; font-size: 15px; }
/* The Back button: soft orange fill with a bold orange outline, easy to spot without shouting. */
.btn.btn-back, a.btn-back { background: #fff7ed; border: 2px solid #f97316; color: #c2410c; font-weight: 600; }
.btn.btn-back:hover, a.btn-back:hover { background: #ffedd5; border-color: #ea580c; color: #9a3412; text-decoration: none; }
:root[data-theme="dark"] .btn.btn-back, :root[data-theme="dark"] a.btn-back { background: rgba(249,115,22,.16); color: #fdba74; border-color: #f97316; }
.note-rename { margin-left: 8px; font-size: 13px; font-weight: 400; font-style: normal; }
.line-replace { margin-right: 4px; }

/* Edit mode bar on a quotation */
.edit-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin: 0 0 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.edit-bar .hint { color: var(--text-muted); font-size: 14px; }
.edit-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.edit-bar-actions form { margin: 0; }
.edit-bar.is-editing { position: sticky; top: 0; z-index: 50; border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); }
.edit-bar.is-locked { border-color: #ef4444; }
form.is-readonly input, form.is-readonly select, form.is-readonly textarea { opacity: .8; cursor: not-allowed; }

/* Quotations list: printed-quotation preview popup */
.quote-preview-link { color: var(--text); text-decoration-color: var(--border); font-weight: 600; }
.quote-preview-link:hover { text-decoration-color: var(--brand); }
dialog.quote-preview-modal { width: min(1000px, 96vw); height: 92vh; display: none; flex-direction: column; }
dialog.quote-preview-modal[open] { display: flex; }
.quote-preview-modal header { gap: 12px; }
.quote-preview-actions { display: flex; gap: 8px; align-items: center; }
.quote-preview-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.badge-editing { border-color: #f59e0b; color: var(--amber-text); text-transform: none; }

/* "× Clear filters" next to a list's search */
.clear-filters { font-size: 14px; white-space: nowrap; }

/* RFQ / PO form: unticked items are dimmed (left out) */
table.purchase-items tr.is-off td:not(.tickcol) { opacity: .45; }
table.purchase-items th.tickcol, table.purchase-items td.tickcol { width: 1%; text-align: center; }
.purchase-supplier-pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.purchase-supplier-pick label { margin: 0; }
.purchase-supplier-pick select { max-width: 360px; }

/* Email: send result notices (bottom right) */
.badge.badge-ok { border-color: #22c55e; color: var(--success-text); }
#email-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: grid; gap: 8px; max-width: min(420px, 92vw); }
.email-toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.email-toast.is-ok { border-left-color: #22c55e; }
.email-toast.is-failed { border-left-color: #ef4444; }
.email-toast button { margin-left: 8px; }
fieldset.email-template { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px 14px; margin: 12px 0; }
fieldset.email-template legend { padding: 0 6px; font-weight: 600; }
details.fillin-help { font-size: 14px; margin-bottom: 8px; }
details.fillin-help code { font-size: 13px; }

/* Compare suppliers' replies: the cheapest price per item in green */
table.compare-table th.cmp-supplier { min-width: 140px; vertical-align: bottom; }
table.compare-table td.cmp-cell { white-space: nowrap; }
table.compare-table td.cmp-cell.is-best { background: rgba(34, 197, 94, .12); }
table.compare-table td.cmp-cell.is-best strong { color: var(--success); }
.cmp-best-key { color: var(--success); font-weight: 600; }
.cmp-pick { display: inline-flex; gap: 6px; align-items: center; margin: 0; cursor: pointer; font-weight: 400; }

/* Purchasing: tabs over the register, the quotation's purchasing panel, overdue dates */
.list-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 12px; flex-wrap: wrap; }
.list-tabs a { padding: 7px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; color: var(--text-muted); text-decoration: none; font-size: 15px; }
.list-tabs a.is-active { border-color: var(--border); background: var(--surface); color: var(--text); font-weight: 600; margin-bottom: -1px; }
.list-tabs .count { font-size: 13px; color: var(--text-muted); margin-left: 4px; }
.overdue { color: var(--danger); font-weight: 600; }
.badge.badge-overdue { border-color: var(--danger); color: var(--danger); }
.purchasing-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.purchasing-panel h4 { margin: 0 0 6px; font-size: 15px; }
@media (max-width: 800px) { .purchasing-panel { grid-template-columns: 1fr; } }
fieldset[disabled] input, fieldset[disabled] select { opacity: .55; cursor: not-allowed; }
/* A disabled button reads as neutral and stays legible in both themes (white-on-pale-blue was not). */
fieldset[disabled] .btn { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); cursor: not-allowed; }

/* Quotation workflow bar: stages done (ticked), now (orange), to come (grey); explanation below */
.wf { margin: 4px 0 18px; }
.wf-steps { list-style: none; display: flex; margin: 0 0 10px; padding: 0; }
.wf-step { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 13px; outline: none; cursor: default; }
.wf-step:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--border); }
.wf-step.is-done:not(:last-child)::after { background: var(--brand); }
.wf-dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; border: 2px solid var(--border); background: var(--surface); color: var(--text-muted); }
.wf-step.is-done .wf-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.wf-step.is-now .wf-dot { border-color: var(--stc, var(--orange)); color: var(--stt, var(--orange)); box-shadow: 0 0 0 4px var(--stg, rgba(249, 115, 22, .2)); }
.wf-label { margin-top: 6px; color: var(--text-muted); line-height: 1.25; padding: 0 4px; }
.wf-step.is-done .wf-label { color: var(--text); }
.wf-step.is-now .wf-label { color: var(--stt, var(--orange)); font-weight: 700; }
.wf-branch { display: block; font-size: 12px; color: var(--text-muted); font-weight: 400; }
.wf-tip { display: none; position: absolute; top: 100%; margin-top: 6px; z-index: 20; width: 240px; left: 50%; transform: translateX(-50%); background: #0b1017; color: #e6ebf1; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px; line-height: 1.45; text-align: left; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.wf-step:first-child .wf-tip { left: 0; transform: none; }
.wf-step:last-child .wf-tip { left: auto; right: 0; transform: none; }
.wf-step:hover .wf-tip, .wf-step:focus .wf-tip { display: block; }
.wf-explain { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: rgba(249, 115, 22, .08); border: 1px solid rgba(249, 115, 22, .35); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.wf-now { flex: 1; min-width: 240px; }
.wf-stage-name { color: var(--orange); }
.wf-stage-of { display: none; }
.wf-rules { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.wf-pill { display: inline-block; font-size: 12px; border-radius: 10px; padding: 0 8px; margin-right: 2px; }
.wf-pill.is-can { background: rgba(34, 197, 94, .18); color: var(--success); }
.wf-pill.is-locked { background: var(--surface-2); color: var(--text-muted); }
.wf-next { text-align: right; }
.wf-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; }
.wf-compact { display: none; }
.wf-progress { display: block; height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin: 6px 0 8px; }
.wf-progress i { display: block; height: 100%; background: var(--orange); }
@media (max-width: 760px) {
  .wf-steps { display: none; }
  .wf-compact { display: block; font-size: 14px; }
  .wf-compact strong { color: var(--orange); }
  .wf-next { text-align: left; }
  .wf-buttons { justify-content: flex-start; }
}

/* Purchasing: where you are (Purchasing › quotation › RFQ/PO › page) */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; margin: 0 0 10px; color: var(--text-muted); }
.crumbs a { color: var(--brand); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs-sep { color: var(--text-muted); }

/* Material photos: thumbnails in lists and on quotation lines; the photo field; full-size popup */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
th.photo-col, td.photo-col { width: 1px; padding-right: 0; }
img.photo-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); display: block; background: #fff; }
.line-photo { float: left; margin: 0 8px 0 0; }
img.photo-thumb.is-small { width: 32px; height: 32px; }
.photo-field { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin: 16px 0 0; }
.photo-field-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.photo-preview { width: 120px; height: 120px; border: 1px dashed var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface-2); }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-pick { cursor: pointer; margin: 0 6px 6px 0; }
.photo-camera { display: none; }
@media (hover: none) and (pointer: coarse) { .photo-camera { display: inline-flex; } }
dialog.photo-modal { max-width: min(92vw, 1000px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
dialog.photo-modal::backdrop { background: rgba(0,0,0,.6); }
dialog.photo-modal header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; font-size: 15px; }
dialog.photo-modal img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; background: #fff; }

/* Materials › Bulk edit: a compact editable grid; changed cells in yellow */
.bulk-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; font-size: 14px; }
.bulk-action { display: inline-flex; gap: 6px; align-items: center; }
.bulk-action label { margin: 0; font-size: 13px; color: var(--text-muted); }
.bulk-action input, .bulk-action select { width: auto; max-width: 150px; padding: 4px 6px; font-size: 14px; }
.bulk-action .btn { padding: 4px 10px; font-size: 14px; }
.bulk-scroll { max-height: 70vh; overflow: auto; }
table.bulk-grid { font-size: 13.5px; }
table.bulk-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); white-space: nowrap; }
table.bulk-grid td { padding: 2px 3px; }
table.bulk-grid input:not([type=checkbox]), table.bulk-grid select { padding: 3px 5px; font-size: 13.5px; margin: 0; border-radius: 4px; }
table.bulk-grid .w-desc { width: 260px; }
table.bulk-grid .w-mid { width: 130px; }
table.bulk-grid .w-code { width: 100px; }
table.bulk-grid .w-num { width: 74px; text-align: right; }
table.bulk-grid select { max-width: 160px; }
table.bulk-grid .is-changed { background: rgba(250, 204, 21, .25) !important; border-color: #eab308 !important; }
td.is-changed { background: rgba(250, 204, 21, .25); }
.bulk-savebar { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; background: var(--bg); border-top: 1px solid var(--border); padding: 10px 0; margin-top: 8px; z-index: 3; }
.bulk-phone-note { display: none; }
@media (max-width: 760px) { .bulk-phone-note { display: block; } }
form.bulk-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.bulk-filters input[type=text] { flex: 1; min-width: 200px; margin: 0; }
form.bulk-filters select { width: auto; max-width: 220px; margin: 0; }

/* Quotation scope: Save all quantities and prices */
.lines-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid #eab308; border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; box-shadow: 0 -4px 14px rgba(0,0,0,.25); }
.lines-savebar[hidden] { display: none; }
/* light yellow with dark text: these boxes are light, so a see-through highlight made them dark and hid the value */
input.qty-input.is-changed, input.price-input.is-changed, input.unit-input.is-changed, input.lead-input.is-changed { background: #fef08a !important; color: #111 !important; border-color: #ca8a04 !important; box-shadow: 0 0 0 2px rgba(202, 138, 4, .35); }
.bulk-action-supplier .searchable-select-wrap { min-width: 200px; }
.bulk-guide { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; }
.bulk-guide summary { cursor: pointer; }
.bulk-guide ol { margin: 8px 0 6px; padding-left: 20px; }
.bulk-guide ul { margin: 4px 0; padding-left: 18px; }
.bulk-guide kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; font-size: 13px; background: var(--surface-2); }
.bulk-guide-yellow { background: rgba(250, 204, 21, .3); padding: 0 4px; border-radius: 3px; }

/* Delivery notes */
table.dn-items tr.dn-complete td { opacity: .55; }
table.dn-items tr.dn-group td { font-weight: 600; font-style: italic; color: var(--text-muted); }
.dn-done { color: var(--success); font-weight: 600; }
.dn-part { color: var(--amber-text); font-weight: 600; }
.dn-over { color: var(--danger); font-weight: 700; }
.dn-progress { display: inline-block; width: 220px; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; vertical-align: middle; margin: 0 8px; }
.dn-progress i { display: block; height: 100%; background: #f59e0b; }
.dn-progress i.is-full { background: var(--success); }
.dn-deliveries { margin: 36px 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 100px; }
.dn-deliveries-summary { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; list-style: none; cursor: pointer; font-size: 22px; font-weight: 700; }
.dn-deliveries-summary::-webkit-details-marker { display: none; }
.dn-deliveries-summary::before { content: '\25b8'; color: var(--text-muted); }
.dn-deliveries[open] > .dn-deliveries-summary { margin-bottom: 18px; }
.dn-deliveries[open] > .dn-deliveries-summary::before { content: '\25be'; }
.dn-deliveries-counts { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: 14px; font-weight: 400; }
.quotation-tabs { display: flex; gap: 6px; overflow-x: auto; position: relative; margin: 20px 0; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); scroll-margin-top: 8px; }
.quotation-tabs [role="tab"] { flex: 0 0 auto; padding: 10px 18px; border-radius: 5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.quotation-tabs [role="tab"][aria-selected="true"] { background: var(--brand); color: #fff; }
.quotation-tabs [role="tab"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.quotation-jumps { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 0 0 20px; font-size: 14px; }
.quotation-jumps a { padding: 4px 0; }
.order-po-required { display: flex; gap: 12px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px; margin: 18px 0; border: 2px solid #f59e0b; border-radius: var(--radius); background: var(--surface-2); }
.order-po-required strong { font-size: 19px; color: var(--amber-text); }
.order-po-required p { margin: 4px 0 0; }
.order-po-entry { scroll-margin-top: 24px; }
.order-po-entry.is-required { border: 2px solid #f59e0b; padding: 14px; border-radius: var(--radius); margin-top: 16px; }
.order-po-entry.is-required summary { color: var(--amber-text); font-size: 17px; font-weight: 700; }
[data-quote-panel][hidden] { display: none !important; }
[data-quote-panel] { scroll-margin-top: 78px; min-height: calc(100vh - 80px); }
[data-quote-panel] > .dn-deliveries { margin-top: 0; }
[data-quote-panel] > .purchasing-section > h3 { margin-top: 0 !important; }
@media print {
  .quotation-tabs { display: none; }
}
.dn-drafts { margin: 16px 0 20px; border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius); overflow: hidden; }
.dn-drafts-heading { display: flex; gap: 6px 16px; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.dn-drafts-heading h3 { margin: 0; font-size: 17px; }
.dn-drafts-heading p { margin: 0; }
.dn-draft-count { display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 14px; vertical-align: middle; }
.dn-draft-list { display: block; list-style: none; margin: 0; padding: 0; }
.dn-draft-row { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.dn-draft-row:last-child { border-bottom: none; }
.dn-draft-info { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; min-width: 0; }
.dn-draft-number { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.dn-draft-badge { padding: 3px 9px; border: 1px solid #f59e0b; border-radius: 999px; background: var(--surface-2); color: var(--amber-text); font-size: 13px; font-weight: 700; }
.dn-draft-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dn-draft-actions .btn { padding: 5px 9px; font-size: 13px; }
.dn-no-drafts { padding: 16px 18px; margin: 0; }
.dn-balances-title { margin: 0 0 12px; font-size: 17px; }
@media (max-width: 640px) {
  .dn-deliveries { padding: 14px; }
  .dn-draft-row { padding: 14px; }
  .dn-draft-actions { width: 100%; }
}
td.code-cell { max-width: 160px; }

/* Row highlighting: hover shows which row you're on; a click keeps it highlighted (app.js). */
tbody > tr:hover > td { background-image: linear-gradient(rgba(148,163,184,.10), rgba(148,163,184,.10)); }
tr.row-selected > td { background-color: rgba(59,130,246,.22); background-image: none; }
tr.row-selected > td:first-child { box-shadow: inset 3px 0 0 var(--brand, #3b82f6); }
@media print { tbody > tr:hover > td { background-image: none; } tr.row-selected > td { background-color: transparent !important; box-shadow: none !important; } }

/* Delete buttons stay out of the way unless switched on (the top bar's 🗑 button; app.js remembers the choice). */
html:not(.show-delete) form[action$="/delete"], html:not(.show-delete) .delete-sep, html:not(.show-delete) option[value="delete"] { display: none !important; }
.nav-delete-toggle { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.nav-delete-toggle:hover { color: var(--text); }
html.show-delete .nav-delete-toggle { color: var(--danger-text); border-color: #b91c1c; background: rgba(185,28,28,.12); }
@media (max-width: 760px) { .nav-delete-toggle span { display: none; } }

/* Select all / Select none bars above tick lists (app.js). */
.select-bars { margin: 0 0 8px; }
.select-bar { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14px; margin: 0 0 4px; }
.select-bar[hidden] { display: none; }
.select-bar-label { color: var(--text-muted); font-weight: 600; }
.select-bar-count { color: var(--text-muted); margin-left: 6px; }

/* Quotations: the name is a direct link; the small arrow beside it opens the menu. */
.nav-split { position: relative; display: flex; align-items: center; }
.nav-split .nav-menu { position: static; }
.nav-split .nav-menu > summary { padding: 4px 6px; margin-left: 1px; }
.nav-split .nav-menu > summary::after { content: "▾"; }
@media (max-width: 760px) { .nav-split { justify-content: space-between; } .nav-split .nav-menu > summary { padding: 11px 10px; } .nav-split .nav-menu-items { left: auto; right: 0; } }

/* RFQ / PO without a quotation: the add-material box and one-off button above the items. */
.standalone-add { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 6px 0 10px; }
.standalone-add .field { flex: 1 1 320px; max-width: 520px; }
table.purchase-items[data-standalone] td input[type="text"] { width: 100%; }
table.purchase-items[data-standalone] td.oneoff-save label { white-space: nowrap; font-size: 13px; }

/* Buttons given a neutral background inline (white text was written for the dark theme): use the theme's text colour. */
.btn[style*="background:var(--surface"], .btn[style*="background: var(--surface"], .btn[style*="background:transparent"], .btn[style*="background: transparent"] { color: var(--text); }

/* Email settings: the same layout as PMS's SMTP form (cards with a header and footer, rows of fields, notes beside). */
.smtp-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.smtp-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .smtp-layout { grid-template-columns: 1fr; } }
.smtp-card { padding: 0 18px 18px; margin-bottom: 20px; }
.smtp-card .card-head { margin: 0 -18px 14px; padding: 12px 18px; font-weight: 700; background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.smtp-card .card-foot { display: flex; justify-content: space-between; gap: 8px; margin: 18px -18px -18px; padding: 12px 18px; background: var(--surface-2); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.smtp-source { margin-bottom: 12px; }
.smtp-rule { border: 0; border-top: 1px solid var(--border); margin: 14px 0 4px; }
.smtp-row { display: grid; gap: 0 14px; }
.smtp-row-3 { grid-template-columns: 4fr 1fr 1fr; }
.smtp-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .smtp-row-3, .smtp-row-2 { grid-template-columns: 1fr; } }
.smtp-result { margin: -8px 0 20px; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; border: 1px solid var(--border); }
.smtp-result.is-info { background: var(--surface-2); }
.smtp-result.is-ok { background: rgba(34,197,94,0.12); border-color: var(--success); color: var(--success-text); }
.smtp-result.is-bad { background: rgba(239,68,68,0.12); border-color: var(--danger); color: var(--danger-text); }
.smtp-savebar { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.smtp-notes { font-size: 14px; }
.smtp-notes ol { padding-left: 20px; }
.smtp-card fieldset.email-template { margin-top: 12px; }
.smtp-card p.hint { color: var(--text-muted); font-size: 13px; }

/* A list's totals row (Purchasing). */
tr.list-total td { background: var(--surface-2); border-top: 2px solid var(--border); border-bottom: none; }

/* "−" and "+" either side of a quantity or hours box. */
.stepper { display: inline-flex; align-items: stretch; vertical-align: middle; max-width: 100%; }
.stepper.is-wide { display: flex; width: 100%; }
.stepper input[type=number] { flex: 1 1 auto; min-width: 54px; text-align: center; border-radius: 0; margin: 0; -moz-appearance: textfield; appearance: textfield; }
.stepper input[type=number]::-webkit-outer-spin-button, .stepper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn { flex: 0 0 auto; width: 36px; min-height: 36px; padding: 0; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 23px; font-weight: 600; line-height: 1; cursor: pointer; user-select: none; touch-action: manipulation; }
.step-btn:hover { border-color: var(--brand); color: var(--brand); }
.step-btn:active { background: var(--brand); border-color: var(--brand); color: #fff; }
.step-minus { border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.step-plus { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }
.stepper:has(input:disabled) .step-btn { opacity: .45; cursor: not-allowed; pointer-events: none; }
@media (pointer: coarse) { .step-btn { width: 44px; min-height: 44px; font-size: 27px; } .stepper input[type=number] { min-height: 44px; } }

/* RFQ / PO progress strip: payment and cancellation sit beside it, not in it; Cancel is set apart and red. */
.flow-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 2px 0 6px; font-size: 14px; color: var(--text-muted); }
.flow-side .badge { text-transform: none; }
.flow-cancelled { color: var(--danger-text); border-color: var(--danger-text); }
form.flow-cancel { margin-left: 18px; }
.btn.btn-cancel-order { color: var(--danger-text); border-color: var(--danger-text); }
@media (max-width: 640px) { form.flow-cancel { margin-left: 0; } }

/* Status colours: the same word always has the same colour (see statusClass() in bootstrap.php). */
.st-grey   { --stc: var(--text-muted); --stt: var(--text-muted); --stg: rgba(120, 130, 150, .22); }
.st-blue   { --stc: #3b82f6; --stt: var(--blue-text); --stg: rgba(59, 130, 246, .22); }
.st-teal   { --stc: #14b8a6; --stt: var(--teal-text); --stg: rgba(20, 184, 166, .22); }
.st-amber  { --stc: #f59e0b; --stt: var(--amber-text); --stg: rgba(245, 158, 11, .22); }
.st-orange { --stc: #f97316; --stt: var(--orange); --stg: rgba(249, 115, 22, .22); }
.st-green  { --stc: #22c55e; --stt: var(--success-text); --stg: rgba(34, 197, 94, .22); }
.st-red    { --stc: #ef4444; --stt: var(--danger-text); --stg: rgba(239, 68, 68, .22); }
.st-violet { --stc: #8b5cf6; --stt: var(--violet-text); --stg: rgba(139, 92, 246, .22); }
.badge[class*="st-"] { background: color-mix(in srgb, var(--stc) 15%, transparent); color: var(--stt); border-color: color-mix(in srgb, var(--stc) 55%, transparent); font-weight: 600; }
.badge.st-grey { background: var(--surface-2); border-color: var(--border); }

/* An arrowhead into each step of the progress strip (blue once the step before it is done). */
.wf-step:not(:first-child)::before { content: ""; position: absolute; top: 8px; left: calc(50% - 23px); z-index: 0; border-left: 9px solid var(--border); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.wf-step.is-done + .wf-step::before { border-left-color: var(--brand); }

/* "Catalogue" in the menu goes straight to Materials; this row across the catalogue pages reaches the rest. */
.nav-menu > summary[data-mobile-href]::after { content: ""; }
.catalogue-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.catalogue-tabs a { flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: 15px; font-weight: 500; white-space: nowrap; }
.catalogue-tabs a:hover { color: var(--text); text-decoration: none; border-color: var(--brand); }
.catalogue-tabs a.is-here { color: var(--text); border-color: var(--brand); font-weight: 700; }

/* Materials list: the Columns chooser and the one-line details under a description. */
.col-chooser { position: relative; }
.col-chooser > summary { list-style: none; cursor: pointer; }
.col-chooser > summary::-webkit-details-marker { display: none; }
.col-chooser-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 250px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.col-chooser-pop label.check-row { margin: 5px 0; }
.mat-under { color: var(--text-muted); font-size: 13px; margin-top: 2px; }

/* A fold for a block of tiles: closed to start with, the headline numbers stay on the summary line. */
.tiles-fold { margin: 0 0 20px; }
.tiles-fold > summary { cursor: pointer; list-style: none; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; padding: 8px 2px; }
.tiles-fold > summary::-webkit-details-marker { display: none; }
.tiles-fold > summary::before { content: "▸"; color: var(--text-muted); }
.tiles-fold[open] > summary::before { content: "▾"; }
.tiles-fold-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.tiles-fold-gist { font-size: 14px; color: var(--text-muted); }
.tiles-fold[open] .tiles-fold-gist { display: none; }

/* Quotation lines: the markup % box beside the price box. */
.markup-input { width: 84px; }

/* A ticked row in a table with tick boxes. */
tr.is-ticked > td { background: color-mix(in srgb, var(--brand) 10%, transparent); }

/* The package tiles follow each other in a row and wrap on, each only as wide as its content. */
.tiles-fold .grid { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: flex-start; }
.tiles-fold .grid .card { width: fit-content; max-width: 100%; }
.tiles-fold .grid .card .metric { white-space: nowrap; }

/* A package split into its parts: a bar down the side of its title and parts, so what follows is clearly outside it. */
.scope-table tr.split-start > td:first-child,
.scope-table tr.split-part > td:first-child { box-shadow: inset 4px 0 0 var(--brand); }

/* A table only as wide as its content (the package's lines), up to the width of the page. */
table.fit-table { width: auto; max-width: 100%; }

/* Row spacing (My account): Compact brings table rows and lists closer to save vertical space; Normal is the default. */
html[data-spacing="compact"] th, html[data-spacing="compact"] td { padding-top: 3px; padding-bottom: 3px; }
html[data-spacing="compact"] td { line-height: 1.25; }
html[data-spacing="compact"] .scope-table input, html[data-spacing="compact"] .scope-table select { padding-top: 2px; padding-bottom: 2px; }
html[data-spacing="comfortable"] th, html[data-spacing="comfortable"] td { padding-top: 13px; padding-bottom: 13px; }

/* A quotation line with quantity 0: kept on screen, greyed, and left out of the printout and PDF. */
.scope-table tr.qty-zero > td { color: var(--text-muted); opacity: 0.55; }
.scope-table tr.qty-zero > td input, .scope-table tr.qty-zero > td button { opacity: 1; }
.scope-table tr.qty-zero td:nth-child(3)::after { content: "  qty 0: left out of the printout"; font-size: 12px; font-style: italic; color: var(--text-muted); }

/* Drag and drop: a picture onto a photo box, files onto the Instructions box. */
.file-drop { border: 2px dashed var(--border); border-radius: var(--radius); padding: 16px; display: flex; gap: 10px; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); }
.file-drop.is-dragover, .photo-field.is-dragover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface-2)); }
.photo-field.is-dragover .photo-preview { border-color: var(--brand); }
a.file-link { font-size: 13px; margin-right: 8px; white-space: nowrap; }

/* Drop a picture on a material's photo box in the list or the details popup: it saves at once. */
.photo-drop-empty { display: block; width: 40px; height: 40px; border: 1px dashed var(--border); border-radius: 4px; }
[data-photo-drop].is-dragover { outline: 2px dashed var(--brand); outline-offset: 2px; background: color-mix(in srgb, var(--brand) 10%, transparent); }
[data-photo-drop].is-busy { opacity: .5; }

/* A proceed-or-cancel question (dropping a photo on a material). */
dialog.confirm-dialog { border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; max-width: 360px; background: var(--surface); color: var(--text); }
dialog.confirm-dialog::backdrop { background: rgba(0, 0, 0, .45); }

/* Icon-only action buttons (quotation lines) with a tooltip on hover or keyboard focus: they save a lot of room. */
.icon-btn { background: none; border: 0; padding: 4px 5px; margin: 0; color: var(--brand); cursor: pointer; border-radius: 5px; line-height: 0; position: relative; font: inherit; }
.icon-btn:hover:not([disabled]), .icon-btn:focus-visible { background: var(--surface-2); }
.icon-btn.danger { color: var(--danger-text, #b91c1c); }
.icon-btn[disabled] { color: var(--text-muted); cursor: default; opacity: .45; }
.icon-btn[data-tip]:hover::after, .icon-btn[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: -4px; z-index: 60; pointer-events: none;
  background: #1e293b; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.3; padding: 5px 9px; border-radius: 5px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.icon-btn svg.ic { display: block; }

/* The proceed-or-cancel dialog with its icon. */
.confirm-head { display: flex; align-items: flex-start; gap: 12px; }
.confirm-head p { margin: 2px 0 0; font-weight: 600; line-height: 1.4; }
.confirm-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.confirm-remove .confirm-icon { background: color-mix(in srgb, #dc2626 14%, transparent); color: #dc2626; }
.confirm-photo .confirm-icon { background: color-mix(in srgb, #0d9488 16%, transparent); color: #0d9488; }
.confirm-preview { max-width: 240px; max-height: 180px; border-radius: 6px; border: 1px solid var(--border); display: block; margin: 12px 0 0 54px; }
.confirm-buttons { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }
.confirm-buttons .btn { display: inline-flex; align-items: center; gap: 6px; }
.confirm-remove .confirm-proceed { background: #dc2626; border-color: #dc2626; color: #fff; }

/* Row numbers in lists and item tables: a narrow, muted first column. */
table th.idx, table td.idx { width: 1px; white-space: nowrap; text-align: right; color: var(--text-muted); padding-right: 6px; }

/* Menu: Library and your-name menus. Rules between groups, and the Theme / Delete switches as plain menu rows. */
.nav-menu-rule { height: 1px; background: var(--border); margin: 5px 0; }
.nav-menu-items .nav-delete-toggle { display: block; width: 100%; padding: 7px 16px; border: 0; border-radius: 0; background: none; font-size: inherit; text-align: left; color: var(--text-muted); }
.nav-menu-items .nav-delete-toggle:hover { background: var(--surface-2); color: var(--text); }
.nav-menu-items .nav-delete-toggle span { display: inline; }
html.show-delete .nav-menu-items .nav-delete-toggle[data-delete-toggle] { background: rgba(185,28,28,.12); color: var(--danger-text); }

/* Action menus (Export, More) beside Email and Print on a quotation: a button that opens a short list. */
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; cursor: pointer; display: inline-block; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu-items { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 6px 0; white-space: nowrap; text-align: left; }
.action-menu-items a, .action-menu-items button { display: block; width: 100%; padding: 7px 16px; color: var(--text-muted); background: none; border: 0; border-radius: 0; font: inherit; text-align: left; cursor: pointer; }
.action-menu-items a:hover, .action-menu-items button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.action-menu-items form { margin: 0; }

/* Quotations list: status chips, one search row, Filters / Columns menus, row menu. */
.status-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.status-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 14px; text-decoration: none; }
.status-chip:hover { border-color: var(--brand); text-decoration: none; }
.status-chip.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--surface-2); font-weight: 600; }
.status-chip b { font-size: 14px; }
.status-chip.tile-follow_up b { color: var(--amber-text); } .status-chip.tile-expired b { color: var(--danger-text); }
.status-chip.tile-won b { color: var(--success-text); } .status-chip.tile-lost b { color: var(--slate-text); }
.list-search-wide { max-width: none; }
.action-menu-heading { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 16px 2px; }
.action-menu-items .check-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 16px; font-weight: 400; color: var(--text); cursor: pointer; white-space: nowrap; }
.action-menu-items .check-row input { width: auto; }
.action-menu-items a.is-current { color: var(--text); font-weight: 600; }
.filters-panel { min-width: 230px; }
.action-menu .btn-small { padding: 2px 10px; }
.row-menu .action-menu-items { right: 0; }
/* Sales Orders and Quotations lists: every column is as wide as its content, and one text column (.fill: Project / Title) takes any spare
   room, so a few columns never leave gaps between them. Adding columns widens the table past the page (the .table-scroll box then scrolls);
   only the .fill column wraps. With Project hidden, the Client column takes that job. */
table.fit-list { width: 100%; }
/* Totals of the rows shown (Reviewers and Administrators): a row under the table and a line in words. */
table tfoot.list-totals-row td { border-top: 2px solid var(--border); border-bottom: none; background: var(--surface-2, transparent); font-variant-numeric: tabular-nums; }
.list-totals { margin: 8px 2px 0; font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.list-totals strong { color: var(--text); }
table.fit-list th, table.fit-list td { width: 1%; white-space: nowrap; }
table.fit-list.std-table th.num, table.fit-list.std-table th { white-space: nowrap; }
/* Row action links (Edit · Duplicate · Mark obsolete) stay on one line: the table grows instead. */
table.fit-list.cat-table td.row-actions, table.fit-list.std-table td:last-child, table.fit-list td.row-actions { white-space: nowrap; }   /* headings stay on one line too: the table grows instead */
table.fit-list th.fill, table.fit-list td.fill, table.fit-list th.fill-auto, table.fit-list td.fill-auto, table.fit-list[data-hide~="project"] .fill-fallback { width: auto; white-space: normal; min-width: 32ch; }   /* wraps only past about 32 characters; the table grows instead of squeezing it */
/* Descriptions and project names wrap after 38 characters (.w38 on the text); a table with such a capped column (.cap-fill) is only as wide as its content. */
.w38 { display: inline-block; max-width: 38ch; white-space: normal; vertical-align: top; text-align: left; }
/* Text cells sized to the typical row: --w is the width in characters (set per column by the page); longer values wrap, every word visible. */
.wcap { display: inline-block; max-width: var(--w, 38ch); white-space: normal; overflow-wrap: anywhere; vertical-align: top; text-align: left; }
.table-scroll > table.fit-list.cap-fill { width: max-content; min-width: 0; max-width: none; }
/* In such a table every column takes its natural width: text cells (.wcap / .w38) are capped, the rest never wrap. */
table.fit-list.cap-fill th, table.fit-list.cap-fill td { width: auto; }
/* Sales Orders: the project number under the project name is dropped while it has its own column. */
table.sales-orders-list:not([data-hide~="project_no"]) .proj-hint { display: none; }
table.fit-list th.wrap-auto, table.fit-list td.wrap-auto { width: auto; white-space: normal; min-width: 26ch; max-width: 46ch; }
/* A cell that holds a field keeps the field's own width. */
table.fit-list td:has(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { width: auto; white-space: normal; }
/* Purchasing: Requirement takes the spare room; with it hidden, Project does; with both hidden, Supplier does. */
table.fit-list[data-hide~="requirement"] .fill-b, table.fit-list[data-hide~="requirement"][data-hide~="project"] .fill-c { width: auto; white-space: normal; min-width: 32ch; }
table.sortable tr[data-row-href] { cursor: pointer; }
table.sortable tr[data-row-href]:hover td { background: var(--surface-2); }
table[data-hide~="project"] [data-col="project"], table[data-hide~="date"] [data-col="date"], table[data-hide~="rfq"] [data-col="rfq"],
table[data-hide~="contact"] [data-col="contact"], table[data-hide~="margin"] [data-col="margin"], table[data-hide~="vat"] [data-col="vat"], table[data-hide~="incl"] [data-col="incl"], table[data-hide~="client"] [data-col="client"],
table[data-hide~="squote"] [data-col="squote"], table[data-hide~="requirement"] [data-col="requirement"], table[data-hide~="sent"] [data-col="sent"] { display: none; }
@media (max-width: 760px) { .topnav.nav-open .nav-user { flex-wrap: wrap; gap: 8px 12px; } }
table.sales-orders-list tr[data-row-href] { cursor: pointer; }
table.sales-orders-list tr[data-row-href]:hover td { background: var(--surface-2); }
.filters-panel select, .filters-panel input[type=date] { width: 100%; }

/* Dashboard: needs-attention cards. */
.attn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.attn-card { padding: 14px 16px; }
.attn-card h4 { margin: 0 0 8px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.attn-count { border-radius: 999px; padding: 0 10px; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--text-muted); }
.attn-count.attn-warn { background: var(--amber-bg, #fff4dd); color: var(--amber-text); }
.attn-count.attn-bad { background: rgba(185,28,28,.14); color: var(--danger-text); }
.attn-count.attn-info { background: rgba(37,99,235,.14); color: var(--brand); }
.attn-card ul { list-style: none; margin: 0; padding: 0; }
.attn-card li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; }
.attn-card li:first-child { border-top: 0; }
.attn-card li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.attn-card li span { color: var(--text-muted); white-space: nowrap; }
.attn-card .more { display: inline-block; margin-top: 8px; font-size: 14px; }

/* Menu search box with grouped results. */
.nav-search { position: relative; flex: 0 1 240px; min-width: 140px; margin: 0 12px; }
.nav-search input[type=search][name=q] { width: 100%; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; }
.nav-search input[type=search][name=q]:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.nav-search-results { position: absolute; left: 0; top: calc(100% + 6px); z-index: 80; width: 440px; max-width: 92vw; max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0,0,0,0.3); padding: 4px 0; font-size: 14px; }
.nav-search-results .sr-group { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 14px 2px; display: flex; justify-content: space-between; }
.nav-search-results .sr-group a { font-size: 12px; text-transform: none; letter-spacing: 0; }
.nav-search-results .sr-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 14px; color: var(--text); text-decoration: none; }
.nav-search-results .sr-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 600; }
.nav-search-results .sr-item span:last-child { color: var(--text-muted); white-space: nowrap; }
.nav-search-results .sr-item:hover, .nav-search-results .sr-item.is-active { background: var(--surface-2); text-decoration: none; }
.nav-search-results .sr-empty { padding: 10px 14px; color: var(--text-muted); }
@media (max-width: 760px) { .nav-search { display: none; } .topnav.nav-open .nav-search { display: block; flex: 1 1 100%; margin: 10px 0 0; } .nav-search-results { width: 100%; } }
@media (min-width: 761px) {
  .topnav .nav-links { flex: 0 1 auto; margin-right: 14px; }
  .nav-search { flex: 0 1 200px; margin: 0 12px 0 auto; }
}
/* Laptop widths: search is a magnifier that opens when clicked (or "/" pressed), the theme button is just its icon, so the bar stays on one row. */
@media (min-width: 761px) and (max-width: 1499px) {
  .nav-search { flex: 0 0 40px; min-width: 40px; margin: 0 8px 0 auto; }
  .nav-search input[type=search][name=q] { padding: 6px 0; color: transparent; cursor: pointer; text-indent: -999px;
    background: var(--surface-2) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") center no-repeat; }
  .nav-search input[type=search][name=q]:focus { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 300px; z-index: 90; padding: 6px 12px; text-indent: 0; color: var(--text); cursor: text; background-image: none; background-color: var(--surface); }
  .nav-search input[type=search][name=q]::placeholder { color: transparent; }
  .nav-search input[type=search][name=q]:focus::placeholder { color: var(--text-muted); }
  .nav-search-results { left: auto; right: 0; }
  .nav-theme-toggle span { display: none; }
  .topnav .nav-links { gap: 2px 14px; }
}

/* In lists where a click on a row only highlights it, the number is the way in: underlined so it reads as the thing to click. */
a.row-open { text-decoration: underline; text-underline-offset: 2px; }
table[data-hide~="reference"] [data-col="reference"], table[data-hide~="source"] [data-col="source"], table[data-hide~="count"] [data-col="count"], table[data-hide~="status"] [data-col="status"] { display: none; }

/* Purchasing: clickable supplier / status / payment / project no., what the list is filtered by, and the totals under it. */
a.filter-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--text-muted); }
a.filter-link:hover { color: var(--brand); border-bottom-color: var(--brand); text-decoration: none; }
a.filter-link .badge { cursor: pointer; }
.active-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.reg-totals { display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: flex-end; margin-top: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.reg-totals div { display: flex; flex-direction: column; align-items: flex-end; }
.reg-totals span { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.reg-totals strong { font-size: 17px; }
.reg-totals .is-main strong { font-size: 20px; color: var(--brand); }
table[data-hide~="projno"] [data-col="projno"] { display: none; }


/* The bar that appears when two or more rows are selected: how many, and the total of their money column. */
.selection-pill { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 18px; background: var(--surface); color: var(--text); border: 1px solid var(--brand); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); font-size: 15px; font-weight: 600; }
.selection-pill[hidden] { display: none; }
.selection-pill .sp-bulk { display: inline-flex; align-items: center; gap: 6px; }
.selection-pill .sp-bulk[hidden] { display: none; }
.selection-pill .sp-to { width: auto; min-width: 150px; padding: 4px 8px; margin: 0; font-size: 14px; }
.selection-pill .sp-apply { border: 1px solid var(--brand); background: var(--brand); color: #fff; border-radius: 999px; padding: 4px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.selection-pill .sp-clear { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
@media print { .selection-pill { display: none !important; } }
table[data-hide~="values"] [data-col="values"] { display: none; }

/* Intro text on list pages wraps at a readable width instead of stretching the whole page to fit one long line. */
.content p.hint, .content .muted-intro, .content p.empty { max-width: 90ch; }
/* Packages and Labour: optional columns, hidden while named in the table's data-hide list. */
table[data-hide~="description"] [data-col="description"],
table[data-hide~="total_cost"] [data-col="total_cost"],
table[data-hide~="lead"] [data-col="lead"],
table[data-hide~="markup"] [data-col="markup"],
table[data-hide~="overtime_rate"] [data-col="overtime_rate"],
table[data-hide~="weekend_rate"] [data-col="weekend_rate"],
table[data-hide~="night_rate"] [data-col="night_rate"],
table[data-hide~="holiday_rate"] [data-col="holiday_rate"],
table[data-hide~="travel_rate"] [data-col="travel_rate"],
table[data-hide~="callout_rate"] [data-col="callout_rate"],
table[data-hide~="risk_rate"] [data-col="risk_rate"],
table[data-hide~="min_charge"] [data-col="min_charge"] { display: none; }

/* Notes popup: feedback kept against a job, delivery note or purchase document */
.notes-open .notes-count, .notes-tabs .notes-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; text-align: center; line-height: 18px; }
dialog.notes-dialog { width: min(640px, 94vw); max-height: 88vh; padding: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); }
dialog.notes-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
dialog.notes-dialog header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 6px; }
dialog.notes-dialog h2 { margin: 0; font-size: 18px; }
.notes-close { background: none; border: none; color: var(--text-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.notes-body-wrap { padding: 4px 20px 20px; overflow-y: auto; max-height: calc(88vh - 60px); }
.notes-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.notes-tabs button { background: none; border: none; border-bottom: 3px solid transparent; padding: 8px 12px; font: inherit; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.notes-tabs button.is-on { color: var(--text); border-bottom-color: var(--brand); }
.notes-add textarea { width: 100%; resize: vertical; }
.notes-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.notes-add-row select { width: auto; min-width: 150px; margin: 0; }
.notes-error { color: var(--danger-text); font-size: 14px; }
.notes-list { list-style: none; margin: 14px 0 0; padding: 0; }
.notes-list li { padding: 12px 0; border-top: 1px solid var(--border); }
.notes-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.notes-meta strong { color: var(--text); font-size: 14px; }
.notes-body { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes-actions { margin-top: 4px; display: flex; gap: 12px; }
/* (the shared .link-button style is defined once, further up; here only the Notes pop-up's smaller size) */
.notes-actions .link-button { font-size: 13px; }
.notes-tag-client { border-color: #d97706; color: var(--amber-text); }
.notes-tag-delivery { border-color: var(--danger); color: var(--danger-text); }
.notes-tag-supplier { border-color: var(--brand); }
.notes-edit-text { width: 100%; }
.notes-history .notes-body { white-space: normal; }
@media print { .notes-open, dialog.notes-dialog { display: none !important; } }

/* Notes: what is new to you */
.notes-new { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--danger, #dc2626); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; }
.notes-list li.notes-is-new { background: rgba(249, 115, 22, .10); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.nav-feedback { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; font-size: 15px; }
.nav-feedback:hover { text-decoration: none; border-color: var(--brand); }
.nav-feedback.has-new { border-color: #f97316; }
.nav-feedback .notes-count { background: #f97316; display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; text-align: center; line-height: 18px; }

/* A note count beside a number in a list */
.notes-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; vertical-align: middle; }
.notes-chip:hover { border-color: var(--brand); color: var(--text); }
.notes-chip.has-new { border-color: #f97316; background: rgba(249, 115, 22, .12); color: var(--text); font-weight: 600; }
@media print { .notes-chip { display: none !important; } }

/* Notes: attached photos and files */
.notes-files-row { margin-top: 6px; }
.notes-file-label { cursor: pointer; margin: 0; font-weight: 500; }
.notes-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.notes-thumb img { display: block; width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.notes-thumb:hover img { border-color: var(--brand); }
.notes-pdf { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 14px; overflow-wrap: anywhere; }

/* Quotation page: every section is a numbered card with a colour bar and a tinted header band, so it is clear where
   each one starts and ends. The jump bar follows you down the page and shows which section you are in. */
:root { --sec-1: #2563eb; --sec-2: #0d9488; --sec-3: #7c3aed; --sec-4: #ea580c; --sec-5: #475569; }
.qnum { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-size: 14px; font-weight: 700; }
details.qsec { border-left: 7px solid var(--c); padding: 0; overflow: hidden; scroll-margin-top: 120px; }
details.qsec > summary.scope-summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; list-style: none; background: color-mix(in srgb, var(--c) 11%, var(--surface)); margin-bottom: 0; }
details.qsec > summary.scope-summary::-webkit-details-marker { display: none; }
details.qsec > summary.scope-summary::after { content: "▸"; margin-left: auto; color: var(--c); font-size: 15px; }
details.qsec[open] > summary.scope-summary { border-bottom: 2px solid var(--c); margin-bottom: 0; }
details.qsec[open] > summary.scope-summary::after { content: "▾"; }
details.qsec .scope-title { color: var(--c); }
details.qsec > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.qsec > summary + * { margin-top: 14px; }
details.qsec > :last-child { margin-bottom: 16px; }
details.terms-section.qsec { max-width: none; }
.qsec-head { margin: 26px 0 0; padding: 12px 16px; border: 1px solid var(--border); border-left: 7px solid var(--c); border-bottom: 2px solid var(--c); border-radius: var(--radius) var(--radius) 0 0; background: color-mix(in srgb, var(--c) 11%, var(--surface)); scroll-margin-top: 120px; }
.qsec-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.qsec-head .scope-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c); }
.qsec-head .scope-peek { color: var(--text-muted); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.qsec-head + * table.scope-table, table.scope-table { border-left: 7px solid var(--sec-3); }
.quotation-jumps { position: sticky; top: 0; z-index: 40; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.quotation-jumps a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 7px; color: var(--text-muted); font-weight: 600; text-decoration: none; }
.quotation-jumps a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.quotation-jumps a b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); font-size: 12px; }
.quotation-jumps a.on { background: var(--brand); color: #fff; }
.quotation-jumps a.on b { background: rgba(255, 255, 255, .25); color: #fff; }
@media print { .quotation-jumps { display: none; } }

/* The catalogue lists (Materials, Labour, Packages, Suppliers) share one layout: the same page width (so the tabs and
   titles stay put as you move between them), the same buttons, toolbar and table spacing, # first, actions on the right. */
.content.catalogue-page { width: 1280px; max-width: 100%; }
.btn.btn-tool { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.btn.btn-tool:hover { border-color: var(--brand); text-decoration: none; }
.cat-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
table.cat-table th, table.cat-table td { padding: 9px 11px; }
table.cat-table th.row-actions, table.cat-table td.row-actions { text-align: right; white-space: nowrap; }
table.cat-table th.idx, table.cat-table td.idx { width: 1px; text-align: right; color: var(--text-muted); white-space: nowrap; padding-right: 6px; }

/* The other lists follow the catalogue standard: # first, the row's actions lined up at the right edge, and the smaller
   admin lists (Users, Terms sets, P&G rules, Scenarios, Clients, Projects) share one page width. The three work lists
   (Quotations, Sales Orders, Purchasing) keep fitting their content. */
.content.wide-page { width: 1280px; max-width: 100%; }
table.std-table th:last-child, table.std-table td:last-child { text-align: right; white-space: nowrap; }
table.std-table th.idx, table.std-table td.idx { width: 1px; text-align: right; color: var(--text-muted); white-space: nowrap; padding-right: 6px; }

/* Fitting: a row's actions may wrap onto a second line (each link stays whole) instead of forcing the table wider, which
   squeezed the Description column; a long number heading may wrap; and below laptop widths the cells sit a little closer. */
table.cat-table td.row-actions, table.std-table td:last-child { white-space: normal; min-width: 96px; }
table.cat-table td.row-actions a, table.cat-table td.row-actions form, table.cat-table td.row-actions button,
table.std-table td:last-child a, table.std-table td:last-child form, table.std-table td:last-child button { white-space: nowrap; }
table.std-table th.num, table.cat-table th.num { white-space: normal; }
@media (max-width: 1300px) {
  table.cat-table th, table.cat-table td, table.std-table th, table.std-table td { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 1100px) {
  table.cat-table th, table.cat-table td, table.std-table th, table.std-table td { padding-left: 5px; padding-right: 5px; }
  table.cat-table th, table.std-table th { letter-spacing: 0; }
}

/* Text size (Settings > Company for everyone, My account for each person): the whole page scales like the browser's own
   zoom, so the layout reflows to fit the screen. Printouts are never scaled. */
html[data-text-scale="115"] { zoom: 1.15; }
html[data-text-scale="130"] { zoom: 1.3; }
html[data-text-scale="150"] { zoom: 1.5; }
@media print { html[data-text-scale] { zoom: 1 !important; } }

/* Scaled text leaves the layout less room than the screen has, so the compact (☰) menu comes in at a wider screen: the
   960px point of the normal layout, times the text size. */
@media (max-width: 1105px) {
  html[data-text-scale="115"] .topnav { flex-wrap: wrap; padding: 10px 16px; position: sticky; top: 0; z-index: 60; }
  html[data-text-scale="115"] .nav-toggle { display: inline-flex; margin-left: auto; }
  html[data-text-scale="115"] .nav-links, html[data-text-scale="115"] .nav-user { display: none; width: 100%; margin: 0; }
  html[data-text-scale="115"] .topnav.nav-open .nav-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
  html[data-text-scale="115"] .nav-links a { margin: 0; padding: 11px 4px; font-size: 16px; }
  html[data-text-scale="115"] .topnav.nav-open .nav-user { display: flex; justify-content: space-between; padding: 10px 0 2px; border-top: 1px solid var(--border); }
  html[data-text-scale="115"] .nav-user button { padding: 9px 16px; }
}
@media (max-width: 1250px) {
  html[data-text-scale="130"] .topnav { flex-wrap: wrap; padding: 10px 16px; position: sticky; top: 0; z-index: 60; }
  html[data-text-scale="130"] .nav-toggle { display: inline-flex; margin-left: auto; }
  html[data-text-scale="130"] .nav-links, html[data-text-scale="130"] .nav-user { display: none; width: 100%; margin: 0; }
  html[data-text-scale="130"] .topnav.nav-open .nav-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
  html[data-text-scale="130"] .nav-links a { margin: 0; padding: 11px 4px; font-size: 16px; }
  html[data-text-scale="130"] .topnav.nav-open .nav-user { display: flex; justify-content: space-between; padding: 10px 0 2px; border-top: 1px solid var(--border); }
  html[data-text-scale="130"] .nav-user button { padding: 9px 16px; }
}
@media (max-width: 1440px) {
  html[data-text-scale="150"] .topnav { flex-wrap: wrap; padding: 10px 16px; position: sticky; top: 0; z-index: 60; }
  html[data-text-scale="150"] .nav-toggle { display: inline-flex; margin-left: auto; }
  html[data-text-scale="150"] .nav-links, html[data-text-scale="150"] .nav-user { display: none; width: 100%; margin: 0; }
  html[data-text-scale="150"] .topnav.nav-open .nav-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
  html[data-text-scale="150"] .nav-links a { margin: 0; padding: 11px 4px; font-size: 16px; }
  html[data-text-scale="150"] .topnav.nav-open .nav-user { display: flex; justify-content: space-between; padding: 10px 0 2px; border-top: 1px solid var(--border); }
  html[data-text-scale="150"] .nav-user button { padding: 9px 16px; }
}

/* A page's title and its row of buttons may wrap onto a second line on a narrow screen or at a larger text size. */
.page-header { flex-wrap: wrap; row-gap: 10px; column-gap: 12px; }
.page-header > div:last-child { flex-wrap: wrap; }

/* The quotation's editing table fits the standard page width: the number boxes are no wider than their numbers need,
   which also leaves the Description room to breathe. */
table.scope-table .qty-input { width: 66px !important; }
table.scope-table .markup-input { width: 70px; }
table.scope-table input[data-line-price-input] { width: 84px; }
table.scope-table .lead-input { width: 80px; }
form.code-form input.code-input { width: 6.5em; min-width: 6.5em; }
table.scope-table td:last-child { white-space: normal !important; min-width: 96px; }

/* (The table itself must not clip: overflow:hidden would make it the scroll container, and sticky cells would never move.) */
table[data-pin-list][data-pin-list] { overflow: visible; }
/* Pinned columns: a table with data-pin-list keeps its row number / tick box, its name and the columns the person pinned in view
   while it scrolls sideways (app.js sets .pin-cell and the left offset of each; .pin-edge marks the last one). */
.pin-cell { position: sticky; z-index: 1; background-color: var(--surface); }
thead .pin-cell { z-index: 3; background-color: var(--surface); }
table.bulk-grid thead th.pin-cell { z-index: 4; background-color: var(--surface-2); }
.pin-cell.pin-edge { box-shadow: 6px 0 8px -6px rgba(15, 23, 42, .35); }
tr.row-selected > td.pin-cell { background-color: var(--surface); background-image: linear-gradient(rgba(59,130,246,.22), rgba(59,130,246,.22)); }
table.bulk-grid td.pin-cell.is-changed { background-color: color-mix(in srgb, #facc15 28%, var(--surface)) !important; }
.action-menu-rule { border-top: 1px solid var(--border); margin: 8px 0 2px; }
.pin-section .check-row input:disabled + * , .pin-section .check-row:has(input:disabled) { opacity: .5; }
.pin-menu .action-menu-items { min-width: 250px; }
@media print { .pin-cell { position: static !important; box-shadow: none !important; } }

/* Items: the fold arrow in the section heading (the list of lines folds away; remembered on your account). */
.items-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--c, inherit); cursor: pointer; font-size: 14px; line-height: 1; margin-right: 8px; padding: 5px 8px; }
.items-toggle:hover { background: var(--surface-2); }

/* Sales Orders: optional columns hidden while named in the table's data-hide list. */
table[data-hide~="quotation"] [data-col="quotation"], table[data-hide~="project"] [data-col="project"], table[data-hide~="order_date"] [data-col="order_date"],
table[data-hide~="po_date"] [data-col="po_date"], table[data-hide~="due_date"] [data-col="due_date"], table[data-hide~="completed_on"] [data-col="completed_on"],
table[data-hide~="flags"] [data-col="flags"], table[data-hide~="billed"] [data-col="billed"], table[data-hide~="invoice"] [data-col="invoice"] { display: none; }
/* Date and invoicing flags. */
.flag { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; margin: 1px 2px 1px 0; background: var(--surface); }
.flag-red { background: #fde8e8; border-color: #f3b4b4; color: #b42318; }
.flag-amber { background: #fff6e0; border-color: #f1d58a; color: #7a5600; }
.flag-green { background: #e6f6ec; border-color: #a9dcb9; color: #146c3b; }
.flag-grey { background: var(--surface-2); color: var(--text-muted); }
.order-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 10px 0; }
.order-dates .tile { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--surface); }
.order-dates .tile .label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.order-dates .tile strong { display: block; font-size: 16px; margin: 2px 0; }
/* The references under the sales order heading (quotation, client PO, dates, contact): the same tiles. */
.order-refs .tile { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--surface); }
.order-refs .tile .label { display: block; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.order-refs .tile strong { display: block; font-size: 15px; margin: 2px 0; }
.order-refs .tile .hint { display: block; font-size: 12px; }
table.order-items .order-title-row td { background: var(--surface-alt, rgba(37, 99, 235, .08)); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.items-head { cursor: pointer; }
.items-head form, .items-head a, .items-head button:not(.items-toggle) { cursor: auto; }
.items-head:hover { background: color-mix(in srgb, var(--c) 17%, var(--surface)); }
table[data-hide~="po_excl"] [data-col="po_excl"], table[data-hide~="po_vat"] [data-col="po_vat"], table[data-hide~="po_incl"] [data-col="po_incl"] { display: none; }
table[data-hide~="order"] [data-col="order"] { display: none; }