/* RND Civils — local prototype
 * Design tokens and layout
 */
:root {
  --bg:        #F5F3ED;
  --surface:   #FFFFFF;
  --surface-2: #F7F6F1;
  --text:      #1F2528;
  --muted:     #5A6166;
  --primary:   #174A63;
  --primary-2: #1F6585;
  --secondary: #58706A;
  --border:    rgba(31, 37, 40, 0.12);
  --border-strong: rgba(31, 37, 40, 0.22);
  --success:   #2F6E53;
  --warning:   #8A6621;
  --danger:    #A14545;

  --radius:   16px;
  --radius-lg: 20px;
  --radius-sm: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --shadow-sm: 0 1px 2px rgba(31,37,40,0.05);
  --shadow:    0 2px 6px rgba(31,37,40,0.08);

  --font: Inter, system-ui, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
}
button { font-family: inherit; }

/* ========== Layout ========== */
.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 96px;
}
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-header .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; color: var(--text);
}
.brand-mark {
  width: 32px; height: 32px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.header-spacer { flex: 1; }
.header-quote-ref {
  font-size: 13px; color: var(--muted);
  border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 999px;
  background: var(--surface);
  white-space: nowrap;
}
.role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
}
.role-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.role-badge[data-role="Admin"]    .dot { background: var(--primary); }
.role-badge[data-role="Estimator"].dot { background: var(--secondary); }
.role-badge[data-role="Quote Writer"] .dot { background: var(--warning); }
.role-badge[data-role="Viewer"]   .dot { background: var(--muted); }
.role-switch select {
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  height: 36px;
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  padding: 0 12px;
  color: var(--primary);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { min-height: 36px; font-size: 13px; padding: 0 12px; }
.btn-danger {
  background: #fff;
  color: var(--danger);
  border-color: rgba(161,69,69,0.4);
}
.btn-danger:hover { background: #fef3f3; }

/* ========== Cards ========== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.card-lg { border-radius: var(--radius-lg); padding: 20px; }
.card h3 { margin: 0 0 12px; font-size: 16px; }
.card h2 { margin: 0 0 12px; font-size: 20px; }
.card .card-section + .card-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.card .meta { color: var(--muted); font-size: 13px; }

/* ========== Inputs ========== */
label.field { display: block; margin-bottom: 12px; }
label.field.toggle {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 12px; border-radius: 12px;
  cursor: pointer;
}
label.field.toggle input { width: 18px; height: 18px; min-height: 0; }
label.field > .label-text {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 48px;
  box-sizing: border-box;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: var(--primary);
}
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}
.input-row { display: flex; gap: 12px; align-items: stretch; }
.input-row > * { flex: 1; }
.helper { color: var(--muted); font-size: 12px; margin-top: 4px; }
.helper.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ========== Stepper ========== */
.stepper { display: flex; align-items: stretch; gap: 8px; }
.stepper button {
  width: 48px; min-height: 48px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 22px;
  cursor: pointer;
}
.stepper button:hover { background: var(--surface-2); }
.stepper input { text-align: center; flex: 1; min-width: 0; }

/* ========== Dashboard ========== */
.dashboard-toolbar {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dashboard-toolbar .search { flex: 1 1 260px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
}
.chip.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.quote-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .quote-list { grid-template-columns: 1fr 1fr; } }
.quote-card { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.quote-card:hover { border-color: var(--primary); }
.quote-card .row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.quote-card .ref { font-weight: 700; }
.status-pill {
  font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted);
  white-space: nowrap;
}
.status-pill[data-s="Draft"]            { background: #f4f1e8; color: #6c5d3a; }
.status-pill[data-s="Ready for review"] { background: #ecf3f8; color: #2a567a; }
.status-pill[data-s="Issued"]           { background: #e7efe9; color: #2F6E53; }
.status-pill[data-s="Revised"]          { background: #f5ecde; color: #8A6621; }
.status-pill[data-s="Won"]              { background: #dff1e6; color: #1f5b3f; }
.status-pill[data-s="Lost"]             { background: #f4dede; color: #803333; }
.quote-card .desc { color: var(--muted); font-size: 14px; }
.quote-card .meta { display: flex; gap: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.quote-card-actions {
  display: flex; gap: 8px; margin-top: 4px;
  padding-top: 8px; border-top: 1px dashed var(--border);
}
.quote-card-actions .btn { flex: 1; }

/* ========== Builder toolbar ========== */
.builder-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 8px;
  flex-wrap: wrap;
}
.builder-toolbar .builder-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
}
.builder-toolbar .status-select { display: flex; align-items: center; gap: 8px; }
.builder-toolbar .status-select .label-text { font-size: 12px; color: var(--muted); margin: 0; }
.builder-toolbar .status-select select { min-height: 36px; padding: 4px 10px; font-size: 13px; }

.brand { text-decoration: none; color: inherit; }
.brand:hover { opacity: 0.85; }
.brand:focus-visible { outline: 2px solid var(--primary); border-radius: 8px; outline-offset: 4px; }

/* ========== Step nav ========== */
.step-nav {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 0;
  margin-bottom: 12px;
  overflow-x: auto;
}
.step-nav .step {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  white-space: nowrap;
  color: var(--muted);
}
.step-nav .step.is-current {
  background: var(--primary);
  color: #fff; border-color: var(--primary);
}
.step-nav .step.is-done {
  border-color: var(--success);
  color: var(--success);
}
.step-nav .step.is-done::before {
  content: '✓ ';
  font-weight: 700;
}
.step-nav .step:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ========== Footer nav (mobile) ========== */
.footer-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0) + 10px);
  display: flex; gap: 10px;
  z-index: 40;
}
.footer-nav .btn { flex: 1; }
.footer-nav .save-status {
  position: absolute; top: -22px; right: 14px;
  font-size: 12px;
  background: var(--surface);
  padding: 2px 10px; border-radius: 6px; border: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 6px;
}
.footer-nav .save-status::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
}
.footer-nav .save-status.is-saving::before { background: var(--warning); }
.footer-nav .save-status.is-error::before  { background: var(--danger); }
.footer-nav .save-status { color: var(--muted); }
@media (max-width: 480px) {
  .footer-nav { padding-left: 8px; padding-right: 8px; }
  .footer-nav .btn { padding: 0 10px; font-size: 14px; }
  #nav-home { display: none; }
}

/* ========== Searchable checklist ========== */
.checklist .search-row { margin-bottom: 12px; }
.checklist .picker {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  background: var(--surface-2);
}
.checklist .pick {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
}
.checklist .pick:hover { background: var(--surface); }
.checklist .pick.is-selected { background: rgba(23,74,99,0.07); }
.checklist .pick .group-tag {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-right: auto;
  padding-left: 8px;
}
.selected-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.selected-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; gap: 10px; align-items: flex-start;
}
.selected-item .text {
  flex: 1;
  font-size: 14px;
  border: 1px dashed transparent;
  padding: 4px 6px;
  border-radius: 6px;
}
.selected-item .text:focus { outline: none; border-color: var(--primary); background: var(--surface-2); }
.selected-item .actions { display: flex; gap: 6px; }
.selected-item button {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
}
.selected-item button:hover { background: var(--surface-2); }
.add-custom { display: flex; gap: 8px; margin-top: 10px; }
.add-custom input { flex: 1; }

/* ========== Calculator card ========== */
.calc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.calc h4 { margin: 0 0 12px; font-size: 15px; }
.calc .formula {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
}
.calc .total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--border-strong);
  font-weight: 600;
}
.calc .total-row.cost-only { font-weight: 700; color: var(--primary); }

/* ========== Cost mask (role gate) ========== */
[data-cost-only] { display: var(--cost-display, block); }
body[data-can-see-cost="false"] [data-cost-only] { display: none !important; }
body[data-can-see-cost="false"] .cost-hidden-msg { display: block; }
.cost-hidden-msg {
  display: none;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
body[data-can-edit="false"] input,
body[data-can-edit="false"] textarea,
body[data-can-edit="false"] select,
body[data-can-edit="false"] .stepper button {
  pointer-events: none;
  background: var(--surface-2);
}
body[data-can-edit="false"] .editable-disabled-msg { display: block; }
.editable-disabled-msg {
  display: none;
  background: #fff7e6;
  border: 1px solid #f0d28a;
  color: #7a5a1a;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ========== Repeatable item card ========== */
.item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}
.item-card .row-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.item-card .row-header .name { flex: 1; font-weight: 600; }
.item-card .row-header .remove {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer;
}
.add-item-btn {
  width: 100%;
  border: 1px dashed var(--border-strong);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px;
  font-size: 14px;
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
}
.add-item-btn:hover { background: rgba(23,74,99,0.05); }

/* ========== Review screen ========== */
.checklist-progress {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.checklist-progress.is-incomplete { border-left-color: var(--warning); }
.checklist-progress h4 { margin: 0 0 8px; font-size: 14px; }
.checklist-progress ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) { .summary-grid { grid-template-columns: 1fr; } }
.summary-grid h4 { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.summary-grid .kv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.summary-grid .kv b { font-weight: 600; }
.summary-grid .total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; font-weight: 700; }

/* ========== Preview ========== */
.preview-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.preview-tabs .tab {
  flex: 1;
  text-align: center;
  font-size: 13px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.preview-tabs .tab.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

.doc-preview {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.55;
  color: #1d2629;
}
.doc-preview .doc-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 12px; margin-bottom: 20px;
}
.doc-preview .doc-header h1 { color: var(--primary); margin: 0; font-size: 22px; font-family: var(--font); letter-spacing: 0.5px; }
.doc-preview .doc-header .ref { font-family: var(--font); font-size: 12px; color: var(--muted); }
.doc-preview ul { padding-left: 20px; }
.doc-preview h3 { font-family: var(--font); color: var(--primary); margin-top: 18px; }
.doc-preview .supplier-table {
  width: 100%; border-collapse: collapse; margin-top: 10px;
  font-family: var(--font);
}
.doc-preview .supplier-table th, .doc-preview .supplier-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  text-align: left;
}
.doc-preview .supplier-table tfoot td { font-weight: 700; border-top: 2px solid var(--primary); }
.doc-preview .doc-total {
  margin-top: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
}
.doc-preview .doc-footer {
  margin-top: 24px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.internal-preview {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}
.internal-preview h2 { margin-top: 0; color: var(--primary); }
.internal-preview h4 { margin-bottom: 6px; color: var(--secondary); }
.internal-preview .grid {
  display: grid; gap: 8px;
  grid-template-columns: 1fr 1fr;
  font-size: 14px;
}
.internal-preview table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13px; }
.internal-preview th, .internal-preview td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; }

