/*
  GST Invoice.

  One idea here, and the layout follows from it: the document is the form. The
  left rail holds the handful of decisions that are not written on the page -
  invoice or quotation, where the supply lands, whether to round off - and the
  stage holds a real A4 sheet at 1:1 that you type into. There is no second
  column mirroring the first, so there is nothing for the two to disagree about.

  Colours come from app.css. The one exception is the sheet itself: paper is
  white and its ink is dark in both themes, because an invoice is a printed
  object and previewing one in dark mode would be a lie. Those values live in
  --doc-* variables on .doc so the exception is visible.

  The editing chrome obeys the same rule. A field at rest is indistinguishable
  from print; it lights up under the pointer and under focus, and it goes away
  entirely when the page is printed. Everything the arithmetic produced is grey
  and inert - you cannot put a caret in a total.
*/

/* ---------- the settings rail ---------- */

.inv-cardnote {
  margin: -2px 0 12px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.field { display: block; min-width: 0; }
.field > span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.field > span .req { color: var(--signal); }

.field input[type="text"],
.field select {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 7px 9px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.field-hint {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 3px;
}
.field.is-bad select,
.field.is-bad input { border-color: var(--signal); }

.inv-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 0;
  font-size: 13.5px;
}
.inv-check input[type="checkbox"] {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: var(--signal);
  flex: none;
}

/* ---------- document type ---------- */

.inv-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.inv-kind label {
  background: var(--card);
  padding: 9px 8px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
}
.inv-kind input { position: absolute; opacity: 0; width: 0; height: 0; }
.inv-kind label:has(input:checked) { background: var(--ink); color: var(--card); }
.inv-kind label:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: -2px; }

.inv-kindnote { margin: 9px 0 0; font-size: 12px; color: var(--ink-3); }

.controls .btn + .btn { margin-top: 8px; }

.inv-savestate {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.inv-savestate.is-dirty { color: var(--warn); }
.inv-savestate.is-saved { color: var(--ok); }

.inv-runningtotal {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-2);
}
.inv-runningtotal b { color: var(--ink); font-size: 14px; }

/* Problems, listed where the buttons are - there is no form column left to
   hang a message beside a field, so each entry jumps to its field instead. */
.inv-problems { list-style: none; margin: 12px 0 0; padding: 0; }
.inv-problems li { margin-bottom: 4px; }
.inv-problems button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--signal);
  padding: 2px 0 2px 8px;
  cursor: pointer;
}
.inv-problems button:hover { color: var(--signal); }
.inv-problems .more { font-size: 11.5px; color: var(--ink-3); padding-left: 10px; }

/* ---------- logo ---------- */

.inv-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inv-logo img {
  max-width: 120px;
  max-height: 48px;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 4px;
}

/* The split the place of supply produced, stated where it is chosen. */
.inv-split {
  margin: 10px 0 4px;
  border-left: 3px solid var(--ok);
  background: var(--paper);
  padding: 8px 11px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.inv-split b { color: var(--ink); font-weight: 600; }

/* ---------- saved documents ---------- */

.inv-saved { list-style: none; margin: 0; padding: 0; }
.inv-saved li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-2);
  font-size: 13px;
}
.inv-saved li.is-open { border-left: 2px solid var(--signal); padding-left: 8px; margin-left: -10px; }

.inv-saved .row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inv-saved .num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-saved .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; flex: none; }
.inv-saved .row2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}
.inv-saved .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-saved .kind {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0 4px;
  flex: none;
}
.inv-saved .kind--quotation { color: var(--warn); }
.inv-saved .kind--invoice { color: var(--ok); }
.inv-saved .acts { display: flex; gap: 6px; margin-top: 6px; }

.inv-empty {
  font-size: 12.5px;
  color: var(--ink-3);
  border: 1px dashed var(--rule);
  padding: 12px;
  margin: 0;
}

/* ---------- the stage ---------- */

