/* ==========================================================================
   Tally - print.css (Phase 4: the print page and the Customise panel)
   Loaded after app.css / quotes.css and uses their tokens. Three parts:
     1. the document (.print-doc) as it looks on screen and on paper,
     2. the panel component (.pp-*), shared with the Settings screen's
        "Print template" editor, so it is also linked from base.html,
     3. @media print: black on white, page-break rules, panel hidden.
   The document is ALWAYS white with black text, whatever the screen theme,
   because it is a preview of the paper.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Screen layout: document centred, panel on the right (desktop) or a
      bottom sheet toggled by "Customise" (phone)
   -------------------------------------------------------------------------- */
.print-body { background: var(--color-bg); }
.print-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  padding-bottom: calc(var(--nav-height) + var(--space-4));   /* clear the phone bar */
}

.print-doc {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 24px;
  background: #ffffff;
  color: #111111;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.print-doc [hidden] { display: none !important; }
.pre-line { white-space: pre-line; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Header: company (logo, name, contact) left; title and meta table right. */
.doc-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 2px solid #111111;
}
.doc-company { flex: 1 1 240px; min-width: 0; }
.doc-logo { display: block; max-height: 24mm; max-width: 60mm; margin-bottom: var(--space-2); }
.doc-company-name { font-size: 18px; font-weight: 700; }
.doc-contact { font-size: 13px; color: #333333; margin-top: var(--space-1); }
.doc-address { white-space: pre-line; }
.doc-meta { flex: 0 1 auto; min-width: 0; text-align: right; }
.doc-title { font-size: 28px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--space-1); }
.meta-table { margin-left: auto; border-collapse: collapse; font-size: 13px; }
.meta-table th { text-align: right; font-weight: 400; color: #555555; padding: 1px var(--space-2) 1px 0; }
.meta-table td { text-align: right; padding: 1px 0; font-variant-numeric: tabular-nums; }

/* Sections */
.doc-section { margin-bottom: var(--space-4); }
.section-title, .group-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #333333;
  margin-bottom: var(--space-2);
}
.customer-table { border-collapse: collapse; font-size: 14px; }
.customer-table th { text-align: left; font-weight: 400; color: #555555; padding: 1px var(--space-3) 1px 0; vertical-align: top; white-space: nowrap; }
.customer-table td { padding: 1px 0; vertical-align: top; }
.doc-muted { color: #666666; }
.doc-note { font-size: 13px; color: #333333; }
.doc-terms { font-size: 12px; color: #333333; }

/* Line tables: light grey borders, the name column takes the room. */
.line-group { margin-bottom: var(--space-3); }
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table th, .doc-table td {
  padding: 6px var(--space-2);
  border-bottom: 1px solid #d0d0d0;
  vertical-align: top;
}
.doc-table th { font-size: 12px; font-weight: 600; color: #555555; text-align: left; border-bottom: 1px solid #999999; }
.doc-table th:first-child, .doc-table td:first-child { padding-left: 0; }
.doc-table th:last-child, .doc-table td:last-child { padding-right: 0; }
.doc-table .col-qty, .doc-table .col-price, .doc-table .col-total { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.line-name { font-weight: 600; }
.line-options, .line-desc, .line-note, .line-billing { font-size: 12px; color: #555555; }
.line-note { font-style: italic; }
/* Phase 10 (QA obs. 2): "for 40 months" beside a discount's name in the totals block, kept when line notes are hidden */
.line-note-inline { font-size: 12px; color: #555555; font-style: italic; }
/* The "Discounts" group's title carries the group total at the right edge. */
.group-title .group-total { float: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The switch families (print.js toggles these classes on <article>). */
.hide-descriptions .line-desc { display: none; }
.hide-options .line-options { display: none; }
.hide-notes .line-note { display: none; }
.hide-prices .col-qty, .hide-prices .col-price { display: none; }
.totals-only .doc-lines { display: none; }
.hide-discount-group [data-group="discounts"] { display: none; }
.discounts-merged .discount-named { display: none; }
.print-doc:not(.discounts-merged) .discount-single { display: none; }

/* Totals: one block per bucket, right-aligned, the total row bold. */
.doc-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3) var(--space-4); }
.totals-block { flex: 0 1 300px; min-width: 0; }
.totals-table { width: 100%; border-collapse: collapse; }
.totals-table td { padding: 3px 0; border-bottom: 1px solid #e5e5e5; }
.totals-table .total-row td { font-weight: 700; border-bottom: 0; border-top: 2px solid #111111; padding-top: 6px; }

.doc-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid #d0d0d0;
  font-size: 12px;
  color: #555555;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Panel frame (print page only). On a phone it is a bottom sheet.
   -------------------------------------------------------------------------- */
.print-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  max-height: 55vh;               /* leaves the document in view while a switch is toggled */
  overflow-y: auto;
  padding: var(--space-3);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
  transform: translateY(105%);
  transition: transform 0.2s;
}
body.panel-open .print-panel { transform: none; }
.pp-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.pp-actions-row { display: flex; align-items: center; gap: var(--space-2); }
.pp-actions-row .save-indicator { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.pp-actions .error { margin: 0; }
.pp-reset-all { margin-top: var(--space-3); }

/* The phone bar: Back, Customise, Print, fixed at the bottom. */
.print-phonebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--nav-height);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.print-phonebar .link-back { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   2. Panel component (.pp-*): also used by Settings > Print template
   -------------------------------------------------------------------------- */
.pp-group { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.pp-group:last-child { border-bottom: 0; }
.pp-group legend { font-size: 13px; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-1); }

/* A switch row: text left, 24px checkbox right, 44px tall, whole row tappable. */
.pp-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap);
  cursor: pointer;
}
.pp-switch-text { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.pp-switch-text .hint { font-weight: 400; }
.pp-switch input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--color-primary); }
.pp-switch:has(input:disabled) { opacity: 0.6; cursor: default; }

/* Editable texts: label and "Reset this text" on one line, the box under. */
.pp-text { margin: var(--space-2) 0; }
.pp-text-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 32px; }
.pp-text-head label { font-size: 14px; font-weight: 600; }
.pp-reset {
  min-height: 32px;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pp-text input, .pp-text textarea {
  width: 100%;
  min-height: var(--tap);
  font-size: 16px;                /* no iPhone zoom on focus */
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}
.pp-text textarea { resize: vertical; }
.pp-text input:focus, .pp-text textarea:focus { border-color: var(--color-primary); }
.pp-text .hint { margin-top: var(--space-1); }

/* Section order: name left, up / down buttons right. */
.pp-order-row { display: flex; align-items: center; gap: var(--space-1); min-height: var(--tap); }
.pp-order-name { flex: 1 1 auto; font-weight: 600; }

/* --------------------------------------------------------------------------
   My templates (.pt-*, Phase 4b): the user's saved layouts at the top of the
   panel and of Settings > Print template. Rows are compact and wrap on a
   phone: the name on one line, the four buttons under it when there is no
   room beside it. Every button is a .btn, so 44px tall; the inputs are 16px.
   -------------------------------------------------------------------------- */
.pt-section { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.pt-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-1);
}
.pt-list { display: flex; flex-direction: column; }
.pt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-height: var(--tap);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}
.pt-row:last-child { border-bottom: 0; }
.pt-name { flex: 1 1 120px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.pt-buttons { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-left: auto; }

/* The inline rename form and the "Save as template" form share one input style. */
.pt-rename, .pt-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); flex: 1 1 100%; }
.pt-input {
  flex: 1 1 140px;
  min-width: 0;
  min-height: var(--tap);
  font-size: 16px;                /* no iPhone zoom on focus */
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}
.pt-input:focus { border-color: var(--color-primary); }
.pt-save { margin-top: var(--space-2); }
.pt-save-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--space-1); }
.pt-limit { margin-top: var(--space-2); }
.pt-error { margin: var(--space-2) 0 0; }

/* The Settings screen's template editor sits in a card with its Save button under it. */
.print-template-editor { max-width: 560px; }

/* The "Quote not found" page of /print/{id} (a class, not an inline style: the CSP blocks those). */
.print-not-found { padding: 2rem; }

/* --------------------------------------------------------------------------
   Desktop (900px and up): the panel is a sticky right column
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .print-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .print-doc { flex: 0 1 820px; padding: 48px; }
  .print-panel {
    position: sticky;
    top: var(--space-4);
    flex: 0 0 340px;
    max-height: calc(100vh - 2 * var(--space-4));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .pp-sheet-close, .print-phonebar { display: none; }
}

/* --------------------------------------------------------------------------
   3. Paper
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 18mm; }
  html, body.print-body { background: #ffffff; color: #000000; }
  .print-layout { display: block; padding: 0; }
  .print-doc {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #000000;
    font-size: 12pt;
  }
  .print-doc * { color: #000000 !important; background: transparent !important; box-shadow: none !important; }
  .doc-logo { max-height: 24mm; }
  .doc-table th, .doc-table td, .totals-table td, .doc-footer { border-color: #cccccc !important; }
  .doc-header, .doc-table th, .totals-table .total-row td { border-color: #000000 !important; }
  .line-options, .line-desc, .line-note, .line-billing, .doc-terms, .doc-footer, .doc-contact, .meta-table, .doc-table th { font-size: 10pt; }

  /* Page breaks: never inside a line row or a totals block; a heading never
     sits alone at the foot of a page; the column headings repeat. */
  .line-row, .totals-block, .customer-table tr { break-inside: avoid; page-break-inside: avoid; }
  .group-title, .section-title { break-after: avoid; page-break-after: avoid; }
  .doc-table thead { display: table-header-group; }
  .doc-totals { display: block; }
  .totals-block { margin-left: auto; margin-bottom: 6mm; max-width: 90mm; }

  .no-print, .print-panel, .print-phonebar, .toast, .dialog { display: none !important; }
}