/* ============================================================
   Waste Busters CRM — Dark theme, red brand (#a9342a)
   ============================================================ */

:root {
  --primary:       #a9342a;
  --primary-dark:  #8a2a22;
  --primary-glow:  rgba(169,52,42,0.18);
  /* Metallic finishes override this with a gradient. Defaults to the
     flat colour so every plain hex keeps behaving exactly as before. */
  --primary-sheen: var(--primary);
  /* Text drawn on top of the brand colour. White suits the stock red and
     every dark brand colour, so it is the default; services/branding.js
     overrides it with a near-black for pale colours (golds, creams) where
     white text is unreadable. Never hardcode #fff on a brand-coloured
     surface. That is what made every save button on a gold-branded
     account read at 2:1. */
  --on-primary:    #fff;
  --bg:            #111111;
  --card:          #1c1c1c;
  --card-hover:    #242424;
  --text:          #f0f0ee;
  --muted:         #888888;
  --border:        #2d2d2d;
  --danger:        #e05252;
  --danger-bg:     rgba(224,82,82,0.12);
  --amber:         #e09500;
  --amber-bg:      rgba(224,149,0,0.13);
  --blue:          #5a9fd4;
  --blue-bg:       rgba(90,159,212,0.12);
  --purple:        #a07ad4;
  --purple-bg:     rgba(160,122,212,0.12);
  --success:       #4ade80;
  --success-bg:    rgba(74,222,128,0.10);
  --radius:        10px;
  --shadow:        0 1px 6px rgba(0,0,0,.5);
}

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

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

a { color: #d46a62; text-decoration: none; }
a:hover { color: #e08880; text-decoration: underline; }

/* ---- Top bar ---- */
.topbar {
  background: #111;
  border-bottom: 2px solid var(--primary);
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-logo {
  height: 32px;
  width: auto;
  display: block;
}
.topbar-title { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: .01em; }
.topbar-user  { font-size: 0.82rem; color: var(--muted); }

/* ---- Bottom nav (mobile) ---- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #1a1a1a;
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px 6px;
  font-size: 0.7rem;
  color: var(--muted);
  text-decoration: none;
  gap: 2px;
}
.bottom-nav a:hover { text-decoration: none; }
.bottom-nav a.active { color: var(--primary); }
.bottom-nav a svg    { width: 22px; height: 22px; }
.bottom-nav .nav-new {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  margin-top: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(169,52,42,.5);
  flex-direction: column;
  font-size: 0.65rem;
  gap: 0;
}

/* ---- Main content ---- */
.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px;
}

/* ---- Page title ---- */
.page-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

/* ---- Cards ---- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  border: 1px solid var(--border);
}
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background .12s, border-color .12s;
}
.card-link:hover {
  background: var(--card-hover);
  border-color: #3a3a3a;
  text-decoration: none;
  color: inherit;
}
.card-title  { font-weight: 600; font-size: 1rem; margin-bottom: 2px; color: var(--text); }
.card-meta   { font-size: 0.85rem; color: var(--muted); }
.card-amount { font-weight: 700; color: var(--primary); font-size: 1rem; }

/* ---- Collapsible sections ----
   Used for the quote, job details and the can't-take checklist so the page
   stays short once each stage is done, but every section can be reopened. */
details.collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
}
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary::after {
  content: '⌄';
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  flex: none;
  transition: transform .15s;
}
details.collapsible[open] > summary::after { transform: rotate(180deg); }
details.collapsible[open] > summary { margin-bottom: 10px; }
.summary-hint {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--muted);
  margin-left: auto;
  padding-right: 8px;
  text-align: right;
}

/* ---- Section headers ---- */
.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 20px 0 8px;
}