@media print {
  .app-header, .footer-nav, .step-nav, .preview-tabs, .preview-actions, .role-badge, .builder-toolbar { display: none !important; }
  .app { padding: 0; }
  .doc-preview, .internal-preview { border: none; box-shadow: none; padding: 0; }
  body { background: #fff; }
}

/* ========== Toast ========== */
.toast {
  position: fixed; left: 50%; top: 24px;
  transform: translateX(-50%);
  background: var(--text); color: #fff;
  padding: 10px 14px; border-radius: 999px;
  font-size: 13px;
  box-shadow: var(--shadow);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s;
}
.toast.is-shown { opacity: 1; }

/* ========== Misc ========== */
.section-title { font-size: 18px; margin: 8px 0 12px; font-weight: 700; }
.section-sub { color: var(--muted); font-size: 14px; margin-top: -8px; margin-bottom: 14px; }
.muted { color: var(--muted); }
.empty {
  text-align: center;
  color: var(--muted);
  padding: 28px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
}
hr.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.combo {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.combo:hover { background: var(--surface-2); }
.combo .label { font-size: 13px; color: var(--muted); }
.combo .value { font-weight: 600; }
.combo[disabled] { opacity: 0.5; cursor: not-allowed; }

dialog {
  border: none;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  max-width: 92vw;
  width: 480px;
}
dialog::backdrop { background: rgba(20, 26, 30, 0.55); }
.modal {
  background: var(--surface);
  border-radius: 18px;
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;
}
.modal h3 { margin-top: 0; }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.modal .picker-list { max-height: 50vh; overflow-y: auto; }
.modal .pick {
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  border: 1px solid transparent;
}
.modal .pick:hover { background: var(--surface-2); border-color: var(--border); }

/* ========== Production additions: user menu, admin tables ========== */
.user-menu { position: relative; }
.user-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--text);
}
.user-trigger:hover { background: var(--surface-2); }
.user-name { font-weight: 600; }
.user-role {
  font-size: 11px; color: var(--muted); border-left: 1px solid var(--border); padding-left: 8px;
}
.user-drop {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow);
  min-width: 200px; padding: 6px; z-index: 50;
}
.user-drop a {
  display: block; padding: 10px 12px; border-radius: 8px;
  text-decoration: none; color: var(--text); font-size: 14px;
}
.user-drop a:hover { background: var(--surface-2); }
.user-drop hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

.users-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.users-table th, .users-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.users-table th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.users-table .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.temp-pw-display {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: #f0eada; border: 1px solid #c9b97a;
  border-radius: 10px; padding: 12px 14px;
  font-size: 16px; letter-spacing: 0.5px;
  margin: 10px 0;
  user-select: all;
}
.warn-banner {
  background: #fff7e6; border: 1px solid #f0d28a; color: #7a5a1a;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 14px;
}

/* ========== Polish pass v2 ==========
 * Tighter, consistent spacing across header / footer / user menu / forms.
 * No one-off pixels — everything keys off existing tokens.
 */

/* --- App container --- */
.app {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 120px; /* clear the fixed footer nav on mobile */
}
@media (min-width: 720px) { .app { padding-left: 24px; padding-right: 24px; } }

/* --- Header --- */
.app-header {
  padding: 14px 0;
  gap: 14px;
  flex-wrap: wrap;
}
.app-header .brand {
  text-decoration: none;
  padding: 4px 8px 4px 4px;
  border-radius: 10px;
}
.app-header .brand:hover { background: var(--surface-2); }
.header-quote-ref {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .header-quote-ref { max-width: 200px; font-size: 12px; padding: 4px 8px; }
  .user-name { display: none; }
  .user-role { padding-left: 0; border-left: none; }
}

/* --- User menu (tighter, no overlap) --- */
.user-trigger {
  padding: 8px 12px;
  min-height: 36px;
}
.user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-drop { padding: 8px; min-width: 220px; }
.user-drop a {
  display: flex; align-items: center;
  min-height: 44px;
  padding: 8px 12px;
}

/* --- Footer nav --- */
.footer-nav {
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0) + 10px);
  gap: 8px;
}
.footer-nav .save-status {
  top: -26px;
  right: 16px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
}
@media (min-width: 720px) {
  .footer-nav .btn { min-width: 120px; flex: 0 1 auto; }
  .footer-nav { justify-content: flex-end; }
  .footer-nav .save-status { right: 24px; }
}

/* --- Form field spacing --- */
label.field { margin-bottom: 14px; }
label.field > .label-text {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.75;
}
.grid-2 { gap: 14px; }
.grid-3 { gap: 14px; }

/* Login / install card consistency */
.login-card .field,
.install-card .field { margin-bottom: 16px; }
.login-card .btn,
.install-card .btn { margin-top: 4px; }
.login-card { padding: 28px; }
.login-card .brand-row {
  margin-bottom: 22px;
  gap: 12px;
}
.login-card h1 { margin-bottom: 16px; }

/* --- Builder toolbar tidier --- */
.builder-toolbar {
  gap: 10px;
  margin: 6px 0 10px;
}
.builder-toolbar .builder-title {
  flex: 1 1 60%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.builder-toolbar .status-select {
  display: inline-flex; align-items: center;
  gap: 8px;
  margin: 0;
}
.builder-toolbar .status-select .label-text {
  margin: 0; font-size: 12px; opacity: 0.75;
}
.builder-toolbar .status-select select {
  width: auto; min-width: 160px; min-height: 36px; padding: 4px 10px; font-size: 13px;
}
@media (max-width: 520px) {
  .builder-toolbar { gap: 8px; }
  .builder-toolbar .builder-title { flex-basis: 100%; order: 3; }
  .builder-toolbar .status-select select { min-width: 140px; }
}

/* --- Card breathing room --- */
.card-lg { padding: 24px; }
.card-lg h2 { margin-bottom: 16px; }
.card h3 { margin-bottom: 14px; }
.card .section-sub { margin-top: -4px; margin-bottom: 18px; }

/* --- Dashboard --- */
.dashboard-toolbar { margin-bottom: 12px; gap: 10px; }
.quote-list { gap: 14px; }
.quote-card { padding: 14px 16px; gap: 10px; }
.quote-card .row1 { gap: 12px; }
.quote-card .ref { font-size: 15px; }

/* --- Step nav (tabs) wraps nicely on iPad --- */
.step-nav {
  padding: 6px 2px 12px;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}
.step-nav .step {
  padding: 10px 14px;
  font-size: 13px;
  min-height: 40px;
  font-weight: 600;
}

/* --- Tabs (preview) --- */
.preview-tabs { gap: 8px; }
.preview-tabs .tab { padding: 12px; font-size: 13px; min-height: 44px; }

/* --- Admin Data screens --- */
.admin-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.admin-tabs button {
  background: transparent; border: 1px solid transparent;
  padding: 10px 14px; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer;
  min-height: 40px;
}
.admin-tabs button:hover { background: var(--surface-2); color: var(--text); }
.admin-tabs button.is-active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

.admin-section { display: none; }
.admin-section.is-active { display: block; }

.admin-list .client-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.admin-list .client-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.admin-list .client-head strong { flex: 1; font-size: 15px; }
.admin-list .client-head .badge {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--warning);
  background: #fff7e6; border: 1px solid #f0d28a;
  padding: 2px 8px; border-radius: 999px;
}
.admin-list .site-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--surface-2);
}
.admin-list .site-row .site-meta { flex: 1; min-width: 0; }
.admin-list .site-row .site-name { font-weight: 600; font-size: 14px; }
.admin-list .site-row .site-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.admin-list .site-row .miles {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--primary);
  white-space: nowrap;
}
.admin-list .site-row .row-actions { display: flex; gap: 6px; flex-shrink: 0; }

.archived-row { opacity: 0.55; }
.archived-row .site-name::after { content: '  • archived'; font-weight: 400; color: var(--muted); font-size: 12px; }

