/* ---------------------------------------------------------------------------
   Screen styles. Print rules live in print.css.
   --------------------------------------------------------------------------- */

:root {
  --blue: #00aeef;
  --blue-dark: #0090c6;
  --ink: #1e2430;
  --muted: #6b7686;
  --line: #e3e8ef;
  --bg: #f4f6f9;
  --card: #fff;
  --danger: #d94b4b;
  --ok: #1f9d63;
  --radius: 8px;
  --nav-w: 210px;
}

* { box-sizing: border-box; }

/* Must come before anything that sets `display`. The browser hides [hidden]
   via `display: none` in its own stylesheet, which any author `display` rule
   silently beats — that is how the sign-in form ended up visible (and
   unwired) before the app had booted. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

body.busy { cursor: progress; }

h1 { font-size: 22px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 12px; }
a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.muted { color: var(--muted); }
.profile-image { padding: 16px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.profile-image-preview { display: block; max-width: 200px; max-height: 100px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 8px; }
.profile-remove { justify-self: start; }
.profile-image-error:empty { display: none; }
.director-name { font-weight: 600; overflow-wrap: anywhere; }
.quote-template-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.quote-template-picker legend { font-weight: 600; margin-bottom: 4px; }
.quote-template-picker > p { margin: 0 0 10px; font-size: 12px; }
.quote-template-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.quote-template-option { cursor: pointer; min-width: 0; }
.quote-template-option input { position: absolute; opacity: 0; pointer-events: none; }
.quote-template-card {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.quote-template-option input:focus-visible + .quote-template-card,
.quote-template-option input:checked + .quote-template-card {
  border-color: var(--blue-dark);
  box-shadow: 0 0 0 2px rgba(0, 144, 198, .15);
}
.quote-template-card strong { font-size: 12px; }
.quote-template-card small { color: var(--muted); font-size: 10px; line-height: 1.3; }
.quote-design-thumbnail { display:block; width:100%; height:180px; object-fit:contain; object-position:top; border:1px solid var(--line); background:#fff; }
.quote-template-preview {
  height: 58px;
  display: grid;
  grid-template-columns: 1fr 34%;
  grid-template-rows: 13px 8px 1fr;
  gap: 4px;
  padding: 7px;
  border: 1px solid #d9dee5;
  background: #fff;
}
.quote-template-preview i { display: block; background: #d9dee5; }
.quote-template-preview i:nth-child(3) { grid-column: 1 / -1; }
.quote-template-preview i:nth-child(4) { grid-column: 1 / -1; height: 3px; align-self: end; }
.quote-template-preview--classic i:first-child { background: #00aeef; }
.quote-template-preview--modern { border-top: 4px solid #0d7182; padding-top: 3px; }
.quote-template-preview--modern i:nth-child(2),
.quote-template-preview--modern i:nth-child(3) { background: #0d7182; }
.quote-template-preview--minimal { border-color: #202020; }
.quote-template-preview--minimal i { background: #202020; height: 2px; align-self: center; }
.quote-template-preview--minimal i:first-child { height: 7px; }
.quote-template-preview--minimal i:nth-child(2) { background: transparent; border: 1px solid #202020; height: 13px; }
.strong { font-weight: 600; }
.num { text-align: right; }
.pre { white-space: pre-wrap; }
.warn { color: var(--danger); }

.fatal { max-width: 520px; margin: 80px auto; font-family: system-ui, sans-serif; }

/* --- sign in --------------------------------------------------------------- */