/* ---- Status badges ---- */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}
.badge-enquiry  { background: #252525; color: #aaa; }
.badge-quoted   { background: var(--blue-bg);   color: var(--blue);   }
.badge-quote_accepted { background: var(--success-bg); color: var(--success); }
.badge-booked   { background: var(--amber-bg);  color: var(--amber);  }
.badge-done     { background: var(--purple-bg); color: var(--purple); }
.badge-paid     { background: var(--success-bg); color: var(--success); }
.badge-closed   { background: #1a1a1a; color: #555; }
.badge-repeat   { background: var(--amber-bg); color: var(--amber); }
.badge-household    { background: #252525; color: #aaa; }
.badge-landlord     { background: var(--blue-bg);   color: var(--blue);   }
.badge-builder      { background: var(--amber-bg);  color: var(--amber);  }
.badge-letting_agent { background: var(--purple-bg); color: var(--purple); }
.badge-business     { background: var(--primary-glow); color: #d46a62; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-align: center;
  text-decoration: none;
  transition: background .15s, opacity .15s;
  min-height: 48px;
  line-height: 1.3;
}
.btn:active { opacity: .8; }
.btn-primary  { background: var(--primary-sheen); color: var(--on-primary); }
/* A gradient cannot be transitioned to a flat colour, so the hover state
   dims the whole button instead. Works for both finishes. */
.btn-primary:hover { filter: brightness(0.88); text-decoration: none; color: var(--on-primary); }
.btn-primary:active { filter: brightness(0.8); }
.btn-secondary {
  background: #252525;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: #2d2d2d; text-decoration: none; color: var(--text); }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: .85; text-decoration: none; }
/* WhatsApp's own green, so the button is recognised before it is read.
   Dark text on it rather than the white WhatsApp themselves use: white on
   this green is about a 2:1 contrast ratio, which is genuinely hard to
   read on a phone outdoors, and this is a button we want tapped. The
   green is what carries the recognition; the label just has to be legible. */
.btn-whatsapp { background: #25d366; color: #0a2e17; font-weight: 600; }
.btn-whatsapp:hover { filter: brightness(0.92); text-decoration: none; color: #0a2e17; }
.btn-whatsapp:active { filter: brightness(0.85); }
.btn-block   { display: block; width: 100%; }
.btn-sm      { padding: 8px 14px; font-size: 0.875rem; min-height: 38px; }

/* ---- Big advance button ---- */
.advance-btn-wrap { margin: 16px 0; }

/* ---- Forms ---- */
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: #252525;
  color: var(--text);
  min-height: 48px;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #555; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
/* Keep select options visible on dark */
.form-group select option { background: #252525; color: var(--text); }
.form-group textarea { min-height: 90px; resize: vertical; }
.form-hint { font-size: 0.78rem; color: var(--muted); margin-top: 3px; line-height: 1.6; }

/* The [name] style fill-ins in message templates. Set apart from the
   sentence around them so it's obvious they're something the app swaps
   out, rather than words to read. */
.tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--primary);
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Submitted-form buttons: visibly inert while the server works */
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: default; pointer-events: none; }

/* Source buttons (large tappable radio) */
.source-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.source-btn {
  display: block;
  text-align: center;
  padding: 10px 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: #252525;
  color: var(--muted);
  transition: all .15s;
}
.source-btn input { display: none; }
.source-btn:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-glow);
  color: #e08880;
}

/* ---- EWC waste code picker ---- */
.ewc-picker { margin-bottom: 14px; }
.ewc-group { margin-bottom: 10px; }
.ewc-group-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.ewc-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #252525;
  margin-bottom: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all .15s;
}
.ewc-option input { margin-top: 2px; flex-shrink: 0; }
.ewc-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-glow);
  color: #e08880;
}

/* ---- Alert / flash ---- */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.alert-success {
  background: var(--success-bg);
  color: var(--success);
  border-left-color: var(--success);
}
.alert-error {
  background: var(--danger-bg);
  color: var(--danger);
  border-left-color: var(--danger);
}
.alert-warning {
  background: var(--amber-bg);
  color: var(--amber);
  border-left-color: var(--amber);
}

/* ---- Billing banner ----
   Sits below the topbar on every page (see partials/topbar.ejs), never a
   dismissible card, because the whole point is that it keeps showing up
   until the underlying thing is actually fixed. Severity climbs with how
   close the business is to losing its data, not just its write access:
   trialing is informational, past_due is a warning, read_only is the one
   that means something is about to be deleted. */
.billing-banner {
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
}
.billing-banner a {
  margin-left: 8px;
  font-weight: 700;
  text-decoration: underline;
  color: inherit;
}
.billing-banner-trialing  { background: var(--blue-bg);   color: var(--blue);  }
.billing-banner-past_due  { background: var(--amber-bg);  color: var(--amber); }
.billing-banner-read_only,
.billing-banner-none      { background: var(--danger-bg); color: var(--danger); }

/* ---- Stats row ---- */
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  text-align: center;
  border: 1px solid var(--border);
}
/* The money and job tiles are links now, so they open the jobs behind the
   number. Anchors bring the global link colour and an underline on hover
   with them, which would repaint the label and put a line under it. The
   card keeps its own look; only the border says it can be pressed. */