.wording-row {
  display: flex; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--surface);
}
.wording-row .w-text { flex: 1; font-size: 14px; }
.wording-row .w-meta { font-size: 11px; color: var(--muted); }
.wording-row .row-actions { display: flex; gap: 6px; flex-shrink: 0; }

.rates-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px) { .rates-editor { grid-template-columns: 1fr 1fr; } }
.rate-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 12px; align-items: center;
  padding: 8px 0;
}
.rate-row label { font-size: 14px; color: var(--text); }
.rate-row .rate-help { font-size: 12px; color: var(--muted); margin-top: 2px; display: block; }

.audit-list table { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit-list th, .audit-list td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.audit-list th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.audit-list code { font-size: 12px; }

/* --- Doc preview wrapping on small screens --- */
@media (max-width: 640px) {
  .doc-preview { padding: 20px; }
  .doc-preview .doc-header { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ===========================================================
 * Timesheets module — Patch 006 polish
 * =========================================================== */

.ts-page { display:block; }
.ts-page-head {
  display:flex; gap:16px; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:14px;
}
.ts-page-head h2 { line-height:1.15; }
.ts-page-sub { margin:0; color:var(--muted); font-size:14px; }
.ts-page-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Worker my-list cards */
.ts-my-list { display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px) { .ts-my-list { grid-template-columns:1fr 1fr; } }
.ts-card { display:flex; flex-direction:column; gap:8px; padding:14px 16px; }
.ts-card-row1 { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.ts-card-week { font-weight:700; font-size:15px; }
.ts-card-meta { display:flex; gap:12px; font-size:12px; color:var(--muted); flex-wrap:wrap; }

/* Stat tiles — top of admin pages */
.ts-stats-row {
  display:grid; gap:10px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom:8px;
}
@media (min-width:560px) { .ts-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width:880px) { .ts-stats-row { grid-template-columns: repeat(6, 1fr); } }
.ts-stat-tile {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:12px 14px; text-align:center;
}
.ts-stat-tile.is-danger { border-color:#f0d28a; background:#fff7e6; }
.ts-stat-tile-value { font-size:22px; font-weight:700; color:var(--primary); }
.ts-stat-tile.is-danger .ts-stat-tile-value { color:#8A6621; }
.ts-stat-tile-label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }

/* Summary grid (per-timesheet) */
.ts-summary-grid {
  display:grid; gap:10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width:560px) { .ts-summary-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width:880px) { .ts-summary-grid { grid-template-columns: repeat(4, 1fr); } }
.ts-stat-card {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px;
}
.ts-stat-card.is-hero { background:rgba(23,74,99,0.06); border-color:rgba(23,74,99,0.25); }
.ts-stat-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.ts-stat-value { font-size:18px; font-weight:700; color:var(--text); margin-top:2px; }
.ts-stat-card.is-hero .ts-stat-value { color:var(--primary); }

/* Warnings panel */
.ts-warn-panel {
  background:#fff7e6; border:1px solid #f0d28a; color:#7a5a1a;
  border-radius:12px; padding:12px 14px; font-size:14px; margin:12px 0;
}
.ts-warn-panel ul { margin:6px 0 0 18px; }

/* Day cards */
.ts-day-list { display:flex; flex-direction:column; gap:14px; }
.ts-day-card { padding:16px 18px; }
.ts-day-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px; flex-wrap:wrap;
}
.ts-day-title { margin:0; font-size:17px; }
.ts-day-date { font-size:12px; color:var(--muted); margin-top:2px; }
.ts-day-body { display:none; }  /* shown when worked */
.ts-day-section { margin-top:14px; }
.ts-day-section + .ts-day-section {
  padding-top:14px; border-top:1px dashed var(--border);
}
.ts-day-section-title {
  font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
  font-weight:600; margin-bottom:8px;
}
.ts-toggles {
  display:grid; gap:10px; grid-template-columns: 1fr;
}
@media (min-width:560px) { .ts-toggles { grid-template-columns: repeat(3, 1fr); } }

/* Segmented (yes/no) control */
.ts-segmented {
  display:inline-flex; gap:0;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:10px; padding:3px; min-height:42px;
}
.ts-segmented .seg {
  background:transparent; border:none; padding:0 12px; font-family:inherit;
  font-size:14px; color:var(--text); cursor:pointer; border-radius:8px;
  min-width:48px; min-height:36px; font-weight:600;
}
.ts-segmented .seg.is-active {
  background:var(--primary); color:#fff;
}
.ts-segmented .seg:disabled { opacity:0.55; cursor:not-allowed; }

/* Day summary pills (bottom of each day card) */
.ts-day-summary {
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border);
  display:flex; gap:6px; flex-wrap:wrap;
}
.ts-day-pill {
  display:inline-flex; align-items:center;
  background:var(--surface-2); border:1px solid var(--border);
  padding:4px 10px; border-radius:999px;
  font-size:12px; color:var(--text); font-weight:600;
}

/* Admin detail hero card */
.ts-detail-hero { padding:20px 22px; }
.ts-detail-hero-top {
  display:flex; align-items:flex-start; gap:12px; justify-content:space-between; flex-wrap:wrap;
}
.ts-detail-actions {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;
}

/* Rate snapshot grid */
.ts-rate-grid {
  display:grid; gap:10px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:560px) { .ts-rate-grid { grid-template-columns: repeat(2, 1fr); } }
.ts-rate-tile {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px;
}
.ts-rate-tile.is-hero { background:rgba(23,74,99,0.06); border-color:rgba(23,74,99,0.25); }

/* Admin review — desktop horizontal-scroll table */
.ts-admin-table-wrap {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border); border-radius:12px;
  background:var(--surface);
}
.ts-admin-table { width:100%; min-width:1100px; border-collapse:collapse; font-size:14px; }
.ts-admin-table thead th {
  background:var(--surface-2); color:var(--text);
  font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  padding:10px 12px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border);
}
.ts-admin-table tbody td {
  padding:10px 12px; border-bottom:1px solid var(--border);
  vertical-align:middle; white-space:nowrap;
}
.ts-admin-table tbody tr:last-child td { border-bottom:none; }
.ts-admin-table tbody tr:hover { background:var(--surface-2); }

/* Admin review — mobile cards (hidden on desktop) */
.ts-admin-cards { display:none; flex-direction:column; gap:12px; }
.ts-admin-card { padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.ts-admin-card .ts-card-row1 { font-size:15px; }
.ts-admin-card .ts-card-week { font-size:13px; color:var(--muted); }
.ts-admin-card-grid {
  display:grid; gap:6px 14px; grid-template-columns: repeat(2, 1fr);
  font-size:13px;
}
.ts-admin-card-grid > div { display:flex; align-items:baseline; justify-content:space-between; }
.ts-admin-card-grid span { color:var(--muted); }
.ts-admin-card-warn {
  font-size:12px; color:#8A6621; font-weight:600;
}
.ts-admin-card-edited {
  font-size:12px; color:var(--primary); font-weight:600;
}

@media (max-width:760px) {
  .ts-admin-table-wrap { display:none; }
  .ts-admin-cards { display:flex; }
  .ts-page-head { flex-direction:column; align-items:stretch; }
  .ts-page-actions { width:100%; }
  .ts-page-actions .btn { flex:1; }
}

/* ============================================================
 * PATCH 008 — Stripe-inspired layout correction
 *
 * Reference: attached DESIGN-a5f6d2ec.md (Stripe Design System).
 * Adapted for RND Civils. Not a copy of Stripe branding, copy,
 * logos, or product identity. No Sohne dependency.
 *
 * Focus: shell width, page composition, surface hierarchy,
 * form rhythm. CSS-only — no DOM changes.
 * ============================================================ */

:root {
  /* Surfaces (Stripe mist + white) */
  --bg:            #F8FAFD;
  --surface:       #FFFFFF;
  --surface-2:     #F6F9FC;
  --surface-3:     #ECF0F4;
  --surface-50:    #FAFDFF;

  /* Ink scale */
  --text:          #30313D;
  --text-strong:   #061B31;
  --muted:         #737373;
  --text-soft:     #8A94A6;

  /* Borders */
  --border:        #E3ECF7;
  --border-strong: #D4DEE9;
  --border-focus:  #0570DE;

  /* Stripe violet primary (replaces RND blue per user permission) */
  --primary:       #635BFF;
  --primary-2:     #7232F1;
  --primary-deep:  #533AFD;
  --primary-soft:  rgba(99,91,255,0.10);

  /* Semantic */
  --success:       #00D66F;
  --danger:        #DF1B41;
  --warning:       #FF6118;

  /* Radii — tighter for product surfaces */
  --radius-sm:     6px;
  --radius:        12px;
  --radius-lg:     18px;
  --radius-xl:     24px;
  --radius-full:   999px;

  /* Stripe-style atmospheric shadows */
  --shadow-sm:        0 1px 2px rgba(13,23,56,0.04);
  --shadow:           0 8px 20px rgba(13,23,56,0.10);
  --shadow-elevated:  0 18px 40px rgba(13,23,56,0.12);
  --shadow-floating:  0 28px 60px rgba(13,23,56,0.16);
  --shadow-focus:     0 0 0 3px rgba(5,112,222,0.20);

  /* Typography (Inter / system, NOT Sohne) */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
          'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Source Code Pro',
               Menlo, monospace;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--font); font-size: 16px; line-height: 1.55; }

/* ---- WIDER SHELL — the headline fix -------------------- */
.app {
  max-width: 1280px;          /* dashboards, admin pages */
  margin: 0 auto;
  padding: 0 32px 120px;
}
@media (max-width: 1024px) { .app { padding: 0 24px 120px; } }
@media (max-width: 640px)  { .app { padding: 0 16px 120px; } }

/* ---- App header — Stripe-style sticky nav -------------- */
.app-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 12px 0;
  margin-bottom: 32px;
}
.app-header .brand { color: var(--text-strong); font-weight: 600; }
.brand-mark {
  background: var(--text-strong);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(13,23,56,0.18);
  width: 34px; height: 34px;
  font-size: 13px;
}
.header-quote-ref {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
}