#login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
}
.login-card {
  width: 320px;
  background: var(--card);
  padding: 32px;
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(20, 30, 50, .09);
  display: grid;
  gap: 14px;
}
.login-brand {
  text-align: center;
  color: var(--blue);
  margin-bottom: 6px;
}
.login-card--booting {
  text-align: center;
  color: var(--muted);
  padding: 40px 32px;
}
.login-error {
  color: var(--danger);
  margin: 0;
  min-height: 18px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.login-error code { color: var(--ink); }
/* A startup failure explains itself at length; give it room to do so. */
.login-card:has(.login-error:not(:empty)) { width: 400px; }

/* --- shell ----------------------------------------------------------------- */

#shell { display: flex; min-height: 100vh; }

#nav {
  width: var(--nav-w);
  flex: 0 0 var(--nav-w);
  background: var(--ink);
  color: #c7d0dd;
  padding: 18px 0 24px;
  display: flex;
  flex-direction: column;
}
#nav .brand {
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  padding: 0 20px 18px;
}
#nav a {
  color: #c7d0dd;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-left: 3px solid transparent;
}
#nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
#nav a.active {
  background: rgba(0, 174, 239, .14);
  border-left-color: var(--blue);
  color: #fff;
}
#nav .ico {
  font-size: 10px;
  width: 26px;
  opacity: .75;
  letter-spacing: .5px;
}
.nav-sep {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #77839a;
  padding: 18px 20px 6px;
}
.nav-logout {
  margin: auto 20px 0;
  background: none;
  border: 1px solid #3b4557;
  color: #c7d0dd;
  padding: 7px;
  border-radius: 6px;
  cursor: pointer;
}
.nav-logout:hover { background: #3b4557; color: #fff; }

#view { flex: 1; padding: 26px 30px 60px; min-width: 0; }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.page-head p { margin: 4px 0 0; font-size: 13px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- cards & tables -------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.card-head h2 { margin: 0; }

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--line);
}
.table th.num { text-align: right; }
.table td { padding: 10px; border-bottom: 1px solid var(--line); }
.table tr:last-child td { border-bottom: 0; }
.table .empty { text-align: center; color: var(--muted); padding: 28px; }

.row-actions { text-align: right; white-space: nowrap; }
.row-actions button, .row-actions a {
  background: none;
  border: 0;
  color: var(--blue-dark);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  font-family: inherit;
}
.row-actions button:hover { text-decoration: underline; }
.row-actions [data-del] { color: var(--danger); }

/* --- forms ----------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.field { display: grid; gap: 5px; align-content: start; }
.field > span { font-size: 12px; color: var(--muted); font-weight: 500; }
.field--full { grid-column: 1 / -1; }
.form-grid h2 { margin: 6px 0 0; }

input, select, textarea {
  font: inherit;
  color: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, .15);
}
textarea { resize: vertical; }
.inline-select { width: auto; min-width: 190px; }

.btn {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 600;
}
.btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn--ghost { border-style: dashed; color: var(--muted); }
.btn--wide { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }

/* --- document header grid --------------------------------------------------- */

.doc-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 18px;
  align-items: start;
}
/* The customer picker is the widest thing on the row, as on the original. */
.doc-head .field--wide { grid-column: span 2; grid-row: span 2; }
.req { color: var(--danger); }
.list-meta { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.sub { color: var(--muted); font-size: 12px; }
.hidden { display: none; }

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

.doc-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}

/* --- line items ------------------------------------------------------------ */