a.stat-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease;
}
a.stat-card:hover,
a.stat-card:focus-visible {
  border-color: var(--primary);
  color: inherit;
  text-decoration: none;
}
.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }

.stats-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.stats-row-3 .stat-card { padding: 10px 6px; }
.stats-row-3 .stat-value { font-size: 1.25rem; }
.stats-row-3 .stat-label { font-size: 0.7rem; }

@media (min-width: 480px) {
  .stats-row-3 .stat-value { font-size: 1.5rem; }
  .stats-row-3 .stat-label { font-size: 0.75rem; }
}

/* ---- Lead sources scoreboard ---- */
.lead-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.lead-source-row:last-child { border-bottom: none; }
.lead-source-rank {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card-hover);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lead-source-row:first-child .lead-source-rank {
  background: var(--primary);
  color: var(--on-primary);
}
.lead-source-main { flex: 1; min-width: 0; }
.lead-source-name {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.lead-source-count { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.lead-source-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--card-hover);
  overflow: hidden;
}
.lead-source-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
}
.lead-source-value {
  flex-shrink: 0;
  text-align: right;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 64px;
}
.lead-source-value strong { color: var(--text); font-size: 0.85rem; display: block; }

/* ---- Photos grid ---- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #252525;
}
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-del {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px; height: 24px;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Review copy box ---- */
.copy-box {
  background: #252525;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 0.9rem;
  word-break: break-word;
  margin: 8px 0;
  white-space: pre-wrap;
  color: var(--text);
}

/* ---- Pipeline ---- */
.pipeline-section { margin-bottom: 24px; }
.pipeline-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pipeline-count {
  background: #252525;
  color: var(--muted);
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 1px 8px;
}

/* ---- Field list (job detail) ---- */
.field-list { display: grid; gap: 0; }
.field-row {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  font-size: 0.9rem;
}
.field-row:last-child { border-bottom: none; }
.field-key   { color: var(--muted); min-width: 130px; flex-shrink: 0; }
.field-value { font-weight: 500; color: var(--text); flex: 1; }

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: 0.95rem;
}

/* ---- Search ---- */
.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.search-bar input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  min-height: 48px;
  background: #252525;
  color: var(--text);
}
.search-bar input::placeholder { color: #555; }
.search-bar button {
  padding: 12px 20px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}
.search-bar button:hover { background: var(--primary-dark); }

/* ---- WTN section ---- */
.wtn-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

/* ---- Login ---- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  padding: 24px;
}
.login-card {
  background: #1c1c1c;
  border: 1px solid #2d2d2d;
  border-radius: 16px;
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.login-card-logo {
  display: block;
  margin: 0 auto 12px;
  height: 80px;
  width: auto;
}
.login-logo {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  text-align: center;
  margin-bottom: 4px;
}
.login-sub {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.invite-note {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  margin-top: 16px;
  line-height: 1.5;
}

/* ---- Expand/collapse ---- */
details summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: #d46a62;
  font-weight: 600;
  padding: 8px 0;
  list-style: none;
}
details summary::before { content: '+ '; }
details[open] summary::before { content: '- '; }

/* ---- Divider ---- */
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ---- Modal overlay ---- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-sheet {
  background: #1c1c1c;
  border: 1px solid #333;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 24px 20px 32px;
  width: 100%;
  max-width: 680px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text);
}
.modal-close {
  float: right;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--muted);
  margin-top: -4px;
}
.modal-close:hover { color: var(--text); }