/* ---- Type ramp (Stripe-style ink scale) ---------------- */
h1, h2, h3, h4 { color: var(--text-strong); letter-spacing: var(--tracking-tight); }
h1 { font-size: 32px; font-weight: 600; line-height: 1.15; }
h2 { font-size: 24px; font-weight: 600; line-height: 1.2; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.section-sub, .ts-page-sub { color: var(--muted); font-size: 14px; line-height: 1.5; }
.section-title { font-size: 24px; font-weight: 600; color: var(--text-strong); }
.helper { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* Monospace where useful: quote refs, IDs */
.quote-card .ref,
.ts-card-week,
code, pre { font-family: var(--font-mono); }

/* ---- Buttons — pills with Stripe focus ring ------------ */
.btn {
  height: 44px; min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  background: var(--surface);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, background 0.15s, border-color 0.15s, box-shadow 0.18s;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-strong); }
.btn:active { transform: scale(0.985); }
.btn-primary {
  background: var(--primary-deep);
  color: #fff;
  border-color: var(--primary-deep);
  box-shadow: 0 8px 20px rgba(83,58,253,0.20);
}
.btn-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(83,58,253,0.26);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary-deep);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--primary-soft); }
.btn-sm { height: 36px; min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn-danger {
  background: #fff; color: var(--danger);
  border-color: rgba(223,27,65,0.30); box-shadow: var(--shadow-sm);
}
.btn-danger:hover { background: #FFF1F4; border-color: var(--danger); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---- Cards — Stripe shadow language -------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  margin-bottom: 20px;
}
.card-lg {
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}
@media (max-width: 640px) {
  .card { padding: 18px; }
  .card-lg { padding: 22px; border-radius: var(--radius); }
}
.card h2 { font-size: 22px; font-weight: 600; margin: 0 0 18px; }
.card h3 { font-size: 17px; font-weight: 600; margin: 0 0 14px; }

/* ---- Inputs — Stripe Elements precision ---------------- */
input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="time"], input[type="url"],
textarea, select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  min-height: 44px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
}
textarea { min-height: 96px; }
label.field { margin-bottom: 18px; }
label.field > .label-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--text-strong);
  margin-bottom: 6px;
  opacity: 1;
}
label.field.toggle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

/* ---- Chips & status pills (tinted, Stripe-style) ------- */
.chip {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-strong);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  min-height: 34px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--tracking-normal);
}
.chip:hover { background: var(--surface-2); border-color: var(--text-strong); }
.chip.is-active {
  background: var(--text-strong);
  color: #fff;
  border-color: var(--text-strong);
}
.status-pill {
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  border: 1px solid transparent;
}
.status-pill[data-s="Draft"]                  { background:#EEF1F6; color:#414958; }
.status-pill[data-s="Ready for review"]       { background:#E7EFFB; color:#13418A; }
.status-pill[data-s="Issued"]                 { background:#DEF7E5; color:#0A6F33; }
.status-pill[data-s="Revised"]                { background:#FFF4DA; color:#7A5B0E; }
.status-pill[data-s="Won"]                    { background:#DEF7E5; color:#0A6F33; }
.status-pill[data-s="Lost"]                   { background:#FCE4E8; color:#9A1131; }
.status-pill[data-s="Submitted"]              { background:#E7EFFB; color:#13418A; }
.status-pill[data-s="Under Review"]           { background:#FFF4DA; color:#7A5B0E; }
.status-pill[data-s="Returned for Correction"]{ background:#FCE4E8; color:#9A1131; }
.status-pill[data-s="Completed"]              { background:#DEF7E5; color:#0A6F33; }
.status-pill[data-s="Completed - Edited"]     { background:#E6E4FF; color:#2C249C; }

/* ---- Page heads -------------------------------------- */
.dashboard-toolbar,
.ts-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.dashboard-toolbar .search,
.ts-page-head input[type="search"] { flex: 1 1 280px; }

/* ---- Dashboard cards — proper grid + product feel ----- */
.quote-list { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .quote-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .quote-list { grid-template-columns: 1fr 1fr 1fr; } }
.quote-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  transition: transform 0.12s, box-shadow 0.18s, border-color 0.15s;
}
.quote-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}
.quote-card .ref {
  font-weight: 600; font-size: 14px; letter-spacing: var(--tracking-wide);
  color: var(--text-strong);
}
.quote-card .desc { color: var(--text); font-size: 15px; line-height: 1.45; }
.quote-card .meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); letter-spacing: var(--tracking-wide);
}
.quote-card-actions {
  display: flex; gap: 8px; padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ---- Empty states ------------------------------------ */
.empty {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--muted);
  padding: 48px 24px;
  text-align: center;
  font-size: 15px;
}

/* ---- Tables ------------------------------------------ */
.users-table, .audit-list table,
.ts-admin-table {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  width: 100%;
}
.users-table th, .audit-list table th,
.ts-admin-table thead th {
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 11px; font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.users-table td, .audit-list table td,
.ts-admin-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
}
.users-table tbody tr:hover,
.ts-admin-table tbody tr:hover { background: var(--surface-2); }
.users-table tbody tr:last-child td,
.ts-admin-table tbody tr:last-child td,
.audit-list table tbody tr:last-child td { border-bottom: none; }
.ts-admin-table-wrap {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}
.ts-admin-table-wrap > table { border: none; border-radius: 0; }
.ts-admin-table { min-width: 1100px; }

/* ---- Step nav (builder) ------------------------------ */
.step-nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 6px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  display: flex; gap: 4px; overflow-x: auto;
}
.step-nav .step {
  background: transparent; border: none;
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-weight: 500; font-size: 13px;
  color: var(--muted);
  min-height: 36px; white-space: nowrap;
}
.step-nav .step:hover { background: var(--surface-2); color: var(--text-strong); }
.step-nav .step.is-current {
  background: var(--text-strong); color: #fff;
}
.step-nav .step.is-done { color: var(--success); }
.step-nav .step.is-done::before { content: '✓ '; font-weight: 700; }

/* ---- Builder toolbar --------------------------------- */
.builder-toolbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
  box-shadow: var(--shadow-sm);
}
.builder-toolbar .builder-title { color: var(--text-soft); font-weight: 500; }

/* ---- Footer nav — calmer when shown ------------------ */
.footer-nav {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(13,23,56,0.06);
  padding: 12px max(24px, calc((100vw - 1280px) / 2 + 32px))
           calc(env(safe-area-inset-bottom, 0) + 12px)
           max(24px, calc((100vw - 1280px) / 2 + 32px));
  display: flex; gap: 10px; align-items: center;
}
/* Belt-and-braces: never show when [hidden] attribute is set */
.footer-nav[hidden] { display: none !important; }
.footer-nav .save-status {
  top: -28px; right: 24px;
  font-size: 11px; padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-wide);
}
@media (max-width: 720px) {
  .footer-nav { padding: 10px 16px calc(env(safe-area-inset-bottom, 0) + 10px); }
}

/* ---- User menu (floating panel) ---------------------- */
.user-trigger {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  padding: 6px 14px 6px 12px;
  min-height: 38px;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}
.user-trigger:hover { background: var(--surface-2); border-color: var(--text-strong); }
.user-name { font-weight: 600; color: var(--text-strong); }
.user-role {
  color: var(--muted);
  border-left: 1px solid var(--border);
  padding-left: 10px; font-size: 12px;
  letter-spacing: var(--tracking-wide);
}
.user-drop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: 10px; min-width: 240px;
}
.user-drop a {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-weight: 500; font-size: 14px;
  color: var(--text-strong);
  min-height: 40px;
}
.user-drop a:hover { background: var(--surface-2); color: var(--primary-deep); }

/* ---- Toast + modals ---------------------------------- */
.toast {
  background: var(--text-strong); color: #fff;
  border-radius: var(--radius-full);
  padding: 10px 18px; font-size: 14px;
  box-shadow: var(--shadow-elevated);
}
dialog { border-radius: var(--radius-lg); }
dialog::backdrop { background: rgba(6,27,49,0.45); backdrop-filter: blur(4px); }
.modal {
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-floating);
}
.modal h3 { font-size: 19px; font-weight: 600; }

/* ---- Login card -------------------------------------- */
.login-card, .install-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  padding: 36px;
}
.login-card h1 { font-size: 26px; font-weight: 600; color: var(--text-strong); margin-bottom: 8px; }
.login-card .field { margin-bottom: 18px; }
.login-card .brand-row { gap: 12px; margin-bottom: 20px; }
.login-error, .install-error {
  background: #FFF1F4; border: 1px solid #F9C7D2; color: var(--danger);
  border-radius: var(--radius);
}
.install-success {
  background: #DEF7E5; border: 1px solid #B6EBC8; color: #0A6F33;
  border-radius: var(--radius);
}
.install-locked {
  background: #FFF4DA; border: 1px solid #EAD08C; color: #7A5B0E;
  border-radius: var(--radius);
}

/* ---- Admin Data screens ------------------------------ */
.admin-tabs {
  display: inline-flex; padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border); /* override earlier bottom-border rule */
  gap: 4px; margin-bottom: 24px;
}
.admin-tabs button {
  background: transparent; border: none;
  border-radius: var(--radius-full);
  padding: 10px 18px; min-height: 36px;
  font-weight: 500; font-size: 14px; color: var(--muted);
}
.admin-tabs button:hover { background: var(--surface-2); color: var(--text-strong); }
.admin-tabs button.is-active {
  background: var(--text-strong); color: #fff;
}
.admin-section { padding-top: 4px; }
.admin-list .client-block {
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px;
  border: 1px solid var(--border); background: var(--surface);
}
.admin-list .client-head strong { font-size: 16px; color: var(--text-strong); }
.admin-list .site-row {
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 14px 16px; margin-bottom: 10px;
}
.admin-list .site-row .miles {
  background: var(--primary-soft);
  border: 1px solid rgba(99,91,255,0.20);
  color: var(--primary-deep);
  font-weight: 600; font-family: var(--font-mono);
  padding: 4px 12px;
}
.wording-row { border-radius: var(--radius); padding: 14px 16px; }
.rates-editor { gap: 14px; }
.rate-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.rate-row:last-child { border-bottom: none; }