.inv-howto {
  margin: 0 0 10px;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.inv-howto b { color: var(--ink); font-weight: 600; }

/*
  The sheet scrolls sideways inside this box rather than letting the page do it.
  `contain: paint` is load-bearing, not decoration: without it Chrome lets the
  sheet's width escape the overflow container and the whole PAGE scrolls
  sideways into a few hundred pixels of dead space.
*/
.inv-paperwrap {
  overflow: auto;
  contain: paint;
  background: transparent;
}
.inv-previewnote { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* ---------- the document itself ---------- */

.doc {
  /* Paper, deliberately, in both themes. */
  --doc-ink: #0d1b2a;
  --doc-muted: #5a6b7b;
  --doc-rule: #b7c2cb;
  --doc-fill: #eff2f4;
  --doc-signal: #d62246;
  --doc-hover: #eef3f8;
  --doc-focus: #fff6d5;

  width: 210mm;
  min-height: 297mm;
  padding: 11mm 10mm;
  background: #fff;
  color: var(--doc-ink);
  font-family: var(--sans);
  font-size: 9.2pt;
  line-height: 1.35;
  transform: scale(var(--doc-scale, 1));
  transform-origin: top left;
  border: 1px solid var(--doc-rule);
  box-shadow: 0 1px 10px rgba(13, 27, 42, 0.10);
}

.doc .d-frame { border: 1px solid var(--doc-ink); }
.doc .d-pad { padding: 7px 9px; }

.doc .d-head { display: flex; gap: 0; align-items: stretch; border-bottom: 1px solid var(--doc-ink); }
.doc .d-head > div:first-child { flex: 1 1 60%; min-width: 0; border-right: 1px solid var(--doc-rule); }
.doc .d-head > div:last-child { flex: 0 0 38%; }

.doc .d-seller { display: flex; gap: 10px; align-items: flex-start; }
.doc .d-seller img { max-width: 30mm; max-height: 15mm; }
.doc .d-who { min-width: 0; flex: 1 1 auto; }
.doc h1 { font-size: 13pt; margin: 0 0 3px; line-height: 1.2; }
.doc .d-lines { color: var(--doc-muted); white-space: pre-line; }
.doc .d-contacts { white-space: normal; }
.doc .d-sep { color: var(--doc-rule); }
.doc .d-id { margin-top: 3px; font-weight: 600; }
.doc .d-id span { font-family: var(--mono); font-size: 8.6pt; }

.doc .d-title {
  font-family: var(--sans);
  font-size: 15pt;
  font-weight: 700;
  color: var(--doc-signal);
  text-align: right;
  margin: 0;
  line-height: 1.1;
}
.doc .d-sub { text-align: right; font-size: 7pt; color: var(--doc-muted); letter-spacing: 0.06em; margin: 0; }

.doc .d-meta { margin-top: 6px; }
.doc .d-meta div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 1px 0; }
.doc .d-meta dt, .doc .d-meta .k { color: var(--doc-muted); flex: none; }
.doc .d-meta .v { font-weight: 600; text-align: right; font-family: var(--mono); font-size: 8.4pt; min-width: 0; }

.doc .d-parties { display: flex; border-bottom: 1px solid var(--doc-ink); }
.doc .d-parties > div { flex: 1 1 50%; min-width: 0; }
.doc .d-parties > div + div { border-left: 1px solid var(--doc-rule); }
.doc .d-cap {
  font-family: var(--mono);
  font-size: 6.8pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--doc-muted);
  margin-bottom: 3px;
}
.doc .d-name { font-weight: 700; font-size: 10pt; }

.doc table { width: 100%; border-collapse: collapse; }
.doc .d-items { font-size: 7.6pt; }
.doc .d-items th {
  background: var(--doc-fill);
  border-top: 1px solid var(--doc-ink);
  border-bottom: 1px solid var(--doc-ink);
  padding: 4px 3px;
  font-size: 6.6pt;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
  vertical-align: bottom;
}
.doc .d-items th.l { text-align: left; }
.doc .d-items th.c { text-align: center; }
.doc .d-items td { padding: 4px 3px; border-bottom: 1px solid var(--doc-rule); text-align: right; white-space: nowrap; vertical-align: top; }
.doc .d-items td.l { white-space: normal; text-align: left; }
.doc .d-items td.c { text-align: center; color: var(--doc-muted); }
.doc .d-items .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.doc .d-items tfoot td { background: var(--doc-fill); border-bottom: 1px solid var(--doc-ink); font-weight: 700; }

.doc .d-close { display: flex; gap: 12px; margin-top: 9px; }
.doc .d-close > div:first-child { flex: 1 1 56%; min-width: 0; }
.doc .d-close > div:last-child { flex: 0 0 40%; }

