/* eTech Office Management System */
:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --ink: #1c2333;
  --muted: #6b7590;
  --line: #e2e7f0;
  --brand: #1f5fbf;
  --brand-dark: #17488f;
  --green: #157f4a;
  --green-bg: #e4f5ec;
  --red: #bb2231;
  --red-bg: #fdeaec;
  --amber: #9a6200;
  --amber-bg: #fdf1dc;
  --grey-bg: #eef1f6;
  --radius: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 10px; }
p { margin: 0 0 10px; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 210px; flex: 0 0 210px; background: #0f1b2e; color: #c8d3e6;
  padding: 0 0 30px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.logo { padding: 16px 16px 14px; border-bottom: 1px solid #1e2d47; }
.logo a { color: #fff; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.logo a:hover { text-decoration: none; }
.mark {
  background: var(--brand); color: #fff; width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
/* The wordmark is red on white, so it sits on its own white plate against the
   dark sidebar rather than looking like a stray rectangle. */
.logo a { flex-direction: column; align-items: flex-start; gap: 6px; }
.mark-img { display: block; background: #fff; border-radius: 6px; padding: 5px 7px; max-width: 100%; }
.logo .co { font-size: 12px; color: #8fa3c4; font-weight: 500; }
.nav-group {
  padding: 14px 16px 5px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .09em; color: #6d7f9c; font-weight: 600;
}
.nav-item { display: block; padding: 7px 16px; color: #c8d3e6; font-size: 13.5px; border-left: 3px solid transparent; }
.nav-item:hover { background: #172741; color: #fff; text-decoration: none; }
.nav-item.active { background: #172c4a; color: #fff; border-left-color: var(--brand); font-weight: 600; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 11px 22px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 20;
}
.page-title { font-weight: 600; font-size: 15px; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.who { color: var(--muted); }
a.who:hover { color: var(--ink); text-decoration: none; }
.who .role {
  background: var(--grey-bg); border-radius: 20px; padding: 2px 9px;
  font-size: 11px; margin-left: 5px; color: var(--ink);
}
.bell { position: relative; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.bell svg { display: block; }
.bell.has-unread svg { color: var(--red); }

/* Install-as-app button, shown only when the browser offers installation. */
#install-app { display: none; }
.bell .dot {
  background: var(--red); color: #fff; border-radius: 20px; font-size: 11px;
  padding: 1px 6px; margin-left: 4px; font-weight: 600;
}
main { padding: 20px 22px 60px; max-width: 1180px; }
main.wide { max-width: none; }
.plain-page { max-width: 420px; margin: 70px auto; padding: 0 16px; }

/* ---------- headers, cards ---------- */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 16px;
}
.card.pad0 { padding: 0; overflow: hidden; }
.card-head {
  padding: 13px 18px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.card-head h2 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; }
.tile-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.tile-value { font-size: 21px; font-weight: 600; margin-top: 5px; }
.tile-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.tile.good .tile-value { color: var(--green); }
.tile.bad .tile-value { color: var(--red); }
.tile.warn .tile-value { color: var(--amber); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th, table.list td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.list th {
  background: #f8fafd; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 600; white-space: nowrap;
}
table.list tbody tr:hover { background: #f9fbfe; }
table.list tr.is-urgent td { background: #fff7f7; }
table.list tr.is-urgent:hover td { background: #ffeff0; }
table.list td.num, table.list th.num { text-align: right; white-space: nowrap; }
.empty { padding: 26px; text-align: center; color: var(--muted); }
tfoot td { font-weight: 600; background: #f8fafd; }

/* ---------- forms ---------- */
label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; color: #38445f; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number],
input[type=datetime-local], input[type=month], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #ccd4e2; border-radius: 7px;
  font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd4f5; border-color: var(--brand); }
textarea { min-height: 72px; resize: vertical; }
.field { margin-bottom: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0 16px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .form-grid.two { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.check { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; }
.check input { width: auto; }
.hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
legend { font-weight: 600; font-size: 13px; padding: 0 6px; color: #38445f; }

/* ---------- buttons ---------- */
.btn, .btn-outline, .btn-plain, .btn-danger {
  display: inline-block; padding: 8px 14px; border-radius: 7px; font-size: 13.5px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: inherit;
}
.btn { background: var(--brand); color: #fff; }
.btn:hover { background: var(--brand-dark); text-decoration: none; color: #fff; }
.btn-outline { background: #fff; color: var(--brand); border-color: #b9cdec; }
.btn-outline:hover { background: #f2f7ff; text-decoration: none; }
.btn-plain { background: transparent; color: var(--muted); }
.btn-plain:hover { color: var(--ink); text-decoration: none; }
.btn-danger { background: #fff; color: var(--red); border-color: #f0bfc5; }
.btn-danger:hover { background: var(--red-bg); text-decoration: none; }
.btn-sm { padding: 4px 9px; font-size: 12.5px; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- badges & flags ---------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px;
  font-weight: 600; white-space: nowrap;
}
.badge.green { background: var(--green-bg); color: var(--green); }
.badge.red   { background: var(--red-bg);   color: var(--red); }
.badge.amber { background: var(--amber-bg); color: var(--amber); }
.badge.grey  { background: var(--grey-bg);  color: #4a5670; }
.badge.urgent { background: var(--red); color: #fff; letter-spacing: .04em; }
.badge.high  { background: var(--amber-bg); color: var(--amber); }
.badge.low   { background: var(--grey-bg); color: var(--muted); }
.flag { color: var(--red); font-size: 15px; margin-right: 4px; }
.bs { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

/* ---------- flash ---------- */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13.5px; font-weight: 500; }
.flash.ok   { background: var(--green-bg); color: var(--green); }
.flash.err  { background: var(--red-bg);   color: var(--red); }
.flash.warn { background: var(--amber-bg); color: var(--amber); }

/* ---------- filters ---------- */
.filters {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 15px;
}
.filters .field { margin: 0; min-width: 140px; }
.filters input, .filters select { min-width: 130px; }

/* ---------- progress ---------- */
.bar { background: var(--grey-bg); border-radius: 20px; height: 8px; overflow: hidden; min-width: 90px; }
.bar span { display: block; height: 100%; background: var(--brand); border-radius: 20px; }
.bar.good span { background: var(--green); }
.bar.bad span  { background: var(--red); }
.bar.warn span { background: #e0a020; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--brand); border: 2px solid #fff;
}
.timeline li.done::before { background: var(--green); }
.timeline .t-when { font-size: 12px; color: var(--muted); }
.timeline .t-what { font-weight: 600; }

/* ---------- items editor ---------- */
table.items { width: 100%; border-collapse: collapse; }
table.items th { font-size: 11.5px; text-transform: uppercase; color: var(--muted); text-align: left; padding: 6px 6px; }
table.items td { padding: 4px 6px; vertical-align: top; }
table.items input { padding: 6px 8px; }
table.items .col-sn { width: 34px; color: var(--muted); text-align: center; padding-top: 12px; }
table.items .col-qty { width: 90px; }
table.items .col-unit { width: 90px; }
table.items .col-rate { width: 125px; }
table.items .col-amt { width: 125px; text-align: right; padding-top: 12px; font-weight: 600; }
table.items .col-x { width: 34px; }
.totals { margin-left: auto; width: 320px; font-size: 14px; }
.totals div { display: flex; justify-content: space-between; padding: 5px 0; }
.totals .grand { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; font-size: 17px; font-weight: 700; }

/* ---------- chat ---------- */
.chat-wrap { display: grid; grid-template-columns: 270px 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .chat-wrap { grid-template-columns: 1fr; } }
.chat-threads { max-height: 380px; overflow-y: auto; }
.chat-thread { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.chat-thread:hover { background: #f7f9fd; text-decoration: none; }
.chat-thread.active { background: #eef4fd; border-left: 3px solid var(--brand); }
.chat-thread .ct-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-thread .dot { background: var(--red); color: #fff; border-radius: 20px; font-size: 11px; padding: 1px 7px; font-weight: 600; }
.chat-thread .ct-prev { font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread .ct-when { font-size: 11px; color: var(--muted); margin-top: 2px; }
.chat-new { padding: 12px 14px; border-top: 1px solid var(--line); }
.chat-messages { height: 420px; overflow-y: auto; padding: 14px 16px; background: #f8fafd; }
.chat-day { text-align: center; font-size: 11.5px; color: var(--muted); margin: 10px 0 6px; }
.chat-msg { max-width: 74%; margin-bottom: 10px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 11px; }
.chat-msg.mine { margin-left: auto; background: #e8f1fe; border-color: #cfe0fa; }
.chat-msg .cm-who { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.chat-msg .cm-at { font-weight: 400; margin-left: 6px; }
.chat-msg .cm-body { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.chat-send { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-send textarea { flex: 1; min-height: 44px; }

/* ---------- letterheads ---------- */
.lh { margin-bottom: 4px; }
.lh-text { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.lh-left { display: flex; gap: 12px; align-items: flex-start; }
.lh-logo { max-height: 64px; max-width: 120px; }
.lh-banner { display: block; width: 100%; max-height: 150px; object-fit: contain; }
.lh-right { text-align: right; }
.lh-rule { height: 3px; margin-top: 10px; border-radius: 2px; }
.lh-foot { margin-top: 26px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); text-align: center; }

/* ---------- letters, signatures and stamps ---------- */
.letter-body { line-height: 1.85; font-size: 14.5px; white-space: pre-wrap; }
.sign-block { position: relative; display: inline-block; min-width: 240px; text-align: left; }
.sign-block .signature { display: block; max-height: 70px; max-width: 220px; margin-bottom: -6px; }
.sign-block .sign-space { height: 52px; }
.sign-block .sign-rule { border-top: 1px solid var(--ink); width: 220px; margin-bottom: 4px; }
.sign-block .sign-name { font-weight: 600; font-size: 13.5px; }
.sign-block .sign-title { font-size: 12.5px; color: var(--muted); }
.sign-block .stamp {
  position: absolute; right: -50px; top: -18px; max-height: 110px; max-width: 130px;
  opacity: .82; pointer-events: none;
}
.mark-preview { max-height: 70px; max-width: 200px; border: 1px solid var(--line);
  border-radius: 6px; padding: 6px; background: #fff; }

/* ---------- print documents ---------- */
.doc { background: #fff; padding: 34px 38px; max-width: 820px; margin: 0 auto; }
.doc-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 18px; }
.doc-head .co-name { font-size: 20px; font-weight: 700; }
.doc-title { font-size: 24px; font-weight: 700; text-align: right; }
.doc table.items th { border-bottom: 1px solid var(--line); }
.doc table.items td { border-bottom: 1px solid #f0f2f7; }
.doc-parties { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
/* ---------- on a phone ----------
   The sidebar is 210px of a 390px screen, which left the actual work squeezed
   into what was left of it. Below 860px it comes off the page entirely and is
   opened by the menu button, over the content, the way a phone expects. */
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 9px; cursor: pointer; color: var(--ink); line-height: 0;
}
.nav-scrim { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 264px; flex-basis: 264px; height: 100dvh;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(0,0,0,.25);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(9,15,26,.5);
  }
  .nav-item { padding: 11px 18px; font-size: 15px; }      /* thumb-sized targets */
  .nav-group { padding-top: 16px; }

  /* The top bar was what pushed the page wider than the phone: its contents
     could not shrink, so everything else was dragged along and clipped. */
  .topbar { padding: 9px 12px; gap: 8px; flex-wrap: wrap; }
  .topbar-right { gap: 12px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .page-title {
    font-size: 14px; min-width: 0; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .who .role { display: none; }
  .who {
    max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; display: inline-block;
  }
  .bell span.dot { font-size: 10px; }
  main { padding: 14px 12px 40px; }
  main.wide { padding: 14px 12px 40px; }

  .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-header h1 { font-size: 21px; }
  .page-header .actions { flex-wrap: wrap; }
  .page-header .actions .btn,
  .page-header .actions .btn-outline,
  .page-header .actions .btn-plain { flex: 1 1 auto; text-align: center; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid, .form-grid.two { grid-template-columns: 1fr; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters .field { width: 100%; }
  .grid2, .grid3 { grid-template-columns: 1fr; }

  /* Anything wide scrolls inside its own box rather than pushing the page. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.list { min-width: 560px; }
  .doc { padding: 16px 14px; }
  .card { padding: 13px 14px; }

  /* A form control under 16px makes iOS zoom the whole page on focus. */
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 430px) {
  .tiles { grid-template-columns: 1fr; }
  .kb-grid { grid-template-columns: 1fr; }
  .who { display: none; }          /* the name is in the menu; the screen is not */
}

/* ---------- knowledge base ---------- */
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.kb-card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; color: inherit; text-decoration: none;
}
.kb-card:hover { border-color: var(--brand); }
.kb-card.pinned { border-left: 3px solid var(--brand); }
.kb-card h3 { margin: 6px 0 4px; font-size: 15px; line-height: 1.35; }
.kb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kb-cat {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.kb-sum { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.kb-meta { font-size: 12px; color: var(--muted); }
.kb-pin { color: var(--brand); }
.kb-lede { font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
.kb-body { line-height: 1.7; }
.kb-body h4 { margin: 18px 0 6px; font-size: 15px; }
.kb-roles { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ---------- managed dropdowns and saved passwords ---------- */
.lookup-field { display: flex; gap: 6px; align-items: center; }
.lookup-field select { flex: 1 1 auto; min-width: 0; }
.lookup-field .lookup-add { white-space: nowrap; flex: 0 0 auto; }

.secret { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.secret-value { font-family: ui-monospace, Consolas, monospace; letter-spacing: .5px; }

/* ---------- rich text (product description) ----------
   A table pasted from Word keeps its shape here, in the preview, on the
   printed page and in the email, all styled the same way. */
.rte {
  min-height: 150px; max-height: 420px; overflow: auto;
  padding: 9px 11px; border: 1px solid #ccd4e2; border-radius: 7px;
  background: #fff; font-size: 14px; line-height: 1.55;
}
.rte:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(31,95,191,.15); }
.rte:empty::before { content: attr(data-placeholder); color: #98a2b3; }
.rte-bar { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.rte-bar .btn-plain { padding: 3px 9px; }

.rte table, .doc-desc table, .rich table { border-collapse: collapse; margin: 6px 0; }
.rte td, .rte th,
.doc-desc td, .doc-desc th,
.rich td, .rich th { border: 1px solid var(--line); padding: 4px 7px; vertical-align: top; }
.doc-desc th, .rich th, .rte th { background: #f4f6fa; text-align: left; }
.rte ul, .rte ol, .doc-desc ul, .doc-desc ol, .rich ul, .rich ol { margin: 4px 0 4px 18px; }
.rte p, .doc-desc p, .rich p { margin: 4px 0; }

/* Specification drawings printed with the quotation. */
.spec-figure { margin: 10px 0 0; padding: 0; }
.spec-figure img { max-width: 100%; max-height: 420px; border: 1px solid var(--line); border-radius: 4px; }
.spec-figure figcaption { margin-top: 3px; }
.qp-doc .spec-figure img { max-height: 150px; }
@media print {
  /* Nothing of the application prints - no navigation, no page heading, no
     action buttons, no filter bars, no status tiles, no flash messages. What
     comes out of the printer is the document and nothing else. */
  .sidebar, .topbar, .no-print,
  .page-header, .filters, .tiles, .flash { display: none !important; }

  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .doc { padding: 0; max-width: none; }
  .card { border: none; padding: 0; margin: 0; box-shadow: none; }

  /* A quotation that runs onto a second page keeps its column headings, and
     does not split a line item, the totals or the signature across the break. */
  table.items thead { display: table-header-group; }
  table.items tr, .doc-desc, .totals, .sign-block, .lh, .spec-figure { page-break-inside: avoid; }
  .spec-figure img { max-height: 90mm; }

  /* Printed paper has no links to click. */
  a { color: inherit; text-decoration: none; }

  @page { margin: 14mm 12mm; }
}

/* ---------- quotation form with a live preview beside it ----------
   The preview sits on the left and stays put while the form on the right is
   scrolled. Below 1150px there is not enough width for two readable columns,
   so the preview moves above the form instead. */
/* Flex, not grid: the preview is given a fixed width it cannot exceed and the
   form takes whatever is left. A grid track lets a sticky child paint outside
   its column and over the form underneath - this cannot. */
.quote-split { display: flex; align-items: flex-start; gap: 14px; }

.quote-preview-pane {
  flex: 0 0 340px; width: 340px; max-width: 340px; overflow: hidden;
  position: sticky; top: 12px; max-height: calc(100vh - 24px);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 11px 8px;
}
.quote-form { flex: 1 1 auto; min-width: 0; }

/* Only give up on two columns when the screen genuinely cannot hold them. */
@media (max-width: 760px) {
  .quote-split { flex-direction: column; }
  .quote-preview-pane {
    position: static; max-height: 560px;
    flex: 0 0 auto; width: 100%; max-width: none;
  }
}
.qp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.qp-format { width: auto; min-width: 0; max-width: 62%; padding: 3px 6px; font-size: 11px; }
.qp-note { margin: 6px 0 0; font-size: 11px; line-height: 1.3; }

/* The document is laid out at its real proportions and then scaled down as a
   whole, so the printed column widths shrink with it and the page fits the
   panel. Crushing the columns individually turns a description into one letter
   per line; scaling keeps it a true miniature of the page. */
.qp-doc {
  flex: 1; overflow: auto; padding: 14px 16px; font-size: 14px; line-height: 1.4;
  border: 1px solid var(--line); border-radius: 6px;
  zoom: 0.6;                     /* Chrome, Edge, Safari, Firefox 126+ */
}
.qp-doc .doc-head { padding-bottom: 10px; margin-bottom: 12px; }
.qp-doc .doc-parties { gap: 14px; margin-bottom: 12px; }
/* The item table is sized for a printed page and will not fit a narrow panel.
   Rather than crushing its columns - which turns the description into one
   letter per line - the document keeps its proportions and the panel scrolls. */
.qp-doc table.items th, .qp-doc table.items td { padding: 3px 4px; }
.qp-doc .doc-head { flex-wrap: wrap; }
.qp-doc .totals div { padding: 2px 0; }
.qp-doc .lh-banner { max-height: 60px; }
.qp-doc .lh-logo { max-height: 34px; max-width: 70px; }
.qp-doc .sign-block { transform: scale(.8); transform-origin: left top; }

/* ---------- proposal format ---------- */
/* The subject line carries the title now - a quotation is identified by its
   number and subject, not by a banner headline across the page. */
.prop-subject { font-weight: 700; margin: 16px 0 14px; font-size: 14px; }
.prop-subject::after { content: ''; display: block; border-bottom: 1px solid var(--line); margin-top: 6px; }
table.prop-table { border-collapse: collapse; width: 100%; margin-top: 8px; }
table.prop-table th, table.prop-table td { border: 1px solid #999; padding: 7px 9px; vertical-align: top; }
table.prop-table th { background: #f4f6fa; font-size: 12px; }
table.prop-table tr.prop-total td { background: #f8fafd; }