/* ---- Timesheets module refinements ------------------- */
.ts-stats-row {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 24px;
}
@media (min-width: 700px)  { .ts-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .ts-stats-row { grid-template-columns: repeat(6, 1fr); } }
.ts-stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.ts-stat-tile-value { color: var(--text-strong); font-size: 22px; font-weight: 600; font-family: var(--font-mono); }
.ts-stat-tile-label {
  color: var(--text-soft); font-size: 11px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.ts-stat-tile.is-danger {
  background: #FFF1F4; border-color: #F9C7D2;
}
.ts-stat-tile.is-danger .ts-stat-tile-value { color: var(--danger); }

.ts-summary-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px)  { .ts-summary-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ts-summary-grid { grid-template-columns: repeat(4, 1fr); } }
.ts-stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.ts-stat-card.is-hero {
  background: var(--primary-soft);
  border-color: rgba(99,91,255,0.18);
}
.ts-stat-value { font-size: 19px; font-family: var(--font-mono); color: var(--text-strong); }
.ts-stat-label {
  font-size: 11px; letter-spacing: var(--tracking-wide);
  color: var(--text-soft); text-transform: uppercase;
}

.ts-warn-panel {
  background: #FFF4DA; border: 1px solid #EAD08C; color: #7A5B0E;
  border-radius: var(--radius);
}

.ts-day-card { border-radius: var(--radius); padding: 22px 24px; }
.ts-day-section-title {
  color: var(--text-soft);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.ts-day-pill {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-weight: 600; font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-strong);
}
.ts-segmented {
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  padding: 3px;
  min-height: 40px;
}
.ts-segmented .seg {
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.ts-segmented .seg.is-active {
  background: var(--text-strong); color: #fff;
  box-shadow: 0 2px 6px rgba(13,23,56,0.16);
}

.ts-detail-hero { border-radius: var(--radius-lg); padding: 28px; }
.ts-detail-hero-top h2 {
  font-size: 24px; font-weight: 600; color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
}
.ts-admin-card {
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
  transition: transform 0.12s, box-shadow 0.18s, border-color 0.15s;
}
.ts-admin-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: var(--border-strong);
}
.ts-rate-tile { border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.ts-rate-tile.is-hero { background: var(--primary-soft); border-color: rgba(99,91,255,0.18); }

.ts-my-list { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .ts-my-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .ts-my-list { grid-template-columns: 1fr 1fr 1fr; } }
.ts-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  transition: transform 0.12s, box-shadow 0.18s, border-color 0.15s;
}
.ts-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.ts-card-week { font-weight: 600; font-size: 14px; letter-spacing: var(--tracking-wide); color: var(--text-strong); font-family: var(--font-mono); }

/* ---- Calculator cards (materials) -------------------- */
.calc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.calc h4 { color: var(--text-strong); font-size: 15px; font-weight: 600; }
.calc .formula {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--muted); font-size: 12px;
}
.calc .total-row {
  border-top: 1px dashed var(--border-strong);
}

/* ---- Warn / cost-hidden banners ---------------------- */
.warn-banner {
  background: #FFF4DA; border: 1px solid #EAD08C; color: #7A5B0E;
  border-radius: var(--radius);
}
.editable-disabled-msg {
  background: #FFF4DA; border: 1px solid #EAD08C; color: #7A5B0E;
  border-radius: var(--radius);
}
.cost-hidden-msg {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

/* ---- Misc polish ------------------------------------- */
hr.divider { border-color: var(--border); margin: 24px 0; }
.combo {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 14px 16px; min-height: 56px;
}
.combo .label {
  color: var(--text-soft); font-size: 11px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.combo .value { color: var(--text-strong); font-weight: 600; }

/* ---- Stepper buttons reflow -------------------------- */
.stepper button {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
}
.stepper input { border-radius: var(--radius-sm); }

/* ---- Mobile tweaks ---------------------------------- */
@media (max-width: 640px) {
  h1 { font-size: 26px; }
  h2 { font-size: 21px; }
  .card { padding: 18px; }
  .card-lg { padding: 22px; }
  .step-nav { border-radius: var(--radius); }
  .admin-tabs { border-radius: var(--radius); flex-wrap: wrap; width: 100%; }
  .ts-page-head, .dashboard-toolbar { flex-direction: column; align-items: stretch; }
  .ts-page-actions { width: 100%; }
  .ts-page-actions .btn { flex: 1; }
  .user-drop { right: -8px; min-width: calc(100vw - 32px); }
}

/* End Patch 008 */

/* ============================================================
 * PATCH 009 — RND logo, accessibility colour fixes, dark mode
 *
 * - Replaces placeholder text mark with the supplied SVG logo
 * - Fixes contrast failures on muted text + step-done green
 * - Introduces [data-theme="dark"] token set
 * - Adds a compact sun/moon theme toggle in the header
 *
 * No DOM changes beyond:
 *   - <img class="brand-mark" src="assets/rnd-logo.svg">
 *   - <button id="theme-toggle" class="theme-toggle">…</button>
 * Both wired up in app.html and login.php.
 * ============================================================ */

/* ---- 1. Accessibility contrast fixes (light mode) ------ */

/* --text-soft #8A94A6 on white = 3.32:1 — fails AA for body.
 * Replace with --muted (#737373, 4.5:1) for normal text uses,
 * keep #8A94A6 only for icons / decorative microtext. */
.ts-stat-tile-label,
.ts-stat-label,
.combo .label,
.users-table th,
.audit-list table th,
.ts-admin-table thead th {
  color: var(--muted);
}
/* For very small uppercase microtext, ensure 4.5:1 minimum. */
.label-text,
.helper { color: var(--muted); }

/* Step nav: done step was using --success #00D66F on white = 1.63:1.
 * Use a deeper success-ink instead. */
.step-nav .step.is-done {
  color: #0A6F33;            /* 7.4:1 on white */
  font-weight: 600;
}
.step-nav .step.is-current {
  background: var(--text-strong);
  color: #fff;
}

/* Body link colour — Stripe Elements blue is #0570DE which is fine. */
a { color: var(--primary-deep); }
a:hover { color: var(--primary); }

/* Disabled controls — visibly muted but understandable */
.btn:disabled, button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 0.55; cursor: not-allowed;
}

/* ---- 2. Logo sizing (both light + dark) --------------- */

.brand-mark {
  /* override Patch 008 box-style placeholder */
  width: auto !important;
  height: 38px;
  background: transparent !important;
  border-radius: 6px;
  box-shadow: none !important;
  display: inline-flex;
  padding: 0;
  vertical-align: middle;
}
.app-header .brand { gap: 12px; }
@media (max-width: 520px) {
  .brand-mark { height: 32px; }
}
.login-card .brand-mark, .install-card .brand-mark { height: 48px; }

/* ---- 3. Theme toggle button --------------------------- */

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.18s;
  font-family: inherit;
}
.theme-toggle:hover {
  background: var(--surface-2);
  border-color: var(--text-strong);
  color: var(--primary-deep);
}
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), var(--shadow-sm);
}
.theme-toggle .theme-icon {
  width: 18px; height: 18px;
  pointer-events: none;
}
.theme-toggle .theme-icon-moon { display: inline-block; }
.theme-toggle .theme-icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun  { display: inline-block; }

/* Position the toggle on the login page (no header to host it) */
.theme-toggle.is-fixed {
  position: fixed; top: 16px; right: 16px; z-index: 50;
}

