/* Client documents on SNC letterhead. Shared by the in-app editor and the PDF export, like
   invoice.css, and built from the same parts: logo, brand stripes, kickers and field styles. */

.doc-page, .doc-page * {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.doc-page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 210mm;
  min-height: 297mm;
  padding: 52px 56px 0;
  background: #fff;
  font-family: 'Lexend', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: #0F2A45;
  text-align: left;
}

/* Fields take their type from where they sit, so a heading's input looks like the heading. */
.doc-page .f { font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; color: inherit; }
.doc-page .f.w { width: calc(100% + 8px); }
.doc-page .ph { color: #A3B1BE; font-weight: 400; }
.doc-edit .f:hover { background: #F1F5F8; }
.doc-edit .f:focus { background: #E6F3F5; }
.doc-edit .f.fx { cursor: default; }
.doc-edit .f.fx:hover { background: transparent; }
.doc-edit .f[data-ph]:empty::before { content: attr(data-ph); color: #A3B1BE; white-space: pre-wrap; }
.doc-edit input[type=date].f { cursor: pointer; }
.doc-edit input[type=date].f::-webkit-calendar-picker-indicator { margin-left: 2px; opacity: 0; cursor: pointer; }
.doc-edit input[type=date].f:hover::-webkit-calendar-picker-indicator,
.doc-edit input[type=date].f:focus::-webkit-calendar-picker-indicator { opacity: .5; }
.doc-page .nowrap { white-space: nowrap; }

/* Header */
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.doc-head-r { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; text-align: right; }
.doc-title { font-size: 19px; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.doc-page .doc-title .f { width: 270px; text-align: right; }
.doc-head .inv-meta { margin-top: 12px; }
.doc-subject { margin: 0 0 22px; font-size: 20px; font-weight: 600; line-height: 1.3; }

/* Prepared for / Prepared by */
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 8px; }
.doc-party { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.doc-party-name { font-size: 13px; font-weight: 600; }

/* Sections */
.doc-body { padding-bottom: 36px; }
.doc-h {
  margin: 24px 0 10px;
  padding-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  background:
    linear-gradient(#08889E, #08889E) left bottom / 28px 2px no-repeat,
    linear-gradient(#DCE3EA, #DCE3EA) left bottom / 100% 1px no-repeat;
  break-after: avoid;
}
.doc-body > .doc-h:first-child, .doc-body > .doc-block:first-child > .doc-h { margin-top: 4px; }
.doc-text { line-height: 1.6; }
.doc-text p { margin: 0 0 8px; }
.doc-text ul, .doc-text ol { margin: 0 0 8px; padding-left: 20px; }
.doc-text li { margin: 0 0 3px; padding-left: 2px; }
.doc-text li::marker { color: #08889E; }
.doc-text b { font-weight: 600; }
.doc-gap { height: 14px; }
.doc-text .f { min-height: 38px; }

/* Tables */
/* Short tables stay on one page. Longer ones break, with the header repeated on each page. */
.doc-table { width: 100%; margin: 4px 0 10px; border-collapse: collapse; table-layout: fixed; }
.doc-table.keep { break-inside: avoid; }
.doc-table th {
  padding: 8px 10px;
  background: #0F2A45; color: #fff;
  font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-align: left;
}
.doc-table td { padding: 8px 10px; border-bottom: 1px solid #DCE3EA; vertical-align: top; overflow-wrap: anywhere; }
.doc-table td:empty::after { content: '\00a0'; }
.doc-table.no-head { border-top: 1px solid #DCE3EA; }
.doc-table .r { text-align: right; }
.doc-table b { font-weight: 600; }
.doc-table tr { break-inside: avoid; }
.doc-table th .f::placeholder { color: rgba(255, 255, 255, .5); }
.doc-edit .doc-table th { position: relative; }
.doc-edit .doc-table th .f:hover { background: rgba(255, 255, 255, .1); }
.doc-edit .doc-table th .f:focus { background: rgba(255, 255, 255, .18); }
.doc-edit .doc-table td { padding: 6px 10px; }
.doc-last { position: relative; }

/* Timeline */
.doc-tl col.c-date { width: 100px; }
.doc-tl col.c-len { width: 66px; }
.doc-tl col.c-owner { width: 100px; }
.doc-tl td { padding-left: 8px; padding-right: 8px; }
.doc-tl th { padding-left: 8px; padding-right: 8px; }
.doc-edit .doc-tl td { padding: 6px; }
.doc-page .tl-task { font-weight: 500; }
.doc-page .tl-desc { margin-top: 2px; font-size: 11px; color: #5B6E80; }
/* An empty end date is a milestone: no date to show. */
.doc-edit input[type=date].f[data-empty]:not(:focus)::-webkit-datetime-edit { color: transparent; }

.tl-chart { margin: 14px 0 10px; break-inside: avoid; }
.tl-axis, .tl-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.tl-ticks { position: relative; height: 18px; overflow: hidden; font-size: 9.5px; color: #5B6E80; }
.tl-ticks span { position: absolute; top: 0; padding-left: 4px; white-space: nowrap; }
.tl-rows { position: relative; border-top: 1px solid #DCE3EA; border-bottom: 1px solid #DCE3EA; }
.tl-lines { position: absolute; top: 0; bottom: 0; left: 162px; right: 0; }
.tl-lines i { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #DCE3EA; }
.tl-row { position: relative; align-items: center; height: 24px; }
.tl-row + .tl-row { border-top: 1px solid #F1F5F8; }
.tl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.tl-track { position: relative; height: 100%; }
.tl-bar { position: absolute; top: 7px; height: 10px; min-width: 3px; border-radius: 2px; background: #08889E; }
.tl-ms { position: absolute; top: 7px; width: 10px; height: 10px; margin-left: -5px; background: #B08D3A; transform: rotate(45deg); }

/* Signatures */
.doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 22px 0 8px; break-inside: avoid; }
.sign-col { display: flex; flex-direction: column; min-width: 0; }
.sign-party { font-size: 12.5px; font-weight: 600; }
.sign-line { height: 44px; border-bottom: 1px solid #0F2A45; }
.sign-cap { margin: 4px 0 12px; font-size: 10px; color: #5B6E80; }
.sign-grid { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 10px; align-items: end; }
.sign-val { min-height: 20px; padding-bottom: 2px; border-bottom: 1px solid #DCE3EA; }

/* Page breaks */
.doc-break { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #A3B1BE; }
.doc-break::before, .doc-break::after { content: ''; flex: 1; border-top: 1px dashed #C5D0DA; }
.doc-pb { margin: 18px -56px; border-top: 1px dashed #DCE3EA; break-after: page; }

/* Footer, on screen. The PDF repeats it on every page instead. */
.doc-foot {
  margin-top: auto;
  padding: 18px 0 22px;
  border-top: 1px solid #DCE3EA;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 10px; color: #5B6E80;
}

/* Editing tools: they sit in the page margin and only show on the section you're on. */
.doc-block { position: relative; }
.doc-tools {
  position: absolute; top: 0; left: -44px;
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0; transition: opacity .12s;
}
.doc-block:hover > .doc-tools, .doc-block:focus-within > .doc-tools { opacity: 1; }
.doc-tools button, .doc-rm, .doc-rm-col {
  width: 22px; height: 22px; padding: 0;
  border: none; border-radius: 50%;
  background: #EEF2F5; color: #5B6E80;
  font-family: inherit; font-size: 12px; line-height: 22px; text-align: center;
  cursor: pointer;
}
.doc-tools button:hover, .doc-rm:hover { background: #DCE3EA; color: #0F2A45; }
.doc-tools button:disabled { opacity: .35; cursor: default; }
.doc-tools [data-action="del-block"]:hover { background: #F8E9E5; color: #A8452F; }
.doc-rm { position: absolute; right: -32px; top: 50%; transform: translateY(-50%); opacity: 0; }
.doc-table tr:hover .doc-rm, .doc-rm:focus { opacity: 1; }
.doc-rm-col { position: absolute; top: -11px; right: 4px; width: 18px; height: 18px; line-height: 18px; font-size: 11px; opacity: 0; }
.doc-table th:hover .doc-rm-col, .doc-rm-col:focus { opacity: 1; }
.doc-rm-col:hover { background: #F8E9E5; color: #A8452F; }
.doc-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 8px; }
.doc-ctl .inv-addline { margin-top: 0; }
.doc-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #5B6E80; }
.doc-opt input[type=checkbox] { margin: 0; accent-color: #08889E; }
.doc-opt .f { width: 108px; }
.doc-hint, .doc-empty { margin: 8px 0; font-size: 11px; color: #A3B1BE; }

/* PDF export */
/* Plain blocks, so a margin at the foot of the last page is dropped instead of starting a blank one. */
body.inv-print .doc-page { page: doc; display: block; width: auto; min-height: 0; padding: 0 56px; }
body.inv-print .doc-body { padding-bottom: 0; }
body.inv-print .doc-foot, body.inv-print .doc-page > .inv-band { display: none; }
body.inv-print .doc-pb { margin: 0; border: 0; }

/* Every page of a document gets the footer and the brand band from the invoice. The text on the
   left comes from the document itself (see SNCDocument.render). */
@page doc {
  size: A4;
  margin: 15mm 0 20mm;
  @bottom-left {
    width: 50%;
    padding: 7mm 0 0 56px;
    vertical-align: top;
    font-family: 'Lexend', sans-serif; font-size: 9px; color: #5B6E80;
    background: linear-gradient(#0F2A45, #0F2A45) left bottom / 100% 8px no-repeat;
  }
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    width: 50%;
    padding: 7mm 56px 0 0;
    vertical-align: top;
    text-align: right;
    font-family: 'Lexend', sans-serif; font-size: 9px; color: #5B6E80;
    background: linear-gradient(to right, #0F2A45 calc(100% - 168px), #08889E calc(100% - 168px) calc(100% - 48px), #B08D3A calc(100% - 48px)) right bottom / 100% 8px no-repeat;
  }
}