.doc .d-rates { font-size: 7.4pt; }
.doc .d-rates th { background: var(--doc-fill); padding: 3px; text-align: right; font-size: 6.6pt; text-transform: uppercase; }
.doc .d-rates th:first-child, .doc .d-rates td:first-child { text-align: left; }
.doc .d-rates td { padding: 3px; border-bottom: 1px solid var(--doc-rule); text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.doc .d-rates tfoot td { border-bottom: 1px solid var(--doc-ink); font-weight: 700; }

.doc .d-totals div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 4px; border-bottom: 1px solid var(--doc-rule); }
.doc .d-totals .k { color: var(--doc-muted); }
.doc .d-totals .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.doc .d-totals .grand { background: var(--doc-fill); border-bottom: 0; padding: 6px 4px; }
.doc .d-totals .grand .k { color: var(--doc-ink); font-weight: 700; font-size: 10pt; }
.doc .d-totals .grand .v { font-weight: 700; font-size: 11pt; }

.doc .d-words { display: flex; gap: 10px; background: var(--doc-fill); padding: 5px 6px; margin-top: 8px; }
.doc .d-words b { font-size: 9pt; }

.doc .d-pay { display: flex; gap: 12px; margin-top: 9px; }
.doc .d-pay > div:first-child { flex: 1 1 58%; min-width: 0; }
.doc .d-pay > div:last-child { flex: 0 0 38%; text-align: right; }
.doc .d-pay dl { display: grid; grid-template-columns: 24mm 1fr; gap: 1px 6px; margin: 0; }
.doc .d-pay dt { color: var(--doc-muted); }
.doc .d-pay dd { margin: 0; font-weight: 600; font-family: var(--mono); font-size: 8.2pt; overflow-wrap: anywhere; }
.doc .d-sign { margin-top: 14mm; border-top: 1px solid var(--doc-rule); padding-top: 3px; color: var(--doc-muted); font-size: 7.4pt; }

.doc .d-terms { margin-top: 9px; border-top: 1px solid var(--doc-rule); padding-top: 6px; color: var(--doc-muted); font-size: 7.4pt; white-space: pre-line; }
.doc .d-terms .d-note { margin-top: 4px; }
.doc .d-decl { margin-top: 5px; color: var(--doc-muted); font-size: 6.8pt; }

.doc .d-blank { color: var(--doc-muted); font-style: italic; }

/* ---------- the document as the editing surface ---------- */

/*
  A field at rest looks exactly like print. It tints under the pointer, and
  under focus it tints harder and takes the house accent as an outline. Nothing
  here changes the type, the spacing or the rules - move the mouse away and the
  sheet is a sheet again.
*/
.doc--edit [data-edit] {
  border-radius: 2px;
  outline-offset: 1px;
  cursor: text;
}
.doc--edit [data-edit]:hover { background: var(--doc-hover); }
.doc--edit [data-edit]:focus,
.doc--edit [data-edit]:focus-visible {
  background: var(--doc-focus);
  outline: 1.5px solid var(--doc-signal);
}
.doc--edit [data-edit].is-bad { box-shadow: inset 0 -1.5px 0 var(--doc-signal); }

/* An empty field says what belongs in it rather than leaving a hole. */
.doc--edit [data-edit].is-empty::before {
  content: attr(data-ph);
  color: var(--doc-muted);
  font-style: italic;
  font-weight: 400;
  pointer-events: none;
}

.doc--edit [data-multiline] { white-space: pre-line; }
.doc--edit h1[data-edit] { display: block; }
.doc--edit .d-lines[data-edit] { min-height: 1.35em; }

/* Table cells: the editable part fills the cell, so the whole cell is a target. */
.doc--edit .d-items td.l > [data-edit] { display: block; min-height: 1.3em; }
.doc--edit .d-items td.num > [contenteditable] { display: inline-block; min-width: 2.2em; text-align: right; }