.table--lines td { padding: 5px 6px; vertical-align: middle; }
.table--lines th { padding-bottom: 6px; }
.col-qty { width: 90px; }
.col-price { width: 120px; }
.col-disc { width: 110px; }
.col-amt { width: 120px; }
.col-x { width: 34px; }
.table--lines textarea {
  resize: none;
  overflow: hidden;
  min-height: 36px;
  line-height: 1.45;
}
.table--lines input.num { text-align: right; }
.table--lines .x {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.table--lines .x:hover { color: var(--danger); }

.totals-row {
  display: grid;
  grid-template-columns: 1fr 1fr 340px;
  gap: 18px;
  align-items: start;
}
.notes-col {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.totals { background: #f7f9fb; }
.totals-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.totals-line span { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.totals-line input[type="number"] { width: 110px; padding: 4px 7px; text-align: right; }
.totals-line b { font-variant-numeric: tabular-nums; }
.totals-line--grand {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  padding-top: 11px;
}
.totals-line--grand span { color: var(--ink); }

/* Rounding on/off switch. */
.switch { position: relative; display: inline-block; width: 30px; height: 16px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i {
  position: absolute;
  inset: 0;
  background: #c6cedb;
  border-radius: 20px;
  transition: background .18s;
  cursor: pointer;
}
.switch i::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s;
}
.switch input:checked + i { background: var(--blue); }
.switch input:checked + i::before { transform: translateX(14px); }

/* --- dashboard ------------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  color: inherit;
  text-decoration: none;
  display: block;
}
.tile:hover { border-color: var(--blue); text-decoration: none; }
.tile-count { font-size: 26px; font-weight: 700; }
.tile-label { font-weight: 600; margin-top: 2px; }
.tile-sub { color: var(--muted); font-size: 12px; }
.tile--money .tile-count { font-size: 20px; color: var(--blue-dark); }

/* --- status pills ---------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
}
.pill--new,
.pill--to_deliver { background: #fff5e5; color: #b5761a; border-color: #f6e2c2; }
.pill--unpaid     { background: #e8f4ff; color: #1f6fb2; border-color: #cbe4f8; }
.pill--accepted,
.pill--delivered,
.pill--paid       { background: #e6f6ed; color: var(--ok); border-color: #c7ebd7; }
.pill--cancelled  { background: #fdeceb; color: var(--danger); border-color: #f8d3d1; }

/* --- print view (on screen) ------------------------------------------------ */

.print-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}
.print-actions { display: flex; align-items: flex-end; gap: 10px; }
.print-template-select { display: grid; gap: 3px; font-size: 11px; color: var(--muted); }
.print-template-select select { min-width: 128px; padding: 8px 30px 8px 9px; }
.sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 820px;
  margin: 0 auto;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.sheet-logo { width: 74px; height: 74px; object-fit: contain; flex: 0 0 auto; }
.sheet-company { flex: 1; }
.sheet-company h1 { font-size: 17px; margin-bottom: 5px; }
.sheet-company div { font-size: 12px; color: var(--muted); }
.sheet-meta { text-align: right; min-width: 220px; }
.sheet-meta h2 {
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--blue);
  margin-bottom: 10px;
}
.sheet-meta table { margin-left: auto; border-collapse: collapse; }
.sheet-meta td, .sheet-meta th { padding: 2px 0 2px 14px; font-size: 12px; }
.sheet-meta td { color: var(--muted); text-align: right; }
.sheet-meta th { text-align: right; }

/* Quotation-only PDF designs. Invoices and delivery orders keep the standard
   layout above regardless of the saved quotation preference. */
.sheet-to { padding: 18px 0; }
.label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 4px;
}
.sheet-to div { font-size: 13px; }

.sheet-lines { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sheet-lines th {
  background: var(--bg);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.sheet-lines th.num { text-align: right; }
.sheet-lines td { padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sheet-lines th:first-child, .sheet-lines td:first-child { width: 34px; }
.sheet-lines tfoot td {
  border-top: 1px solid var(--ink);
  border-bottom: 0;
  padding-top: 9px;
}
.sheet-title {
  font-size: 14px;
  font-weight: 700;
  margin: 14px 0 4px;
  text-transform: uppercase;
  line-height: 1.4;
}
.sheet-term { font-size: 12px; margin: 14px 0 0; }

.sheet-totals { margin: 14px 0 0 auto; border-collapse: collapse; min-width: 260px; }
.sheet-totals td { padding: 5px 0 5px 20px; font-size: 13px; }
.sheet-totals .grand td {
  border-top: 2px solid var(--ink);
  font-size: 16px;
  font-weight: 700;
  padding-top: 9px;
}

.sheet-notes { margin-top: 20px; font-size: 12px; }
.sheet-foot { display: flex; gap: 60px; margin-top: 46px; }
.sign { font-size: 11px; color: var(--muted); flex: 1; min-width: 0; }
.sign-label { font-weight: 600; color: var(--ink); margin-bottom: 4px; }

/* Signature and chop sit on the same baseline just above the rule. The fixed
   height reserves the space whether or not either image is set, so the two
   signature lines always align across the footer. */
.sign-marks {
  height: 100px;
  padding: 8px 0 12px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
/* Sized to sit at roughly the same visual weight as the chop beside it.
   Constrained on both axes so an unusually tall or wide signature image
   cannot push the chop off the line. */
.sign-img {
  display: block;
  width: 160px;
  height: 76px;
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: center bottom;
}
/* Leave a clear gap above the signature rule, including opaque uploads. */
.sign-chop {
  height: 68px;
  width: 68px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .92;
}
.sign-line { border-top: 1px solid var(--ink); margin-bottom: 6px; }

/* Hide the sidebar while a document is on screen for printing. */
body.printing #nav { display: none; }

/* --- toasts ---------------------------------------------------------------- */

#toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  z-index: 50;
}
.toast {
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
  transition: opacity .35s, transform .35s;
}
.toast--err { background: var(--danger); }
.toast--out { opacity: 0; transform: translateY(6px); }

/* --- narrow screens -------------------------------------------------------- */

/* `screen` is essential. Without a media type this also matches print: an A4
   page inside 14mm margins is about 688 CSS pixels, so the narrow layout would
   take over on paper and stack the document header. */
@media screen and (max-width: 820px) {
  #shell { flex-direction: column; }
  #nav {
    width: 100%;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    gap: 2px;
  }
  #nav .brand { padding: 0 12px 0 8px; }
  #nav .nav-sep { display: none; }
  #nav a { border-left: 0; border-bottom: 3px solid transparent; padding: 7px 10px; }
  #nav a.active { border-left: 0; border-bottom-color: var(--blue); }
  #nav .ico { display: none; }
  .nav-logout { margin: 0 0 0 auto; }
  #view { padding: 16px 14px 40px; }
  .form-grid, .totals-row, .doc-head, .notes-col { grid-template-columns: 1fr; }
  .doc-head .field--wide { grid-column: auto; grid-row: auto; }
  .notes-col { grid-column: auto; }
  .sheet { padding: 22px; }
  .sheet-head { flex-direction: column; }
  .sheet-meta { text-align: left; }
  .sheet-meta table { margin-left: 0; }
}
/* Product catalogue filters also stack on phone screens. */
.product-filters { display:flex; gap:16px; align-items:end; flex-wrap:wrap; margin-bottom:16px; }
.product-filters .field { flex:1; min-width:160px; }
[hidden] { display:none !important; }

/* Continuations form one visual item while allowing page breaks. */
.sheet-lines .description-part td { padding-top: 0; padding-bottom: 0; border-bottom: 0; }
.sheet-lines .part-first td { padding-top: 9px; }
.sheet-lines .part-last td { padding-bottom: 9px; border-bottom: 1px solid var(--line); }

/* Additional quotation layouts share the same amounts, continuation rows and artwork. */
.sheet--designed { --accent:#163552; --soft:#eef2f6; }
.design-header { margin-bottom:24px; }
.design-identity { display:flex; align-items:center; gap:16px; }
.design-identity h1 { font-size:21px; line-height:1.25; margin:0 0 8px; overflow-wrap:anywhere; }
.design-identity .pre { font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.design-heading { font-size:29px; letter-spacing:2px; color:var(--accent); margin:0; overflow-wrap:anywhere; }
.design-heading-row { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.design-metadata { margin:0; font-size:11px; display:grid; gap:8px; }
.design-metadata div { min-width:0; }
.design-metadata dt { color:#657080; font-size:10px; text-transform:uppercase; letter-spacing:.7px; }
.design-metadata dd { margin:2px 0 0; font-weight:600; overflow-wrap:anywhere; }
.sheet--designed .sheet-lines th { background:var(--accent); color:white; }
.sheet--designed .sheet-lines tbody td { overflow-wrap:anywhere; }
.sheet--designed .sheet-lines .num { white-space:nowrap; }
.sheet--designed .sheet-lines tfoot td { background:var(--soft); color:var(--accent); }
.sheet--designed .sheet-totals .grand td { border-color:var(--accent); color:var(--accent); }
.sheet--designed .sheet-title { color:var(--accent); }
.sheet--quote-navy .design-identity { background:#163552; color:white; padding:22px; border-bottom:5px solid #c4a360; }
.sheet--quote-navy .design-heading-row { margin-top:24px; }
.sheet--quote-navy .design-heading { font-family:Georgia,serif; font-size:33px; }
.sheet--quote-navy .sheet-to { border-left:3px solid #c4a360; padding-left:14px; }
.sheet--quote-sidebar { --accent:#14583c; --soft:#edf5ef; position:relative; padding-left:210px; min-height:720px; }
.sheet--quote-sidebar .design-sidebar { position:absolute; left:24px; top:24px; bottom:24px; width:160px; padding:18px; background:#14583c; color:white; }
.sheet--quote-sidebar .design-identity { display:block; }
.sheet--quote-sidebar .design-identity h1 { font-size:18px; margin-top:12px; }
.sheet--quote-sidebar .design-metadata { margin-top:26px; gap:18px; }
.sheet--quote-sidebar .design-metadata dt { color:#d5e9dc; }
.sheet--quote-sidebar .design-heading { margin:8px 0 28px; font-size:25px; }
.sheet--quote-sidebar .sheet-foot { gap:20px; }
.sheet--quote-sidebar .sheet-lines td, .sheet--quote-sidebar .sheet-lines th { font-size:11px; padding-left:4px; padding-right:4px; }
.sheet--quote-letterhead { --accent:#222; --soft:#f5f5f5; }
.sheet--quote-letterhead .design-identity { display:block; text-align:center; }
.sheet--quote-letterhead .sheet-logo { display:block; margin:0 auto 12px; }
.sheet--quote-letterhead .design-identity h1 { font-family:Georgia,serif; font-size:25px; }
.sheet--quote-letterhead .design-heading { text-align:center; font:30px Georgia,serif; padding:18px 0; margin:20px 0; border-top:3px double #222; border-bottom:3px double #222; }
.sheet--quote-letterhead .design-metadata { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sheet--quote-letterhead .sheet-lines th { background:white; color:#222; border-bottom:2px solid #222; }
.sheet--quote-letterhead .sheet-lines td { border-color:transparent; }
.sheet--quote-letterhead .sheet-lines tfoot td { background:white; border-top:2px solid #222; border-bottom:2px solid #222; }
.sheet--quote-teal { --accent:#087b87; --soft:#eaf6f7; }
.sheet--quote-teal .design-header { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.sheet--quote-teal .design-identity { align-items:start; }
.sheet--quote-teal .design-identity h1 { font-size:18px; }
.sheet--quote-teal .sheet-logo { width:54px; height:54px; }
.sheet--quote-teal .design-heading { margin-top:26px; font-size:28px; }
.design-summary { border:1px solid #087b87; background:#eaf6f7; border-radius:8px; padding:18px; }
.design-summary > span { font-size:11px; text-transform:uppercase; color:#087b87; }
.design-summary > strong { display:block; font-size:25px; color:#087b87; margin:8px 0 20px; overflow-wrap:anywhere; }
.design-summary .design-metadata { grid-template-columns:1fr 1fr; }
.sheet--quote-teal .sheet-to { background:#eaf6f7; border:1px solid #c5e4e6; padding:14px; border-radius:6px; }
.sheet--quote-teal .sheet-notes { border-left:3px solid #087b87; padding-left:12px; }
.sheet--quote-ledger { --accent:#69192a; --soft:#f6edef; }
.sheet--quote-ledger .design-heading { font:32px Georgia,serif; padding-top:10px; }
.sheet--quote-ledger .design-identity { text-align:right; flex-direction:row-reverse; max-width:52%; }
.sheet--quote-ledger .design-identity h1 { font:19px Georgia,serif; }
.sheet--quote-ledger .design-metadata { grid-template-columns:repeat(3,minmax(0,1fr)); padding:14px; border:1px solid #ccb5ba; margin-top:22px; background:#f6edef; }
.sheet--quote-ledger .sheet-to { background:#69192a; color:white; padding:14px; }
.sheet--quote-ledger .sheet-to .label { color:white; }
.sheet--quote-ledger .sheet-lines td { border-left:1px solid #d9cbd0; border-right:1px solid #d9cbd0; }
.sheet--quote-ledger .sheet-totals { margin-left:0; margin-right:auto; }
.sheet--quote-ledger .sheet-lines tfoot td { background:#69192a; color:white; }
.quote-template-preview--navy i:first-child { grid-column:1/-1; background:#163552; border-bottom:2px solid #c4a360; }
.quote-template-preview--sidebar { grid-template-columns:25% 1fr; }
.quote-template-preview--sidebar i:first-child { grid-row:1/4; background:#14583c; }
.quote-template-preview--sidebar i:nth-child(3), .quote-template-preview--sidebar i:nth-child(4) { grid-column:2; }
.quote-template-preview--letterhead i:first-child { grid-column:1/-1; background:#333; margin:0 12px; }
.quote-template-preview--teal i:nth-child(2) { background:#b8e0e4; grid-row:1/3; grid-column:2; }
.quote-template-preview--ledger i:first-child { background:#69192a; }
.quote-template-preview--ledger i:nth-child(3) { background:#69192a; }
@media screen and (max-width:600px) {
 .quote-template-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .sheet--quote-sidebar { padding-left:22px; }
 .sheet--quote-sidebar .design-sidebar { position:static; width:auto; margin-bottom:18px; }
 .design-heading-row { flex-wrap:wrap; }
 .sheet--quote-teal .design-header { grid-template-columns:1fr; }
 .sheet--quote-ledger .design-identity { max-width:100%; }
}

/* Each quotation has its own closing arrangement, matching its design preview. */
.design-closing { margin-top:16px; font-size:12px; }
.design-breakdown { margin:0 0 14px auto; width:280px; border-collapse:collapse; }
.design-breakdown td { padding:5px 8px; border-bottom:1px solid var(--line); }
.design-grand { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:var(--accent); color:#fff; }
.design-grand > span { font-size:12px; letter-spacing:1px; text-transform:uppercase; }
.design-grand > strong { font-size:29px; white-space:nowrap; line-height:1.2; }
.design-terms { margin-top:24px; font-size:12px; line-height:1.6; min-width:0; overflow-wrap:anywhere; }
.design-terms h3 { font-size:14px; margin:0 0 10px; color:var(--accent); }
.design-terms h4 { font-size:12px; margin:12px 0 4px; }
.design-terms p { margin:0 0 8px; }
.design-authorisation { margin-top:28px; break-inside:avoid; page-break-inside:avoid; }
.design-issued { margin:0 0 8px; font-size:12px; }
.design-sign-row { display:flex; gap:42px; align-items:start; }
.design-sign-row > * { flex:1; min-width:0; }
.design-authorisation .sign { color:var(--ink); font-size:11px; }
.design-authorisation .sign-line { border-color:#647080; }
.design-authorisation .director-name { margin-top:5px; }
.design-chop .sign-marks { justify-content:center; }
.design-chop { text-align:center; }
.design-chop .sign-chop { width:90px; height:90px; }
.design-authorisation .sign-marks { height:116px; }
.design-authorisation .sign-img { width:180px; height:86px; }
.design-endline { display:flex; justify-content:space-between; gap:14px; border-top:1px solid var(--accent); margin-top:28px; padding-top:12px; font-size:9px; color:var(--accent); letter-spacing:1px; break-inside:avoid; overflow-wrap:anywhere; }
.closing-columns { display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:start; }
.closing-navy .navy-total { display:flex; justify-content:end; background:#edf0f3; }
.closing-navy .design-grand { min-width:65%; }
.closing-navy .design-terms h3 { font-family:Georgia,serif; color:#142e4b; }
.closing-navy .design-authorisation .sign-marks { height:138px; gap:18px; }
.closing-navy .design-authorisation .sign-chop { height:94px; width:94px; }
.closing-navy .design-endline { border-top:2px solid #163552; }
.closing-sidebar .sidebar-total { display:flex; justify-content:end; }
.closing-sidebar .design-grand { padding:14px; }
.closing-sidebar .design-grand > strong { font-size:26px; }
.closing-sidebar .design-sign-row { gap:28px; }
.closing-sidebar .design-terms h3 { text-transform:uppercase; }
.closing-letterhead .design-grand { background:white; color:#151515; border:1px solid #222; justify-content:center; }
.closing-letterhead .design-grand > span { font:17px Georgia,serif; padding-right:22px; border-right:1px solid #333; }
.closing-letterhead .design-grand > strong { font:30px Georgia,serif; }
.closing-letterhead .design-terms h3 { font:18px Georgia,serif; }
.closing-letterhead .design-sign-row { justify-content:space-between; gap:100px; }
.closing-teal .design-grand { background:#e7f5f6; border:1px solid #add9dd; color:#087b87; border-radius:0 0 8px 8px; }
.closing-teal .design-terms { background:#f0f8f9; border:1px solid #c4e1e5; border-radius:8px; padding:18px; }
.closing-teal .design-terms h3 { text-transform:uppercase; font-size:12px; letter-spacing:1px; }
.closing-teal .design-sign-row { max-width:80%; gap:40px; }
.closing-teal .design-chop { border-left:1px solid #c5dade; padding-left:28px; }
.closing-ledger .ledger-summary { display:grid; grid-template-columns:1.15fr 1fr; gap:8px; align-items:stretch; }
.closing-ledger .design-grand { flex-direction:column; align-items:start; justify-content:center; padding:20px; }
.closing-ledger .design-grand > strong { font:38px Georgia,serif; }
.closing-ledger .design-terms { margin:0; padding:18px; border:1px solid #cabfc2; }
.closing-ledger .design-terms h3 { letter-spacing:1px; text-transform:uppercase; font-size:12px; }
.closing-ledger .design-authorisation { border-top:2px solid #69192a; padding-top:22px; }
.closing-ledger .design-sign-row { gap:30px; align-items:end; text-align:center; }
.closing-ledger .design-role { font-size:10px; text-transform:uppercase; letter-spacing:2px; }
.closing-ledger .design-chop .sign-line { border:0; }
.closing-ledger .design-chop .sign-chop { width:105px; height:105px; }
.closing-ledger .design-chop .sign-marks { height:129px; }
.closing-ledger .design-endline { border-top:2px solid #69192a; }
@media screen and (max-width:600px) {
 .closing-columns, .closing-ledger .ledger-summary { grid-template-columns:1fr; }
 .design-sign-row, .closing-letterhead .design-sign-row { gap:16px; }
 .closing-teal .design-sign-row { max-width:100%; }
 .design-grand > strong { font-size:24px; }
}

/* Supplier draft review */
.supplier-confirm { display:flex; align-items:flex-start; gap:10px; margin:16px 0; }
.supplier-confirm input[type=checkbox] { width:auto; flex:0 0 auto; margin-top:3px; }
.supplier-presets { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
#supplier-rows textarea { min-width:260px; }
#supplier-rows input { min-width:100px; }
#supplier-summary { margin:16px 0; font-weight:600; line-height:1.8; }