/* Header layout adjustment so the toggle sits left of user menu */
.app-header .header-spacer + .theme-toggle { margin-right: 4px; }

/* ---- 4. Dark mode tokens ------------------------------ */

[data-theme="dark"] {
  --bg:            #0A0F1A;
  --surface:       #131A2A;
  --surface-2:     #1B2336;
  --surface-3:     #232C42;
  --surface-50:    #1B2336;

  --text:          #E6E9F0;
  --text-strong:   #FFFFFF;
  --muted:         #A1A9BC;     /* 4.7:1 on #131A2A */
  --text-soft:     #8993AB;     /* 4.6:1 on #131A2A */

  --border:        #2A3550;     /* visible but quiet on dark navy */
  --border-strong: #3A4666;
  --border-focus:  #6EA8FF;

  --primary:       #8B82FF;     /* bumped lighter so it pops on dark */
  --primary-2:     #A299FF;
  --primary-deep:  #6A5BFF;
  --primary-soft:  rgba(139,130,255,0.16);

  --success:       #3DE08D;
  --danger:        #FF7088;
  --warning:       #FFA257;

  --shadow-sm:        0 1px 2px rgba(0,0,0,0.40);
  --shadow:           0 8px 20px rgba(0,0,0,0.45);
  --shadow-elevated:  0 18px 40px rgba(0,0,0,0.55);
  --shadow-floating:  0 28px 60px rgba(0,0,0,0.60);
  --shadow-focus:     0 0 0 3px rgba(110,168,255,0.30);
}

/* ---- 5. Dark mode surfaces & components --------------- */

[data-theme="dark"] html,
[data-theme="dark"] body { background: var(--bg); color: var(--text); }

[data-theme="dark"] .app-header {
  background: rgba(19,26,42,0.85);
  border-bottom-color: var(--border);
}

/* Logo: dark navy badge on dark navy bg — add a soft ring + sit on
 * a subtly lifted plate so it stays visible. */
[data-theme="dark"] .brand-mark {
  background: rgba(255,255,255,0.04) !important;
  outline: 1px solid rgba(255,255,255,0.08);
  outline-offset: -1px;
  border-radius: 8px;
  padding: 2px 4px;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .section-title { color: var(--text-strong); }

[data-theme="dark"] .card,
[data-theme="dark"] .card-lg {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.30);
}
[data-theme="dark"] .card-lg { box-shadow: 0 8px 20px rgba(0,0,0,0.40); }

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-soft); }
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
}

[data-theme="dark"] .btn {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px rgba(0,0,0,0.30);
}
[data-theme="dark"] .btn:hover {
  background: var(--surface-3);
  border-color: #4D5C7E;
}
[data-theme="dark"] .btn-primary {
  background: var(--primary-deep);
  color: #fff;
  border-color: var(--primary-deep);
  box-shadow: 0 6px 18px rgba(106,91,255,0.36);
}
[data-theme="dark"] .btn-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
}
[data-theme="dark"] .btn-ghost {
  background: transparent;
  color: var(--primary);
  border-color: transparent;
}
[data-theme="dark"] .btn-ghost:hover { background: var(--primary-soft); }
[data-theme="dark"] .btn-danger {
  background: rgba(255,112,136,0.10);
  color: var(--danger);
  border-color: rgba(255,112,136,0.40);
}
[data-theme="dark"] .btn-danger:hover { background: rgba(255,112,136,0.20); }