/* A choice looks like the word it prints, not like a control. */
.doc--edit .d-pick {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0 1px;
  border-radius: 2px;
  max-width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.doc--edit .d-pick.is-empty { color: var(--doc-muted); font-style: italic; }
.doc--edit .d-pick option { color: #0d1b2a; background: #fff; font-style: normal; }
.doc--edit .d-state { max-width: 100%; }
/*
  A select sizes itself to its widest option, which is far more room than the
  value on screen needs and enough to push a cell into the column beside it.
  Inside the table they are pinned to the width of what they actually show.
*/
.doc--edit .d-items .d-pick {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: left;
  text-overflow: ellipsis;
}
.doc--edit .d-unit { width: 6.6mm; }
.doc--edit .d-discmode { width: 7mm; color: var(--doc-muted); }
.doc--edit .d-gst { width: 6.6mm; text-align: right; }

/*
  A date prints as "16 Sep 2026" and edits as a date input. At rest you see the
  printed form; take focus and the real control replaces it in the same box, so
  the sheet only stops looking like paper while you are actually changing it.
*/
.doc--edit .d-date { position: relative; display: inline-block; min-width: 84px; text-align: right; }
.doc--edit .d-dateinput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font: inherit;
  font-size: 8pt;
  color: var(--doc-ink);
  background: var(--doc-focus);
  border: 0;
  padding: 0 1px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.doc--edit .d-date:focus-within .d-dateinput { opacity: 1; outline: 1.5px solid var(--doc-signal); }
.doc--edit .d-date:focus-within .d-datetext { visibility: hidden; }
.doc--edit .d-date:hover .d-datetext { background: var(--doc-hover); border-radius: 2px; }

/* Buttons the document itself offers. Quiet until they are wanted. */
.doc--edit .d-actbtn {
  font-family: var(--mono);
  font-size: 7.2pt;
  line-height: 1;
  color: var(--doc-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 1px 1px;
  cursor: pointer;
}
.doc--edit .d-actbtn:hover:not(:disabled) { color: var(--doc-signal); border-color: var(--doc-signal); }
.doc--edit .d-actbtn:disabled { opacity: 0.25; cursor: not-allowed; }

.doc--edit .d-items .d-act { width: 8.4mm; text-align: right; white-space: nowrap; padding: 4px 0 0 0; }
.doc--edit .d-items tbody .d-act .d-actbtn { opacity: 0; transition: opacity 0.12s; }
.doc--edit .d-items tbody tr:hover .d-act .d-actbtn,
.doc--edit .d-items tbody tr:focus-within .d-act .d-actbtn { opacity: 1; }

.doc--edit .d-addrow td { border-bottom: 1px solid var(--doc-rule); padding: 3px; text-align: left; }
.doc--edit .d-addbtn { color: var(--doc-signal); border-color: var(--doc-rule); padding: 3px 7px; }

.doc--edit .d-capact { float: right; margin-top: -2px; }
.doc--edit .d-logoadd {
  width: 26mm;
  height: 13mm;
  border: 1px dashed var(--doc-rule);
  flex: none;
  color: var(--doc-muted);
}
.doc--edit .d-logoadd:hover { color: var(--doc-signal); border-color: var(--doc-signal); }

.doc--edit .d-items tr.is-bad td { background: color-mix(in srgb, var(--doc-signal) 6%, transparent); }

/* Column widths, once the editing columns are in. */
.doc .d-items th.c, .doc .d-items td.c { width: 5mm; white-space: nowrap; }
.doc .d-items .d-hsncol { width: 13mm; }
.doc--edit .d-items .d-qtycol { width: 17mm; }
.doc .d-items .d-ratecol { width: 15mm; }
.doc--edit .d-items .d-disccol { width: 16mm; }
.doc--edit .d-items .d-gstcol { width: 9mm; }

/* ---------- notices ---------- */

.inv-notice { margin-bottom: 14px; }
.inv-notice ul { margin: 6px 0 0; padding-left: 18px; }
.inv-notice li { margin-bottom: 2px; }
.inv-notice button { margin-top: 8px; }

/* ---------- print: the sheet on screen is the printed page ---------- */

@media print {
  .l-topbar, #site-nav, #site-promise, .controls, .fab,
  #notices, .inv-howto, .inv-previewnote { display: none !important; }

  html, body { background: #fff; }
  .layout { display: block; min-height: 0; }
  .stage { padding: 0; }
  .inv-paperwrap { border: 0; height: auto !important; overflow: visible; contain: none; }

  .doc {
    transform: none !important;
    /* fitDoc() pulls the sheet in by whatever the on-screen scale took off.
       On paper there is no scale, so the pull has to go too - left in, a
       negative right margin widens an auto-width box straight off the page. */
    margin: 0 !important;
    width: auto;
    min-height: 0;
    border: 0;
    box-shadow: none;
    padding: 0;
    font-size: 9.2pt;
  }

  /* Every trace of the editing surface, gone. */
  .doc--edit .d-act,
  .doc--edit .d-gstcol,
  .doc--edit .d-addrow,
  .doc--edit .d-capact,
  .doc--edit .d-logoadd { display: none !important; }
  .doc--edit [data-edit] { background: none !important; outline: 0 !important; box-shadow: none !important; }
  .doc--edit [data-edit].is-empty::before { content: '' !important; }
  .doc--edit .d-date:focus-within .d-datetext { visibility: visible; }
  .doc--edit .d-dateinput { display: none !important; }

  @page { size: A4 portrait; margin: 12mm; }
}

/* ---------- small additions used by this page ---------- */

/* Labels that a screen reader needs but the eye does not. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.notice--warn { border-left-color: var(--warn); }