:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #0f172a;
  --ink-2: #475569;
  --muted: #94a3b8;
  --line: #e5e7eb;
  --line-2: #cbd5e1;
  --accent: #0f766e;
  --accent-ink: #ffffff;
  --danger: #b91c1c;
  --warn: #b45309;
  --ok: #15803d;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.04);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  /* Prevent iOS Safari from auto-resizing text and zooming on input focus. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { overflow-x: hidden; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}

h1,h2,h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 15px; }
h3 { font-size: 15px; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); }
.brand-logo { height: 28px; width: auto; display: block; }
.brand-divider { width: 1px; height: 18px; background: var(--line-2); }
.brand-label { font-size: 13px; color: var(--ink-2); font-weight: 500; letter-spacing: 0.01em; }
.topbar-actions { display: flex; gap: 8px; }

/* Buttons */
.btn {
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 8px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
}
.btn:hover { background: #f1f5f9; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: #0b5d56; border-color: #0b5d56; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: #f1f5f9; }

/* Layout */
.layout {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 20px;
  padding: 20px 24px 40px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  min-width: 0; /* keep grid track from being inflated by intrinsic child sizes */
}

.summary { position: sticky; top: 76px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 14px 0 24px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }
.span-2 { grid-column: 1 / -1; }

.dual-input { display: grid; grid-template-columns: 1fr 160px; gap: 8px; }
@media (max-width: 500px) { .dual-input { grid-template-columns: 1fr; } }
.dual-input .account-no { font-variant-numeric: tabular-nums; }

label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
input[type="text"], input[type="date"], input[type="number"], input[type="search"], select {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
input[readonly] { background: #f8fafc; color: var(--ink-2); }

.section-header { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.section-actions { display: flex; gap: 8px; }

/* Line items */
.line-items { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }

.line-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}
.line-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; min-width: 0; flex-wrap: wrap; }
.line-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; flex-wrap: wrap; row-gap: 6px; }
.tag {
  display: inline-block;
  padding: 3px 8px;
  background: #ecfdf5;
  color: #065f46;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tag.board { background: #eff6ff; color: #1e40af; }

.product-btn {
  flex: 1 1 0;
  width: 0; /* combined with flex: 1 1 0, lets the button shrink below intrinsic content width */
  text-align: left;
  border: 1px dashed var(--line-2);
  background: transparent;
  color: var(--ink-2);
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-btn.selected { color: var(--ink); border-style: solid; background: #f8fafc; font-weight: 500; }
.product-btn:hover { border-color: var(--accent); color: var(--ink); }
/* Block-level wrapper so text-overflow: ellipsis applies reliably even when
   the picked product name contains inline <strong> / <span> children. */
.product-btn-text {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  border-radius: 6px;
}
.remove-btn:hover { color: var(--danger); background: #fef2f2; }

.line-body {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 900px) { .line-body { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .line-body { grid-template-columns: repeat(2, 1fr); } }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 11px; color: var(--ink-2); font-weight: 500; }

.max-hint { font-size: 10px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.max-hint.zero { color: var(--warn); font-weight: 500; }

.input-with-prefix { position: relative; display: flex; align-items: center; }
.input-prefix {
  position: absolute;
  left: 10px;
  color: var(--ink-2);
  font-size: 14px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.input-with-prefix input { padding-left: 22px; }

.line-total {
  font-weight: 600;
  font-size: 15px;
  padding: 8px 10px;
  background: #f0fdfa;
  border-radius: 8px;
  border: 1px solid #99f6e4;
  color: #115e59;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.line-footnote {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2);
  min-height: 0;
}
.line-footnote.warn { color: var(--warn); }
.line-footnote.solved { color: var(--ok); }

.hint { color: var(--ink-2); font-size: 12px; margin: 14px 0 0; }
.hint.small { font-size: 11px; margin-top: 6px; }

/* Summary */
.summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.summary-row:last-of-type { border-bottom: none; }
.summary-row strong { font-weight: 600; }
.summary-row.total { font-size: 18px; padding-top: 14px; margin-top: 6px; border-top: 2px solid var(--ink); border-bottom: none; }
.summary-row.total strong { font-size: 18px; }
.vat-toggle { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); font-weight: 400; }

/* Modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal[hidden] { display: none; }
.modal-card {
  background: #fff;
  border-radius: 12px;
  width: min(720px, 100%);
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-card input[type="search"] { margin: 12px 18px; width: calc(100% - 36px); }
.picker-results { overflow: auto; border-top: 1px solid var(--line); }
.picker-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  align-items: center;
}
.picker-item:hover { background: #f1f5f9; }
.picker-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-2); }
.picker-desc { min-width: 0; }
.picker-desc-main { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-desc-sub { font-size: 11px; color: var(--muted); }
.picker-price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.picker-empty { padding: 30px; text-align: center; color: var(--muted); }

/* Print */
.print-only { display: none; }
@media print {
  /* Zero page margins so Safari/Chrome have no room to inject URL/date footers.
     We then add our own padding via #printView below. */
  @page { size: A4; margin: 0; }
  html, body { background: #fff; font-size: 11pt; margin: 0; padding: 0; }
  .no-print { display: none !important; }
  .layout { display: none !important; }
  .print-only { display: block !important; }
  /* Replicate the page margins inside our content. */
  #printView { padding: 15mm 15mm 15mm 15mm; box-sizing: border-box; min-height: 100vh; }
}

.pv-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 20px; }
.pv-logo { height: 44px; width: auto; display: block; }
.pv-prepared-by { margin-top: 18px; padding: 12px 14px; background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; font-size: 10pt; color: var(--ink); }
.pv-meta { text-align: right; font-size: 10pt; color: var(--ink-2); }
.pv-meta strong { display: block; font-size: 14pt; color: var(--ink); margin-bottom: 4px; }
.pv-customer { margin-bottom: 16px; }
.pv-customer-label { font-size: 9pt; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.pv-customer-name { font-size: 12pt; font-weight: 600; margin-top: 2px; }
.pv-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.pv-table th { text-align: left; font-size: 9pt; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--ink); padding: 8px 6px; }
.pv-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 10pt; vertical-align: top; }
.pv-table td.num, .pv-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pv-totals { margin-left: auto; width: 280px; font-size: 10pt; }
.pv-totals-row { display: flex; justify-content: space-between; padding: 6px 0; }
.pv-totals-row.total { font-weight: 700; font-size: 12pt; border-top: 2px solid var(--ink); padding-top: 10px; margin-top: 4px; }
.pv-footer { margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 9pt; color: var(--ink-2); text-align: center; }

/* ---------- Discount email buttons ---------- */
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.btn:disabled:hover {
  background: #fff;
}
.btn.warn {
  border-color: #fcd9b6;
  background: #fff7ed;
  color: var(--warn);
}
.btn.warn:hover:not(:disabled) {
  background: #fdebd1;
  border-color: #f5b97a;
}
.btn.warn.active {
  background: var(--warn);
  border-color: var(--warn);
  color: #fff;
}
.btn.warn.active:hover {
  background: #92400e;
  border-color: #92400e;
}

/* ---------- Over-max line chip & line emphasis ---------- */
.line-card.over-max {
  border-color: #f5b97a;
  background: #fffaf3;
}
.over-max-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--warn);
  background: #fff1dc;
  border: 1px solid #f5b97a;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
  max-width: 100%;
}
.over-max-chip::before {
  content: "!";
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  background: var(--warn);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

/* On narrow screens stack the chip below the product button on its own full-width row */
@media (max-width: 640px) {
  .over-max-chip {
    margin-left: 0;
    margin-top: 4px;
    flex-basis: 100%;
    white-space: normal;
    align-self: flex-start;
  }
}

/* ---------- Mobile topbar ----------
   Logo stretches full-width across the top, the five action buttons sit in a
   tidy grid below, each with its own outline + colour. Export PDF spans the
   full width as the primary action. */
@media (max-width: 720px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 14px;
  }
  .brand {
    width: 100%;
    justify-content: center;
  }
  .brand-divider, .brand-label { display: none; }
  /* Stretch the LJ logo edge-to-edge across the header on phones. */
  .brand-logo {
    width: 100%;
    height: auto;
    max-height: 56px;
    object-fit: contain;
  }
  .topbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .topbar-actions .btn {
    width: 100%;
    padding: 12px 8px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    border-width: 1.5px;
    font-weight: 600;
  }
  /* Order:
       Row 1:  New quote      | Email to client
       Row 2:  Email setup    | Request approval
       Row 3:  Export PDF (spans both columns) */
  #newQuoteBtn       { order: 1; }
  #emailClientBtn    { order: 2; }
  #emailSetupBtn     { order: 3; }
  #emailApprovalBtn  { order: 4; }
  #printBtn          { order: 5; grid-column: 1 / -1; }

  /* Colour-code each action box so the 2x2 grid reads at a glance. ---------- */
  /* New quote: neutral slate — give it the same outlined treatment as the
     other boxes (was previously a borderless ghost button). */
  #newQuoteBtn {
    background: #fff;
    border-color: #cbd5e1;
    color: #0f172a;
  }
  #newQuoteBtn:hover { background: #f8fafc; }

  /* Email setup: cool blue tint to signal "send for setup". */
  #emailSetupBtn:not(:disabled) {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
  }
  #emailSetupBtn:not(:disabled):hover { background: #dbeafe; }

  /* Email quote to client: soft green tint to signal "send to customer". */
  #emailClientBtn:not(:disabled) {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
  }
  #emailClientBtn:not(:disabled):hover { background: #d1fae5; }

  /* Request approval: warm amber tint to signal "needs review". */
  #emailApprovalBtn:not(:disabled) {
    background: #fff7ed;
    border-color: #fdba74;
    color: #b45309;
  }
  #emailApprovalBtn:not(:disabled):hover { background: #ffedd5; }

  /* Export PDF: brand teal primary action. */
  #printBtn {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }
  #printBtn:hover { background: #0b5d56; border-color: #0b5d56; }

  /* Shorter labels on mobile so nothing gets truncated. The buttons hide their
     full text and use ::before to display a phone-friendly version. */
  #emailSetupBtn { font-size: 0; }
  #emailSetupBtn::before {
    content: "Email setup";
    font-size: 14px;
    font-weight: 600;
  }
  #emailApprovalBtn { font-size: 0; }
  #emailApprovalBtn::before {
    content: "Request approval";
    font-size: 14px;
    font-weight: 600;
  }
  #emailClientBtn { font-size: 0; }
  #emailClientBtn::before {
    content: "Email to client";
    font-size: 14px;
    font-weight: 600;
  }

  /* ---------- iOS Safari auto-zoom fix ----------
     iOS zooms the viewport whenever a focused input has font-size < 16px and
     never zooms back out, which is what caused the post-picker distortion.
     Bumping every form control to 16px on phones prevents the zoom entirely. */
  input[type="text"],
  input[type="date"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ---- Currency toggle (topbar) ----
   Compact, secondary-styled toggle. GBP is the default on every quote so the
   control sits quietly next to the action buttons — it's only used by the
   small subset of users who need to quote in EUR. */
.currency-toggle {
  display: inline-flex;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 1px;
  gap: 0;
  align-self: center;
  height: 26px;
}
.currency-btn {
  border: none;
  background: transparent;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.currency-btn:hover:not(.active) { color: #475569; }
.currency-btn.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* ---- Quantity unit hints under qty input ---- */
.qty-unit-hint {
  color: #94a3b8;
  font-weight: 400;
  font-size: 11px;
  margin-left: 4px;
}
.qty-total-hint {
  color: #64748b;
  font-size: 11.5px;
  margin-top: 4px;
  line-height: 1.3;
  min-height: 14px;
}

@media (max-width: 720px) {
  .currency-toggle {
    grid-column: 1 / -1;
    order: 0;
    justify-self: center;
    height: 28px;
  }
  .currency-btn { padding: 0 14px; font-size: 12px; }
}

/* ---------- Attach-PDF reminder toast ----------
   Shown after "Email quote to client" on mobile, where the mail app instantly
   takes over the screen. The toast persists in the browser tab so the rep
   sees it the moment they switch back to attach the just-downloaded PDF. */
.attach-reminder {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-left-width: 6px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-size: 14px;
  line-height: 1.35;
  color: #0f172a;
  animation: attachReminderIn 220ms ease-out;
}
@keyframes attachReminderIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.attach-reminder-icon {
  font-size: 22px;
  line-height: 1;
  padding-top: 1px;
  flex-shrink: 0;
}
.attach-reminder-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.attach-reminder-body strong {
  font-weight: 700;
  color: var(--accent);
}
.attach-reminder-body em {
  font-style: normal;
  font-weight: 600;
  color: #0f172a;
  word-break: break-all;
}
.attach-reminder-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  color: #64748b;
  cursor: pointer;
}
.attach-reminder-close:hover { color: #0f172a; }

/* On wider screens (if ever shown) keep it tidy in the bottom-right. */
@media (min-width: 721px) {
  .attach-reminder {
    left: auto;
    right: 20px;
    bottom: 20px;
    max-width: 380px;
  }
}