[data-theme="dark"] .chip {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
[data-theme="dark"] .chip:hover { background: var(--surface-3); }
[data-theme="dark"] .chip.is-active {
  background: var(--text-strong);
  color: var(--bg);
  border-color: var(--text-strong);
}

[data-theme="dark"] .status-pill[data-s="Draft"]                  { background:#2A3146; color:#C8CEDE; }
[data-theme="dark"] .status-pill[data-s="Ready for review"]       { background:#16315B; color:#A9CCFF; }
[data-theme="dark"] .status-pill[data-s="Issued"]                 { background:#103D2A; color:#7AE9B6; }
[data-theme="dark"] .status-pill[data-s="Revised"]                { background:#3F2F12; color:#FFD58A; }
[data-theme="dark"] .status-pill[data-s="Won"]                    { background:#103D2A; color:#7AE9B6; }
[data-theme="dark"] .status-pill[data-s="Lost"]                   { background:#451826; color:#FFB1C0; }
[data-theme="dark"] .status-pill[data-s="Submitted"]              { background:#16315B; color:#A9CCFF; }
[data-theme="dark"] .status-pill[data-s="Under Review"]           { background:#3F2F12; color:#FFD58A; }
[data-theme="dark"] .status-pill[data-s="Returned for Correction"]{ background:#451826; color:#FFB1C0; }
[data-theme="dark"] .status-pill[data-s="Completed"]              { background:#103D2A; color:#7AE9B6; }
[data-theme="dark"] .status-pill[data-s="Completed - Edited"]     { background:#241F58; color:#B1A8FF; }

[data-theme="dark"] .users-table,
[data-theme="dark"] .audit-list table,
[data-theme="dark"] .ts-admin-table,
[data-theme="dark"] .ts-admin-table-wrap {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .users-table th,
[data-theme="dark"] .audit-list table th,
[data-theme="dark"] .ts-admin-table thead th {
  background: var(--surface-2);
  color: var(--text-soft);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .users-table td,
[data-theme="dark"] .audit-list table td,
[data-theme="dark"] .ts-admin-table tbody td {
  color: var(--text);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .users-table tbody tr:hover,
[data-theme="dark"] .ts-admin-table tbody tr:hover { background: var(--surface-2); }

[data-theme="dark"] .step-nav,
[data-theme="dark"] .admin-tabs {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .step-nav .step:hover,
[data-theme="dark"] .admin-tabs button:hover { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .step-nav .step.is-current,
[data-theme="dark"] .admin-tabs button.is-active {
  background: var(--primary-deep);
  color: #fff;
}
[data-theme="dark"] .step-nav .step.is-done {
  color: #7AE9B6;            /* lifted green for dark — 7.5:1 on #131A2A */
}

[data-theme="dark"] .builder-toolbar {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .footer-nav {
  background: rgba(19,26,42,0.92);
  border-top-color: var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.40);
}

[data-theme="dark"] .user-trigger,
[data-theme="dark"] .theme-toggle {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.30);
}
[data-theme="dark"] .user-trigger:hover,
[data-theme="dark"] .theme-toggle:hover {
  background: var(--surface-2);
  border-color: #4D5C7E;
  color: var(--primary);
}
[data-theme="dark"] .user-name { color: var(--text-strong); }
[data-theme="dark"] .user-role {
  color: var(--text-soft);
  border-left-color: var(--border);
}
[data-theme="dark"] .user-drop {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 18px 40px rgba(0,0,0,0.50);
}
[data-theme="dark"] .user-drop a { color: var(--text); }
[data-theme="dark"] .user-drop a:hover { background: var(--surface-2); color: var(--primary); }

[data-theme="dark"] .toast {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  border: 1px solid var(--border-strong);
}
[data-theme="dark"] dialog::backdrop { background: rgba(0,0,0,0.70); }
[data-theme="dark"] .modal {
  background: var(--surface);
  border: 1px solid var(--border);
}

[data-theme="dark"] .login-card,
[data-theme="dark"] .install-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
[data-theme="dark"] .login-card h1 { color: var(--text-strong); }
[data-theme="dark"] .login-error {
  background: rgba(255,112,136,0.10);
  border-color: rgba(255,112,136,0.40);
  color: #FFB1C0;
}
[data-theme="dark"] .install-success {
  background: rgba(122,233,182,0.10);
  border-color: rgba(122,233,182,0.40);
  color: #7AE9B6;
}
[data-theme="dark"] .install-locked {
  background: rgba(255,213,138,0.10);
  border-color: rgba(255,213,138,0.40);
  color: #FFD58A;
}

[data-theme="dark"] .empty {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-soft);
}

[data-theme="dark"] .header-quote-ref {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .quote-card,
[data-theme="dark"] .ts-card,
[data-theme="dark"] .ts-admin-card,
[data-theme="dark"] .admin-list .client-block {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.30);
}
[data-theme="dark"] .quote-card:hover,
[data-theme="dark"] .ts-card:hover,
[data-theme="dark"] .ts-admin-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
[data-theme="dark"] .quote-card .ref,
[data-theme="dark"] .ts-card-week { color: var(--text-strong); }
[data-theme="dark"] .quote-card .desc { color: var(--text); }
[data-theme="dark"] .quote-card .meta { color: var(--text-soft); }
[data-theme="dark"] .quote-card-actions { border-top-color: var(--border); }

[data-theme="dark"] .admin-list .site-row {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-theme="dark"] .admin-list .site-row .miles {
  background: rgba(139,130,255,0.12);
  border-color: rgba(139,130,255,0.30);
  color: #B1A8FF;
}
[data-theme="dark"] .wording-row {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .ts-stat-tile {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .ts-stat-tile-value { color: var(--text-strong); }
[data-theme="dark"] .ts-stat-tile.is-danger {
  background: rgba(255,112,136,0.10);
  border-color: rgba(255,112,136,0.40);
}
[data-theme="dark"] .ts-stat-tile.is-danger .ts-stat-tile-value { color: var(--danger); }

[data-theme="dark"] .ts-stat-card {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-theme="dark"] .ts-stat-card.is-hero {
  background: rgba(139,130,255,0.10);
  border-color: rgba(139,130,255,0.30);
}
[data-theme="dark"] .ts-stat-value { color: var(--text-strong); }
[data-theme="dark"] .ts-warn-panel,
[data-theme="dark"] .warn-banner,
[data-theme="dark"] .editable-disabled-msg {
  background: rgba(255,213,138,0.08);
  border-color: rgba(255,213,138,0.30);
  color: #FFD58A;
}
[data-theme="dark"] .cost-hidden-msg {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-soft);
}
[data-theme="dark"] .ts-day-pill {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
[data-theme="dark"] .ts-segmented {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
[data-theme="dark"] .ts-segmented .seg.is-active {
  background: var(--primary-deep);
  color: #fff;
}

[data-theme="dark"] .calc {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .calc .formula {
  background: var(--surface-2);
  color: var(--text-soft);
}
[data-theme="dark"] .calc .total-row {
  border-top-color: var(--border-strong);
}
[data-theme="dark"] hr.divider { border-color: var(--border); }

[data-theme="dark"] .combo {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
[data-theme="dark"] .combo .label { color: var(--text-soft); }
[data-theme="dark"] .combo .value { color: var(--text-strong); }

[data-theme="dark"] label.field.toggle {
  background: var(--surface-2);
  border-color: var(--border);
}

[data-theme="dark"] .stepper button {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
[data-theme="dark"] .stepper button:hover { background: var(--surface-3); }

/* ---- 6. Smooth theme transition ----------------------- */
html, body, .card, .card-lg, .app-header, .footer-nav,
.btn, input, textarea, select, .user-trigger, .theme-toggle,
.users-table, .audit-list table, .ts-admin-table {
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* End Patch 009 */

/* ============================================================
 * PATCH 010 — Dashboard rhythm + Sort By control
 *
 * Focused fixes:
 *   - Tighter spacing between filter chips and the quote grid.
 *   - Styled Sort By dropdown injected by app.js into the toolbar.
 *   - No regression to Patch 008 (1280 px shell) or Patch 009
 *     (logo, theme toggle, dark mode).
 * ============================================================ */

/* Tighter dashboard rhythm */
#dash-chips {
  margin: 4px 0 12px;        /* was inheriting up to 24px of stacked margin */
}
#dash-list {
  margin-top: 4px;
}
.dashboard-toolbar { margin-bottom: 16px; }   /* was 24px from Patch 008 */
.dashboard-toolbar + #dash-chips { margin-top: 0; }
#dash-chips + #dash-list { margin-top: 8px; }

/* Sort By control — sits at the right of the toolbar */
.dash-sort {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  padding: 4px 6px 4px 14px;
  height: 44px; min-height: 44px;
  box-shadow: var(--shadow-sm);
  margin-left: auto;
  flex: 0 0 auto;
}
.dash-sort-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.dash-sort select {
  border: none;
  background: transparent;
  height: 34px; min-height: 34px;
  padding: 0 28px 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-strong);
  cursor: pointer;
  /* tighter visual width to fit alongside search + button */
  min-width: 0;
}
.dash-sort select:focus {
  outline: none;
  box-shadow: none;
}
.dash-sort:focus-within {
  border-color: var(--text-strong);
  box-shadow: var(--shadow-focus);
}
@media (max-width: 640px) {
  .dash-sort {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .dash-sort select { flex: 1; padding-right: 24px; }
}

/* Dark-mode adaptation */
[data-theme="dark"] .dash-sort {
  background: var(--surface);
  border-color: var(--border-strong);
}
[data-theme="dark"] .dash-sort-label { color: var(--text-soft); }
[data-theme="dark"] .dash-sort select { color: var(--text-strong); }

/* End Patch 010 */


/* ============================================================
   Patch 011 — Detail Totals, Quote Preview Totals and Dark Mode
   Preview Fix.
   - Pin .doc-preview and .internal-preview to print-style colours
     in dark mode so the document text is dark-on-white regardless
     of theme (children no longer inherit the dark-mode --text token).
   - Style the customer-total warning callout on the Review screen.
   - Style the new editable supplier-summary card on the Review screen.
   - Visual hint for "Customer total = £0" rows.
   ============================================================ */

/* --- dark-mode preview readability fix ----------------------- */
[data-theme="dark"] .doc-preview,
[data-theme="dark"] .internal-preview {
  background: #ffffff !important;
  color: #1d2629 !important;
  border-color: #d6dbe1 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.18), 0 8px 24px rgba(15,23,42,0.28);
}
[data-theme="dark"] .doc-preview *,
[data-theme="dark"] .internal-preview * {
  color: inherit !important;
  border-color: #d6dbe1 !important;
}
[data-theme="dark"] .doc-preview .muted,
[data-theme="dark"] .internal-preview .muted {
  color: #555f6a !important;
}
[data-theme="dark"] .doc-preview a,
[data-theme="dark"] .internal-preview a {
  color: #2d6cdf !important;
}
[data-theme="dark"] .doc-preview th,
[data-theme="dark"] .internal-preview th {
  background: #f3f5f8 !important;
  color: #1d2629 !important;
}
[data-theme="dark"] .doc-preview tr:nth-child(even) td,
[data-theme="dark"] .internal-preview tr:nth-child(even) td {
  background: #f9fafb !important;
}
[data-theme="dark"] .doc-preview .doc-total,
[data-theme="dark"] .internal-preview .doc-total {
  background: #f3f5f8 !important;
  color: #1d2629 !important;
  border-color: #d6dbe1 !important;
}

/* --- Review-screen customer-total warning callout ------------ */
.callout {
  display: block;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  line-height: 1.45;
}
.callout-warn {
  border-color: #facc15;
  background: #fffbeb;
  color: #6b4406;
}
.callout-warn .callout-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #6b4406;
}
.callout-warn .callout-body {
  font-size: 13.5px;
  color: #6b4406;
}
.callout-warn .btn {
  margin-top: 8px;
}
.btn.btn-sm {
  padding: 4px 10px;
  font-size: 12.5px;
  height: auto;
  line-height: 1.4;
}
[data-theme="dark"] .callout-warn {
  background: rgba(250, 204, 21, 0.10);
  color: #f8d56c;
  border-color: rgba(250, 204, 21, 0.42);
}
[data-theme="dark"] .callout-warn .callout-title,
[data-theme="dark"] .callout-warn .callout-body {
  color: #f8d56c;
}

/* Highlight a "customer total = £0" row -- subtle, not screaming. */
#review-customer .kv.total.is-zero b {
  color: #b45309;
}
[data-theme="dark"] #review-customer .kv.total.is-zero b {
  color: #f8d56c;
}

/* --- editable supplier-summary card -------------------------- */
.sup-editor {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2, var(--surface));
}
.sup-editor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 14px;
}
.sup-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sup-row label {
  font-size: 12px;
  color: var(--text-muted, var(--muted, #5b6878));
}
.sup-input {
  position: relative;
  display: flex;
  align-items: center;
}
.sup-prefix {
  position: absolute;
  left: 10px;
  font-size: 13px;
  color: var(--text-muted, var(--muted, #5b6878));
  pointer-events: none;
}
.sup-input input {
  width: 100%;
  height: 36px;
  padding: 6px 10px 6px 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.sup-input input:focus {
  outline: 2px solid var(--accent, #635BFF);
  outline-offset: 1px;
}
.sup-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 14px;
}
.sup-foot b {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* --- preview "missing customer price" overlay ---------------- */
.doc-total.doc-total-missing {
  background: #fff7ed;
  color: #92400e;
  border: 1px dashed #f59e0b;
  font-style: italic;
}
[data-theme="dark"] .doc-preview .doc-total.doc-total-missing {
  background: #fff7ed !important;
  color: #92400e !important;
  border-color: #f59e0b !important;
}

/* Make sure print stays clean */
@media print {
  .callout-warn { display: none !important; }
  .sup-editor   { display: none !important; }
}


/* ============================================================
   Patch 012 — Customer pricing card, wording-library picker UX,
   improved customer-quote document layout.
   - Pricing card with headline customer price + VAT + optional
     supplier breakdown table.
   - Reusable wording picker (search, chips, packs, cards, selected
     list, live preview, placeholder fill-in dialog).
   - Customer preview document polished to match the written
     estimate example (header, addr, salutation, RE, intro,
     included/not included/notes, price block, sign-off, footer).
   - All components mobile/iPad friendly (44px tap targets, chips
     scroll horizontally, sticky search where helpful).
   ============================================================ */

/* --- Customer pricing card ---------------------------------- */
.pricing-card {
  margin-top: 20px;
}
.pricing-head {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 110px minmax(220px, 1fr);
  gap: 14px 18px;
  align-items: end;
}
.pricing-grid .field { margin: 0; }
.pricing-grid .kv-readout {
  height: 44px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2, var(--surface));
}
.amount-input {
  position: relative;
  display: flex; align-items: center;
}
.amount-input > span {
  position: absolute; left: 10px;
  color: var(--text-muted, var(--muted, #5b6878));
  font-size: 14px;
  pointer-events: none;
}
.amount-input > input {
  width: 100%; height: 44px;
  padding: 8px 12px 8px 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.amount-input.lg > input { height: 52px; font-size: 18px; font-weight: 600; }
.amount-input > input:focus {
  outline: 2px solid var(--accent, #635BFF);
  outline-offset: 1px;
}
.pricing-totals {
  margin-top: 18px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
}
.pricing-totals .kv {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 6px 0;
}
.pricing-totals .kv.total b {
  font-size: 16px;
}

/* --- Pricing breakdown table ------------------------------- */
.pricing-breakdown { margin-top: 18px; }
.toggle-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--surface-2, var(--surface));
  margin-bottom: 10px;
  cursor: pointer;
}
.toggle-row input { width: 18px; height: 18px; }
.bd-table-wrap { overflow-x: auto; }
.bd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.bd-table th, .bd-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: left;
}
.bd-table th { font-size: 12px; color: var(--text-muted, var(--muted, #5b6878)); font-weight: 600; }
.bd-table td.ta-right, .bd-table th.ta-right { text-align: right; }
.bd-table .inp-label,
.bd-table .inp-note {
  width: 100%; height: 36px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}
.bd-table .inp-label:focus, .bd-table .inp-note:focus {
  border-color: var(--border); background: var(--surface);
  outline: 2px solid var(--accent, #635BFF); outline-offset: 0;
}
.bd-table .amount-input { width: 130px; margin-left: auto; }
.bd-table .amount-input > input { height: 36px; padding: 4px 8px 4px 22px; }
.bd-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 13.5px;
}
.callout-info {
  background: #eef4ff; color: #1d3a82; border-color: #b9cdfb;
  font-size: 13px; padding: 10px 12px; border-radius: 8px; border: 1px solid;
}
[data-theme="dark"] .callout-info {
  background: rgba(99, 102, 241, 0.12); color: #cdd6ff; border-color: rgba(99,102,241,0.45);
}

.checkbox-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
}
.checkbox-row input { width: 18px; height: 18px; }

/* --- Wording picker ---------------------------------------- */
.wp-search-row { margin: 4px 0 12px; position: sticky; top: 0; z-index: 1; background: var(--surface); padding-top: 4px; }
.wp-search-row input {
  width: 100%; height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2, var(--surface));
  color: var(--text);
  font-size: 15px;
}
.wp-search-row input:focus {
  outline: 2px solid var(--accent, #635BFF); outline-offset: 1px;
  background: var(--surface);
}

.wp-chips {
  display: flex; gap: 6px; padding: 4px 0 10px;
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: thin;
}
.wp-chip {
  flex: 0 0 auto;
  height: 36px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wp-chip.is-active {
  background: var(--accent, #635BFF); color: #fff; border-color: var(--accent, #635BFF);
}

.wp-packs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 4px 0 12px; padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-2, var(--surface));
}
.wp-packs-label {
  font-size: 12.5px; color: var(--text-muted, var(--muted, #5b6878));
  font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
}
.wp-pack {
  height: 36px; padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  cursor: pointer;
}
.wp-pack:hover { border-color: var(--accent, #635BFF); }

.wp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}
.wp-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  min-height: 80px;
  transition: border-color 0.12s, background 0.12s;
}
.wp-card:hover { border-color: var(--accent, #635BFF); }
.wp-card.is-selected {
  border-color: var(--accent, #635BFF);
  background: color-mix(in srgb, var(--accent, #635BFF) 8%, var(--surface));
}
.wp-card.is-passive { cursor: default; }
.wp-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.wp-code {
  display: inline-block; min-width: 28px; padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--text-muted, var(--muted, #5b6878));
}
.wp-group {
  font-size: 11.5px;
  color: var(--text-muted, var(--muted, #5b6878));
  text-transform: uppercase; letter-spacing: 0.04em;
}
.wp-fillchip {
  font-size: 11px; padding: 2px 8px;
  border-radius: 999px;
  background: #fffbeb; color: #92400e; border: 1px solid #facc15;
}
[data-theme="dark"] .wp-fillchip {
  background: rgba(250, 204, 21, 0.14); color: #f8d56c; border-color: rgba(250, 204, 21, 0.45);
}
.wp-card-text {
  font-size: 14px; line-height: 1.45;
  color: var(--text);
}
.wp-card-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: auto;
}
.wp-add-hint {
  font-size: 11.5px; color: var(--text-muted, var(--muted, #5b6878));
  text-transform: uppercase; letter-spacing: 0.06em;
}
.wp-card.is-selected .wp-add-hint { color: var(--accent, #635BFF); font-weight: 600; }

.wp-divider {
  position: relative; height: 1px; background: var(--border);
  margin: 18px 0 12px;
}
.wp-divider span {
  position: absolute; top: -10px; left: 0;
  background: var(--surface); padding: 0 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-muted, var(--muted, #5b6878));
  text-transform: uppercase; letter-spacing: 0.05em;
}

.wp-selected { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.wp-sel {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.wp-sel-text {
  flex: 1;
  min-height: 24px;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: 14px; line-height: 1.45;
}
.wp-sel-text[contenteditable="true"]:focus {
  outline: 2px solid var(--accent, #635BFF); outline-offset: 0;
  background: var(--surface-2, var(--surface));
}
.wp-sel-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.wp-sel-actions button {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}
.wp-sel-actions button:hover { border-color: var(--accent, #635BFF); }

.wp-custom-row {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 16px;
}
.wp-custom-row input {
  flex: 1; height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}

.wp-preview {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-2, var(--surface));
}
.wp-preview-head {
  font-size: 12.5px; font-weight: 600;
  color: var(--text-muted, var(--muted, #5b6878));
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.wp-preview ul { padding-left: 20px; }
.wp-preview li { font-size: 14px; line-height: 1.5; }

/* --- Placeholder fill-in modal ----------------------------- */
.wp-fill-dialog {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 14px;
}
.wp-fill-card {
  background: var(--surface);
  color: var(--text);
  border-radius: 16px;
  padding: 20px;
  max-width: 520px; width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.wp-fill-card h4 { margin: 0 0 8px; }
.wp-fill-source {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  font-size: 14px; line-height: 1.45;
  margin-bottom: 14px;
}
.wp-fill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.wp-fill-grid .field { margin: 0; }
.wp-fill-preview {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2, var(--surface));
  margin-bottom: 14px;
}
.wp-fill-preview-text { font-size: 14px; line-height: 1.5; margin-top: 4px; }
.wp-fill-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}

/* --- Description-step library helper ----------------------- */
.desc-lib {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2, var(--surface));
}
.desc-lib-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.desc-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.desc-cards .wp-card { min-height: 96px; }

/* --- Customer preview document polish ---------------------- */
.doc-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap;
  border-bottom: 2px solid #061B31;
  padding-bottom: 14px; margin-bottom: 16px;
}
.doc-brand h1 { margin: 0; font-size: 22px; }
.doc-brand-sub { font-size: 13px; }
.doc-meta { font-size: 13px; text-align: right; }
.doc-meta > div { margin-bottom: 2px; }
.doc-addr { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; }
.doc-dear { margin: 12px 0 6px; font-size: 14px; }
.doc-re { margin: 6px 0 12px; font-size: 14px; }
.doc-intro { margin: 6px 0 16px; font-size: 14px; line-height: 1.5; }
.doc-close { margin: 18px 0 4px; font-size: 14px; }
.doc-signoff { margin: 4px 0 24px; font-size: 14px; }
.doc-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #d6dbe1);
  font-size: 12.5px;
  text-align: center;
}
.doc-price-block {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #061B31;
  border-radius: 8px;
  background: #f7f9fb;
}
.doc-price-line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 16px; font-weight: 600;
  padding: 4px 0;
}
.doc-price-line.muted { font-weight: 400; font-size: 14px; }
.doc-price-line.total { border-top: 1px dashed #061B31; margin-top: 8px; padding-top: 10px; font-size: 17px; }
.doc-price-missing {
  background: #fff7ed;
  border-color: #f59e0b;
  color: #92400e;
  font-style: italic;
}
[data-theme="dark"] .doc-preview .doc-price-block {
  background: #f7f9fb !important;
  color: #1d2629 !important;
  border-color: #061B31 !important;
}
[data-theme="dark"] .doc-preview .doc-price-missing {
  background: #fff7ed !important;
  color: #92400e !important;
  border-color: #f59e0b !important;
}

/* --- Mobile/tablet tweaks ---------------------------------- */
@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .bd-table .amount-input { width: 110px; }
  .wp-cards, .desc-cards { grid-template-columns: 1fr; }
  .wp-fill-grid { grid-template-columns: 1fr; }
  .doc-meta { text-align: left; }
}

/* Hide editor chrome from print previews */
@media print {
  .pricing-card, .desc-lib, .wp-packs, .wp-chips, .wp-search-row,
  .wp-cards, .wp-custom-row, .wp-preview, .wp-divider, .wp-selected,
  .pricing-totals, .toggle-row, .bd-table-wrap, .bd-foot,
  .callout, .pricing-breakdown { display: none !important; }
  .doc-preview .doc-price-block { background: #fff !important; }
}