/* ---- WTN Register ---- */
.container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.filter-chip {
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #252525;
  color: var(--muted);
  border: 1px solid var(--border);
  text-decoration: none;
  white-space: nowrap;
}
.filter-chip:hover { background: #2d2d2d; text-decoration: none; color: var(--text); }
.filter-chip.active { background: var(--primary-glow); color: #e08880; border-color: var(--primary); }

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.filter-form .form-group { margin-bottom: 0; flex: 1 1 140px; }
.filter-form .btn { flex: 0 0 auto; }

.table-responsive {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.table th, .table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table th {
  background: #1a1a1a;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}
.table tbody tr:hover { background: var(--card-hover); }
.table tbody tr:last-child td { border-bottom: none; }
.table .actions-cell { display: flex; gap: 6px; }

.badge-signed   { background: var(--success-bg); color: var(--success); }
.badge-unsigned { background: #252525; color: var(--muted); }

.signed-form { display: inline; }
.signed-toggle {
  border: none;
  cursor: pointer;
  font: inherit;
}

/* ---- Desktop tweaks ---- */
@media (min-width: 640px) {
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }

  .topbar { padding: 12px 24px; }

  .top-nav-links {
    display: flex !important;
    gap: 4px;
  }
  .top-nav-links a {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, color .15s;
  }
  .top-nav-links a:hover { background: rgba(255,255,255,.06); color: var(--text); }
  .top-nav-links a.active { background: var(--primary-glow); color: #e08880; }

  .container { padding: 24px; }
  .container-wide { padding: 24px; }
  .stats-row { grid-template-columns: repeat(4, 1fr); }
}

.top-nav-links { display: none; }

/* ---- Complete Job wizard ---- */
.wizard-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.wizard-tab {
  display: block;
  text-align: center;
  padding: 10px 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  background: #1c1c1c;
  text-decoration: none;
}
.wizard-tab.active {
  border-color: var(--primary);
  background: var(--primary-glow);
  color: #e08880;
}
.wizard-tab.done {
  border-color: var(--success);
  color: var(--success);
}

/* Big stacked payment-method buttons */
.payment-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.payment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  background: #252525;
  color: var(--text);
  text-align: center;
  transition: all .15s;
}
.payment-btn input { display: none; }
.payment-btn:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-glow);
  color: #e08880;
}

/* Load rows (Step 1 — Waste details) */
.load-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  background: #1a1a1a;
}
.load-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.load-row-header .load-title { font-weight: 700; }
.load-remove-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

/* WTN preview (Step 3 — Review & Sign) */
.wtn-preview {
  font-size: 0.9rem;
  line-height: 1.6;
}
.wtn-preview h3 {
  font-size: 0.95rem;
  margin: 14px 0 6px;
  color: var(--primary);
}
.wtn-preview .field-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.wtn-preview .field-key { color: var(--muted); }

/* Signature pad */
.sig-pad-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sig-pad {
  display: block;
  width: 100%;
  height: 180px;
  background: #fff;
  touch-action: none;
}
.sig-pad-actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px;
  background: #1a1a1a;
}

