/* ==========================================================================
   Invoice document — shared style variants (Standard / Modern / Classic)
   GLOBAL (Peter, 30 Jun 2026): the .est-doc invoice preview is ONE shared
   design across the template editor (settings-invoice-template-edit.html) and
   the create flow (invoice-create.html → invoice / estimate / recurring). A
   style or feature change to the document in one is reflected in the other and
   vice versa. These variants live here so BOTH pages get them by linking this
   one file. Standard is the base look; Modern + Classic restyle via a modifier
   class on .est-doc. (!important is used only where it must beat the document's
   inline styles.)
   ========================================================================== */

/* ---------- Modern — minimal & airy: accent as thin rules, no filled blocks, roomier ---------- */
.est-doc--modern table { margin-top: 36px !important; }
.est-doc--modern thead tr { background: transparent !important; }
.est-doc--modern thead th {
  background: var(--color-surface) !important;          /* white header, accent only as a rule */
  border-bottom: 2px solid var(--est-accent, #f5f5f7) !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--color-text-muted) !important;
  padding-top: 0 !important;
  padding-bottom: 12px !important;
}
.est-doc--modern tbody td { padding-top: 15px !important; padding-bottom: 15px !important; }
.est-doc--modern h2 { font-weight: var(--weight-regular) !important; font-size: 34px !important; letter-spacing: -0.015em; }
.est-doc--modern .est-terms {
  background: transparent !important;                   /* no filled box — a left accent rule instead */
  border-radius: 0 !important;
  border-left: 3px solid var(--est-accent, #f5f5f7);
  padding: 2px 0 2px 14px !important;
}

/* ---------- Classic — formal & framed: top accent rule, full bordered grid, centred head ---------- */
.est-doc--classic { border-top: 3px solid var(--est-accent, #f5f5f7) !important; }
.est-doc--classic h2 { text-align: center; text-transform: uppercase; letter-spacing: 0.14em; }
.est-doc--classic #est-subtext { text-align: center; }
.est-doc--classic table { border: 1px solid var(--color-border); margin-top: 24px !important; }
.est-doc--classic thead th { border: 1px solid var(--color-border) !important; }
.est-doc--classic tbody td { border: 1px solid var(--color-border) !important; }
.est-doc--classic .est-terms {
  background: transparent !important;                   /* bordered, not filled */
  border: 1px solid var(--color-border);
}

/* ---------- Row padding — roomier rows across every invoice document (GLOBAL, Peter 30 Jun 2026) ---------- */
.est-doc tbody td,
.cv-doc tbody td { padding-top: 18px !important; padding-bottom: 18px !important; }   /* was 12px — felt squashed */

/* ---------- Standard — round the grey header strip to match the Add-logo dotted box (radius-sm) ---------- */
.est-doc--standard table { border-collapse: separate !important; border-spacing: 0; }
/* The accent must live on the TH cells (not the TR) or the rounded corners don't show (Peter, 1 Jul). */
.est-doc--standard thead tr { background: transparent !important; }
.est-doc--standard thead th { background: var(--est-accent, #f5f5f7); }
.est-doc--standard thead th:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.est-doc--standard thead th:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.est-doc--standard tbody td { border-bottom: 1px solid var(--color-border); }   /* row separators (tr borders don't show with border-collapse:separate) */

/* ---------- Mobile reflow — SHARED (create flow · template editor · detail send preview) ----------
   A real reflow (centred), not the desktop crushed into 390px: the header stacks and each line item
   becomes a card — the DESCRIPTION goes full-width on its own line, then Qty · Rate · VAT · Total sit
   in a row beneath it (Peter, 7 Jul). Cells need .est-desc / data-label hooks on the tds.
   (!important beats the document's inline td styles.) */
.est-doc--mobile { margin: 0 auto; }
.est-doc--mobile .est-head { flex-direction: column; gap: 6px; }
.est-doc--mobile table { margin-top: 20px; }
.est-doc--mobile thead { display: none; }
.est-doc--mobile tbody { display: block; }
.est-doc--mobile tbody tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 14px; border: var(--border-width) solid var(--color-border) !important; border-radius: var(--radius-sm); background: var(--est-accent, #f5f5f7); color: var(--est-ink, inherit); padding: 10px 14px; margin-bottom: 10px; }
.est-doc--mobile tbody td { display: block; padding: 0 !important; text-align: left !important; border: 0 !important; width: auto !important; }
/* the description cell = the first td (create's JS rows carry .est-desc on an inner span, so key on position) */
.est-doc--mobile tbody td:first-child,
.est-doc--mobile tbody td.est-desc { flex: 1 1 100%; font-weight: var(--weight-medium); color: var(--est-ink, var(--color-text)); padding-bottom: 8px !important; }
.est-doc--mobile tbody td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); color: var(--est-ink-muted, var(--color-text-muted)); margin-bottom: 2px; }
.est-doc--mobile .est-summary { flex-direction: column; gap: 14px; }
.est-doc--mobile .est-summary > div { width: 100% !important; max-width: none !important; }
/* Each variant keeps its own card look on mobile (accent fill on Standard, plain bordered on the rest). */
.est-doc--modern.est-doc--mobile tbody tr,
.est-doc--classic.est-doc--mobile tbody tr { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; }