/* ---- Calendar ---- */
.cal-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.cal-tab {
  display: block;
  text-align: center;
  padding: 10px 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  background: #1c1c1c;
  text-decoration: none;
}
.cal-tab.active {
  border-color: var(--primary);
  background: var(--primary-glow);
  color: #e08880;
}
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.cal-nav-label {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.cal-nav-label a {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--primary);
  text-decoration: none;
  margin-top: 2px;
}
.cal-unscheduled {
  border-left: 3px solid var(--amber);
}
.cal-day-section {
  margin-bottom: 12px;
}
.cal-day-section.today {
  border-color: var(--primary);
}
.cal-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cal-job {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border-left: 3px solid var(--border);
  margin-bottom: 6px;
}
.cal-job:hover { background: var(--card-hover); }
.cal-job[draggable="true"] { cursor: grab; }
.cal-job-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  text-decoration: none;
  color: var(--text);
}
.cal-job-resched {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  padding: 8px 10px;
  cursor: pointer;
  line-height: 1;
}
.cal-job-resched:hover { color: var(--text); }
.cal-job-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 8px 11px;
  margin-top: -6px;
  margin-bottom: 8px;
  font-size: 0.78rem;
}
.cal-job-nav-addr {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-job-nav {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.cal-job-nav:hover { background: var(--card-hover); border-color: var(--muted); }
.cal-job-time {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--muted);
  width: 64px;
}
.cal-job-info {
  flex: 1;
  min-width: 0;
}
.cal-job-title {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-job-desc {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-job-booked { border-left-color: var(--amber); }
.cal-job-done   { border-left-color: var(--purple); }
.cal-job-paid   { border-left-color: var(--success); }
.cal-job-closed { border-left-color: #555; }

/* Month grid */
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-month-dow {
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 700;
  padding-bottom: 4px;
}
.cal-month-cell {
  display: block;
  min-height: 56px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
}
.cal-month-cell.other-month { opacity: 0.35; }
.cal-month-cell.today { border-color: var(--primary); }
.cal-month-cell.drop-target, .cal-day-section.drop-target {
  border-color: var(--primary);
  background: var(--card-hover);
}
.cal-month-daynum {
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.cal-chip {
  font-size: 0.6rem;
  line-height: 1.3;
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--card-hover);
  border-left: 2px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}
.cal-chip-more {
  font-size: 0.6rem;
  color: var(--muted);
}

@media (min-width: 700px) {
  .cal-month-cell { min-height: 90px; }
  .cal-chip { font-size: 0.7rem; }
  .cal-job-desc { font-size: 0.85rem; }
}

/* ---- Brand colour swatches (Settings) ----
   Ready-made colours, including the metallics, which are a gradient rather
   than a flat value. The label sits on the colour itself so the choice can
   be made without reading a legend. */
.brand-swatch {
  position: relative;
  height: 52px;
  border-radius: 8px;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: border-color .12s, transform .08s;
}
.brand-swatch span {
  width: 100%;
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  /* The metallics run light through the middle, so the label needs its own
     backing rather than relying on the colour underneath it. */
  background: rgba(0,0,0,0.45);
  padding: 2px 2px 3px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-swatch:hover { border-color: #6a6a6a; }
.brand-swatch:active { transform: scale(0.97); }
.brand-swatch.selected { border-color: #fff; }

/* Ready-made logos. The marks inside are SVG drawn with currentColor, so the
   grid's colour is what tints them and one property recolours the lot. The
   tile stays white because that is what a logo sits on almost everywhere it
   is actually used: a quote, an invoice, an email signature. */
.logo-preset {
  height: 64px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: #fff;
  /* A button does not inherit colour: browsers give it `buttontext`, which
     is black. Without this the marks ignore the grid's colour entirely and
     every one of them draws black. */
  color: inherit;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s, transform .08s;
}
.logo-preset svg { width: 100%; height: 100%; display: block; }
.logo-preset:hover { border-color: #6a6a6a; }
.logo-preset:active { transform: scale(0.97); }
.logo-preset.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--primary-glow); }

/* ---- Quote style picker ----
   Schematic thumbnails of each document layout. Not renders of the real
   PDF: rasterising one needs a renderer the app hasn't got, and a rough
   shape answers the question being asked, which is which of these is laid
   out like the paperwork I want to send. Brand colour comes through
   currentColor, so they preview in the business's own colour. */
.quote-style {
  border: 2px solid var(--border);
  border-radius: 8px;
  background: #252525;
  color: var(--primary);
  cursor: pointer;
  padding: 6px;
  text-align: left;
  transition: border-color .12s, transform .08s;
}
.quote-style:hover { border-color: #6a6a6a; }
.quote-style:active { transform: scale(0.98); }
.quote-style.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--primary-glow); }
.quote-style-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  padding: 6px 2px 2px;
}
.qs-yours {
  font-weight: 400;
  font-size: 0.65rem;
  color: var(--primary);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 3px;
}
.quote-style-thumb {
  background: #fff;
  border-radius: 3px;
  padding: 7px;
  height: 112px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.quote-style-thumb.dark { background: #14161a; }
.qs-band { height: 16px; background: currentColor; border-radius: 2px; margin: -7px -7px 2px; }
.qs-row  { display: flex; justify-content: space-between; align-items: center; }
.qs-logo { width: 22px; height: 10px; background: #c9ccd2; border-radius: 2px; }
.quote-style-thumb.dark .qs-logo { background: #3a3f48; }
.qs-title { width: 40px; height: 8px; background: currentColor; border-radius: 2px; }
.qs-rule { height: 2px; background: currentColor; border-radius: 1px; }
.qs-cols { display: flex; gap: 6px; margin: 2px 0 1px; }
.qs-cols div { flex: 1; height: 12px; background: #e6e8ec; border-radius: 2px; }
.quote-style-thumb.dark .qs-cols div { background: #232830; }
.qs-item {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 1px;
  border-bottom: 1px solid #eceef1;
}
.quote-style-thumb.dark .qs-item { border-bottom-color: #262b33; }
.qs-item.shaded { background: #f2f3f6; border-radius: 2px; }
.quote-style-thumb.dark .qs-item.shaded { background: #1e222a; }
.qs-num  { width: 6px; height: 5px; background: currentColor; border-radius: 1px; flex: none; }
.qs-line { flex: 1; height: 5px; background: #c9ccd2; border-radius: 1px; }
.quote-style-thumb.dark .qs-line { background: #3a3f48; }
.qs-amt  { width: 16px; height: 5px; background: #9aa0a8; border-radius: 1px; flex: none; }
.qs-total { margin-top: auto; border-radius: 2px; }
.qs-total-panel { height: 12px; width: 55%; align-self: flex-end; background: #e6e8ec; }
.quote-style-thumb.dark .qs-total-panel { background: #232830; }
.qs-total-bar   { height: 12px; background: currentColor; }
.qs-total-rows  { height: 3px; background: #9aa0a8; }